/* ============================================================
   LUKE & LUKA — THE LAW OFFICE
   site-common.css  ·  REBUILT MASTER — CHROME  ·  v4.0 (review draft)
   ------------------------------------------------------------
   The single shared stylesheet. Styles the canonical header
   component (hub-header-component.html) and every page's chrome:
   tokens, type scale, header, page hero, breadcrumb, footer, FAQ.

   Sourced verbatim (colours intact) from the homepage's modern
   system; token vocabulary unified to Master Reference v1.1 §2–§4;
   .page-hero and .breadcrumb-bar authored from §6.2 (styled nowhere
   before). Retired gradient tokens removed.

   PART 2 (separate block) = inner-page content sections
   (service cards, prose, CTA, related-articles), carried from the
   existing site-common.css. This file is the chrome only.
   ============================================================ */

/* ── 1. DESIGN TOKENS  (Master Reference §2–§4) ─────────────── */
:root{
  /* Navy family */
  --navy:#0B1220;          /* THE ONLY header / hero background — flat, no gradient */
  --navy-mid:#111827;
  --navy-2:#131C2E;        /* mobile nav panel */
  --navy-foot:#070D18;     /* footer */
  /* Accent */
  --gold:#B08D57;
  --gold-light:#C9A96E;
  /* Text */
  --text:#111827;
  --secondary:#4B5563;
  --muted:#6B7280;
  --on-dark:#C8D4E8;
  /* Surfaces & borders */
  --white:#FFFFFF;
  --off:#F8F7F3;           /* warm off-white — primary alternating section bg */
  --surface:#F4EFE5;       /* warm surface — cards, callouts */
  --border:#E5E7EB;
  --border-dk:#D1D5DB;
  /* Links */
  --link:#0B1220;
  --link-hover:#B08D57;
  --link-accent:#B08D57;
  /* Semantic — legal content distinctions only */
  --semantic-ok:#1A7A40;
  --semantic-stop:#C62A2A;
  --semantic-caution:#7A4700;
  /* Fonts */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* Canonical type scale — §3.2 (ten values) */
  --text-2xs:0.625rem;
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1.0625rem;
  --text-md:1.125rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:clamp(1.7rem,2.5vw,2.2rem);
  --text-3xl:clamp(2rem,3.5vw,2.8rem);
  --text-hero:clamp(2.6rem,5.5vw,4.2rem);
  /* Layout */
  --container:1180px;
  --radius:3px;
  --radius-md:8px;
  --transition:0.2s ease;
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.75;
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;             /* refinement */
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:700;line-height:1.18;color:var(--text)}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
img{max-width:100%;height:auto;display:block}
/* tabular figures where digits should align (tables, addresses, stats) */
table,address,.tnum{font-variant-numeric:tabular-nums}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:600px){.container{padding:0 20px}}

/* ── 3. SKIP LINK & EYEBROW ─────────────────────────────────── */
.skip-link{
  position:absolute;top:-99px;left:16px;
  background:var(--gold);color:var(--navy);
  padding:8px 16px;font-size:var(--text-sm);font-weight:600;
  z-index:999;border-radius:0 0 4px 4px;text-decoration:none;transition:top 0.15s;
}
.skip-link:focus{top:0}
.eyebrow{
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:14px;
}

