/* GVG V3 — app.css bundle (auto-generated by v3-build.js) */
/* R2.2 @layer cascade order: tokens → base → components → utilities */
@layer tokens, base, components, utilities;

@layer tokens {
/* ─────────────────────────────────────────────────────────
   GVG V3 — Design Tokens (Foundation)
   Source: TVK_GVG_V3_COMPONENT_SPECS_T5_2026.md lines 13-123
   Verbatim copy per Cowork MSG-072 Q3 — NO Code modifications
   Phase 1B locked palette — Tropical Warm
   Created: 2026-05-29 (Subtask 1 of Group A, per MSG-073)
   ───────────────────────────────────────────────────────── */

:root {
  /* CRITICAL:START tokens-colors-above-fold */
  /* R2.3 critical subset — colors referenced by topbar + mega menu skeleton + hero skeleton + base reset */

  /* Primary */
  --terracotta: #C8553D;      /* Primary accent, CTA buttons, hero highlights */
  --jade: #2D7D6F;             /* Secondary accent, trust signals, success states */
  --sunset: #E8985E;           /* Tertiary, warm highlights, hover states */
  --cream: #FAF6EE;            /* Background, cards, neutral surfaces */

  /* Neutrals */
  --ink-900: #1A1A1A;          /* Primary text */
  --ink-700: #4A4A4A;          /* Secondary text */
  --ink-500: #7A7A7A;          /* Muted text, captions */
  --ink-300: #C4C4C4;          /* Borders, dividers */
  --ink-100: #F0F0F0;          /* Subtle backgrounds */
  --white: #FFFFFF;
  /* CRITICAL:END tokens-colors-above-fold */

  /* Semantic — DEFERRED (used by widgets/forms below fold) */
  --success: #2D7D6F;          /* = jade */
  --warning: #E8985E;          /* = sunset */
  --error: #C8553D;            /* = terracotta */
  --info: #5B8DB8;             /* Cool blue (utility widgets) */

  /* Utility widget colors (4 boxes section) — DEFERRED (below fold) */
  --widget-green: #2D7D6F;     /* Currency */
  --widget-blue: #5B8DB8;      /* FAQ counter */
  --widget-yellow: #E8985E;    /* Visa checker (renamed gold) */
  --widget-purple: #8B5E83;    /* Weather */

  /* ─────────────────────────────────────────────────────
     Mega menu badge colors (10 categories — Cycle 4 icon redesign)
     Source: TVK_GVG_V3_MEGA_MENU_ICONS_DESIGN_T5_2026.md (Stockpile K)
     Pattern: 28px circle badge + Lucide 16px white icon
     All derived from Tropical Warm family + utility widget palette
     (no new color families introduced)
     ───────────────────────────────────────────────────── */
  --badge-visa: #C8553D;          /* = terracotta (primary CTA brand) */
  --badge-destinations: #2D7D6F;  /* = jade (explore + nature) */
  --badge-food: #E8985E;          /* = sunset (warm food appetite) */
  --badge-safety: #1F5A4F;        /* jade-dark (trust + protection serious) */
  --badge-transport: #5B8DB8;     /* sky (movement + travel) */
  --badge-stay: #8B5E83;          /* mauve (rest + comfort) */
  --badge-costs: #D4A14C;         /* amber (money + warmth gold) */
  --badge-culture: #B85772;       /* rose (heritage + vibrant) */
  --badge-faq: #4A4A4A;           /* = ink-700 (neutral question) */
  --badge-services: #A6432F;      /* terracotta-dark (TVK brand + service authority) */

  /* ─────────────────────────────────────────────────────
     Type scale (use with typography stack in base.css)
     Mobile values applied via @media (max-width: 768px)
     ───────────────────────────────────────────────────── */
  /* CRITICAL:START tokens-type-above-fold */
  --type-display: 48px;        /* Hero H1 — mobile 32px override */
  --type-h3: 22px;             /* Card titles — mobile 18px (used by hero overlay + topbar) */
  --type-body: 16px;           /* Body text (page baseline) */
  --type-small: 14px;          /* Meta, captions (lang switcher + breadcrumb) */
  --line-height-display: 1.1;
  --line-height-body: 1.6;
  /* CRITICAL:END tokens-type-above-fold */

  --type-h1: 36px;             /* Page titles — mobile 28px (DEFERRED — sub-page only) */
  --type-h2: 28px;             /* Section headings — mobile 22px (DEFERRED) */
  --type-tiny: 12px;           /* Labels, badges (DEFERRED — used by drawer + widgets) */

  --line-height-h1: 1.2;       /* DEFERRED */
  --line-height-h2: 1.3;       /* DEFERRED */
  --line-height-h3: 1.4;       /* DEFERRED */
  --line-height-small: 1.5;    /* DEFERRED */
  --line-height-tiny: 1.4;     /* DEFERRED */

  /* ─────────────────────────────────────────────────────
     Spacing scale (4px base)
     ───────────────────────────────────────────────────── */
  /* CRITICAL:START tokens-spacing-above-fold */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  /* CRITICAL:END tokens-spacing-above-fold */
  --space-24: 96px;            /* DEFERRED — used only by footer + below-fold sections */

  /* ─────────────────────────────────────────────────────
     Responsive breakpoints (mobile-first)
     Default mobile-first: design for 375px viewport (iPhone SE baseline)
     ───────────────────────────────────────────────────── */
  --bp-sm: 640px;      /* Small tablet portrait */
  --bp-md: 768px;      /* Tablet */
  --bp-lg: 1024px;     /* Desktop */
  --bp-xl: 1280px;     /* Wide desktop */
  --bp-2xl: 1536px;    /* Extra wide (rare) */

  /* ─────────────────────────────────────────────────────
     Shadow + radius
     ───────────────────────────────────────────────────── */
  /* CRITICAL:START tokens-shadow-radius-above-fold */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  /* CRITICAL:END tokens-shadow-radius-above-fold */
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);   /* DEFERRED — used by dropdown panel + drawer */

  /* ─────────────────────────────────────────────────────
     Transitions
     ───────────────────────────────────────────────────── */
  /* CRITICAL:START tokens-transition-above-fold */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-default: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* CRITICAL:END tokens-transition-above-fold */
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);   /* DEFERRED — used by drawer + modal */
}

/* ─────────────────────────────────────────────────────
   Mobile type scale overrides (per spec)
   ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --type-display: 32px;
    --type-h1: 28px;
    --type-h2: 22px;
    --type-h3: 18px;
  }
}

/* ─────────────────────────────────────────────────────
   i18n width adjustment note (per spec line 76):
   Korean text typically 80-90% width vs EN
   Chinese 70-80%
   Hindi 110-120%
   Layout MUST accommodate ±20% character count variance per same content.
   (Implemented via responsive flex/grid in component CSS, not token-level)
   ───────────────────────────────────────────────────── */

}

@layer components {
/* --- 00-layout.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Layout Primitives (Lesson #1 fix per LAYOUT_STANDARDS_GUIDE_V1)
   Source: TVK_GVG_LAYOUT_STANDARDS_GUIDE_T5_2026_V1.md §1 Rules #1-#6 + §3 Lesson #1
   Filename "00-layout.css" prefix ensures alphabetical sort = loaded FIRST among components
   so all subsequent component CSS can extend these primitives without conflict.

   Provides:
     - .container (Rule #1 max-width 1280px + responsive gutters)
     - .section (Rule #4 vertical padding rhythm 64/48px)
     - .section-header (Rule #6 eyebrow + title + subtitle centered)
     - .grid-2 / .grid-3 / .grid-4 (Rule #2 fluid responsive grids, NEVER left-aligned)
     - .stack (equal-height card flexbox per Rule #3)

   Created: 2026-05-30 Track LAYOUT-1 #1 per MSG-098 BLOCKING
   ───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   Rule #1 — .container MANDATORY mọi section content
   NOTE: Currently DEFERRED (no element on V3 uses .container yet — existing components
   use .{name}-inner pattern instead). When sections migrate to .container wrapper,
   re-add CRITICAL:START markers around above-fold variants.
   ───────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 640px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Narrow variant for text-heavy sections (FAQ, articles) */
.container-narrow {
  max-width: 880px;
}

/* Wide variant for hero (cinematic) */
.container-wide {
  max-width: 1440px;
}

/* ─────────────────────────────────────────────────────
   Rule #4 — Section vertical rhythm (64px desktop / 48px mobile)
   NOTE: Currently DEFERRED — existing components apply Rule #4 values inline.
   Future migration: components extend .section instead of duplicating padding rules.
   ───────────────────────────────────────────────────── */
.section {
  padding-top: var(--space-16);    /* 64px desktop */
  padding-bottom: var(--space-16);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-12);  /* 48px mobile */
    padding-bottom: var(--space-12);
  }
}

/* Hero exception — taller breathing room below sticky header */
.section-hero {
  padding-top: var(--space-8);     /* 32px below sticky header */
  padding-bottom: var(--space-16);
}

/* Compact variant for utility rows (widgets, services strip) */
.section-compact {
  padding-top: var(--space-12);    /* 48px */
  padding-bottom: var(--space-12);
}

/* Background variants for clean transitions per Rule #5 */
.section-bg-cream { background: var(--cream); }
.section-bg-white { background: var(--white); }
.section-bg-ink   { background: var(--ink-900); color: var(--cream); }

/* ─────────────────────────────────────────────────────
   Rule #6 — Section header standardized pattern
   ───────────────────────────────────────────────────── */
.section-header-std {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}

@media (max-width: 768px) {
  .section-header-std {
    margin-bottom: var(--space-6);
  }
}

