/* ==========================================================================
   LawFiq — Base layer
   Fonts, reset, typography, links, focus, forms, layout primitives.
   Logical properties throughout: this file must never assume a direction.
   ========================================================================== */

/* --------------------------------------------------------------------
   Self-hosted variable fonts
   -------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand wordmark on the Arabic pages: a 3 KB static instance of Source
   Serif 4 at weight 600 holding only the six letters of "LawFiq". The Arabic
   pages have no other Latin serif text, so the 122 KB variable file is not
   loaded there (the English pages keep the full face). */
@font-face {
  font-family: "Source Serif 4 Brand";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/source-serif-4-brand-600.woff2") format("woff2");
  unicode-range: U+0046, U+004C, U+0061, U+0069, U+0071, U+0077;
}

/* Language switch on the English pages: the glyphs of "العربية" only (5 KB)
   instead of the full Almarai 400 file. */
@font-face {
  font-family: "Almarai Switch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/almarai-switch-400.woff2") format("woff2");
  unicode-range: U+0627, U+0628, U+0629, U+0631, U+0639, U+0644, U+064A;
}

@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/amiri-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

/* Arabic headings: one face for every weight. Amiri Bold carries all display
   text on the Arabic pages, so mapping the whole weight range to the 700 file
   means a heading, pull-quote or link set at 400 or 500 never fetches the
   second 108 KB Amiri file. The plain "Amiri" family (400 and 700) remains
   for the two places that want true Regular: the English Mediation mark and
   the Insights reading mark. */
@font-face {
  font-family: "Amiri Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/amiri-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/amiri-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/almarai-300-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/almarai-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/almarai-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}

/* --------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
  /* When the viewport is taller than the page, let the closing section
     absorb the slack — its own ground extends to meet the footer, so no
     bare body background ever shows between them. */
  display: flex;
  flex-direction: column;
}

main > :last-child {
  flex-grow: 1;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-navy);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg);  line-height: var(--leading-snug); }
h6 { font-size: var(--text-md);  line-height: var(--leading-snug); }

p {
  max-width: var(--width-prose);
}

.text-muted {
  color: var(--color-ink-muted);
}

/* Eyebrow — small caps label above headings. In Arabic, uppercase and
   tracking do not exist: the token resets tracking, weight carries it. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink); /* small text: the AA-safe gold */
}

/* --------------------------------------------------------------------
   Links
   -------------------------------------------------------------------- */
a {
  color: var(--color-action);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-action-deep);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------
   Focus — the plaque signature: a square, offset single rule.
   Never remove focus; only style it.
   -------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: var(--radius-none);
}

/* --------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  z-index: var(--z-skip-link);
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-navy);
  color: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-paper);
  outline-color: var(--color-navy);
}

/* --------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--width-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}



/* --------------------------------------------------------------------
   Form foundations
   -------------------------------------------------------------------- */
label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  margin-block-end: var(--space-2);
}

input,
select,
textarea {
  font: inherit;
  color: var(--color-ink);
  inline-size: 100%;
  min-block-size: 48px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-paper);
  border: var(--hairline) solid var(--color-ink-muted);
  border-radius: var(--radius-none);
  transition: border-color var(--duration-fast) var(--ease-out);
}

textarea {
  min-block-size: 8rem;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-navy);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--color-navy);
  outline-offset: 2px;
}

/* Validation styling is driven by aria-invalid (see forms.css), so the
   visible state and the announced state can never disagree. */

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

legend {
  display: block;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  margin-block-end: var(--space-2);
}

::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}

/* --------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection {
  background-color: var(--color-navy);
  color: var(--color-paper);
}

/* --------------------------------------------------------------------
   Reduced motion — motion is a courtesy, never a requirement
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------
   Print — a restrained paper treatment for the legal pages, the
   accessibility statement and future Insights articles. Navigation,
   ornament, forms and calls to action fall away; the text remains.
   -------------------------------------------------------------------- */
