/* nav.css — BFE shared navigation styles
   ========================================
   Extracted so pages like privacy.html and terms.html (which
   don't carry the full marketing-page CSS) still render the injected
   header.html nav, mega-menu, and mobile overlay correctly.

   Other pages keep their inline nav CSS for now (they predate this file).
   When you next refactor those, swap them to <link rel="stylesheet" href="nav.css">
   and delete the inline nav copy. */

/* ===== ROOT VARS (in case page didn't set them) ===== */
:root {
  --magenta: #ff0097;
  --magenta-dark: #c4008a;
  --grad: linear-gradient(135deg, #ff0097 0%, #c4008a 100%);
}

/* ===== ANCHOR RESET INSIDE NAV/HEADER ===== */
/* Legal pages have a generic `a:hover { text-decoration: underline }` rule
   for article body links — strip it inside the nav, mega-menu, dropdowns,
   and mobile overlay so nav links don't suddenly underline on hover. */
nav#main-nav a,
nav#main-nav a:hover,
.mega-menu a, .mega-menu a:hover,
.mini-dropdown a, .mini-dropdown a:hover,
.mobile-nav-overlay a, .mobile-nav-overlay a:hover {
  text-decoration: none;
}

/* ===== NAV BASE =====
   Frosted-glass look in dark mode. Three ingredients:
     - Low-opacity tinted background (we use ~62% so ~38% of the hero shows)
     - Strong blur to merge underlying pixels into a soft wash
     - Saturate(140%) bumps color richness so the wash doesn't look murky
   Previous value `rgba(8,8,13,0.94)` was 94% opaque, which made the blur
   imperceptible — the nav read as solid black. */
nav#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(8,8,13,0.62);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 28px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
  transition: background 0.3s, box-shadow 0.3s, border-bottom-color 0.3s;
  gap: 8px;
}
/* When the page has scrolled past the hero, behind the nav becomes the
   page body (dark solid). Slightly bump opacity so content stays readable
   without the hero's visual interest to fall back on. */
nav#main-nav.scrolled {
  background: rgba(8,8,13,0.82);
}
nav#main-nav .logo { flex-shrink: 0; }
nav#main-nav .logo img { height: 32px; width: auto; max-width: none; display: block; }
nav#main-nav > ul {
  list-style: none; display: flex; flex-wrap: nowrap;
  gap: 2px; align-items: center; flex: 1; justify-content: center;
  min-width: 0; margin: 0; padding: 0;
}
nav#main-nav > ul > li { list-style: none; }
nav#main-nav > ul > li > a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.75);
  padding: 7px 10px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
nav#main-nav > ul > li > a:hover { background: rgba(255,255,255,0.07); color: #fff; }
/* Emergency Help link — subtle red accent so safety is findable but not alarmist */
nav#main-nav > ul > li > a.nav-help-link {
  color: rgba(255,150,140,0.95);
}
nav#main-nav > ul > li > a.nav-help-link:hover {
  background: rgba(255,59,59,0.12);
  color: #ffb3aa;
}
html[data-theme="light"] nav#main-nav > ul > li > a.nav-help-link {
  color: #c41c1c;
}
html[data-theme="light"] nav#main-nav > ul > li > a.nav-help-link:hover {
  background: rgba(196,28,28,0.10);
  color: #8b0000;
}
.mobile-nav-help {
  color: rgba(255,150,140,0.95) !important;
  border-color: rgba(255,59,59,0.20) !important;
}
html[data-theme="light"] .mobile-nav-help { color: #c41c1c !important; }

/* ===== NAV CTA (right side) ===== */
nav#main-nav .nav-cta {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; flex-wrap: nowrap;
}
.nav-phone {
  font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500;
  white-space: nowrap; text-decoration: none;
}
.nav-phone:hover { color: rgba(255,255,255,0.8); }
@media (max-width: 1120px) { .nav-phone { display: none; } }
html[data-theme="light"] .nav-phone { color: #1a1a2a; font-weight: 600; }
html[data-theme="light"] .nav-phone:hover { color: #e07b10; }
.btn-line-nav {
  display: inline-flex; align-items: center; gap: 6px;
  /* Darkened from #06C755 to #06AF49 to pass WCAG AA contrast against white text
     (~4.6:1 vs 2.6:1 before). Still reads as LINE-brand green. */
  background: #06AF49; color: #fff; font-size: 12.5px; font-weight: 800;
  padding: 7px 13px; border-radius: 50px;
  /* Subtle text-shadow anchors the text against the bright background,
     which helps perceived readability even if PSI scores the raw colors. */
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
  transition: transform 0.2s, box-shadow 0.2s; white-space: nowrap;
  text-decoration: none; flex-shrink: 0;
}
.btn-line-nav:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(6,199,85,0.5); }
.btn-primary {
  display: inline-block; background: var(--grad); color: #fff;
  font-size: 15px; font-weight: 700; padding: 14px 36px;
  border-radius: 50px; box-shadow: 0 6px 24px rgba(255,0,151,0.35);
  transition: transform 0.2s, box-shadow 0.2s; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,0,151,0.5); }
