/* =============================================================================
   design.css v3 — westenhoeferlaw.com complete visual redesign
   Loaded after site.css. This file is the authoritative source for all visual
   properties. site.css handles structural plumbing only (layout, sticky header,
   FAQ accordion, tables, .sr-only, etc.). Do not look to site.css for color,
   typography, or component appearance.
   ============================================================================= */


/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */

:root {
  --navy:      #1A2846;    /* primary dark: nav, hero text panel, CTA bar */
  --dark:      #090E1C;    /* top bar, footer */
  --hero-bg:   #1A2846;    /* hero image panel — matches surrounding navy */
  --att-bg:    #0E1A2E;    /* attorney teaser section */
  --gold:      #C0955A;    /* accent: borders, icons, CTA button, text links */
  --silver:    #A0B4C8;    /* W logomark, primary CTA button on dark bg */
  --cream:     #F7F4EE;    /* pillar strip, alternating section bg */
  --off-white: #F8F5EE;    /* text on dark backgrounds */
  --page-bg:   #E8E8E8;    /* neutral light gray — frames content sections */
  --section-bg:#FFFFFF;    /* standard content section background */
  --border:    #E2DDD5;    /* warm section and card borders */
  --text:      #222222;    /* body text */
  --text-muted:#56687A;    /* card descriptors, secondary text */
  --font-d:    'Marcellus SC', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}


/* =============================================================================
   BASE & GLOBAL
   ============================================================================= */

html { scroll-padding-top: 95px; }

body { background-color: var(--page-bg) !important; }

/* Global link color: navy (replaces site.css blue at every breakpoint) */
a                { color: var(--navy); }
a:hover, a:focus { color: #243A5E; text-decoration: underline; }

/* "Learn more" / section-CTA links: gold */
.text-link                  { color: var(--gold) !important; font-weight: 500; }
.text-link:hover,
.text-link:focus             { color: #a87e47 !important; text-decoration: underline; }


/* =============================================================================
   HEADER — hide legacy elements, render new nav
   ============================================================================= */

/* Hide everything from the old header */
img.site-logo,
#tagline1,
#tagline2,
#contact-bar,
.nav               { display: none !important; }

header             { background: var(--navy); }


/* -- Top bar --------------------------------------------------------------- */
#site-topbar {
  background: var(--dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.28rem 1.25rem;
  font-size: 0.75rem;
  color: rgba(248,245,238,.4);
  letter-spacing: 0.05em;
}
.topbar-location   { display: none; }       /* shown at 768px+ */
#site-topbar a     { color: var(--gold); text-decoration: none; }
#site-topbar a:hover { text-decoration: underline; }


/* -- Main nav bar ---------------------------------------------------------- */
#site-nav-main {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid rgba(192,149,90,.18);
  position: relative;
}


/* -- Logo ------------------------------------------------------------------ */
#site-logo-wrap {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-decoration: none;
}
#site-logo-wrap:hover,
#site-logo-wrap:focus { text-decoration: none; }

#site-w-mark {
  display: block;
  flex-shrink: 0;
  width: 21px;
  height: 28px;
  margin-top: 2px;
}

#site-logo-text {
  font-family: var(--font-d);
  font-size: 0.85rem;
  color: var(--off-white);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
#site-logo-text small {
  display: block;
  font-size: 0.65rem;
  color: rgba(192,149,90,.66);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-body);
  margin-top: 2px;
}


/* -- Desktop nav links ----------------------------------------------------- */
#site-nav-links {
  display: none;           /* shown at 768px+ */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.05rem;
  align-items: center;
}
#site-nav-links a {
  color: rgba(248,245,238,.67);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}
#site-nav-links a:hover,
#site-nav-links a:focus { color: var(--off-white); text-decoration: none; }


/* -- Hamburger: flex child inside #site-nav-main, SVG replaces the white-bg PNG */
#hamburger {
  position:            static       !important;
  top:                 auto         !important;
  left:                auto         !important;
  width:               44px         !important;
  height:              44px         !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='2' y='0' rx='1' fill='%23F8F5EE'/%3E%3Crect width='22' height='2' y='7' rx='1' fill='%23F8F5EE'/%3E%3Crect width='22' height='2' y='14' rx='1' fill='%23F8F5EE'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat    !important;
  background-position: center       !important;
  background-size:     22px 16px    !important;
  background-color:    transparent  !important;
  filter:              none         !important;
  opacity:             0.82;
  cursor:              pointer;
  flex-shrink:         0;
}
#hamburger:hover { opacity: 1 !important; }


/* -- Mobile dropdown ------------------------------------------------------- */
#dropdown_div {
  background:   var(--navy);
  top:          86px   !important;   /* below top bar + nav bar */
  left:         auto   !important;   /* override site.css left: 0 */
  right:        0      !important;   /* anchor to right edge, under hamburger */
  border-top:   1px solid rgba(192,149,90,.14);
  width:        60%;
  max-width:    260px;
  box-shadow:   -4px 6px 16px rgba(0,0,0,.45);
}
a.dropdown {
  background:   var(--navy)              !important;
  color:        rgba(248,245,238,.8)     !important;
  border-color: rgba(192,149,90,.12)     !important;
  font-size:    0.85rem                  !important;
  font-weight:  500                      !important;
}
a.dropdown:hover,
a.dropdown:focus {
  background:   #243A5E   !important;
  color:        var(--gold) !important;
}