.section-eyebrow {
  display: inline-block;
  font-size: var(--type-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}

.section-title-std {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  /* Round 2 Batch 2 Step 7: heavier intentional headline + orphan prevention */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .section-title-std {
    font-size: 24px;
  }
}

.section-subtitle-std {
  font-size: var(--type-body);
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
  /* Round 2 Batch 2 Step 7: smarter line breaks */
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────
   Rule #2 — Fluid responsive grids (NEVER left-aligned)
   ───────────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Responsive breakdown */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ─────────────────────────────────────────────────────
   Rule #3 — Equal-height cards flexbox pattern
   ───────────────────────────────────────────────────── */
.card-stack {
  display: flex;
  flex-direction: column;
  height: 100%;       /* fills grid cell */
}

.card-stack-body {
  flex: 1;            /* grows to push CTA down */
}

.card-stack-cta {
  margin-top: auto;   /* pushed to bottom */
}


/* --- article.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Subtask 15: Article template styles
   Source: V3 Component Specs + 4 KO pillars reference
   Pillar guide layout: hero + meta + body + mid-CTA + footer + related
   Created: 2026-05-29 Group D Phase 1 per MSG-090
   ───────────────────────────────────────────────────── */

.article-pillar {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ─────────────────────────────────────────────────────
   Article hero — image + title + meta
   ───────────────────────────────────────────────────── */
.article-hero {
  margin: var(--space-8) 0;
}

@media (max-width: 768px) {
  .article-hero {
    margin: var(--space-6) 0;
  }
}

.article-hero-inner {
  margin-bottom: var(--space-6);
}

.article-category-badge {
  display: inline-block;
  font-size: var(--type-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--badge-visa);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

/* Per-category badge colors */
.article-category-badge[data-category="visa"]          { background: var(--badge-visa); }
.article-category-badge[data-category="destinations"]  { background: var(--badge-destinations); }
.article-category-badge[data-category="food"]          { background: var(--badge-food); }
.article-category-badge[data-category="safety"]        { background: var(--badge-safety); }
.article-category-badge[data-category="transport"]     { background: var(--badge-transport); }
.article-category-badge[data-category="stay"]          { background: var(--badge-stay); }
.article-category-badge[data-category="costs"]         { background: var(--badge-costs); }
.article-category-badge[data-category="culture"]       { background: var(--badge-culture); }
.article-category-badge[data-category="services"]      { background: var(--badge-services); }

.article-title {
  font-size: var(--type-display);
  line-height: var(--line-height-display);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}

@media (max-width: 768px) {
  .article-title {
    font-size: 28px;
    line-height: 1.2;
  }
}

.article-desc {
  font-size: var(--type-h3);
  line-height: 1.5;
  color: var(--ink-700);
  margin-bottom: var(--space-4);
  font-weight: 400;
}

@media (max-width: 768px) {
  .article-desc {
    font-size: var(--type-body);
  }
}

.article-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--type-small);
  color: var(--ink-500);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-100);
}

.article-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.article-hero-image-wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  aspect-ratio: 16/9;
}

.article-hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─────────────────────────────────────────────────────
   Article body — content typography
   ───────────────────────────────────────────────────── */
.article-body {
  font-size: var(--type-body);
  line-height: var(--line-height-body);
  color: var(--ink-900);
  margin-bottom: var(--space-12);
}

.article-body h2 {
  font-size: var(--type-h1);
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--space-8) 0 var(--space-3);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .article-body h2 {
    font-size: var(--type-h2);
  }
}

.article-body h3 {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--space-6) 0 var(--space-3);
  line-height: 1.3;
}

.article-body h4 {
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--ink-900);
  margin: var(--space-4) 0 var(--space-2);
}

.article-body p {
  margin-bottom: var(--space-4);
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}

.article-body a:hover {
  color: var(--badge-services);
  text-decoration-thickness: 2px;
}

.article-body ul,
.article-body ol {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: var(--space-6);
}

.article-body li {
  margin-bottom: var(--space-2);
}

.article-body blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--terracotta);
  background: var(--cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--ink-700);
}

.article-body code {
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
}

.article-body pre {
  background: var(--ink-900);
  color: var(--cream);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-4) 0;
}

.article-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--type-small);
}

.article-body th {
  background: var(--cream);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  border-bottom: 2px solid var(--ink-300);
}

.article-body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--ink-100);
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--ink-100);
  margin: var(--space-8) 0;
}

/* ─────────────────────────────────────────────────────
   Mid-article CTA strip
   ───────────────────────────────────────────────────── */
.article-mid-cta {
  margin: var(--space-8) 0;
  background: linear-gradient(135deg, var(--cream) 0%, rgba(232, 152, 94, 0.1) 100%);
  border: 1px solid var(--sunset);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.article-mid-cta-inner {
  text-align: center;
}

.article-mid-cta-eyebrow {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}

.article-mid-cta-title {
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}

.article-mid-cta-desc {
  font-size: var(--type-small);
  color: var(--ink-700);
  margin-bottom: var(--space-4);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.article-mid-cta-button {
  display: inline-block;
  padding: 12px 28px;
  background: var(--terracotta);
  color: var(--white);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--type-body);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.article-mid-cta-button:hover {
  background: var(--badge-services);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.article-mid-cta-button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   Article footer (inline meta)
   ───────────────────────────────────────────────────── */
.article-footer-inline {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-100);
  text-align: center;
}

.article-footer-meta {
  font-size: var(--type-small);
  color: var(--ink-500);
}

/* ─────────────────────────────────────────────────────
   Related articles section
   ───────────────────────────────────────────────────── */
.article-related {
  background: var(--cream);
  padding: var(--space-12) var(--space-4);
  margin-top: var(--space-12);
}

.article-related-inner {
  max-width: 1024px;
  margin: 0 auto;
}

.article-related-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-6);
  text-align: center;
}

.article-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .article-related-list {
    grid-template-columns: 1fr;
  }
}

.article-related-item {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  transition: all var(--transition-fast);
}

.article-related-item:hover {
  border-color: var(--terracotta);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.article-related-link {
  display: block;
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.article-related-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.article-related-title {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.4;
}

.article-related-meta {
  font-size: var(--type-tiny);
  color: var(--ink-500);
}


/* --- breadcrumb.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Breadcrumb Component styles
   Source: V3 Component Specs Sub-page section lines 983-991
   Below mega menu · padding space-3 space-8 · cream BG · type-small · » separator ink-300
   Created: 2026-05-29 Subtask 4 of Group A per MSG-073 + Path A
   ───────────────────────────────────────────────────── */

.breadcrumb {
  background: var(--cream);
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--ink-100);
  font-size: var(--type-small);
}

@media (max-width: 768px) {
  .breadcrumb {
    padding: var(--space-2) var(--space-4);
    font-size: var(--type-tiny);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

.breadcrumb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 1280px;
  margin: 0 auto;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--terracotta);
  text-decoration: underline;
}

.breadcrumb-item a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Current page (last item) — no link, weight 500 */
.breadcrumb-current span {
  color: var(--ink-700);
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--ink-300);
  font-weight: 400;
  user-select: none;
}

/* Hidden when component is unused (e.g., on homepage which doesn't render breadcrumb) */
.breadcrumb[hidden],
.breadcrumb[aria-hidden="true"] {
  display: none;
}


/* --- faq-page.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Subtask 16: FAQ Page Template styles
   Per-category landing page (e.g. /v3/{locale}/faq/visa/index.html)
   Built on top of faq-section.css (homepage FAQ) — extends for full-page context
   Created: 2026-05-29 Group D Phase 2 per MSG-090
   ───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   FAQ page hero (category header + search)
   ───────────────────────────────────────────────────── */
.faq-page-hero {
  width: 100%;
  padding: var(--space-12) var(--space-4);
  background: linear-gradient(135deg, var(--cream) 0%, rgba(232, 152, 94, 0.06) 100%);
  border-bottom: 1px solid var(--ink-100);
}

@media (max-width: 768px) {
  .faq-page-hero {
    padding: var(--space-8) var(--space-4);
  }
}

.faq-page-hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.faq-page-title {
  font-size: var(--type-display);
  font-weight: 700;
  color: var(--ink-900);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .faq-page-title {
    font-size: 28px;
  }
}

.faq-page-subtitle {
  font-size: var(--type-body);
  color: var(--ink-700);
  margin-bottom: var(--space-6);
}

.faq-page-search {
  max-width: 560px;
  margin: 0 auto;
}

.faq-page-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-page-search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--ink-500);
  pointer-events: none;
}

.faq-page-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-full);
  font-size: var(--type-body);
  background: var(--white);
  font-family: inherit;
  transition: border-color var(--transition-fast);
  min-height: 44px;
}

.faq-page-search-input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.15);
}

/* ─────────────────────────────────────────────────────
   FAQ list section
   ───────────────────────────────────────────────────── */
.faq-page-list-section {
  padding: var(--space-8) var(--space-4);
}

.faq-page-list-inner {
  max-width: 880px;
  margin: 0 auto;
}

.faq-page-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inherits .faq-item + .faq-details + .faq-question + .faq-answer styles from faq-section.css */

.faq-page-empty {
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--ink-500);
  font-size: var(--type-body);
}

.faq-page-empty a {
  color: var(--terracotta);
}

/* ─────────────────────────────────────────────────────
   Related categories nav
   ───────────────────────────────────────────────────── */
.faq-page-related {
  background: var(--cream);
  padding: var(--space-8) var(--space-4);
}

.faq-page-related-inner {
  max-width: 1024px;
  margin: 0 auto;
}

.faq-page-related-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-6);
  text-align: center;
}

.faq-page-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

