/* =========================================================================
   AllAroundPlay — Component styles
   Concept: 유틸리티 · 미니게임 · 토픽 블로그 포털
   Palette: Deep Navy #0b1f33 / Brass Gold #b3864b / Beige #f4eee3 / White
   Reference mood: lawyer.co.kr (전문가형 / 신뢰감)
   ========================================================================= */

:root {
	--aap-navy: #0b1f33;
	--aap-navy-2: #142a40;
	--aap-gold: #b3864b;
	--aap-gold-2: #c9a063;
	--aap-gold-dark: #9c7338;
	--aap-beige: #f4eee3;
	--aap-ink: #0b1f33;
	--aap-muted: #45525e;
	--aap-shadow: 0 10px 30px rgba(11, 31, 51, 0.12);
}

/* -------------------------------------------------------------------------
   1. Header + MEGA MENU (중앙 로고 + 네이비 GNB + 전체폭 메가 패널)
      lawyer.co.kr 방식: 내비 호버 시 전체폭 흰 패널에 모든 하위메뉴 컬럼 표시
   ------------------------------------------------------------------------- */
.aap-header {
	border-bottom: 1px solid rgba(11, 31, 51, 0.08);
}
/* 흰 배경 위 로고/사이트명: 네이비 */
.aap-header .wp-block-site-title a {
	color: var(--aap-navy);
	text-decoration: none;
}
.aap-header .wp-block-site-title a:hover {
	color: var(--aap-gold);
}

/* 메가메뉴 래퍼 (패널 기준점) */
.aap-megamenu {
	position: relative;
}

/* 네이비 GNB 바 — 6칸 그리드(패널 컬럼과 1:1 정렬) */
.aap-header .aap-nav-bar {
	box-shadow: 0 8px 22px rgba(11, 31, 51, 0.18);
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
}
.aap-header .aap-nav-bar .aap-top {
	margin: 0;
	text-align: left;
	padding-left: 14px;
	position: relative;
}
/* 항목 사이 옅은 구분선 */
.aap-header .aap-nav-bar .aap-top + .aap-top::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 1px; height: 15px;
	background: rgba(255, 255, 255, 0.16);
}
.aap-header .aap-nav-bar .aap-top a {
	display: block;
	padding: 4px 6px;
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.18s ease;
}
.aap-header .aap-nav-bar .aap-top a:hover,
.aap-megamenu:hover .aap-nav-bar .aap-top.is-cat a {
	color: var(--aap-gold-2);
}

/* 전체폭 메가 패널 */
.aap-mega-panel {
	position: absolute;
	left: 0; right: 0;
	top: calc(100% + 8px);
	z-index: 200;
	max-width: none;   /* constrained 레이아웃의 본문폭(620px) 제한 해제 → 전체폭 */
	width: auto;
	background: #fff;
	border-top: 3px solid var(--aap-gold);
	box-shadow: 0 26px 44px rgba(11, 31, 51, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
/* 네이비 바와 패널 사이 hover 끊김 방지용 투명 브리지 */
.aap-mega-panel::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: -14px; height: 14px;
}
.aap-megamenu:hover .aap-mega-panel,
.aap-megamenu:focus-within .aap-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.aap-mega-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	padding: 34px 24px 42px;
}
.aap-mega-col {
	padding-left: 14px;   /* .aap-top 와 동일 → 상위 메뉴 바로 아래 정렬 */
	padding-right: 10px;
	margin-top: 0;        /* WP flow 레이아웃이 첫 칸 외 자동으로 넣는 상단 여백 제거 → 헤딩 높이 정렬 */
}
.aap-mega-head {
	font-family: "Montserrat", "Noto Sans KR", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aap-gold);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(11, 31, 51, 0.1);
}
.aap-mega-col ul { list-style: none; margin: 0; padding: 0; }
.aap-mega-col li { margin: 0; }
.aap-mega-col li a {
	display: block;
	padding: 9px 0;
	color: #2b3845;
	text-decoration: none;
	font-size: 0.98rem;
	transition: color 0.15s ease, padding-left 0.15s ease;
}
.aap-mega-col li a:hover {
	color: var(--aap-gold);
	padding-left: 7px;
}

/* 모바일: 호버 불가 → 패널을 정적으로 펼쳐 모든 링크 노출 */
@media (max-width: 781px) {
	.aap-header .aap-nav-bar {
		border-radius: 10px;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 6px;
	}
	.aap-header .aap-nav-bar .aap-top { text-align: center; padding-left: 0; }
	.aap-header .aap-nav-bar .aap-top + .aap-top::before { display: none; }
	.aap-mega-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: none;
		background: var(--aap-beige);
		border-radius: 10px;
		margin-top: 10px;
	}
	.aap-mega-panel::before { display: none; }
	.aap-mega-inner { grid-template-columns: repeat(2, 1fr); padding: 18px 18px 22px; }
	.aap-mega-col { padding-left: 4px; }
}

