/* =====================================================================
   Maweidak — shared site header
   =====================================================================
   Every landing page used to carry its own header, and they had drifted
   badly: index.html had the full navbar, six other pages had four bare
   links with no logo, no language toggle and no sign-up button, and
   dental.html -- the page shared into dental groups -- had no navigation
   at all. Someone landing on any of those from search or WhatsApp had no
   route to register without going back to the home page first.

   This file is the single source of truth for the header's styling. The
   markup lives inline in each page (see _apply_nav.py) rather than being
   injected by JavaScript, so crawlers see the links and there is no
   flash of an unstyled page on load.

   The custom properties below are re-declared, not inherited: the
   sub-pages have their own :root blocks and not all of them define the
   full brand palette. Declaring them here keeps the header identical
   everywhere regardless of what the host page happens to define.
   ===================================================================== */

.site-nav {
  --nav-navy: #0A2342;
  --nav-gold: #C9A84C;
  --nav-gold-dark: #A88930;

  position: fixed; top: 0; inset-inline: 0; z-index: 1000;
  background: rgba(10, 35, 66, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 168, 76, .2);
}

.site-nav__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
  height: 68px;
}

/* Brand ------------------------------------------------------------- */
.site-nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-nav__logo-icon { width: 34px; height: 34px; flex-shrink: 0; }
.site-nav__logo-icon svg { width: 100%; height: 100%; display: block; }
.site-nav__logo-text { font-size: 1.15rem; font-weight: 800; color: var(--nav-gold); letter-spacing: -.3px; }

/* The two groups: navigation in the middle, actions at the end. The
   spacer is what keeps them apart without depending on the number of
   links, so adding or removing one never re-balances the bar. */
.site-nav__spacer { flex: 1; }

.site-nav__links { display: flex; align-items: center; gap: 2px; }
.site-nav__actions { display: flex; align-items: center; gap: 8px; }

.site-nav__link {
  padding: 8px 11px; border-radius: 8px;
  font-size: .87rem; font-weight: 600; white-space: nowrap;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  transition: background .15s, color .15s;
}
.site-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.site-nav__link.is-current { color: var(--nav-gold); }

.site-nav__lang {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; font-size: .8rem; font-weight: 700; font-family: inherit;
  white-space: nowrap;
}
.site-nav__lang:hover { background: rgba(255, 255, 255, .16); }

/* Actions ----------------------------------------------------------- */
/* Three voices, deliberately unequal:
     filled gold  -> register a clinic   (the action that earns money)
     outlined     -> log in              (both audiences, secondary)
     plain text   -> language
   There used to be a fourth, an outlined "Book now" pointing at the same
   URL as the patient entry inside the login menu. Two outlined buttons
   beside the filled one flattened the hierarchy and said the same thing
   twice, so the booking link now lives only in the menu -- where its
   subtitle can actually explain it -- and the outline it used to wear was
   given to the menu button instead. The patient's own call to action
   still sits in the hero, which is where a first-time visitor meets it. */
.site-nav__cta {
  padding: 9px 15px; border-radius: 10px;
  font-size: .85rem; font-weight: 800; white-space: nowrap;
  text-decoration: none; transition: background .15s, transform .15s;
  background: var(--nav-gold); color: var(--nav-navy);
}
.site-nav__cta:hover { background: var(--nav-gold-dark); transform: translateY(-1px); }

/* Login menu --------------------------------------------------------
   One entry, two destinations. Doctors and clinic admins share a single
   login page (it routes by the role in the token), and patients sign in
   and sign up inside the patient app itself -- so the five "log in as X"
   links this replaces were really only ever two URLs. Labelling them by
   who the visitor is, rather than by system, is what makes one entry
   enough. */
