/* ============================================================================
   Barry Injury Law — component / interactive / responsive layer (loaded LAST).

   The pages are built with verbatim inline styles from the design handoff. This file
   only supplies what inline styles can't: :hover / :focus / active states, the JS-driven
   components (mobile menu, reviews carousel, contact form), and responsive behavior.

   CLASS CONTRACT for page fragments (apply these hooks; everything else stays inline):
     .btn-gold / .btn-outline / .btn-navy / .btn-outline-gold  → button hover states
     .pa-card  (+ optional .pa-card__arrow)  → practice-area / link card hover lift
     details.accordion > summary             → FAQ / Case Results accordion ("+" → "×")
     [data-carousel] .carousel-track / .carousel-card / [data-carousel-prev|next] / [data-carousel-dot]
                                              → reviews carousel (3 cards/page)
     form[data-contact-form] + .contact-success  → contact form submit → success panel
     .field  (inputs/textarea)               → gold focus border
     .r-pad                                   → shrink large hero inner padding on mobile
   Header/footer hooks (.site-nav__link, .nav-toggle, .mobile-menu, .footer-legal) are
   wired in header.html / footer.html and driven by widgets.js — don't reinvent them.
   ============================================================================ */

/* ---- Header nav --------------------------------------------------------- */
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav__link { transition: color .18s ease; }
.site-nav__link:hover { color: #fff !important; }
.site-nav__link.is-active { color: #F3A640 !important; font-weight: 800 !important; }
.btn-gold.is-active { color: #0c1322 !important; } /* the gold CTA button never recolors */

/* ---- Buttons ------------------------------------------------------------ */
.btn-gold, .btn-outline, .btn-navy, .btn-outline-gold {
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-gold:hover { filter: brightness(1.07); }
.btn-outline:hover { background: rgba(255,255,255,.10) !important; }
.btn-outline-gold:hover { background: #F3A640 !important; color: #0c1322 !important; }
.btn-navy:hover { filter: brightness(1.12); }

/* ---- Hamburger + mobile menu (hidden on desktop) ------------------------ */
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; transition: .2s; }
.mobile-menu { display: none; }
.mobile-menu:not([hidden]) {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 1000; background: #07101f;
}
.mobile-menu__nav { display: flex; flex-direction: column; padding: 8px 24px 0; flex: 1; overflow-y: auto; }
.mobile-menu__nav .site-nav__link {
  display: flex; align-items: center; gap: 16px; padding: 21px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: 'Mulish', sans-serif; font-weight: 800; font-size: 23px;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.mobile-menu__nav .site-nav__link span {
  font-size: 11px; color: #F3A640; width: 24px; font-weight: 800;
}
.mobile-menu__nav .site-nav__link.is-active { color: #F3A640 !important; }
.mobile-menu__close { position: relative; width: 28px; height: 28px; }
.mobile-menu__close span {
  position: absolute; top: 13px; left: 2px; width: 24px; height: 2px; background: #F3A640;
}
.mobile-menu__close span:first-child { transform: rotate(45deg); }
.mobile-menu__close span:last-child { transform: rotate(-45deg); }
body.menu-open { overflow: hidden; }

/* ---- Practice-area / link cards (hover lift) ---------------------------- */
.pa-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
.pa-card:hover { transform: translateY(-4px); border-color: #F3A640 !important; box-shadow: 0 24px 50px -30px rgba(0,36,89,.45); }
.pa-card__arrow { transition: transform .18s ease; }
.pa-card:hover .pa-card__arrow { transform: translateX(5px); }

/* ---- Accordion (native <details>) --------------------------------------- */
details.accordion { }
details.accordion > summary { list-style: none; cursor: pointer; }
details.accordion > summary::-webkit-details-marker { display: none; }
.accordion__icon { display: inline-block; transition: transform .2s ease; line-height: 1; }
details.accordion[open] .accordion__icon { transform: rotate(45deg); } /* "+" → "×" */

/* ---- Reviews carousel --------------------------------------------------- */
[data-carousel] { overflow: hidden; }
.carousel-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.carousel-card { flex: 0 0 calc((100% - 48px) / 3); margin-right: 24px; }
[data-carousel-prev], [data-carousel-next] {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
[data-carousel-prev]:hover, [data-carousel-next]:hover { background: #F3A640 !important; color: #0c1322 !important; border-color: #F3A640 !important; }
[data-carousel-dot] { transition: width .3s ease, background-color .3s ease; cursor: pointer; }

/* ---- Contact form ------------------------------------------------------- */
.field { transition: border-color .18s ease, box-shadow .18s ease; }
.field:focus { outline: none; border-color: #F3A640 !important; box-shadow: 0 0 0 3px rgba(243,166,64,.18); }
.contact-success { display: none; }

/* ---- Footer ------------------------------------------------------------- */
.footer-link, .footer-legal { transition: color .18s ease; }
.footer-link:hover { color: #fff !important; }
.footer-legal:hover { color: #cdd9e8 !important; }
.footer-legal.is-active { color: #F3A640 !important; }

/* ============================================================================
   Responsive — the design is desktop-first inline; these collapse it gracefully.
   ============================================================================ */
@media (max-width: 980px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header { padding: 14px 20px !important; }
  .site-header__logo { height: 64px !important; }
}

@media (max-width: 860px) {
  /* Collapse every multi-column grid (heroes, card grids) to a single column. */
  main section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  main section [style*="gap:64px"], main section [style*="gap: 64px"] { gap: 28px !important; }
  /* Section-level horizontal padding (most sections set it on the <section>). */
  main > section, main section { padding-left: 22px !important; padding-right: 22px !important; }
  /* Hero inner content blocks opt in via .r-pad. */
  .r-pad { padding: 44px 22px !important; }
  /* Footer goes single-column. */
  .site-footer__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .site-footer { padding: 44px 22px 28px !important; }
  .site-footer__bar { flex-direction: column; align-items: flex-start !important; }
  /* Carousel shows fewer cards as it narrows (JS reads --cards). */
  .carousel-card { flex-basis: calc((100% - 24px) / 2) !important; }
}

@media (max-width: 640px) {
  main h1 { font-size: 38px !important; line-height: 1.02 !important; }
  main h2 { font-size: 28px !important; }
  main h3 { font-size: 18px !important; }
  .carousel-card { flex-basis: 100% !important; margin-right: 24px !important; }
}