/* Phase 4 responsive remediation guardrails.
   Loaded after the preserved Webflow stylesheet on every page. */

html,
body {
  width: 100%;
  max-width: 100%;
}

/* Homepage hero: single Google/Avvo trust-rating pill (mobile-first base styles). */
.hero-trust-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 16px;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(20, 20, 20, 0.15);
  max-width: 100%;
}

.hero-trust-rating svg {
  flex: 0 0 auto;
}

.hero-trust-rating-link {
  color: #141414;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hero-trust-rating-stars {
  color: #f5b400;
}

@media screen and (min-width: 768px) {
  .hero-trust-rating {
    margin: 0 0 20px;
  }

  .hero-trust-rating-link {
    font-size: 14px;
  }
}

/* Homepage hero: on mobile, the "Free Case Review" banner button duplicates
   the bottom "Request Free Case Review" CTA, so hide it below 768px only.
   Desktop keeps it since the bottom CTA is hidden there. */
.home-hero-button-wrapper .cta-button-banner {
  display: none;
}

@media screen and (min-width: 768px) {
  .home-hero-button-wrapper .cta-button-banner {
    display: inline-flex;
  }
}

/* Homepage hero: mobile shows a one-tap CTA button in place of the GHL form;
   desktop restores the inline form and hides the CTA. Mobile-first: the CTA
   is the default, the form column only appears at >=768px. */
.hero-mobile-cta {
  display: block;
  margin: 16px auto 0;
  max-width: 480px;
  width: 100%;
}

.hero-mobile-cta-button {
  display: block;
  width: 100%;
  background: var(--theme-green);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(20, 20, 20, 0.18);
  color: #ffffff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 20px;
  text-align: center;
}

.hero-mobile-cta-button:hover,
.hero-mobile-cta-button:focus-visible {
  background: #183522;
}

.banner-form-right {
  display: none;
}

@media screen and (min-width: 768px) {
  .hero-mobile-cta {
    display: none;
  }

  .banner-form-right {
    display: flex;
  }
}

/* Shared GHL consultation form surfaces. */
.ghl-inline-form {
  border: 0;
  display: block;
  height: 900px;
  max-width: 100%;
  width: 100%;
}

.consultation-dialog {
  background: #f9fbf8;
  border: 2px solid var(--theme-green);
  border-radius: 16px;
  box-sizing: border-box;
  color: #183522;
  font-family: 'Open Sans', sans-serif;
  max-height: min(92dvh, 900px);
  max-width: min(680px, calc(100vw - 24px));
  overflow: hidden;
  padding: 0;
  width: 680px;
}

