/* ==========================================================================
   UNDERSTANDING-SERVICES.CSS
   Page-specific styles for: understanding-services.html
   Based on the biz.css theme — mobile-first, elegant, accessible.
   Last updated: 2025-08-20
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Page tokens (map to biz.css variables so themes stay in sync)
   -------------------------------------------------------------------------- */
   :root{
    /* Read from biz.css where possible */
    --us-card-bg: #fff;                 /* light surface */
    --us-card-bg-muted: linear-gradient(180deg,#fff,#f8fafc);
    --us-ink: var(--ink, #0f172a);
    --us-muted: var(--muted, #475569);
    --us-border: var(--border, #e6e9ef);
    --us-primary: var(--primary, #2563eb);
    --us-accent: var(--accent, #22c55e);
    --us-warn: var(--warn, #f59e0b);
  
    --us-radius: var(--radius-lg, 18px);
    --us-radius-md: var(--radius-md, 14px);
    --us-shadow: var(--shadow-md, 0 12px 30px rgba(2,6,23,.12));
    --us-shadow-sm: var(--shadow-sm, 0 4px 14px rgba(2,6,23,.08));
  
    --us-step--1: var(--step--1, .95rem);
    --us-step-0: var(--step-0, 1.05rem);
    --us-step-1: var(--step-1, 1.35rem);
    --us-step-2: var(--step-2, 1.8rem);
    --us-step-3: var(--step-3, 2.3rem);
  
    /* Respect global nav height from biz.css; fall back if absent */
    --us-nav-h: var(--nav-height, 72px);
  }
  
  /* Dark theme parity with biz.css */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme]) {
      --us-card-bg: #0f172a;
      --us-card-bg-muted: #0f172a;
      --us-ink: #e5e7eb;
      --us-muted: #9aa7bb;
      --us-border: #1e293b;
    }
  }
  [data-theme="dark"]{
    --us-card-bg: #0f172a;
    --us-card-bg-muted: #0f172a;
    --us-ink: #e5e7eb;
    --us-muted: #9aa7bb;
    --us-border: #1e293b;
  }
  
  /* Map to site-wide tokens when present */
  :root,
  :root[data-theme="light"],
  [data-theme="light"]{
    --clr-bg: #ffffff;
    --clr-surface: #ffffff;
    --clr-fg: #111827;
    --clr-border: #e5e7eb;
    --clr-primary: var(--us-primary, #2563eb);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) {
      --clr-bg: #0f141b;
      --clr-surface: #111827;
      --clr-fg: #e5e7eb;
      --clr-border: #374151;
      --clr-primary: var(--us-primary, #3b82f6);
    }
  }
  :root[data-theme="dark"],
  [data-theme="dark"]{
    --clr-bg: #0f141b;
    --clr-surface: #111827;
    --clr-fg: #e5e7eb;
    --clr-border: #374151;
    --clr-primary: var(--us-primary, #3b82f6);
  }
  
  /* Ensure page background uses site tokens */
  body{
    background: var(--clr-bg);
    color: var(--clr-fg);
  }
  
  /* Give anchored sections breathing room under sticky nav/topbar */
  [id] { scroll-margin-top: calc(var(--us-nav-h) + 16px); }
  
  /* --------------------------------------------------------------------------
     1) Page layout (article + TOC)
     -------------------------------------------------------------------------- */
  .container{ /* uses biz.css container; no width override needed */ }
  .layout{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3, .9rem);
  }
  @media (min-width: 1000px){
    .layout{
      grid-template-columns: 1fr minmax(260px, 320px);
      align-items: start;
    }
  }
  
  /* --------------------------------------------------------------------------
     2) Hero
     -------------------------------------------------------------------------- */
  .hero{
    padding-block: clamp(1.25rem, 2.6vw, 2.5rem) 0.75rem;
  }
  .eyebrow{
    margin: 0 0 .35rem 0;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--us-muted);
    font-size: var(--us-step--1);
    font-weight: 800;
  }
  .hero h1{
    margin: 0 0 .5rem 0;
    font-size: var(--us-step-3);
    line-height: 1.1;
    color: var(--us-ink);
    text-wrap: balance;
  }
  .lead{ margin: .25rem 0 .5rem; color: var(--us-muted); font-size: var(--us-step-0); }
  .meta{
    color: var(--us-muted);
    font-size: var(--us-step--1);
    display: inline-flex;
    gap: .5ch;
    align-items: baseline;
  }
  .meta time{ white-space: nowrap; }
  .hero__actions{ display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .6rem 0; }
  
  /* Treat .ghost on this page as a themed ghost button (works with global .btn) */
  .hero__actions .btn.ghost,
  .end-cta .btn.ghost{
    --btn-bg: #fff; --btn-ink: var(--us-ink);
    border: 1px solid var(--us-border);
    background: linear-gradient(180deg,#fff,#f7f9fc);
    color: var(--us-ink);
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(2,6,23,.06));
    border-radius: 999px;
  }
  
  /* --------------------------------------------------------------------------
     3) Table of contents (aligned with biz.css look)
     -------------------------------------------------------------------------- */
  .toc{
    position: sticky;
    inset-block-start: calc(var(--us-nav-h) + .5rem);
    z-index: 2;
    padding: .75rem .9rem;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    background: var(--us-card-bg);
    box-shadow: var(--us-shadow-sm);
    border-color: var(--clr-border); /* tokenized */
  }
  .toc strong{
    display:block;
    margin: 0 0 .35rem 0;
    font-size: var(--us-step--1);
    color: var(--us-muted);
  }
  
  /* --- NUMBER CONTAINMENT FIX (no overflow), with elegant number pills --- */
  .toc ol{
    /* Override earlier padding-based layout to avoid outside/hanging numbers */
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow: auto;
  }
  .toc li{
    counter-increment: toc;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
    padding-block: .15rem;
  }
  .toc li::before{
    content: counter(toc);
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: .22rem .5rem;                 /* grows with digits */
    min-inline-size: 2.25ch;               /* keeps 1–2 digit stable */
    border-radius: 8px;
    border: 1px solid var(--clr-border);
    color: var(--clr-primary);
    background: color-mix(in oklab, var(--clr-surface) 94%, transparent);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(2,6,23,.05));
  }
  .toc a{
    color: var(--us-ink);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.35;
    display: block;
  }
  .toc a:hover{ text-decoration: underline; text-underline-offset: 3px; }
  .toc .is-active > a{
    color: var(--us-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .toc .is-active::before{
    background: color-mix(in oklab, var(--clr-primary) 12%, var(--clr-surface));
    border-color: color-mix(in oklab, var(--clr-primary) 45%, var(--clr-border));
  }
  
  @media (max-width: 700px){ .toc{ position: static; } }
  
  /* --------------------------------------------------------------------------
     4) Article card + typography (cards align with biz.css)
     -------------------------------------------------------------------------- */
  .post{
    padding: clamp(.9rem, .6rem + 1.6vw, 1.4rem);
    background: var(--us-card-bg);
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    box-shadow: var(--us-shadow);
  }
  
  /* Readable measure */
  .post, .post p, .post ul, .post ol{ max-inline-size: 75ch; }
  
  /* Sections */
  .post section + section{ margin-top: var(--space-3, .9rem); }
  .post section p{ margin: 0 0 .75rem; color: var(--us-ink); }
  .post section ul, .post section ol{ margin: .5rem 0 1rem 0; }
  .post li{ margin: .25rem 0; }
  
  /* Links inside article */
  .post a{ color: inherit; overflow-wrap: anywhere; }
  .post a:hover{ color: var(--us-primary); text-decoration: underline; text-underline-offset: 3px; }
  
  /* Headings within content (future-proofing) */
  .post h2{
    margin: .9rem 0 .45rem;
    font-size: var(--us-step-2);
    line-height: 1.25;
    text-wrap: balance;
  }
  .post h3{
    margin: .7rem 0 .35rem;
    font-size: clamp(1.05rem, .85rem + 1vw, 1.3rem);
    line-height: 1.3;
  }
  
  /* Fine type */
  .post p, .post li{ text-wrap: pretty; hyphens: auto; }
  
  /* Rich content defaults */
  .post table{
    inline-size: 100%;
    border-collapse: collapse;
    margin: .75rem 0 1rem;
    font-size: var(--us-step--1);
  }
  .post th, .post td{
    padding: .6rem .65rem;
    border: 1px solid var(--us-border);
    text-align: left;
  }
  .post img{ border-radius: var(--us-radius-md); box-shadow: var(--us-shadow-sm); }
  .post blockquote{
    margin: .75rem 0;
    padding: .65rem .8rem;
    border-inline-start: 4px solid color-mix(in oklab, var(--us-primary) 55%, transparent);
    background: color-mix(in oklab, var(--us-card-bg) 92%, transparent);
    border-radius: var(--us-radius-md);
  }
  .post code, .post kbd{
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size: .95em;
    background: color-mix(in oklab, var(--us-card-bg) 90%, transparent);
    padding: .15em .35em;
    border-radius: 8px;
    border: 1px solid var(--us-border);
  }
  
  /* In-page target highlight */
  .post :target{
    animation: usTargetPulse 2s var(--easing, cubic-bezier(.2,.7,.2,1)) 1;
  }
  @keyframes usTargetPulse{
    0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--us-primary) 50%, transparent); }
    100%{ box-shadow: 0 0 0 0 transparent; }
  }
  
  /* --------------------------------------------------------------------------
     4.1) Ordered list polish (prevent number overflow in content lists)
     -------------------------------------------------------------------------- */
  /* Keep native semantics but ensure numbers never hang/overflow the card */
  .post ol{
    list-style: decimal;
    list-style-position: outside;
    padding-inline-start: clamp(1rem, 0.6rem + 2vw, 1.35rem);
  }
  .post li::marker{
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--clr-primary);
  }
  .post ol li{
    overflow-wrap: anywhere; /* long words/URLs won't bust layout */
  }
  
  /* Optional enhanced step style (opt-in): add class 'steps' on an <ol> */
  .post ol.steps{
    list-style: none;
    counter-reset: step;
    padding: 0;
  }
  .post ol.steps > li{
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: start;
    padding-block: .3rem;
  }
  .post ol.steps > li::before{
    content: counter(step);
    display: inline-grid;
    place-items: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: .28rem .56rem;
    min-inline-size: 2.4ch;
    border-radius: 10px;
    color: var(--clr-primary);
    border: 1px solid var(--clr-border);
    background: color-mix(in oklab, var(--clr-surface) 94%, transparent);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(2,6,23,.05));
  }
  
  /* --------------------------------------------------------------------------
     5) Page UI bits: progress, callout, CTAs
     -------------------------------------------------------------------------- */
  /* Reading progress bar (sits above sticky nav/topbar) */
  .progress{
    position: fixed;
    inset: 0 0 auto 0;
    block-size: 4px;
    z-index: 1000;
    background: transparent;
  }
  .progress__bar{
    display: block;
    inline-size: 0%;
    block-size: 100%;
    background: linear-gradient(90deg, var(--clr-primary), color-mix(in oklab, var(--clr-primary) 45%, var(--us-accent, #22c55e)));
    transition: inline-size var(--duration-1, 150ms) var(--easing, cubic-bezier(.2,.7,.2,1));
  }
  @media (prefers-reduced-motion: reduce){ .progress__bar{ transition: none; } }
  
  /* Advisory callout (align with biz.css callout look) */
  .callout{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: start;
    padding: .75rem .9rem;
    margin: .9rem 0;
    border: 1px solid var(--us-border);
    border-radius: var(--us-radius);
    background: var(--us-card-bg-muted);
    box-shadow: var(--shadow-xs, 0 1px 3px rgba(2,6,23,.06));
  }
  .callout i{ color: var(--us-primary); margin-top: .15rem; }
  .tiny{ font-size: var(--us-step--1); color: var(--us-muted); }
  
  /* End-of-article CTAs */
  .end-cta{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .9rem 0 .35rem;
  }
  .end-cta .btn{ min-block-size: 40px; }
  /* Buttons within end-cta on dark mode stay legible */
  .end-cta .btn.ghost{
    background: color-mix(in oklab, var(--clr-surface) 96%, transparent);
    border-color: var(--clr-border);
    color: var(--clr-fg);
  }
  
  /* --------------------------------------------------------------------------
     6) Footer (uses global .site-footer from biz.css; add small spacing)
     -------------------------------------------------------------------------- */
  .site-footer{ margin-top: var(--space-3, 1rem); }
  
  /* --------------------------------------------------------------------------
     7) Nav adjustments (page-specific)
     -------------------------------------------------------------------------- */
  /* Make the "Contact" nav link appear as a plain text link on this page */
  header.nav a[href$="#contact"].btn.btn--small{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 650;
    color: var(--clr-fg) !important;
  }
  header.nav a[href$="#contact"].btn.btn--small:hover,
  header.nav a[href$="#contact"].btn.btn--small:focus-visible{
    color: var(--us-primary) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
  /* Theme toggle icon button hover target size */
  .theme-toggle{
    min-inline-size: 38px;
    min-block-size: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid transparent;
  }
  .theme-toggle:hover,
  .theme-toggle:focus-visible{
    border-color: var(--clr-border);
    background: color-mix(in oklab, var(--clr-surface) 92%, transparent);
  }
  
  /* Brand link hit target */
  .brand-link{ text-decoration: none; color: inherit; }
  .brand-link:hover{ opacity: .9; }
  
  /* Better active nav hint for this page */
  .nav__links a.active{
    color: var(--clr-primary);
    font-weight: 700;
  }
  
  /* --------------------------------------------------------------------------
     8) Small-screen polish
     -------------------------------------------------------------------------- */
  @media (max-width: 600px){
    .hero{ padding-block-start: 1rem; }
    .post, .toc{ border-radius: var(--us-radius-md); }
    .toc{ max-inline-size: 100%; }
  }
  
  /* --------------------------------------------------------------------------
     9) Utilities
     -------------------------------------------------------------------------- */
  .hidden{ display: none !important; }
  .hr{
    block-size: 1px;
    background: var(--us-border);
    border: 0;
    margin-block: .9rem;
  }
  
  /* Status button helpers (if JS injects them) */
  .btn--success{
    --btn-bg: color-mix(in oklab, var(--us-accent) 12%, #fff);
    --btn-ink: var(--us-ink);
    border-color: color-mix(in oklab, var(--us-accent) 35%, var(--us-border));
    color: var(--us-ink);
  }
  .btn--warning{
    --btn-bg: color-mix(in oklab, var(--us-warn) 10%, #fff);
    --btn-ink: var(--us-ink);
    border-color: color-mix(in oklab, var(--us-warn) 35%, var(--us-border));
    color: var(--us-ink);
  }
  
  /* --------------------------------------------------------------------------
     10) Print styles (harmonized with biz.css)
     -------------------------------------------------------------------------- */
  @media print{
    .progress, .hero__actions, .toc, .end-cta, .site-footer{ display: none !important; }
    body{ background: #fff !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .container{ inline-size: auto; padding: 0; }
    .post{ box-shadow: none; border: 0; background: #fff; padding: 0; }
    a[href]::after{ content:" (" attr(href) ")"; font-size:.85em; color:#444; }
  }