/* ── 4. HEADER — canonical component (§4, §6.2) ─────────────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);border-bottom:1px solid rgba(255,255,255,0.07)}
.header-inner{display:flex;align-items:stretch;justify-content:space-between;height:68px}
.logo-link{display:flex;align-items:center;text-decoration:none;padding:12px 0}
.logo-emblem{height:44px;width:auto;display:block;object-fit:contain;flex-shrink:0}  /* rectangular emblem — EVERY header */
.nav-desk{display:flex;align-items:center}
.nav-desk a{
  display:flex;align-items:center;height:100%;padding:0 13px;
  font-size:0.78rem;font-weight:500;color:rgba(255,255,255,0.62);
  text-decoration:none;letter-spacing:0.01em;
  border-bottom:2px solid transparent;transition:color 0.15s,border-color 0.15s;
}
.nav-desk a:hover{color:var(--white);border-bottom-color:var(--gold)}
.nav-desk a.active-nav,
.nav-desk a[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)}
.nav-desk .nav-cta{
  background:var(--gold);color:var(--navy);font-weight:600;
  margin-left:10px;padding:0 22px;border-bottom:none;
  letter-spacing:0.03em;border-radius:var(--radius);
}
.nav-desk .nav-cta:hover{background:var(--gold-light);color:var(--navy)}
.nav-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;align-items:center;justify-content:center;align-self:center}
.nav-btn span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform 0.22s,opacity 0.22s;transform-origin:center}
.nav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-mob{display:none;background:var(--navy-2);border-top:1px solid rgba(255,255,255,0.07)}
.nav-mob.is-open{display:block}
.nav-mob a{display:block;padding:14px 32px;font-size:0.88rem;font-weight:500;color:rgba(255,255,255,0.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.15s,background 0.15s}
.nav-mob a:hover{color:var(--white);background:rgba(255,255,255,0.04)}
.nav-mob .nav-cta-m{color:var(--gold);font-weight:600}
@media(max-width:960px){.nav-desk{display:none}.nav-btn{display:flex}}

/* ── 5. BREADCRUMB BAND — authored from §6.2 ────────────────── */
.breadcrumb-bar{background:var(--white);border-bottom:1px solid var(--border)}
.breadcrumb-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 0;font-size:var(--text-xs);letter-spacing:0.02em}
.breadcrumb-nav a{color:var(--secondary);text-decoration:none;transition:color 0.15s}
.breadcrumb-nav a:hover{color:var(--gold)}
.breadcrumb-sep{color:var(--muted)}
.breadcrumb-current{color:var(--text);font-weight:500}

/* ── 6. PAGE HERO — inner pages, authored from §6.2 ─────────────
   Flat #0B1220. No gradient. Cormorant H1 at --text-3xl. ───────── */
.page-hero{background:var(--navy);padding:74px 0 64px}
.page-hero-eyebrow{display:block;font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.page-hero h1{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:700;line-height:1.14;color:var(--white);max-width:20ch}
.page-hero-sub{margin-top:18px;font-size:var(--text-md);line-height:1.7;color:var(--on-dark);max-width:62ch}
@media(max-width:600px){.page-hero{padding:52px 0 44px}}

/* ── 7. FAQ ACCORDION — component JS targets .faq-item / .faq-q ─ */
.faq-section{padding:120px 0;background:var(--off);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.faq-inner{display:grid;grid-template-columns:360px 1fr;gap:80px;align-items:start}
.faq-intro h2{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:700;color:var(--text);line-height:1.22;margin-bottom:20px}
.faq-intro p{font-size:0.9375rem;color:var(--secondary);line-height:1.8}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;background:none;border:none;text-align:left;width:100%;font-family:var(--font-sans);font-size:0.9375rem;font-weight:600;color:var(--text);line-height:1.45;transition:color 0.15s}
.faq-q:hover{color:var(--navy)}
.faq-icon{width:20px;height:20px;flex-shrink:0;color:var(--gold);transition:transform 0.22s}
.faq-item.is-open .faq-icon{transform:rotate(45deg)}
.faq-a{display:none;padding:0 0 22px;font-size:0.9rem;color:var(--secondary);line-height:1.8}
.faq-item.is-open .faq-a{display:block}
.faq-a a{color:var(--navy);font-weight:500}
@media(max-width:860px){.faq-inner{grid-template-columns:1fr;gap:48px}.faq-section{padding:80px 0}}

/* ── 8. FOOTER — identical on every page (§4) ───────────────── */
.site-footer{background:var(--navy-foot);padding:80px 0 0;border-top:1px solid rgba(255,255,255,0.04)}
.footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:64px;padding-bottom:64px}
.f-brand-seal{width:52px;height:52px;border-radius:50%;object-fit:contain;margin-bottom:20px;opacity:0.85}
.f-brand-name{font-family:var(--font-serif);font-size:1.4rem;font-weight:600;color:var(--white);display:block;margin-bottom:4px}
.f-brand-tag{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:20px}
.f-brand-desc{font-size:0.84rem;color:rgba(255,255,255,0.38);line-height:1.75;max-width:300px}
.f-col h4{font-size:0.7rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:18px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-col ul li a{font-size:0.84rem;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.15s}
.f-col ul li a:hover{color:rgba(255,255,255,0.85)}
.f-col address{font-style:normal;font-size:0.84rem;color:rgba(255,255,255,0.45);line-height:1.8}
.f-col address a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.15s}
.f-col address a:hover{color:rgba(255,255,255,0.85)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding:24px 0 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.footer-disclaimer{font-size:0.78rem;color:rgba(255,255,255,0.25);line-height:1.7;max-width:640px}
.footer-links{display:flex;gap:20px;flex-shrink:0}
.footer-links a{font-size:0.78rem;color:rgba(255,255,255,0.3);text-decoration:none;transition:color 0.15s;white-space:nowrap}
.footer-links a:hover{color:rgba(255,255,255,0.6)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}.f-brand{grid-column:1/-1}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:36px}.footer-bottom{flex-direction:column;gap:12px}}