@media (max-width: 1024px) {
  .faq-page-related-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .faq-page-related-list {
    grid-template-columns: 1fr;
  }
}

.faq-page-related-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-900);
  transition: all var(--transition-fast);
  min-height: 56px;
}

.faq-page-related-link:hover {
  border-color: var(--terracotta);
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.faq-page-related-icon {
  font-size: 24px;
}

.faq-page-related-name {
  font-weight: 600;
  flex: 1;
}

.faq-page-related-count {
  font-size: var(--type-tiny);
  color: var(--ink-500);
}

/* ─────────────────────────────────────────────────────
   Bottom CTA strip
   ───────────────────────────────────────────────────── */
.faq-page-cta-strip {
  background: var(--ink-900);
  color: var(--cream);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.faq-page-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.faq-page-cta-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.faq-page-cta-desc {
  font-size: var(--type-body);
  color: var(--cream);
  opacity: 0.85;
  margin-bottom: var(--space-6);
}

.faq-page-cta-button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--terracotta);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--type-body);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.faq-page-cta-button:hover {
  background: var(--sunset);
  transform: translateY(-2px);
}


/* --- faq-section.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 6: FAQ Section styles (Subtask 12)
   Accordion via native <details>/<summary> elements (no JS required)
   Source: V3 Component Specs Component 6
   Created: 2026-05-29 Group C Phase 3 per MSG-088
   ───────────────────────────────────────────────────── */

.faq-section {
  width: 100%;
  padding: var(--space-16) var(--space-8);  /* LAYOUT-1 Rule #4: 64px desktop vertical */
  background: var(--white);                  /* LAYOUT-1 Rule #5: news-feed=white → services=cream → faq=white alternation */
}

@media (max-width: 1024px) {
  .faq-section {
    padding: var(--space-12) var(--space-4); /* 48px tablet/mobile vertical */
  }
}

.faq-section-inner {
  max-width: 880px;
  margin: 0 auto;
}

.faq-section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.faq-section-eyebrow {
  display: inline-block;
  /* Round 2 Batch 2 Step 7: align to standard eyebrow (Rule #6 consistency
     with news-feed + services: tiny / 700 / 0.1em tracking) */
  font-size: var(--type-tiny);
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.faq-section-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
  line-height: 1.3;
  /* Round 2 Batch 2 Step 7: heavier intentional headline + orphan prevention */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.faq-section-subheading {
  font-size: var(--type-body);
  /* Round 2 Batch 2 Step 7: align subheading color + line-height to standard (ink-700 / 1.6) */
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────
   FAQ accordion list
   ───────────────────────────────────────────────────── */
.faq-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--cream);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-sm);
}

.faq-item:has(.faq-details[open]) {
  background: var(--white);
  border-color: var(--terracotta);
  box-shadow: var(--shadow-md);
}

/* Fallback for browsers without :has() */
.faq-details[open] {
  background: var(--white);
}

.faq-details {
  /* native <details> element */
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5, 20px);
  cursor: pointer;
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.4;
  user-select: none;
  list-style: none;
  min-height: 56px;
  position: relative;
}

/* Hide default disclosure triangle (Safari + Chrome) */
.faq-question::-webkit-details-marker {
  display: none;
}

/* Custom chevron indicator */
.faq-question::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--transition-fast);
}

.faq-details[open] .faq-question::after {
  transform: rotate(180deg);
}

.faq-question:hover {
  color: var(--terracotta);
}

.faq-question:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8553D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.faq-question:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────
   Answer body
   ───────────────────────────────────────────────────── */
.faq-answer {
  padding: 0 var(--space-5, 20px) var(--space-4);
  color: var(--ink-700);
  font-size: var(--type-body);
  line-height: 1.6;
}

.faq-answer p {
  margin: 0;
}

.faq-answer p + p {
  margin-top: var(--space-3);
}

/* ─────────────────────────────────────────────────────
   Footer CTA
   ───────────────────────────────────────────────────── */
.faq-section-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.faq-section-cta-link {
  display: inline-block;
  /* Round 2 Batch 1 Step 4: normalize CTA padding to tokens (12=space-3, 24=space-6) */
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 2px solid var(--terracotta);
  color: var(--terracotta);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--type-body);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.faq-section-cta-link:hover {
  background: var(--terracotta);
  color: var(--white);
}

/* Round 2 Batch 2 Step 3: press feedback */
.faq-section-cta-link:active {
  transform: scale(0.97);
}

.faq-section-cta-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}


/* --- footer.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 9: Footer styles
   Source: V3 Component Specs lines 904-947 + Stockpile E lines 306-458
   2-col grid desktop / 1-col mobile stack + Korean biz reg block + copyright wording lock
   Created: 2026-05-29 Subtask 5 of Group A per MSG-073
   ───────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-12) var(--space-8) var(--space-6);
}

.footer-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Left bigger than right per spec */
  gap: var(--space-12);
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .site-footer {
    padding: var(--space-8) var(--space-4) var(--space-4);
  }
  .footer-container {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ─────────────────────────────────────────────────────
   Logo
   ───────────────────────────────────────────────────── */
.footer-logo-link {
  display: inline-block;
  margin-bottom: var(--space-4);
  text-decoration: none;
}

.footer-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1); /* monochrome white */
}

/* ─────────────────────────────────────────────────────
   Company info block
   ───────────────────────────────────────────────────── */
.footer-label {
  font-size: var(--type-small);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-2);
}

.footer-company-name {
  font-size: var(--type-h3);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-1);
}

.footer-address {
  font-size: var(--type-body);
  margin-bottom: var(--space-4);
  color: rgba(255, 255, 255, 0.8);
}

/* ─────────────────────────────────────────────────────
   Korean biz registration block (highlighted)
   ───────────────────────────────────────────────────── */
.footer-biz-reg {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--jade);
  border-radius: var(--radius-sm);
}

.footer-biz-reg-heading {
  font-size: var(--type-small);
  color: var(--jade);
  margin: 0 0 var(--space-3) 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.footer-biz-reg-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: var(--type-small);
  margin: 0;
}

.footer-biz-reg-list dt {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.footer-biz-reg-list dd {
  color: var(--white);
  font-family: 'Courier New', 'Menlo', monospace; /* Mono for biz reg numbers */
  margin: 0;
}

/* ─────────────────────────────────────────────────────
   CEO line
   ───────────────────────────────────────────────────── */
.footer-ceo {
  margin-top: var(--space-4);
}

.footer-ceo-line {
  font-size: var(--type-small);
  color: rgba(255, 255, 255, 0.7);
}

.footer-ceo-name {
  font-weight: 600;
  color: var(--white);
  margin-left: var(--space-1);
}

/* ─────────────────────────────────────────────────────
   Social media
   ───────────────────────────────────────────────────── */
.footer-social {
  margin-top: var(--space-6);
}

.footer-social-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.footer-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--white);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social-links a:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
}

.footer-social-links a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   Footer nav (RIGHT column)
   ───────────────────────────────────────────────────── */
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--type-body);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-nav a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────
   Contact + App badges
   ───────────────────────────────────────────────────── */
.footer-contact {
  margin-top: var(--space-6);
}

.footer-contact a {
  color: var(--sunset);
  text-decoration: none;
  font-size: var(--type-body);
}

.footer-contact a:hover {
  text-decoration: underline;
  color: var(--white);
}

/* Phase 2 app badges hidden via data-phase attribute */
.footer-apps[data-phase="2"] {
  display: none;
}

/* ─────────────────────────────────────────────────────
   Copyright bar (wording lock per CEO non-negotiable #9)
   ───────────────────────────────────────────────────── */
.footer-copyright-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  text-align: center;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.footer-copyright {
  font-size: var(--type-small);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}


/* --- header.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 1: Top Utility Bar styles
   Source: V3 Component Specs lines 127-200
   Sticky 72px desktop / 56px mobile + frosted cream BG opacity 95%
   Created: 2026-05-29 Subtask 2 of Group A per MSG-073
   R2.3 critical: entire file in critical CSS (topbar 100% above-fold)
   ───────────────────────────────────────────────────── */

/* CRITICAL:START header-all */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 238, 0.95); /* --cream with 95% opacity (frosted) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-100);
  height: 72px;
  display: flex;
  align-items: center;
  /* Fallback for browsers without backdrop-filter (Safari iOS <14) */
  @supports not (backdrop-filter: blur(10px)) {
    background: var(--cream);
  }
}

@media (max-width: 768px) {
  .site-header {
    height: 56px;
  }
}

.site-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .site-header-inner {
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }
}

/* ─────────────────────────────────────────────────────
   Logo
   ───────────────────────────────────────────────────── */
.site-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto; /* push lang switcher + icons to right */
  transition: opacity var(--transition-fast);
}

.site-logo-link:hover {
  opacity: 0.85;
}

.site-logo {
  height: 40px;
  width: auto;
  max-width: 200px; /* Cycle 4 Issue 1 fix: was 160px, expanded for full "GoVietnamGlobal" text */
}

@media (max-width: 768px) {
  .site-logo {
    height: 32px;
    max-width: 165px; /* Cycle 4 Issue 1 fix: was 130px, proportional scale-down */
  }
}

/* Fallback text logo (shown if SVG fails to load) */
.site-logo-text {
  display: none;
  font-size: 20px;
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: -0.02em;
}

.site-logo-text strong {
  color: var(--terracotta);
  font-weight: 700;
}

/* Show text fallback if image broken (CSS technique: alt text + display) */
.site-logo[alt]:after {
  content: attr(alt);
}

/* ─────────────────────────────────────────────────────
   Compact lang dropdown (Cycle 8 Item 1 — replaces inline 6-flag row)
   Source: skill tvk-website-compact-lang-switcher §1.1 design rationale
   Tailwind → V3 CSS Custom Properties mapping
   ───────────────────────────────────────────────────── */
