/* ============================================================
   Header, footer, nav, page-level structure
   ============================================================ */

/* ---- Top strip (contact + expert CTA) ---- */
.topbar {
  background: var(--color-navy);
  color: rgba(244, 244, 242, 0.85);
  font-size: var(--fs-small);
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}
.topbar-tagline { display: none; }
@media (min-width: 1500px) { .topbar-tagline { display: block; } }
.topbar-actions { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; }
.topbar-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.topbar-link svg { width: 16px; height: 16px; color: var(--color-cta); flex-shrink: 0; }
.topbar-link:hover { color: var(--color-cta); }
.topbar-email { display: none; }
@media (min-width: 1200px) { .topbar-email { display: inline-flex; } }
.topbar-phones { flex-wrap: wrap; row-gap: 2px; }
.topbar-phones a { color: #fff; font-weight: 600; white-space: nowrap; }
/* Phones: both numbers stay visible and tappable; the header's "Enquire Now" is the only CTA. */
@media (max-width: 720px) {
  .topbar-row { padding-block: 6px; }
  .topbar-actions { margin-left: 0; }
}
.topbar-phones a:hover { color: var(--color-cta); }
.topbar-sep { opacity: 0.35; }
.topbar-lang { display: none; }
@media (min-width: 900px) { .topbar-lang { display: inline-flex; } }

/* ---- Language dropdown (driven by Google Translate, see js/translate.js) ---- */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; color: #fff; position: relative; }
.lang-switch svg { width: 16px; height: 16px; color: var(--color-cta); flex-shrink: 0; }
.lang-switch select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f2' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 9px center;
  color: #fff;
  border: 1px solid rgba(244, 244, 242, 0.3);
  border-radius: 6px;
  padding: 5px 28px 5px 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  max-width: 215px;
  text-overflow: ellipsis;
}
.lang-switch select:hover, .lang-switch select:focus { border-color: var(--color-cta); outline: none; }
.lang-switch select option { color: #141a22; background: #fff; }
.mobile-lang { margin-top: var(--space-5); }
.mobile-lang .lang-switch { color: var(--color-navy); }
.mobile-lang .lang-switch select {
  color: var(--color-navy);
  border-color: var(--color-gray-300);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d2540' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  min-width: 190px;
}

/* Google's injected banner/tooltips would push the page down and wreck the layout -- hidden. */
.gt-host { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
body { top: 0 !important; }
.skiptranslate iframe, iframe.skiptranslate, .goog-te-banner-frame { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Translated text is often much longer than the English it replaces (French, Japanese, Thai...), and buttons
   never wrap in English. Only while a page is translated: let buttons wrap, keep the phone header's menu
   button on screen, and never let one long label widen the page. English is untouched. */
html[class*="translated-"] .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
@media (max-width: 640px) {
  html[class*="translated-"] .header-actions { gap: var(--space-3); min-width: 0; }
  html[class*="translated-"] .header-actions .btn { max-width: 120px; padding: 8px 10px; font-size: 0.8125rem; }
}
html[class*="translated-"] body { overflow-x: clip; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: height var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.site-header.header--shrunk {
  height: var(--header-height-shrunk);
  box-shadow: var(--shadow-sm);
  background: rgba(250, 249, 246, 0.96);
  backdrop-filter: saturate(180%) blur(6px);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  flex: 0 0 auto;            /* the logo must never be squeezed by the buttons next to it */
}
.brand-logo {
  height: 63px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;       /* if a width is ever forced, letterbox instead of stretching */
  display: block;
  transition: height var(--dur-mid) var(--ease);
}
.header--shrunk .brand-logo { height: 50px; }
/* Phones: a smaller logo leaves room for "Enquire Now", search and the menu button on one row. */
@media (max-width: 640px) {
  .header-row { gap: var(--space-3); }
  .brand-logo { height: 46px; }
  .header--shrunk .brand-logo { height: 42px; }
  .header-actions { gap: var(--space-2); min-width: 0; }
  .header-actions .btn { padding: 8px 12px; font-size: 0.875rem; white-space: nowrap; }
}
@media (max-width: 360px) {
  .brand-logo { height: 40px; }
  .header--shrunk .brand-logo { height: 38px; }
  .header-actions .btn { padding: 7px 9px; font-size: 0.8125rem; }
}
.primary-nav {
  display: none;
  align-items: center;
  align-self: stretch;
  gap: var(--space-6);
  flex: 1;
  justify-content: flex-start;
  margin-left: var(--logo-gap, 32px); /* set in Admin > Settings > Logo gap */
}
@media (min-width: 960px) { .primary-nav { display: flex; } }

.nav-link {
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-2) 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--color-navy); }

.nav-item-dropdown {
  /* static, not relative: the mega-menu positions against the full-width header so it can
     never overflow the viewport, and the item stretches the header's full height so there is
     no dead gap between the link and the panel for the hover to fall through. */
  position: static;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.nav-item-dropdown.is-simple { position: relative; }
.simple-menu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 200px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-cta);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), visibility var(--dur-mid);
}
.is-simple:hover .simple-menu, .is-simple:focus-within .simple-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.simple-menu a { display: block; padding: 10px var(--space-3); font-size: var(--fs-small); font-weight: 500; color: var(--color-gray-900); border-radius: 6px; }
.simple-menu a:hover { color: var(--color-accent); background: var(--color-gray-100); }

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(980px, calc(100vw - 48px));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-cta);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 0.95fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease), visibility var(--dur-mid);
}
.nav-item-dropdown:hover .mega-menu,
.nav-item-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-col { padding: var(--space-5); }
.mega-col + .mega-col { border-left: 1px solid var(--color-border); }
.mega-col h5 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.mega-col a {
  display: block;
  padding: 7px var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-gray-900);
  border-radius: 6px;
}
.mega-col a:hover { color: var(--color-accent); background: var(--color-gray-100); }
.mega-col a.mega-all { margin-top: var(--space-2); font-weight: 700; color: var(--color-accent); }
.mega-feature {
  background: var(--color-navy);
  color: var(--color-text-inverse);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
.mega-feature strong { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; color: #fff; }
.mega-feature p { font-size: var(--fs-small); color: rgba(244, 244, 242, 0.78); }
.mega-feature .btn { align-self: flex-start; padding: 10px 18px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.search-toggle {
  background: none;
  border: none;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  padding: var(--space-2);
}
.search-toggle:hover { color: var(--color-accent); }

.nav-toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: var(--space-2);
}
@media (min-width: 960px) { .nav-toggle { display: none; } }

/* ---- Mobile nav drawer ---- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
}
.mobile-nav.is-open { visibility: visible; }
.mobile-nav-backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 26, 46, 0.5);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 84vw);
  background: var(--color-surface);
  padding: var(--space-6) var(--space-5);
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-close {
  background: none; border: none;
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.mobile-nav-list a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}

/* ---- Search overlay ---- */
.search-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(16, 26, 46, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(18vh, 160px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-overlay-box {
  width: min(640px, 92vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.search-overlay-box form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: var(--space-3);
}
.search-overlay-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.25rem;
  background: transparent;
  color: var(--color-navy);
}
.search-overlay-close { background: none; border: none; color: var(--color-text-muted); }
.search-overlay-hint { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--color-text-muted); }

.search-suggestions {
  margin-top: var(--space-2);
  max-height: 360px;
  overflow-y: auto;
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.search-suggestion-item:hover,
.search-suggestion-item.is-active {
  background: var(--color-gray-100);
}
.search-suggestion-thumb {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--color-gray-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 6px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-suggestion-thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-suggestion-text { min-width: 0; }
.search-suggestion-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-brand {
  font-size: var(--fs-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.search-suggestion-item mark {
  background: none;
  color: var(--color-accent);
  font-weight: 700;
}
.search-suggestion-seeall {
  display: block;
  padding: var(--space-3) var(--space-2) 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 3px solid var(--color-cta);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  padding-block: var(--space-8) var(--space-6);
}
.footer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.footer-brand { margin-bottom: var(--space-4); }
.footer-logo { height: 40px; width: auto; display: block; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244,244,242,0.2);
  border-radius: 50%;
  color: rgba(244,244,242,0.75);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.footer-social a:hover { color: #fff; border-color: #fff; background: rgba(244,244,242,0.08); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
  color: var(--color-text-inverse);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.footer-col p, .footer-col address { color: rgba(244,244,242,0.7); font-size: var(--fs-small); line-height: 1.7; font-style: normal; }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col a { color: rgba(244,244,242,0.8); font-size: var(--fs-small); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(244,244,242,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: rgba(244,244,242,0.55);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  padding-block: var(--space-4);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb .sep { margin: 0 var(--space-2); color: var(--color-gray-300); }

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
  color: var(--color-text-inverse);
  padding-block: var(--space-8);
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(244,244,242,0.75); margin-top: var(--space-3); }
.cta-band .btn-row { margin-top: var(--space-5); justify-content: center; }