/* AirUs Header — single source of all header styles.
   Consumed by /prototype/index.html (local) and the child theme (WordPress). */

:root {
  --airus-orange: #ff7300;
  --airus-black: #0a0a0a;
  --airus-white: #ffffff;
  --airus-grey: #f8f7f5;
  --airus-grey-line: #e7e5e1;
  --airus-muted: #8a8a8a;
  --airus-bar-h: 72px;
  --airus-bar-h-mobile: 60px;
  --airus-logo-w: 100px;         /* logo width (SVG needs explicit width — see .airus-logo__img) */
  --airus-bp: 1025px;            /* desktop ≥ this, mobile below */
  --airus-content-w: 1240px;     /* matches Elementor content width */
  --airus-shadow: 0 18px 44px rgba(10,10,10,0.13);
  --airus-ease: cubic-bezier(.4, 0, .2, 1);
  --airus-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Scope a light reset to the header only so we don't fight theme styles */
.airus-header *,
.airus-header *::before,
.airus-header *::after { box-sizing: border-box; }

.airus-header { font-family: var(--airus-font); }
.airus-header a { text-decoration: none; color: inherit; }
.airus-header button { font-family: inherit; border: 0; background: none; cursor: pointer; }

/* Visible focus ring for accessibility */
.airus-header :focus-visible {
  outline: 2px solid var(--airus-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Desktop bar ---- */
.airus-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 26px;
  height: var(--airus-bar-h);
  /* No side padding — the header sits inside an Elementor container that aligns
     it with the page content below; that container provides the side gutters. */
  padding: 0;
  background: var(--airus-white);
}
.airus-logo { display: inline-flex; align-items: center; flex: none; font-weight: 800; font-size: 21px; letter-spacing: -.6px; color: var(--airus-black); }
.airus-logo span { color: var(--airus-orange); }
/* The Site Identity SVG has a viewBox but no width/height on its root <svg>,
   so browsers resolve `width:auto` to 0 (invisible). Give it an explicit width;
   height:auto keeps the aspect ratio and max-height caps it in the bar.
   Adjust --airus-logo-w to resize the logo. */
.airus-logo__img { display: block; width: var(--airus-logo-w, 100px); height: auto; max-height: 40px; max-width: 220px; }

.airus-nav__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.airus-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px;
  color: var(--airus-black); padding: 8px 0; position: relative;
}
.airus-nav__link:hover, .airus-nav__item[data-open] .airus-nav__link { color: var(--airus-orange); }
.airus-caret { width: 8px; height: 8px; border-right: 2px solid var(--airus-orange); border-bottom: 2px solid var(--airus-orange); transform: rotate(45deg) translateY(-2px); transition: transform .15s var(--airus-ease); }
.airus-nav__item[data-open] .airus-caret { transform: rotate(225deg) translateY(-2px); }

.airus-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.airus-btn {
  background: var(--airus-orange); color: var(--airus-white);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 11px 18px; border-radius: 9px; transition: filter .15s var(--airus-ease);
}
.airus-btn:hover { filter: brightness(.93); }
.airus-btn--black { background: var(--airus-black); }

.airus-tel { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--airus-grey-line); color: var(--airus-black); }
.airus-tel__icon { color: var(--airus-orange); flex: none; }
.airus-tel__text { display: flex; flex-direction: column; line-height: 1.15; }
.airus-tel__text small { font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--airus-muted); }
.airus-tel__text strong { font-size: 13px; font-weight: 800; }

/* Mobile-only elements hidden on desktop (defined in Task 8) */
.airus-burger, .airus-quick { display: none; }

/* ---- Mega-menu panels ---- */
.airus-panels { position: relative; z-index: 95; }
.airus-panel {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; background: var(--airus-white);
  box-shadow: var(--airus-shadow);
  max-width: var(--airus-content-w); margin: 0 auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s var(--airus-ease), transform .15s var(--airus-ease);
}
.airus-panel[data-show] { opacity: 1; transform: none; pointer-events: auto; }
.airus-panel[hidden] { display: none; }

.airus-panel__cols { flex: 1; display: flex; }
.airus-col { flex: 1; padding: 26px 28px; }
.airus-col + .airus-col { border-left: 1px solid #f0efed; }
.airus-col__label { margin: 0 0 14px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--airus-orange); }
.airus-link { display: block; padding: 7px 0; }
.airus-link__t { display: block; font-size: 14px; font-weight: 700; color: var(--airus-black); }
.airus-link__d { display: block; font-size: 11px; color: var(--airus-muted); }
.airus-link:hover .airus-link__t { color: var(--airus-orange); }

.airus-promo { width: 250px; flex: none; background: var(--airus-black); color: var(--airus-white); padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; }
.airus-promo__label { margin: 0 0 12px; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--airus-orange); }
.airus-promo__lead { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.airus-promo__stats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.airus-promo__stats li { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.72); }
.airus-promo__stats strong { color: var(--airus-orange); font-weight: 800; font-size: 16px; margin-right: 6px; }
.airus-promo__cta { margin-top: 20px; background: var(--airus-orange); color: var(--airus-white); text-align: center; font-size: 12px; font-weight: 700; padding: 12px; border-radius: 9px; }

/* ---- Responsive switch ---- */
@media (max-width: 1024.98px) {
  .airus-bar { height: var(--airus-bar-h-mobile); padding: 0 16px; gap: 14px; }
  .airus-nav, .airus-actions, .airus-panels { display: none; }
  .airus-quick { display: flex; align-items: center; gap: 16px; }
  .airus-quick__btn { color: var(--airus-orange); display: inline-flex; padding: 8px; }
  .airus-burger { display: inline-flex; flex-direction: column; gap: 5px; margin-left: auto; padding: 10px; }
  .airus-burger span { width: 24px; height: 2px; background: var(--airus-black); border-radius: 2px; transition: transform .2s var(--airus-ease), opacity .2s var(--airus-ease); }
}
@media (min-width: 1025px) {
  .airus-quick, .airus-burger { display: none; }
}

