/*
 * Global header + footer — Phase 4. Built only from tokens.css.
 * Loaded after components.css.
 */

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.02);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  /* The utility bar below collapses (height change) when .is-scrolled
     toggles, which shifts page layout while this element is sticky.
     Without this, Chrome's scroll anchoring "corrects" scrollY to
     compensate for that shift, which can push it back across the JS
     threshold in site.js and re-toggle the class — a feedback loop
     that reads as the header visibly vibrating at that scroll
     position. Scroll anchoring elsewhere on the page is unaffected. */
  overflow-anchor: none;
}

/* Premium scroll state: a soft frosted-glass bar with real depth,
   replacing the flat hairline border used at rest. Falls back to a
   plain translucent surface (no blur) automatically on browsers
   without backdrop-filter support — still legible, just not frosted. */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-lg);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-scrolled {
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
  }
}

/* ---------- Utility bar: indicative rate + WhatsApp support + existing Login panel ---------- */
/* The old "Technology Meets Travel & Visa" tagline was dropped — the
   rate widget replaces it as the bar's left-side content, per the
   client's utility-bar redesign brief. The WhatsApp "24x7 Support"
   link was dropped in that same pass, then restored by client request
   (it also stays reachable sitewide via the floating enquiry-widget,
   includes/enquiry-widget.php, but is kept here too as its own
   always-visible one-tap link). Login (unchanged) stays right-most. */

.site-header__utility {
  background: var(--visa-blue-dark);
  color: rgba(255, 255, 255, 0.92);
  max-height: 40px;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

/* overflow: hidden only while collapsing on scroll — it has to stay
   off at rest, or it clips the Login dropdown menu, which is a
   position: absolute popup meant to extend below this bar's own
   40px height. (Caught via a real screenshot, not just the "is-open"
   class check: the menu was toggling correctly but rendering
   invisible, clipped by this ancestor.) */
.site-header.is-scrolled .site-header__utility {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.site-header__utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--font-size-xs);
}

/* Left-side tech-forward tagline — a stated fact (see
   includes/encryption.php: AES-256-GCM really does encrypt sensitive
   fields like passport/PAN numbers), not a decorative claim. Hidden
   below 900px rather than truncated, since the WhatsApp+Login group
   on the right already needs the space on tablet/mobile widths. */
.site-header__utility-tagline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.site-header__utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-header__utility-link:hover {
  color: var(--visa-gold);
}

.site-header__utility-contact {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .site-header__utility-tagline { display: none; }
}

@media (max-width: 768px) {
  .site-header__utility-bar {
    padding: 6px 0;
  }

  /* Compact mobile utility bar: WhatsApp support only, one line —
     Login stays reachable via the hamburger menu's own Login section
     (.site-header__mobile-login) rather than duplicating the trigger
     here, which is what keeps this from wrapping onto a second line. */
  .site-header__login { display: none; }
  .site-header__utility-link-text { display: none; }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  transition: padding var(--transition-base);
}

.site-header.is-scrolled .site-header__bar {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo img {
  display: block;
  height: 40px;
  width: auto;
  transition: height var(--transition-base);
}

.site-header.is-scrolled .site-header__logo img {
  height: 32px;
}

.site-header__nav {
  flex: 1;
  display: none;
}

.site-header__nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.site-header__nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dark);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  white-space: nowrap;
}

.site-header__nav a:hover,
.site-header__nav a.is-active {
  color: var(--visa-blue);
}

/* A thin gold underline that grows in from the center on hover/active,
   rather than a plain color swap — the one deliberate "premium" flourish
   in the nav, kept to this single spot so it reads as an accent, not a
   pattern repeated everywhere. */
.site-header__nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--visa-gold);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width var(--transition-base);
}

.site-header__nav > ul > li > a:hover::after,
.site-header__nav > ul > li > a.is-active::after {
  width: 100%;
}

/* Top-level nav tab icons — desktop + mobile share the same markup
   and coloring rule so a tab and its icon always change color
   together on hover/active rather than looking like two elements. */
.site-header__nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.site-header__nav > ul > li > a:hover .site-header__nav-icon,
.site-header__nav > ul > li > a.is-active .site-header__nav-icon {
  color: var(--visa-blue);
}

.has-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-dark);
}

.dropdown-menu li a:hover {
  background: var(--visa-blue-light);
  color: var(--visa-blue-dark);
}

/* ---------- Attestation mega-menu ---------- */

/* Escapes .has-dropdown's position:relative so .mega-menu positions
   against .site-header (the nearest remaining positioned ancestor)
   instead of the nav <li> — centering it under the whole header
   regardless of where the trigger sits horizontally, so it's never
   clipped by the right edge of the viewport. */
