/* ==========================================================================
   pa-ds.css: the Pest Agent design system (Directory v3 style), sitewide.
   Owner, admin chat 2026-10-15: "update the whole website elements with the
   new design style of the /pest-control-companies folder".
   Source of truth: docs/design/directory-profile (hub.css and the 3 mockups),
   as built in src/components/templates/BestHubV3.css (PR #21).

   Loaded by src/app/(site)/layout.tsx AFTER the Webflow theme and
   site-overrides.css (precedence "theme-ds"), so equal specificity wins.

   1. Tokens: the ONE source. BestHubV3.css (.hv3), BestApple.css (.cv3),
      BestV2b.css (.pa-v2b) and search.module.css read these variables.
   2. Components: .pa-btn (src/components/ui/Button.tsx), .pa-lk, .pa-panel,
      .pa-crumbs, .pa-faq, .pa-input.
   3. Theme bridge: the Webflow (Client-First) classes still used by the CMS
      blocks, the header and the footer, mapped onto the same tokens.
   Style only: nothing here hides text, changes copy or reorders content.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --pa-g: #327766;          /* action green (5.2:1 on white) */
  --pa-ink: #12453b;        /* text */
  --pa-dk: #142f2c;         /* hero / closing band */
  --pa-mint: #e8f1ea;
  --pa-tint: #f6faf7;       /* row hover */
  --pa-od: rgba(255, 255, 255, .86); /* body text on the band */
  --pa-od2: #9fd0bd;        /* small text on the band */
  --pa-mute: #52625e;       /* secondary text (6.3:1 on white) */
  --pa-bg2: #f5f6f5;        /* the one near-white surface */
  --pa-hair: #e1e7e4;       /* hairlines */
  --pa-field: #c3cfca;      /* input borders, radios */
  --pa-r: 16px;
  --pa-r-s: 12px;
  --pa-font: var(--font-jakarta), "Plus Jakarta Sans", system-ui, sans-serif;
  --pa-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --pa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pa-spring: cubic-bezier(0.34, 1.35, 0.55, 1);
  --pa-dur-1: 130ms;
  --pa-dur-2: 230ms;
  --pa-dur-3: 320ms;
  --pa-sec: 56px;           /* section rhythm: 56 mobile, 80 from 768 */
  --pa-gut: 20px;           /* page gutter: 20 mobile, 40 from 768 */
  /* type scale (mobile, then 768+) */
  --pa-display: 32px;
  --pa-h2: 24px;
  --pa-h3: 20px;
  --pa-end: 28px;
}
@media (min-width: 768px) {
  :root { --pa-sec: 80px; --pa-gut: 40px; --pa-display: 44px; --pa-h2: 30px; --pa-h3: 22px; --pa-end: 44px; }
}

/* 2. Components ------------------------------------------------------------ */

/* Buttons: one pill, three variants, two sizes. Doubled class to beat the
   scoped resets of the templates (.hv3 a, .cv3 a) and the theme's button{}. */