/* ---- Mobile drill-down overlay ---- */
.airus-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: var(--airus-grey);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .2s var(--airus-ease);
}
.airus-mobile[data-show] { opacity: 1; }
.airus-mobile[hidden] { display: none; }
.airus-mobile__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--airus-white); border-bottom: 1px solid var(--airus-grey-line); }
.airus-mobile__close { font-size: 26px; line-height: 1; color: var(--airus-black); padding: 4px 8px; }

.airus-mobile__viewport { position: relative; flex: 1; overflow: hidden; }
.airus-screen {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 8px 0 24px;
  transform: translateX(0); transition: transform .25s var(--airus-ease);
  background: var(--airus-grey);
}
.airus-screen[hidden] { display: none; }
.airus-screen[data-leaving] { transform: translateX(-30%); }
.airus-screen[data-entering] { transform: translateX(100%); }

.airus-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 20px; font-size: 15px; font-weight: 700; color: var(--airus-black);
  text-align: left; border-bottom: 1px solid var(--airus-grey-line); background: none;
}
.airus-row--sub { font-weight: 600; font-size: 14px; }
.airus-chev { color: var(--airus-orange); font-size: 20px; }
.airus-back { display: block; width: 100%; text-align: left; padding: 16px 20px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--airus-orange); background: var(--airus-white); border-bottom: 1px solid var(--airus-grey-line); }
.airus-mobile .airus-col__label { padding: 16px 20px 6px; margin: 0; }

.airus-mobile__footer { display: flex; gap: 10px; padding: 14px 18px; background: var(--airus-white); border-top: 1px solid var(--airus-grey-line); }

@media (prefers-reduced-motion: reduce) {
  .airus-header *, .airus-panel, .airus-mobile, .airus-screen, .airus-caret {
    transition: none !important;
  }
}
.airus-mobile__footer .airus-btn { flex: 1; text-align: center; padding: 14px 10px; }

/* ==========================================================================
   HEADER ARMOR — immunise against Hello Elementor reset.css + Elementor Kit
   --------------------------------------------------------------------------
   reset.css styles every <button>/<a>:  1px #c36 border, #c36 text, and a
   #c36 :hover fill. Elementor's global Kit forces, via the body class:
     .elementor-kit-7 button { background:#000; color:#fff; border-radius:6px }
     .elementor-kit-7 a      { color:#000 }
   Those selectors are 0,1,1 and out-rank our 0,1,0 component classes, so they
   bleed onto the header's real <button>/<a> controls. We re-scope under
   .airus-header[data-airus] (>= 0,2,1) to win cleanly — no !important.
   If a future control still bleeds, give its rule the same prefix.
   ========================================================================== */

/* 1. Neutralise inherited background + colour on every header control */
.airus-header[data-airus] a,
.airus-header[data-airus] button {
  background-color: transparent;
  color: inherit;
}
.airus-header[data-airus] a:hover,
.airus-header[data-airus] a:focus,
.airus-header[data-airus] button:hover,
.airus-header[data-airus] button:focus {
  background-color: transparent;
  color: inherit;
}

/* 2. Kill reset.css #c36 border + Kit radius on the bare-button controls */
.airus-header[data-airus] .airus-nav__link,
.airus-header[data-airus] .airus-burger,
.airus-header[data-airus] .airus-mobile__close {
  border: 0;
  border-radius: 0;
}

/* 3. Restore intentional dividers the reset would repaint #c36 (these are <button>s) */
.airus-header[data-airus] .airus-row,
.airus-header[data-airus] .airus-back {
  border: 0;
  border-bottom: 1px solid var(--airus-grey-line);
}

/* 4. Re-assert brand-colour controls (attribute-scoped class outranks section 1) */
.airus-header[data-airus] .airus-btn,
.airus-header[data-airus] .airus-promo__cta {
  background-color: var(--airus-orange);
  color: var(--airus-white);
  border-radius: 9px;
}
.airus-header[data-airus] .airus-btn:hover,
.airus-header[data-airus] .airus-btn:focus,
.airus-header[data-airus] .airus-promo__cta:hover,
.airus-header[data-airus] .airus-promo__cta:focus {
  background-color: var(--airus-orange);
  color: var(--airus-white);
  filter: brightness(.93);
}
/* Black CTA variant (Book Now) — overrides the orange .airus-btn armor above */
.airus-header[data-airus] .airus-btn--black { background-color: var(--airus-black); }
.airus-header[data-airus] .airus-btn--black:hover,
.airus-header[data-airus] .airus-btn--black:focus { background-color: #262626; filter: none; }
.airus-header[data-airus] .airus-back,
.airus-header[data-airus] .airus-back:hover,
.airus-header[data-airus] .airus-back:focus {
  background-color: var(--airus-white);
  color: var(--airus-orange);
}
.airus-header[data-airus] .airus-quick__btn,
.airus-header[data-airus] .airus-quick__btn:hover,
.airus-header[data-airus] .airus-quick__btn:focus { color: var(--airus-orange); }
.airus-header[data-airus] .airus-tel { color: var(--airus-black); }

/* 5. Hover / active orange states */
.airus-header[data-airus] .airus-nav__link:hover,
.airus-header[data-airus] .airus-nav__item[data-open] .airus-nav__link { color: var(--airus-orange); }
.airus-header[data-airus] .airus-link:hover .airus-link__t { color: var(--airus-orange); }