/* ==========================================================================
   LawFiq — Components
   Header, navigation, buttons, footer. Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Buttons
   Square corners, generous padding, 48px minimum target.
   Primary acts (royal blue); secondary frames (hairline navy) —
   the plaque again.
   -------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-none);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.button--primary {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: #FFFFFF;
}

.button--primary:hover {
  background-color: var(--color-action-deep);
  border-color: var(--color-action-deep);
  color: #FFFFFF;
}

.button--secondary {
  background-color: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.button--secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-paper);
}

/* On navy surfaces the secondary button inverts */
.button--on-navy {
  border-color: var(--color-on-navy-muted);
  color: var(--color-on-navy);
}

.button--on-navy:hover {
  background-color: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-navy);
}

/* --------------------------------------------------------------------
   Header — two-tier masthead.
   Tier 1: navy utility strip (For Institutions · language). Quietly
   present, clearly secondary.
   Tier 2: white brand bar (logo · primary nav · consultation CTA).
   -------------------------------------------------------------------- */
.header {
  position: relative;
  z-index: var(--z-header);
  background-color: var(--color-paper);
  border-block-end: var(--hairline) solid var(--color-hairline);
}

.utility-bar {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
  min-block-size: 44px;
}

.utility-bar a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--color-on-navy-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.utility-bar a:hover {
  color: var(--color-gold-bright);
}

.utility-bar__divider {
  inline-size: var(--hairline);
  block-size: 1rem;
  background-color: var(--color-hairline-navy);
}

/* Language switch keeps its own name: Arabic label on the English site
   must render in the Arabic face, and vice versa. Naskh needs a size up
   at small label sizes to stay legible. */
.lang-switch {
  font-family: "Almarai Switch", "Segoe UI", Tahoma, Arial, sans-serif; /* subset first, system fallbacks only */
  font-size: var(--text-sm);
}

html[lang="ar"] .lang-switch {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

/* Brand bar */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-block-size: 84px;
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-navy);
}

.brand:hover {
  color: var(--color-navy);
}

.brand__mark {
  inline-size: 44px;
  block-size: 44px;
  flex-shrink: 0;
}

/* The wordmark is the brand itself: always the Latin serif identity,
   on both language versions (client decision 2026-09-01). */
.brand__wordmark {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  /* The approved horizontal lockup separates mark and wordmark with a fine
     gold rule; the same rule here keeps the header true to it. */
  padding-inline-start: var(--space-3);
  padding-block: 0.1em;
  border-inline-start: 1px solid var(--color-gold);
}

/* The wordmark keeps dir="ltr" for the Latin identity, so on the Arabic
   pages its inline-start is the far side; move the rule next to the mark. */
html[dir="rtl"] .brand__wordmark {
  padding-inline-start: 0;
  border-inline-start: 0;
  padding-inline-end: var(--space-3);
  border-inline-end: 1px solid var(--color-gold);
}

.nav-overlay .brand__wordmark {
  border-color: var(--color-gold-bright);
}

/* Two-tone wordmark: the "Fiq" is gold, matching the approved logo lockup
   (Law in the ink colour, Fiq in brand gold). Gold on light is AA for large
   text (3.39:1); on navy contexts it lifts to the brighter navy gold. */
.brand__wordmark__accent {
  color: var(--color-gold);
}

.nav-overlay .brand__wordmark__accent,
.footer__wordmark .brand__wordmark__accent {
  color: var(--color-gold-bright);
}

/* Arabic pages: the wordmark is the only Latin serif text, so it uses the
   six-letter brand subset (base.css) rather than the full variable face. */
html[lang="ar"] .brand__wordmark,
html[lang="ar"] .footer__wordmark {
  /* System fallbacks only: naming the full web face here would make the
     browser fetch it as the interim font while the subset loads. */
  font-family: "Source Serif 4 Brand", Georgia, "Times New Roman", serif;
}

/* Primary navigation (desktop) */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-8));
  list-style: none;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-action);
}

