/*
 * Tax Accountant Theme - Responsive & Final Polish (v3 Sprint 5)
 *
 * Last-pass adjustments for the Louvre revamp (v3):
 *   1. WCAG AA contrast overrides (gold-on-off-white failures → navy)
 *   2. Unified fade-up animation timing (0.6s ease-out, 20px)
 *   3. Focus-visible ring unification (gold 2px + 2px offset)
 *   4. Touch target minimum (44x44) on mobile
 *   5. Typography fluid scaling cross-check for 375/768/1024/1440
 *   6. reduced-motion belt-and-braces
 *   7. Minor responsive refinements for the 4-breakpoint matrix
 *   8. Lighthouse micro-optimisations (CSS containment, font-display hint)
 *
 * IMPORTANT (non-destructive architecture):
 *   - This file is loaded AFTER design-system-v3, front-page-v3, header-v3,
 *     and sub-pages-v3, so it can safely override those tokens without
 *     editing the source stylesheets. All selectors remain namespaced
 *     under `.v3-*` so v1/v2 pages are untouched.
 *   - No bare element selectors (h1, a, p, etc.) at compound root level.
 *   - No new design tokens — we only re-bind existing gold → navy where
 *     AA contrast fails on off-white surfaces.
 *
 * @package Tax_Accountant
 * @version 3.0.0 (Sprint 5 — Responsive / A11y / Motion / Lighthouse)
 */


/* ============================================================
 * 1. WCAG AA Contrast Overrides
 *
 * Gold #B89968 on off-white #F8F6F1 yields only 2.49:1 — it
 * fails AA (4.5:1 for body, 3:1 for UI/large). We keep gold
 * strictly as background fills, borders, and text on dark
 * surfaces (gold on #1A1A1A = 6.46:1 PASS), and re-bind small
 * caption labels / decorative serif marks on off-white to
 * heritage navy #1B3A5C (10.76:1 PASS).
 *
 * Rationale: navy is an officially sanctioned "格式記号 / formal
 * accent" in the v3 token set; switching caption labels to navy
 * preserves the editorial tone and clears WCAG AA.
 *
 * Audited selectors (all sit on --v3-bg = #F8F6F1):
 *   - .v3-highlight-card__more     (caption, 13px)
 *   - .v3-delve__eyebrow           (meta, 12px)
 *   - .v3-visit__cta-more          (caption, 13px)
 *   - .v3-visit__map-link          (caption, 13px)
 *   - .v3-journal-card__more       (caption, 13px)
 *   - .v3-faq__q-label             (serif h5, 18px)
 *   - .v3-gallery__more            (12px)
 *   - .v3-gallery__meta-sep        (separator, body)
 *   - .v3-article__step-num        (serif 22px)
 *   - .v3-article__faq-q-mark      (serif 18px)
 *   - .v3-archive__breadcrumb a:hover (ephemeral; still fixed)
 *
 * Hover states keep --v3-gold-dark (#927544 on off-white = 4.01:1
 * PASS 3:1 for UI) as secondary emphasis.
 * ============================================================ */

/* --- Front page sections --- */
.v3-highlight-card__more,
.v3-delve__eyebrow,
.v3-visit__cta-more,
.v3-visit__map-link,
.v3-journal-card__more,
.v3-faq__q-label {
	color: var(--v3-navy);
}

.v3-highlight-card__link:hover .v3-highlight-card__more,
.v3-highlight-card__link:focus-visible .v3-highlight-card__more,
.v3-visit__cta-link:hover .v3-visit__cta-more,
.v3-visit__cta-link:focus-visible .v3-visit__cta-more,
.v3-visit__map-link:hover,
.v3-visit__map-link:focus-visible,
.v3-journal-card__link:hover .v3-journal-card__more,
.v3-journal-card__link:focus-visible .v3-journal-card__more {
	color: var(--v3-gold-dark);
}

/* --- Sub pages (archive + single) --- */
.v3-gallery__more,
.v3-gallery__meta-sep,
.v3-article__step-num,
.v3-article__faq-q-mark {
	color: var(--v3-navy);
}

.v3-gallery__link:hover .v3-gallery__more,
.v3-gallery__link:focus-visible .v3-gallery__more {
	color: var(--v3-gold-dark);
}

/* Breadcrumb hover: use gold-dark (4.01:1) not gold (2.49:1). */
.v3-archive__breadcrumb a:hover,
.v3-archive__breadcrumb a:focus-visible {
	color: var(--v3-gold-dark);
}


