/* ══════════════════════════════════════════════════════════════════════
   SAUDI NATIONAL DAY — the greeting block, on its own
   ══════════════════════════════════════════════════════════════════════

   GENERATED — do not edit. Run `python tools/build_nd_greet.py` instead.

   For a page that should carry the occasion but keep its own design: the two
   greeting lines and the 96, and nothing else. No header repaint, no
   background scene, no gold frame. Load it INSTEAD of national-day.css, with

       <script src="assets/national-day.js" data-parts="greeting"></script>

   which is the same switch as everywhere else — flip NATIONAL_DAY to false in
   that one file and this page loses the greeting along with the rest.

   Rules below are extracted verbatim from national-day.css, so the block is
   the same object on every page. The palette is the only thing written here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── extracted from national-day.css ── */
html.nd-on .header-inner > .nd-greet { order: 3; }
/* ── 3. The greeting, in the header beside the name ──────────────────────
   It previously sat in its own row, centred, with a rule flexing between the
   two scripts. Marooned mid-header like that it read as filler. Sitting at
   the end of the brand row it belongs to something. */
html.nd-on .nd-greet {
  /* THE BLOCK'S SIZE. Everything in the greeting is expressed against
     this: the Arabic line takes it, the English line 0.62 of it, and
     the 96 twice it — which is what makes the numeral cover both lines.
     Change this one value to scale the whole block. */
  --nd-greet-size: calc(clamp(14px, 1.6vw, 22px) * var(--nd-fit, 1));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;    /* air around the numeral - at 3px it read as part of the
                  Arabic line rather than a mark of its own */
  /* This auto margin is what makes the nav lean against the hospital name,
     the way departments.html does it. An auto margin eats the row's free
     space before justify-content ever sees it, so all of the slack collects
     HERE — in front of the greeting — and the name and nav pack together at
     the start instead of drifting apart.

     It was briefly removed because the greeting used to sit AFTER the
     language select, where the same margin left the select stranded between
     it and the nav. With the select ordered last that no longer happens: the
     greeting and the select travel to the end together, with their own
     gutter between them. */
  margin-inline-start: 0;
  /* direction:ltr so "to the right of it" means the same thing in the Arabic
     layout as in the English one. Each line carries its own dir attribute, so
     the Arabic still shapes correctly inside this box. */
  direction: ltr;
}
html.nd-on .nd-greet-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* not stretch — see the note on .nd-name */
  /* Tight: the 96 is sized FROM this block's height, so the leading here
     is what decides how tall the numeral has to be to cover both lines. */
  line-height: 1.02;
}
/* The 96th National Day, in the dental hero's gold — same gradient, same
   200% band, same 5s ease-in-out sweep, so the two pages glow alike.

   Sized in CSS as a multiple of the Arabic line beside it, so it tracks that
   text at every width and in every language. An earlier version measured the
   block height in JS and set the size from it; that ran inside the header-fit
   loop, which resizes those same lines, so the two kept resizing each other.

   Weight 700 rather than 900: at this size the heavy cut closed up the
   counters in the 9 and the 6 and read as a blob once the sheen crossed it. */
/* The mark is the PHONE's stand-in for the wording and the numeral, and it is
   hidden everywhere until a mobile rule asks for it. It lives in the markup on
   every page, so this must be in the SHARED sheet: written only in the
   greeting-only sheet, it left the lockup sitting in the middle of offers.html's
   desktop header, which loads this file instead. */