/* -------------------------------------------------------------------------
   2. Buttons (골드 필 + 골드 아웃라인 "→")
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: -0.01em;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--aap-gold);
	color: #fff;
	border: 1.5px solid var(--aap-gold);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--aap-gold-dark);
	border-color: var(--aap-gold-dark);
	transform: translateY(-1px);
}

/* 아웃라인 = 참고사이트의 "더보기 →" 시그니처 */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--aap-gold);
	border: 1.5px solid var(--aap-gold);
}
.wp-block-button.is-style-outline .wp-block-button__link::after {
	content: " \2192";
	font-weight: 700;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--aap-gold);
	color: #fff;
}

/* 다크 섹션 위의 버튼은 골드 유지 가독성 보강 */
.has-contrast-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--aap-gold-2);
	border-color: var(--aap-gold-2);
}

/* -------------------------------------------------------------------------
   3. Eyebrow label (골드 영문 소제목 — "Dongin Law Group" 무드)
   사용법: 단락 블록에 추가 CSS 클래스 → aap-eyebrow
   ------------------------------------------------------------------------- */
.aap-eyebrow {
	font-family: "Montserrat", "Noto Sans KR", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--aap-gold);
	margin-bottom: 0.4em;
}

/* -------------------------------------------------------------------------
   4. Title with gold bar (골드 세로 막대 제목)
   사용법: 제목 블록에 추가 CSS 클래스 → aap-title-bar
   ------------------------------------------------------------------------- */
.aap-title-bar {
	position: relative;
	padding-left: 22px;
}
.aap-title-bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 5px;
	border-radius: 3px;
	background: var(--aap-gold);
}

/* -------------------------------------------------------------------------
   5. Cards (흰 카드 + 그림자 / 이미지 상단)
   사용법: 그룹 또는 컬럼 블록에 추가 CSS 클래스 → aap-card
   ------------------------------------------------------------------------- */
.aap-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--aap-shadow);
	overflow: hidden;
	border: 1px solid rgba(11, 31, 51, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.aap-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(11, 31, 51, 0.18);
}
.aap-card .wp-block-image,
.aap-card figure {
	margin: 0;
}
.aap-card .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
/* 카드 본문 영역 패딩: 이미지 직후 그룹/단락에 자동 여백 */
.aap-card > .wp-block-group,
.aap-card > :not(.wp-block-image):not(figure) {
	padding-left: 24px;
	padding-right: 24px;
}
.aap-card > :last-child {
	padding-bottom: 24px;
}
.aap-card :is(h2, h3, h4) {
	margin-top: 18px;
	margin-bottom: 10px;
}

/* -------------------------------------------------------------------------
   6. Dark section (네이비 강조 섹션)
   사용법: 그룹 블록 배경색을 Contrast(네이비)로 지정하면 자동 적용
   ------------------------------------------------------------------------- */
.has-contrast-background-color,
.has-accent-3-background-color,
.has-accent-4-background-color {
	color: #f3f5f7;
}
.has-contrast-background-color :is(h1, h2, h3, h4, h5, h6),
.has-accent-3-background-color :is(h1, h2, h3, h4, h5, h6),
.has-accent-4-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}
.has-contrast-background-color .aap-eyebrow,
.has-accent-3-background-color .aap-eyebrow,
.has-accent-4-background-color .aap-eyebrow {
	color: var(--aap-gold-2);
}

/* -------------------------------------------------------------------------
   7. Number badge (원형 골드 번호 뱃지 01·02·03)
   사용법: 단락/제목 블록에 추가 CSS 클래스 → aap-num
   콘텐츠는 "01" 처럼 숫자만. 인라인 표시.
   ------------------------------------------------------------------------- */
.aap-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--aap-gold);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   8. Beige / warm section
   사용법: 그룹 배경색 Base/Beige
   ------------------------------------------------------------------------- */
.has-base-2-background-color,
.has-accent-5-background-color {
	color: var(--aap-ink);
}

/* -------------------------------------------------------------------------
   9. Links (본문 골드 링크 + 자연스러운 밑줄)
   ------------------------------------------------------------------------- */
.entry-content a,
.wp-block-post-content a {
	color: var(--aap-gold);
	text-decoration: underline;
	text-decoration-color: rgba(179, 134, 75, 0.4);
	text-underline-offset: 3px;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
	color: var(--aap-gold-dark);
	text-decoration-color: var(--aap-gold);
}