.nav-cta-btn {
  padding: 8px 16px !important; font-size: 13px !important;
  white-space: nowrap; flex-shrink: 0;
}

/* ===== DROPDOWN ARROW ===== */
.dropdown-arrow {
  width: 10px; height: 10px; display: inline-block;
  vertical-align: middle; opacity: 0.5;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-dropdown.open > a .dropdown-arrow { transform: rotate(180deg); opacity: 1; }
.nav-dropdown { position: relative; }

/* ===== MINI DROPDOWN (About / Program) ===== */
.mini-dropdown {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: rgba(10,10,16,0.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1001;
}
.mini-dropdown::before {
  content: ''; position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--magenta), transparent);
}
.nav-dropdown.open .mini-dropdown {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all;
}
.mini-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 11px; border-radius: 10px; text-decoration: none;
  transition: background 0.15s;
}
.mini-link:hover { background: rgba(255,255,255,0.06); }
.mini-link-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; }
.mini-link-text { display: flex; flex-direction: column; gap: 2px; }
.mini-link-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); }
.mini-link-sub { font-size: 11px; color: rgba(255,255,255,0.38); }
.mini-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 6px 8px; }

/* ===== MEGA MENU (Destinations) ===== */
.mega-menu {
  position: fixed; top: 64px; left: 0; right: 0;
  background: rgba(8,8,14,0.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 28px 0 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 999;
}
.nav-dropdown.open .mega-menu { opacity: 1; pointer-events: all; }
.mega-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.mega-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mega-eyebrow { font-size: 11px; font-weight: 700; color: var(--magenta); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.mega-header h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.mega-see-all { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; }
.mega-see-all:hover { color: #fff; }
.mega-grid { display: grid; grid-template-columns: 1fr 2.2fr 1fr 1fr; gap: 24px; }
.mega-region {}
.region-head { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.country-list { display: flex; flex-wrap: wrap; gap: 5px; }
.europe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.cpill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.72);
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  transition: background 0.15s, color 0.15s;
  text-decoration: none; white-space: nowrap;
}
.cpill:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cpill.featured { background: rgba(255,0,151,0.1); color: rgba(255,120,200,0.95); border: 1px solid rgba(255,0,151,0.2); }
.cpill.cpill-accent-gold { background: rgba(245,166,35,0.08); color: rgba(245,200,100,0.95); }
.cpill.cpill-accent-sky { background: rgba(42,143,196,0.08); color: rgba(120,200,240,0.95); }
.cpill.cpill-accent-amber { background: rgba(224,123,16,0.08); color: rgba(255,180,80,0.95); }
.hot-badge { font-size: 9px; font-weight: 700; background: var(--magenta); color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 2px; }
.flag { font-size: 1rem; }
.mega-footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.mega-footer-left { font-size: 12px; color: rgba(255,255,255,0.35); }
.mega-footer-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--magenta);
  text-decoration: none;
}
.mega-footer-cta:hover { color: #ff33b0; }

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer; padding: 8px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-nav-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(6,6,10,0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow-y: auto;
  padding: 88px 28px 48px;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-nav-overlay.open {
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav-link {
  display: block;
  font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,0.82);
  padding: 13px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-nav-link:hover { color: #fff; }
.mobile-country-section { margin-top: 20px; }
.mobile-country-section h4 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,0,151,0.8);
  margin-bottom: 12px;
}
.mobile-country-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 20px;
}
.mobile-cpill {
  display: block;
  font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 9px 12px;
  text-decoration: none; transition: background 0.15s, color 0.15s;
}
.mobile-cpill:hover { background: rgba(255,0,151,0.12); color: #fff; border-color: rgba(255,0,151,0.25); }
.mobile-nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.mobile-nav-cta a {
  display: block; text-align: center;
  padding: 14px 20px; border-radius: 50px; font-weight: 700;
  font-size: 0.95rem; text-decoration: none; transition: transform 0.2s;
}
.mobile-nav-cta a:hover { transform: translateY(-2px); }

/* ===== MEGA CTA CARD (inside mega menu) ===== */
.mega-cta-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: rgba(255,0,151,0.08);
  border: 1px solid rgba(255,0,151,0.18);
  border-radius: 12px;
  transition: background 0.15s;
  text-decoration: none;
}
.mega-cta-card:hover { background: rgba(255,0,151,0.15); }
.mega-cta-card__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--magenta);
}
.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); }

