/* =============================================================
   sykimlaw — global.css
   Phase 3: Spacing System · Typography · CTA Polish · Accessibility
   ============================================================= */

/* ═══════════════════════════════════════════════════════════
   1. SECTION SPACING TOKENS
   ═══════════════════════════════════════════════════════════ */

:root {
	/* Vertical padding tiers */
	--sykim-section-xl: clamp(5rem, 7.5vw, 8rem);    /* navy feature sections */
	--sykim-section-lg: clamp(3.5rem, 5.5vw, 6rem);  /* white/light standard sections */
	--sykim-section-md: 3rem;                          /* mobile fallback */
}

/* ── Feature sections: navy background ── */
.sykim-hero,
.sykim-timeline-section,
.sykim-research-section,
.sykim-consultation-section,
.sykim-cta-strong {
	padding-top: var(--sykim-section-xl) !important;
	padding-bottom: var(--sykim-section-xl) !important;
}

/* ── Standard sections: white / light gray background ── */
.sykim-trust-section,
.sykim-practice-section,
.sykim-case-section,
.sykim-trust-signal-section,
.sykim-faq-section {
	padding-top: var(--sykim-section-lg) !important;
	padding-bottom: var(--sykim-section-lg) !important;
}

/* ═══════════════════════════════════════════════════════════
   2. FLUID TYPOGRAPHY — Section headings
   ═══════════════════════════════════════════════════════════ */

/* Hero H1 — largest, serif */
.sykim-hero__heading {
	font-size: clamp(2rem, 4vw, 3rem) !important;
	line-height: 1.2 !important;
}

/* Section H2 — light bg (standard sections) */
.sykim-practice-section__heading,
.sykim-case__heading,
.sykim-faq__heading,
.sykim-trust__heading,
.sykim-trust-signal__statement {
	font-size: clamp(1.625rem, 2.8vw, 2.25rem) !important;
	line-height: 1.3 !important;
}

/* Section H2 — navy bg (feature sections) */
.sykim-timeline__heading,
.sykim-research-section__heading,
.sykim-consultation__heading,
.sykim-cta-strong__heading {
	font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
	line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════
   3. CTA BUTTON POLISH
   ═══════════════════════════════════════════════════════════ */

/* Comprehensive transition — includes transform for hover lift */
.wp-block-button__link,
.wp-element-button {
	transition:
		transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease !important;
}

/* Hover lift — concierge feel, not ad-landing aggressive */
.wp-block-button__link:hover:not(:disabled),
.wp-element-button:hover:not(:disabled) {
	transform: translateY(-2px);
}

/* Active press — spring back */
.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0) !important;
	box-shadow: none !important;
}

/* Gold primary: warm directional shadow on hover */
.wp-block-button__link.has-gold-500-background-color:hover {
	background-color: #c9a535 !important;
	box-shadow: 0 6px 20px rgba(184, 150, 46, 0.28) !important;
}

/* Ghost buttons on dark: border glow instead of shadow */
.sykim-hero__btn-ghost .wp-block-button__link:hover,
.sykim-cta-strong__btn-ghost .wp-block-button__link:hover,
.sykim-consultation-cta__btn-ghost .wp-block-button__link:hover {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. CARD HOVER MOTION
   ═══════════════════════════════════════════════════════════ */

/* Cards: add transform to existing transition */
.sykim-practice-card,
.sykim-case-card,
.sykim-research-card,
.sykim-trust-card {
	transition:
		box-shadow 0.2s ease,
		border-top-color 0.2s ease,
		transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Subtle lift — readable at a glance without flashiness */
.sykim-practice-card:hover,
.sykim-case-card:hover,
.sykim-research-card:hover,
.sykim-trust-card:hover {
	transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════════
   5. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Keyboard-only focus ring — gold, always visible */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-500);
	outline-offset: 3px;
	border-radius: 2px;
}

/* FAQ accordion: larger offset for summary element */
.sykim-faq-item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-500);
	outline-offset: 5px;
	border-radius: 2px;
}