/* -------------------------------------------------------------------------
   10. Footer (네이비 푸터)
   ------------------------------------------------------------------------- */
.wp-site-blocks > footer .wp-block-template-part,
footer.wp-block-template-part {
	background: var(--aap-navy);
	color: rgba(255, 255, 255, 0.75);
}
footer.wp-block-template-part :is(h1, h2, h3, h4, p, li, .wp-block-site-title) {
	color: rgba(255, 255, 255, 0.82);
}
footer.wp-block-template-part a {
	color: var(--aap-gold-2);
}
footer.wp-block-template-part a:hover {
	color: #fff;
}
/* "Designed with WordPress" 콜로폰 제거 */
footer.wp-block-template-part p.has-small-font-size {
	display: none;
}
footer.wp-block-template-part .wp-block-group.alignwide:has(> p.has-small-font-size) {
	display: none;
}

/* -------------------------------------------------------------------------
   11. Floating "맨 위로" button (우측 하단 플로팅)
   ------------------------------------------------------------------------- */
#aap-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9999;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: var(--aap-navy);
	color: var(--aap-gold-2);
	box-shadow: 0 8px 24px rgba(11, 31, 51, 0.35);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
#aap-to-top[hidden] {
	display: none;
}
#aap-to-top:hover {
	background: var(--aap-gold);
	color: #fff;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   12. Misc polish
   ------------------------------------------------------------------------- */
.wp-block-post-title,
.wp-block-query-title {
	letter-spacing: -0.02em;
}

/* 카드 그리드 컬럼 간격이 모바일에서 무너지지 않도록 */
@media (max-width: 781px) {
	.aap-card {
		margin-bottom: 16px;
	}
}

/* =========================================================================
   LAYOUT — lawyer.co.kr 섹션 구조 재현 (front-page.html 전용)
   ========================================================================= */

/* --- HERO (main-v): 배경 이미지 + 네이비 오버레이 --- */
.aap-hero {
	position: relative;
	background-color: var(--aap-navy);
	background-image:
		linear-gradient(115deg, rgba(11, 31, 51, 0.96) 0%, rgba(11, 31, 51, 0.82) 45%, rgba(20, 42, 64, 0.7) 100%),
		url("/wp-content/themes/twentytwentyfour/assets/images/windows.webp");
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
/* 좌측 골드 라인 장식 */
.aap-hero::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 6px;
	background: linear-gradient(180deg, var(--aap-gold-2), var(--aap-gold));
}
.aap-hero .aap-eyebrow { color: var(--aap-gold-2); }
.aap-hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }

/* HERO 우측 미리보기 카드 (lawyer: 인증서 카드 자리) */
.aap-hero-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(201, 160, 99, 0.4);
	border-radius: 12px;
	backdrop-filter: blur(4px);
	align-items: center;
}
.aap-hero-card h3 { color: #fff; }
.aap-hero-card .aap-eyebrow { color: var(--aap-gold-2); }
.aap-badge {
	background: var(--aap-gold);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	border-radius: 999px;
}

/* --- STRENGTHS (main-spacial): 좌 베이지 / 우 네이비 01~04 --- */
.aap-strength-row {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.aap-strength-row p:last-child { margin: 0; }

/* --- EXPLORE (lawyer_wrap): 체크 리스트 --- */
.aap-check { list-style: none; padding-left: 0; }
.aap-check li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 6px;
}
.aap-check li::before {
	content: "\2713";
	position: absolute;
	left: 0; top: 0;
	width: 20px; height: 20px;
	color: var(--aap-gold);
	font-weight: 700;
}
.aap-round img { border-radius: 12px; box-shadow: var(--aap-shadow); }

/* --- LATEST POSTS (main-user): 그리드 카드 --- */
.aap-post-grid .wp-block-post-title { margin-top: 14px; margin-bottom: 6px; }
.aap-post-grid .wp-block-post-title a { color: var(--aap-navy); text-decoration: none; }
.aap-post-grid .wp-block-post-title a:hover { color: var(--aap-gold); }
.aap-post-grid .wp-block-post-excerpt { color: var(--aap-muted); font-size: 0.95rem; }
.aap-post-grid .wp-block-post-featured-image img { border-radius: 8px; }

/* --- 반응형: 강점/히어로 컬럼 모바일 정렬 --- */
@media (max-width: 781px) {
	.aap-hero { background-attachment: scroll; }
	.aap-strength-row { border-bottom-color: rgba(255, 255, 255, 0.12); }
}