.site-nav__menu { position: relative; }
.site-nav__menu-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  background: none; font-family: inherit;
  border: 1.5px solid rgba(201, 168, 76, .55);
  font-size: .85rem; font-weight: 800; color: var(--nav-gold);
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.site-nav__menu-btn:hover {
  border-color: var(--nav-gold); background: rgba(201, 168, 76, .12);
}
.site-nav__menu-btn::after {
  content: "▾"; font-size: .82rem; opacity: .85; line-height: 1;
  transition: transform .15s;
}
.site-nav__menu.is-open .site-nav__menu-btn::after { transform: rotate(180deg); }

.site-nav__menu-panel {
  display: none;
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  min-width: 220px; padding: 6px;
  background: #12325C; border: 1px solid rgba(201, 168, 76, .28);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.site-nav__menu.is-open .site-nav__menu-panel { display: block; }

.site-nav__menu-item {
  display: block; padding: 9px 11px; border-radius: 8px;
  color: #fff; text-decoration: none; font-size: .87rem; font-weight: 700;
}
.site-nav__menu-item:hover { background: rgba(255, 255, 255, .09); }
.site-nav__menu-item small {
  display: block; margin-top: 2px;
  font-size: .72rem; font-weight: 500; color: rgba(255, 255, 255, .55);
}

/* Mobile ------------------------------------------------------------- */
.site-nav__toggle {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.site-nav__toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 1024px) {
  .site-nav__toggle { display: flex; margin-inline-start: auto; }
  .site-nav__spacer { display: none; }

  /* The drawer is two wrapped rows of the header's own flex line, not a
     floating panel.
     The previous attempt positioned both blocks `absolute; top: 100%`
     and then set the second one back to `static` to make it follow the
     first. That does not do what it reads like: `static` takes the block
     out of the absolute stack and puts it back into the flow of
     .site-nav__inner -- a 68px-tall flex ROW -- so the login links
     rendered inside the bar, on top of the logo, while the nav links sat
     underneath in their own layer. Wrapping is what actually stacks
     them: each block claims a full line, so they queue up in order and
     the bar grows to fit. It also sidesteps the backdrop-filter trap on
     .site-nav entirely, since nothing here is positioned any more. */
  .site-nav__inner { flex-wrap: wrap; height: auto; min-height: 68px; }

  .site-nav__links,
  .site-nav__actions {
    display: none;
    flex-basis: 100%;
    flex-direction: column; align-items: stretch;
    gap: 6px;
  }
  .site-nav.is-open .site-nav__links {
    display: flex;
    border-top: 1px solid rgba(201, 168, 76, .2);
    padding-top: 10px;
  }
  .site-nav.is-open .site-nav__actions { display: flex; padding-bottom: 14px; }

  .site-nav__link { padding: 11px 12px; }
  .site-nav__cta { text-align: center; padding: 12px; }
  /* In the drawer there is room to show both destinations outright, so
     the button that opens the dropdown is dropped and its panel is
     flattened into the list. */
  .site-nav__menu-btn { display: none; }
  .site-nav__menu-panel {
    position: static; display: block; min-width: 0;
    background: none; border: 0; box-shadow: none;
    padding: 0; padding-inline-start: 10px;
  }
}

/* Pages that were not offset for a fixed header before now need to be. */
body.has-site-nav { padding-top: 68px; }

/* Language visibility ------------------------------------------------
   Each page carries its own .ar/.en rules, and they were losing. A rule
   like `.en { display: none }` has exactly the same specificity as a
   later `.hero-pill { display: inline-block }`, so the pill won on
   source order and the guide rendered its badges in Arabic AND English
   side by side.

   Hiding is therefore forced here, from the last stylesheet on the page,
   and split by language so the two rules can never fight each other.
   Showing is deliberately NOT forced: an element that is visible keeps
   whatever display type its own component rule gives it, so an
   inline-block pill stays an inline-block pill.

   This also covers dental.html, which has no .ar/.en rules of its own. */
html:not([lang="en"]) .en,
html:not([lang="en"]) .en-inline { display: none !important; }
html[lang="en"] .ar,
html[lang="en"] .ar-inline { display: none !important; }