/* ==========================================================================
   HQUQ — the Mustansiriya layer
   Loaded after style.css on every platform page. The law as architecture:
   lapis-glazed navy fields, gilt inlay, baked-brick grounds, a plain
   modern display face, a girih star lattice drawn on one 8px brick module.
   style.css keeps its structure; this file owns tokens, type and finish.
   ========================================================================== */

/* Fonts are linked from each page's <head>, not @imported: an @import here
   makes the browser fetch this file, parse it, and only then start on the
   font CSS — one extra round trip before the first paint. */

:root {
  /* lapis */
  --lapis-950: #000a1a;
  --primary-dark: #001229;
  --primary-navy: #001a38;
  --secondary-navy: #0a2e5c;
  --lapis-700: #123f78;
  /* gilt */
  --accent-gold: #d4af37;
  --accent-gold-bright: #e9c46a;
  --accent-gold-dark: #a8841f;
  --gold-ink: #7a5c0e;          /* gold as text on light grounds (AA) */
  --gilt-line: rgba(212, 175, 55, 0.34);
  /* brick grounds */
  --bg-surface: #efeeea;
  --bg-card: #fcfcfa;
  --bg-sunk: #e5e3dd;
  --text-main: #0d1b2e;
  --heading: #001229;
  --text-muted: #4f5c72;
  --text-light: #a9bad3;
  --border-color: #d9d6ce;
  --border-strong: #bfbab0;
  --border-dark: #0d3160;

  --shadow-sm: 0 1px 2px rgba(0, 18, 41, 0.05), 0 2px 8px -2px rgba(0, 18, 41, 0.06);
  --shadow-md: 0 10px 24px -12px rgba(0, 18, 41, 0.22);
  --shadow-lg: 0 22px 32px -20px rgba(0, 18, 41, 0.38);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --brick: 8px;

  --font-display: 'IBM Plex Sans Arabic', 'Readex Pro', sans-serif;
  --font-ibm: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  --font-tajawal: 'Readex Pro', 'IBM Plex Sans Arabic', sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* girih lattice tile: eight-point stars joined edge to edge */
  --girih-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Cpath d='M32 0v15M32 49v15M0 32h15M49 32h15M0 0l8 8M64 0l-8 8M0 64l8-8M64 64l-8-8M8 8h7.5M8 8v7.5M56 8h-7.5M56 8v7.5M8 56h7.5M8 56v-7.5M56 56h-7.5M56 56v-7.5'/%3E%3C/svg%3E");
  /* running-bond brick course, the base course of the building */
  --kufic-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16' viewBox='0 0 40 16' fill='none' stroke='%23d4af37' stroke-width='1'%3E%3Cpath d='M0 .5h40M0 8h40M0 15.5h40M10 .5V8M30 .5V8M0 8v7.5M20 8v7.5M40 8v7.5'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  --bg-surface: #06193a;
  --bg-card: #0b2550;
  --bg-sunk: #031330;
  --text-main: #e4e9f1;
  --heading: #f6f1e4;
  --text-muted: #a9b5c8;
  --text-light: #a9b5c8;
  --border-color: #1a3a68;
  --border-strong: #2a4f85;
  --gold-ink: #e9c46a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 22px 32px -20px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
*, *::before, *::after { font-family: var(--font-ibm); }
body { font-feature-settings: 'tnum' 0; }
/* The universal font rule above would otherwise reach the <span>s inside
   headings (i18n text lives in spans) and set them in the text face. */
:where(h1, h2, .hero-title, .section-title) :not(i) { font-family: inherit; }
h1, h2,
.hero-title, .section-title, .modal-card h2, .pm-page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}
h3, h4, h5, h6 { font-weight: 600; letter-spacing: 0; }
.data-table td, .data-table th, .stat-val, .stat-info-num, .badge-uid,
.article-count-tag, time, [data-num] { font-variant-numeric: tabular-nums; }

::selection { background: rgba(212, 175, 55, 0.38); color: inherit; }
input, textarea { caret-color: var(--accent-gold-dark); }
html { scrollbar-color: var(--border-strong) transparent; }
html[data-theme="dark"] { scrollbar-color: #2a4266 transparent; }
a { text-underline-offset: 0.28em; }
:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }

body { background-color: var(--bg-surface); }

/* --------------------------------------------------------------------------
   Header: a lapis lintel with a gilt rule
   -------------------------------------------------------------------------- */