/* ============================================================
 * 2. Unified fade-up animation (Sprint 5 spec: 0.6s / 20px)
 *
 * The original .v3-fade-up in design-system-v3.css uses 700ms
 * (var --v3-dur-slow) and 12px translateY. The Sprint 5 spec
 * calls for 0.6s ease-out / 20px across every section. We
 * override here (non-destructively) so all v3 sections share
 * identical timing, and reduced-motion belt-and-braces is
 * reaffirmed below.
 * ============================================================ */
.v3-fade-up {
	transform: translateY(20px);
	transition:
		opacity 0.6s ease-out,
		transform 0.6s ease-out;
}
.v3-fade-up.is-visible {
	transform: translateY(0);
}


/* ============================================================
 * 3. Focus-visible ring unification
 *
 * Spec: gold 2px outline + 2px offset across every interactive
 * v3 element. Some components declared their own focus rules;
 * this block normalises the look (and makes sure the offset is
 * 2px, per Sprint 5 acceptance criteria — design-system-v3 used
 * 3px, which visibly drifts on tight rows like footer menus).
 * ============================================================ */
.v3-focus:focus-visible,
.v3-btn:focus-visible,
.v3-header a:focus-visible,
.v3-header button:focus-visible,
.v3-footer a:focus-visible,
.v3-footer button:focus-visible,
.v3-nav-menu a:focus-visible,
.v3-gallery__link:focus-visible,
.v3-explore-tile:focus-visible,
.v3-visit__cta-link:focus-visible,
.v3-visit__map-link:focus-visible,
.v3-highlight-card__link:focus-visible,
.v3-journal-card__link:focus-visible,
.v3-article__faq-q:focus-visible {
	outline: 2px solid var(--v3-gold);
	outline-offset: 2px;
}

/* Remove the legacy darker outline users sometimes see on Chromium. */
.v3-focus:focus:not(:focus-visible),
.v3-btn:focus:not(:focus-visible) {
	outline: none;
}


/* ============================================================
 * 4. Touch target minimum (WCAG 2.5.5 AAA — we target 44x44)
 *
 * Ensures all v3 interactive elements in the mobile viewport
 * meet the 44x44 px minimum. Buttons already have min-height
 * 48px. Remaining targets of concern: inline "read more" links,
 * FAQ summary rows on small screens, footer legal links.
 * ============================================================ */
@media (max-width: 767px) {
	.v3-highlight-card__more,
	.v3-visit__cta-more,
	.v3-visit__map-link,
	.v3-journal-card__more,
	.v3-gallery__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 0;
	}

	.v3-article__faq-q {
		min-height: 44px;
		padding: 12px 0;
	}

	.v3-footer__legal a,
	.v3-footer__menu a {
		display: inline-block;
		padding: 8px 0;
		min-height: 44px;
		line-height: 28px;
	}
}


/* ============================================================
 * 5. 4-breakpoint responsive polish
 *
 * Matrix (Sprint 5 spec): 375 / 768 / 1024 / 1440. We target
 * common corner-cases the base stylesheets didn't cover in
 * the earlier sprints.
 * ============================================================ */

/* --- 1440+ (large desktop): give sections a touch more rhythm --- */
@media (min-width: 1440px) {
	.v3-container {
		padding-left: 40px;
		padding-right: 40px;
	}
	.v3-hero__title {
		max-width: 16em;
	}
}

/* --- 1024-1199 (small desktop / large tablet landscape) --- */
@media (max-width: 1199px) and (min-width: 1024px) {
	/* Highlights already switches to scroll-snap at 1199-768.
	   At 1024-1199 we keep the asymmetric grid but tighten gaps
	   a bit to prevent card overflow near the breakpoint. */
	.v3-highlights__grid {
		gap: var(--v3-space-6) var(--v3-space-6);
	}
}

/* --- 768-1023 (tablet portrait) --- */
@media (max-width: 1023px) and (min-width: 768px) {
	/* Delve 2-col: tighten portrait column + increase gutter. */
	.v3-delve__grid {
		gap: var(--v3-space-7);
	}
	/* Visit: keep 3 CTAs horizontal until mobile. */
	.v3-visit__ctas {
		gap: var(--v3-space-5);
	}
	/* Journal: ensure 1+2 stays readable. */
	.v3-journal__grid {
		gap: var(--v3-space-6);
	}
}