/* ===== MOBILE BREAKPOINT (NAV) ===== */
@media (max-width: 900px) {
  .mega-menu { display: none !important; }
  .mini-dropdown { display: none !important; }
  nav#main-nav > ul { display: none !important; }
  nav#main-nav .nav-cta { display: none !important; }
  .hamburger { display: flex !important; }
  /* .mobile-nav-overlay display managed by JS — overlay opens by JS adding .open */
}

/* ════════════════════════════════════════════════════════════════
   FOOTER — base layout styles
   theme-shared.css carries background, padding, light-mode overrides,
   and CTA-strip styles. These rules supply the grid/flex layout for
   the actual footer content (brand, columns, social, bottom row).
   ════════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 60px 32px 32px;
  color: #fff;
}
footer p { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 32px;
}
.footer-brand img { height: 32px; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 260px; }
footer h4 {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}
footer ul {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 0;
}
footer ul li a {
  font-size: 14px; color: rgba(255,255,255,0.6);
  transition: color 0.2s;
  text-decoration: none;
}
footer ul li a:hover { color: var(--magenta); text-decoration: none; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,0.3);
}
.social-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.social-link {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: all 0.2s;
  text-decoration: none;
}
.social-link:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  background: rgba(255,0,151,0.1);
}

/* ════════════════════════════════════════════════════════════════
   FOOTER CTA STRIP — base layout for the magenta "ready to start?" band
   theme-shared.css handles the background + mask edge fading + button
   styles; these provide the inner flex layout.
   ════════════════════════════════════════════════════════════════ */
.footer-cta-strip {
  padding: 96px 40px;
  position: relative;
  overflow: hidden;
}
.fcs-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.fcs-text { flex: 1; min-width: 280px; }
.fcs-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  color: #fff;
  padding: 6px 14px; border-radius: 50px;
  margin-bottom: 16px;
}
.fcs-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  color: #fff;
}
.fcs-text p {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  max-width: 540px;
}
.fcs-btns {
  display: flex; flex-direction: column; gap: 12px;
  flex-shrink: 0; min-width: 280px;
}
.fcs-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.fcs-btn:hover { transform: translateY(-2px); }
.fcs-btn-icon { font-size: 24px; flex-shrink: 0; }
.fcs-btn strong { display: block; font-size: 15px; }
.fcs-btn small { display: block; font-size: 11px; opacity: 0.75; }

/* ════════════════════════════════════════════════════════════════
   FOOTER ACTION CARDS (inside footer columns)
   theme-shared.css has the styled card backgrounds; this is the layout.
   ════════════════════════════════════════════════════════════════ */
.footer-action-cards {
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 18px;
}
.footer-action-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s;
}
.footer-action-card:hover { transform: translateY(-2px); }
.fac-icon { font-size: 22px; flex-shrink: 0; }
.fac-text { display: flex; flex-direction: column; gap: 2px; }
.fac-text strong { font-size: 13px; color: #fff; }
.fac-text small { font-size: 11px; color: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════════════════════════════
   FOOTER — RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .fcs-inner { flex-direction: column; align-items: flex-start; }
  .fcs-btns { width: 100%; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   LINE FLOATING BUTTON — anchored to bottom-right
   ════════════════════════════════════════════════════════════════ */
#bfe-line-float {
  position: fixed;
  bottom: 24px; right: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: #06AF49; color: #fff;
  font-size: 14px; font-weight: 700;
  border-radius: 50px;
  box-shadow: 0 8px 28px rgba(6,199,85,0.4);
  text-decoration: none;
  z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s;
}
#bfe-line-float:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(6,199,85,0.55); }
@media (max-width: 768px) { #bfe-line-float { display: none; } }