/* ==========================================================================
   Law App 2026 site styles
   --------------------------------------------------------------------------
   The navigation and typography from the rebuilt homepage, applied to every
   page so the site is uniform.

   This is a NEW file. page.css, page.min.css and style.css are untouched, per
   the do-not-touch rule in CLAUDE.md. Load this AFTER them so it wins on equal
   specificity, and keep page-specific overrides in the page itself.
   ========================================================================== */

:root{
  --la-ink:#080D1A;          /* navigation ground, same as the homepage hero */
  --la-ink-deep:#070E20;     /* dropdown panel, a step below the bar */
  --la-orange:#E35F13;
  --la-navy-100:#C3C7D0;
}

/* ── Typography ───────────────────────────────────────────────────────────
   Inter for text, Inter Tight for display, matching the homepage. Sizes are
   deliberately NOT set here: every page has its own scale and forcing the
   homepage's would break layouts. This changes the typeface only.          */

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4{
  font-family:'Inter Tight','Inter',-apple-system,sans-serif;
  letter-spacing:-.03em;
}

/* ── Navigation bar ───────────────────────────────────────────────────────
   Sticky and dark on every page. The homepage overrides this to sit
   transparent over its hero until you scroll; everywhere else the bar is
   solid from the top, because a transparent bar on a light hero would hide
   the white logo and links.                                                */

.navbar{
  position:sticky; top:0; z-index:60;
  background:var(--la-ink);
  transition:background .3s,border-color .3s;
}

/* The framework swaps to the navy wordmark when it adds .stick on scroll, which
   was built for a bar that turns white. This bar is dark at every scroll
   position, so the white wordmark has to stay or it vanishes the moment you
   scroll. Specificity beats the framework's rule without !important. */
.navbar.navbar-stick-dark.stick .logo-dark,
.navbar.navbar-stick-light.stick .logo-dark{display:none}
.navbar.navbar-stick-dark.stick .logo-light,
.navbar.navbar-stick-light.stick .logo-light{display:inline-block}

/* Same reason: the divider and the mobile toggle are drawn for a light bar
   once .stick lands. Keep the dark-bar treatment at all times. */
.navbar.navbar-stick-dark.stick .navbar-divider{background-color:rgba(255,255,255,.2)}

/* ── Dropdown panels, desktop only ────────────────────────────────────────
   The mobile menu is left exactly as the framework draws it.               */

@media(min-width:992px){
  .nav-navbar > .nav-item > .nav{
    background:var(--la-ink-deep);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    box-shadow:0 24px 60px rgba(5,10,25,.5);
    padding:10px;
  }
  .nav-navbar > .nav-item > .nav > .nav-item{
    position:relative;
    width:328px !important;
    border-radius:8px;
    transition:background .15s;
  }
  .nav-navbar > .nav-item > .nav > .nav-item:hover{background:rgba(255,255,255,.06)}

  /* The whole row lights up on hover, so the whole row has to be clickable.
     The shared markup only wraps the title in an anchor, which left a tiny
     target on the word itself. Stretch that anchor across the row rather
     than restructuring markup that is copied into every page. */
  .nav-navbar > .nav-item > .nav .fw-600 a::after{content:"";position:absolute;inset:0;z-index:1}

  .nav-navbar > .nav-item > .nav .media{margin-top:0 !important;padding:11px 14px;align-items:center}
  .nav-navbar > .nav-item > .nav .avatar{display:none}
  /* static, so the stretched link above anchors to the row and not to this */
  .nav-navbar > .nav-item > .nav .col-lg-12{padding:0;position:static}
  .nav-navbar > .nav-item > .nav .fw-600{margin-bottom:4px !important}
  .nav-navbar > .nav-item > .nav .fw-600 a{color:#fff !important;font-size:14px;font-weight:600;letter-spacing:-.1px}
  .nav-navbar > .nav-item > .nav > .nav-item:hover .fw-600 a{color:var(--la-orange) !important}
  .nav-navbar > .nav-item > .nav .text-muted{color:var(--la-navy-100) !important;font-size:12.5px}
}