.consultation-dialog::backdrop { background: rgba(14, 32, 20, 0.68); }
.consultation-dialog-panel { display: flex; flex-direction: column; max-height: min(92dvh, 900px); }
.consultation-dialog-header { align-items: center; background: #f9fbf8; border-bottom: 1px solid rgba(91, 180, 94, 0.35); display: flex; justify-content: space-between; padding: 12px 16px; }
.consultation-dialog-header h2 { color: var(--theme-green); font-family: 'Open Sans', sans-serif; font-size: 1.25rem; line-height: 1.3; margin: 0; }
.consultation-dialog-close { align-items: center; background: #fff; border: 2px solid var(--theme-green); border-radius: 50%; color: #183522; cursor: pointer; display: inline-flex; font-family: 'Open Sans', sans-serif; font-size: 1.75rem; height: 44px; justify-content: center; line-height: 1; min-height: 44px; min-width: 44px; padding: 0; width: 44px; }
.consultation-dialog-close:focus-visible, .consultation-dialog [data-consultation-iframe-src]:focus-within { outline: 3px solid #183522; outline-offset: 3px; }
.consultation-dialog-frame { min-height: 620px; max-height: calc(min(92dvh, 900px) - 60px); overflow: auto; }
.consultation-dialog-iframe { border: 0; display: block; height: 1062px; max-width: 100%; width: 100%; }

@media (max-width: 600px) {
  .ghl-inline-form { height: 900px; }
  .consultation-dialog { max-height: calc(100dvh - 16px); max-width: calc(100vw - 16px); }
  .consultation-dialog-panel { max-height: calc(100dvh - 16px); }
  .consultation-dialog-frame { min-height: 0; max-height: calc(100dvh - 76px); }
  .consultation-dialog-iframe { height: 1062px; }
}

@media (prefers-reduced-motion: reduce) {
  .consultation-dialog, .consultation-dialog::backdrop { scroll-behavior: auto; transition: none; }
}

body {
  overflow-wrap: anywhere;
}

img,
video,
svg {
  max-width: 100%;
}

form,
.w-form,
table {
  max-width: 100%;
}

.nav-dropdown-list,
.w-dropdown-list {
  max-width: calc(100vw - 32px);
}

@media screen and (min-width: 992px) {
  #custom-navbar .nav-dropdown {
    position: relative;
  }

  #custom-navbar .nav-dropdown > .nav-dropdown-list {
    top: 100%;
    right: auto !important;
    left: 0 !important;
    z-index: 1000;
  }

  #custom-navbar .common-sub-menu-dropdown {
    position: relative;
  }

  #custom-navbar .common-sub-menu-dropdown > .w-dropdown-list {
    top: 0;
    right: auto !important;
    left: 100% !important;
    z-index: 1001;
    margin-left: -2px;
    padding-left: 2px;
  }

  #custom-navbar .common-sub-menu-dropdown > .w-dropdown-list.nav-align-left {
    right: 100% !important;
    left: auto !important;
    margin-right: -2px;
    margin-left: 0;
    padding-right: 2px;
    padding-left: 0;
  }

  #custom-navbar .nav-dropdown > .nav-dropdown-list.nav-align-left {
    right: 0 !important;
    left: auto !important;
  }

  #custom-navbar .w-dropdown-list:not(.w--open) {
    display: none !important;
  }

  #custom-navbar .w-dropdown-list.w--open {
    pointer-events: auto;
  }

  #custom-navbar .w-dropdown-toggle:focus-visible,
  #custom-navbar .w-dropdown-list a:focus-visible {
    outline: 3px solid #2f7d32;
    outline-offset: 2px;
  }
}

@media screen and (max-width: 991px) {
  input,
  textarea,
  select,
  .w-input,
  .footer-form-field {
    max-width: 100%;
    font-size: 16px;
  }

  button,
  .w-button,
  input[type="button"],
  input[type="submit"],
  .single-table-item,
  a[href^="tel:"] {
    min-height: 44px;
  }

  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
  }

  .single-table-item {
    align-items: center;
  }
}

@media screen and (max-width: 479px) {
  .footer-form-field {
    padding-right: 16px;
    font-size: 16px;
  }

  .footer-form-submit {
    width: 100%;
    margin-top: 8px;
    position: static;
  }

  .footer-form-block {
    display: block;
  }
}

/* Slim, compact, accessible table of contents */
.table-of-contents {
  padding-block: 32px !important;
}

.table-of-contents .center-heading {
  margin-bottom: 14px !important;
  font-size: 1.15rem !important;
}

.table-of-contents .table-of-content-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px !important;
}

.table-of-contents .single-table-item {
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 12px !important;
  align-items: center;
  gap: 8px;
}

.table-of-contents .single-table-item .text-block-9 {
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
}

.table-of-contents .single-table-item .icon-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

@media screen and (max-width: 991px) {
  .table-of-contents {
    padding-block: 20px !important;
  }

  .table-of-contents .table-of-content-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  .table-of-contents .single-table-item {
    padding: 7px 10px !important;
  }
}

@media screen and (max-width: 479px) {
  .table-of-contents {
    padding-block: 12px !important;
  }

  .table-of-contents .center-heading {
    margin-bottom: 8px !important;
    font-size: 1rem !important;
  }

  .table-of-contents .table-of-content-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px !important;
  }

  .table-of-contents .single-table-item {
    min-height: 44px;
    padding: 5px 10px !important;
  }

  .table-of-contents .single-table-item .text-block-9 {
    font-size: 13px;
    line-height: 1.2;
  }
}

/* ===== Nav palette + desktop usability =====
   Light near-white surfaces + eucalyptus green (var(--theme-green)).
   These overrides land after the per-page embedded #custom-navbar styles,
   which set a black collapsed menu and a grey nav bar. */

/* Nav bar: near-white surface instead of the grey #d9d9d9. */
#custom-navbar {
  background-color: #ffffff;
}