/* --- 375-767 (mobile / small mobile) --- */
@media (max-width: 767px) {
	/* Hero: tighten padding on narrow phones. */
	.v3-hero__title {
		font-size: clamp(32px, 8vw, 44px);
		line-height: 1.2;
	}
	.v3-hero__lead {
		font-size: 16px;
	}
	.v3-hero__eyebrow {
		font-size: 11px;
	}

	/* Visit: stack CTAs vertically, full-width. */
	.v3-visit__ctas {
		display: flex;
		flex-direction: column;
		gap: var(--v3-space-4);
	}
	.v3-visit__cta-link {
		width: 100%;
	}

	/* Journal: single column stack. */
	.v3-journal__grid {
		display: flex;
		flex-direction: column;
		gap: var(--v3-space-6);
	}

	/* Delve: stack image then text. */
	.v3-delve__grid {
		display: flex;
		flex-direction: column;
		gap: var(--v3-space-6);
	}
	.v3-delve__portrait {
		order: -1;
	}

	/* Footprint: map full width and centered, badges below.
	   Override the desktop align-items:start so the figure
	   stretches to the container's full inline-size on mobile.
	   Also bump the aspect ratio so the Japan map reads at a
	   comfortable size on a 375px viewport. */
	.v3-footprint__grid {
		display: flex;
		flex-direction: column;
		gap: var(--v3-space-5);
		align-items: stretch;
	}
	.v3-footprint__map {
		align-self: stretch;
		width: 100%;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	.v3-footprint__map-media {
		aspect-ratio: 4 / 3;
		background-size: contain;
		background-position: center;
	}
	.v3-footprint__map-caption {
		text-align: center;
	}

	/* Section rhythm: prevent section rules bumping into previous content. */
	.v3-front__rule {
		margin-left: var(--v3-gutter);
		margin-right: var(--v3-gutter);
	}
}

/* --- 375 and below (iPhone SE and narrower) --- */
@media (max-width: 479px) {
	.v3-hero__title {
		font-size: clamp(28px, 9vw, 36px);
	}
	.v3-container {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* Explore: keep 2 columns (per Sprint 2 spec note), but tighten gap
	   so the 6 tiles don't look cramped. Sprint 5 decision: 2 cols
	   retained (rationale documented in docs/progress.md). */
	.v3-explore__grid {
		gap: var(--v3-space-4) var(--v3-space-3);
	}
}


/* ============================================================
 * 6. reduced-motion belt-and-braces
 *
 * Each v3 CSS file already ships a prefers-reduced-motion
 * block, but Sprint 5 insists on an explicit final check.
 * This rule disables every transition / animation introduced
 * by v3 layers (fade-up, hover, header scroll state, etc.).
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.v3-fade-up,
	.v3-fade-up.is-visible,
	.v3-btn,
	.v3-header,
	.v3-highlight-card__link,
	.v3-highlight-card__media,
	.v3-explore-tile,
	.v3-explore-tile__rule,
	.v3-gallery__media,
	.v3-gallery__link,
	.v3-gallery__more,
	.v3-visit__cta-link,
	.v3-journal-card__link,
	.v3-journal-card__media,
	.v3-article__faq-q-icon,
	.v3-footer__social-link,
	.v3-footer__newsletter-submit,
	.v3-hero__scroll {
		transition: none !important;
		animation: none !important;
	}
	.v3-fade-up {
		opacity: 1;
		transform: none;
	}
}


/* ============================================================
 * 7. Lighthouse micro-optimisations
 *
 * - CSS containment on sections so scroll / intersection work
 *   avoids re-laying out unrelated content.
 * - content-visibility:auto on below-the-fold sections to let
 *   the browser skip paint on offscreen regions. (Top-half
 *   sections — Hero + Highlights — are excluded to avoid
 *   LCP regressions.)
 * - will-change hints are limited to elements already animating.
 * ============================================================ */
.v3-section,
.v3-footer,
.v3-archive__gallery,
.v3-article__body {
	contain: layout style;
}

/* Skip rendering work on offscreen, below-the-fold v3 sections.
   We deliberately exclude Hero (LCP) and Highlights (often in
   the initial viewport on large screens). content-visibility
   is a progressive enhancement; browsers that don't support it
   simply ignore the property. */
.v3-explore,
.v3-delve,
.v3-visit,
.v3-journal,
.v3-footprint {
	content-visibility: auto;
	contain-intrinsic-size: 1px 800px;
}


/* ============================================================
 * 8. Print styles for v3
 *
 * Neutralise dark hero overlays, hide nav/footer chrome that
 * doesn't make sense on paper.
 * ============================================================ */
@media print {
	.v3-header,
	.v3-header__sheet,
	.v3-footer,
	.v3-hero__scroll,
	.v3-front__rule {
		display: none !important;
	}
	.v3-hero,
	.v3-archive__hero {
		min-height: auto;
		padding: 24px 0;
	}
	.v3-hero__overlay,
	.v3-archive__hero-overlay {
		display: none !important;
	}
	.v3-hero__title,
	.v3-hero__lead,
	.v3-archive__hero-title,
	.v3-archive__hero-lead {
		color: #000 !important;
	}
	.v3-section,
	.v3-archive__gallery {
		page-break-inside: avoid;
		padding: 16px 0;
	}
}