html.nd-on .nd-lockup { display: none; }
html.nd-on .nd-96 {
  color: var(--nd-gold);
  font-weight: 700;
  /* `normal`, not a number. The numeral is painted by a gradient with
     background-clip:text, and a background is only painted inside the
     element's own box — so any part of a glyph hanging outside that box
     gets no paint and simply disappears. A ratio smaller than the font's
     own ascent+descent shears the digits: .70 cut their feet, and a flat
     1 can still clip the tops in a face whose metrics run tall.
     `normal` uses the font's own metrics, which contain every glyph by
     definition, so it cannot clip in any face. It costs nothing here:
     .nd-greet centres its items, so a taller box does not move the
     numeral. Tightness comes from --nd-greet-size, never from here. */
  line-height: normal;
  letter-spacing: -.045em;
  font-size: calc(var(--nd-greet-size) * 1.7);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  flex: 0 0 auto;
}
/* The guard is not optional. A transparent text-fill with no background-clip
   support renders the numeral INVISIBLE rather than unstyled, so browsers
   without it must keep the solid gold above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* The Arabic greeting glows with the same gold as the 96 and the dental
     hero. The English line beside it stays solid #fff: white on a coloured
     panel has to hold its contrast, and a gradient-filled white would drop it
     below legible the moment the dark stop crossed a letter. */
  html.nd-on .nd-greet .ar,
  html.nd-on .nd-96 {
    background: linear-gradient(100deg, var(--nd-shine-1) 10%, var(--nd-shine-2) 42%, var(--nd-shine-3) 50%, var(--nd-shine-2) 58%, var(--nd-shine-1) 90%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 8px rgba(var(--nd-deep-rgb), .9)) drop-shadow(0 0 18px rgba(var(--nd-deep-rgb), .7));
    animation: ndShine 5s ease-in-out infinite;
  }
  /* Arabic and Urdu read right-to-left, so the light travels the other way —
     the same correction dental makes on its hero. */
  html.nd-on .nd-greet .ar { animation-direction: reverse; }
  /* only background-position animates — compositor-cheap, no layout, no paint
     of anything but the clipped band */
  @keyframes ndShine {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
  }
}
html.nd-on .nd-greet .ar {
  color: var(--nd-gold);
  font-size: var(--nd-greet-size);
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
html.nd-on .nd-greet .en {
  color: #fff;                     /* full strength, never a tinted overlay */
  font-size: calc(var(--nd-greet-size) * .62);   /* matchPair re-ranges it at runtime */
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  margin-top: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
@media (max-width: 900px) {
  html.nd-on .nd-greet { margin-inline-start: 0; justify-content: center; width: 100%; }
  html.nd-on .header-inner > .nd-greet { order: 4; }
}
/* ── 9. Mobile ──────────────────────────────────────────────────────
   The header ships in TWO shapes on this site and they need opposite
   treatment, which is why one set of rules fixed neither:

   · offers.html has NO hamburger. Its own <style> keeps the nav visible and
     full width — but the base sheet still sets `position:fixed` on .site-nav
     under 640px and that page never resets it, so the row was lifted out of
     the flow and drawn ON TOP of <main>: the عزنا بطبعنا mark was hidden
     behind it, and a second gold rule floated under a slab.
   · index / departments / services DO have a .nav-toggle, where that fixed
     panel is right and only needs to open below the taller themed header.

   national-day.js looks for the button and tags <html> nd-notoggle or
   nd-hastoggle, so each shape gets its own rules.

   Shared: the base assigns order 1/2/3 to the logo, the language box and the
   toggle, so the appended greeting defaults to order 0 and jumps ABOVE the
   hospital name unless it is given one of its own. */
@media (max-width: 640px) {
  html.nd-on .header-inner > .nd-greet {
    order: 4;
    width: 100%;
    justify-content: center;
    margin-inline-start: 0;
    padding-top: 4px;
  }
}
/* ── 9c. THE PHONE CARRIES THE LOCKUP ────────────────────────────

   Every arrangement of the wording and the numeral on a phone is a
   compromise. In the masthead row there is no width for it at a legible size;
   on a row of its own it reads as a stranded band; under the name it is still
   a whole extra line. The official lockup says the same thing in the width
   that is actually there, so below 900px that is what the header carries.

   This is the SHARED sheet on purpose. Written in the greeting-only one it
   reached departments, services and obgyn and not offers, which loads this
   file — and a second copy here would be the same split in the other
   direction. The greeting sheet extracts what follows.

   Nothing is deleted: the same block is the full greeting again the moment
   the header is wide enough, and all of it hangs off .nd-on, so the switch
   takes the lockup and the room made for it away together. */
@media (max-width: 900px) {
  /* @greet-export */
  html.nd-on.nd-hdr-wraps .nd-greet-lines,
  html.nd-on.nd-hdr-wraps .nd-96 { display: none !important; }
  html.nd-on.nd-hdr-wraps .nd-lockup {
    display: block;
    /* THE line that stopped it being squashed. A flex item shrinks by default,
       and on a replaced element the browser takes that out of the WIDTH while
       the height below stays put - so a tight row did not make the mark small,
       it made it flat. It keeps its own proportions now and the row gives
       instead, which is what the two rules further down are for. */
    flex: 0 0 auto;
    /* Height drives it and the width follows the artwork, so the lockup can
       never be squashed. The lower bound keeps SAUDI NATIONAL DAY from
       dissolving on a 360px screen; the upper stops it dominating the row on a
       tablet, where the wording takes over again anyway. --nd-fit is in there
       so the header fitter can still rescue a row that will not close. */
    height: calc(clamp(28px, 9.5vw, 46px) * var(--nd-fit, 1));
    width: auto;
  }
  /* @greet-export
     Sized to its CONTENT and centred in the gap. `width: 100%` further up is
     right for the wording, which does take a line of its own on a phone; the
     lockup does not, and flex alone cannot undo a width. */
  html.nd-on.nd-hdr-wraps .header-inner > .nd-greet {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    margin-inline: auto;
    padding-top: 0;
  }
  /* @greet-export
     18px between items is a desktop masthead's gap; on a 358px phone row it is
     36px of the width the mark needs. */
  html.nd-on.nd-hdr-wraps .header-inner { column-gap: 10px !important; }
  /* @greet-export
     And the select gives up a little padding. offers.html carries its own
     inline `padding:6px 12px` on that element, which nothing but !important
     can reach. */
  html.nd-on.nd-hdr-wraps .header-inner > div select,
  html.nd-on.nd-hdr-wraps .lang-wrap select {
    padding: 5px 8px !important;
    font-size: 13px !important;
  }
  /* @greet-export
     The select gives up its auto margin. Flexbox splits a row's free space
     between every auto margin on it, so with the select still holding one the
     space divided three ways and the lockup sat a third of the way over
     instead of midway. The two either side of the lockup are now the only
     ones, which is what centres it between the name and the language box. */
  html.nd-on.nd-hdr-wraps .header-inner > div,
  html.nd-on.nd-hdr-wraps .lang-wrap { margin-inline-start: 0; }
}
/* @greet-skip
   Placement, which is the one thing every page does differently — these are
   offers' own stacked numbers, and the greeting-only sheet writes its own. */
@media (max-width: 640px) {
  html.nd-on.nd-hdr-wraps .header-inner > .nd-greet { order: 2; }
}
/* ── the always-visible nav on the GREETING pages ──────────────────────────
   Wrapped in its own @media so the marker below sits on the RULE, which is
   where build_nd_greet.py looks: it recurses into a media block and tests each
   inner prelude, so a marker on the wrapper is never seen. */
@media (max-width: 640px) {
  /* @greet-export
     The base sheet lifts .site-nav out of the flow here
     (`position:fixed; inset:56px 0 auto 0`) because it expects a hamburger to
     open it. obgyn has no .nav-toggle AND carries `display:flex` inline, which
     defeats the base's `display:none` - so its nav rendered as a floating bar
     across the top of the page with the links running off the side.

     The full sheet already fixes this for offers.html. This copy is exported
     into national-day-greet.css, which is the sheet obgyn and the six
     department pages actually load.

     UNSCOPED deliberately - no html.nd-on. Per this sheet's own split, a
     layout fix to the stock page is not seasonal and must survive the switch,
     so turning the season off returns the colours to normal and leaves the nav
     in the flow.

     Undoes ONLY the positioning. The full sheet's nowrap/gap/padding are not
     copied: the department pages have their own working nav layout at <=880px
     and forcing nowrap could push links off a narrow screen. */
  html.nd-notoggle .site-nav {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    /* The base gives the logo order:1 and the language box order:2; .site-nav
       has none, so it defaults to 0 and sorts ABOVE the hospital name. That is
       what put obgyn's links at the top of its header. pediatrics only escaped
       it because its own sheet sets order:3 at <=880px. */
    order: 5;
  }
}

/* ── light-header overrides (AFTER the extraction, so they win) ── */
/* ── palette and scale, for a LIGHT header ──────────────

   SIZE. The block is the same object as on offers.html, but it does not RENDER
   the same size there: that header is crowded, so fitHeaderRow() shrinks
   everything to about 0.9 to hold one row. This header has room, so nothing
   shrinks and the same CSS comes out visibly larger. The scale below is the
   difference, applied once here rather than left to look like a bug.

   COLOUR. Green and gold, and nothing else — no navy, no gradient, no outline.
   The previous attempt filled the numeral with a gold gradient and outlined it
   in green: at this size the outline closed up the counters of the 9 and the
   6, the light stops of the gradient washed out against cream, and the result
   read as muddy rather than metallic. A flat fill has none of those problems.

   #9a6b12 is the site's own gold darkened until it is legible: #c19a3e measures
   2.6:1 on the cream header, under the 3:1 that large bold text needs, while
   this is 4.5:1 and still reads as the same metal. The wording takes the
   National Day green, 13:1. */
html.nd-on .nd-greet {
  --nd-greet-size: calc(clamp(13px, 1.45vw, 20px) * var(--nd-fit, 1));
}
html.nd-on {
  --nd-green: #0C442F;
  --nd-gold:  #b08428;
}

/* A little air between the two lines. The shared sheet sets them tight because
   the offers header is crowded; this one has room, and at this size the pair
   read as one block without it.

   #b08428 is the site's own gold, deepened only as far as legibility needs:
   3.27:1 on the cream header, which clears the 3:1 that large bold text
   requires, where #c19a3e itself is 2.6:1 and does not. */
html.nd-on .nd-greet-lines { line-height: 1.18; }
html.nd-on .nd-greet .en { margin-top: 3px !important; }

/* Both lines lose the gradient, the glow and the shadow — the sheen is a
   dark-ground effect, and on cream its light stops wash out to page colour. */
html.nd-on .nd-greet .ar,
html.nd-on .nd-greet .en {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
/* The colours come AFTER that shared rule, not before it. Written above, the
   group's own `color` — same specificity, same !important, later in the file —
   silently won, and the English rendered the same dark green as the Arabic
   while appearing to be set to something lighter. */
html.nd-on .nd-greet .ar,
html.nd-on .nd-greet .en { color: var(--nd-green) !important; }

/* The numeral: flat gold, no outline and no gradient. */
html.nd-on .nd-96 {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--nd-gold) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* ── the current-page nav pill ──────────────────────────────────
   services.html carries this in its own stylesheet, which is why the hub's
   pill is green while every department page's stayed navy — so refreshing into
   a department read as the theme switching off.

   It lives HERE, in the light-header overrides, and deliberately NOT in
   national-day.css. That sheet is loaded in full by offers.html, whose header
   is dark green: a green pill on it is invisible, which is exactly what
   happened when this rule was first written into the shared sheet and
   overrode its gold one by source order. The shared sheet keeps its gold pill
   for the green header; this sheet is only ever loaded by a page with a cream
   header, where white on #0C442F measures about 13:1. */
html.nd-on .site-nav a.active,
html.nd-on .site-nav a[aria-current="page"] {
  background: var(--nd-green, #0C442F) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(12, 68, 47, .3) !important;
}


/* ── placement ─────────────────────────────────────────────────
   Centred in the gap between the nav and the language select. Flexbox splits
   a row's free space equally between every auto margin on the main axis, so
   auto on both sides settles the block midway between its neighbours without
   a pixel value that would need re-tuning per language.

   BOTH sides auto also makes it immune to the direction trap: .nd-greet sets
   `direction: ltr` on itself so the 96 stays right of the words, and a single
   logical margin would resolve against THAT direction rather than the row's
   — which is what silently mirrored this rule on the offers page. */
html.nd-on .nd-greet { margin-inline: auto; }

/* Centred between the nav and the language box, matching offers.html.
   The greeting's own two auto margins are not enough here: this page's
   .site-nav already carries `margin-left:auto`, so three autos share the free
   space and the block ends up two-thirds of the way over, sitting against the
   language box. A fourth auto on the language box balances the pair either
   side of the greeting, and it lands in the middle. */
html.nd-on .lang-wrap,
html.nd-on .header-inner > div { margin-inline-start: auto; }

/* The extracted sheet brings `order: 3` with it, which is how the block is
   placed on offers.html — there it is APPENDED to the header and has to be
   ordered back into position. Here it is inserted straight into the DOM
   between the nav and the language select, and its neighbours carry no
   order at all, so an order of 3 would send it past the select to the very
   end of the row. Back to the default. */
html.nd-on .header-inner > .nd-greet { order: 0; }

/* On a phone the block cannot stay in the masthead row — there is no space
   left between the name and the language box — so it takes a row of its own,
   centred, the way it does on offers.html.

   That is only possible on a header that WRAPS. departments and services wrap
   theirs at 880px and obgyn at 640px; above those widths the row is a single
   fixed line, and a block dropped into it would squeeze the nav rather than
   move below it. So the greeting is hidden by default here and shown only
   under .nd-hdr-wraps, which national-day.js sets by reading the header’s own
   computed flex-wrap. Naming the pages instead would be wrong — silently —
   the first time a new page links this sheet.

   The size steps down with the viewport rather than staying at the desktop
   scale: a phone row is about a third the width, and the pair plus the numeral
   have to clear it without the fitter having to rescue them. */
@media (max-width: 900px) {
  html.nd-on .nd-greet { display: none !important; }

  /* On .header-inner > .nd-greet, which is a class more specific than either
     of the extracted rules above - and it names WIDTH. national-day.css sets
     `width: 100%` on the greeting below 900px, correctly, because on
     offers.html the block does take a line of its own; extracted into here it
     made the block span the row, and its justify-content then centred the mark
     in it with every other item pushed onto a line of its own. flex alone does
     not undo that: flex-basis:auto defers to width. */
  /* WHAT the block becomes on a phone is in national-day.css and arrives
     above, extracted. Only two things are decided here, because only two
     things differ on these pages: that a header which does not wrap keeps it
     hidden altogether, and where it sits in a row whose nav takes a full line
     of its own at order 3. */
  html.nd-on.nd-hdr-wraps .header-inner > .nd-greet { display: flex !important; }

  /* BETWEEN the name and the language box. Order decides that, not the DOM:
     the select holds the end of the row, so without an order of its own it
     packs before anything ordered after it and the lockup lands on the far
     side of it. */
  html.nd-on.nd-hdr-wraps .header-inner > .nd-greet { order: 1; }
  html.nd-on.nd-hdr-wraps .lang-wrap,
  html.nd-on.nd-hdr-wraps .header-inner > div { order: 2; }

  /* The room comes from the language box, which is the one item in the row
     with padding to spare - the name is artwork and the lockup is the point. */
  html.nd-on.nd-hdr-wraps .lang-wrap select {
    padding: 6px 8px;
    font-size: 13px;
  }
}