/* Shared legal-profile design system.
   Identical across the six legal-profile sites except for the
   per-site accent block marked below. Keep every other rule byte-identical;
   see each site's AGENTS.md before editing. */

:root {
  color-scheme: light dark;

  /* ---- per-site accent (the ONLY block that differs between the six sites) ---- */
  --accent: #9a4b21;
  --accent-dark: #73320f;
  --accent-wash: rgba(154, 75, 33, .11);
  --accent-ring: rgba(154, 75, 33, .35);
  /* ---- neutrals ---- */
  --ink: #11243a;
  --ink-soft: #38506b;
  --paper: #f7f3eb;
  --paper-lift: #fdfbf7;
  --paper-deep: #ebe2d3;
  --white: #fffdf9;
  --line: rgba(17, 36, 58, .15);
  --shadow: 0 18px 55px rgba(25, 38, 54, .11);

  /* ---- semantic surfaces ---- */
  --card-bg: rgba(255, 253, 249, .68);
  --button-bg: rgba(255, 255, 255, .55);
  --menu-bg: var(--white);
  --portrait-line: rgba(17, 36, 58, .1);
  --link-hover: var(--ink);

  /* inverted chips: skip link and primary buttons */
  --invert-bg: #11243a;
  --invert-fg: #fffdf9;

  /* contact panel */
  --panel-bg: #11243a;
  --panel-fg: #fffdf9;
  --panel-fg-soft: #cfdae6;
  --panel-btn-line: rgba(255, 255, 255, .28);
  --panel-btn-bg: rgba(255, 255, 255, .08);

  --radius: 4px;
  --max: 1100px;
  --sans: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* Dark theme. It applies when the visitor's system asks for it unless they
   chose light with the header toggle, and whenever they chose dark. CSS cannot
   share one declaration block between a media query and a selector, so the
   token list appears twice below: keep both copies identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ---- per-site accent, dark ---- */
    --accent: #d89a72;
    --accent-dark: #d89a72;
    --accent-wash: rgba(216, 154, 114, .10);
    --accent-ring: rgba(216, 154, 114, .38);
    /* ---- neutrals ---- */
    --ink: #e7eaed;
    --ink-soft: #a6b3bf;
    --paper: #141a1f;
    --paper-lift: #171e24;
    --paper-deep: #1f2830;
    --white: #1b232a;
    --line: rgba(231, 234, 237, .16);
    --shadow: 0 18px 55px rgba(0, 0, 0, .5);

    --card-bg: rgba(27, 35, 42, .72);
    --button-bg: rgba(255, 255, 255, .06);
    --menu-bg: #1b232a;
    --portrait-line: rgba(231, 234, 237, .14);
    --link-hover: var(--ink);

    --invert-bg: #e7eaed;
    --invert-fg: #141a1f;

    --panel-bg: #1f2830;
    --panel-fg: #e7eaed;
    --panel-fg-soft: #a6b3bf;
    --panel-btn-line: rgba(231, 234, 237, .22);
    --panel-btn-bg: rgba(255, 255, 255, .05);
  }

  /* the portrait's warm paper backing is wrong on a dark ground */
  :root:not([data-theme="light"]) .portrait-wrap::before { opacity: .5; }
}