.has-mega-menu {
  position: static;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.99);
  width: min(880px, calc(100vw - var(--space-8)));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.05), var(--shadow-lg);
  margin-top: var(--space-2);
  padding: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 110;
  overflow: hidden;
  /* .site-header__nav > ul sets white-space: nowrap for the flat
     top-level links; reset it here at the root rather than per leaf
     element, so no mega-menu built on top of this ever silently
     inherits it again (see the Company mega-menu's overflow bug). */
  white-space: normal;
}

/* Thin gold rule across the top — a quiet brand mark on every panel,
   independent of whatever content each mega-menu happens to hold. */
.mega-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--visa-gold), var(--visa-gold-dark));
}

.has-mega-menu:hover .mega-menu,
.has-mega-menu:focus-within .mega-menu,
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Escape needs to win over :hover/:focus-within — pressing it doesn't
   necessarily move the mouse or blur the trigger, so this is the only
   way to actually hide the panel until the pointer/focus genuinely
   leaves (see the matching JS in site.js). */
.mega-menu.is-force-closed {
  opacity: 0 !important;
  visibility: hidden !important;
}

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

.mega-menu--visa-services {
  width: min(680px, calc(100vw - var(--space-8)));
  padding: var(--space-4) var(--space-5);
}

.mega-menu__columns--visa-services {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--space-3);
}

.mega-menu__columns--visa-services > .mega-menu__company-link {
  min-width: 0;
  padding: 6px var(--space-2);
  gap: var(--space-2);
}

.mega-menu__columns--visa-services .mega-menu__company-icon {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-base);
}

.mega-menu__columns--visa-services .mega-menu__company-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mega-menu--visa-services .mega-menu__cta {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.mega-menu__col-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.mega-menu__col-icon {
  font-size: var(--font-size-base);
}

.mega-menu__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-menu__col li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 3px);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-dark);
  line-height: var(--line-height-tight);
  transition: background-color var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
}

.mega-menu__col li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--visa-gold);
  border-radius: var(--radius-full);
  transition: height var(--transition-fast);
}

.mega-menu__col li a:hover,
.mega-menu__col li a:focus-visible {
  background: var(--visa-blue-light);
  color: var(--visa-blue-dark);
  padding-left: calc(var(--space-2) + var(--space-2));
}

.mega-menu__col li a:hover::before,
.mega-menu__col li a:focus-visible::before {
  height: 60%;
}

.mega-menu__icon {
  flex-shrink: 0;
  font-size: var(--font-size-base);
}

.mega-menu__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.mega-menu__cta-copy strong {
  display: block;
  color: var(--text-dark);
  font-size: var(--font-size-base);
}

.mega-menu__cta-copy p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: left;
}

.mega-menu__cta .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .mega-menu__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

/* ---------- Company mega-menu (premium/corporate variant) ---------- */

.mega-menu__trigger-arrow {
  vertical-align: middle;
  margin-left: 2px;
  transition: transform var(--transition-fast);
}

.has-mega-menu--company:hover .mega-menu__trigger-arrow,
.has-mega-menu--company:focus-within .mega-menu__trigger-arrow,
.has-mega-menu--company > a[aria-expanded="true"] .mega-menu__trigger-arrow {
  transform: rotate(180deg);
}

.mega-menu--company {
  width: min(940px, calc(100vw - var(--space-8)));
  padding: var(--space-5);
}

.mega-menu__columns--company {
  grid-template-columns: repeat(3, 1fr) 240px;
  align-items: stretch;
}

/* Grid/flex items don't shrink below their content's intrinsic width
   by default — without this, a long label like "Affiliations &
   Accreditations" forces its column (and the whole grid) wider than
   the panel, pushing the featured card off the visible edge instead
   of wrapping. */
.mega-menu__columns--company > .mega-menu__col,
.mega-menu__columns--company > .mega-menu__featured,
.mega-menu__company-text {
  min-width: 0;
}

.mega-menu__columns--company .mega-menu__col-heading {
  text-transform: uppercase;
}

.mega-menu__company-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-base);
}

.mega-menu__company-link:hover,
.mega-menu__company-link:focus-visible {
  background: var(--visa-blue-light);
}

.mega-menu__company-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-full);
  background: var(--visa-blue-light);
  color: var(--visa-blue);
}

.mega-menu__company-text {
  flex: 1;
  min-width: 0;
}

.mega-menu__company-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.mega-menu__company-label,
.mega-menu__company-desc {
  /* .site-header__nav > ul sets white-space: nowrap for the flat nav
     links; without resetting it here, these descriptions inherit it
     and overflow their column instead of wrapping. */
  white-space: normal;
}

