/* ===========================================================================
   EMAAR DESIGN SYSTEM · 02 — BASE
   The reset, the element defaults, and the accessibility floor.

   Everything here is unclassed — it styles ELEMENTS, not components — so it
   must stay small. A rule earns its place here only if every page on the site
   would otherwise have to write it.

   Lifted verbatim out of `places.css` §2–3, where it had been applying to the
   forty-five pages that happened to link that file. The booking journey and
   the search results page each carried their own near-identical copy; those
   copies are now deleted and this is the one.

   Figma mapping: Foundation Library → "Base / element defaults".
   =========================================================================== */


/* ———————————————————————————— 1 · Reset ———————————————————————————— */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--em-bg-primary);
  color: var(--em-text-primary);
  font-family: var(--em-font-body);
  font-size: var(--em-text-body-md);
  line-height: var(--p-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* clip, not hidden: overflow-x:hidden on a scroll ancestor kills position:sticky,
   which the action ledge depends on. Declared hidden first as the fallback. */
body { overflow-x: hidden; overflow-x: clip; }

a { color: var(--em-text-primary); text-decoration: none; }
a:hover { color: var(--em-text-secondary); }

button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}
input, select, textarea { font: inherit; color: inherit; }

img { max-width: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--p-weight-regular); }
p { margin: 0; }
ul, ol, dl, dd, figure, figcaption { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: var(--em-sand); }


/* ————————————————————— 2 · The accessibility floor —————————————————————

   These four rules are not negotiable and are not overridden by a page.     */

/* A ring for the keyboard, never for the mouse. */
:focus { outline: none; }
:focus-visible {
  outline: var(--em-focus-ring-width) solid var(--em-focus-ring);
  outline-offset: var(--em-focus-ring-offset);
}
/* On a photograph or a night ground, ink is invisible. Any container that
   inverts its world carries .on-dark or .em-onmedia and the ring follows. */
.on-dark :focus-visible,
.em-onmedia :focus-visible,
.em-ledge :focus-visible { outline-color: var(--em-focus-ring-inverse); }

/* Visually hidden, still read. */
.em-vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The skip link — the one .em-vh-ish thing that must come back for a keyboard.
   z-index is the top of the ladder because it has to clear the header, the
   dock, a drawer and a modal alike. */
.em-skip {
  position: fixed; top: 12px; left: 12px; z-index: var(--z-skip);
  display: inline-flex; align-items: center; min-height: var(--em-control-min);
  padding: 13px 22px;
  background: var(--em-action-primary); color: var(--em-action-primary-text);
  border: var(--em-border-width) solid var(--em-action-primary-text);
  border-radius: var(--em-radius);
  font-size: var(--em-text-label); font-weight: var(--p-weight-semi);
  letter-spacing: var(--p-ls-wide); text-transform: uppercase;
  transform: translateY(-250%);
  transition: transform .2s ease;
}
.em-skip:focus-visible { transform: translateY(0); color: var(--em-action-primary-text); }

/* Unavailability is opacity plus pointer-events, never [disabled]: a disabled
   control cannot take focus, so a keyboard user cannot ask why it is off. */
[aria-disabled="true"] {
  opacity: var(--em-action-disabled-opacity);
  pointer-events: none;
}

/* Anything the page scrolls to must clear the fixed header. */
:target,
section[id] { scroll-margin-top: calc(var(--em-header-height) + 12px); }


/* ————————————————————— 3 · Reduced motion —————————————————————

   THE POLICY, NOT A KILL SWITCH.

   This file deliberately does NOT carry a blanket
   `@media (prefers-reduced-motion: reduce) { * { transition: none !important } }`.

   That rule is the common pattern and it is the wrong one here, for two
   reasons the build has already proved:

     1 · Specificity. A base rule of equal weight beats an override in a media
         query, because a media query adds no specificity. A blanket cancel
         written with !important wins that fight — and then wins fights it was
         never meant to enter, including transitions whose `transitionend` a
         script is waiting on.

     2 · It cancels motion that carries MEANING. The search results foot bar's
         shortlist shelf must still open under `reduce`; it just arrives
         instead of growing. A blanket zero makes the shelf's height change
         instantaneous AND kills the visibility hand-off that goes with it.

   THE RULE: declare motion only where it is wanted.

       @media not all and (prefers-reduced-motion: reduce) {
         .thing { transition: transform var(--em-duration-base) var(--em-ease-soft); }
       }

   `not all and (… reduce)` rather than `(… no-preference)`, so a browser that
   has never heard of the feature keeps the motion. Under `reduce` there is
   then nothing to override, because there was never anything declared.

   `motion.css` implements this for the site's reveal system; every component
   stylesheet follows the same shape. See MOTION-SYSTEM.md.

   One exception is permitted and only one: where a transition must still run
   under `reduce` but faster, state the duration, never `none` —
   `transition-duration: 0s` — because `visibility` is a DISCRETE property and
   flips at the halfway mark of whatever duration it is given.                */