/* ==========================================================================
   EGYVACATIONS — BASE  ·  assets/css/base.css
   Load order: tokens -> base -> chrome -> components -> sections -> template.

   Scope
   -----
   Every <main> on the site carries .ev-page plus its template class
   (.evh home, .evt tour family). The reset below is written with :is() so one
   declaration serves all of them, and with :where() so it keeps ZERO
   specificity — a component rule always wins over a reset rule. That one
   detail is what kept the orange Search button orange; do not change it to a
   plain element selector.
   ========================================================================== */

:is(.ev-page,.evh,.evt),
:is(.ev-page,.evh,.evt) *,
:is(.ev-page,.evh,.evt) *::before,
:is(.ev-page,.evh,.evt) *::after{box-sizing:border-box}

:is(.ev-page,.evh,.evt){
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:is(.ev-page,.evh,.evt) :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote){margin:0}
:is(.ev-page,.evh,.evt) :where(ul,ol){list-style:none;padding:0}
:is(.ev-page,.evh,.evt) :where(img,video){max-width:100%;display:block}
/* Inline SVGs are icons unless a component says otherwise. :where() keeps this
   at zero specificity, so every component rule below wins — but an icon that
   nobody sized can never blow up to fill its container. */
:is(.ev-page,.evh,.evt) :where(svg){width:18px;height:18px;flex:none;display:inline-block;
  vertical-align:-.18em}
:is(.ev-page,.evh,.evt) :where(a){color:inherit;text-decoration:none}
:is(.ev-page,.evh,.evt) :where(button){font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:is(.ev-page,.evh,.evt) :where(input,select,textarea){font:inherit;color:inherit}
:is(.ev-page,.evh,.evt) :where(table){border-collapse:collapse;width:100%}
:is(.ev-page,.evh,.evt) :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}

/* ---------- document ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font)}

/* ---------- container ----------
   .ev-container is canonical. The two template aliases are kept so the
   existing markup renders unchanged; new markup should use .ev-container. */
.ev-container,
.evh-container,
.evt-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- screen-reader only ---------- */
.ev-sr-only,
.evh-sr,
.evt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------- skip link ---------- */
.ev-skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;border-radius:0 0 var(--r-md) 0;
  background:var(--ev-navy);color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.ev-skip-link:focus{left:0}

/* ---------- headings ----------
   The dual heading is the signature device: .l1 light, .l2 bold, stacked. */
/* :where() on BOTH halves, so this costs 0,0,0 — which is what the base layer
   is supposed to cost. Written as :is(.ev-page,…) h2 it measured 0,1,1 and
   quietly beat every single-class component rule: a label inside the navy
   hero came out navy on navy because this rule outranked its own class. */
:where(.ev-page,.evh,.evt) :where(h1,h2,h3){color:var(--text-heading);
  letter-spacing:var(--ls-heading);line-height:var(--lh-heading)}
.l1,.l2{display:block}
.l1{font-weight:var(--fw-light)}
.l2{font-weight:var(--fw-bold)}
.l2 em{font-style:normal;color:var(--accent)}

.evt-h2{font-size:clamp(1.4rem,2.3vw,1.85rem);font-weight:var(--fw-bold)}

/* ---------- eyebrow ---------- */
.ev-eyebrow,
.evt-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;font-size:var(--fs-micro);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-heading)}
.ev-eyebrow::before,
.evt-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--accent);flex:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  :is(.ev-page,.evh,.evt) *,
  :is(.ev-page,.evh,.evt) *::before,
  :is(.ev-page,.evh,.evt) *::after{transition-duration:1ms!important;animation-duration:1ms!important;
    scroll-behavior:auto!important}
}