/* ==========================================================================
   site-overrides.css
   Loaded AFTER public/theme/pestagent.webflow.css (see (site)/layout.tsx).
   Small mobile-layout corrections for behaviour the vendored Webflow theme
   expects its runtime (webflow.js) to supply, which this rebuild does not ship.
   Every rule is scoped inside a max-width media query or to a state class that
   only appears on mobile, so desktop (>991px) is never affected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile navbar (navbar5).
   The theme collapses .w-nav-menu at <=991px (via data-collapse="medium") and
   reveals the .w-nav-button hamburger, but leaves the open/closed toggle to
   webflow.js. The Header (client component) toggles the .nav-open state class
   instead; these rules present the panel as a full-width dropdown below the bar.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Home pest picker ("Select a pest").
   In the original the picker is nested INSIDE the hero section, so there is a
   single section padding between the trust avatars and the pest cards. The
   rebuild renders it as its own section (`.is-pest-label`) that immediately
   follows the hero, which would stack two `padding-section-large` blocks and
   open a large gap. Collapse the top padding so the cards sit close under the
   hero, matching the original composition. Services (large H2 variant) keeps
   its full padding. All widths.
   -------------------------------------------------------------------------- */
.section_services_pests-list.is-pest-label .padding-section-large {
  padding-top: 0;
}

@media screen and (max-width: 991px) {
  /* .navbar5_menu is styled position:absolute / height:100dvh by the theme; it
     only lacks the anchor offsets and the visible state. */
  .navbar5_component.nav-open .navbar5_menu {
    display: block;
    top: 100%;
    left: 0;
    right: 0;
  }
}

/* --------------------------------------------------------------------------
   Article Table of Contents (blog-post_body_sidebar).
   At <=991px the Webflow theme turns the TOC into a tappable accordion bar:
   the heading becomes a padded secondary-background row with a chevron
   (.editorial-standards_blog-post-body_accordion-icon, which the theme reveals
   only on mobile), and the link list is collapsed until the bar is tapped.
   The original mobile design shows this bar CLOSED by default (see the
   webflow-mcp-export mobile screenshots). The theme ships every visual hook but
   left the open/closed toggle to webflow.js, which this rebuild does not load;
   the TableOfContents client component supplies the .is-open state class, and
   these rules collapse/expand the list. Desktop (>991px) never sees any of it.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .blog-post_body_sidebar > .blog-post-body_link-content,
  .blog-post_body_sidebar > .spacer-xsmall {
    display: none;
  }

  .blog-post_body_sidebar.is-open > .blog-post-body_link-content {
    display: grid;
  }

  .blog-post_body_sidebar.is-open > .spacer-xsmall {
    display: block;
  }

  .editorial-standards_blog-post-body_sidebar-heading {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 0.5rem;
  }

  .editorial-standards_blog-post-body_accordion-icon {
    transition: transform 0.2s ease;
  }

  .blog-post_body_sidebar.is-open .editorial-standards_blog-post-body_accordion-icon {
    transform: rotate(180deg);
  }
}

/* --------------------------------------------------------------------------
   Ressources nav dropdown (controlled by React; webflow.js not shipped).
   The theme hides .w-dropdown-list and relies on webflow.js to open it. The
   Header toggles an .is-open class instead. Works on BOTH breakpoints (desktop
   click-to-open, mobile in-flow accordion). Items carry a pest thumbnail +
   divider to match the original.
   -------------------------------------------------------------------------- */
.navbar5_menu-dropdown .w-dropdown-list { display: none; }
.navbar5_menu-dropdown.is-open .w-dropdown-list { display: block; }
.navbar5_dropdown-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.navbar5_menu-dropdown .dropdown-chevron { transition: transform 0.2s ease; }
.navbar5_menu-dropdown.is-open .dropdown-chevron { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Ressources MEGA MENU (desktop): full-width panel (via .w--open from the theme),
   two columns — LEFT pests (thumb + name + description, theme dividers), RIGHT a
   green "Featured articles" panel. The green bg was inline in Webflow (not in the
   vendored CSS), so paint it here and extend it to the viewport's right edge.
   -------------------------------------------------------------------------- */
/* Constrain the mega-menu CONTENT to the site container (80rem) and center it,
   so on wide/ultra-wide monitors the two columns don't fling to the screen
   edges with a giant gap. The panel bg (+ green) still spans full width. */
.navbar5_dropdown-content {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}
.navbar5_dropdown-content-right { background-color: #e8f1ea; }
.navbar5_dropdown-content-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -100vw;
  background: #e8f1ea;
  z-index: 0;
}
.navbar5_dropdown-content-wrapper { position: relative; z-index: 1; }
.navbar5_blog-image { width: 100%; height: auto; border-radius: 8px; display: block; }
.navbar5_icon-wrapper .icon-1x1-large { width: 3rem; height: 3rem; object-fit: contain; }

/* --------------------------------------------------------------------------
   Mobile nav open panel: stack links vertically (the theme leaves .navbar5_link
   inline, which ran "About Us" and "Services" together), stack the CTAs, and
   render the Ressources dropdown as an in-flow accordion.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .navbar5_component.nav-open .navbar5_menu-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }
  .navbar5_component.nav-open .navbar5_link {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
  }
  .navbar5_component.nav-open .navbar5_menu-dropdown { width: 100%; }
  .navbar5_component.nav-open .navbar5_dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.75rem 0;
  }
  /* In-flow (not floating) accordion list on mobile. */
  .navbar5_component.nav-open .navbar5_menu-dropdown.is-open .w-dropdown-list {
    position: static;
    box-shadow: none;
    padding: 0;
    background: transparent;
    border: 0;
    width: auto;
    inset: auto;
  }
  /* The mega grid collapses to a single stacked column on mobile (the green
     Featured column is hidden via .hide-tablet). */
  .navbar5_component.nav-open .navbar5_dropdown-content { display: block; }
  .navbar5_component.nav-open .navbar5_dropdown-content-left { padding: 0; }
  .navbar5_component.nav-open .navbar5_dropdown-link {
    padding: 0.6rem 0;
  }
  .navbar5_component.nav-open .navbar5_icon-wrapper .icon-1x1-large {
    width: 2.25rem;
    height: 2.25rem;
  }
  .navbar5_component.nav-open .navbar5_menu-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .navbar5_component.nav-open .navbar5_menu-right .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Article breadcrumb overflow on mobile. The trail sat flush to (and past) the
   left edge; give it the standard 5% gutter and let it wrap.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .blog-post-header3_breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Pest picker: at <=479px the grid is 2 columns, leaving the 5th ("Other") card
   alone with an empty cell beside it. Span it full width, matching the original.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .pest-button-group_component > .pest-button-group_card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Pest hub hero: the breadcrumb section already sits directly above the hero,
   so `padding-section-large` left a large empty gap between "> Mice" and the
   "Mice control" H1. Collapse the hero's TOP padding (keep the bottom) so the
   headline sits right under the trail. Tighter still on mobile.
   -------------------------------------------------------------------------- */
.is-pesthub-hero .padding-section-large {
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .is-pesthub-hero .padding-section-large {
    padding-top: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Informative article figures (visual-semantic illustrations under /figures/*).
   Framed illustration + centered caption; scales full-width and stacks on
   mobile. Works whether or not the body wrapper carries the .w-richtext class.
   -------------------------------------------------------------------------- */
.pa-figure {
  margin: 1.75rem 0;
}
.pa-figure > div {
  margin: 0;
}
.pa-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #ffffff;
}
.pa-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #667085;
  text-align: center;
}