.nav__link[aria-current] {
  color: var(--color-navy);
  border-block-end-color: var(--color-gold);
}

/* Menu button (mobile) — a labelled control, not a bare glyph */
.menu-button {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  background: none;
  border: var(--hairline) solid var(--color-navy);
  border-radius: var(--radius-none);
  cursor: pointer;
}

.menu-button__glyph {
  display: inline-block;
  inline-size: 16px;
}

.menu-button__glyph::before,
.menu-button__glyph::after {
  content: "";
  display: block;
  block-size: 2px;
  background-color: currentColor;
  margin-block: 4px;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Mobile navigation overlay — full-height navy panel */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-overlay);
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
  overflow-y: auto;
}

.nav-overlay.is-open {
  display: block;
}

.nav-overlay__inner {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding-block: var(--space-5) var(--space-10);
}

.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 64px;
  margin-block-end: var(--space-10);
}

.nav-overlay .brand,
.nav-overlay .brand:hover {
  color: var(--color-on-navy);
}

.nav-overlay__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-on-navy);
  background: none;
  border: var(--hairline) solid var(--color-hairline-navy);
  border-radius: var(--radius-none);
  cursor: pointer;
}

.nav-overlay__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-overlay__link {
  display: block;
  padding-block: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--color-on-navy);
  text-decoration: none;
  border-block-end: var(--hairline) solid var(--color-hairline-navy);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-overlay__link:hover {
  color: var(--color-gold-bright);
}

.nav-overlay__secondary {
  margin-block-start: var(--space-8);
}

.nav-overlay__secondary-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-on-navy-muted);
  margin-block-end: var(--space-2);
}

.nav-overlay__secondary a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-md);
  color: var(--color-on-navy);
  text-decoration: none;
}

.nav-overlay__secondary a:hover {
  color: var(--color-gold-bright);
}

.nav-overlay__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.nav-overlay__lang {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  align-self: flex-start;
  font-size: var(--text-md);
  color: var(--color-on-navy-muted);
  text-decoration: none;
}

.nav-overlay__lang:hover {
  color: var(--color-gold-bright);
}

/* Below lg: desktop nav and utility strip yield to the menu button.
   The brand bar also becomes a compact sticky header that slides away
   while the reader scrolls down and returns on the first scroll up, so the
   menu and the consultation link stay one gesture away on long pages
   without permanently occupying screen space. Quick exit (bottom edge) is
   untouched. Keyboard focus inside the header always reveals it. */
@media (max-width: 1023px) {
  .nav,
  .header .cta,
  .utility-bar {
    display: none;
  }

  .header {
    position: sticky;
    inset-block-start: 0;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  }

  .header.is-scrolled {
    box-shadow: 0 1px 10px rgb(11 31 58 / 0.08);
  }

  .header.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
  }

  /* In-page anchors land below the header when it is showing */
  html {
    scroll-padding-block-start: 72px;
  }

  .menu-button {
    display: inline-flex;
  }

  .brand-bar {
    min-block-size: 68px;
  }

  .brand__mark {
    inline-size: 38px;
    block-size: 38px;
  }

  .brand__wordmark {
    font-size: 1.375rem;
  }
}

@media (min-width: 1024px) {
  .nav-overlay {
    display: none !important;
  }
}

/* --------------------------------------------------------------------
   Section primitives — shared vertical rhythm for every page.
   (Moved here from home.css: the whole site uses them.)
   -------------------------------------------------------------------- */
.section {
  padding-block: var(--space-section);
}

.section__head {
  max-inline-size: 44rem;
  margin-block-end: var(--space-12);
}

.section__head .eyebrow {
  margin-block-end: var(--space-4);
}

.section__head h2 {
  margin-block-end: var(--space-4);
}