.lang-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  color: var(--ink-700);
  font-size: var(--type-small);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  min-height: 36px;
}

.lang-switcher-btn:hover {
  background: var(--cream);
  border-color: var(--ink-300);
}

/* Round 2 Batch 2 Step 3: press feedback on lang switcher (visible every page) */
.lang-switcher-btn:active {
  transform: scale(0.97);
}

.lang-switcher-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.lang-switcher-btn[aria-expanded="true"] {
  background: var(--cream);
  border-color: var(--terracotta);
}

.lang-switcher-icon {
  color: var(--jade);
  flex-shrink: 0;
}

.lang-switcher-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lang-switcher-chevron {
  color: var(--ink-700);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.lang-switcher-btn[aria-expanded="true"] .lang-switcher-chevron {
  transform: rotate(180deg);
  color: var(--terracotta);
}
/* CRITICAL:END header-all */

/* ─────────────────────────────────────────────────────
   Dropdown panel (right-aligned, w-40 = 160px per skill) — DEFERRED (post-click interaction)
   Cycle 8: split out of critical bundle to keep R2.3 budget under 14 KB TCP-1 window
   ───────────────────────────────────────────────────── */
.lang-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 160px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}

.lang-dropdown-panel[hidden] {
  display: none;
}

@media (max-width: 768px) {
  /* Mobile: ensure dropdown above Termly cookie banner (z-9999) per skill §4 Option A */
  .lang-dropdown-panel {
    z-index: 10000;
  }
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--ink-900);
  font-size: var(--type-small);
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: 40px;
  border-bottom: 1px solid var(--ink-100);
}

.lang-dropdown-item:last-child {
  border-bottom: none;
}

.lang-dropdown-item:hover {
  background: var(--cream);
}

.lang-dropdown-item:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
  background: var(--cream);
}

.lang-dropdown-item[aria-current="true"] {
  background: var(--cream);
  color: var(--terracotta);
  font-weight: 600;
}

.lang-dropdown-native {
  flex: 1;
}

.lang-dropdown-iso {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-700);
  letter-spacing: 0.04em;
}

/* KO highlight per skill §1.2 — brand color marker (TVK Korean origin) */
.lang-dropdown-iso-ko {
  color: var(--terracotta);
}

/* Hide dropdown on mobile (moves into hamburger drawer Subtask 6) */
@media (max-width: 768px) {
  .lang-dropdown-wrap {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────
   Search + Saved + Hamburger icons
   Cycle 8: re-wrap in CRITICAL block (above-fold, always visible buttons)
   ───────────────────────────────────────────────────── */
/* CRITICAL:START header-icons */
.site-search-btn,
.site-saved-btn,
.site-hamburger {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-700);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.site-search-btn:hover,
.site-saved-btn:hover,
.site-hamburger:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.site-search-btn:focus-visible,
.site-saved-btn:focus-visible,
.site-hamburger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Saved heart hidden Phase 1B */
.site-saved-btn[data-phase="2"] {
  display: none;
}

/* Hamburger hidden on desktop (>= 768px) */
.site-hamburger {
  display: none;
}

@media (max-width: 768px) {
  .site-hamburger {
    display: inline-flex;
  }
}
/* CRITICAL:END header-icons */


/* --- hero-carousel.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 3: Hero 3-Banner Carousel styles
   Source: V3 Component Specs V1.1 lines 295-410
   Desktop: 3-column flex 1280px container · banner 320px height · gap 16px · radius-lg
   Tablet:  3-column flex · banner 280px · gap 12px · padding tightened
   Mobile:  1-column scroll-snap swipeable · banner 220px · full-bleed
   Auto-rotation 6s · pause hover/touch/focus · dots + prev/next nav · IntersectionObserver pause off-screen
   Created: 2026-05-29 Subtask 8 Group B per MSG-080 + Path A parallel Cycle 4
   R2.3 critical: container + 3-col grid skeleton + banner dims + mobile @media skeleton
   Deferred: hover lift transitions · keyframe fade-in animation · dots active state · prev/next nav buttons
   ───────────────────────────────────────────────────── */

/* CRITICAL:START hero-carousel-skeleton */
.hero-carousel {
  position: relative;
  width: 100%;
  padding: var(--space-8) var(--space-8);
  background: var(--cream);
}

@media (max-width: 1024px) {
  .hero-carousel {
    padding: var(--space-6) var(--space-4);
  }
}

@media (max-width: 768px) {
  .hero-carousel {
    padding: var(--space-4) 0;
  }
}

.hero-carousel-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────
   Track + slide sets (slide sets stacked, only current visible)
   ───────────────────────────────────────────────────── */
.hero-track {
  position: relative;
  width: 100%;
}

.hero-slide-set {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  animation: hero-fade-in 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  .hero-slide-set {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .hero-slide-set {
    grid-template-columns: 1fr;
    gap: 0;
    /* Mobile: scroll-snap swipe per V3 spec */
    grid-template-columns: 100%;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hero-slide-set::-webkit-scrollbar {
    display: none;
  }
}

.hero-slide-set[hidden] {
  display: none;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────
   Banner card (per slot)
   ───────────────────────────────────────────────────── */
.hero-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  height: 320px;
  transition: transform var(--transition-default);
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .hero-banner {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .hero-banner {
    height: 220px;
    border-radius: 0;
  }
}

.hero-banner:hover {
  transform: translateY(-4px);
}

.hero-banner-picture {
  position: absolute;
  inset: 0;
  display: block;
  /* Cycle 8 Track C3: Tropical Warm gradient fallback when image fails/missing
     Per-banner color variation provided via :nth-child below for visual rhythm */
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--sunset) 50%, var(--jade) 100%);
}

/* Per-banner gradient variants — graceful broken-image rhythm
   (until CEO/Cowork upload 12 hero photos to /images/hero/) */
.hero-banner:nth-child(1) .hero-banner-picture {
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--sunset) 100%);
}
.hero-banner:nth-child(2) .hero-banner-picture {
  background: linear-gradient(135deg, var(--jade) 0%, var(--badge-safety) 100%);
}
.hero-banner:nth-child(3) .hero-banner-picture {
  background: linear-gradient(135deg, var(--info) 0%, var(--widget-purple) 100%);
}

.hero-banner-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Cycle 8 Track C3 + LAYOUT-1 Rule #9: Hide broken alt-text rendering when image fails.
     Browser default shows alt text on gray background — we instead show transparent so
     the gradient fallback (parent background) shows through cleanly. */
  color: transparent;
  font-size: 0;
}

/* When image fails to load, hide it entirely (gradient fallback shows through) */
.hero-banner-picture img:not([src]),
.hero-banner-picture img[src=""] {
  display: none;
}

/* LAYOUT-1 Rule #9: explicit .placeholder-fallback class toggled by JS onerror.
   Hides broken image entirely + shows subtle overlay hint over gradient. */
.hero-banner-picture.placeholder-fallback img {
  display: none;
}

.hero-banner-picture.placeholder-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
/* CRITICAL:END hero-carousel-skeleton */

/* Overlay gradient + text styles — DEFERRED (image is LCP element, text FOUC <100ms acceptable) */
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  color: var(--white);
}

@media (max-width: 768px) {
  .hero-banner-overlay {
    padding: var(--space-4);
  }
}

.hero-banner-eyebrow {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  color: var(--sunset);
}

.hero-banner-title {
  font-size: var(--type-h3);
  line-height: var(--line-height-h3);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  /* Round 2 Batch 2 Step 7: tighter tracking + orphan prevention on hero headlines */
  letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .hero-banner-title {
    font-size: var(--type-body);
    line-height: 1.4;
  }
}

.hero-banner-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  /* Round 2 Batch 1 Step 4: normalize hero CTA padding to tokens (8=space-2, 16=space-4) */
  padding: var(--space-2) var(--space-4);
  background: var(--terracotta);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--type-small);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  min-height: 44px;
  box-sizing: border-box;
}

.hero-banner-cta:hover {
  background: var(--badge-services); /* terracotta-dark = #A6432F */
  transform: translateX(2px);
}

/* Round 2 Batch 2 Step 3: press feedback (soft-skill Magnetic button §4).
   GPU-safe transform scale, placed after :hover so active state wins on press. */
.hero-banner-cta:active {
  transform: scale(0.96);
}

.hero-banner-cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Card-level focus visible (when card itself is interactive in future) — DEFERRED (focus interaction post-load) */
.hero-banner:focus-within {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

/* ─────────────────────────────────────────────────────
   Prev/Next nav buttons (desktop + tablet only) — DEFERRED (post-interaction nav)
   ───────────────────────────────────────────────────── */
.hero-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--ink-100);
  border-radius: 50%;
  color: var(--ink-900);
  cursor: pointer;
  z-index: 5;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hero-nav-btn:hover {
  background: var(--white);
  color: var(--terracotta);
  transform: translateY(-50%) scale(1.05);
}

/* Round 2 Batch 2 Step 3: press feedback — preserve translateY(-50%) centering */
.hero-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.hero-nav-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.hero-nav-prev {
  left: -8px;
}

.hero-nav-next {
  right: -8px;
}

@media (max-width: 768px) {
  /* Hide prev/next on mobile — users swipe natively */
  .hero-nav-btn {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────
   Dot indicators (4 slide sets)
   ───────────────────────────────────────────────────── */
.hero-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--ink-300);
  cursor: pointer;
  transition: all var(--transition-fast);
  /* Larger touch target via pseudo-element */
  position: relative;
}

