/**
 * WP Article Decorator - Front-end CSS
 * 全装飾機能のフロントエンド用スタイル
 */

/* ============================================================
 * 共通変数
 * ============================================================ */
:root {
	--wad-radius     : 6px;
	--wad-border     : 1px solid #ddd;
	--wad-shadow     : 0 2px 8px rgba(0,0,0,.1);
	--wad-color-info    : #3b82f6;
	--wad-color-point   : #f59e0b;
	--wad-color-check   : #22c55e;
	--wad-color-caution : #f97316;
	--wad-color-warning : #ef4444;
}

/* ============================================================
 * コールアウトボックス
 * ============================================================ */
.wad-callout {
	display     : flex;
	align-items : flex-start;
	gap         : .75em;
	padding     : 1em 1.25em;
	border-left : 4px solid currentColor;
	border-radius : 0 var(--wad-radius) var(--wad-radius) 0;
	margin      : 1.5em 0;
}
.wad-callout__icon {
	font-size   : 1.25em;
	line-height : 1;
	flex-shrink : 0;
}
.wad-callout__body { flex: 1; }

.wad-callout--info    { color: var(--wad-color-info);    background: #eff6ff; }
.wad-callout--point   { color: var(--wad-color-point);   background: #fffbeb; }
.wad-callout--check   { color: var(--wad-color-check);   background: #f0fdf4; }
.wad-callout--caution { color: var(--wad-color-caution); background: #fff7ed; }
.wad-callout--warning { color: var(--wad-color-warning); background: #fef2f2; }

/* ============================================================
 * ボックス装飾
 * ============================================================ */
.wad-box {
	margin        : 1.5em 0;
	border-radius : var(--wad-radius);
	overflow      : hidden;
}
.wad-box__title {
	padding     : .6em 1em;
	font-weight : bold;
}
.wad-box__body  { padding: 1em; }

/* simple */
.wad-box--simple { border: var(--wad-border); }
.wad-box--simple .wad-box__title { background: #f5f5f5; border-bottom: var(--wad-border); }

/* fill */
.wad-box--fill { border: 1px solid #3b82f6; }
.wad-box--fill .wad-box__title { background: #3b82f6; color: #fff; }
.wad-box--fill .wad-box__body  { background: #fff; }

/* left-line */
.wad-box--left-line { border: var(--wad-border); border-left: 4px solid #3b82f6; }
.wad-box--left-line .wad-box__title { font-weight: bold; }

/* rounded */
.wad-box--rounded { border: var(--wad-border); border-radius: 12px; background: #f9f9f9; }
.wad-box--rounded .wad-box__title { background: transparent; }

/* dashed */
.wad-box--dashed { border: 2px dashed #bbb; }
.wad-box--dashed .wad-box__title { background: #fafafa; border-bottom: 1px dashed #bbb; }

/* ============================================================
 * リスト装飾
 * ============================================================ */
.wad-list {
	list-style  : none;
	padding-left: 0;
	margin      : 1em 0;
}
.wad-list li {
	position      : relative;
	padding-left  : 1.6em;
	padding-top   : .25em;
	padding-bottom: .25em;
}
.wad-list li::before {
	position    : absolute;
	left        : 0;
	top         : .25em;
	font-size   : 1em;
	line-height : 1;
}

.wad-list--check  li::before { content: '✅'; }
.wad-list--arrow  li::before { content: '▶'; color: #3b82f6; }
.wad-list--star   li::before { content: '⭐'; }
.wad-list--good   li::before { content: '⭕'; color: #22c55e; }
.wad-list--bad    li::before { content: '❌'; }

/* ============================================================
 * ステップ形式
 * ============================================================ */
.wad-steps          { margin: 1.5em 0; }
.wad-steps__item    {
	display       : flex;
	gap           : 1em;
	align-items   : flex-start;
	position      : relative;
	padding-bottom: 1.5em;
}
.wad-steps__item:not(:last-child)::after {
	content    : '';
	position   : absolute;
	left       : 19px;
	top        : 40px;
	bottom     : 0;
	width      : 2px;
	background : #e5e7eb;
}
.wad-steps__number {
	width       : 40px;
	height      : 40px;
	border-radius: 50%;
	background  : #3b82f6;
	color       : #fff;
	font-weight : bold;
	display     : flex;
	align-items : center;
	justify-content: center;
	flex-shrink : 0;
	font-size   : .95em;
}
.wad-steps__content { flex: 1; }
.wad-steps__title   { font-weight: bold; margin-bottom: .4em; display: block; }
.wad-steps__body    { color: #444; }

/* ============================================================
 * 画像フレーム
 * ============================================================ */
.wad-image {
	display    : inline-block;
	margin     : .5em auto;
	max-width  : 100%;
}
.wad-image img { display: block; max-width: 100%; }

.wad-image--border  img { border: 1px solid #ddd; }
.wad-image--rounded img { border: 1px solid #ddd; border-radius: var(--wad-radius); }
.wad-image--shadow  img { box-shadow: var(--wad-shadow); }

/* polaroid */
.wad-image--polaroid {
	background    : #fff;
	padding       : 8px 8px 2.5em;
	box-shadow    : var(--wad-shadow);
	border-radius : 2px;
}
.wad-image--polaroid figcaption {
	text-align  : center;
	font-size   : .85em;
	color       : #555;
	padding-top : .5em;
}

/* ============================================================
 * カラムレイアウト
 * ============================================================ */
.wad-columns {
	display : flex;
	gap     : 1.5em;
	margin  : 1.5em 0;
}
.wad-columns__col { flex: 1; min-width: 0; }

@media ( max-width: 767px ) {
	.wad-columns { flex-direction: column; }
}

/* ============================================================
 * ブログカード
 * ============================================================ */
.wad-blogcard {
	display          : flex;
	align-items      : center;
	gap              : 1em;
	text-decoration  : none;
	color            : inherit;
	margin           : 1.5em 0;
	position         : relative;
	overflow         : hidden;
	transition       : box-shadow .2s;
}
.wad-blogcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,.15); }

.wad-blogcard__thumbnail {
	width      : 120px;
	height     : 80px;
	flex-shrink: 0;
	overflow   : hidden;
}
.wad-blogcard__thumbnail img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
}
.wad-blogcard__body  { flex: 1; min-width: 0; padding: .75em; }
.wad-blogcard__site  { display: flex; align-items: center; gap: .4em; font-size: .8em; color: #888; margin-bottom: .3em; }
.wad-blogcard__site img { width: 16px; height: 16px; }
.wad-blogcard__title { display: block; font-weight: bold; margin-bottom: .3em; }
.wad-blogcard__desc  { display: block; font-size: .85em; color: #666; }

.wad-blogcard__label {
	position    : absolute;
	top         : 0;
	font-size   : .75em;
	padding     : .2em .6em;
	background  : #3b82f6;
	color       : #fff;
	border-radius: 0 0 4px 0;
}
.wad-blogcard__label--right { left: auto; right: 0; border-radius: 0 0 0 4px; }
.wad-blogcard__label--left  { left: 0; }

/* デザインプリセット */
.wad-blogcard--default  { border: 1px solid #e5e7eb; border-radius: var(--wad-radius); }
.wad-blogcard--simple   { border: 1px solid #e5e7eb; }
.wad-blogcard--border   { border: 2px solid #bbb; border-radius: var(--wad-radius); }
.wad-blogcard--shadow   { box-shadow: var(--wad-shadow); border-radius: var(--wad-radius); }
.wad-blogcard--minimal  { border-bottom: 1px solid #eee; }
.wad-blogcard--compact  .wad-blogcard__body { padding: .4em .75em; }
.wad-blogcard--compact  .wad-blogcard__thumbnail { width: 90px; height: 60px; }

@media ( max-width: 767px ) {
	.wad-blogcard { flex-direction: column; align-items: flex-start; }
	.wad-blogcard__thumbnail { width: 100%; height: 160px; }
}

/* ============================================================
 * マーカー強調
 * ============================================================ */
.wad-marker {
	background-repeat  : no-repeat;
	background-position: left center;
	background-size    : 0% 60%;
	transition         : background-size .6s ease;
	padding            : 0 .1em;
}
.wad-marker.is-animated { background-size: 100% 60%; }

.wad-marker--yellow { background-image: linear-gradient( to right, rgba(255,235,59,.8), rgba(255,235,59,.8) ); color: #222; }
.wad-marker--pink   { background-image: linear-gradient( to right, rgba(244,114,182,.5), rgba(244,114,182,.5) ); }
.wad-marker--blue   { background-image: linear-gradient( to right, rgba(147,197,253,.6), rgba(147,197,253,.6) ); }
.wad-marker--green  { background-image: linear-gradient( to right, rgba(134,239,172,.6), rgba(134,239,172,.6) ); }

/* ============================================================
 * 文字サイズ変更
 * ============================================================ */
.wad-text--large {
	font-size   : 1.5rem;
	font-weight : bold;
}
.wad-text--small { font-size: .85rem; }

/* ============================================================
 * 吹き出し
 * ============================================================ */
.wad-balloon {
	display       : flex;
	align-items   : flex-start;
	gap           : 1em;
	margin        : 1.5em 0;
}
.wad-balloon--right { flex-direction: row-reverse; }

.wad-balloon__icon {
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : .4em;
	flex-shrink    : 0;
	width          : 64px;
}
.wad-balloon__icon img {
	width         : 60px;
	height        : 60px;
	border-radius : 50%;
	object-fit    : cover;
	display       : block;
}
.wad-balloon__name {
	font-size   : 10px;
	line-height : 1.2;
	color       : #666;
	display     : block;
	margin-top  : 2px;
	text-align  : center;
	font-weight : bold;
}
.wad-balloon-name-off .wad-balloon__name {
	display: none;
}

.wad-balloon__body {
	background    : #fff;
	border        : 1px solid #ddd;
	border-radius : var(--wad-radius);
	padding       : .75em 1em;
	position      : relative;
	flex          : 1;
}

/* 吹き出しの尻尾（左向き） */
.wad-balloon--left .wad-balloon__body::before {
	content        : '';
	position       : absolute;
	left           : -8px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 8px 6px 0;
	border-color   : transparent #ddd transparent transparent;
}
.wad-balloon--left .wad-balloon__body::after {
	content        : '';
	position       : absolute;
	left           : -7px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 8px 6px 0;
	border-color   : transparent #fff transparent transparent;
}

/* 吹き出しの尻尾（右向き） */
.wad-balloon--right .wad-balloon__body::before {
	content        : '';
	position       : absolute;
	right          : -8px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 0 6px 8px;
	border-color   : transparent transparent transparent #ddd;
}
.wad-balloon--right .wad-balloon__body::after {
	content        : '';
	position       : absolute;
	right          : -7px;
	top            : 16px;
	border-style   : solid;
	border-width   : 6px 0 6px 8px;
	border-color   : transparent transparent transparent #fff;
}

@media ( max-width: 480px ) {
	.wad-balloon__icon { width: 48px; }
	.wad-balloon__icon img { width: 44px; height: 44px; }
}


/* コールアウトアイコン（フロント表示・絵文字モード） */
.wad-callout__icon {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	min-width       : 1.5em;
	min-height      : 1.5em;
	flex-shrink     : 0;
}

.wad-callout[data-wad-icon="info"] .wad-callout__icon:empty::before {
	content : 'ℹ️';
}
.wad-callout[data-wad-icon="point"] .wad-callout__icon:empty::before {
	content : '⭐';
}
.wad-callout[data-wad-icon="check"] .wad-callout__icon:empty::before {
	content : '✅';
}
.wad-callout[data-wad-icon="caution"] .wad-callout__icon:empty::before {
	content : '⚠️';
}
.wad-callout[data-wad-icon="warning"] .wad-callout__icon:empty::before {
	content : '❌';
}