/* ============================================================
   LegalAtoms — Blog single template (Foreign-Affairs-modeled)
   Loaded ONLY on blog singles (is_singular('post')), AFTER
   tokens.css + legalatoms-gutenberg.css, so its :root token
   overrides (Libre Caslon fonts, navy liquid-glass) and its
   la-* rules win over the site-wide chrome styles by load order.
   prose.css is dequeued on this template — this sheet owns .la-prose.
   ============================================================ */

/* ---- Token overrides scoped to the blog page (whole document is ours) ---- */
:root {
  /* Clean white hero; the only warmth is the dark cover card's own glow. */
  --gradient-hero:#FFFFFF;
  --gradient-band:radial-gradient(48rem 24rem at 85% 0%, rgba(220,99,48,.20), transparent 55%), linear-gradient(165deg,#20304F 0%,#0F1629 78%);
  --gradient-cta:linear-gradient(105deg,#20304F 0%,#324E82 45%,#BF4E1F 100%);
  --gradient-text:linear-gradient(92deg,#324E82 0%,#BF4E1F 100%);
  /* Wordmark on the navy-tinted glass: deep navy -> coral (light theme). */
  --wordmark-grad:linear-gradient(92deg,var(--la-navy-900) 0%,var(--la-coral-600) 100%);

  --font-display:"Libre Caslon Display",Georgia,"Times New Roman",serif;   /* article title only */
  --font-heading:"Libre Caslon Text",Georgia,"Times New Roman",serif;      /* section headers, wordmark, cards */
  --font-serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;        /* pull-quotes */

  /* article-local */
  --article-measure:46rem;
  --rail-width:320px;
  /* FA-style page frame — masthead + border strips share --glass-bg (a
     translucent navy tint) + blur, so they read as one continuous glass border. */
  --frame-color:var(--la-navy-200);
  --glass-bg:rgba(188,205,233,.58);
  --frame-w:12px;
}

/* ---- Dark mode — net-new token overrides ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-heading:#EEF3FB; --text-body:#C4D0E2; --text-secondary:#9FB2D0; --text-muted:#7E92B4;
  --text-link:#A9C0E6; --text-accent:#F0A87E;
  --surface-page:#0C111E; --surface-subtle:#121A2C; --surface-tint:#16203A; --surface-card:#141E33;
  --la-info-bg:#16203A;
  --border-default:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --focus-ring:0 0 0 3px rgba(147,172,216,.45);
  --gradient-hero:radial-gradient(56rem 30rem at 12% -10%, rgba(68,100,158,.28), transparent 60%), linear-gradient(180deg,#0C111E 0%,#0C111E 100%);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 4px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:0 4px 8px rgba(0,0,0,.4),0 24px 56px rgba(0,0,0,.6);
  --shadow-frame:0 0 0 1px rgba(255,255,255,.08),0 28px 64px rgba(0,0,0,.6);
  --frame-color:var(--la-navy-800);
  --glass-bg:rgba(32,48,79,.5);
  --wordmark-grad:linear-gradient(92deg,#EAF0FA 0%,#F0A87E 100%);
}

/* ---- Base (blog page owns the body) ---- */
body.la-blog{
  margin:0; background:var(--surface-page); color:var(--text-body);
  font:400 1.0625rem/1.6 var(--font-sans); -webkit-font-smoothing:antialiased;
  padding-top:68px;
  transition:background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
body.la-blog a{ color:var(--text-link); }
body.la-blog img{ max-width:100%; }
/* The gradient buttons are <a>s — beat the base link color (gutenberg's
   .la-page a and body.la-blog a both out-specify a single-class .la-*__btn). */
body.la-blog .la-cta-card__btn, body.la-blog .la-cta-card__btn:hover,
body.la-blog .la-cta-bar__go, body.la-blog .la-cta-bar__go:hover{ color:#fff; }

/* ============================================================
   FA-STYLE PAGE FRAME — left + right + bottom liquid-glass strips
   ============================================================ */
.la-frame__l, .la-frame__r, .la-frame__b{
  position:fixed; z-index:1500; pointer-events:none;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.la-frame__l{ left:0; top:68px; bottom:0; width:var(--frame-w); }
.la-frame__r{ right:0; top:68px; bottom:0; width:var(--frame-w); }
.la-frame__b{ left:var(--frame-w); right:var(--frame-w); bottom:0; height:var(--frame-w); }

/* ============================================================
   SITE HEADER — reuse the site-header block markup, retint to
   liquid glass (this sheet loads after gutenberg.css so it wins).
   ============================================================ */
body.la-blog .la-site-header{
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  left:0; right:0; top:0; position:fixed; z-index:1000;
}
body.la-blog .la-site-header__wordmark,
body.la-blog .la-site-footer__wordmark{ background:var(--wordmark-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font:700 1.4rem/1.3 var(--font-heading); letter-spacing:-.01em; padding-bottom:.06em; }
:root[data-theme="dark"] body.la-blog .la-site-header__nav a{ color:var(--text-secondary); }

/* Theme toggle — injected by JS into .la-site-header__actions */
.la-theme-toggle{ align-items:center; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius-pill); color:var(--text-secondary); cursor:pointer; display:flex; height:40px; justify-content:center; width:40px; padding:0; transition:all var(--duration-base) var(--ease-out); }
/* Set background/outline explicitly — the Beaver Builder theme's button:hover
   injects an accent tint (reads red on the dark glass) that our border/color
   override alone doesn't cover. Scope with body.la-blog to beat button:hover. */
body.la-blog .la-theme-toggle:hover,
body.la-blog .la-theme-toggle:focus-visible{ border-color:var(--la-navy-400); color:var(--text-heading); background:var(--la-navy-50); outline:none; box-shadow:none; }
.la-theme-toggle svg{ height:18px; width:18px; }
.la-theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .la-theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .la-theme-toggle .icon-moon{ display:block; }
:root[data-theme="dark"] body.la-blog .la-theme-toggle:hover,
:root[data-theme="dark"] body.la-blog .la-theme-toggle:focus-visible{ border-color:rgba(255,255,255,.45); color:#fff; background:rgba(255,255,255,.10); }

/* Header actions in dark mode — Harbor colors. Login is a ghost link (no
   near-white pill, no underline); Start-your-case inverts to a light fill with
   navy ink so it stays the clear primary against the dark glass. */
body.la-blog .la-site-header__login:hover{ text-decoration:none; }
:root[data-theme="dark"] body.la-blog .la-site-header__login{ color:var(--text-secondary); }
:root[data-theme="dark"] body.la-blog .la-site-header__login:hover{ background:rgba(255,255,255,.10); color:#fff; }
:root[data-theme="dark"] body.la-blog .la-site-header__cta{ background:#fff; color:var(--la-navy-900) !important; }
:root[data-theme="dark"] body.la-blog .la-site-header__cta:hover{ background:var(--la-navy-50); color:var(--la-navy-900) !important; text-decoration:none; box-shadow:var(--shadow-md); }

/* Reading progress — under the header, inset within the L/R frame */
.la-progress{ position:fixed; top:68px; left:var(--frame-w); right:var(--frame-w); height:2px; z-index:1600; background:transparent; }
.la-progress__fill{ display:block; height:100%; width:0%; background:var(--gradient-text); transition:width 80ms linear; }

/* ============================================================
   ARTICLE
   ============================================================ */
.la-article{ max-width:var(--content-max); margin:0 auto; padding:0 24px; }
.la-article__hero{ background:var(--gradient-hero); border-bottom:1px solid var(--border-default); padding-block:var(--space-8) var(--space-7); }
.la-article__hero-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--space-8); align-items:center; }
.la-article__hero-copy{ text-align:center; }
.la-article__title{ font:400 clamp(2.4rem,4.6vw,3.6rem)/1.08 var(--font-display); color:var(--text-heading); letter-spacing:-.01em; margin:0 0 var(--space-4); text-wrap:balance; }
.la-article__dek{ font:400 1.3125rem/1.55 var(--font-sans); color:var(--text-secondary); margin:0 auto var(--space-5); max-width:42ch; }
.la-article__meta{ align-items:center; color:var(--text-muted); display:flex; flex-direction:column; font:500 .9375rem/1.5 var(--font-sans); gap:5px; }
.la-article__meta strong{ color:var(--text-body); font-weight:600; }
/* Byline links to the author archive but reads as byline text, not a bright link. */
body.la-blog .la-article__meta a{ color:inherit; text-decoration:none; }
body.la-blog .la-article__meta a:hover{ text-decoration:underline; text-underline-offset:2px; }
.la-cover{ aspect-ratio:4/5; border-radius:var(--radius-xl); box-shadow:var(--shadow-frame); overflow:hidden; position:relative; background:var(--gradient-band); }
.la-cover img{ display:block; width:100%; height:100%; object-fit:cover; }
.la-cover--gen::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px); }
.la-cover--gen::after{ content:""; position:absolute; inset:0; background:radial-gradient(30rem 16rem at 80% 6%, rgba(220,99,48,.35), transparent 60%); }
.la-cover__mark{ position:absolute; right:18px; bottom:14px; font:500 .75rem/1 var(--font-mono); color:rgba(255,255,255,.55); letter-spacing:.04em; }
.la-cover__glyph{ position:absolute; left:24px; top:22px; font:400 6.5rem/.8 var(--font-heading); color:rgba(255,255,255,.12); }
.la-cover__statute{ position:absolute; left:26px; bottom:22px; max-width:70%; font:400 1.9rem/1.1 var(--font-heading); color:rgba(255,255,255,.92); }

.la-article__grid{ display:grid; grid-template-columns:minmax(0,1fr) var(--rail-width); gap:var(--space-9); padding-block:var(--space-8); }
.la-prose{ max-width:var(--article-measure); }
.la-prose > p:first-of-type::first-letter{ color:var(--text-accent); float:left; font:400 4.6rem/.74 var(--font-heading); margin:6px 14px 0 0; padding-top:4px; }
.la-prose p, .la-prose li{ color:var(--text-body); font-size:1.1875rem; line-height:1.75; margin:0 0 1.35em; }
.la-prose h2{ border-top:1px solid var(--border-default); color:var(--text-heading); font:400 1.85rem/1.2 var(--font-heading); letter-spacing:-.01em; margin:2.6em 0 .7em; padding-top:1.2em; text-wrap:balance; }
.la-prose h2:first-child{ border-top:none; margin-top:0; padding-top:0; }
.la-prose h3{ color:var(--text-heading); font:600 1.25rem/1.35 var(--font-sans); margin:1.9em 0 .5em; }
.la-prose a{ color:var(--text-link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.la-prose strong{ color:var(--text-heading); font-weight:600; }
.la-prose ul,.la-prose ol{ margin:0 0 1.35em; padding-left:1.4em; }
.la-prose li{ margin-bottom:.5em; }
.la-prose li::marker{ color:var(--la-coral-400); }
.la-prose blockquote{ border-left:3px solid var(--la-coral-300); margin:2em 0; padding:.2em 0 .2em 26px; }
.la-prose blockquote p{ color:var(--text-heading); font:400 1.7rem/1.35 var(--font-serif); }
.la-prose img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.la-prose h1{ /* any stray content h1 is demoted to h2 by the content filter */ }

/* ============================================================
   RIGHT RAIL — sticky persistent CTA + TOC
   ============================================================ */
.la-rail{ position:relative; }
.la-rail__sticky{ position:sticky; top:92px; display:flex; flex-direction:column; gap:var(--space-5); }
.la-cta-card{ background:var(--surface-tint); border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
:root[data-theme="dark"] .la-cta-card{ background:var(--surface-card); }
.la-cta-card__top{ padding:22px 22px 4px; }
.la-cta-card__eyebrow{ color:var(--text-accent); font:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; margin:0 0 8px; }
.la-cta-card h3{ color:var(--text-heading); font:400 1.45rem/1.18 var(--font-heading); letter-spacing:-.01em; margin:0 0 10px; }
.la-cta-card p.sub{ color:var(--text-secondary); font:400 .95rem/1.55 var(--font-sans); margin:0 0 16px; }
.la-cta-card__btn{ display:block; text-align:center; background:var(--gradient-cta); color:#fff; border-radius:var(--radius-md); font:600 1rem/1 var(--font-sans); padding:15px 18px; text-decoration:none; transition:box-shadow var(--duration-base) var(--ease-out); }
.la-cta-card__btn:hover{ box-shadow:var(--shadow-md); color:#fff; }
.la-cta-card__btn span{ opacity:.85; }
.la-cta-card__list{ list-style:none; margin:18px 0 0; padding:18px 22px 22px; border-top:1px solid var(--border-default); display:flex; flex-direction:column; gap:15px; }
.la-cta-card__list li{ display:flex; gap:12px; align-items:flex-start; }
.la-cta-card__list svg{ flex:none; height:20px; width:20px; color:var(--la-navy-500); margin-top:1px; }
:root[data-theme="dark"] .la-cta-card__list svg{ color:var(--la-navy-300); }
.la-cta-card__list .t{ display:block; color:var(--text-heading); font:600 .9375rem/1.3 var(--font-sans); }
.la-cta-card__list .d{ display:block; color:var(--text-secondary); font:400 .875rem/1.45 var(--font-sans); margin-top:2px; }
.la-toc{ border-top:1px solid var(--border-default); padding-top:var(--space-5); }
.la-toc__title{ color:var(--text-muted); font:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; margin:0 0 14px; }
.la-toc ol{ list-style:none; margin:0; padding:0; }
.la-toc a{ border-left:2px solid var(--border-default); color:var(--text-secondary); display:block; font:500 .9rem/1.4 var(--font-sans); padding:7px 0 7px 14px; text-decoration:none; transition:color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.la-toc a:hover{ color:var(--text-heading); }
.la-toc a.is-active{ border-left-color:var(--la-coral-500); color:var(--text-heading); }

/* ============================================================
   RELATED — "Keep reading"
   ============================================================ */
.la-related{ max-width:var(--article-measure); margin:var(--space-7) 0 var(--space-9); border-top:1px solid var(--border-default); padding-top:var(--space-7); }
.la-related__title{ color:var(--text-accent); font:400 1.9rem/1.1 var(--font-heading); font-style:italic; margin:0 0 var(--space-6); text-align:left; }
.la-related__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-7) var(--space-6); }
/* Reset the /v2 card box (gutenberg.css .la-card) — Keep-reading cards are
   borderless + image-led. */
.la-card{ display:block; text-decoration:none; background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.la-card__thumb{ display:block; aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden; position:relative; background:var(--gradient-band); box-shadow:var(--shadow-sm); }
.la-card__thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.la-card__thumb::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px); }
.la-card__thumb span{ position:absolute; left:14px; bottom:11px; font:500 .6875rem/1 var(--font-mono); letter-spacing:.06em; color:rgba(255,255,255,.62); z-index:1; }
.la-card h3{ color:var(--text-heading); font:400 1.35rem/1.2 var(--font-heading); margin:14px 0 6px; text-wrap:balance; }
.la-card:hover h3{ color:var(--text-link); }
.la-card p{ color:var(--text-secondary); font:400 1rem/1.45 var(--font-sans); margin:0; }

/* ============================================================
   FA-STYLE POP-UP BOTTOM BAR (persistent CTA on narrow screens)
   ============================================================ */
.la-cta-bar{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:1600;
  transform:translateY(180%); transition:transform 320ms var(--ease-out);
}
.la-cta-bar.is-visible{ transform:translateY(0); }
/* Floats as a rounded inset card (FA-style), not a bar pinned to the edge. */
.la-cta-bar__inner{
  max-width:var(--content-max); margin:0 auto; display:flex; align-items:center; gap:18px;
  background:var(--surface-card); border:1px solid var(--border-strong);
  border-radius:10px; box-shadow:var(--shadow-lg);
  padding:14px 16px 14px 22px;
}
.la-cta-bar__txt{ flex:1; min-width:0; }
.la-cta-bar__txt b{ color:var(--text-heading); font:600 1rem/1.3 var(--font-sans); }
.la-cta-bar__txt b em{ font-style:normal; color:var(--text-accent); }
.la-cta-bar__txt span{ display:block; color:var(--text-muted); font:400 .875rem/1.35 var(--font-sans); margin-top:2px; }
.la-cta-bar__go{ flex:none; background:var(--gradient-cta); border-radius:var(--radius-md); color:#fff; font:600 .9375rem/1 var(--font-sans); padding:14px 20px; text-decoration:none; }
.la-cta-bar__go:hover{ box-shadow:var(--shadow-md); }
.la-cta-bar__close{ flex:none; background:transparent; border:0; color:var(--text-muted); cursor:pointer; font-size:20px; line-height:1; padding:8px; border-radius:var(--radius-sm); }
.la-cta-bar__close:hover{ color:var(--text-heading); background:var(--surface-subtle); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1081px){
  .la-cta-bar{ display:none !important; }
}
@media (max-width:1080px){
  .la-article__grid{ grid-template-columns:1fr; gap:var(--space-7); }
  .la-rail{ display:none; }
  .la-prose{ max-width:var(--content-narrow); }
}
@media (max-width:820px){
  .la-article__hero-inner{ grid-template-columns:1fr; gap:var(--space-6); }
  .la-cover{ aspect-ratio:16/10; }
  .la-related__grid{ grid-template-columns:1fr; }
  .la-cta-bar__txt span{ display:none; }
  .la-cta-bar__inner{ gap:12px; padding:12px 12px 12px 16px; }
}