:root[data-theme="dark"] {
  /* ---- per-site accent, dark ---- */
  --accent: #d89a72;
  --accent-dark: #d89a72;
  --accent-wash: rgba(216, 154, 114, .10);
  --accent-ring: rgba(216, 154, 114, .38);
  /* ---- neutrals ---- */
  --ink: #e7eaed;
  --ink-soft: #a6b3bf;
  --paper: #141a1f;
  --paper-lift: #171e24;
  --paper-deep: #1f2830;
  --white: #1b232a;
  --line: rgba(231, 234, 237, .16);
  --shadow: 0 18px 55px rgba(0, 0, 0, .5);

  --card-bg: rgba(27, 35, 42, .72);
  --button-bg: rgba(255, 255, 255, .06);
  --menu-bg: #1b232a;
  --portrait-line: rgba(231, 234, 237, .14);
  --link-hover: var(--ink);

  --invert-bg: #e7eaed;
  --invert-fg: #141a1f;

  --panel-bg: #1f2830;
  --panel-fg: #e7eaed;
  --panel-fg-soft: #a6b3bf;
  --panel-btn-line: rgba(231, 234, 237, .22);
  --panel-btn-bg: rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .portrait-wrap::before { opacity: .5; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 0, var(--accent-wash), transparent 28rem),
    linear-gradient(180deg, var(--paper), var(--paper-lift) 38rem);
  font: 16px/1.7 var(--sans);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

a:hover { color: var(--link-hover); }

a:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  inset-inline-start: 1rem;
  top: -5rem;
  padding: .65rem 1rem;
  color: var(--invert-fg);
  background: var(--invert-bg);
}

.skip-link:focus { top: 1rem; }

.site-shell {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
}

.monogram {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  font: 700 1rem/1 var(--sans);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

/* The header mark is favicon.svg used as a mask and filled with --ink, so it
   follows the page theme - including a theme chosen with the toggle. An <img>
   of the SVG would follow only the system theme and vanish when they differ. */
.brand-icon {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: var(--ink);
  -webkit-mask: url("/favicon.svg?v=20260922") center / contain no-repeat;
  mask: url("/favicon.svg?v=20260922") center / contain no-repeat;
}

.nav-menu { margin-inline-start: auto; }

.menu-toggle { display: none; }

.nav-menu > .site-nav { display: flex; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.5rem);
  font-size: .9rem;
}

.site-nav a {
  color: var(--ink-soft);
  padding-block: .3rem;
  border-bottom: 1.5px solid transparent;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.language-link {
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}

.theme-toggle {
  display: inline-grid;
  place-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); }

.theme-toggle:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 4px;
}

/* Show the moon while light is showing and the sun while dark is showing. */
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .85rem;
  color: var(--accent-dark);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 1.5px;
  background: var(--accent);
}

h1, h2 {
  font-family: var(--serif);
  text-wrap: balance;
}

h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.35rem, 4.6vw, 3.35rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.hero-role {
  margin: 1.1rem 0 0;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--accent);
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.55;
}

.hero-summary {
  max-width: 67ch;
  margin: 1.5rem 0 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--button-bg);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

.button.primary {
  color: var(--invert-fg);
  border-color: var(--invert-bg);
  background: var(--invert-bg);
}

.availability {
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
}

.portrait-wrap {
  position: relative;
  margin: 0;
}

.portrait-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -10px -10px auto;
  width: 62%;
  height: 62%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  opacity: .55;
}

.portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--portrait-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section {
  padding-block: clamp(2.8rem, 5.5vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(150px, .6fr) 1.7fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.section h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.sec-num {
  display: block;
  margin-bottom: .5rem;
  color: var(--accent);
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .2em;
}

.section-intro {
  max-width: 65ch;
  margin: .2rem 0 0;
  color: var(--ink-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.card h3 {
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  color: var(--accent-dark);
  border-bottom: 1px solid var(--line);
  font: 700 .74rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.card li::marker { color: var(--accent); }

.card ul, .case-list {
  margin: 0;
  padding-inline-start: 1.2rem;
}

.card li + li { margin-top: .48rem; }

.wide { grid-column: 1 / -1; }

.credentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.credential {
  padding: 1.15rem 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.credential strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent-dark);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -.02em;
}

.credential p { margin: 0; color: var(--ink-soft); }

.case-list {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.case-list li {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.4fr;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.case-list span { color: var(--ink-soft); }

.contact-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  color: var(--panel-fg);
  border-radius: var(--radius);
  background: var(--panel-bg);
}

.contact-panel h2 { margin-bottom: .6rem; }
.contact-panel p { max-width: 55ch; margin: 0; color: var(--panel-fg-soft); }
.contact-panel .button { color: var(--panel-fg); border-color: var(--panel-btn-line); background: var(--panel-btn-bg); }
.contact-panel .button.primary { color: var(--panel-bg); border-color: var(--panel-fg); background: var(--panel-fg); }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem 3rem;
  color: var(--ink-soft);
  font-size: .82rem;
}


/* ---- Articles: latest post by this lawyer on legumlawfirm.co ---- */

.article-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
}

.art-date {
  display: grid;
  place-content: center;
  min-width: 76px;
  padding: .65rem .5rem;
  border-radius: var(--radius);
  background: var(--accent-wash);
  text-align: center;
  line-height: 1.15;
}

.art-date .d {
  display: block;
  color: var(--accent-dark);
  font-family: var(--serif);
  font-size: 1.5rem;
}

.art-date .m {
  display: block;
  color: var(--accent-dark);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.art-kicker {
  margin: 0 0 .4rem;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.article-feature h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.article-feature h3 a { color: inherit; text-decoration: none; }
.article-feature h3 a:hover { color: var(--accent-dark); text-decoration: underline; }

.art-excerpt { margin: .6rem 0 0; color: var(--ink-soft); font-size: .92rem; }

.art-more {
  display: inline-block;
  margin-top: .9rem;
  font-size: .86rem;
  font-weight: 650;
  text-decoration: none;
}

.art-more:hover { text-decoration: underline; }

.art-all { margin: 1rem 0 0; font-size: .87rem; }

[dir="rtl"] body { font-family: Tahoma, "Noto Naskh Arabic", "Segoe UI", sans-serif; font-size: 17px; line-height: 1.85; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .article-feature h3 { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", Tahoma, serif; letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] h1 { max-width: 16ch; font-size: clamp(2.1rem, 4.2vw, 3rem); }
[dir="rtl"] .eyebrow, [dir="rtl"] .card h3, [dir="rtl"] .sec-num, [dir="rtl"] .art-kicker, [dir="rtl"] .art-date .m { letter-spacing: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 780px) {
  .site-header { position: relative; }
  .monogram { font-size: .86rem; }
  .menu-toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font: inherit;
    list-style: none;
  }
  .menu-toggle::-webkit-details-marker { display: none; }
  .menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav-menu.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-menu.open .menu-toggle span:nth-child(2) { opacity: 0; }
  .nav-menu.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu > .site-nav {
    position: absolute;
    z-index: 5;
    top: 67px;
    inset-inline: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--menu-bg);
    box-shadow: var(--shadow);
  }
  .nav-menu.open > .site-nav { display: flex; }
  .site-nav a {
    min-height: 44px;
    padding: .65rem .8rem;
    border-radius: 9px;
    text-decoration: none;
  }
  .site-nav a:hover { background: var(--paper); }
  .site-nav .language-link { margin-top: .3rem; text-align: center; }
  .site-nav .theme-toggle { align-self: center; width: 44px; height: 44px; margin-top: .3rem; }
  .hero { grid-template-columns: 1fr; padding-top: 2.5rem; }
  .portrait-wrap { width: min(78vw, 360px); margin-inline: auto; grid-row: 1; }
  .section-heading, .case-list li { grid-template-columns: 1fr; gap: .65rem; }
  .credentials { grid-template-columns: 1fr; }
  .contact-panel { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .site-shell { width: min(calc(100% - 24px), var(--max)); }
  .cards { grid-template-columns: 1fr; }
  .article-feature { grid-template-columns: 1fr; }
  .wide { grid-column: auto; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-nav, .skip-link, .actions { display: none; }
  .article-feature { box-shadow: none; }
  .site-shell { width: 100%; }
  .hero { padding-block: 2rem; }
  .section { break-inside: avoid; padding-block: 2rem; }
  .portrait { box-shadow: none; }
  .brand-icon { background: #11243a; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}