.mega-menu__company-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: var(--line-height-normal);
}

.mega-menu__company-arrow {
  flex-shrink: 0;
  color: var(--visa-blue);
  font-weight: var(--font-weight-semibold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.mega-menu__company-link:hover .mega-menu__company-arrow,
.mega-menu__company-link:focus-visible .mega-menu__company-arrow {
  opacity: 1;
  transform: translateX(0);
}

.mega-menu__featured {
  display: flex;
  flex-direction: column;
  background: var(--visa-blue-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  color: var(--white);
}

.mega-menu__featured-visual {
  margin-bottom: var(--space-3);
}

.mega-menu__featured-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--line-height-tight);
  color: var(--white);
  white-space: normal;
}

.mega-menu__featured-copy {
  font-size: var(--font-size-sm);
  color: var(--visa-blue-light);
  opacity: 0.85;
  margin: var(--space-2) 0 0;
  text-align: left;
  white-space: normal;
}

.mega-menu__featured-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--visa-gold);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  transition: transform var(--transition-fast);
}

.mega-menu__featured-link:hover {
  transform: translateX(3px);
  color: var(--visa-gold);
}

@media (max-width: 1279px) {
  .mega-menu__columns--company {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-menu__featured {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
  .mega-menu__featured-visual {
    margin-bottom: 0;
  }
  .mega-menu__featured-link {
    padding-top: var(--space-2);
  }
}

/* ---------- Countries mega-menu ---------- */

.mega-menu--countries {
  width: min(1140px, calc(100vw - var(--space-8)));
  padding: var(--space-5);
}

.mega-menu__countries-search {
  position: relative;
  margin-bottom: var(--space-5);
}

.mega-menu__countries-search svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.mega-menu__countries-search .form-input {
  padding-left: calc(var(--space-3) * 2 + 16px);
}

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

.mega-menu__countries-columns > .mega-menu__col {
  min-width: 0;
}

.mega-menu__col--popular .mega-menu__col ul,
.mega-menu__countries-columns ul {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.mega-menu__countries-columns li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--text-dark);
}

.mega-menu__countries-columns li a:hover,
.mega-menu__countries-columns li a:focus-visible {
  background: var(--visa-blue-light);
  color: var(--visa-blue-dark);
}

.mega-menu__viewall {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--visa-blue);
}

.mega-menu__viewall:hover {
  color: var(--visa-blue-dark);
}

.mega-menu__purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px var(--space-2);
}

.mega-menu__purpose-grid a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-dark);
}

.mega-menu__purpose-grid a:hover,
.mega-menu__purpose-grid a:focus-visible {
  background: var(--visa-blue-light);
  color: var(--visa-blue-dark);
}

.mega-menu__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.mega-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark);
  background: var(--surface);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.mega-menu__chip:hover,
.mega-menu__chip:focus-visible {
  background: var(--visa-blue-light);
  border-color: var(--visa-blue);
  color: var(--visa-blue-dark);
}

.mega-menu__schengen-box {
  display: block;
  padding: var(--space-3);
  background: var(--visa-gold-light);
  border: 1px solid var(--visa-gold);
  border-radius: var(--radius-md);
}

.mega-menu__schengen-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-dark);
}

.mega-menu__schengen-copy {
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.mega-menu__schengen-link {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--visa-gold-dark);
}

.mega-menu__schengen-link:hover {
  color: var(--visa-blue-dark);
}

.mega-menu__countries-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  padding: var(--space-5) 0;
}

.mega-menu__featured-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.mega-menu__featured-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  min-width: 0;
}

.mega-menu__featured-card:hover,
.mega-menu__featured-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--visa-blue);
}

.mega-menu__featured-card--highlight {
  background: var(--visa-gold-light);
  border-color: var(--visa-gold);
}

.mega-menu__featured-card-flag {
  font-size: var(--font-size-xl);
}

.mega-menu__featured-card-title {
  margin-top: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-dark);
}

.mega-menu__featured-card-copy {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.mega-menu__featured-card-link {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--visa-blue);
}

.mega-menu__countries-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.mega-menu__guided-search,
.mega-menu__directory-cta {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--background);
}

.mega-menu__guided-search strong,
.mega-menu__directory-cta strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-dark);
}

.mega-menu__guided-search p,
.mega-menu__directory-cta p {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-align: left;
}