.pa-btn.pa-btn,
.page-wrapper .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; max-width: 100%; padding: 10px 24px; border: 0; border-radius: 999px;
  font-family: var(--pa-font); font-size: 16px; font-weight: 650; line-height: 1.2;
  text-align: center; text-decoration: none; white-space: normal; text-wrap: balance; cursor: pointer;
  transition: background-color var(--pa-dur-1) var(--pa-ease-out), color var(--pa-dur-1) var(--pa-ease-out), box-shadow var(--pa-dur-1) var(--pa-ease-out), transform var(--pa-dur-2) var(--pa-spring);
}
.pa-btn.pa-btn:active, .page-wrapper .button:active { transform: scale(.97); transition-duration: 90ms; }
.pa-btn.pa-btn:focus-visible { outline: 3px solid var(--pa-g); outline-offset: 2px; }
.pa-btn.pa-btn[disabled] { opacity: .6; cursor: default; }
.pa-btn--g.pa-btn--g, .page-wrapper .button { background: var(--pa-g); color: #fff; box-shadow: none; }
.pa-btn--g.pa-btn--g:hover, .page-wrapper .button:hover { background: var(--pa-ink); color: #fff; }
.pa-btn--w.pa-btn--w { background: #fff; color: var(--pa-ink); box-shadow: none; }
.pa-btn--w.pa-btn--w:hover { background: var(--pa-mint); color: var(--pa-ink); }
.pa-btn--o.pa-btn--o, .page-wrapper .button.is-secondary { background: transparent; color: var(--pa-g); box-shadow: inset 0 0 0 1.5px var(--pa-g); }
.pa-btn--o.pa-btn--o:hover, .page-wrapper .button.is-secondary:hover { background: var(--pa-g); color: #fff; }
/* outline on the dark band */
.pa-btn--ow.pa-btn--ow { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.pa-btn--ow.pa-btn--ow:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pa-btn--w.pa-btn--w:focus-visible, .pa-btn--ow.pa-btn--ow:focus-visible { outline-color: #fff; }
.pa-btn--sm.pa-btn--sm, .page-wrapper .button.is-small { min-height: 44px; padding: 8px 20px; font-size: 15px; }
.pa-btn--block.pa-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) { .page-wrapper .button, .pa-btn.pa-btn { transition: none; } }

/* Text link with a chevron */
.pa-lk { color: var(--pa-g); font-weight: 600; text-decoration: none; }
.pa-lk:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Panel: the one card surface (bg2 on white, white on bg2) */
.pa-panel { padding: 22px 20px; border-radius: var(--pa-r); background: var(--pa-bg2); }
@media (min-width: 992px) { .pa-panel { padding: 28px; } }

/* Breadcrumbs */
.pa-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--pa-mute); }
.pa-crumbs a { color: inherit; text-decoration: none; }
.pa-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Inputs */
.pa-input {
  width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--pa-field); border-radius: var(--pa-r-s);
  background: #fff; color: var(--pa-ink); font: inherit; font-size: 16px;
}
.pa-input:focus { outline: 2px solid var(--pa-g); outline-offset: -1px; border-color: var(--pa-g); }

/* 3. Theme bridge (Webflow classes) ---------------------------------------- */

/* Base type and color */
.page-wrapper { font-family: var(--pa-font); color: var(--pa-ink); -webkit-font-smoothing: antialiased; }
.page-wrapper :focus-visible { outline: 3px solid var(--pa-g); outline-offset: 2px; }
/* The theme's light neutral (#699686) fails AA on white: secondary text uses the mute token. */
.page-wrapper .text-color-secondary { color: var(--pa-mute); }

/* Gutter and width: the directory's 1200 px wrap */
.page-wrapper .padding-global { padding-left: var(--pa-gut); padding-right: var(--pa-gut); }
.page-wrapper .container-large { max-width: 1120px; }

/* Section rhythm */
.page-wrapper .padding-section-large { padding-top: var(--pa-sec); padding-bottom: var(--pa-sec); }
.page-wrapper .padding-section-medium { padding-top: calc(var(--pa-sec) * .8); padding-bottom: calc(var(--pa-sec) * .8); }
.page-wrapper .padding-section-small { padding-top: calc(var(--pa-sec) * .6); padding-bottom: calc(var(--pa-sec) * .6); }

/* Headings: display / h2 / h3 of the directory */
.page-wrapper .heading-style-h1 { font-size: var(--pa-display); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.page-wrapper .heading-style-h2 { font-size: var(--pa-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.page-wrapper .heading-style-h3 { font-size: var(--pa-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
/* An H1 that carries a smaller heading class (article, glossary term) keeps the display size. */
.page-wrapper h1.heading-style-h2,
.page-wrapper h1.heading-style-h3 { font-size: var(--pa-display); line-height: 1.08; letter-spacing: -.035em; text-wrap: pretty; }
.page-wrapper .heading-style-h4 { font-size: var(--pa-h3); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.page-wrapper .heading-style-h5 { font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.page-wrapper .heading-style-h6 { font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.015em; }
.page-wrapper .text-size-medium { font-size: 16px; line-height: 1.6; }
.page-wrapper .text-size-large { font-size: 18px; line-height: 1.55; }

/* Buttons: the Webflow .button (legacy body HTML) shares the .pa-btn rules in section 2. */
.page-wrapper .button-group { gap: 8px 14px; }

/* Links in body copy and the theme link style */
.page-wrapper .text-style-link { color: var(--pa-g); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Bands: the banded page headers (glossary, legal, about) and the home hero
   take the directory hero colours, left aligned like the directory. */
.page-wrapper .section_header,
.page-wrapper .section_about-us_header,
.page-wrapper .section_header23 { background: var(--pa-dk); color: #fff; }
.page-wrapper .section_header .text-color-secondary,
.page-wrapper .section_about-us_header .text-color-secondary,
.page-wrapper .section_header23 .text-color-secondary,
.page-wrapper .section_header23 .hero-trust_label,
.page-wrapper .section_header p,
.page-wrapper .section_about-us_header p { color: var(--pa-od); }
.page-wrapper .section_header h1,
.page-wrapper .section_about-us_header h1,
.page-wrapper .section_header23 h1 { color: #fff; }
.page-wrapper .section_header23 .text-highlight { border-bottom: 0; height: auto; padding: 0; display: inline; color: var(--pa-od2); }
.page-wrapper .section_header :focus-visible,
.page-wrapper .section_about-us_header :focus-visible,
.page-wrapper .section_header23 :focus-visible { outline-color: #fff; }
.page-wrapper .section_header .container-small,
.page-wrapper .section_about-us_header .container-small { max-width: 1120px; }
.page-wrapper .section_header .text-align-center,
.page-wrapper .section_about-us_header .text-align-center { text-align: left; }
.page-wrapper .section_header .text-align-center > *,
.page-wrapper .section_about-us_header .text-align-center > * { margin-left: 0; margin-right: 0; }
.page-wrapper .section_header .padding-section-large,
.page-wrapper .section_about-us_header .padding-section-large { padding-top: 32px; padding-bottom: 40px; }
@media (min-width: 768px) {
  .page-wrapper .section_header .padding-section-large,
  .page-wrapper .section_about-us_header .padding-section-large { padding-top: 48px; padding-bottom: 56px; }
}
.page-wrapper .section_header h1,
.page-wrapper .section_about-us_header h1 { font-size: var(--pa-display); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; }
/* The about header ships a decorative overlay picture: keep the band flat. */
.page-wrapper .section_about-us_header { background-image: none; }

/* The home pest picker follows the (now dark) hero: give it its own top space. */
.page-wrapper .section_services_pests-list.is-pest-label .padding-section-large { padding-top: 40px; }

/* Breadcrumbs (article, glossary term, pest hub) */
.page-wrapper .blog-post-header3_breadcrumb { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 24px; font-size: 13px; color: var(--pa-mute); }
.page-wrapper .blog-post-header3_breadcrumb .breadcrumb-link { color: var(--pa-mute); font-size: 13px; text-decoration: none; }
.page-wrapper .blog-post-header3_breadcrumb .breadcrumb-link:hover { color: var(--pa-ink); text-decoration: underline; text-underline-offset: 3px; }
.page-wrapper .blog-post-header3_breadcrumb .breadcrumb-link .heading-style-text,
.page-wrapper .blog-post-header3_breadcrumb .text-color-secondary { font-size: 13px; font-weight: 500; color: inherit; }

/* Cards: one surface (hairline, radius, row-hover tint), no drop shadow */
.page-wrapper .pest-button-group_card,
.page-wrapper .blog-pest-filter_radio_field {
  border: 0; border-radius: var(--pa-r); background: #fff; box-shadow: inset 0 0 0 1px var(--pa-hair);
  transition: box-shadow var(--pa-dur-1) var(--pa-ease-out), background var(--pa-dur-1) var(--pa-ease-out);
}
.page-wrapper .pest-button-group_card:hover,
.page-wrapper .blog-pest-filter_radio_field:hover { margin: 0; box-shadow: inset 0 0 0 1.5px var(--pa-g); background: var(--pa-tint); }
.page-wrapper .blog-pest-filter_radio_field:has(input:checked) { box-shadow: inset 0 0 0 2px var(--pa-g); background: var(--pa-tint); }
.page-wrapper .blog1_image-wrapper,
.page-wrapper .blog44_image-wrapper,
.page-wrapper .product8_image-wrapper,
.page-wrapper .product-header_image-wrapper { border-radius: var(--pa-r); overflow: hidden; }
.page-wrapper .blog1_title-link,
.page-wrapper .blog44_item-link { text-decoration: none; }
.page-wrapper .blog1_title-link:hover .heading-style-h5,
.page-wrapper .blog44_item-link:hover .heading-style-h5 { color: var(--pa-g); }
.page-wrapper .blog1_category-link { color: var(--pa-g); }
.page-wrapper .navbar5_blog-image-wrapper { border-radius: var(--pa-r-s); overflow: hidden; }

/* The blog pest filter bleeds to the screen edge on phones: offset it by the page gutter, not 5vw. */
@media screen and (max-width: 767px) {
  .page-wrapper .blog-filter_wrapper { margin-left: calc(-1 * var(--pa-gut)); padding-left: var(--pa-gut); }
}

/* Plain label instead of a tinted badge (roundup picks) */
.page-wrapper .badge { background: transparent; padding: 0; color: var(--pa-g); font-size: 14px; font-weight: 650; }

/* Stat band: light big numbers on hairlines, no tiles */
.page-wrapper .home_statistics-banner_item { border-left: 1px solid var(--pa-hair); }
.page-wrapper .home_statistics-banner_number { font-weight: 300; letter-spacing: -.03em; color: var(--pa-g); }

/* FAQ (faq9): the directory's hairline list */
.page-wrapper .faq9_component { border-bottom: 1px solid var(--pa-hair); }
.page-wrapper .faq9_item { border-top: 1px solid var(--pa-hair); padding-top: 20px; padding-bottom: 24px; row-gap: 8px; }
.page-wrapper .faq9_question,
.page-wrapper .faq9_item .faq_question,
.page-wrapper .faq9_item .heading-style-h4 { font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; }
.page-wrapper .faq9_item .text-rich-text,
.page-wrapper .faq9_item p { font-size: 15.5px; line-height: 1.6; color: #1e4942; }
.page-wrapper .faq9_item a { color: var(--pa-g); font-weight: 600; }

/* "How to use it?" accordion (guides): a hairline row, not a tinted box */
.page-wrapper .faq5_accordion { border: 0; border-top: 1px solid var(--pa-hair); border-bottom: 1px solid var(--pa-hair); background-color: transparent; }
.page-wrapper .faq5_question { min-height: 48px; padding-left: 0; padding-right: 0; }

/* Closing CTA (home, services): the directory's dark closing band */
.page-wrapper .home_cta_card { background: var(--pa-dk); color: #fff; border-radius: 0; padding: 72px var(--pa-gut); }
.page-wrapper .section_home_cta .padding-global { padding-left: 0; padding-right: 0; }
.page-wrapper .section_home_cta .container-large { max-width: none; }
.page-wrapper .section_home_cta .padding-section-large { padding-top: 0; padding-bottom: 0; }
.page-wrapper .home_cta_card h2,
.page-wrapper .home_cta_card .heading-style-h2 { color: #fff; font-size: var(--pa-end); max-width: 16em; }
.page-wrapper .home_cta_card p,
.page-wrapper .home_cta_card .text-size-medium { color: #fff; }
.page-wrapper .home_cta_card .pa-btn { min-width: 240px; }
.page-wrapper .home_cta_card :focus-visible { outline-color: #fff; }
@media (min-width: 992px) { .page-wrapper .home_cta_card { padding-top: 112px; padding-bottom: 112px; } }

/* Inline CTA (articles): not a box, hairlines above and below */
.page-wrapper .cta39_card { border: 0; border-top: 1.5px solid var(--pa-ink); border-bottom: 1px solid var(--pa-hair); border-radius: 0; background: transparent; }
.page-wrapper .cta39_card-content { padding-left: 0; padding-right: 0; }

/* TL;DR (article intro callout): no tinted box, a ruled block like the directory groups.
   The block writes its colours inline, hence !important on these three properties. */
.page-wrapper .rich-text-body_intro { background-color: transparent !important; border-left: 0 !important; border-top: 1.5px solid var(--pa-ink); border-bottom: 1px solid var(--pa-hair); padding: 16px 0 8px; }
.page-wrapper .rich-text-body_intro > .heading-style-h6 { color: var(--pa-ink) !important; font-size: 17px; }
.page-wrapper .rich-text-body_intro-content ul li::before { color: var(--pa-g); }

/* Forms */
.page-wrapper .form_input,
.page-wrapper .w-input,
.page-wrapper .w-select { min-height: 48px; border: 1px solid var(--pa-field); border-radius: var(--pa-r-s); padding: 0 16px; font-size: 16px; color: var(--pa-ink); background-color: #fff; }
.page-wrapper textarea.form_input,
.page-wrapper textarea.w-input { padding-top: 12px; padding-bottom: 12px; }
.page-wrapper .form_input:focus,
.page-wrapper .w-input:focus,
.page-wrapper .w-select:focus { outline: 2px solid var(--pa-g); outline-offset: -1px; border-color: var(--pa-g); }

/* Tables (roundup spec tables) */
.page-wrapper .table_component { border-collapse: collapse; border: 0; }
.page-wrapper .table_row { border-bottom: 1px solid var(--pa-hair); }
.page-wrapper .table_cell { padding: 12px 10px; font-size: 15px; border: 0; }
.page-wrapper .table_cell_label { color: var(--pa-mute); font-weight: 600; }
.page-wrapper .text-rich-text table { border-collapse: collapse; }
.page-wrapper .text-rich-text th,
.page-wrapper .text-rich-text td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--pa-hair); text-align: left; font-size: 15px; }
.page-wrapper .text-rich-text th { border-bottom: 1.5px solid var(--pa-ink); font-weight: 650; }

/* Rich text: links, headings, quotes */
.page-wrapper .text-rich-text a { color: var(--pa-g); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; background-color: transparent; }
.page-wrapper .text-rich-text a:hover { color: var(--pa-ink); }
.page-wrapper .text-rich-text h2 { font-size: var(--pa-h2); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.page-wrapper .text-rich-text h3 { font-size: var(--pa-h3); font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
.page-wrapper .text-rich-text blockquote { border-left: 1.5px solid var(--pa-ink); padding: 4px 0 4px 20px; font-size: 18px; line-height: 1.55; }
.page-wrapper .text-rich-text figure img { border-radius: var(--pa-r); }

/* Lists of links (glossary A to Z): hairline rows */
.page-wrapper .content-item_link-list .link-item,
.page-wrapper .links_component .link-item { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--pa-hair); color: var(--pa-ink); font-weight: 600; text-decoration: none; }
.page-wrapper .links_component .link-item:hover { color: var(--pa-g); }

/* Header (navbar5): white bar on a hairline, pill CTA, rounded dropdowns */
.navbar5_component { border-bottom: 1px solid var(--pa-hair); padding-left: var(--pa-gut); padding-right: var(--pa-gut); font-family: var(--pa-font); }
.navbar5_component .navbar5_container { max-width: 1120px; }
.navbar5_component .navbar5_link,
.navbar5_component .navbar5_dropdown-toggle { color: var(--pa-ink); font-size: 15px; font-weight: 600; transition: color var(--pa-dur-1) var(--pa-ease-out); }
.navbar5_component .navbar5_link:hover,
.navbar5_component .navbar5_dropdown-toggle:hover { color: var(--pa-g); }
.navbar5_component .navbar5_dropdown-link { border-radius: var(--pa-r-s); transition: background var(--pa-dur-1) var(--pa-ease-out); }
.navbar5_component .navbar5_dropdown-link:hover { background: var(--pa-tint); }
.navbar5_component .navbar5_dropdown-link .text-size-small { color: var(--pa-mute); }
.navbar5_component .navbar5_dropdown-content-right { background: var(--pa-bg2); }
.navbar5_component .navbar5_dropdown-content-right::before { background: var(--pa-bg2); }
.navbar5_component .text-style-link { color: var(--pa-g); font-weight: 600; }
.navbar5_component :focus-visible { outline: 3px solid var(--pa-g); outline-offset: 2px; }
.navbar5_component .navbar5_logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.navbar5_component .navbar5_menu-button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 992px) {
  .navbar5_component .navbar5_dropdown-list.w--open,
  .navbar5_component .navbar5_dropdown-list[data-open="true"] { border-radius: 0 0 var(--pa-r) var(--pa-r); }
}

/* Footer (footer1): the near-white surface on a hairline, ink text, green on hover */
.footer1_component { background-color: var(--pa-bg2); border-top: 1px solid var(--pa-hair); color: var(--pa-ink); font-family: var(--pa-font); }
.footer1_component .padding-global { padding-left: var(--pa-gut); padding-right: var(--pa-gut); }
.footer1_component .container-large { max-width: 1120px; }
.footer1_component .footer-heading { font-size: 14px; font-weight: 650; color: var(--pa-ink); }
.footer1_component .footer1_link { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 14px; color: var(--pa-mute); transition: color var(--pa-dur-1) var(--pa-ease-out); }
.footer1_component .footer1_link:hover,
.footer1_component .footer1_legal-link:hover,
.footer1_component .footer1_social-link:hover { color: var(--pa-g); text-decoration: underline; text-underline-offset: 3px; }
.footer1_component .footer1_legal-link,
.footer1_component .footer1_social-link,
.footer1_component .footer1_credit-text { font-size: 13px; color: var(--pa-mute); }
.footer1_component .footer1_legal-link,
.footer1_component .footer1_social-link { display: inline-flex; align-items: center; min-height: 44px; }
.footer1_component .footer1_logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.footer1_component .line-divider { background-color: var(--pa-hair); }
.footer1_component :focus-visible { outline: 3px solid var(--pa-g); outline-offset: 2px; }