/* ── 9. ACCESSIBILITY & REFINEMENT ──────────────────────────── */
@media(prefers-reduced-motion:reduce){*{transition-duration:0.01ms !important;animation-duration:0.01ms !important;scroll-behavior:auto !important}}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:rgba(176,141,87,0.22);color:var(--text)}
.prose{max-width:70ch}            /* 62–75 char measure, §3.3 */
.prose p+p{margin-top:1.1em}

/* ============================================================
   END CHROME. Part 2 (content sections) appends below in the
   final master: prose blocks, service/feature cards, callouts,
   CTA band, related-article cards — carried from existing
   site-common.css, re-tokenised, retired classes dropped.
   ============================================================ */


/* ============================================================
   PART 2 — INNER-PAGE CONTENT SECTIONS
   Carried from the existing site-common.css §7 (which already
   styles the hub-layout pages), re-tokenised to the canon
   palette. Legacy hero (.page-header), old FAQ, and legacy
   header/footer dropped — the chrome above replaces them.

   MIGRATION NOTE: pages on the old FAQ markup must rename
   .faq-left → .faq-intro and add the .faq-icon SVG so the
   chrome accordion (§7 of the chrome) styles them.
   ============================================================ */

/* Content paragraph scale */
.p-main p, .service-desc p, .section-desc p, .content-text p, .practice-desc {
  font-size: 0.92rem;
  line-height: 1.72;
}
.courts-left p, .dark-section p, .section-body-dark p {
  color: rgba(255, 255, 255, 0.68);
}
.court-info p, .court-name, .forum-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.58);
}
.card-body p, .nri-card p, .service-card p {
  font-size: 0.90rem;
  line-height: 1.68;
}
.c-note, .contact-note { font-size: 0.84rem; }


.intro-section {
  padding: 80px 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 72px;
  align-items: start;
}
.intro-left h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.25;
}
.intro-left p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  max-width: 620px;
  margin-bottom: 16px;
}
.intro-left p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; gap: 48px; }
  .intro-section { padding: 56px 0; }
}