@media (max-width: 1279px) {
  .mega-menu__countries-columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .mega-menu__col--popular {
    grid-column: 1 / -1;
  }
  .mega-menu__featured-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-menu__countries-footer {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile Countries accordion (Schengen highlight) ---------- */

.site-header__mobile-schengen {
  background: var(--visa-gold-light) !important;
  font-weight: var(--font-weight-semibold) !important;
}

.site-header__mobile-schengen span:last-child {
  margin-left: var(--space-1);
  font-weight: var(--font-weight-regular);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* ---------- Mobile Attestation accordion ---------- */

.site-header__mobile-accordion > details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-2);
  color: var(--text-dark);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--border);
}

.site-header__mobile-summary-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__mobile-accordion > details > summary::-webkit-details-marker {
  display: none;
}

.site-header__mobile-accordion > details > summary::after {
  content: "+";
  font-size: var(--font-size-xl);
  color: var(--visa-blue);
  transition: transform var(--transition-base);
}

.site-header__mobile-accordion > details[open] > summary::after {
  transform: rotate(45deg);
}

.site-header__mobile-accordion-body {
  padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4);
}

.site-header__mobile-subgroup + .site-header__mobile-subgroup {
  margin-top: var(--space-4);
}

.site-header__mobile-subheading {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.site-header__mobile-accordion-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__mobile-accordion-body li a {
  display: block;
  padding: var(--space-3) var(--space-2);
  border-bottom: none;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
}

.site-header__mobile-viewall {
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--visa-blue);
  border-bottom: none;
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.site-header__login-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.site-header__login-trigger .mega-menu__trigger-arrow {
  transition: transform var(--transition-fast);
}

.site-header__login-trigger[aria-expanded="true"] .mega-menu__trigger-arrow {
  transform: rotate(180deg);
}

.site-header__login-menu {
  left: auto;
  right: 0;
}

.dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu.is-force-closed {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-header__text-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-dark);
  white-space: nowrap;
}

.site-header__text-link:hover {
  color: var(--visa-blue);
}

.site-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.site-header__burger span {
  display: block;
  height: 2px;
  background: var(--text-dark);
  border-radius: var(--radius-full);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-header__mobile {
  display: none;
  border-top: 1px solid var(--border);
  padding: var(--space-4);
}

.site-header__mobile.is-open {
  display: block;
}

.site-header__mobile ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.site-header__mobile a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  color: var(--text-dark);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--border);
}

.site-header__mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-header__mobile-tagline {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.site-header__mobile-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.site-header__mobile-login a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-dark);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.site-header__mobile-login a:hover {
  background: var(--visa-blue-light);
  color: var(--visa-blue-dark);
}

@media (min-width: 1024px) {
  .site-header__nav { display: block; }
  .site-header__actions { display: flex; }
  .site-header__burger { display: none; }
  .site-header__mobile { display: none !important; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--visa-blue-dark);
  color: var(--visa-blue-light);
  margin-top: var(--space-12);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.site-footer__logo {
  display: block;
  height: 40px;
  width: auto;
}

.site-footer__tagline {
  color: var(--visa-gold-light);
  font-weight: var(--font-weight-medium);
  margin: var(--space-3) 0 var(--space-1);
}

.site-footer__muted {
  color: var(--visa-blue-light);
  opacity: 0.75;
  font-size: var(--font-size-sm);
  margin: 0;
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--visa-blue-light);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social a:hover {
  background: var(--visa-gold);
  color: var(--visa-blue-dark);
}

.site-footer__col h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--white);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
  /* Keep every column heading on one line so they all sit parallel
     along the same row, regardless of column width — a two-word
     heading wrapping while its neighbors don't was throwing the
     whole header row out of alignment. */
  white-space: nowrap;
}

.site-footer__col-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--visa-gold);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__col li + li {
  margin-top: var(--space-3);
}

.site-footer__col a {
  color: var(--visa-blue-light);
  font-size: var(--font-size-sm);
  opacity: 0.9;
}

.site-footer__col a:hover {
  color: var(--visa-gold);
  opacity: 1;
}

.site-footer__disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-5) 0;
}

.site-footer__disclaimer p {
  color: var(--visa-blue-light);
  opacity: 0.75;
  font-size: var(--font-size-xs);
  margin: 0;
  text-align: justify;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-4) 0;
}

.site-footer__bottom p {
  color: var(--visa-blue-light);
  opacity: 0.7;
  font-size: var(--font-size-xs);
  margin: 0;
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
  .site-footer__grid { grid-template-columns: 1.3fr repeat(5, 1fr); }
}

.site-footer__legal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-4) 0;
}

.site-footer__legal-row nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__legal-row a {
  color: var(--visa-blue-light);
  opacity: 0.75;
  font-size: var(--font-size-xs);
}

.site-footer__legal-row a:hover {
  opacity: 1;
  color: var(--visa-gold);
}