.hero-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
  /* expand clickable area to 30×30 (touch target) without visual size growth */
}

.hero-dot[aria-selected="true"] {
  background: var(--terracotta);
  width: 24px;
  border-radius: var(--radius-full);
}

.hero-dot:hover {
  background: var(--ink-500);
}

.hero-dot[aria-selected="true"]:hover {
  background: var(--terracotta);
}

.hero-dot:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}


/* --- mega-menu.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 2: Mega Menu Navigation styles
   Source: V3 Component Specs lines 203-291
   10 items LOCKED · 56px desktop · sticky below topbar · hover dropdown 480px
   Mobile: hidden (collapse into hamburger drawer Subtask 6)
   Created: 2026-05-29 Subtask 3 of Group A per MSG-073 + Path A
   R2.3 critical: nav row + 10 items + colored badges (above-fold)
   Deferred: dropdown panel contents (post-hover interaction, below-fold)
   ───────────────────────────────────────────────────── */

/* CRITICAL:START mega-menu-nav-row */
.mega-menu {
  position: sticky;
  top: 72px; /* below topbar 72px */
  z-index: 99;
  background: var(--white);
  border-bottom: 1px solid var(--ink-100);
  height: 56px;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .mega-menu {
    /* Hidden on mobile per spec — collapses into hamburger drawer Subtask 6 */
    display: none;
  }
}

@media (max-width: 1024px) {
  .mega-menu {
    top: 72px; /* still below topbar */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.mega-menu-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.mega-menu-item {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

@media (max-width: 1024px) {
  .mega-menu-item {
    flex: 0 0 auto;
    min-width: 110px;
  }
}

.mega-menu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  width: 100%;
  height: 100%;
  color: var(--ink-700);
  font-weight: 500;
  font-size: var(--type-body);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mega-menu-link:hover {
  color: var(--terracotta);
  background: var(--cream);
}

.mega-menu-link[aria-current="page"] {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.mega-menu-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.mega-menu-icon {
  font-size: 18px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────
   Cycle 4 — Colored badge icons (Lucide SVG 16×16 in 28×28 badge circle)
   Source: TVK_GVG_V3_MEGA_MENU_ICONS_DESIGN_T5_2026.md (Stockpile K)
   Pattern: 28px circle BG + 16px white-stroke Lucide icon centered
   Per-route color via [data-route="..."] attr selector below
   ───────────────────────────────────────────────────── */
.mega-menu-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-500); /* fallback if route unknown */
  color: var(--white);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.mega-menu-icon-badge svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
/* CRITICAL:END mega-menu-nav-row */

/* Per-route badge colors (10 categories — Tropical Warm extended palette) — DEFERRED
   Brief gray fallback (var(--ink-500)) shown during full CSS load (~100ms), then colors paint.
   Acceptable FOUC trade-off for ~600B critical save (R2.3 TCP-1 budget). */
.mega-menu-link[data-route="visa"] .mega-menu-icon-badge          { background: var(--badge-visa); }
.mega-menu-link[data-route="destinations"] .mega-menu-icon-badge  { background: var(--badge-destinations); }
.mega-menu-link[data-route="food"] .mega-menu-icon-badge          { background: var(--badge-food); }
.mega-menu-link[data-route="safety"] .mega-menu-icon-badge        { background: var(--badge-safety); }
.mega-menu-link[data-route="transport"] .mega-menu-icon-badge     { background: var(--badge-transport); }
.mega-menu-link[data-route="stay"] .mega-menu-icon-badge          { background: var(--badge-stay); }
.mega-menu-link[data-route="costs"] .mega-menu-icon-badge         { background: var(--badge-costs); }
.mega-menu-link[data-route="culture"] .mega-menu-icon-badge       { background: var(--badge-culture); }
.mega-menu-link[data-route="faq"] .mega-menu-icon-badge           { background: var(--badge-faq); }
.mega-menu-link[data-route="services"] .mega-menu-icon-badge      { background: var(--badge-services); }

/* Hover state: badge lift + subtle shadow — DEFERRED (interaction post-load) */
.mega-menu-link:hover .mega-menu-icon-badge {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* CRITICAL:START mega-menu-nav-row-cont */
/* Critical resumes: .mega-menu-label sizing + 1280px @media padding (visible above-fold) */

.mega-menu-label {
  font-size: 14px;
  letter-spacing: 0.01em;
}

@media (max-width: 1280px) {
  .mega-menu-label {
    font-size: 13px;
  }
  .mega-menu-link {
    padding: 0 var(--space-3);
  }
}
/* CRITICAL:END mega-menu-nav-row-cont */

/* ─────────────────────────────────────────────────────
   Dropdown panel (desktop hover only) — DEFERRED (post-hover interaction)
   ───────────────────────────────────────────────────── */
.mega-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 480px;
  padding: var(--space-6);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--transition-default),
    visibility var(--transition-default),
    transform var(--transition-default);
  /* Open delay 150ms per spec — using transition-delay */
  transition-delay: 0ms; /* close immediately */
  pointer-events: none;
  z-index: 98;
}

/* On hover, fade in dropdown (delay 150ms per spec) */
.mega-menu-item:hover .mega-menu-dropdown,
.mega-menu-item:focus-within .mega-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 150ms; /* open delay 150ms — avoid accidental trigger */
}

/* Dropdown stays open briefly when mouse leaves item (300ms close per spec) */
.mega-menu-item .mega-menu-dropdown {
  transition-duration: 300ms;
}

@media (max-width: 1024px) {
  /* Hide dropdown on tablet — items become scrollable inline */
  .mega-menu-dropdown {
    display: none;
  }
}

/* Edge case: last few items may need right-aligned dropdown (avoid overflow) */
.mega-menu-item:nth-last-child(-n+3) .mega-menu-dropdown {
  left: auto;
  right: 0;
}

.mega-menu-dropdown-desc {
  font-size: var(--type-small);
  color: var(--ink-500);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-100);
}

.mega-menu-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mega-menu-dropdown-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--ink-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--type-body);
  transition: all var(--transition-fast);
}

.mega-menu-dropdown-list a:hover {
  color: var(--terracotta);
  background: var(--cream);
}

.mega-menu-dropdown-list a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}


/* --- mobile-drawer.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 1 Mobile: Hamburger Drawer styles
   Source: V3 Component Specs lines 188-198 + 280-291
   300px left slide-out · full-height · backdrop overlay · accordion sub-nav
   Created: 2026-05-29 Subtask 6 of Group A per MSG-073 + Path A Cycle 3
   R2.3 critical: ONLY .visually-hidden a11y utility (used by skip-to-content link).
                  Drawer itself = fully deferred (post-hamburger-click interaction).
                  Hamburger button trigger styles live in header.css (already critical).
   ───────────────────────────────────────────────────── */

/* CRITICAL:START mobile-drawer-a11y */
/* Visually hidden utility (screen-reader only) — required above-fold for skip-link */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* CRITICAL:END mobile-drawer-a11y */

/* ─────────────────────────────────────────────────────
   Backdrop overlay (covers viewport behind drawer)
   ───────────────────────────────────────────────────── */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5); /* ink-900 50% */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-default),
    visibility var(--transition-default);
  z-index: 200;
}

.mobile-drawer-overlay[data-drawer-overlay-open="true"] {
  opacity: 1;
  visibility: visible;
}

/* Drawer hidden by default on all screen sizes (only mounted in HTML for mobile usage) */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh; /* dynamic viewport — accounts for mobile address bar */
  background: var(--white);
  z-index: 201;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform var(--transition-default);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  outline: none;
}

.mobile-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

/* Hide drawer + overlay completely on desktop (>= 769px) — drawer is mobile-only UI */
@media (min-width: 769px) {
  .mobile-drawer,
  .mobile-drawer-overlay {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────
   Drawer header (logo + close button)
   ───────────────────────────────────────────────────── */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--ink-100);
  background: var(--cream);
  flex-shrink: 0;
}

.mobile-drawer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.mobile-drawer-logo img {
  height: 36px;
  width: auto;
  max-width: 140px;
}

.mobile-drawer-close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ink-700);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.mobile-drawer-close:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.mobile-drawer-close:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   Search field
   ───────────────────────────────────────────────────── */
.mobile-drawer-search {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-100);
  flex-shrink: 0;
}

.mobile-drawer-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.mobile-drawer-search-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--ink-500);
  pointer-events: none;
}

.mobile-drawer-search input[type="search"] {
  width: 100%;
  padding: 10px 12px 10px 40px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-size: var(--type-body);
  color: var(--ink-900);
  background: var(--cream);
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.mobile-drawer-search input[type="search"]:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--white);
}

/* ─────────────────────────────────────────────────────
   Lang switcher 6-flag (grid 3 columns × 2 rows)
   ───────────────────────────────────────────────────── */
.mobile-drawer-langs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ink-100);
  flex-shrink: 0;
}

.mobile-drawer-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: var(--type-small);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--ink-100);
  transition: all var(--transition-fast);
  min-height: 44px; /* WCAG touch target */
}

.mobile-drawer-lang-link:hover,
.mobile-drawer-lang-link:focus-visible {
  background: var(--cream);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.mobile-drawer-lang-link[aria-current="true"] {
  background: var(--cream);
  border-color: var(--terracotta);
  color: var(--terracotta);
  font-weight: 600;
}

.mobile-drawer-lang-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Cycle 4 Issue 2 fix: hide flag emoji span (Windows non-render → "VN" + "VI" duplicated).
   Mirrors .lang-flag rule in header.css — consistent cross-platform UX. */
.mobile-drawer-lang-flag {
  display: none;
}

.mobile-drawer-lang-label {
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────
   Mega menu items (10 LOCKED) — vertical list + accordion sub-tabs
   ───────────────────────────────────────────────────── */
.mobile-drawer-nav {
  flex: 1; /* fill remaining space */
}

.mobile-drawer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-drawer-nav-item {
  border-bottom: 1px solid var(--ink-100);
}

.mobile-drawer-nav-link,
.mobile-drawer-nav-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-4);
  background: transparent;
  border: none;
  color: var(--ink-900);
  font-size: var(--type-body);
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 56px; /* WCAG touch target XL */
  transition: background var(--transition-fast);
}