/* Collapsed (mobile/tablet) menu: near-white, not black. */
@media screen and (max-width: 991px) {
  #custom-navbar ul.nav-menu {
    background-color: #ffffff !important;
  }

  /* Readable dark labels; override the blanket white-text rule. */
  #custom-navbar ul.nav-menu li * {
    color: #141414 !important;
  }

  /* Current/active page in eucalyptus. */
  #custom-navbar ul.nav-menu li a[aria-current="page"],
  #custom-navbar ul.nav-menu li a.w--current,
  #custom-navbar ul.nav-menu li a.active-link {
    color: var(--theme-green) !important;
  }

  /* Consultation CTA keeps white text on its green fill. */
  #custom-navbar ul.nav-menu li .contact-btn-nav {
    color: #ffffff !important;
  }

  /* Hamburger button stays eucalyptus when open (was black). */
  #custom-navbar .menu-button-2.w--open {
    background-color: var(--theme-green) !important;
  }

  /* Dropdown link hover inside the collapsed menu. */
  #custom-navbar ul.nav-menu .w-dropdown-list a:hover {
    color: var(--theme-green) !important;
  }
}

/* Desktop (>=992px) usability: clear hover/focus states. */
@media screen and (min-width: 992px) {
  #custom-navbar .w-dropdown-toggle:hover,
  #custom-navbar .w-dropdown-toggle:focus-visible {
    color: var(--theme-green);
  }

  #custom-navbar .w-dropdown-list a:hover {
    color: var(--theme-green);
    background-color: #f2f8f2;
  }

  /* Desktop keeps its own nav CTA pill; the mobile-only drawer button never renders here. */
  #custom-navbar .mobile-menu-cta-item {
    display: none;
  }
}

/* ===== Mobile navigation: accordion drawer (<992px) =====
   Flattens the desktop mega-menu's floating popovers into an in-flow,
   one-branch-open-at-a-time accordion with 48px touch targets, a single
   left-aligned text column, and hairline dividers instead of card shadows. */
@media screen and (max-width: 991px) {
  /* The drawer overlays below the fixed ~98px header; deep accordion
     branches can exceed one screen, so it needs its own scroll instead of
     letting rows run off the bottom unreachably. */
  #custom-navbar [data-nav-menu-open],
  #custom-navbar .w-nav-menu {
    max-height: calc(100dvh - 98px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Every dropdown level becomes a full-width row; no floating popovers. */
  #custom-navbar .w-dropdown,
  #custom-navbar .nav-dropdown,
  #custom-navbar .common-sub-menu-dropdown {
    display: block;
    width: 100%;
  }

  #custom-navbar .nav-dropdown-list,
  #custom-navbar .w-dropdown-list {
    position: static !important;
    display: none;
    width: 100%;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Visibility is driven by our own data-nav-open flag, not Webflow's
     .w--open class: Webflow's interactions engine reasserts its own class
     state shortly after a tap, which fights any code toggling .w--open
     directly. data-nav-open is ours alone, so nothing else touches it. */
  #custom-navbar .w-dropdown[data-nav-open="true"] > .nav-dropdown-list,
  #custom-navbar .w-dropdown[data-nav-open="true"] > .w-dropdown-list {
    display: block !important;
  }

  /* Top-level rows: Home, Services, About the Firm, Learn & Contact. */
  #custom-navbar ul.nav-menu > li {
    border-bottom: 1px solid #e5e7eb;
  }

  #custom-navbar ul.nav-menu > li:last-child {
    border-bottom: 0;
  }

  #custom-navbar .header-nav-link,
  #custom-navbar .nav-dropdown-toggle {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 44px 12px 4px;
    font-size: 18px;
    font-weight: 600;
    color: #1a2b22;
  }

  /* Sub-level rows: single left-aligned column, indented, hairline dividers.
     .sub-parent-link is excluded here on purpose: it always lives directly
     inside its own row's .w-dropdown-toggle (DUI, DUI Penalties, License
     Suspension are all toggle labels), and the toggle already carries the
     row's padding-left as a flex container. Giving the anchor its own
     padding-left on top of that doubles the indent for every toggle row
     relative to plain .w-dropdown-link rows at the same depth. */
  #custom-navbar .w-dropdown-list .w-dropdown-toggle,
  #custom-navbar .w-dropdown-list .w-dropdown-link {
    display: flex !important;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 10px 40px 10px 1.25rem;
    font-size: 16px;
    font-weight: 500;
    color: #1a2b22;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #e5e7eb;
  }

  #custom-navbar .w-dropdown-list .sub-parent-link {
    display: flex !important;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #1a2b22;
  }

  /* Each deeper nesting level indents a bit further. !important is required
     here: a page-embedded legacy rule pins every plain .w-dropdown-link to
     padding-left: 36px !important, which would otherwise flatten every
     level-3+ link (offenses, evidence sub-items, driving-offense sub-items)
     back to the level-2 indent regardless of its real nesting depth. */
  #custom-navbar .w-dropdown-list .w-dropdown-list .w-dropdown-toggle,
  #custom-navbar .w-dropdown-list .w-dropdown-list .w-dropdown-link {
    padding-left: 2.25rem !important;
  }

  #custom-navbar .w-dropdown-list .w-dropdown-list .w-dropdown-list .w-dropdown-toggle,
  #custom-navbar .w-dropdown-list .w-dropdown-list .w-dropdown-list .w-dropdown-link {
    padding-left: 3.25rem !important;
  }

  /* Chevron: right (collapsed) rotating to down (expanded); reuses Webflow's
     built-in dropdown-arrow glyph instead of a new icon asset. The box is
     enlarged to a full-height 44px tap zone so the "expand without leaving
     the page" affordance is comfortably touchable on its own. */
  #custom-navbar .w-icon-dropdown-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 44px;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    transition: transform .2s ease;
    color: #1a2b22;
  }

  #custom-navbar .w-dropdown[data-nav-open="true"] > .w-dropdown-toggle .w-icon-dropdown-toggle {
    transform: rotate(0deg);
  }

  /* Old header "Consultation" pill is replaced by the drawer's bottom CTA. */
  #custom-navbar ul.nav-menu > li.mobile-margin-top-10 {
    display: none;
  }

  .mobile-menu-cta-item {
    border-bottom: 0 !important;
  }

  .mobile-menu-cta {
    padding: 16px 4px 4px;
    margin-top: 8px;
  }

  .mobile-menu-cta .mobile-menu-cta-button {
    box-shadow: 0 4px 10px rgba(20, 20, 20, 0.18);
  }
}