/* -- Responsive header ----------------------------------------------------- */
@media (min-width: 768px) {
  /* site.css hides the hamburger at 768px — keep it visible until the full nav kicks in */
  #hamburger          { display: block !important; visibility: visible !important; }
  .topbar-location    { display: inline; }
  #site-logo-text     { font-size: 0.9rem; }
}
@media (min-width: 930px) {
  #site-nav-links     { display: flex; }
  #hamburger          { display: none !important; }
  #dropdown_div       { display: none !important; visibility: hidden !important; }
}
@media (min-width: 992px) {
  #site-nav-links     { gap: 1.35rem; }
  #site-nav-links a   { font-size: 0.75rem; }
}


/* =============================================================================
   HERO — full split layout
   ============================================================================= */

#hero {
  background-image: none     !important;
  background-color: var(--navy) !important;
  display: block             !important;
  min-height: 200px;
  padding: 0                 !important;
  border-bottom: none        !important;
  position: relative;
  overflow: hidden;
}

/* Remove the old hero h1 overlay style from site.css */
#hero h1 {
  background-color: transparent  !important;
  padding: 0                     !important;
  margin: 0 0 0.58rem            !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--off-white);
  font-weight: normal;
  text-align: left               !important;
}

/* Text panel: full width, sits above the W background decoration */
.hero-text-panel {
  background: transparent;
  position: relative;
  z-index: 1;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

/* W mark panel: absolutely positioned background decoration, never covers text */
.hero-image-panel {
  background: transparent;
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 55%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.hero-image-panel svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-panel-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.28rem 0.65rem;
  font-size: 0.68rem;
  color: rgba(192,149,90,.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid rgba(192,149,90,.06);
  font-family: var(--font-body);
}

/* Hero text elements */
.hero-vr {
  width: 1px;
  height: 24px;
  background: var(--gold);
  margin-bottom: 0.72rem;
}
.hero-eyebrow {
  font-size: 0.72rem;
  color: rgba(248,245,238,.34);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.34rem;
  text-align: left !important;
}
.hero-desc {
  color: rgba(248,245,238,.53);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
  line-height: 1.65;
  text-align: left !important;
}
.hero-geo {
  font-size: 0.68rem;
  color: rgba(248,245,238,.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.72rem 0 0;
  text-align: left !important;
}
.hero-geo em {
  color: rgba(192,149,90,.3);
  margin: 0 0.24rem;
  font-style: normal;
}

/* Hero CTA buttons */
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  align-items: flex-start !important;
  margin: 0;
}
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: #0C1828;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.52rem 0.9rem;
  text-decoration: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  transition: background 150ms ease;
}
.btn-gold:hover,
.btn-gold:focus { background: #CFA469; text-decoration: none; }

.btn-ghost {
  display: inline-block;
  border: 1px solid rgba(248,245,238,.24);
  color: rgba(248,245,238,.72);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.52rem 0.9rem;
  text-decoration: none;
  border-radius: 0;
  transition: border-color 150ms ease, color 150ms ease;
}
.btn-ghost:hover,
.btn-ghost:focus {
  border-color: rgba(248,245,238,.52);
  color: var(--off-white);
  text-decoration: none;
}

/* Hero responsive */
@media (min-width: 480px) {
  .hero-cta { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 640px) {
  #hero    { min-height: 240px; }
  #hero h1 { font-size: 1.45rem; }
  .hero-cta { align-items: flex-start !important; } /* override site.css center */
}
@media (min-width: 992px) {
  #hero             { min-height: 270px; }
  #hero h1          { font-size: 1.7rem; }
  .hero-text-panel  { padding: 1.75rem 1.5rem; }
}


/* =============================================================================
   PILLARS STRIP
   ============================================================================= */

#pillars {
  background: var(--cream) !important;
  border-bottom: 1px solid #E8E2D8;
  margin-top: 0 !important;
}
#pillars .container {
  padding-top:    1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.pillar        { text-align: center; }
.pillar-icon   { color: var(--gold); font-size: 1rem; display: block; margin-bottom: 0.28rem; }
#pillars h3    {
  font-size:       0.75rem       !important;
  font-weight:     600           !important;
  color:           var(--navy)   !important;
  letter-spacing:  0.06em        !important;
  text-transform:  uppercase     !important;
  margin:          0 0 0.22rem   !important;
}
#pillars p {
  font-size:   0.82rem;
  color:       #6B7A8D;
  line-height: 1.6;
  text-align:  center !important;
  margin:      0;
}
@media (min-width: 640px) {
  .pillar-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}


/* =============================================================================
   MAIN CONTENT — global rules applied to all pages
   ============================================================================= */

/* Sections flow together; no gap showing page background between them */
main section            { border-bottom: 1px solid var(--border) !important; }
main section + section  { margin-top: 0 !important; }

/* Headings: navy across all pages and breakpoints */
main h1 {
  color:       var(--navy)  !important;
  text-align:  left         !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal !important;
}
main h2 {
  color:       var(--navy)  !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal       !important;
}
main h3 {
  color:       #3A4A5C !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal !important;
}

/* Gold eyebrow label: "PRACTICE AREAS", "THE ATTORNEY", etc. */
.section-eyebrow {
  font-size:      0.72rem;
  color:          var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin:         0 0 0.35rem;
  font-family:    var(--font-body);
  font-weight:    500;
}