.mobile-drawer-nav-link:hover,
.mobile-drawer-nav-toggle:hover {
  background: var(--cream);
  color: var(--terracotta);
}

.mobile-drawer-nav-link:focus-visible,
.mobile-drawer-nav-toggle:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.mobile-drawer-nav-icon {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.mobile-drawer-nav-label {
  flex: 1;
}

.mobile-drawer-nav-chevron {
  color: var(--ink-500);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.mobile-drawer-nav-toggle[aria-expanded="true"] .mobile-drawer-nav-chevron {
  transform: rotate(180deg);
  color: var(--terracotta);
}

.mobile-drawer-nav-toggle[aria-expanded="true"] {
  background: var(--cream);
  color: var(--terracotta);
}

/* ─────────────────────────────────────────────────────
   Sub-nav list (accordion content)
   ───────────────────────────────────────────────────── */
.mobile-drawer-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--cream);
  border-top: 1px solid var(--ink-100);
}

.mobile-drawer-sub-list li {
  border-bottom: 1px solid var(--ink-100);
}

.mobile-drawer-sub-list li:last-child {
  border-bottom: none;
}

.mobile-drawer-sub-list a {
  display: block;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 28px + var(--space-3));
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--type-small);
  min-height: 44px; /* WCAG touch target */
  transition: all var(--transition-fast);
}

.mobile-drawer-sub-list a:hover,
.mobile-drawer-sub-list a:focus-visible {
  background: var(--white);
  color: var(--terracotta);
}

.mobile-drawer-sub-list a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

/* ─────────────────────────────────────────────────────
   Footer links + biz micro
   ───────────────────────────────────────────────────── */
.mobile-drawer-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  border-top: 1px solid var(--ink-100);
  font-size: var(--type-small);
  flex-shrink: 0;
}

.mobile-drawer-footer-links a {
  color: var(--ink-700);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-drawer-footer-links a:hover {
  color: var(--terracotta);
  text-decoration: underline;
}

.mobile-drawer-footer-links span {
  color: var(--ink-300);
}

.mobile-drawer-biz-micro {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--type-tiny);
  color: var(--ink-500);
  text-align: center;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────
   Body scroll lock (applied by JS when drawer opens)
   ───────────────────────────────────────────────────── */
body[data-drawer-open="true"] {
  overflow: hidden;
  /* Prevent layout shift on iOS Safari when scrollbars disappear */
  touch-action: none;
}


/* --- news-feed.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 5: 2-Column News Feed styles (Subtasks 10 + 11)
   Source: V3 Component Specs Component 5 + Stockpile G
   Desktop: 2-col grid (Trending LEFT 50% + Editorial RIGHT 50%)
   Tablet/Mobile: stacked single column
   Created: 2026-05-29 Group C Phase 1a+2a per MSG-088 sub-sequencing
   ───────────────────────────────────────────────────── */

.news-feed {
  width: 100%;
  padding: var(--space-16) var(--space-8);  /* LAYOUT-1 Rule #4: 64px desktop vertical */
  background: var(--white);
}

@media (max-width: 1024px) {
  .news-feed {
    padding: var(--space-12) var(--space-4); /* 48px tablet/mobile vertical */
  }
}

.news-feed-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* LAYOUT-1 Rule #6: standardized section header pattern */
.news-feed-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}

.news-feed-eyebrow {
  display: inline-block;
  font-size: var(--type-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}

.news-feed-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  /* Round 2 Batch 2 Step 7: heavier intentional headline (negative tracking) + orphan prevention */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .news-feed-heading {
    font-size: 24px;
  }
}

.news-feed-subheading {
  font-size: var(--type-body);
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
  /* Round 2 Batch 2 Step 7: smarter line breaks (avoid last-line orphans) */
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────
   2-col grid
   ───────────────────────────────────────────────────── */
.news-feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 1024px) {
  .news-feed-grid {
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .news-feed-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ─────────────────────────────────────────────────────
   Column shared styles
   ───────────────────────────────────────────────────── */
.news-col {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--ink-100);
}

.news-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: var(--space-4);
}

.news-col-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

.news-col-emoji {
  font-size: 24px;
  line-height: 1;
}

.news-col-badge {
  font-size: var(--type-tiny);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.news-col-footnote {
  font-size: var(--type-tiny);
  color: var(--ink-500);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--ink-300);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────
   Subtask 11 — Trending Now (ordered list with rank numbers)
   ───────────────────────────────────────────────────── */
.news-trending-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: trending-rank;
}

.news-trending-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink-100);
  transition: background var(--transition-fast);
}

.news-trending-item:last-child {
  border-bottom: none;
}

.news-trending-item:hover {
  background: var(--white);
}

.news-trending-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--white);
  font-weight: 700;
  font-size: var(--type-small);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Top 3 get distinct gradient backgrounds — Round 2 Step 2 color cleanup
   (Cowork MSG-108 Step 2): converted from generic gold/silver/bronze metals
   to Tropical Warm palette tokens. Visual hierarchy preserved (warm→neutral→deep-warm)
   while staying within brand palette per adoption guide §6. */
.news-trending-item:nth-child(1) .news-trending-rank {
  /* #1 — sunset → amber: warm gold-like, brand-aligned */
  background: linear-gradient(135deg, var(--sunset) 0%, var(--badge-costs) 100%);
  color: var(--ink-900);
}

.news-trending-item:nth-child(2) .news-trending-rank {
  /* #2 — neutral mid-grays from ink scale (silver substitute, palette-aligned) */
  background: linear-gradient(135deg, var(--ink-300) 0%, var(--ink-500) 100%);
}

.news-trending-item:nth-child(3) .news-trending-rank {
  /* #3 — terracotta family: deep warm bronze-like, brand authority */
  background: linear-gradient(135deg, var(--badge-services) 0%, var(--terracotta) 100%);
}

.news-trending-body {
  flex: 1;
  min-width: 0;
}

.news-trending-title {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 4px;
  line-height: 1.4;
}

.news-trending-title a {
  color: inherit;
  text-decoration: none;
}

.news-trending-title a:hover {
  color: var(--terracotta);
}

.news-trending-meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--type-tiny);
  color: var(--ink-500);
}

.news-trending-views {
  font-weight: 600;
  color: var(--terracotta);
}

/* ─────────────────────────────────────────────────────
   Subtask 10 — Editor's Pick (thumb + body cards)
   ───────────────────────────────────────────────────── */
.news-editorial-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-editorial-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ink-100);
  transition: background var(--transition-fast);
}

.news-editorial-item:last-child {
  border-bottom: none;
}

.news-editorial-item:hover {
  background: var(--white);
}

.news-editorial-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: var(--type-h3);
  color: var(--white);
  flex-shrink: 0;
  background: var(--ink-500);
}

.news-editorial-body {
  flex: 1;
  min-width: 0;
}

.news-editorial-category {
  display: inline-block;
  font-size: var(--type-tiny);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 4px;
}

.news-editorial-title {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 4px;
  line-height: 1.4;
}

.news-editorial-title a {
  color: inherit;
  text-decoration: none;
}

.news-editorial-title a:hover {
  color: var(--terracotta);
}

.news-editorial-meta {
  font-size: var(--type-tiny);
  color: var(--ink-500);
}

/* ─────────────────────────────────────────────────────
   CTA strip
   ───────────────────────────────────────────────────── */
.news-feed-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.news-feed-cta-link {
  display: inline-block;
  /* Round 2 Batch 1 Step 4: normalize CTA padding to tokens (12=space-3, 24=space-6) */
  padding: var(--space-3) var(--space-6);
  background: var(--terracotta);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--type-body);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.news-feed-cta-link:hover {
  background: var(--badge-services);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Round 2 Batch 2 Step 3: press feedback — collapse the hover lift + scale down */
.news-feed-cta-link:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-sm);
}

.news-feed-cta-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Loading placeholder state */
[data-loading-placeholder] {
  opacity: 0.5;
}


/* --- quiz-result.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Subtask 17: Quiz Result Page Template styles
   Visa eligibility verdict page (deep-link from Visa Checker widget)
   Reads URL params + visa-eligibility.json → populates verdict
   Created: 2026-05-29 Group D Phase 3 per MSG-090
   ───────────────────────────────────────────────────── */

.quiz-result {
  width: 100%;
  padding: var(--space-12) var(--space-4);
  background: var(--cream);
  min-height: 60vh;
}

.quiz-result-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Loading + Error states */
.quiz-result-loading,
.quiz-result-error {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  background: var(--white);
  border-radius: var(--radius-lg);
  font-size: var(--type-body);
  color: var(--ink-700);
}

.quiz-result-error h1 {
  font-size: var(--type-h2);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}