/* Sticky-header tap-to-call: always visible in the persistent bar (not
   tucked inside the hamburger drawer), on both desktop and mobile. */
#custom-navbar .navbar-phone-link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--theme-green);
  text-decoration: none;
  white-space: nowrap;
}

#custom-navbar .navbar-phone-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

#custom-navbar .navbar-phone-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

@media screen and (min-width: 992px) {
  /* The legacy desktop nav row runs with zero horizontal slack: its flex
     items shrink to fit, and since every nav link has its own
     white-space: nowrap protecting it from shrinking, the "Consultation"
     button (the one item without that protection) is what actually
     absorbs any width loss, collapsing to a sliver and wrapping its own
     text letter-by-letter. Adding the phone chip removes ~150px of slack
     that row didn't have to spare, so before letting it join the row we
     reclaim room (tighter gap, smaller logo) and protect the button the
     same way its siblings already are. */
  #custom-navbar .navbar-wrapper-3 {
    gap: 24px;
  }

  #custom-navbar .navbar-brand-2 {
    max-width: 170px;
  }

  #custom-navbar ul.nav-menu > li {
    flex-shrink: 0;
  }

  #custom-navbar .nav-button-wrapper .button-primary {
    white-space: nowrap;
  }

  #custom-navbar .navbar-phone-link {
    margin-left: 4px;
  }
}

@media screen and (max-width: 991px) {
  /* Logo shrinks a bit so the phone number and hamburger both fit the
     top bar without crowding at typical phone widths. */
  #custom-navbar .navbar-brand-2 {
    max-width: 150px;
  }

  #custom-navbar .navbar-wrapper-3 {
    gap: 10px;
  }

  #custom-navbar .navbar-phone-link {
    margin-left: auto;
  }

  #custom-navbar .navbar-phone-text {
    font-size: 15px;
  }
}

@media screen and (max-width: 360px) {
  /* At the narrowest phones, drop to a tap-to-call icon only so nothing
     wraps or crowds the hamburger button. */
  #custom-navbar .navbar-phone-text {
    display: none;
  }
}