/* --amber override for light mode — original #e07b10 fails contrast on cream
   backgrounds (2.9:1). Darkened to #b8620e (~4.5:1 vs cream). Dark mode keeps
   the brighter #e07b10 since contrast against dark backgrounds is fine. */
html[data-theme="light"] {
  --amber: #b8620e;
}
/* theme-shared.css — Shared theme & layout overrides for BFE site
   Loaded once via footer.html on every page. Cached by the browser.
   Single source of truth for: footer padding, light-mode contrast,
   nav dropdown styling, hero overlays, scroll-progress, anti-duplicate-
   floating-button rules. Edit here, not inline. */

  /* ── CTA Strip — vibrant magenta-coral lava-lamp band with SOFT EDGE FADES
        so it bridges (not cuts) the surrounding sections. The top/bottom
        edges fade toward transparent so light-mode cream and dark-mode
        magenta is now confined to the CTA buttons themselves; the strip
        background is transparent so the dynamic body color from scrollbg.js
        flows through naturally — no horizontal "bisecting band" against the
        rest of the page. ──*/
  .footer-cta-strip {
    padding: 72px 40px !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    overflow: hidden;
    position: relative;
  }
  /* The old ::before / ::after pseudo-elements created the magenta feather and
     drifting orbs. We disable them entirely — they were the visual band the
     user found "bisecting." The .fcs-btn-primary still carries the brand
     magenta below, so brand identity is preserved at the button level. */
  .footer-cta-strip::before,
  .footer-cta-strip::after { display: none !important; }
  /* Light-mode + dark-mode previously redefined the magenta gradient. Now
     they're transparent like the base — leaving them as no-op selectors keeps
     specificity intact for any future overrides without re-introducing
     gradient noise. */
  html[data-theme="light"] .footer-cta-strip,
  html[data-theme="dark"] .footer-cta-strip {
    background: transparent !important;
  }
  /* Keep the content above the orbs */
  .footer-cta-strip .fcs-inner { position: relative; z-index: 1; }
  .fcs-inner {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
  }
  @media (max-width: 768px) {
    .footer-cta-strip { padding: 56px 24px !important; }
    .fcs-inner { flex-direction: column !important; gap: 28px !important; align-items: flex-start !important; }
    .fcs-btns { width: 100% !important; }
    .fcs-btn { width: 100% !important; min-width: 0 !important; justify-content: center !important; }
  }

  /* ── Main Footer: keep grid + bottom row away from viewport edges ── */
  footer { padding: 64px 0 24px !important; }
  footer .footer-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px 48px !important;
    width: 100%;
    box-sizing: border-box;
  }
  footer .footer-bottom {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 40px 0 !important;
    width: 100%;
    box-sizing: border-box;
  }
  @media (max-width: 600px) {
    footer .footer-grid { padding: 0 22px 36px !important; }
    footer .footer-bottom { padding: 20px 22px 0 !important; flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  }

  /* ── Light-mode overrides: improve text contrast in footer ── */
  html[data-theme="light"] footer {
    background: #ededf5 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    color: #1a1a2a;
  }
  html[data-theme="light"] footer .footer-brand p { color: #3a3a52 !important; }
  html[data-theme="light"] footer .footer-col h3 { color: #5a5a70 !important; }
  html[data-theme="light"] footer .footer-col ul li a { color: #2a2a3c !important; }
  html[data-theme="light"] footer .footer-col ul li a:hover { color: var(--amber, #e07b10) !important; }
  html[data-theme="light"] footer .footer-bottom p { color: #5a5a70 !important; }
  html[data-theme="light"] footer .footer-grid { border-bottom-color: rgba(0,0,0,0.08) !important; }
  html[data-theme="light"] footer .social-link {
    border-color: rgba(0,0,0,0.18) !important;
    color: #3a3a52 !important;
    background: rgba(255,255,255,0.65);
  }
  html[data-theme="light"] footer .social-link:hover {
    background: var(--amber, #e07b10) !important;
    border-color: var(--amber, #e07b10) !important;
    color: #fff !important;
  }
  /* CTA strip — text stays white in both themes since the background is now
     a vibrant magenta-coral gradient. The tag chip needs a contrasty white
     pill since pink-on-pink would blend in. */
  .footer-cta-strip { color: #fff; }
  .footer-cta-strip .fcs-text h2 { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,0.18); }
  .footer-cta-strip .fcs-text p  { color: rgba(255,255,255,0.92) !important; }
  .footer-cta-strip .fcs-tag {
    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Same overrides in light mode (already inherited but be explicit for cascade safety) */
  html[data-theme="light"] .footer-cta-strip { color: #fff; }
  html[data-theme="light"] .footer-cta-strip .fcs-text h2 { color: #fff !important; }
  html[data-theme="light"] .footer-cta-strip .fcs-text p  { color: rgba(255,255,255,0.92) !important; }

  /* Footer-bottom 隱私政策 / 服務條款 plain spans — readable in both modes */
  html[data-theme="light"] footer .footer-bottom span { color: rgba(0,0,0,0.4) !important; }

  /* ── Kill any legacy floating LINE button (old circular .line-sticky / .line-fab).
        The only floating LINE button anywhere should be #bfe-line-float below. ── */
  .line-sticky, .line-fab, .line-circle, .line-float-btn, .floating-line { display: none !important; }

  /* ────────────────────────────────────────────────────────────
     COUNTRY MARQUEE (scroller) — light mode readability fix.
     Default styles use rgba white which becomes invisible on light bg.
     ──────────────────────────────────────────────────────────── */
  html[data-theme="light"] .marquee-wrap {
    border-top-color: rgba(0,0,0,0.1) !important;
    border-bottom-color: rgba(0,0,0,0.1) !important;
    background: rgba(255,250,242,0.6);
  }
  html[data-theme="light"] .marquee-item {
    color: #3a3a52 !important;
    border-right-color: rgba(0,0,0,0.1) !important;
  }
  html[data-theme="light"] .marquee-item strong { color: #0c0c18 !important; }

  /* ────────────────────────────────────────────────────────────
     NAV DROPDOWNS — light mode (the dark backdrop becomes a white card)
     Applies to both .mega-menu (countries) and .mini-dropdown (about/program)
     ──────────────────────────────────────────────────────────── */
  html[data-theme="light"] .mega-menu,
  html[data-theme="light"] .mini-dropdown {
    /* Glassmorphism: translucent + blurred so it matches the nav bar feel */
    background: rgba(255,253,250,0.82) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 24px 60px rgba(20,20,40,0.18), 0 4px 16px rgba(20,20,40,0.08) !important;
    color: #0c0c18;
  }
  /* Mini dropdown items (About/Program lists) */
  html[data-theme="light"] .mini-link { color: #0c0c18 !important; }
  html[data-theme="light"] .mini-link:hover { background: rgba(224,123,16,0.08) !important; }
  html[data-theme="light"] .mini-link-title { color: #0c0c18 !important; }
  html[data-theme="light"] .mini-link-sub { color: #5a5a72 !important; }
  html[data-theme="light"] .mini-divider { background: rgba(0,0,0,0.08) !important; }

  /* Mega menu (countries) */
  html[data-theme="light"] .mega-header { border-bottom-color: rgba(0,0,0,0.08) !important; }
  html[data-theme="light"] .mega-header h3 { color: #0c0c18 !important; }
  html[data-theme="light"] .mega-see-all { color: #4a4a64 !important; border-color: rgba(0,0,0,0.1) !important; }
  html[data-theme="light"] .mega-see-all:hover { color: var(--amber, #e07b10) !important; border-color: rgba(224,123,16,0.4) !important; }
  html[data-theme="light"] .mega-region { border-right-color: rgba(0,0,0,0.06) !important; }
  html[data-theme="light"] .region-head { color: #6a6a82 !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
  html[data-theme="light"] .cpill {
    background: rgba(0,0,0,0.04) !important;
    color: #2a2a40 !important;
    border-color: transparent !important;
  }
  html[data-theme="light"] .cpill:hover {
    background: rgba(224,123,16,0.14) !important;
    color: #0c0c18 !important;
  }
  html[data-theme="light"] .cpill.featured {
    background: rgba(224,123,16,0.1) !important;
    color: #b85e08 !important;
    border-color: rgba(224,123,16,0.28) !important;
  }
  html[data-theme="light"] .mega-footer {
    background: linear-gradient(90deg, rgba(224,123,16,0.05), rgba(224,123,16,0.02)) !important;
    border-top-color: rgba(224,123,16,0.15) !important;
  }
  html[data-theme="light"] .mega-footer-left { color: #5a5a72 !important; }

  /* Nav bar itself — text-color overrides for the visible nav links */
  /* Glassmorphism: light-mode nav matches dark-mode transparency (~62%) so
     the hero/page content behind shows through with a soft cream wash.
     Saturate(140%) keeps the wash from looking grey-washed. */
  html[data-theme="light"] nav#main-nav {
    background: rgba(255,253,250,0.62) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
  }
  /* Scrolled past the hero: behind the nav becomes plain page background,
     so bump opacity to keep readability. Mirrors the dark-mode .scrolled
     bump in nav.css. */
  html[data-theme="light"] nav#main-nav.scrolled {
    background: rgba(255,253,250,0.85) !important;
  }
  html[data-theme="light"] nav#main-nav.scrolled,
  html[data-theme="light"] nav#main-nav[style*="border-bottom-color"] {
    box-shadow: 0 4px 30px rgba(20,20,40,0.08);
  }
  html[data-theme="light"] nav#main-nav > ul > li > a { color: #1a1a2a !important; }
  html[data-theme="light"] nav#main-nav > ul > li > a:hover { color: var(--amber, #e07b10) !important; }
  html[data-theme="light"] nav#main-nav .dropdown-arrow { opacity: 0.7; }
  /* Phone number — was rgba(255,255,255,0.5), invisible on cream bg in light mode.
     The semi-transparent nav lets bright photo content show through behind it,
     washing out semi-transparent text. Use a solid dark color matching the
     other nav links for guaranteed contrast. */
  html[data-theme="light"] .nav-phone {
    color: #1a1a2a !important;
    font-weight: 600 !important;
  }
  html[data-theme="light"] .nav-phone:hover { color: var(--amber, #e07b10) !important; }
  html[data-theme="light"] .mobile-nav-overlay a[href^="tel:"] {
    color: #1a1a2a !important;
    font-weight: 600 !important;
  }
  html[data-theme="light"] #bfe-theme-toggle {
    border-color: rgba(0,0,0,0.18) !important;
    color: #2a2a40 !important;
  }

  /* ────────────────────────────────────────────────────────────
     THEME TOGGLE BUTTON — base + light mode (used to be inline-styled,
     which prevented light-mode hover from working). Class is set on the
     button in header.html.
     ──────────────────────────────────────────────────────────── */
  .bfe-theme-toggle-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    flex-shrink: 0;
  }
  .bfe-theme-toggle-btn:hover {
    border-color: var(--amber, #e07b10);
    color: var(--amber, #e07b10);
    background: rgba(224,123,16,0.08);
  }
  html[data-theme="light"] .bfe-theme-toggle-btn {
    border-color: rgba(0,0,0,0.18);
    color: #2a2a40;
  }
  html[data-theme="light"] .bfe-theme-toggle-btn:hover {
    border-color: var(--amber, #e07b10);
    color: var(--amber, #e07b10);
    background: rgba(224,123,16,0.1);
  }

  /* ────────────────────────────────────────────────────────────
     COUNTRY MEGA-MENU PILLS — accent variants (replaces inline rgba
     colors that didn't switch in light mode). Set per <a class="cpill cpill-accent-*">.
     ──────────────────────────────────────────────────────────── */
  .cpill-accent-gold  { color: rgba(255,220,50,0.95) !important; }
  .cpill-accent-sky   { color: rgba(120,200,255,0.95) !important; }
  .cpill-accent-amber { color: rgba(255,180,100,0.95) !important; }
  html[data-theme="light"] .cpill-accent-gold  { color: #a87800 !important; }
  html[data-theme="light"] .cpill-accent-sky   { color: #1d6e9b !important; }
  html[data-theme="light"] .cpill-accent-amber { color: #b85e08 !important; }

  /* ────────────────────────────────────────────────────────────
     MEGA-MENU CTA CARD — "免費諮詢 / 讓顧問替你選目的地"
     ──────────────────────────────────────────────────────────── */
  .mega-cta-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px;
    background: rgba(255,0,151,0.08);
    border: 1px solid rgba(255,0,151,0.2);
    border-radius: 12px;
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
  }
  .mega-cta-card:hover { background: rgba(255,0,151,0.15); }
  .mega-cta-card__eyebrow {
    font-size: 12px; font-weight: 700;
    color: #ff0097;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .mega-cta-card__title { font-size: 13px; font-weight: 600; color: #fff; }
  .mega-cta-card__sub { font-size: 12px; color: rgba(255,255,255,0.45); }
  html[data-theme="light"] .mega-cta-card {
    background: rgba(255,0,151,0.06);
    border-color: rgba(255,0,151,0.22);
  }
  html[data-theme="light"] .mega-cta-card:hover { background: rgba(255,0,151,0.12); }
  html[data-theme="light"] .mega-cta-card__title { color: #0c0c18; }
  html[data-theme="light"] .mega-cta-card__sub   { color: #5a5a72; }

  /* ────────────────────────────────────────────────────────────
     PAGE HERO OVERLAYS — light mode (about / destinations / country pages).
     The default overlay is `rgba(10,10,15,0.55→1)` which becomes very heavy
     on light backgrounds. In light mode, swap to a softer scrim with a
     white-fade-to-page-bg at the bottom so the photo + text both stay readable.
     ──────────────────────────────────────────────────────────── */
  html[data-theme="light"] .page-hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.20) 50%,
      rgba(253,244,238,0.92) 100%
    ) !important;
  }
  html[data-theme="light"] .country-hero-overlay,
  html[data-theme="light"] .hero-overlay {
    background: linear-gradient(
      105deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.25) 50%,
      rgba(253,244,238,0.7) 100%
    ) !important;
  }
  /* Hero text in light mode keeps white-on-photo (the overlay handles contrast);
     for sub-paragraph copy that sits over the bottom fade, make it dark instead. */
  html[data-theme="light"] .page-hero-inner h1,
  html[data-theme="light"] .country-hero h1,
  html[data-theme="light"] .hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  }
  html[data-theme="light"] .page-hero-inner p { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
  html[data-theme="light"] .page-hero-inner .tag { background: rgba(255,255,255,0.18); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.32); }

  /* ────────────────────────────────────────────────────────────
     GRADIENT-CLIPPED HERO TEXT — text-shadow renders as a dark blob
     behind transparent-fill glyphs. ANYWHERE .grad-text appears inside
     a hero h1, suppress text-shadow and use filter:drop-shadow which
     operates on the rendered gradient pixels instead. Applies in both
     themes; light-mode gets a softer variant.
     ──────────────────────────────────────────────────────────── */
  .hero h1 .grad-text,
  .page-hero h1 .grad-text,
  .page-hero-inner h1 .grad-text,
  .country-hero h1 .grad-text {
    text-shadow: none !important;
    filter:
      drop-shadow(0 2px 6px rgba(0,0,0,0.45))
      drop-shadow(0 8px 22px rgba(0,0,0,0.35));
  }
  html[data-theme="light"] .hero h1 .grad-text,
  html[data-theme="light"] .page-hero h1 .grad-text,
  html[data-theme="light"] .page-hero-inner h1 .grad-text,
  html[data-theme="light"] .country-hero h1 .grad-text {
    filter:
      drop-shadow(0 2px 5px rgba(0,0,0,0.30))
      drop-shadow(0 6px 16px rgba(0,0,0,0.20));
  }

  /* Mobile nav overlay light mode — same glass treatment */
  html[data-theme="light"] .mobile-nav-overlay {
    background: rgba(255,253,250,0.82) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    color: #0c0c18;
  }
  html[data-theme="light"] .mobile-nav-link {
    color: #1a1a2a !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
  }
  html[data-theme="light"] .mobile-country-section h4 { color: #b85e08 !important; }
  html[data-theme="light"] .mobile-cpill {
    background: rgba(0,0,0,0.04) !important;
    color: #2a2a40 !important;
    border-color: rgba(0,0,0,0.08) !important;
  }
  html[data-theme="light"] .mobile-cpill:hover {
    background: rgba(224,123,16,0.14) !important;
    color: #0c0c18 !important;
    border-color: rgba(224,123,16,0.3) !important;
  }

  /* ── Scroll progress: give it a faint track so the gradient bar is visible
        even at the very top of the page (width: 0% would otherwise hide it). ── */
  #scroll-progress {
    box-shadow: 0 0 14px rgba(255,0,151,0.45);
  }
  body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.06);
    z-index: 9999;
    pointer-events: none;
  }
  html[data-theme="light"] body::before { background: rgba(0,0,0,0.05); }

  /* ════════════════════════════════════════════════════════════════
     GLOBAL LIGHT-MODE FIXES — apply on every page footer.html loads.
     Fixes country/about/destinations pages that have hardcoded dark
     backgrounds and missing CSS-variable overrides for light theme.
     ════════════════════════════════════════════════════════════════ */
  html[data-theme="light"] {
    /* Override CSS vars that weren't overridden per-page */
    --dark2: #ebebf5 !important;
    --card-bg: #ffffff !important;
    --black: #ffffff !important;
    --white: #0c0c18 !important;
    --text-muted: #4a4a64 !important;
    --border: rgba(0,0,0,0.1) !important;
  }
  /* Body background — many pages hardcode body { background-color: #050508 }
     outside any media query, so without this rule light mode would flash
     black before scrollbg.js loads. This is the no-JS fallback only —
     NO !important on background-color so scrollbg.js's per-section
     morphing colors win once it loads. */
  html[data-theme="light"] body { background-color: #fdf4ee; color: #0c0c18 !important; }

  /* Dark sections — switch to soft warm light in light mode */
  html[data-theme="light"] .section-dark,
  html[data-theme="light"] .section-darker {
    background: #f4eee6 !important;
    color: #0c0c18 !important;
  }
  html[data-theme="light"] .section-dark h1,
  html[data-theme="light"] .section-dark h2,
  html[data-theme="light"] .section-dark h3,
  html[data-theme="light"] .section-darker h1,
  html[data-theme="light"] .section-darker h2,
  html[data-theme="light"] .section-darker h3 { color: #0c0c18 !important; }
  html[data-theme="light"] .section-dark p,
  html[data-theme="light"] .section-darker p { color: #2a2a40 !important; }

  /* Generic text-on-dark patterns — bump contrast for readability */
  html[data-theme="light"] p,
  html[data-theme="light"] li,
  html[data-theme="light"] .reveal { color: inherit; }
  html[data-theme="light"] body p { color: #2a2a40; }

  /* Country page specifics: hero text, breadcrumb, tags */
  html[data-theme="light"] .country-hero h1 { color: #ffffff !important; text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
  html[data-theme="light"] .country-hero .en-name { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
  html[data-theme="light"] .country-hero .breadcrumb,
  html[data-theme="light"] .country-hero .breadcrumb a { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
  html[data-theme="light"] .country-hero .ctag {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.32) !important;
    color: #fff !important;
  }

  /* Content cards / detail cards in country pages */
  html[data-theme="light"] .content-card,
  html[data-theme="light"] .detail-card,
  html[data-theme="light"] .feature-card,
  html[data-theme="light"] .pillar,
  html[data-theme="light"] .step-card,
  html[data-theme="light"] .card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 14px rgba(20,20,40,0.06);
    color: #0c0c18;
  }
  html[data-theme="light"] .content-card h3,
  html[data-theme="light"] .detail-card h3,
  html[data-theme="light"] .feature-card h3,
  html[data-theme="light"] .pillar h3,
  html[data-theme="light"] .step-card h3,
  html[data-theme="light"] .card h3 { color: #0c0c18 !important; }
  html[data-theme="light"] .content-card p,
  html[data-theme="light"] .detail-card p,
  html[data-theme="light"] .feature-card p,
  html[data-theme="light"] .pillar p,
  html[data-theme="light"] .step-card p,
  html[data-theme="light"] .card p { color: #3a3a52 !important; }

  /* Common list items */
  html[data-theme="light"] .list-items li,
  html[data-theme="light"] .step-list li,
  html[data-theme="light"] .day-timeline .day-item { color: #2a2a40 !important; }

  /* Day timeline dot — keep amber accent visible */
  html[data-theme="light"] .day-dot { background: var(--amber, #e07b10) !important; }

  /* Related pills (other country buttons at bottom of country page) */
  html[data-theme="light"] .rel-pill {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #0c0c18 !important;
    box-shadow: 0 1px 6px rgba(20,20,40,0.05);
  }
  html[data-theme="light"] .rel-pill:hover { border-color: var(--amber, #e07b10) !important; }
  html[data-theme="light"] .related-section { background: #f0eee8 !important; }
  html[data-theme="light"] .related-section .tag,
  html[data-theme="light"] .related-section h2 { color: #0c0c18 !important; }

  /* CTA section text */
  html[data-theme="light"] .cta-section h2 { color: #0c0c18 !important; }
  html[data-theme="light"] .cta-section p { color: #3a3a52 !important; }

  /* "Section icon" emoji circles — give them a soft amber bg in light mode */
  html[data-theme="light"] .section-icon { filter: none; }

  /* Inline-style hardcoded text-on-dark in pages — last-resort sweep
     This catches paragraphs with inline color:rgba(255,255,255,...) which
     would be invisible on a light bg. */
  html[data-theme="light"] [style*="rgba(255,255,255,0.7"],
  html[data-theme="light"] [style*="rgba(255,255,255,0.75"],
  html[data-theme="light"] [style*="rgba(255,255,255,0.8"],
  html[data-theme="light"] [style*="rgba(255,255,255,0.65"],
  html[data-theme="light"] [style*="rgba(255,255,255,0.6)"] {
    color: #3a3a52 !important;
  }

/* ════════════════════════════════════════════════════════════════
   CULTURE GALLERY — appears on every country page
   ════════════════════════════════════════════════════════════════ */
.culture-gallery { padding: 80px 0; }
.culture-gallery > .container { max-width: 1200px; }
.culture-gallery .culture-intro {
  max-width: 640px;
  color: var(--text-muted, rgba(255,255,255,0.6));
  font-size: 15px;
  line-height: 1.7;
  margin: 4px 0 36px;
}
/* Interspersed/masonry layout: photos vary in width so the row has rhythm
   instead of a flat 4-up grid. First & last are wide (span 2 cols), middle
   two are narrow (1 col each). Total = 6 cols. */
.culture-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}
.culture-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
}
.culture-item--wide   { grid-column: span 4; aspect-ratio: 16/9; }
/* Solo banner for countries with only 1 verified photo (e.g. romania) */
.culture-item--wide-solo { grid-column: span 6; aspect-ratio: 21/9; }
/* When 3 photos: last narrow gets stretched to fill the row */
.culture-grid > .culture-item--narrow:last-child:nth-child(3) {
  grid-column: span 4;
  aspect-ratio: 16/9;
}
.culture-item--narrow { grid-column: span 2; aspect-ratio: 3/4; }
@media (max-width: 900px) {
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .culture-item--wide,
  .culture-item--narrow { grid-column: span 1; aspect-ratio: 4/5; }
}
@media (max-width: 480px) {
  .culture-item--wide { grid-column: span 2; aspect-ratio: 16/10; }
}
.culture-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.culture-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.culture-item:hover img { transform: scale(1.06); }
.culture-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(224,123,16,0.25) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.culture-item:hover::after { opacity: 1; }
.culture-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.78), transparent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 2;
}
/* Light-mode adjustments */
html[data-theme="light"] .culture-gallery { background: rgba(253,244,238,0.5); }
html[data-theme="light"] .culture-item { background: rgba(0,0,0,0.04); }
html[data-theme="light"] .culture-item:hover { box-shadow: 0 18px 40px rgba(20,20,40,0.12); }

/* ════════════════════════════════════════════════════════════════
   CULTURE GALLERY — fix conflict with .g-item blur-halo class.
   Country pages stack .g-item (overflow:visible + 4px img radius +
   ::before glow halo) on top of .culture-item (overflow:hidden + 18px
   radius), which BROKE the rounded-corner clipping AND made the
   caption gradient look like a separate squared-off box that didn't
   move with the image on hover. Restore the original card behavior
   when these two classes coexist.
   ════════════════════════════════════════════════════════════════ */
.culture-grid .culture-item.g-item,
.culture-grid .culture-item.gallery-item,
.culture-grid .g-item.culture-item,
.culture-grid .gallery-item.culture-item {
  overflow: hidden !important;
  border-radius: 18px !important;
}
.culture-grid .culture-item.g-item::before,
.culture-grid .culture-item.gallery-item::before,
.culture-grid .g-item.culture-item::before,
.culture-grid .gallery-item.culture-item::before {
  display: none !important;
}
.culture-grid .culture-item.g-item img,
.culture-grid .culture-item.gallery-item img,
.culture-grid .g-item.culture-item img,
.culture-grid .gallery-item.culture-item img {
  border-radius: 0 !important;
  position: relative !important;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Belt-and-suspenders: explicit rounded bottom corners on the caption
   in case overflow:hidden is ever overridden elsewhere. */
.culture-grid .culture-item .culture-caption {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

@media (max-width: 900px) {
  .culture-gallery { padding: 56px 0; }
}
@media (max-width: 480px) {
  .culture-grid { gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   FLOATING LINE BUTTON — desktop only (hidden on mobile to avoid
   covering the hamburger/CTAs at the bottom of small screens).
   ════════════════════════════════════════════════════════════════ */
#bfe-line-float {
  position: fixed;
  bottom: 32px; right: 32px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #06AF49;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 22px 13px 16px;
  border-radius: 50px;
  box-shadow: 0 6px 28px rgba(6,199,85,0.45);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
#bfe-line-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(6,199,85,0.55);
}
@media (max-width: 768px) {
  #bfe-line-float { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   COUNTRY PAGE — light-mode contrast fixes
   Per-page CSS uses lots of rgba(255,255,255,…) for text + borders,
   which becomes invisible on light backgrounds. Catch them here.
   ════════════════════════════════════════════════════════════════ */

/* SPECS strip (學制 / 英語 / 學年 / etc.) — top of each country page */
html[data-theme="light"] .specs-section {
  border-top-color: rgba(0,0,0,0.08) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .spec-row {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(20,20,40,0.04);
}
html[data-theme="light"] .spec-label {
  color: var(--amber, #e07b10) !important;
}
html[data-theme="light"] .spec-val {
  color: #1a1a2a !important;
}

/* General section paragraph text — was rgba(255,255,255,0.78) */
html[data-theme="light"] .section p,
html[data-theme="light"] .section-dark p,
html[data-theme="light"] .section-darker p {
  color: #2a2a40 !important;
}

/* Lists used on country pages (適合的學生 / 需要考慮的學生 / etc.) */
html[data-theme="light"] .list-items li {
  color: #2a2a40 !important;
}

/* Day timeline rows */
html[data-theme="light"] .day-item {
  color: #2a2a40 !important;
  border-bottom-color: rgba(0,0,0,0.07) !important;
}

/* CTA section paragraph */
html[data-theme="light"] .cta-section p {
  color: #3a3a52 !important;
}

/* "ctags" pills below country hero title — light bg in light mode */
html[data-theme="light"] .country-hero .ctags { gap: 8px; }
html[data-theme="light"] .country-hero .ctag {
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}

/* Content cards in country pages — sidebars next to the text */
html[data-theme="light"] .content-card,
html[data-theme="light"] .who-card,
html[data-theme="light"] .typical-day-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 18px rgba(20,20,40,0.06);
  color: #2a2a40;
}
html[data-theme="light"] .content-card h3,
html[data-theme="light"] .content-card h4 { color: #0c0c18 !important; }
html[data-theme="light"] .content-card p,
html[data-theme="light"] .content-card li { color: #2a2a40 !important; }

/* The "BFE 顧問建議" tip card that appears on country pages with the magenta tint */
html[data-theme="light"] [style*="background:rgba(255,0,151,0.06)"],
html[data-theme="light"] [style*="background: rgba(255,0,151,0.06)"] {
  background: rgba(255,0,151,0.06) !important;
  color: #2a2a40 !important;
}

/* Country hero breadcrumb */
html[data-theme="light"] .country-hero .breadcrumb,
html[data-theme="light"] .country-hero .breadcrumb a {
  color: rgba(255,255,255,0.95) !important;
}

/* ════════════════════════════════════════════════════════════════
   ROUNDED CORNERS — bump all card-like elements site-wide.
   "Curved edges whenever possible." Only touches radius, not other
   visual properties, so safe to apply broadly.
   ════════════════════════════════════════════════════════════════ */
.card,
.step-card,
.testi-card,
.blog-card,
.country-card,
.pillar,
.feature-card,
.detail-card,
.content-card,
.profile-card,
.checklist-box,
.what-photo,
.about-photo,
.blog-thumb,
.blog-featured-card,
.testi-card,
.hero-stat-card,
.contact-form,
.who-tip-box,
.stability-callout-card {
  border-radius: 22px;
}

/* Smaller utility elements get a smaller bump for consistency */
.spec-row,
.pill,
.cpill,
.rel-pill,
.tag,
.ctag,
.hot-badge,
.mini-link,
.mega-cta-card {
  border-radius: 12px;
}

/* Buttons stay pill-shaped (50px is intentional, don't touch) */

/* ════════════════════════════════════════════════════════════════
   FOOTER CTA STRIP — secondary button visibility boost.
   The default rgba(255,255,255,0.06) was almost invisible against the
   dark gradient strip; bump alpha + add stronger border so "成為接待家庭"
   reads clearly without competing with the primary pink button.
   ════════════════════════════════════════════════════════════════ */
/* CTA strip buttons — primary becomes WHITE on the magenta strip (the
   pink-on-pink gradient would have disappeared). Secondary becomes a
   translucent frosted pill. */
/* CTA strip buttons redesigned for a transparent strip background.
   Primary: brand magenta gradient (visible on any page bg).
   Secondary: outlined with theme-aware color so it pops in both modes. */
.footer-cta-strip .fcs-btn-primary {
  background: linear-gradient(135deg, #ff0097 0%, #c4006f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(255,0,151,0.32) !important;
  border: none !important;
}
.footer-cta-strip .fcs-btn-primary:hover {
  background: linear-gradient(135deg, #ff1da4 0%, #d5007a 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(255,0,151,0.45) !important;
}
.footer-cta-strip .fcs-btn-primary strong,
.footer-cta-strip .fcs-btn-primary small { color: inherit !important; }
.footer-cta-strip .fcs-btn-primary small { opacity: 0.85; }

/* Secondary — dark-mode default: glassy on the dark page background */
.footer-cta-strip .fcs-btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.footer-cta-strip .fcs-btn-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.45) !important;
  transform: translateY(-2px);
}
.footer-cta-strip .fcs-btn-secondary strong { color: #ffffff !important; }
.footer-cta-strip .fcs-btn-secondary small { color: rgba(255,255,255,0.78) !important; }

/* Secondary — LIGHT MODE: dark outline on cream page bg (was invisible
   white-on-white before this fix). */
html[data-theme="light"] .footer-cta-strip .fcs-btn-secondary {
  background: rgba(255,255,255,0.6) !important;
  border: 1.5px solid rgba(20,20,40,0.18) !important;
  color: #1a1a2a !important;
}
html[data-theme="light"] .footer-cta-strip .fcs-btn-secondary:hover {
  background: #ffffff !important;
  border-color: rgba(255,0,151,0.42) !important;
}
html[data-theme="light"] .footer-cta-strip .fcs-btn-secondary strong { color: #1a1a2a !important; }
html[data-theme="light"] .footer-cta-strip .fcs-btn-secondary small { color: #5a5a70 !important; }

/* Headline text in the strip also needs theme-aware coloring now (was assumed
   to sit on magenta with white text). */
html[data-theme="light"] .footer-cta-strip .fcs-text h2 { color: #1a1a2a !important; text-shadow: none !important; }
html[data-theme="light"] .footer-cta-strip .fcs-text p  { color: #3a3a52 !important; }
html[data-theme="light"] .footer-cta-strip .fcs-tag {
  background: rgba(255,0,151,0.10) !important;
  color: #c4006f !important;
  border: 1px solid rgba(255,0,151,0.22) !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER "立即行動" ACTION CARDS — proper theme-aware styling.
   Was inline styles using rgba(255,255,255,...) for everything, so the
   "成為接待家庭" card disappeared in light mode (white on light grey).
   ════════════════════════════════════════════════════════════════ */
.footer-action-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.footer-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s, background 0.2s;
}
.footer-action-card:hover { transform: translateY(-2px); }
.footer-action-card .fac-icon { font-size: 18px; flex-shrink: 0; }
.footer-action-card .fac-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.footer-action-card .fac-text strong { display: block; font-size: 13px; }
.footer-action-card .fac-text small { font-size: 11.5px; font-weight: 500; }

/* Primary — magenta filled (works in both themes) */
.footer-action-card--primary {
  background: linear-gradient(135deg, #ff0097, #c4006f);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,0,151,0.3);
}
.footer-action-card--primary:hover { opacity: 0.92; box-shadow: 0 8px 22px rgba(255,0,151,0.4); }
.footer-action-card--primary .fac-text small { color: rgba(255,255,255,0.85); }

/* Secondary — DARK MODE: faint glass over dark footer */
.footer-action-card--secondary {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.footer-action-card--secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.footer-action-card--secondary .fac-text small { color: rgba(255,255,255,0.7); }

/* Secondary — LIGHT MODE: needs dark text on a tinted card */
html[data-theme="light"] .footer-action-card--secondary {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: #1a1a2a !important;
  box-shadow: 0 2px 10px rgba(20,20,40,0.05);
}
html[data-theme="light"] .footer-action-card--secondary:hover {
  background: rgba(224,123,16,0.08) !important;
  border-color: rgba(224,123,16,0.32) !important;
  box-shadow: 0 6px 18px rgba(20,20,40,0.08);
}
html[data-theme="light"] .footer-action-card--secondary .fac-text strong { color: #0c0c18 !important; }
html[data-theme="light"] .footer-action-card--secondary .fac-text small  { color: #5a5a72 !important; }

/* ════════════════════════════════════════════════════════════════
   FOOTER — warmer, more inviting palette in both themes.
   Was solid #05050a (dark) / #ededf5 (light) — both felt cold/sterile.
   Switch to warm gradients with a subtle drifting amber halo.
   ════════════════════════════════════════════════════════════════ */
footer {
  position: relative;
  /* Dark mode: deep warm chocolate-violet gradient instead of flat near-black */
  background: linear-gradient(180deg, #0a0508 0%, #100806 50%, #0a0504 100%) !important;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 380px;
  background:
    radial-gradient(ellipse 50% 80% at 25% 100%, rgba(224,123,16,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(255,0,151,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: footerHaloDrift 28s ease-in-out infinite alternate;
}
@keyframes footerHaloDrift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, -20px); }
}
@media (prefers-reduced-motion: reduce) {
  footer::before { animation: none; }
}
/* All footer content must sit above the halo */
footer > * { position: relative; z-index: 1; }

/* Light-mode footer: warm cream gradient + amber/coral halo */
html[data-theme="light"] footer {
  background: linear-gradient(180deg, #fff8ee 0%, #fbeadf 50%, #fbe2d9 100%) !important;
  border-top: 1px solid rgba(224,123,16,0.18) !important;
}
html[data-theme="light"] footer::before {
  background:
    radial-gradient(ellipse 50% 80% at 25% 100%, rgba(255,140,80,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(255,120,170,0.16) 0%, transparent 65%);
}

/* ════════════════════════════════════════════════════════════════
   HAMBURGER MENU ICON — light mode visibility fix.
   Default spans are #fff (white) which become invisible on the cream
   light-mode nav. Switch to dark in light mode.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .hamburger span { background: #1a1a2a !important; }
.hamburger:hover span { background: var(--amber, #e07b10); }
html[data-theme="light"] .hamburger:hover span { background: var(--amber, #e07b10) !important; }

/* ════════════════════════════════════════════════════════════════
   FOOTER-CTA-STRIP edge feathering — REWRITE.
   Previous approach matched feather color to a specific surround
   (chocolate / cream), which left a visible seam when the actual
   adjacent section used a slightly different shade. Switch to
   mask-image so the strip's edges fade to TRANSPARENT — whatever
   color sits above and below shows through naturally, in any theme.
   ════════════════════════════════════════════════════════════════ */
.footer-cta-strip {
  /* Override the colored gradient feathers from earlier and use a
     mask-based fade. mask-image fades opacity so the actual page bg
     behind the strip shows through smoothly. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%) !important;
          mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%) !important;
}
/* Drop the per-theme color-matched fade layers — mask handles it now */
html[data-theme="light"] .footer-cta-strip,
html[data-theme="dark"] .footer-cta-strip {
  /* Remove the linear-gradient feathers from the background stack —
     keep only the colored magenta-coral core + atmospheric radials. */
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,80,150,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 90% at 85% 60%, rgba(255,140,80,0.35) 0%, transparent 65%),
    linear-gradient(135deg, #c4006f 0%, #ff0097 45%, #ff5a3d 100%) !important;
}
html[data-theme="dark"] .footer-cta-strip {
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,80,150,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 70% 90% at 85% 60%, rgba(255,140,80,0.35) 0%, transparent 65%),
    linear-gradient(135deg, #a8005f 0%, #d6007f 45%, #d6492f 100%) !important;
}
/* The mask is uniform — also kill the ::before that was painting a
   solid chocolate/cream top fade (no longer needed). */
.footer-cta-strip::before { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE NAV CLOSE BUTTON — explicit X button inside the overlay.
   The hamburger sits at nav z-index (1000) but the overlay opens at
   1100, covering it. Without a separate close button, users have no
   way to dismiss the menu except hitting browser back.
   ════════════════════════════════════════════════════════════════ */
.mobile-nav-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 48px; height: 48px;
  /* High-contrast bg + thick border so the close button reads against the
     translucent dark overlay (was 0.08 alpha = nearly invisible in dark mode). */
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.mobile-nav-close:hover {
  background: rgba(255,255,255,0.3);
  border-color: var(--amber, #e07b10);
  color: var(--amber, #e07b10);
  transform: rotate(90deg);
}
.mobile-nav-close svg { display: block; }
/* Light-mode variant — solid white card with dark icon for crisp visibility */
html[data-theme="light"] .mobile-nav-close {
  background: #ffffff;
  border-color: rgba(0,0,0,0.18);
  color: #1a1a2a;
  box-shadow: 0 4px 14px rgba(20,20,40,0.12);
}
html[data-theme="light"] .mobile-nav-close:hover {
  background: #fff5e8;
  border-color: var(--amber, #e07b10);
  color: var(--amber, #e07b10);
}

/* ════════════════════════════════════════════════════════════════
   ROUND CORNERS PASS — bump all major cards/images consistently
   across the whole site, including ones the earlier list missed.
   ════════════════════════════════════════════════════════════════ */
.benefit-card,
.benefit-card.featured,
.fit-card,
.spec-row,
.country-card,
.country-card-photo,
.country-card-photo img,
.region-block .container > img,
.what-photo img,
.about-photo img,
.country-hero-img img,
.hero-bg,
.page-hero-bg,
.specs-section .spec-row,
.culture-item,
.culture-item img,
.timeline {
  border-radius: 18px !important;
}

/* Make culture gallery items SLIGHTLY more rounded since they're large */
.culture-item,
.culture-item img,
.culture-item--wide-solo,
.culture-item--wide,
.culture-item--narrow {
  border-radius: 22px !important;
  overflow: hidden;
}

/* Country card with internal photo+text split: round the WHOLE card,
   not just the photo. Photo top corners follow card; bottom corners
   follow card on flipped (rtl) cards too. */
.country-card { border-radius: 22px !important; overflow: hidden !important; }
.country-card .country-card-photo { border-radius: 0 !important; }
.country-card .country-card-photo img { border-radius: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   HOVER SHADOW CONSISTENCY — culture-item now uses transform-origin
   for stable scale + shadow that matches the lift.
   ════════════════════════════════════════════════════════════════ */
.culture-item {
  transform-origin: center;
  will-change: transform;
}
.culture-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(0,0,0,0.35) !important;
}
html[data-theme="light"] .culture-item:hover {
  box-shadow: 0 20px 44px rgba(20,20,40,0.14) !important;
}
/* The IMAGE inside scales but is clipped by overflow:hidden — keep
   the card's hover shadow synced with the lift, not the image scale */
.culture-item img { transform-origin: center; }

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE — fix the amber line bisecting the 01/02/03 cards.
   It was meant to visually connect the steps but looks like a stray
   line through them. Hide it.
   ════════════════════════════════════════════════════════════════ */
.program-steps::before { display: none !important; }
/* Bump step-card rounded corners slightly */
.step-card { border-radius: 24px !important; }

/* ════════════════════════════════════════════════════════════════
   "適合的學生" SECTION — title visibility fix in dark mode.
   .who-header h2 used `color: var(--black)` which is #0a0a0f in
   dark mode (dark on dark = invisible). Force white in dark mode.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .who-header h2,
.who-header h2 { color: #ffffff; }
html[data-theme="light"] .who-header h2 { color: #0c0c18 !important; }

/* ════════════════════════════════════════════════════════════════
   ROUNDED CORNERS FIX — inner elements inside already-rounded cards
   should NOT have their own border-radius (creates a gap inside the
   card's overflow clip → "white squared edge" effect). The parent
   card's `overflow: hidden` already clips them naturally.
   ════════════════════════════════════════════════════════════════ */
.blog-card .blog-thumb,
.blog-card .blog-thumb img,
.blog-featured-card .blog-thumb,
.blog-featured-card .blog-thumb img,
.country-card .country-card-photo,
.country-card .country-card-photo img,
.testi-card > *,
.step-card > *,
.profile-card > * {
  border-radius: 0 !important;
}

/* Bump the OUTER cards a bit more so corners are clearly visible
   in light mode (white on white was reading as square at 20px). */
.blog-card,
.blog-featured-card,
.testi-card,
.step-card,
.profile-card {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* ════════════════════════════════════════════════════════════════
   SPEC ROW PADDING — many country pages render spec rows with no
   internal padding so text hits the border. Add comfortable padding
   site-wide (works in both themes).
   ════════════════════════════════════════════════════════════════ */
.spec-row {
  padding: 20px 24px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1.5px solid rgba(255,255,255,0.14) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
html[data-theme="light"] .spec-row {
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 10px rgba(20,20,40,0.06) !important;
}
html[data-theme="light"] .spec-row:hover {
  border-color: rgba(224,123,16,0.45) !important;
  box-shadow: 0 4px 16px rgba(20,20,40,0.1) !important;
}
.spec-row:hover {
  border-color: rgba(224,123,16,0.5) !important;
}
/* Section grid spacing */
.specs-section .specs-grid { gap: 14px !important; }

/* ════════════════════════════════════════════════════════════════
   COUNTRY PAGE — Mexico-style safety footnote + related pills:
   light-mode text was invisible (white at 0.58 alpha on cream).
   ════════════════════════════════════════════════════════════════ */
/* Italic safety footnotes / disclaimer paragraphs that use inline
   light-rgba colors — force a readable color in light mode. */
html[data-theme="light"] .content-section p[style*="rgba(255,255,255,0.58"],
html[data-theme="light"] .content-section p[style*="rgba(255,255,255,0.6"],
html[data-theme="light"] .content-section p[style*="font-style:italic"] {
  color: #5a5a72 !important;
}
/* "相似目的地" related country pills */
html[data-theme="light"] .related-pill {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1a1a2a !important;
  box-shadow: 0 1px 6px rgba(20,20,40,0.05);
}
html[data-theme="light"] .related-pill:hover {
  background: rgba(224,123,16,0.08) !important;
  border-color: var(--amber, #e07b10) !important;
  color: #0c0c18 !important;
}
html[data-theme="light"] .related-section h3 { color: #2a2a3c !important; }

/* ════════════════════════════════════════════════════════════════
   RELATED COUNTRY PILLS — LIGHT MODE READABILITY (stronger pass).
   Country pages use either .rel-pill or .related-pill for "相似目的地"
   pills. Both forms need solid dark text on white pill in light mode.
   This rule uses extra specificity + !important + element type to
   beat any browser-default <a> color or per-page rule.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .related-section a.rel-pill,
html[data-theme="light"] .related-section a.related-pill,
html[data-theme="light"] a.rel-pill,
html[data-theme="light"] a.related-pill {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #0c0c18 !important;
  box-shadow: 0 2px 8px rgba(20,20,40,0.06);
  text-decoration: none !important;
  font-weight: 700;
}
html[data-theme="light"] .related-section a.rel-pill:hover,
html[data-theme="light"] .related-section a.related-pill:hover,
html[data-theme="light"] a.rel-pill:hover,
html[data-theme="light"] a.related-pill:hover {
  background: rgba(224,123,16,0.10) !important;
  border-color: var(--amber, #e07b10) !important;
  color: #0c0c18 !important;
  transform: translateY(-2px);
}
/* Section heading + tag */
html[data-theme="light"] .related-section h2,
html[data-theme="light"] .related-section h3,
html[data-theme="light"] .related-section .tag { color: #0c0c18 !important; }

/* ════════════════════════════════════════════════════════════════
   DESTINATIONS GUIDE — comparison table rating dots.
   Belt-and-suspenders rule: in light mode the .difficulty-pip.on
   pips were inheriting grey from a higher-specificity light-mode
   rule. Force magenta with hardcoded color (no CSS var) so it works
   even if var(--magenta) resolution fails for any reason.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .difficulty-bar .difficulty-pip.on,
html[data-theme="light"] .difficulty-pip.on {
  background: #ff0097 !important;
}
html[data-theme="light"] .difficulty-bar .difficulty-pip,
html[data-theme="light"] .difficulty-pip {
  background: rgba(0,0,0,0.14) !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE BROWSER DARK MODE — opt out of auto-darkening.
   Chrome (Android) and some Samsung Internet builds auto-darken
   pages that don't declare a color-scheme. iOS Safari is gentler
   but still applies tint shifts. Declaring `color-scheme` in CSS
   (alongside the <meta name="color-scheme"> in each page head)
   tells the browser "this site supports both modes natively, don't
   re-color it." Without this, dark-mode users see the hamburger
   spans + brand colors washed/inverted to muddy tones.
   ════════════════════════════════════════════════════════════════ */
html, body { color-scheme: light dark; }

/* ════════════════════════════════════════════════════════════════
   HAMBURGER MENU — bulletproof against mobile browser dark mode.
   The plain white spans were vulnerable to color shifts when the
   user's browser had auto-dark on. Solution: wrap the button in a
   magenta brand-colored card with explicit forced-color-adjust:none
   so the visible silhouette ALWAYS reads against any background, in
   both site themes and regardless of browser-level color shifts.
   The spans themselves use a strong brand-magenta in BOTH modes —
   high contrast against cream (light) and chocolate (dark), and
   browsers don't auto-darken vibrant magentas the way they shift
   pure white/black. Result: visible everywhere, no exceptions.
   ════════════════════════════════════════════════════════════════ */
.hamburger {
  /* Solid card so the button silhouette is always visible. */
  background: rgba(255,0,151,0.10) !important;
  border: 1.5px solid rgba(255,0,151,0.45) !important;
  border-radius: 12px !important;
  /* Prevent browser/forced-colors shifts on the button itself. */
  forced-color-adjust: none;
  -webkit-tap-highlight-color: transparent;
}
.hamburger:hover {
  background: rgba(255,0,151,0.18) !important;
  border-color: rgba(255,0,151,0.7) !important;
}
.hamburger span {
  /* Strong brand magenta — readable on cream (light) AND chocolate
     (dark). Mobile browsers don't apply heavy auto-dark to vibrant
     saturated brand colors. Override the inline #fff default. */
  background: #ff0097 !important;
  background-color: #ff0097 !important;
  forced-color-adjust: none;
  height: 2.5px !important;  /* slightly thicker for better mobile visibility */
}
/* Light mode: keep the same brand magenta — it reads beautifully
   against cream/amber nav backgrounds too. */
html[data-theme="light"] .hamburger span {
  background: #ff0097 !important;
  background-color: #ff0097 !important;
}
html[data-theme="light"] .hamburger {
  background: rgba(255,0,151,0.06) !important;
  border-color: rgba(255,0,151,0.40) !important;
}
.hamburger:hover span,
html[data-theme="light"] .hamburger:hover span {
  background: #ff0097 !important;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER LEGAL LINKS — real links to privacy + terms pages.
   Previously these were dead <span>s with 30% white. Now they're
   anchor tags with subtle hover state.
   ════════════════════════════════════════════════════════════════ */
.footer-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-legal-links a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links a:hover {
  color: var(--magenta, #ff0097) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal-sep {
  color: rgba(255,255,255,0.25);
  font-size: 0.85rem;
}
html[data-theme="light"] .footer-legal-links a {
  color: rgba(20,20,40,0.55) !important;
}
html[data-theme="light"] .footer-legal-links a:hover {
  color: var(--magenta, #ff0097) !important;
}
html[data-theme="light"] .footer-legal-sep {
  color: rgba(20,20,40,0.25);
}

/* Inline legal links — embedded in copyright line so they're left of the
   LINE float button that previously covered them at the bottom-right. */
.footer-inline-legal {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-inline-legal:hover {
  color: var(--magenta, #ff0097) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-theme="light"] .footer-inline-legal {
  color: rgba(20,20,40,0.65) !important;
}
html[data-theme="light"] .footer-inline-legal:hover {
  color: var(--magenta, #ff0097) !important;
}

/* ════════════════════════════════════════════════════════════════
   LEGAL PAGES (privacy / terms) — light-mode overrides.
   Pages are styled dark-first inline. These rules invert the body,
   card backgrounds, borders, and text colors when the user switches
   to light mode, while keeping the magenta brand color consistent.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] body.legal-page {
  background: #fdf7ee !important;
  color: #1a1a2a !important;
}
html[data-theme="light"] body.legal-page .legal-wrap {
  background: transparent;
}
html[data-theme="light"] .legal-hero {
  background: #fdf7ee;
  border-bottom-color: rgba(20,20,40,0.10) !important;
}
html[data-theme="light"] .legal-hero-overlay {
  background: linear-gradient(135deg, rgba(253,247,238,0.86) 0%, rgba(253,247,238,0.93) 60%, rgba(255,0,151,0.10) 100%) !important;
}
html[data-theme="light"] .legal-hero h1 { color: #1a1a2a !important; }
html[data-theme="light"] .legal-hero p.lead { color: rgba(20,20,40,0.78) !important; }
html[data-theme="light"] .legal-meta {
  background: rgba(20,20,40,0.04) !important;
  border-color: rgba(20,20,40,0.12) !important;
  color: rgba(20,20,40,0.60) !important;
}
html[data-theme="light"] .legal-meta strong { color: rgba(20,20,40,0.88) !important; }

html[data-theme="light"] .legal-toc {
  background: #ffffff !important;
  border-color: rgba(20,20,40,0.10) !important;
  box-shadow: 0 4px 18px rgba(20,20,40,0.06);
}
html[data-theme="light"] .legal-toc li a {
  color: rgba(20,20,40,0.65) !important;
}
html[data-theme="light"] .legal-toc li a:hover {
  color: #1a1a2a !important;
}

html[data-theme="light"] .legal-article h2 {
  color: #1a1a2a !important;
  border-bottom-color: rgba(255,0,151,0.30) !important;
}
html[data-theme="light"] .legal-article h3 { color: #1a1a2a !important; }
html[data-theme="light"] .legal-article p,
html[data-theme="light"] .legal-article li,
html[data-theme="light"] .legal-article ul,
html[data-theme="light"] .legal-article ol {
  color: rgba(20,20,40,0.78) !important;
}
html[data-theme="light"] .legal-article strong { color: #0c0c18 !important; }
html[data-theme="light"] .legal-article .callout {
  background: rgba(255,0,151,0.06) !important;
  border-left-color: var(--magenta, #ff0097) !important;
}
html[data-theme="light"] .legal-article .callout.warn {
  background: rgba(224,123,16,0.10) !important;
  border-left-color: #e07b10 !important;
}

html[data-theme="light"] .legal-contact {
  background: linear-gradient(135deg, rgba(255,0,151,0.06) 0%, rgba(255,0,151,0.02) 100%) !important;
  border-color: rgba(255,0,151,0.25) !important;
}
html[data-theme="light"] .legal-contact h3 { color: #1a1a2a !important; }
html[data-theme="light"] .legal-contact p { color: rgba(20,20,40,0.72) !important; }
html[data-theme="light"] .legal-contact ul li a {
  background: #ffffff !important;
  border-color: rgba(20,20,40,0.14) !important;
  color: #1a1a2a !important;
}
html[data-theme="light"] .legal-contact ul li a:hover {
  background: var(--magenta, #ff0097) !important;
  border-color: var(--magenta, #ff0097) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE THEME TOGGLE — light/dark switch inside the mobile nav.
   Desktop has #bfe-theme-toggle in the nav-cta row; that row is
   hidden on mobile (display:none below 900px), so mobile users had
   no way to switch themes. Add a sibling button #bfe-theme-toggle-mobile
   inside the overlay header (next to the close X). Positioned at the
   top-left mirror of the close button. JS in nav.js + theme.js wires
   both buttons to the same toggle handler.
   ════════════════════════════════════════════════════════════════ */
.mobile-nav-theme-toggle {
  position: absolute;
  top: 20px; left: 20px;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  forced-color-adjust: none;
}
.mobile-nav-theme-toggle:hover {
  background: rgba(255,255,255,0.3);
  border-color: var(--amber, #e07b10);
  color: var(--amber, #e07b10);
  transform: rotate(12deg);
}
.mobile-nav-theme-toggle svg { display: block; }
/* Light-mode variant — solid white card with dark icon for crisp contrast */
html[data-theme="light"] .mobile-nav-theme-toggle {
  background: #ffffff;
  border-color: rgba(0,0,0,0.18);
  color: #1a1a2a;
  box-shadow: 0 4px 14px rgba(20,20,40,0.12);
}
html[data-theme="light"] .mobile-nav-theme-toggle:hover {
  background: #fff5e8;
  border-color: var(--amber, #e07b10);
  color: var(--amber, #e07b10);
}