/* -- Buttons: flat, squared corners, navy ---------------------------------- */
.btn {
  border-radius: 0     !important;
  box-shadow:    none  !important;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.btn:hover,
.btn:focus {
  box-shadow: none  !important;
  transform:  none  !important;
}

.btn-primary {
  background-color: var(--navy)  !important;
  border-color:     var(--navy)  !important;
  color:            #fff         !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #243A5E  !important;
  border-color:     #243A5E  !important;
  text-decoration:  none;
}

.btn-secondary {
  background-color: #fff          !important;
  color:            var(--navy)   !important;
  border-color:     var(--navy)   !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: rgba(26,40,70,.05) !important;
  text-decoration:  none;
}


/* -- Form elements --------------------------------------------------------- */
input[type=submit] {
  background-color: var(--navy);
  border-color:     var(--navy);
  color:            #fff;
  border-radius:    0;
  cursor:           pointer;
  transition:       background-color 150ms ease;
}
input[type=submit]:hover,
input[type=submit]:focus {
  background-color: #243A5E;
  border-color:     #243A5E;
}

input[type=text]:focus,
textarea:focus {
  border-color: var(--navy)                     !important;
  box-shadow:   0 0 0 3px rgba(26,40,70,.14)    !important;
  outline:      none;
}


/* -- Component accents ----------------------------------------------------- */
.contact-reassurance  { border-left-color: var(--gold)  !important; }
.contact-option::before { color:           var(--navy)  !important; }

.conversion-strip         { background: var(--cream)  !important; border-color: #E0D9CC !important; }
.conversion-strip strong  { color:      var(--navy)   !important; }


/* =============================================================================
   LINK CARDS
   White background, subject-color top border (not left), subtle shadow.
   This completely replaces the old blue-gray card style from site.css.
   ============================================================================= */

.link-card,
.evidence-item {
  background:    #fff                            !important;
  border:        1px solid #E0D9CC              !important;
  border-left:   none                            !important;
  border-top:    3px solid var(--subject-color, var(--gold)) !important;
  border-radius: 4px                             !important;
  box-shadow:    0 1px 6px rgba(26,40,70,.05)   !important;
  color:         var(--text)                     !important;
  text-decoration: none                          !important;
  padding:       0.9rem 1rem                     !important;
}

.link-card:hover,
.link-card:focus {
  border-top-color: var(--subject-color, var(--gold))  !important;
  border-color:     #C8BEB4                             !important;
  box-shadow:       0 4px 14px rgba(26,40,70,.1)       !important;
  transform:        translateY(-1px);
  text-decoration:  none                                !important;
}

/* Remove the old left-side arrow icon entirely */
.link-card::before,
.evidence-item::before {
  content: none    !important;
  display: none    !important;
}

.link-card strong,
.evidence-item strong {
  color: var(--navy) !important;
}

.link-card span,
.evidence-item span {
  color: var(--text-muted);
}

/* Subject palette: aligned with blog pill colors */
.link-card.subject-wage           { --subject-color: #0f6cbf; }
.link-card.subject-discrimination { --subject-color: #6B3A6E; }
.link-card.subject-retaliation    { --subject-color: #9B6914; }
.link-card.subject-harassment     { --subject-color: #8B3450; }
.link-card.subject-severance      { --subject-color: #4B5563; }
.link-card.subject-agreements     { --subject-color: #2A6256; }
.link-card.subject-enforcement    { --subject-color: var(--navy); }


/* =============================================================================
   SECTION-SPECIFIC BACKGROUNDS
   ============================================================================= */

/* Judgment enforcement: warm alternate band */
#judgment-enforcement-section { background: #F3F0E8 !important; }

/* Attorney teaser: very dark navy */
#about-teaser              { background: var(--att-bg) !important; }
#about-teaser .container   { background: transparent   !important; }
#about-teaser h2           { color: var(--off-white) !important; font-family: Georgia, "Times New Roman", serif; }
#about-teaser p            { color: rgba(248,245,238,.5) !important; }
#about-teaser .text-link   { color: var(--gold) !important; }
#about-teaser .text-link:hover { color: var(--off-white) !important; text-decoration: underline; }

/* Attorney photo */
#attorney-photo {
  border-color: var(--gold) !important;
  border-width:  2px        !important;
}
#attorney-photo-link {
  display: block;
  float: left;
  margin-right: 15px;
}
#attorney-photo-link:hover #attorney-photo { opacity: 0.88; }
#attorney-photo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 50%; }

/* Attorney name, subtitle, credential boxes */
.attorney-name {
  font-family: Georgia, "Times New Roman", serif;
  margin:      0.35rem 0 0.18rem;
  font-weight: normal;
}
.attorney-subtitle {
  font-size:      0.72rem;
  color:          rgba(248,245,238,.38);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin:         0 0 0.75rem;
}
.attorney-credentials {
  display:     flex;
  gap:         1.25rem;
  margin-top:  0.85rem;
  padding-top: 0.75rem;
  border-top:  1px solid rgba(192,149,90,.15);
  flex-wrap:   wrap;
}
.attorney-credential strong {
  display:        block;
  font-size:      0.78rem;
  color:          var(--off-white);
  font-weight:    500;
  font-family:    var(--font-d);
  letter-spacing: 0.02em;
}
.attorney-credential span {
  display:        block;
  font-size:      0.7rem;
  color:          rgba(248,245,238,.35);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top:     0.12rem;
}

/* Contact / CTA: navy background */
#contact-teaser            { background: var(--navy)  !important; border-top: none !important; }
#contact-teaser .container { background: transparent  !important; }
#contact-teaser h2         { color: var(--off-white) !important; font-family: Georgia, "Times New Roman", serif; }
#contact-teaser p          { color: rgba(248,245,238,.42) !important; }
#contact-teaser a:not(.btn) { color: var(--gold) !important; }
#contact-teaser a:not(.btn):hover { color: var(--off-white) !important; }

/* CTA buttons on navy: silver primary, ghost secondary */
#contact-teaser .btn-primary {
  background: var(--silver)   !important;
  border-color: var(--silver) !important;
  color: #0C1828              !important;
  font-weight: 600            !important;
}
#contact-teaser .btn-primary:hover,
#contact-teaser .btn-primary:focus {
  background:   #B9C8D5 !important;
  border-color: #B9C8D5 !important;
}
#contact-teaser .btn-secondary {
  background:   transparent               !important;
  border-color: rgba(248,245,238,.28)     !important;
  color:        rgba(248,245,238,.75)     !important;
}
#contact-teaser .btn-secondary:hover,
#contact-teaser .btn-secondary:focus {
  background:   rgba(248,245,238,.06)  !important;
  border-color: rgba(248,245,238,.52)  !important;
  color:        var(--off-white)       !important;
}

/* CTA bar: text left, buttons stacked right */
.cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
}
.cta-text { flex: 1; }
.cta-buttons-stack {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  flex-shrink:    0;
  min-width:      210px;
}
.cta-buttons-stack .btn {
  width:      100%;
  text-align: center;
}
@media (max-width: 639px) {
  .cta-inner          { flex-direction: column; }
  .cta-buttons-stack  { width: 100%; min-width: unset; }
}


/* =============================================================================
   FOOTER
   ============================================================================= */

/* Background on the container guarantees no gap shows between child divs */
#site-footer {
  background:    var(--dark) !important;
  gap:           0           !important;
  display:       block       !important;
}