.quiz-result-back-button {
  display: inline-block;
  margin-top: var(--space-4);
  /* Round 2 Batch 1 Step 4: normalize CTA padding to tokens (12=space-3, 24=space-6) */
  padding: var(--space-3) var(--space-6);
  background: var(--terracotta);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────
   Verdict card (main content)
   ───────────────────────────────────────────────────── */
.quiz-result-verdict {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ─────────────────────────────────────────────────────
   Result header — verdict-specific color theme
   ───────────────────────────────────────────────────── */
.quiz-result-header {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: linear-gradient(135deg, var(--cream) 0%, transparent 100%);
  border-bottom: 4px solid var(--ink-300);
}

/* Verdict color theming via [data-result] attr (same pattern as widgets.css visa result) */
.quiz-result-header[data-result="visa_free"] {
  background: linear-gradient(135deg, rgba(45, 125, 111, 0.15) 0%, rgba(45, 125, 111, 0.05) 100%);
  border-bottom-color: var(--jade);
}

.quiz-result-header[data-result="evisa"] {
  background: linear-gradient(135deg, rgba(200, 85, 61, 0.15) 0%, rgba(200, 85, 61, 0.05) 100%);
  border-bottom-color: var(--terracotta);
}

.quiz-result-header[data-result="embassy"] {
  background: linear-gradient(135deg, rgba(232, 152, 94, 0.15) 0%, rgba(232, 152, 94, 0.05) 100%);
  border-bottom-color: var(--sunset);
}

.quiz-result-header[data-result="urgent"] {
  background: linear-gradient(135deg, rgba(166, 67, 47, 0.15) 0%, rgba(166, 67, 47, 0.05) 100%);
  border-bottom-color: var(--badge-services);
}

.quiz-result-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.quiz-result-title {
  font-size: var(--type-h1);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .quiz-result-title {
    font-size: 24px;
  }
}

.quiz-result-summary {
  font-size: var(--type-body);
  color: var(--ink-700);
  margin: 0;
}

/* ─────────────────────────────────────────────────────
   Inputs recap
   ───────────────────────────────────────────────────── */
.quiz-result-section-heading {
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}

.quiz-result-inputs {
  padding: var(--space-6);
  border-bottom: 1px solid var(--ink-100);
}

.quiz-result-inputs-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
}

@media (max-width: 640px) {
  .quiz-result-inputs-list {
    grid-template-columns: 1fr;
  }
}

.quiz-result-inputs-list > div {
  background: var(--cream);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.quiz-result-inputs-list dt {
  font-size: var(--type-tiny);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.quiz-result-inputs-list dd {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}

/* ─────────────────────────────────────────────────────
   Details + recommendation
   ───────────────────────────────────────────────────── */
.quiz-result-details {
  padding: var(--space-6);
  border-bottom: 1px solid var(--ink-100);
}

.quiz-result-details-body {
  font-size: var(--type-body);
  line-height: var(--line-height-body);
  color: var(--ink-700);
}

.quiz-result-details-body p {
  margin: 0 0 var(--space-3);
}

/* ─────────────────────────────────────────────────────
   CTA section
   ───────────────────────────────────────────────────── */
.quiz-result-cta-section {
  padding: var(--space-6);
}

.quiz-result-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.quiz-result-cta-primary,
.quiz-result-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--type-small);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
  border: 1px solid transparent;
}

.quiz-result-cta-primary {
  background: var(--terracotta);
  color: var(--white);
  flex: 1;
  min-width: 200px;
  justify-content: center;
}

.quiz-result-cta-primary:hover {
  background: var(--badge-services);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quiz-result-cta-secondary {
  background: var(--white);
  color: var(--ink-700);
  border-color: var(--ink-300);
}

.quiz-result-cta-secondary:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: var(--cream);
}

.quiz-result-cta-primary:focus-visible,
.quiz-result-cta-secondary:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   Trust signals strip
   ───────────────────────────────────────────────────── */
.quiz-result-trust {
  background: var(--ink-100);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--type-tiny);
  color: var(--ink-700);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────
   Print styles
   ───────────────────────────────────────────────────── */
@media print {
  .quiz-result {
    padding: 0;
    background: white;
  }

  .quiz-result-verdict {
    box-shadow: none;
    /* Round 2 Step 2 color cleanup: #ccc → var(--ink-300) (same value, palette-aligned) */
    border: 1px solid var(--ink-300);
  }

  .quiz-result-cta-actions,
  .quiz-result-trust {
    display: none;
  }
}


/* --- services-strip.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 7: Services Strip styles (Subtask 13)
   6 TVK service pillars in 3×2 grid (desktop) / 2×3 (tablet) / 1×6 (mobile)
   Each card color-coded với badge palette
   Source: V3 Component Specs Component 7 + Tropical Warm extended palette
   Created: 2026-05-29 Group C Phase 1b per MSG-088
   ───────────────────────────────────────────────────── */

.services-strip {
  width: 100%;
  padding: var(--space-16) var(--space-8);  /* LAYOUT-1 Rule #4: 64px desktop vertical */
  background: var(--cream);
}

@media (max-width: 1024px) {
  .services-strip {
    padding: var(--space-12) var(--space-4); /* 48px tablet/mobile vertical */
  }
}

.services-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* LAYOUT-1 Rule #6: standardized section header pattern */
.services-strip-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-8);
}

.services-strip-eyebrow {
  display: inline-block;
  font-size: var(--type-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-2);
}

.services-strip-heading {
  font-size: var(--type-h2);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
  /* Round 2 Batch 2 Step 7: heavier intentional headline + orphan prevention */
  letter-spacing: -0.02em;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .services-strip-heading {
    font-size: 24px;
  }
}

.services-strip-subheading {
  font-size: var(--type-body);
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0;
  /* Round 2 Batch 2 Step 7: smarter line breaks */
  text-wrap: pretty;
}

/* ─────────────────────────────────────────────────────
   Service cards grid (3 cols × 2 rows desktop)
   ───────────────────────────────────────────────────── */
.services-strip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .services-strip-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  .services-strip-list {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ─────────────────────────────────────────────────────
   Service card
   ───────────────────────────────────────────────────── */
.service-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  border-top: 4px solid var(--ink-300);
  transition: all var(--transition-fast);
  /* LAYOUT-1 Rule #3: equal-height row */
  display: flex;
  flex-direction: column;
  height: 100%;                      /* fills grid cell */
}

.service-card:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Round 2 Batch 2 Step 3 + V45 refine (Cowork Q1): touch-reliable press feedback.
   The clickable element is the inner <a> (.service-card-link), not the <li> (.service-card).
   :active on the <li> ancestor is unreliable on mobile Safari. Using :has() detects
   :active on the ACTUAL touched <a> while scaling the PARENT card (border + content
   together) for a clean visual press. :has() already used in this codebase (faq-item).
   Graceful degradation: unsupported browsers simply show no press scale (no breakage). */
.service-card:has(.service-card-link:active) {
  transform: translateY(-2px) scale(0.99);
  box-shadow: var(--shadow-sm);
}

.service-card-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-5, 20px);
  text-decoration: none;
  color: inherit;
  height: 100%;                      /* fills card */
  min-height: 220px;                 /* slightly taller for breathing room */
  flex: 1;                           /* fills service-card height */
}

.service-card-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* Per-service color border accents (per Tropical Warm extended badge palette) */
.service-card-visa      { border-top-color: var(--badge-visa); }
.service-card-fnb       { border-top-color: var(--badge-food); }
.service-card-transport { border-top-color: var(--badge-transport); }
.service-card-d8        { border-top-color: var(--badge-services); }
.service-card-admin     { border-top-color: var(--badge-culture); }
.service-card-hr        { border-top-color: var(--badge-stay); }

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-bottom: var(--space-3);
  color: var(--white);
  flex-shrink: 0;
}

.service-card-visa      .service-card-icon { background: var(--badge-visa); }
.service-card-fnb       .service-card-icon { background: var(--badge-food); }
.service-card-transport .service-card-icon { background: var(--badge-transport); }
.service-card-d8        .service-card-icon { background: var(--badge-services); }
.service-card-admin     .service-card-icon { background: var(--badge-culture); }
.service-card-hr        .service-card-icon { background: var(--badge-stay); }

.service-card-title {
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

@media (max-width: 768px) {
  .service-card-title {
    font-size: 17px;
  }
}

.service-card-desc {
  font-size: var(--type-small);
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
  flex: 1;
}

.service-card-cta {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--terracotta);
  margin-top: auto;
  transition: color var(--transition-fast);
}

.service-card-link:hover .service-card-cta {
  color: var(--badge-services);
}

/* ─────────────────────────────────────────────────────
   "Coming Soon" lock state — visa service locked 2026-05-31 until 전자상거래 registration.
   Corner badge + muted CTA so the card reads as "launching soon", not a primary action.
   Remove .service-card-soon + .service-card-badge-soon when the service unlocks.
   ───────────────────────────────────────────────────── */
.service-card-soon .service-card-link {
  position: relative;
}
.service-card-badge-soon {
  position: absolute;
  top: var(--space-3, 12px);
  right: var(--space-3, 12px);
  font-size: var(--type-tiny, 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-500, #8a847c);
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.5;
}
.service-card-soon .service-card-cta {
  color: var(--ink-500, #8a847c);
}
.service-card-soon .service-card-link:hover .service-card-cta {
  color: var(--ink-700);
}

/* ─────────────────────────────────────────────────────
   Footer CTA strip
   ───────────────────────────────────────────────────── */
.services-strip-cta {
  text-align: center;
  margin-top: var(--space-8);
}

.services-strip-cta-link {
  display: inline-block;
  /* Round 2 Batch 1 Step 4: normalize CTA padding to tokens (12=space-3, 24=space-6) */
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 2px solid var(--terracotta);
  color: var(--terracotta);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--type-body);
  transition: all var(--transition-fast);
  min-height: 44px;
}

.services-strip-cta-link:hover {
  background: var(--terracotta);
  color: var(--white);
}

/* Round 2 Batch 2 Step 3: press feedback */
.services-strip-cta-link:active {
  transform: scale(0.97);
}

.services-strip-cta-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}