/* --------------------------------------------------------------------
   Breadcrumbs — one quiet line of orientation on inner pages.
   -------------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--text-xs);
}

.breadcrumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: inherit;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: var(--space-2);
  opacity: 0.5;
}

.breadcrumbs [aria-current] {
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Quick exit — a discreet, always-visible escape hatch on sensitive
   pages. Clicking replaces the page (and this history entry) with a
   neutral website. Styled to be findable without shouting.
   -------------------------------------------------------------------- */
.quick-exit {
  position: fixed;
  z-index: var(--z-header);
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  color: var(--color-paper);
  background-color: var(--color-navy);
  border: var(--hairline) solid var(--color-hairline-navy);
  border-radius: var(--radius-none);
  cursor: pointer;
  box-shadow: 0 2px 12px rgb(11 31 58 / 0.25);
}

/* Keep focused and scrolled-to elements clear of the fixed button:
   keyboard focus and in-page anchors scroll into view above it. */
html:has(.quick-exit) {
  scroll-padding-block-end: 5rem;
}

/* On phones the button becomes a full-width bar along the bottom edge and
   the page reserves its height, so contact details, form controls, error
   text and CTAs can always be scrolled clear of it. */
@media (max-width: 599px) {
  .quick-exit {
    inset-inline: 0;
    inset-block-end: 0;
    inline-size: 100%;
    justify-content: center;
    box-shadow: 0 -2px 12px rgb(11 31 58 / 0.25);
  }

  html:has(.quick-exit) body {
    padding-block-end: 44px;
  }
}

.quick-exit:hover {
  background-color: var(--color-navy-deep);
}

/* --------------------------------------------------------------------
   CTA band — closing invitation on inner pages.
   (Moved here from home.css.)
   -------------------------------------------------------------------- */
.cta-band {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
  border-block-end: var(--hairline) solid var(--color-hairline-navy);
}

.cta-band__inner {
  padding-block: clamp(4.5rem, 3.5rem + 4vw, 7rem);
  max-inline-size: 42rem;
}

.cta-band .eyebrow {
  color: var(--color-gold-bright);
  margin-block-end: var(--space-4);
}

.cta-band h2 {
  color: #FFFFFF;
  margin-block-end: var(--space-4);
}

.cta-band__lead {
  color: var(--color-on-navy-muted);
  margin-block-end: var(--space-8);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.cta-band__alt {
  font-size: var(--text-sm);
  color: var(--color-on-navy-muted);
}

.cta-band__alt a {
  color: var(--color-on-navy);
  font-weight: 600;
  text-decoration: none;
}

.cta-band__alt a:hover {
  color: var(--color-gold-bright);
}

/* --------------------------------------------------------------------
   Footer — navy ground, hairline structure, full brand lockup.
   -------------------------------------------------------------------- */
.footer {
  background-color: var(--color-navy-deep);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy-muted);
  padding-block: var(--space-20) var(--space-8);
}

.footer a {
  color: var(--color-on-navy);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer a:hover {
  color: var(--color-gold-bright);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--space-12) var(--space-10);
  padding-block-end: var(--space-16);
}

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer__links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  font-size: var(--text-sm);
}

@media (max-width: 639px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
}

.footer__brand-mark {
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-5);
}

.footer__wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-on-navy);
  line-height: 1;
  margin-block-end: var(--space-2);
}

.footer__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-gold-bright);
  max-inline-size: 24rem;
}

html[lang="ar"] .footer__tagline {
  font-style: normal;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-on-navy);
  margin-block-end: var(--space-4);
}

.footer address {
  font-style: normal;
}

.footer__contact-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer__legal-text {
  font-size: var(--text-sm);
  max-inline-size: 34rem;
}

.footer__legal-text + .footer__legal-text {
  margin-block-start: var(--space-3);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: var(--hairline) solid var(--color-hairline-navy);
  font-size: var(--text-xs);
}


/* Legal links — one quiet row above the company line */
.footer__legal {
  flex-basis: 100%;
}

.footer__legal ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  font-size: var(--text-xs);
  font-weight: 500;
}