#footer-top {
  background:    var(--dark) !important;
  border-top:    1px solid rgba(192,149,90,.09);
  padding:       1.6rem 1.25rem 0;
  margin-bottom: 0 !important;
}

/* Override site.css flex layout with CSS grid */
#footer-top .footer-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
  align-items: start;
}
@media (min-width: 640px) {
  #footer-top .footer-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
  }
}

.footer-col h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-size:   1rem;
  color:       rgba(248,245,238,.72);
  font-weight: normal;
  margin:      0 0 0.5rem;
  display:     block;
}

.footer-col address {
  color:       rgba(248,245,238,.52);
  font-style:  normal;
  font-size:   0.9rem;
  line-height: 1.85;
}

.footer-col .no-decoration {
  display:     block;
  font-size:   0.9rem;
  line-height: 1.9;
  color:       rgba(248,245,238,.45) !important;
}
.footer-col .no-decoration:hover,
.footer-col .no-decoration:focus {
  color: rgba(248,245,238,.75) !important;
  text-decoration: underline;
}

/* .footer-contact column removed — CTA is handled by #contact-teaser above the footer */

/* Email link generated by getmale.js — site.css hides it, design.css restores it */
#footer-top a.page-header-top {
  display:         block                  !important;
  color:           rgba(248,245,238,.45)  !important;
  font-size:       0.9rem                 !important;
  line-height:     1.9;
  text-decoration: none;
  overflow-wrap:   anywhere;
  word-break:      break-word;
}
#footer-top a.page-header-top:hover,
#footer-top a.page-header-top:focus {
  color:           rgba(248,245,238,.75) !important;
  text-decoration: underline;
}

#footer-bottom {
  background:       var(--dark)  !important;
  background-image: none         !important;
  border-top:       1px solid rgba(255,255,255,.06);
  color:            rgba(248,245,238,.28);
  padding:          0.78rem 1.25rem;
  font-size:        0.8rem;
  line-height:      1.7;
  text-align:       left;
  margin-top:       0 !important;
}


/* =============================================================================
   BLOG PAGE
   Overrides for blog.css to match the navy/gold design system.
   blog.css loads first (via conditional link in header.asp); these rules win
   via !important and load order.
   ============================================================================= */

/* -- Blog index hero: navy, matching the top-of-page treatment -------------- */

.blog-hero {
  background:    var(--navy) !important;
  border-bottom: 1px solid rgba(192,149,90,.14) !important;
}

/* Breadcrumb nav on navy bg */
.blog-hero small,
.blog-hero nav[aria-label="Breadcrumb"] { color: rgba(248,245,238,.38) !important; }
.blog-hero nav[aria-label="Breadcrumb"] a { color: rgba(248,245,238,.55) !important; }
.blog-hero nav[aria-label="Breadcrumb"] a:hover,
.blog-hero nav[aria-label="Breadcrumb"] a:focus { color: var(--off-white) !important; }

.blog-hero-copy h1 {
  font-family: Georgia, "Times New Roman", serif !important;
  color:       var(--off-white) !important;
  font-weight: normal !important;
}

/* Intro paragraph on navy */
.blog-intro { color: rgba(248,245,238,.52) !important; font-size: 0.9rem !important; }

/* Stats panel on navy */
.blog-hero-panel {
  background:    rgba(255,255,255,.05) !important;
  border-color:  rgba(192,149,90,.18)  !important;
  border-radius: 4px                   !important;
  box-shadow:    none                  !important;
}
.blog-hero-stat strong { color: var(--gold)           !important; font-size: 1.6rem  !important; }
.blog-hero-stat span   { color: rgba(248,245,238,.5)  !important; }

