/* ===================================================================
   ONLINE LEGAL SERVICES — shared stylesheet (brown & red theme)
   Used by header.js, footer.js and every page on the site.
   Edit the variables in :root to re-theme the entire site at once.
=================================================================== */

:root{
  /* -- color tokens: light true-brown palette -- */
  --brown-black:  #4A2E1A;   /* deepest true brown — utility bar, footer */
  --brown-deep:   #6B4423;   /* true brown — dark accent sections (cta band, tab sidebar) */
  --brown:        #8B5E3C;   /* core brand brown — headings accent, links, logo */
  --brown-pale:   #EDDFC9;   /* light brown tint — hero bg, hover states */
  --red:          #B5482F;   /* warm terracotta accent — CTA buttons only */
  --red-deep:     #8C3621;   /* hover / pressed state */
  --red-light:    #D98A6E;   /* accent text on dark backgrounds */
  --cream:        #FBF8F3;   /* page background — light, clean */
  --paper-raised: #FFFFFF;   /* card background */
  --line:         #E8DCC8;   /* hairline borders */
  --ink:          #2E2014;   /* body text */
  --ink-soft:     #7C6B59;   /* secondary text */
  --cream-text:   #F7F1E6;   /* text on dark backgrounds */
  --tan-soft:     #CBB191;   /* secondary text on dark backgrounds */

  /* -- type tokens -- */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body:    "Inter", -apple-system, Segoe UI, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* -- layout tokens -- */
  --max-w: 1180px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(46,32,20,0.06), 0 8px 24px rgba(46,32,20,0.08);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; }
.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--brown-deep);
  margin: 0 0 .5em;
  font-weight: 600;
  line-height: 1.15;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-red{
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
}
.btn-red:hover{ background: var(--red-deep); border-color: var(--red-deep); }
.btn-outline{
  background: transparent;
  color: var(--cream-text);
  border: 2px solid rgba(247,241,230,.65);
}
.btn-outline:hover{ border-color: var(--cream-text); background: rgba(255,255,255,.06); }
.btn-outline-dark{
  background: transparent;
  color: var(--brown-deep);
  border: 2px solid var(--brown-deep);
}
.btn-outline-dark:hover{ background: var(--brown-deep); color:#fff; }

:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ===================== HEADER ===================== */
.site-header{ position: sticky; top:0; z-index: 100; }
.utility-bar{
  background: var(--brown-black);
  color: var(--tan-soft);
  font-family: var(--font-mono);
  font-size: .78rem;
}
.utility-bar .wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 1rem;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
.utility-bar a{ text-decoration:none; color: var(--tan-soft); }
.utility-bar a:hover{ color: var(--red-light); }
.utility-contact{ display:flex; gap: 1.25rem; flex-wrap:wrap; }

.site-search{
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 3px 4px 3px 12px;
  gap: 6px;
}
.site-search input[type="search"]{
  background: transparent;
  border: none;
  outline: none;
  color: var(--cream-text);
  font-family: var(--font-mono);
  font-size: .76rem;
  width: 130px;
}
.site-search input[type="search"]::placeholder{ color: var(--tan-soft); }
.site-search button{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 24px; height:24px;
  border-radius: 50%;
  border:none;
  background: var(--red);
  color: #fff;
  cursor:pointer;
  flex: none;
}
.site-search button:hover{ background: var(--red-deep); }
@media (max-width: 700px){
  .site-search input[type="search"]{ width: 90px; }
}

.main-nav{
  background: var(--paper-raised);
  border-bottom: 2px solid var(--brown);
  box-shadow: 0 2px 10px rgba(74,46,26,.08);
}
.main-nav .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color: var(--ink);
  flex: none;
}
.brand-mark{ width:36px; height:36px; flex:none; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height:1.05;
  letter-spacing:.01em;
  white-space: nowrap;
  color: var(--brown-deep);
}
.brand-word small{
  display:block;
  font-family: var(--font-mono);
  font-size:.62rem;
  letter-spacing:.18em;
  color: var(--red);
  font-weight:600;
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  display:block;
  padding: 8px 11px;
  text-decoration:none;
  color: var(--ink);
  font-size:.89rem;
  font-weight:500;
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{ background: var(--brown-pale); color: var(--brown-deep); }
.nav-cta{
  margin-left: 8px;
}
.nav-cta .btn{ padding: .6em 1.1em; font-size:.89rem; white-space:nowrap; }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:40px; height:40px;
  flex: none;
  position:relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  position:absolute;
  left:8px; right:8px;
  height:2px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span{ top:19px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); background: var(--ink); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); background: var(--ink); }

@media (max-width: 1080px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper-raised);
    border-top: 1px solid var(--line);
    padding: 8px 16px 18px;
    gap:0;
    box-shadow: 0 12px 16px rgba(74,46,26,.1);
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding: 12px 8px; border-bottom: 1px solid var(--line); border-radius:0; white-space:normal; }
  .nav-cta{ margin: 12px 8px 0; }
  .nav-cta .btn{ width:100%; justify-content:center; padding: .85em 1.5em; }
  .main-nav .wrap{ position:relative; flex-wrap:wrap; }
  .utility-bar .wrap{ justify-content:center; text-align:center; gap: 8px 16px; }
  .utility-contact{ justify-content:center; gap: 10px 16px; font-size:.72rem; }
}

/* ===================== FOOTER ===================== */
.site-footer{ background: var(--brown-black); color: var(--tan-soft); border-top: 3px solid var(--red); }
.footer-top{ padding: 60px 0 36px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
}
.footer-brand .brand{ color: var(--cream-text); margin-bottom: 14px; }
.footer-brand .brand-word{ font-size: 1.2rem; }
.footer-tagline{ font-size:.92rem; max-width: 30ch; color: var(--tan-soft); line-height:1.6; }
.footer-col h4{
  font-family: var(--font-mono);
  color: var(--red-light);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ text-decoration:none; color: var(--tan-soft); font-size:.92rem; transition: color .15s ease; }
.footer-col a:hover{ color: var(--cream-text); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0 28px;
  font-size:.8rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a{ text-decoration:none; color: var(--tan-soft); margin-left:14px;}
.footer-bottom a:hover{ color: var(--red-light); }

@media (max-width: 880px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .footer-bottom .legal-links{ margin-left:0; }
  .footer-bottom a:first-child{ margin-left:0; }
}