@media print {
  @page {
    margin: 18mm;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
    line-height: 1.5;
  }

  .utility-bar,
  .nav,
  .menu-button,
  .nav-overlay,
  .header .cta,
  .skip-link,
  .quick-exit,
  .breadcrumbs,
  .cta-band,
  .related,
  .next-strip,
  .book,
  .page-hero__lattice,
  .hero__lattice,
  .faculty__lattice,
  .page-hero__rule,
  .page-hero__actions,
  .footer__brand-mark,
  footer nav,
  .footer__links,
  .print-hide {
    display: none !important;
  }

  .header {
    border-block-end: 1px solid #000;
    padding-block-end: 4mm;
    margin-block-end: 8mm;
  }

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

  .page-hero,
  .section,
  .section--mist,
  .section--navy,
  .page-hero--navy,
  .page-hero--deep,
  .page-hero--mist {
    background: transparent !important;
    color: #000 !important;
    border: 0;
    padding-block: 6mm;
  }

  .page-hero__inner {
    padding-block: 0;
  }

  .section__head {
    margin-block-end: 6mm;
  }

  h1, h2, h3, h4,
  .page-hero__title,
  .page-hero__lead,
  .ledger dt,
  .ledger dd,
  .prose p,
  .note p,
  .text-muted,
  .eyebrow,
  .section--navy h2,
  .section--navy h3,
  .section--navy p {
    color: #000 !important;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  p, li, dd, dt {
    orphans: 3;
    widows: 3;
  }

  .note,
  .ledger > div,
  .doc-meta {
    break-inside: avoid;
  }

  .note {
    border: 1px solid #000;
  }

  .faq details {
    border-block-start: 1px solid #000;
  }

  /* Open every disclosure so the printed page is complete */
  .faq details:not([open]) > *:not(summary) {
    display: block;
  }

  .faq summary::after {
    display: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Show destinations for external links; internal ones stay clean */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  .footer {
    background: transparent !important;
    color: #000 !important;
    padding-block: 6mm 0;
    border-block-start: 1px solid #000;
    font-size: 9pt;
  }

  .footer a,
  .footer__wordmark,
  .footer__tagline,
  .footer__heading,
  .footer__legal-text,
  .footer__bottom {
    color: #000 !important;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
    padding-block-end: 4mm;
  }

  .footer__bottom {
    border-block-start: 0;
  }
}

/* --------------------------------------------------------------------
   Motion — a restrained layer, progressive enhancement only.

   The root carries .js-motion only when a tiny head script has run AND
   the visitor has not asked for reduced motion; main.js later reveals
   [data-reveal] elements as they enter the viewport and cancels the
   safety timer that would otherwise drop the class. Without JavaScript
   nothing here applies and every element is simply visible. Only
   opacity and transform move; nothing triggers layout.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Section reveals: a single element, or the children of a group */
  .js-motion [data-reveal]:not([data-reveal="group"]),
  .js-motion [data-reveal="group"] > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 560ms var(--ease-out),
                transform 560ms var(--ease-out);
  }

  .js-motion [data-reveal].is-revealed:not([data-reveal="group"]),
  .js-motion [data-reveal="group"].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Small related groups settle one after another, briefly */
  .js-motion [data-reveal="group"] > :nth-child(2) { transition-delay: 70ms; }
  .js-motion [data-reveal="group"] > :nth-child(3) { transition-delay: 140ms; }
  .js-motion [data-reveal="group"] > :nth-child(4) { transition-delay: 210ms; }
  .js-motion [data-reveal="group"] > :nth-child(5) { transition-delay: 280ms; }
  .js-motion [data-reveal="group"] > :nth-child(n + 6) { transition-delay: 350ms; }

  /* Image-led heroes: the photograph settles into its mat. The words
     beside it are never animated. */
  @keyframes lawfiq-hero-in {
    from {
      opacity: 0;
      transform: scale(1.025);
    }
  }

  .js-motion .hero__media img,
  .js-motion .page-hero__media img {
    animation: lawfiq-hero-in 820ms var(--ease-out) backwards;
  }

  /* Girih lattices only appear; they never move or rotate */
  @keyframes lawfiq-fade-in {
    from {
      opacity: 0;
    }
  }

  .js-motion .hero__lattice,
  .js-motion .page-hero__lattice,
  .js-motion .faculty__lattice {
    animation: lawfiq-fade-in 900ms var(--ease-out) 150ms backwards;
  }

  /* Card lift: two pixels, only where the whole card is the link */
  .entry-card {
    transition: border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .entry-card:hover {
      transform: translateY(-2px);
    }
  }
}