/* CTA link: gold, square, matches .btn-gold */
.blog-hero-cta {
  background:     var(--gold) !important;
  color:          #0C1828     !important;
  border-radius:  0           !important;
  font-weight:    600         !important;
  font-size:      0.78rem     !important;
  letter-spacing: 0.07em     !important;
}
.blog-hero-cta:hover,
.blog-hero-cta:focus { background: #CFA469 !important; text-decoration: none !important; }


/* -- Content section backgrounds ------------------------------------------- */

.blog-featured,
.blog-toolbar,
.blog-grid-section { background: var(--section-bg) !important; }

.blog-topic-links  { background: var(--cream) !important; }


/* -- Search bar ------------------------------------------------------------- */

.blog-search {
  border-color: var(--border) !important;
  border-radius: 0            !important;
  font-size:    0.875rem      !important;
}
.blog-search:focus {
  border-color: var(--navy)                   !important;
  box-shadow:   0 0 0 3px rgba(26,40,70,.12)  !important;
  outline:      none                          !important;
}


/* -- Subject filter chips --------------------------------------------------- */

.subject-chip {
  background:     #fff              !important;
  border-color:   var(--border)     !important;
  color:          var(--navy)       !important;
  border-radius:  0                 !important;
  font-size:      0.72rem           !important;
  letter-spacing: 0.04em            !important;
  padding:        0.4rem 0.75rem    !important;
}
.subject-chip.active {
  background:   var(--navy)      !important;
  border-color: var(--navy)      !important;
  color:        var(--off-white) !important;
}
.subject-chip:hover:not(.active) {
  background:   rgba(26,40,70,.05) !important;
  border-color: rgba(26,40,70,.22) !important;
}


/* -- Featured article card -------------------------------------------------- */

.featured-card {
  border-color:  var(--border)                 !important;
  border-radius: 4px                           !important;
  box-shadow:    0 1px 8px rgba(26,40,70,.06)  !important;
  border-top:    3px solid var(--gold)         !important;
}
.featured-card h3 a { color: var(--navy)      !important; }
.featured-card p    { color: var(--text)      !important; }
.featured-date      { color: var(--text-muted) !important; }


/* -- Blog tile grid --------------------------------------------------------- */

.blog-tile {
  border-color:  var(--border)                !important;
  border-radius: 4px                          !important;
  box-shadow:    0 1px 6px rgba(26,40,70,.05) !important;
}
.blog-tile:hover {
  transform:  translateY(-1px)               !important;
  box-shadow: 0 4px 14px rgba(26,40,70,.10)  !important;
}
.blog-tile h3  { color: var(--navy)       !important; }
.blog-tile p   { color: var(--text)       !important; }
.tile-date     { color: var(--text-muted) !important; }
.tile-readmore { color: var(--gold) !important; font-weight: 500 !important; }


/* -- Load More button ------------------------------------------------------- */

.load-more-btn {
  background:     var(--navy)    !important;
  border-radius:  0              !important;
  text-transform: uppercase      !important;
  letter-spacing: 0.09em         !important;
  font-size:      0.75rem        !important;
  font-weight:    600            !important;
  padding:        0.58rem 1.6rem !important;
  transition:     background 150ms ease;
}
.load-more-btn:hover,
.load-more-btn:focus { background: #243A5E !important; }


/* -- Browse by Topic cards -------------------------------------------------- */

.topic-link-card {
  border-color:  var(--border)                !important;
  border-radius: 4px                          !important;
  box-shadow:    0 1px 6px rgba(26,40,70,.05) !important;
}
.topic-link-card:hover,
.topic-link-card:focus {
  transform:  translateY(-1px)              !important;
  box-shadow: 0 4px 14px rgba(26,40,70,.10) !important;
}
.topic-link-card strong { color: var(--navy)       !important; }
.topic-link-card span   { color: var(--text-muted) !important; }


/* -- Related reading section (individual post pages) ------------------------ */

.related-card              { border-radius: 4px           !important; }
.related-card strong       { color: var(--navy)       !important; }
.related-card span         { color: var(--text-muted) !important; }


/* -- Blog post hero --------------------------------------------------------- */

.blog-post-hero {
  background:    var(--navy) !important;
  border-bottom: 1px solid rgba(192,149,90,.14) !important;
}

/* Breadcrumbs on navy */
.blog-post-hero small,
.blog-post-hero nav[aria-label="Breadcrumb"] { color: rgba(248,245,238,.38) !important; }
.blog-post-hero nav[aria-label="Breadcrumb"] a { color: rgba(248,245,238,.55) !important; }
.blog-post-hero nav[aria-label="Breadcrumb"] a:hover,
.blog-post-hero nav[aria-label="Breadcrumb"] a:focus { color: var(--off-white) !important; }

.blog-post-header h1   { color: var(--off-white)       !important; font-weight: normal !important; }
.blog-post-header small { color: rgba(248,245,238,.38) !important; }
.blog-post-date        { color: rgba(248,245,238,.52)  !important; }
.blog-post-dek         { color: rgba(248,245,238,.67)  !important; }

/* Subject pills on navy: 3-class specificity beats per-subject 2-class rules */
.blog-post-hero .blog-post-meta .subject-pill {
  color:        rgba(248,245,238,.82) !important;
  border-color: rgba(248,245,238,.28) !important;
}


/* -- Blog sidebar cards ----------------------------------------------------- */

.blog-sidebar-card {
  border-color:  var(--border) !important;
  border-radius: 4px           !important;
}


/* -- Blog index page: cream background (tiles stay white) ------------------- */

main.blog-index-main {
  background: var(--cream) !important;
}
main.blog-index-main .blog-featured,
main.blog-index-main .blog-grid-section,
main.blog-index-main .blog-topic-links {
  background: transparent !important;
}


/* -- Blog grid: 2 columns on desktop (mockup spec) -------------------------- */

.blog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }
}


