/* Europe Unlocked homepage: light and dark versions
   site.css draws the page as it always looked: a dark hero, then light and dark bands.
   This file only overrides it, keyed on the one site setting (html[data-theme], from the
   chakra-ui-color-mode cookie), so in light mode the hero turns light and in dark mode the
   light bands turn dark. The dark accent bands (.band.dark, .connector, .reach) and the green
   try-it bands stay as they are in both modes. Edit site.css for anything else. */

/* ---------------------------------------------------------------------------------------------
   Both modes
   --------------------------------------------------------------------------------------------- */

/* The motion scenes are light pages with a see-through background. When the page itself is dark,
   Chrome paints a see-through frame white, so tell the frame it holds a light page and it stays
   see-through, exactly as it looks in light mode. */
html[data-theme] .eu-home iframe { color-scheme: light; }

/* Small lines that sat just under AA contrast in site.css */
html[data-theme] .eu-home .why-stat-us em { color: #e4f7f4; }
html[data-theme="light"] .eu-home .search-modes :is(.section-intro > p:last-child, .mode-copy > p:not(.mode-proof, .mode-kicker)) { color: #55667a; }
html[data-theme="light"] .eu-home .search-modes .mode-kicker { color: var(--brand-700); }
html[data-theme="dark"] .eu-home .trip-explorer :is(.trip-meta, .trip-edt small) { color: var(--ink-200); }


/* =============================================================================================
   LIGHT MODE: the hero and the Destinations teaser turn light
   ============================================================================================= */

html[data-theme="light"] .eu-home .trip-explorer {
  background:
    radial-gradient(circle at 82% 8%, rgba(42, 161, 140, .16), transparent 32%),
    radial-gradient(circle at 14% 42%, rgba(56, 189, 248, .08), transparent 32%),
    linear-gradient(180deg, var(--brand-50) 0%, var(--paper) 46%, #f1f8f6 100%);
  color: var(--charcoal);
}
html[data-theme="light"] .eu-home .trip-explorer::after { opacity: .2; }

/* Intro */
html[data-theme="light"] .eu-home .explorer-intro h1 { color: var(--ink-800); }
html[data-theme="light"] .eu-home .explorer-subtitle p { color: #4d5e70; }
html[data-theme="light"] .eu-home .explorer-subtitle p:last-child { color: var(--brand-700); }
html[data-theme="light"] .eu-home .explorer-intro .launch-label { color: var(--brand-600); }
html[data-theme="light"] .eu-home .hero-search { background: var(--brand-500); color: var(--white); box-shadow: 0 18px 40px -20px rgba(15, 118, 110, .75); }
html[data-theme="light"] .eu-home .hero-search:hover { background: var(--brand-600); color: var(--white); }
html[data-theme="light"] .eu-home .hero-free { color: var(--muted); }
html[data-theme="light"] .eu-home .explorer-intro .explorer-proof { border-color: var(--brand-200); background: var(--white); color: var(--ink-700); box-shadow: 0 10px 26px -22px rgba(9, 74, 68, .6); }
html[data-theme="light"] .eu-home .explorer-intro .explorer-proof span { color: var(--brand-500); }

/* The airport showcase frame and picker */
html[data-theme="light"] .eu-home .airport-showcase { border-color: rgba(15, 118, 110, .22); background: rgba(255, 255, 255, .72); box-shadow: 0 30px 70px -56px rgba(9, 74, 68, .7); }
html[data-theme="light"] .eu-home .airport-bar { border-bottom-color: var(--line); }
html[data-theme="light"] .eu-home .airport-bar-label .eyebrow { color: var(--brand-600); }
html[data-theme="light"] .eu-home .airport-cta { color: #4d5e70; }
html[data-theme="light"] .eu-home .airport-cta strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .showcase-band { color: #4d5e70; }
html[data-theme="light"] .eu-home .showcase-band strong { color: var(--brand-600); }
html[data-theme="light"] .eu-home .showcase-band small { color: var(--muted); }
html[data-theme="light"] .eu-home .showcase-band .showcase-dot { background: var(--brand-400); box-shadow: 0 0 0 4px rgba(42, 161, 140, .16); }
html[data-theme="light"] .eu-home .airport-scroll { border-color: var(--brand-200); background: var(--white); color: var(--brand-600); }
html[data-theme="light"] .eu-home .airport-scroll:hover:not(:disabled) { border-color: var(--brand-500); background: var(--brand-500); color: var(--white); }
html[data-theme="light"] .eu-home .airport-pill { border-color: var(--line); background: var(--white); color: var(--ink-700); }
html[data-theme="light"] .eu-home .airport-pill:hover { border-color: var(--brand-400); color: var(--ink-800); }
html[data-theme="light"] .eu-home .airport-pill[aria-pressed="true"] { border-color: var(--brand-500); background: var(--brand-500); color: var(--white); }

/* The map stays dark (it is the picture); only its frame lightens */
html[data-theme="light"] .eu-home .trip-explorer .map-frame { border-color: var(--line); box-shadow: 0 26px 60px -40px rgba(9, 23, 37, .55); }

/* Real trips panel */
html[data-theme="light"] .eu-home .trips-side { border-color: var(--line); background: var(--white); box-shadow: 0 22px 52px -42px rgba(9, 74, 68, .45); }
html[data-theme="light"] .eu-home .live-label { color: var(--brand-600); }
html[data-theme="light"] .eu-home .live-label span { background: var(--brand-400); box-shadow: 0 0 0 4px rgba(42, 161, 140, .14); }
html[data-theme="light"] .eu-home .live-label strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .panel-blurb { color: #4d5e70; }
html[data-theme="light"] .eu-home .trip-row { border-color: var(--line); background: var(--paper); color: var(--ink-800); }
html[data-theme="light"] .eu-home .trip-row:hover { border-color: var(--brand-400); }
html[data-theme="light"] .eu-home .trip-row[aria-pressed="true"] { border-color: var(--brand-400); background: var(--brand-50); }
html[data-theme="light"] .eu-home .trip-kind { color: var(--brand-600); }
html[data-theme="light"] .eu-home .trip-meta { color: var(--muted); }
html[data-theme="light"] .eu-home .trip-price { color: var(--ink-800); }
html[data-theme="light"] .eu-home .trip-edt { border-top-color: var(--line); }
html[data-theme="light"] .eu-home .trip-edt b { color: var(--brand-600); }
html[data-theme="light"] .eu-home .trip-edt small { color: var(--muted); }
html[data-theme="light"] .eu-home .trip-none { border-color: var(--brand-200); color: var(--muted); }

/* The selected trip, under the map */
html[data-theme="light"] .eu-home .trip-story { border-color: var(--brand-100); background: var(--brand-50); }
html[data-theme="light"] .eu-home .story-intro { color: var(--ink-800); }
html[data-theme="light"] .eu-home .story-cities { border-top-color: rgba(15, 118, 110, .16); }
html[data-theme="light"] .eu-home .story-city-name { color: var(--brand-600); }
html[data-theme="light"] .eu-home .story-city-name small { color: var(--muted); }
html[data-theme="light"] .eu-home .story-city li { color: #4d5e70; }
html[data-theme="light"] .eu-home .story-city li::before { color: var(--brand-500); }

/* The trip keeps going: Extreme Day Trips */
html[data-theme="light"] .eu-home .daytrip-unlock { border-color: var(--brand-200); background: linear-gradient(120deg, var(--brand-50), var(--white)); }
html[data-theme="light"] .eu-home .trip-continues { border-color: var(--brand-300); background: var(--white); color: var(--brand-600); }
html[data-theme="light"] .eu-home .daytrip-copy .eyebrow { color: var(--brand-600); }
html[data-theme="light"] .eu-home .daytrip-copy h2 { color: var(--ink-800); }
html[data-theme="light"] .eu-home .daytrip-answer { color: var(--brand-600); }
html[data-theme="light"] .eu-home #edt-base { color: #4d5e70; }
html[data-theme="light"] .eu-home #edt-base strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .linked-route { border-color: var(--brand-100); border-left-color: var(--brand-400); background: var(--white); color: var(--ink-700); }
html[data-theme="light"] .eu-home .edt-card { border-color: var(--line); box-shadow: 0 18px 40px -30px rgba(9, 74, 68, .5); }

/* Destinations teaser */
html[data-theme="light"] .eu-home .destinations-teaser {
  border-color: rgba(14, 116, 144, .22);
  background:
    radial-gradient(circle at 88% 0, rgba(71, 198, 224, .14), transparent 34%),
    linear-gradient(135deg, #f1fbfd, var(--brand-50));
}
html[data-theme="light"] .eu-home .destinations-teaser::after { opacity: .12; }
html[data-theme="light"] .eu-home .destinations-teaser .eyebrow { color: #0e7490; }
html[data-theme="light"] .eu-home .destinations-teaser h2 { color: var(--ink-800); }
html[data-theme="light"] .eu-home .destinations-teaser-heading > div > p:last-child { color: #4d5e70; }
html[data-theme="light"] .eu-home .destinations-teaser-heading > a { border-color: rgba(14, 116, 144, .3); background: var(--white); color: #0e7490; }
html[data-theme="light"] .eu-home .destinations-teaser-heading > a:hover { border-color: #0e7490; color: var(--ink-800); }
html[data-theme="light"] .eu-home .destinations-teaser.number-only #destinations-teaser-copy { color: var(--brand-600); }
html[data-theme="light"] .eu-home .unlocked-qualifier,
html[data-theme="light"] .eu-home .unlock-close { color: var(--muted); }
html[data-theme="light"] .eu-home .unlock-steps li { border-color: rgba(14, 116, 144, .16); background: var(--white); }
html[data-theme="light"] .eu-home .unlock-steps li > span,
html[data-theme="light"] .eu-home .unlocked-teaser-fallback > span { border-color: rgba(14, 116, 144, .24); background: rgba(71, 198, 224, .12); color: #0e7490; }
html[data-theme="light"] .eu-home .unlock-steps strong,
html[data-theme="light"] .eu-home .unlocked-teaser-fallback strong { color: var(--ink-800); }
html[data-theme="light"] .eu-home .unlock-steps p,
html[data-theme="light"] .eu-home .unlocked-teaser-fallback p { color: var(--muted); }
html[data-theme="light"] .eu-home .unlocked-teaser-fallback { border-color: rgba(14, 116, 144, .3); background: var(--white); }
html[data-theme="light"] .eu-home .destinations-teaser .unlocked-card { border-color: var(--line); box-shadow: 0 20px 44px -34px rgba(9, 74, 68, .55); }


/* =============================================================================================
   DARK MODE: the light bands turn dark, in the hero's navy and teal
   ============================================================================================= */

html[data-theme="dark"] .eu-home { background: var(--water); color: var(--ink-50); }

/* Inside each light band, the text colours site.css takes from the palette swap to their light
   equivalents. Scoped to these bands only, so the dark bands keep --white and the rest. */
html[data-theme="dark"] .eu-home :is(.getaway-definition, .search-modes, .search-filters, .trip-shapes, .search-pain, .founder-story, .why-built, .testimonials, .credibility) {
  --ink-700: #f3f7fb;
  --charcoal: var(--ink-50);
  --muted: #a9bfd3;
  --line: rgba(163, 188, 210, .17);
  --paper: #10283b;
  --brand-50: rgba(93, 202, 165, .1);
  --brand-100: rgba(93, 202, 165, .24);
  --brand-700: var(--brand-200);
  color: var(--ink-50);
}
/* ...except the photo diary, which was always dark and uses the real palette */
html[data-theme="dark"] .eu-home .founder-diary { --ink-700: #16324f; --brand-100: #c5ede3; --brand-700: #094a44; }

/* The bands, alternating like their light versions */
html[data-theme="dark"] .eu-home .getaway-definition,
html[data-theme="dark"] .eu-home .search-filters,
html[data-theme="dark"] .eu-home .credibility { background: #0b1c2c; }
html[data-theme="dark"] .eu-home .search-modes { border-top-color: rgba(93, 202, 165, .14); background: linear-gradient(180deg, #0c2331 0%, #0a1e2c 100%); }
html[data-theme="dark"] .eu-home .trip-shapes { background: linear-gradient(180deg, #0a1d2c, #0c2331); }
html[data-theme="dark"] .eu-home .search-pain { background: linear-gradient(160deg, #0b1f2e, #0b2531 62%, #0a2a30); }
html[data-theme="dark"] .eu-home .founder-story { background: linear-gradient(180deg, #0b1c2c, #0c2331); }
html[data-theme="dark"] .eu-home .why-built { border-top-color: rgba(93, 202, 165, .14); background: linear-gradient(145deg, #0a2030, #0b2a33); }
html[data-theme="dark"] .eu-home .testimonials { background: #0c2331; }
html[data-theme="dark"] .eu-home .credibility { border-top-color: rgba(93, 202, 165, .14); }

/* Eyebrows and the other brand-600 text, which is too dark to read on navy */
html[data-theme="dark"] .eu-home :is(.getaway-definition, .search-modes, .search-filters, .trip-shapes, .search-pain, .founder-story, .why-built, .testimonials, .credibility) .eyebrow { color: var(--brand-300); }
html[data-theme="dark"] .eu-home .shape-label,
html[data-theme="dark"] .eu-home .mode-stat strong,
html[data-theme="dark"] .eu-home .mode-proof strong,
html[data-theme="dark"] .eu-home .mode-kicker,
html[data-theme="dark"] .eu-home .testimonials-more a,
html[data-theme="dark"] .eu-home .credibility-inner h2 a { color: var(--brand-300); }

/* Cards that were white */
html[data-theme="dark"] .eu-home .definition-preview,
html[data-theme="dark"] .eu-home .shape-card,
html[data-theme="dark"] .eu-home .product-carousel,
html[data-theme="dark"] .eu-home .founder-highlights > div,
html[data-theme="dark"] .eu-home .testimonial,
html[data-theme="dark"] .eu-home .search-filters .filter-grid li,
html[data-theme="dark"] .eu-home .mode-tabs,
html[data-theme="dark"] .eu-home .mode-proof,
html[data-theme="dark"] .eu-home .why-stat:not(.why-stat-us) {
  border-color: var(--line);
  background: #10283b;
  box-shadow: 0 24px 50px -36px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] .eu-home .search-filters .filter-grid li:hover { border-color: var(--brand-400); }
html[data-theme="dark"] .eu-home .mode-tabs.is-stuck { box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .9); }

/* Five ways to search */
html[data-theme="dark"] .eu-home .mode-tabs button[aria-selected="true"] { background: var(--brand-500); color: var(--white); }
html[data-theme="dark"] .eu-home .mode-chips li { border-color: rgba(93, 202, 165, .32); background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .eu-home .mode-chips li::before { color: var(--brand-300); }
html[data-theme="dark"] .eu-home .mode-kicker button { text-decoration-color: rgba(93, 202, 165, .5); }

/* Trip shapes: the route maps keep their own light paper, as pictures */
html[data-theme="dark"] .eu-home .shape-copy .shape-punch { color: var(--brand-200) !important; }

/* Product carousel */
html[data-theme="dark"] .eu-home .product-carousel-window,
html[data-theme="dark"] .eu-home .product-carousel-dots { border-top-color: var(--line); }
html[data-theme="dark"] .eu-home .product-carousel-dots { background: #10283b; }
html[data-theme="dark"] .eu-home .product-slide { background: linear-gradient(135deg, #0e2537, #0c2a35); }
html[data-theme="dark"] .eu-home .product-slide img { border-color: var(--line); }
html[data-theme="dark"] .eu-home .product-carousel-controls button { border-color: rgba(93, 202, 165, .35); }
html[data-theme="dark"] .eu-home .product-carousel-controls button:hover { background: var(--brand-500); color: var(--white); }
html[data-theme="dark"] .eu-home .product-carousel-dots button[aria-pressed="true"] { background: var(--brand-300); }

/* Founder story */
html[data-theme="dark"] .eu-home .founder-map { border-color: var(--line); background: #10283b; }
html[data-theme="dark"] .eu-home .founder-copy .founder-origin { border-left-color: var(--brand-300); color: var(--ink-50) !important; }
html[data-theme="dark"] .eu-home .founder-signoff img,
html[data-theme="dark"] .eu-home .testimonial figcaption img { border-color: #1b3a52; }

/* Why it is different */
html[data-theme="dark"] .eu-home .cmp-drill { border-left-color: var(--brand-400); background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .eu-home .why-maths-story { border-left-color: var(--brand-400); background: rgba(255, 255, 255, .05); }
html[data-theme="dark"] .eu-home .why-maths-story b,
html[data-theme="dark"] .eu-home .why-maths-multi strong,
html[data-theme="dark"] .eu-home .why-stat:not(.why-stat-us) em { color: #fdba74; }
html[data-theme="dark"] .eu-home .why-stat-us { border-color: var(--brand-300); background: var(--brand-500); }
/* The searching-loop scene carries its own heading in dark ink, so it keeps a light panel to sit on.
   The gold scene after it draws its own dark card, so it needs none. */
html[data-theme="dark"] .eu-home .why-maths .motion-scene { padding: clamp(14px, 2vw, 22px); border-radius: 20px; background: #eef8f5; }

/* Testimonials */
html[data-theme="dark"] .eu-home .testimonials-more a { border-color: rgba(93, 202, 165, .35); background: #10283b; }
html[data-theme="dark"] .eu-home .testimonials-more a:hover { border-color: var(--brand-300); background: #143047; }

/* Credibility: the press logos are dark ink on a clear background, so they keep a light tray */
html[data-theme="dark"] .eu-home .press-logos { border-color: var(--line); background: rgba(233, 239, 245, .92); }