.intro-aside { display: flex; flex-direction: column; gap: 24px; }
.quick-contact {
  background: var(--off);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 26px;
  margin-bottom: 18px;
  border-radius: 3px;
}
.qc-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 16px;
}
.qc-item {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.qc-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.qc-key {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 3px;
}
.qc-val {
  display: block;
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
}
.qc-val a { color: var(--navy); text-decoration: none; font-weight: 600; }
.qc-val a:hover { color: var(--gold); }
.qc-note {
  display: block;
  font-size: 0.76rem;
  color: var(--secondary);
  margin-top: 2px;
}

.related-box {
  background: var(--off);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 3px;
}
.related-box h4 {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}
.related-box ul { list-style: none; padding: 0; margin: 0; }
.related-box li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.related-box li:last-child { border-bottom: none; }
.related-box a {
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
}
.related-box a:hover { color: var(--gold); }

.nri-reach {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 18px 20px;
  border-radius: 0 3px 3px 0;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.75;
}
.nri-reach strong { color: var(--navy); }

.services-section {
  padding: 88px 0;
  background: var(--off);
  border-bottom: 1px solid var(--border);
}
.services-header { margin-bottom: 48px; }
.services-header h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
}
.services-header p {
  font-size: 0.9375rem;
  color: var(--secondary);
  max-width: 580px;
  line-height: 1.8;
}
@media (max-width: 600px) { .services-section { padding: 56px 0; } }

.service-list {
  display: flex;
  flex-direction: column;
}

.service-row {
  display: grid;
  grid-template-columns: 60px 1fr auto 28px;
  gap: 0 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background 0.15s;
  cursor: default;
}
a.service-row { cursor: pointer; }
.service-list > .service-row:first-child,
.service-list > a:first-child { border-top: 1px solid var(--border); }
.service-row::before {
  content: '';
  position: absolute;
  left: -32px; right: -32px; top: 0; bottom: 0;
  background: var(--white);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: -1;
}
a.service-row:hover::before { opacity: 1; }

.s-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--border);
  transition: color 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
a.service-row:hover .s-num { color: var(--gold); }

.s-main h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  transition: color 0.15s;
  line-height: 1.35;
}
a.service-row:hover .s-main h3 { color: var(--navy); }
.s-main p {
  font-size: 0.875rem;
  color: var(--secondary);
  line-height: 1.65;
  margin: 0;
}

.s-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.s-tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--white);
  color: var(--secondary);
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
a.service-row:hover .s-tag {
  background: rgba(176,141,87,0.1);
  color: var(--navy);
  border-color: rgba(176,141,87,0.3);
}

.s-arr {
  font-size: 0.82rem;
  color: var(--border);
  transition: color 0.15s;
  justify-self: end;
  white-space: nowrap;
}
a.service-row:hover .s-arr { color: var(--gold); }

@media (max-width: 800px) {
  .service-row { grid-template-columns: 52px 1fr auto; gap: 0 16px; }
  .s-tags { display: none; }
}
@media (max-width: 560px) {
  .service-row { grid-template-columns: 44px 1fr; gap: 0 12px; }
  .s-arr { display: none; }
}


.contact-strip {
  background: var(--navy-foot);
  padding: 64px 0;
}
.cs-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.cs-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}
.cs-text p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin: 0;
}
.cs-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: center;
}
.cs-email, .cs-phone {
  display: block;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  transition: color 0.15s;
}
.cs-email:hover, .cs-phone:hover { color: var(--gold); }
.cs-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}
.cs-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #25D366;
  color: var(--white);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  width: fit-content;
}
.cs-wa:hover { background: #1ebe5d; color: var(--white); }
@media (max-width: 680px) {
  .cs-inner { grid-template-columns: 1fr; gap: 36px; }
  .contact-strip { padding: 48px 0; }
}

.jurisdiction {
  padding: 40px 0;
  background: var(--navy);
  border-top: 1px solid #2A3347;
}
.jurisdiction-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
.j-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.j-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 820px;
  font-weight: 400;
  margin: 0;
}
.j-text strong { color: var(--white); font-weight: 600; }
@media (max-width: 560px) {
  .jurisdiction-inner { grid-template-columns: 1fr; gap: 12px; }
  .j-label { writing-mode: horizontal-tb; transform: none; }
}

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 18px;
  background: #25D366;
  color: var(--white);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.15s;
}
.whatsapp-link:hover { background: #1ebe5d; color: var(--white); }