/* -- Blog hero article count (muted stat, right side of hero) --------------- */

.blog-hero-grid {
  align-items: flex-end !important;
}
.blog-article-count {
  flex-shrink: 0;
  text-align:  right;
  padding-bottom: 0.15rem;
}
.blog-article-count strong {
  display:        block;
  font-family:    var(--font-d);
  font-size:      3rem;
  color:          rgba(248,245,238,.10);
  line-height:    1;
  letter-spacing: -0.02em;
}
.blog-article-count span {
  display:        block;
  font-size:      0.56rem;
  color:          rgba(248,245,238,.18);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top:     0.18rem;
}
@media (max-width: 600px) {
  .blog-article-count { display: none !important; }
}


/* -- Subject pills: outlined rectangular badges (mockup style) -------------- */

.subject-pill {
  background:    transparent !important;
  border-radius: 2px         !important;
  border-style:  solid       !important;
  border-width:  1px         !important;
  font-size:     0.6rem      !important;
  letter-spacing: 0.06em    !important;
  text-transform: uppercase  !important;
  padding:       2px 7px     !important;
}
.subject-pill.subject-wage           { color: #0f6cbf !important; border-color: rgba(15,108,191,.40)  !important; }
.subject-pill.subject-discrimination { color: #7a3e7d !important; border-color: rgba(122,62,125,.40)  !important; }
.subject-pill.subject-retaliation    { color: #b7791f !important; border-color: rgba(183,121,31,.40)  !important; }
.subject-pill.subject-harassment     { color: #a63d5a !important; border-color: rgba(166,61,90,.40)   !important; }
.subject-pill.subject-severance      { color: #4b5563 !important; border-color: rgba(75,85,99,.40)    !important; }
.subject-pill.subject-agreements     { color: #2f6f5f !important; border-color: rgba(47,111,95,.40)   !important; }
.subject-pill.subject-enforcement    { color: var(--navy) !important; border-color: rgba(26,40,70,.35) !important; }


/* -- Featured card: 2-column internal layout -------------------------------- */

/* Override blog.css's padding on .featured-card-inner */
.featured-card .featured-card-inner {
  padding:  0         !important;
  display:  flex      !important;
  gap:      0         !important;
}
.featured-card-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem;
}
.featured-card-preview {
  flex-shrink: 0;
  width:       120px;
}
.featured-preview-link {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  height:          100%;
  padding:         1.25rem;
  text-decoration: none;
  background:      var(--navy);
  transition:      background 150ms ease;
}
.featured-preview-link:hover,
.featured-preview-link:focus { background: #243A5E !important; text-decoration: none !important; }
.featured-preview-subject {
  display:        block;
  font-size:      0.58rem;
  color:          var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  0.5rem;
  font-weight:    500;
}
.featured-preview-link strong {
  display:     block;
  color:       var(--off-white) !important;
  font-size:   0.88rem;
  line-height: 1.4;
  font-weight: 500;
  font-family: var(--font-body);
}

@media (max-width: 700px) {
  .featured-card-inner   { flex-direction: column !important; }
  .featured-card-preview { width: 100% !important; min-height: 90px; }
  .featured-preview-link { justify-content: flex-start; }
}


/* -- Body text size: normalize blog 17px overrides to match site 16px ------- */

.blog-post-content p,
.blog-post-content li { font-size: 1rem !important; }

.featured-card p       { font-size: 1rem !important; }

.blog-post-dek         { font-size: 1rem !important; }


/* -- Practice Area sidebar card: subject color accent ----------------------- */

.blog-sidebar-card.subject-wage           { border-left: 3px solid #0f6cbf !important; }
.blog-sidebar-card.subject-discrimination { border-left: 3px solid #7a3e7d !important; }
.blog-sidebar-card.subject-retaliation    { border-left: 3px solid #b7791f !important; }
.blog-sidebar-card.subject-harassment     { border-left: 3px solid #a63d5a !important; }
.blog-sidebar-card.subject-severance      { border-left: 3px solid #4b5563 !important; }
.blog-sidebar-card.subject-agreements     { border-left: 3px solid #2f6f5f !important; }
.blog-sidebar-card.subject-enforcement    { border-left: 3px solid #1b3763 !important; }

.blog-sidebar-card.subject-wage           h2 { color: #0f6cbf !important; }
.blog-sidebar-card.subject-discrimination h2 { color: #7a3e7d !important; }
.blog-sidebar-card.subject-retaliation    h2 { color: #b7791f !important; }
.blog-sidebar-card.subject-harassment     h2 { color: #a63d5a !important; }
.blog-sidebar-card.subject-severance      h2 { color: #4b5563 !important; }
.blog-sidebar-card.subject-agreements     h2 { color: #2f6f5f !important; }
.blog-sidebar-card.subject-enforcement    h2 { color: #1b3763 !important; }


/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-hero {
  background:    var(--navy) !important;
  padding:       3px 0 2rem !important;
  border-bottom: 1px solid rgba(192,149,90,.14) !important;
}
.contact-hero small,
.contact-hero nav[aria-label="Breadcrumb"]       { color: rgba(248,245,238,.38) !important; }
.contact-hero nav[aria-label="Breadcrumb"] a     { color: rgba(248,245,238,.55) !important; }
.contact-hero nav[aria-label="Breadcrumb"] a:hover,
.contact-hero nav[aria-label="Breadcrumb"] a:focus { color: var(--off-white) !important; }

.contact-hero-copy {  }
.contact-hero-copy h1 {
  color:       var(--off-white) !important;
  font-weight: normal           !important;
  margin:      0 0 0.4rem       !important;
  font-size:   42px             !important;
  line-height: 1.1              !important;
}
.contact-hero-sub {
  color:     rgba(248,245,238,.52) !important;
  font-size: 0.9rem                !important;
  margin:    0                     !important;
}

.contact-main {
  background: var(--cream) !important;
  padding:    3rem 0 4rem  !important;
}
.contact-layout {
  display:               grid;
  grid-template-columns: 1fr 390px;
  gap:                   3.5rem;
  align-items:           start;
}

.contact-info-col h2 { margin-top: 0.35rem !important; }
.contact-info-col > p { color: var(--text); }
.contact-info-col > p a { color: var(--navy); }

/* Contact methods card */
.contact-methods {
  background:    white;
  border:        1px solid var(--border);
  border-radius: 4px;
  overflow:      hidden;
  margin:        1.25rem 0;
}
.contact-method {
  display:        flex;
  flex-direction: column;
  gap:            0.18rem;
  padding:        0.88rem 1.2rem;
  border-bottom:  1px solid var(--border);
}
.contact-method:last-child { border-bottom: none; }
.contact-method > strong {
  font-size:      0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold);
  font-weight:    600;
}
.contact-method > a {
  color:       var(--navy)  !important;
  font-weight: 500;
  font-size:   0.97rem;
}
.contact-method > a:hover { color: var(--gold) !important; }
.contact-method .page-header-top {
  color:           var(--navy) !important;
  font-weight:     500;
  font-size:       0.97rem;
  text-decoration: none !important;
}
.contact-method .page-header-top:hover { color: var(--gold) !important; }
.contact-method > span:last-child {
  color:     var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* "What to include" note */
.contact-note {
  background:    white;
  border:        1px solid var(--border);
  border-left:   3px solid var(--gold);
  border-radius: 2px;
  padding:       0.8rem 1rem;
  font-size:     0.86rem;
  color:         var(--text-muted);
  margin:        0 0 1.75rem;
  line-height:   1.5;
}

.contact-info-col h3 { margin-top: 1.75rem !important; }

/* Form column — sticky on desktop */
.contact-form-col {
  position: sticky;
  top:      1.5rem;
}
.contact-form-card {
  background:    white;
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       1.75rem 2rem;
}
.contact-form-card > h2 {
  margin-top:    0      !important;
  margin-bottom: 0.2rem !important;
  font-size:     1.3rem !important;
}
.form-note {
  font-size:   0.78rem;
  color:       var(--text-muted);
  margin:      0.1rem 0 1.25rem;
  line-height: 1.5;
}
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  margin-bottom:  0.85rem;
}
.form-field label {
  font-size:      0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-muted);
  font-weight:    600;
}
.form-field input,
.form-field textarea {
  border:        1px solid var(--border);
  padding:       0.5rem 0.7rem;
  font-size:     0.95rem;
  font-family:   var(--font-body);
  color:         var(--text);
  background:    var(--cream);
  border-radius: 2px;
  width:         100%;
  box-sizing:    border-box;
  transition:    border-color 120ms ease, background 120ms ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline:      none;
  border-color: var(--navy);
  background:   white;
}
.form-field textarea { height: 8rem; resize: vertical; }
.form-char-hint      { font-size: 0.7rem; color: var(--text-muted); }
.contact-submit      { width: 100% !important; margin-top: 0.4rem !important; }
.form-success {
  padding:       1.75rem 1.25rem;
  background:    var(--cream);
  border-radius: 4px;
  text-align:    center;
}
.form-success p { color: var(--navy); font-weight: 500; margin: 0; }

/* Mobile: stack, form on top */
@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-form-col {
    position: static;
    order:    -1;
  }
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-hero,
.emp-hero,
.je-hero,
.wage-hero {
  background:    var(--navy) !important;
  padding:       3px 0 2rem !important;
  border-bottom: 1px solid rgba(192,149,90,.14) !important;
}
.about-hero small,
.about-hero nav[aria-label="Breadcrumb"],
.emp-hero small,
.emp-hero nav[aria-label="Breadcrumb"],
.je-hero small,
.je-hero nav[aria-label="Breadcrumb"],
.wage-hero small,
.wage-hero nav[aria-label="Breadcrumb"]          { color: rgba(248,245,238,.38) !important; }
.about-hero nav[aria-label="Breadcrumb"] a,
.emp-hero nav[aria-label="Breadcrumb"] a,
.je-hero nav[aria-label="Breadcrumb"] a,
.wage-hero nav[aria-label="Breadcrumb"] a        { color: rgba(248,245,238,.55) !important; }
.about-hero nav[aria-label="Breadcrumb"] a:hover,
.about-hero nav[aria-label="Breadcrumb"] a:focus,
.emp-hero nav[aria-label="Breadcrumb"] a:hover,
.emp-hero nav[aria-label="Breadcrumb"] a:focus,
.je-hero nav[aria-label="Breadcrumb"] a:hover,
.je-hero nav[aria-label="Breadcrumb"] a:focus,
.wage-hero nav[aria-label="Breadcrumb"] a:hover,
.wage-hero nav[aria-label="Breadcrumb"] a:focus  { color: var(--off-white)      !important; }

.about-hero-eyebrow,
.emp-hero-eyebrow,
.je-hero-eyebrow,
.wage-hero-eyebrow {
  color:         var(--gold) !important;
  margin-bottom: 0.55rem    !important;
  margin-top:    0          !important;
}
.about-hero-copy h1,
.emp-hero-copy h1,
.je-hero-copy h1,
.wage-hero-copy h1 {
  color:       var(--off-white) !important;
  font-weight: normal           !important;
  margin:      0 0 0.4rem       !important;
  font-size:   42px             !important;
  line-height: 1.1              !important;
}
.about-hero-sub,
.emp-hero-sub,
.je-hero-sub,
.wage-hero-sub {
  color:     rgba(248,245,238,.52) !important;
  font-size: 0.9rem                !important;
  margin:    0                     !important;
}


/* ============================================================
   WAGE & HOUR PAGE
   ============================================================ */

.wage-intro          { background: var(--cream) !important; }
.wage-eval-section   { background: var(--cream) !important; }


/* ============================================================
   JUDGMENT ENFORCEMENT PAGE
   ============================================================ */

.je-intro  { background: var(--cream) !important; }


/* ============================================================
   EMPLOYMENT LAW PAGE
   ============================================================ */

.emp-intro     { background: var(--cream) !important; }
.emp-topic-alt { background: var(--cream) !important; }
.emp-approach  { background: var(--cream) !important; }

/* Intro: 2-col bio + photo */
.about-intro { background: var(--cream) !important; }
.about-intro-layout {
  display:               grid;
  grid-template-columns: 1fr 260px;
  gap:                   3rem;
  align-items:           start;
}
.about-intro-text .section-eyebrow { margin-top: 0 !important; }
.about-intro-text h2                { margin-top: 0.35rem !important; }
.about-intro-photo img {
  width:         100%;
  display:       block;
  border-radius: 4px;
  border:        1px solid var(--border);
}

/* Credential chips inside intro — overrides homepage dark-bg .attorney-credentials styles */
.about-credential-row {
  border-top:  1px solid rgba(192,149,90,.22) !important;
  padding-top: 0.6rem                         !important;
  margin-top:  1.25rem                        !important;
}
.about-credential-row .attorney-credential strong {
  color: var(--navy) !important;
}
.about-credential-row .attorney-credential span {
  color:          var(--text-muted) !important;
  letter-spacing: 0.04em            !important;
}

/* Body prose sections */
.about-section-alt { background: var(--cream) !important; }

.about-list {
  margin:      0.5rem 0 1rem 1.25rem;
  padding:     0;
}
.about-list li {
  margin-bottom: 0.4rem;
  line-height:   1.65;
}

/* Credentials section */
.about-cred-section { background: white !important; }
.about-cred-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2.5rem;
  margin-top:            1.25rem;
}
.about-cred-block h3 {
  font-family:    var(--font-body)  !important;
  font-size:      0.63rem           !important;
  font-weight:    600               !important;
  letter-spacing: 0.1em             !important;
  text-transform: uppercase         !important;
  color:          var(--gold)       !important;
  margin:         0 0 0.75rem       !important;
  padding-bottom: 0.5rem            !important;
  border-bottom:  1px solid var(--border) !important;
}
.about-cred-h3-second { margin-top: 1.75rem !important; }
.about-cred-item {
  display:        flex;
  flex-direction: column;
  gap:            0.12rem;
  margin-bottom:  0.9rem;
}
.about-cred-item strong { color: var(--navy); font-size: 0.95rem; }
.about-cred-item span   { color: var(--text-muted); font-size: 0.84rem; line-height: 1.45; }

.about-profile-links {
  list-style: none;
  padding:    0;
  margin:     0.25rem 0 0;
}
.about-profile-links li              { margin-bottom: 0.35rem; }
.about-profile-links a               { color: var(--navy); font-size: 0.9rem; }
.about-profile-links a:hover         { color: var(--gold); }

/* Mobile */
@media (max-width: 720px) {
  .about-intro-layout {
    grid-template-columns: 1fr;
  }
  .about-intro-photo {
    order:     -1;
    max-width: 220px;
    margin:    0 auto;
  }
  .about-cred-grid {
    grid-template-columns: 1fr;
  }
  .about-credential-row {
    flex-direction: column;
  }
}

/* ============================================================
   SINGLE-SUBJECT PAGE HERO (shared across all leaf pages)
   ============================================================ */

.page-hero {
  background:    var(--navy) !important;
  padding:       3px 0 2rem !important;
  border-bottom: 1px solid rgba(192,149,90,.14) !important;
}
.page-hero small,
.page-hero nav[aria-label="Breadcrumb"]           { color: rgba(248,245,238,.38) !important; }
.page-hero nav[aria-label="Breadcrumb"] a         { color: rgba(248,245,238,.55) !important; }
.page-hero nav[aria-label="Breadcrumb"] a:hover,
.page-hero nav[aria-label="Breadcrumb"] a:focus   { color: var(--off-white)      !important; }
.page-hero-eyebrow {
  color:         var(--gold) !important;
  margin-bottom: 0.55rem    !important;
  margin-top:    0          !important;
}
.page-hero-copy h1 {
  color:       var(--off-white) !important;
  font-weight: normal           !important;
  margin:      0 0 0.4rem       !important;
  font-size:   42px             !important;
  line-height: 1.1              !important;
}
.page-hero-sub {
  color:     rgba(248,245,238,.52) !important;
  font-size: 0.9rem                !important;
  margin:    0                     !important;
}
.page-intro { background: var(--cream) !important; }