.site-header {
  background:
    linear-gradient(0deg, rgba(0, 10, 26, 0.0), rgba(0, 10, 26, 0.0)),
    var(--primary-dark);
  border-bottom: 1px solid var(--gilt-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 10px 30px -18px rgba(0, 0, 0, 0.6);
}
.site-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -4px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-gold) 20%, var(--accent-gold) 80%, transparent);
  opacity: 0.35;
  pointer-events: none;
}
.header-inner { max-width: 1320px; padding: 10px 24px; }
.brand-badge-wrap { gap: 12px; }
.brand-title-main { font-family: var(--font-ibm); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; }
.brand-title-sub { color: var(--accent-gold-bright); font-size: 0.72rem; opacity: 0.9; }
.syndicate-logo-circle,
.syndicate-official-logo img { box-shadow: none; outline: 1px solid var(--gilt-line); outline-offset: 1px; }

.nav-link {
  position: relative;
  color: #b9c6d9;
  border-radius: var(--radius-sm);
  font-weight: 500;
  padding: 9px 12px;
}
.nav-link i { color: var(--accent-gold); opacity: 0.85; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-link.active { color: #fff; background: transparent; }
.nav-link.active::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 2px;
  height: 2px;
  background: var(--accent-gold);
}

.lang-switch { border-color: var(--gilt-line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); }
.lang-switch-btn { color: #c5d0e0; font-weight: 600; }
.lang-switch-btn[aria-pressed="true"] { background: var(--accent-gold); color: var(--primary-dark); }
.theme-toggle, .lang-toggle { border-radius: var(--radius-sm) !important; }

/* --------------------------------------------------------------------------
   Buttons: gilt, lapis, outline — square-cut, never gradient
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: 0;
  min-height: 40px;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-gold {
  background: var(--accent-gold);
  color: var(--primary-dark);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.btn-gold:hover { background: var(--accent-gold-bright); transform: none; }
.btn-navy {
  background: var(--primary-navy);
  color: #fff;
  border: 1px solid var(--primary-navy);
}
.btn-navy:hover { background: var(--secondary-navy); border-color: var(--secondary-navy); }
.btn-outline { border-color: var(--border-strong); color: var(--heading); background: transparent; }
.btn-outline:hover { border-color: var(--primary-navy); background: rgba(0, 26, 56, 0.04); }
.btn-ghost { border-radius: var(--radius-sm) !important; }

html[data-theme="dark"] .btn-navy { background: #13305a; border-color: #28497a; color: #fff; }
html[data-theme="dark"] .btn-navy:hover { background: #1a3d70; }
html[data-theme="dark"] .btn-outline { color: var(--heading); border-color: var(--border-strong); }
html[data-theme="dark"] .btn-outline:hover { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.06); }

/* --------------------------------------------------------------------------
   Page banners (.hero-card on inner pages): a lapis panel under a lattice
   -------------------------------------------------------------------------- */
.hero-card {
  background:
    var(--girih-gold) repeat 0 0 / 64px 64px,
    linear-gradient(160deg, var(--secondary-navy) 0%, var(--primary-dark) 62%, var(--lapis-950) 100%);
  background-blend-mode: soft-light, normal;
  border-radius: var(--radius-md);
  border: 1px solid var(--gilt-line);
  box-shadow: var(--shadow-lg);
  padding: clamp(28px, 4vw, 44px);
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary-dark) 25%, rgba(0, 18, 41, 0.72) 60%, rgba(0, 18, 41, 0.25));
  pointer-events: none;
  z-index: 0;
}
html[dir="ltr"] .hero-card::before { background: linear-gradient(270deg, var(--primary-dark) 25%, rgba(0, 18, 41, 0.72) 60%, rgba(0, 18, 41, 0.25)); }
.hero-card::after { display: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.35; color: #fff; }
.hero-subtitle { color: #c8d4e5; }
.hero-header-badge {
  border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--gilt-line);
  font-weight: 600;
}
.stat-val { color: var(--accent-gold-bright); font-weight: 600; }
.stat-lab { color: #b3c1d5; }

/* --------------------------------------------------------------------------
   Surfaces: cards and panels sit on hairline seams, not floating shadows
   -------------------------------------------------------------------------- */
.card-panel, .law-card, .stat-card, .data-table-container, .account-section,
.dir-lawyer-card, .featured-lawyer-card, .lawyer-showcase-card, .step-card, .aud-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.law-card:hover, .dir-lawyer-card:hover, .lawyer-showcase-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.section-title { color: var(--heading); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); gap: 12px; }
.section-title i { color: var(--accent-gold); }

.law-cat-badge, .ui-tag {
  border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold-ink);
  font-weight: 600;
}
.article-count-tag { color: var(--text-muted); }
.badge-uid {
  border-radius: var(--radius-sm);
  font-family: var(--font-ibm);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.hero-header-badge, .ui-pill, .ui-badge { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label { font-weight: 600; color: var(--heading); }
.form-control {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  min-height: 42px;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.form-control:hover { border-color: #a39e93; }
.form-control:focus {
  outline: none;
  border-color: var(--accent-gold-dark);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.24);
}
.form-control::placeholder { color: #7b8497; }
html[data-theme="dark"] .form-control { background: #081427; border-color: var(--border-strong); color: var(--text-main); }
html[data-theme="dark"] .form-control::placeholder { color: #8391a8; }
.search-box-wrap { border-radius: var(--radius-md); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.data-table th {
  background: var(--bg-sunk);
  color: var(--heading);
  font-weight: 600;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-strong);
}
.data-table td { border-bottom: 1px solid var(--border-color); }
.data-table tr:hover td { background: rgba(212, 175, 55, 0.05); }
html[data-theme="dark"] .data-table th { background: #0a1a31; }

/* --------------------------------------------------------------------------
   Modals and toasts
   -------------------------------------------------------------------------- */
.modal-card, .custom-modal-card, .consult-request-card, .cmdk-dialog {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  border-top: 3px solid var(--accent-gold);
  box-shadow: var(--shadow-lg);
}
.modal-overlay, .custom-modal-overlay { background: rgba(0, 10, 26, 0.62); backdrop-filter: blur(3px); }
.app-toast { border-radius: var(--radius-md); }

/* --------------------------------------------------------------------------
   Footer: the building's base course
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background:
    var(--girih-gold) repeat 0 0 / 64px 64px,
    var(--lapis-950);
  background-blend-mode: soft-light, normal;
  border-top: 0;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 16px;
  background: var(--kufic-band) repeat-x center / 40px 16px, var(--primary-dark);
  border-top: 1px solid var(--gilt-line);
  opacity: 0.8;
}
.site-footer::after {
  content: '';
  position: absolute;
  inset: 16px 0 0;
  background: linear-gradient(180deg, rgba(0, 10, 26, 0.9), rgba(0, 10, 26, 0.97));
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }
.footer-inner { padding-top: 64px; }
.site-footer h4, .site-footer h3 { font-family: var(--font-display); color: var(--accent-gold-bright) !important; font-weight: 600; }
.site-footer a { transition: color 160ms var(--ease-out); }
.site-footer a:hover { color: #fff !important; }
.footer-copyright { border-top-color: rgba(212, 175, 55, 0.16) !important; color: #7f91ab; }

/* --------------------------------------------------------------------------
   Phone tab bar
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app-tabbar {
    background: var(--lapis-950);
    border-top: 1px solid var(--gilt-line);
  }
  .app-tab { color: #8fa1bb; font-weight: 500; position: relative; }
  .app-tab.active { color: var(--accent-gold-bright); }
  .app-tab.active::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 30%;
    height: 2px;
    background: var(--accent-gold);
  }
  .site-header::after { display: none; }
}

/* --------------------------------------------------------------------------
   Empty, loading, skeleton
   -------------------------------------------------------------------------- */
.ui-empty, .pm-empty, .section-empty { border-radius: var(--radius-md); border-color: var(--border-strong); }
.ui-skeleton, .ui-skeleton-line, .ui-skeleton-avatar {
  background: linear-gradient(90deg, var(--bg-sunk) 0%, var(--bg-card) 50%, var(--bg-sunk) 100%);
  background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* The Latin wordmark: kept in the text face at a wider tracking. */
.brand-wordmark { font-family: var(--font-ibm) !important; font-weight: 700; letter-spacing: 0.08em; }

/* Office dashboard bento: tiles sit on the sunk brick ground, not a tan slab. */
.pm-bento { background: var(--bg-sunk); border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.pm-bento-tile { border-radius: var(--radius-sm); }
html[data-theme="dark"] .pm-bento { background: var(--bg-sunk); }