/* Link focus in content */
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-500);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Navigation links keyboard focus */
.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-500);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════
   6. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* No movement — accessibility first */
	.wp-block-button__link:hover,
	.wp-element-button:hover,
	.sykim-practice-card:hover,
	.sykim-case-card:hover,
	.sykim-research-card:hover,
	.sykim-trust-card:hover {
		transform: none !important;
	}

	/* Timeline stagger stays visible, just no animation */
	.sykim-timeline-step {
		animation: none !important;
		opacity: 1 !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE — Unified breakpoints
   ═══════════════════════════════════════════════════════════ */

/* Tablet (900px): feature sections step down */
@media (max-width: 900px) {
	.sykim-hero,
	.sykim-timeline-section,
	.sykim-research-section,
	.sykim-consultation-section,
	.sykim-cta-strong {
		padding-top: var(--sykim-section-lg) !important;
		padding-bottom: var(--sykim-section-lg) !important;
	}

	.sykim-trust-section,
	.sykim-practice-section,
	.sykim-case-section,
	.sykim-trust-signal-section,
	.sykim-faq-section {
		padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
		padding-bottom: clamp(2.5rem, 5vw, 3.5rem) !important;
	}
}

/* Mobile (≤599px): compact, touch-friendly */
@media (max-width: 599px) {
	.sykim-hero,
	.sykim-timeline-section,
	.sykim-research-section,
	.sykim-consultation-section,
	.sykim-cta-strong,
	.sykim-trust-section,
	.sykim-practice-section,
	.sykim-case-section,
	.sykim-trust-signal-section,
	.sykim-faq-section {
		padding-top: var(--sykim-section-md) !important;
		padding-bottom: var(--sykim-section-md) !important;
		padding-left: var(--wp--preset--spacing--sm) !important;
		padding-right: var(--wp--preset--spacing--sm) !important;
	}

	/* Hero: slightly more breathing room */
	.sykim-hero {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	/* Mobile heading scale */
	.sykim-hero__heading {
		font-size: clamp(1.625rem, 7vw, 2rem) !important;
		line-height: 1.25 !important;
	}

	.sykim-practice-section__heading,
	.sykim-case__heading,
	.sykim-faq__heading,
	.sykim-trust__heading,
	.sykim-trust-signal__statement {
		font-size: clamp(1.375rem, 5vw, 1.75rem) !important;
	}

	.sykim-timeline__heading,
	.sykim-research-section__heading,
	.sykim-consultation__heading,
	.sykim-cta-strong__heading {
		font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
	}

	/* Mobile: card hover transform disabled (touch = no hover state) */
	.sykim-practice-card:hover,
	.sykim-case-card:hover,
	.sykim-research-card:hover,
	.sykim-trust-card:hover {
		transform: none;
	}

	/* Mobile: buttons must not overflow container */
	.sykim-hero__buttons {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.sykim-hero__buttons .wp-block-button,
	.sykim-hero__buttons .wp-block-button .wp-block-button__link {
		width: 100%;
		text-align: center;
		display: block;
	}
}

/* Wide mobile (600-781px): hero tablet gap */
@media (min-width: 600px) and (max-width: 781px) {
	.sykim-hero {
		padding-top: clamp(3.5rem, 8vw, 5rem) !important;
		padding-bottom: clamp(3.5rem, 8vw, 5rem) !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   8. ACCESSIBILITY — Skip link
   ═══════════════════════════════════════════════════════════ */

/* WordPress block themes output a .skip-link.screen-reader-text element.
   This ensures it is styled to match the site's navy/gold identity. */
.skip-link.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--navy-900);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--white);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 1rem;
	line-height: 1;
	padding: 0.875rem 1.25rem;
	position: fixed !important;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100001;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   9. PERFORMANCE — Contain paint where safe
   ═══════════════════════════════════════════════════════════ */

/* Section-level paint containment (not size — sections use auto height) */
.sykim-practice-section,
.sykim-case-section,
.sykim-trust-section,
.sykim-faq-section,
.sykim-trust-signal-section {
	contain: paint;
}

/* Card repaint isolation */
.sykim-practice-card,
.sykim-case-card,
.sykim-research-card,
.sykim-trust-card {
	contain: layout style;
}

/* ═══════════════════════════════════════════════════════════
   10. TABLE SCROLL — 긴 법률표 모바일 수평 스크롤
   ═══════════════════════════════════════════════════════════ */

.sykim-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* 스크롤 가능함을 시각적으로 표시 */
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
		linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 0 100%,
		linear-gradient(to right, rgba(13,31,60,0.06), rgba(13,31,60,0)),
		linear-gradient(to right, rgba(13,31,60,0), rgba(13,31,60,0.06)) 0 100%;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* ═══════════════════════════════════════════════════════════
   11. CONTENT VISIBILITY — Below-fold deferred rendering
   ═══════════════════════════════════════════════════════════ */

/* Homepage sections that are reliably below the fold.
   Browser skips layout/paint until section nears viewport.
   contain-intrinsic-size prevents scroll-height collapse. */
.sykim-timeline-section,
.sykim-research-section,
.sykim-consultation-section {
	content-visibility: auto;
	contain-intrinsic-size: 0 560px;
}

/* Single post: below-fold structural sections */
.sykim-single__author-section,
.sykim-single__related,
.sykim-single__hub-links {
	content-visibility: auto;
	contain-intrinsic-size: 0 360px;
}