/* --- toast.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Cycle 8 Item 3: Toast notification styles
   Source: skill tvk-website-compact-lang-switcher §1.4
   Bottom-right floating cards, slide-in 200ms + fade-out 300ms (auto-dismiss 3s total)
   Created: 2026-05-30 Cycle 8 Item 3 per MSG-093
   ───────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001; /* Above Termly (9999) + lang-dropdown mobile (10000) */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 640px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
  }
}

.toast {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--jade);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  /* Round 2 Batch 1 Step 4: normalize toast padding+gap to tokens (12=space-3, 16=space-4) */
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 240px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-slide-in 200ms ease-out, toast-fade-out 300ms ease-in 2.7s forwards;
}

@media (max-width: 640px) {
  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* Variant: success (jade border-left, default) */
.toast[data-variant="success"] {
  border-left-color: var(--jade);
}

/* Variant: warning (sunset border-left) */
.toast[data-variant="warning"] {
  border-left-color: var(--sunset);
}

/* Variant: error (terracotta border-left) */
.toast[data-variant="error"] {
  border-left-color: var(--terracotta);
}

/* Variant: info (sky/widget-blue border-left) */
.toast[data-variant="info"] {
  border-left-color: var(--widget-blue);
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--jade);
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
}

.toast[data-variant="success"] .toast-icon { color: var(--jade); }
.toast[data-variant="warning"] .toast-icon { color: var(--sunset); }
.toast[data-variant="error"]   .toast-icon { color: var(--terracotta); }
.toast[data-variant="info"]    .toast-icon { color: var(--widget-blue); }

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 2px;
  line-height: 1.3;
}

.toast-message {
  font-size: var(--type-tiny);
  color: var(--ink-700);
  margin: 0;
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: none;
  color: var(--ink-500);
  cursor: pointer;
  padding: 2px;
  margin-left: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.toast-close:hover {
  color: var(--ink-900);
  background: var(--ink-100);
}

.toast-close:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────── */
@keyframes toast-slide-in {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-fade-out {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
    /* Just show + auto-dismiss without slide/fade */
  }
}


/* --- widgets.css --- */
/* ─────────────────────────────────────────────────────
   GVG V3 — Component 4: Widget Row styles (Subtask 9)
   Source: V3 Component Specs Component 4 + Tropical Warm extended palette
   4-col grid desktop · 2-col tablet · 1-col mobile · color-coded per widget
   Created: 2026-05-29 Subtask 9 of Group B per MSG-083 T2 STUB approach
   ───────────────────────────────────────────────────── */

.widgets-row {
  width: 100%;
  padding: var(--space-16) var(--space-8);  /* LAYOUT-1 Rule #4: 64px desktop vertical */
  background: var(--white);
}

@media (max-width: 1024px) {
  .widgets-row {
    padding: var(--space-12) var(--space-4); /* 48px tablet/mobile vertical */
  }
}

.widgets-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .widgets-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  .widgets-inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ─────────────────────────────────────────────────────
   Widget card base styles (LAYOUT-1 Rule #3: equal-height cards)
   ───────────────────────────────────────────────────── */
.widget {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  height: 100%;                      /* fills grid cell — equal height row */
  min-height: 280px;
  transition: all var(--transition-fast);
  border-top: 4px solid transparent; /* color accent overridden per widget */
}

.widget:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Per-widget color accent (Tropical Warm extended) */
.widget-currency  { border-top-color: var(--widget-green); }
.widget-faq       { border-top-color: var(--widget-blue); }
.widget-visa      { border-top-color: var(--widget-yellow); }
.widget-weather   { border-top-color: var(--widget-purple); }

/* ─────────────────────────────────────────────────────
   Widget header (icon badge + title)
   ───────────────────────────────────────────────────── */
.widget-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink-100);
}

.widget-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--white);
  flex-shrink: 0;
}

.widget-currency .widget-icon-badge { background: var(--widget-green); }
.widget-faq      .widget-icon-badge { background: var(--widget-blue); }
.widget-visa     .widget-icon-badge { background: var(--widget-yellow); }
.widget-weather  .widget-icon-badge { background: var(--widget-purple); }

.widget-title {
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

@media (max-width: 768px) {
  .widget-title {
    font-size: 18px;
  }
}

.widget-body {
  flex: 1;                            /* LAYOUT-1 Rule #3: grows to push CTA/footnote to bottom */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;                      /* allow flexbox to compute properly */
}

.widget-footnote {
  font-size: var(--type-tiny);
  color: var(--ink-500);
  margin-top: auto;
  padding-top: var(--space-2);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────
   Shared inputs/selects
   ───────────────────────────────────────────────────── */
.widget-input,
.widget-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  font-size: var(--type-body);
  font-family: inherit;
  color: var(--ink-900);
  background: var(--cream);
  transition: border-color var(--transition-fast);
  min-height: 44px;
  box-sizing: border-box;
}

.widget-input:focus,
.widget-select:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--white);
}

.widget-label {
  display: block;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--space-1);
}

.widget-cta {
  display: inline-block;
  color: var(--terracotta);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--type-small);
  margin-top: auto;
  padding-top: var(--space-2);
  transition: color var(--transition-fast);
}

.widget-cta:hover {
  color: var(--badge-services); /* terracotta-dark */
  text-decoration: underline;
}

.widget-cta-button {
  background: var(--terracotta);
  color: var(--white);
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: var(--type-small);
  font-weight: 600;
  min-height: 44px;
  transition: all var(--transition-fast);
}

.widget-cta-button:hover:not(:disabled) {
  background: var(--badge-services);
  color: var(--white);
  text-decoration: none;
}

/* Round 2 Batch 2 Step 3: press feedback (only when enabled) */
.widget-cta-button:active:not(:disabled) {
  transform: scale(0.97);
}

.widget-cta-button:disabled {
  background: var(--ink-300);
  color: var(--white);
  cursor: not-allowed;
}

.widget-cta-button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────
   9.1 Currency widget
   ───────────────────────────────────────────────────── */
.widget-input-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.widget-input-row .widget-input {
  flex: 2;
}

.widget-input-row .widget-select {
  flex: 1;
}

.widget-currency-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: var(--type-small);
}

.widget-currency-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed var(--ink-100);
}

.widget-currency-code {
  color: var(--ink-500);
  font-weight: 500;
}

.widget-currency-value {
  color: var(--ink-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* CEO MSG-102 enhancement 2026-05-30: source currency highlight cell.
   When user picks "VND" as source, the VND row gets terracotta border + cream bg
   so they instantly see "you typed this amount in VND" context. */
.widget-currency-results li.widget-currency-source {
  background: var(--cream);
  border-left: 3px solid var(--terracotta);
  padding-left: 6px;
  margin-left: -6px;
  border-radius: 2px;
}

.widget-currency-results li.widget-currency-source .widget-currency-code {
  color: var(--terracotta);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────
   9.2 FAQ widget
   ───────────────────────────────────────────────────── */
.widget-faq-counter {
  text-align: center;
  margin-bottom: var(--space-3);
  padding: var(--space-3) 0;
  background: linear-gradient(135deg, rgba(91, 141, 184, 0.1) 0%, transparent 100%);
  border-radius: var(--radius-md);
}

.widget-faq-number {
  display: block;
  font-size: 36px;
  font-weight: 700;
  color: var(--widget-blue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.widget-faq-label {
  display: block;
  font-size: var(--type-small);
  color: var(--ink-700);
  margin-top: 4px;
}

.widget-faq-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--type-small);
}

.widget-faq-topics li {
  padding: 4px 0;
  color: var(--ink-700);
}

/* ─────────────────────────────────────────────────────
   9.3 Visa Eligibility Checker widget
   ───────────────────────────────────────────────────── */
.widget-visa-step {
  margin-bottom: var(--space-2);
}

.widget-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.widget-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  font-size: var(--type-small);
  cursor: pointer;
  background: var(--cream);
  transition: all var(--transition-fast);
  min-height: 36px;
}

.widget-radio:hover {
  border-color: var(--widget-yellow);
}

.widget-radio input[type="radio"] {
  cursor: pointer;
}

.widget-range {
  width: 100%;
  margin: var(--space-1) 0;
}

.widget-range-value {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--widget-yellow);
  margin-bottom: var(--space-1);
}

.widget-visa-result {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  font-size: var(--type-small);
  line-height: 1.5;
}

.widget-visa-result[data-result="evisa"] {
  background: rgba(45, 125, 111, 0.1);
  border-left: 4px solid var(--jade);
  color: var(--ink-900);
}

.widget-visa-result[data-result="visa_free"] {
  background: rgba(45, 125, 111, 0.15);
  border-left: 4px solid var(--jade);
  color: var(--ink-900);
}

.widget-visa-result[data-result="embassy"] {
  background: rgba(232, 152, 94, 0.1);
  border-left: 4px solid var(--sunset);
  color: var(--ink-900);
}

.widget-visa-result[data-result="urgent"] {
  background: rgba(200, 85, 61, 0.1);
  border-left: 4px solid var(--terracotta);
  color: var(--ink-900);
}

.widget-visa-result strong {
  display: block;
  font-size: var(--type-body);
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────────────────
   9.4 Weather widget
   ───────────────────────────────────────────────────── */
.widget-weather-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.widget-weather-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-2);
  background: linear-gradient(135deg, rgba(139, 94, 131, 0.08) 0%, transparent 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-100);
}

.widget-weather-city {
  font-size: var(--type-tiny);
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.widget-weather-temp {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.widget-weather-icon {
  font-size: 24px;
  line-height: 1;
  margin-top: 4px;
}


}