/*
Theme Name: Taff Child
Theme URI: https://staging.taffpestcontrol.co.uk
Description: Child theme of Kadence for Taff Pest Control. All custom CSS/PHP lives here. Palette, typography and components per design.md.
Author: Taff Pest Control build
Template: kadence
Version: 1.1.0
Text Domain: taff-child
*/

/* ============================================================
   Design tokens — palette per design.md
   ============================================================ */
:root {
  --taff-charcoal: #1F2937;
  --taff-red:      #C8102E;
  --taff-red-dark: #A50D26; /* modest hover darken */
  --taff-cream:    #F1F4F4; /* Welsh Slate palette, client-chosen 1 Oct 2026 (was cream #F7F3E8) */
  --taff-white:    #FFFFFF;
  --taff-grey:     #5E6A72; /* retuned 1 Oct 2026 for slate panels; AA-checked on #F1F4F4 and white */
  --taff-line:     #DFE4E4; /* slate line (was #E5E0D2) */

  /* Map Kadence global palette variables to the brand palette so blocks + editor match */
  --global-palette1: var(--taff-red);       /* accent / links / buttons */
  --global-palette2: var(--taff-red-dark);  /* accent hover */
  --global-palette3: var(--taff-charcoal);  /* headings / strong */
  --global-palette4: var(--taff-charcoal);  /* body text */
  --global-palette5: var(--taff-grey);      /* muted text */
  --global-palette6: var(--taff-line);      /* borders */
  --global-palette7: var(--taff-cream);     /* subtle background */
  --global-palette8: #FBF9F3;               /* lighter background */
  --global-palette9: var(--taff-white);     /* base / white */
  --global-palette-highlight: var(--taff-red);
}

/* ============================================================
   Typography — Domine (headings) / Inter (body). Self-hosted.
   ============================================================ */
body,
.entry-content,
.content-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--taff-charcoal);
  background: var(--taff-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-family: 'Domine', Georgia, 'Times New Roman', serif;
  color: var(--taff-charcoal);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1, .entry-title { font-size: 42px; font-weight: 700; margin-bottom: 0.5em; }
h2 { font-size: 29px; margin-top: 1.6em; }
h3 { font-size: 21px; font-weight: 500; }
p, li { font-size: 17px; line-height: 1.65; }
.taff-caption, figcaption, .taff-eyebrow + * { }

/* Eyebrows / small labels */
.taff-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--taff-red);
  display: inline-block;
  margin-bottom: 0.6em;
}

@media (max-width: 767px) {
  h1, .entry-title { font-size: 30px; }
  h2 { font-size: 25px; }
  body { font-size: 17px; }
}

/* Readable text column */
.taff-prose { max-width: 720px; }
.entry-content { }

a { color: var(--taff-red); text-decoration: none; }
a:hover { color: var(--taff-red-dark); text-decoration: underline; }

/* ============================================================
   Buttons
   ============================================================ */
.taff-btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.taff-btn--primary {
  background: var(--taff-red);
  color: #fff;
  border-color: var(--taff-red);
}
.taff-btn--primary:hover {
  background: var(--taff-red-dark);
  border-color: var(--taff-red-dark);
  color: #fff;
  text-decoration: none;
}
.taff-btn--secondary {
  background: transparent;
  color: var(--taff-charcoal);
  border-color: var(--taff-charcoal);
}
.taff-btn--secondary:hover {
  background: var(--taff-charcoal);
  color: #fff;
  text-decoration: none;
}
.taff-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
@media (max-width: 600px) {
  .taff-btn-row { flex-direction: column; }
  .taff-btn-row .taff-btn { width: 100%; }
}

/* On dark sections, secondary button flips to white outline */
.taff-band--dark .taff-btn--secondary {
  color: #fff; border-color: rgba(255,255,255,0.65);
}
.taff-band--dark .taff-btn--secondary:hover { background:#fff; color: var(--taff-charcoal); }

/* ============================================================
   Section rhythm / bands
   ============================================================ */
.taff-band { padding: 88px 0; }
.taff-band--white { background: var(--taff-white); }
.taff-band--cream { background: var(--taff-cream); }
.taff-band--dark  { background: var(--taff-charcoal); color: #F3F4F6; }
.taff-band--dark h1, .taff-band--dark h2, .taff-band--dark h3 { color: #fff; }
.taff-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 767px) { .taff-band { padding: 52px 0; } }

/* ============================================================
   Cards / grids
   ============================================================ */
.taff-grid { display: grid; gap: 22px; }
.taff-grid--3 { grid-template-columns: repeat(3, 1fr); }
.taff-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .taff-grid--3 { grid-template-columns: 1fr; } .taff-grid--2 { grid-template-columns: 1fr; } }

.taff-card {
  background: var(--taff-white);
  border: 1px solid var(--taff-line);
  border-radius: 8px;
  padding: 26px;
  box-shadow: 0 1px 2px rgba(31,41,55,0.04);
}
.taff-band--white .taff-card { background: var(--taff-cream); }
.taff-card h3 { margin-top: 0; }
.taff-card .taff-price { color: var(--taff-grey); font-size: 15px; font-weight: 600; }
.taff-card a.taff-arrow { font-weight: 600; }

/* ============================================================
   Trust strip
   ============================================================ */
.taff-trust { background: var(--taff-cream); }
.taff-trust ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* one balanced row of five on desktop */
  gap: 18px 28px;
  list-style: none; margin: 0; padding: 0;
}
.taff-trust li {
  font-size: 13.5px; line-height: 1.5; color: var(--taff-charcoal); font-weight: 500;
  display: flex; gap: 10px; align-items: flex-start;
}
.taff-trust li::before { content: "•"; color: var(--taff-red); font-weight: 700; }
@media (max-width: 1024px) { .taff-trust ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .taff-trust ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .taff-trust ul { grid-template-columns: 1fr; } }

/* ============================================================
   Placeholder image blocks
   ============================================================ */
.taff-ph {
  background: var(--taff-cream);
  border: 1px dashed var(--taff-line);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--taff-grey); font-size: 14px; font-style: italic;
  padding: 24px; min-height: 220px;
}
.taff-ph--43 { aspect-ratio: 4 / 3; }
.taff-ph--32 { aspect-ratio: 3 / 2; }

/* ============================================================
   Discretion / callout note
   ============================================================ */
.taff-note {
  border-left: 3px solid var(--taff-red);
  background: var(--taff-cream);
  padding: 16px 20px; border-radius: 4px; margin: 24px 0;
}
.taff-band--white .taff-note { background: var(--taff-cream); }

/* Breadcrumb bar (slim cream strip above content) */
.taff-breadcrumb-bar {
  background: var(--taff-cream);
  border-bottom: 1px solid var(--taff-line);
  padding: 12px 0;
  font-size: 14px;
}
.taff-breadcrumb-bar .rank-math-breadcrumb p { margin: 0; color: var(--taff-grey); }
.taff-breadcrumb-bar a { color: var(--taff-grey); }
.taff-breadcrumb-bar a:hover { color: var(--taff-red); }

/* ============================================================
   FAQ accordions
   ============================================================ */
.taff-faq details {
  border: 1px solid var(--taff-line);
  border-radius: 6px;
  margin-bottom: 12px;
  background: var(--taff-white);
  transition: border-color .15s ease;
}
.taff-band--white .taff-faq details { background: var(--taff-cream); }
.taff-faq details:hover { border-color: var(--taff-red); }
.taff-faq summary {
  cursor: pointer;
  padding: 16px 60px 16px 20px; /* room for the chip */
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  list-style: none;
  position: relative;
  user-select: none;
}
.taff-faq summary:hover { color: var(--taff-red); }
.taff-faq summary::-webkit-details-marker { display: none; }
/* The open/close control — styled as a small button so it reads as clickable */
.taff-faq summary::after {
  content: "+";
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--taff-red);
  border-radius: 50%;
  color: var(--taff-red);
  font-size: 18px; font-weight: 700; line-height: 1;
  transition: background-color .15s ease, color .15s ease;
}
.taff-faq summary:hover::after {
  background: var(--taff-red);
  color: #fff;
}
.taff-faq details[open] {
  border-color: var(--taff-red);
}
.taff-faq details[open] summary { color: var(--taff-red); }
.taff-faq details[open] summary::after {
  content: "\2013";
  background: var(--taff-red);
  color: #fff;
}
.taff-faq details p { padding: 0 20px 18px; margin: 0; }

/* Contact form (Fluent Forms) — light touch to match the design system */
.taff-form-wrap .ff-el-group { margin-bottom: 16px; }
.taff-form-wrap label { font-weight: 600; font-family: 'Inter', sans-serif; }
.taff-form-wrap input[type=text], .taff-form-wrap input[type=email],
.taff-form-wrap select, .taff-form-wrap textarea {
  border: 1px solid var(--taff-line); border-radius: 6px; padding: 10px 12px;
  font-family: 'Inter', sans-serif; font-size: 16px; width: 100%;
}
.taff-form-wrap .ff-btn-submit {
  background: var(--taff-red) !important; color: #fff !important;
  border-radius: 6px; border: none; padding: 14px 22px; font-weight: 600; min-height: 44px;
}
.taff-form-wrap .ff-btn-submit:hover { background: var(--taff-red-dark) !important; }

/* Two-column prose+image */
.taff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .taff-split { grid-template-columns: 1fr; } }

/* Steps */
.taff-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: step; }
@media (max-width: 900px) { .taff-steps { grid-template-columns: 1fr; } }
.taff-step { }
.taff-step .num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--taff-red); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-bottom: 12px;
  font-family: 'Domine', serif;
}

/* ============================================================
   Header: logo only (no duplicate text title), phone on one line
   ============================================================ */
.site-branding .site-title,
.site-branding .site-description { display: none; }

/* Fit all eleven nav items on one row: tight items, 15px labels
   (short "Wasps" label + 8px padding reclaim the width the Areas tab added) */
.header-navigation .header-menu-container ul.menu > li.menu-item > a {
  padding-left: 8px;
  padding-right: 8px;
  font-size: 15px;
  white-space: nowrap;
}
.header-navigation .dropdown-nav-toggle { padding-left: 2px; }

.header-html { white-space: nowrap; }
.header-html .taff-tel {
  font-weight: 600; font-size: 16px; white-space: nowrap;
  color: var(--taff-charcoal);
}
.header-html .taff-tel:hover { color: var(--taff-red); text-decoration: none; }

.taff-header-phone { font-weight: 600; font-size: 16px; white-space: nowrap; }
.taff-header-phone a { color: var(--taff-charcoal); }
.taff-header-phone a:hover { color: var(--taff-red); text-decoration: none; }

/* ============================================================
   First content band: trim the dead air below the header.
   (Bands keep their 88px rhythm between sections; only the first
   section after the header/breadcrumb pulls up.)
   ============================================================ */
.content-area, .site-content { padding-top: 0; margin-top: 0; }
.entry-content section.taff-band:first-of-type { padding-top: 44px; }
@media (max-width: 767px) {
  .entry-content section.taff-band:first-of-type { padding-top: 28px; }
}

/* ============================================================
   Footer
   ============================================================ */
.taff-footer { background: var(--taff-charcoal); color: #D1D5DB; padding: 56px 0 40px; }
.taff-footer a { color: #E5E7EB; }
.taff-footer a:hover { color: #fff; }
.taff-footer .taff-foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .taff-footer .taff-foot-grid { grid-template-columns: 1fr; } }
.taff-footer img.taff-foot-logo { max-width: 220px; height: auto; margin-bottom: 16px; }
.taff-footer h4 { color:#fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; font-family:'Inter',sans-serif; font-weight:600; margin-bottom: 10px; }
.taff-footer .taff-foot-legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 32px; padding-top: 18px; font-size: 13px; color: #9CA3AF; }

/* ============================================================
   Sticky mobile bar
   ============================================================ */
.taff-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none; gap: 0; background: var(--taff-charcoal);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
.taff-sticky-bar a {
  flex: 1 1 50%; text-align: center; padding: 15px 8px;
  font-family:'Inter',sans-serif; font-weight: 600; font-size: 15px; min-height: 48px;
  display:flex; align-items:center; justify-content:center; gap: 8px;
}
.taff-sticky-bar .sb-call { background: var(--taff-red); color:#fff; }
.taff-sticky-bar .sb-wa { background: transparent; color:#fff; border-left: 1px solid rgba(255,255,255,0.2); }
.taff-sticky-bar a:hover { text-decoration: none; }
body.taff-show-sticky .taff-sticky-bar { display: flex; }
@media (min-width: 768px) { .taff-sticky-bar { display: none !important; } }

/* ============================================================
   Guide posts: no comments, no prev/next image-card navigation
   (comments also closed at WP level; this is the belt-and-braces)
   ============================================================ */
.single-post #comments,
.single-post .comments-area,
.single-post .comment-respond,
.single-post nav.post-navigation,
.single-post .kadence-post-navigation,
.single-post .entry-related { display: none !important; }

/* ============================================================
   Accessibility — visible keyboard focus
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .wp-block-button__link:focus-visible {
  outline: 3px solid var(--taff-red);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Simple fade-in (respects reduced-motion above) */
.taff-fade { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.taff-fade.is-in { opacity: 1; transform: none; }

/* Nav dropdown descriptors */
.primary-menu-container .sub-menu .taff-nav-desc,
.mobile-menu-container .sub-menu .taff-nav-desc {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--taff-grey);
  font-weight: 400;
  margin-top: 1px;
  white-space: normal;
}
.primary-menu-container ul.sub-menu { min-width: 240px; }
.primary-menu-container .sub-menu a:hover .taff-nav-desc,
.primary-menu-container .sub-menu a:focus .taff-nav-desc { color: inherit; }

/* ============================================================
   Content figures (real photos replacing .taff-ph slots)
   ============================================================ */
.taff-figure { margin: 22px 0 0; }
.taff-figure img { width: 100%; height: auto; border-radius: 8px; display: block; }
.taff-figure--32 img { aspect-ratio: 3 / 2; object-fit: cover; }
.taff-figure--43 img { aspect-ratio: 4 / 3; object-fit: cover; }
.taff-figure figcaption { color: var(--taff-grey); font-size: 12.5px; font-style: italic; margin-top: 6px; }

/* ============================================================
   UI MODERNISATION — wave 1 (2026-10-01, staging2 experiment)
   CSS-only: presence, depth, scale. Revert = drop this block.
   ============================================================ */

/* Tokens */
:root {
  --taff-radius: 14px;
  --taff-shadow-s: 0 1px 2px rgba(31,41,55,.05), 0 2px 8px rgba(31,41,55,.05);
  --taff-shadow-m: 0 2px 4px rgba(31,41,55,.06), 0 10px 28px rgba(31,41,55,.10);
}

/* --- Header: sticky, glassy, with real presence --- */
#masthead, .site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--taff-line);
  box-shadow: 0 1px 10px rgba(31,41,55,.06);
}
.site-branding img, .custom-logo { max-height: 56px; width: auto; }
/* Phone number becomes the header CTA pill */
.header-html .taff-tel, .taff-header-phone a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--taff-red); color: #fff !important;
  padding: 10px 18px; border-radius: 999px;
  font-size: 15.5px; line-height: 1;
  transition: background-color .15s ease;
}
.header-html .taff-tel:hover, .taff-header-phone a:hover {
  background: var(--taff-red-dark); color: #fff !important; text-decoration: none;
}

/* --- Type scale: bigger, fluid headline presence --- */
h1, .entry-title { font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -0.015em; }
h2 { font-size: clamp(25px, 2.6vw, 32px); }
.taff-eyebrow { font-size: 13px; letter-spacing: 0.11em; }

/* Hero band breathes more */
.entry-content section.taff-band:first-of-type { padding-top: 64px; padding-bottom: 96px; }
@media (max-width: 767px) {
  .entry-content section.taff-band:first-of-type { padding-top: 36px; padding-bottom: 56px; }
}

/* --- Buttons: bigger, softer, pressable --- */
.taff-btn, .wp-block-button__link, .taff-form-wrap .ff-btn-submit {
  border-radius: 10px; padding: 16px 26px; font-size: 16.5px;
}
.taff-btn--primary { box-shadow: 0 2px 10px rgba(200,16,46,.28); }
.taff-btn--primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(200,16,46,.28); }

/* --- Cards: depth + hover lift --- */
.taff-card {
  border-radius: var(--taff-radius);
  padding: 30px;
  box-shadow: var(--taff-shadow-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.taff-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--taff-shadow-m);
  border-color: #d9d2bf;
}
.taff-card a.taff-arrow { font-size: 16.5px; }

/* --- Trust strip: fine print becomes pill chips --- */
.taff-trust ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 14px;
}
.taff-trust li {
  background: var(--taff-white);
  border: 1px solid var(--taff-line);
  border-radius: 999px;
  padding: 11px 20px;
  font-size: 14px;
  box-shadow: var(--taff-shadow-s);
  align-items: center;
}
.taff-trust li::before { content: "\2713"; color: var(--taff-red); font-weight: 700; }

/* --- Depth on dark bands --- */
.taff-band--dark { background: linear-gradient(180deg, #2E3B43 0%, #28333A 55%, #222C33 100%); } /* slate dark bands (was charcoal-navy) */

/* --- Images: rounded + gently lifted --- */
.taff-figure img { border-radius: var(--taff-radius); box-shadow: var(--taff-shadow-m); }
.taff-split .taff-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.taff-ph { border-radius: var(--taff-radius); }

/* --- Steps: card treatment --- */
.taff-step {
  background: var(--taff-cream);
  border: 1px solid var(--taff-line);
  border-radius: var(--taff-radius);
  padding: 26px;
  box-shadow: var(--taff-shadow-s);
}
.taff-band--cream .taff-step { background: var(--taff-white); }

/* --- FAQ + notes: match the radius language --- */
.taff-faq details { border-radius: 12px; }
.taff-note { border-radius: 12px; }

/* --- Tables (guides, hubs): styled, striped, rounded --- */
.taff-prose table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--taff-line); border-radius: 12px; overflow: hidden;
  font-size: 15.5px; margin: 20px 0;
  background: var(--taff-white);
}
.taff-prose th {
  background: var(--taff-charcoal); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 600; text-align: left;
  padding: 12px 16px; font-size: 14px; letter-spacing: .02em;
}
.taff-prose td { padding: 12px 16px; border-top: 1px solid var(--taff-line); vertical-align: top; }
.taff-prose tbody tr:nth-child(even) td { background: #FBF9F3; }

/* --- Form inputs: focus ring --- */
.taff-form-wrap input[type=text], .taff-form-wrap input[type=email],
.taff-form-wrap select, .taff-form-wrap textarea { border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.taff-form-wrap input:focus, .taff-form-wrap select:focus, .taff-form-wrap textarea:focus {
  border-color: var(--taff-red); box-shadow: 0 0 0 3px rgba(200,16,46,.12); outline: none;
}

/* --- Anchor targets clear the sticky header (service-areas towns etc.) --- */
[id] { scroll-margin-top: 96px; }

/* Selection in brand colour */
::selection { background: var(--taff-red); color: #fff; }

/* --- Nav wave 1b: fewer top-level items (Services dropdown) = room to breathe --- */
.header-navigation .header-menu-container ul.menu > li.menu-item > a {
  font-size: 16px;
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
}
/* Animated hover underline on top-level links */
.header-navigation .header-menu-container ul.menu > li.menu-item > a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  height: 2px; background: var(--taff-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.header-navigation .header-menu-container ul.menu > li.menu-item > a:hover::after,
.header-navigation .header-menu-container ul.menu > li.menu-item.current-menu-item > a::after {
  transform: scaleX(1);
}
/* Dropdown panels: soft, lifted, modern */
.primary-menu-container ul.sub-menu {
  border-radius: 12px;
  border: 1px solid var(--taff-line);
  box-shadow: var(--taff-shadow-m);
  padding: 6px;
  min-width: 260px;
}
.primary-menu-container ul.sub-menu li.menu-item > a {
  border-radius: 8px;
  padding: 10px 14px;
}
.primary-menu-container ul.sub-menu li.menu-item > a:hover {
  background: var(--taff-cream);
}

/* --- Services mega-panel: one hover shows the whole offer (desktop nav only) --- */
.primary-menu-container ul.menu > li.menu-item-403 { position: relative; }
.primary-menu-container li.menu-item-403 > ul.sub-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 10px 22px;
  width: 780px;
  left: 50%;
  transform: translateX(-50%) !important;
  padding: 18px;
}
/* Category headers inside the panel */
.primary-menu-container li.menu-item-403 > ul.sub-menu > li > a {
  font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--taff-charcoal);
  padding: 8px 10px 2px;
}
.primary-menu-container li.menu-item-403 > ul.sub-menu > li > a:hover { color: var(--taff-red); background: transparent; }
/* Third level renders expanded inside the panel, not as flyouts */
.primary-menu-container li.menu-item-403 ul.sub-menu ul.sub-menu {
  position: static !important;
  display: block !important;
  opacity: 1 !important; visibility: visible !important;
  transform: none !important;
  box-shadow: none; border: none; padding: 0; margin: 0; min-width: 0;
}
.primary-menu-container li.menu-item-403 ul.sub-menu ul.sub-menu li a { padding: 7px 10px; }
/* No chevrons inside the panel */
.primary-menu-container li.menu-item-403 .sub-menu .dropdown-nav-toggle { display: none; }

/* --- Nav fix pass: light panels + proper reveal for the mega-panel --- */
/* All dropdown panels: white, our palette (Kadence default was dark) */
.primary-menu-container ul.sub-menu { background: #fff; }
.primary-menu-container ul.sub-menu li.menu-item { border: none; }
.primary-menu-container ul.sub-menu li.menu-item > a { color: var(--taff-charcoal); }
.primary-menu-container ul.sub-menu li.menu-item > a:hover { color: var(--taff-red); }

/* Mega-panel: closed by default, opens on hover/keyboard focus */
.primary-menu-container li.menu-item-403 > ul.sub-menu {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease;
}
.primary-menu-container li.menu-item-403:hover > ul.sub-menu,
.primary-menu-container li.menu-item-403:focus-within > ul.sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* Tidy vertical rhythm inside the panel columns */
.primary-menu-container li.menu-item-403 > ul.sub-menu { align-items: start; grid-auto-rows: min-content; }

/* --- Nav fix 2: win the specificity war with Kadence's dark dropdown theme --- */
.header-navigation .primary-menu-container ul.sub-menu,
.header-navigation .header-menu-container ul.menu ul.sub-menu {
  background: #fff !important;
}
.header-navigation .primary-menu-container ul.sub-menu li.menu-item,
.header-navigation .header-menu-container ul.menu ul.sub-menu li.menu-item {
  border: none !important;
}
.header-navigation .primary-menu-container ul.sub-menu li.menu-item > a,
.header-navigation .header-menu-container ul.menu ul.sub-menu li.menu-item > a {
  color: var(--taff-charcoal) !important;
  background: transparent;
}
.header-navigation .primary-menu-container ul.sub-menu li.menu-item > a:hover {
  color: var(--taff-red) !important;
  background: var(--taff-cream) !important;
}
.header-navigation .primary-menu-container ul.sub-menu .taff-nav-desc { color: var(--taff-grey) !important; }
/* Panel category headers stay header-ish on hover (no pill background) */
.header-navigation .primary-menu-container li.menu-item-403 > ul.sub-menu > li > a:hover { background: transparent !important; }

/* ============================================================
   UI wave 2 (2026-10-01): hero card, panel balance, polish
   ============================================================ */
/* Hero: warm gradient instead of flat white */
.entry-content section.taff-band:first-of-type { background: linear-gradient(180deg, #FFFFFF 0%, #F6F9F8 100%); } /* slate-tinted hero (was warm #FBF8F0) */

/* Hero card (replaces the placeholder until real photos land) */
.taff-hero-card {
  background: #fff; border: 1px solid var(--taff-line);
  border-radius: 16px; box-shadow: var(--taff-shadow-m);
  padding: 30px;
}
.taff-hero-card .thc-kicker {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--taff-red);
  margin: 0 0 16px;
}
.thc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.thc-steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.thc-steps .n {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: var(--taff-red); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 14px;
}

/* Mega panel: four balanced columns now wasps has company */
.primary-menu-container li.menu-item-403 > ul.sub-menu {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  width: 940px;
}

/* Eyebrows get a signature rule line */
.taff-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--taff-red); margin-right: 9px; vertical-align: 3px;
}

/* Breadcrumbs: quiet, no band */
.taff-breadcrumb-bar { background: transparent; border-bottom: none; padding: 14px 0 0; font-size: 13px; }

/* Footer: brand accent */
.taff-footer { border-top: 4px solid var(--taff-red); }

/* Services catalogue page: tighter rhythm, it is a directory not an essay */
.page-id-413 .taff-band { padding: 56px 0; }
.page-id-413 .taff-card { padding: 22px; }
.page-id-413 .taff-grid { gap: 16px; }
.page-id-413 .taff-card h3 { font-size: 19px; }
.page-id-413 .taff-card p { font-size: 15.5px; }

/* --- Mega panel positioning fix: centre in the viewport, never clip --- */
.primary-menu-container ul.menu > li.menu-item-403 { position: static; }
.primary-menu-container li.menu-item-403 > ul.sub-menu {
  position: absolute;
  left: 50% !important;
  top: calc(100% - 4px);
  transform: translateX(-50%) !important;
  width: min(940px, calc(100vw - 40px));
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}

/* --- Mega panel: stable anchoring (the vw/overflow approach hung the renderer) --- */
#masthead, .site-header {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255,255,255,.98);
}
.header-navigation .header-menu-container ul.menu { position: relative; }
.primary-menu-container li.menu-item-403 > ul.sub-menu {
  left: auto !important;
  right: 0;
  top: 100%;
  transform: none !important;
  margin: 0;
  width: 920px;
  max-width: calc(100vw - 32px);
  max-height: none;
  overflow: visible;
  grid-template-columns: repeat(4, minmax(185px, 1fr));
}

/* Balance: Wildlife sits beneath the wasps column, not back at column 1 */
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-50 { grid-column: 3; }

/* ============================================================
   UI wave 3 (2026-10-01): icon tiles, Areas & About panels
   ============================================================ */
.taff-ico {
  display: inline-flex; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: var(--taff-white); border: 1px solid var(--taff-line);
  border-radius: 12px; font-size: 24px; line-height: 1;
  box-shadow: var(--taff-shadow-s);
  margin-bottom: 4px;
}
.taff-card .taff-ico + h3 { margin-top: 10px; }

/* Areas panel: towns in columns + coverage card */
.primary-menu-container li.menu-item-188 > ul.sub-menu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(118px, 1fr)) 215px;
  gap: 2px 10px;
  width: 640px;
  padding: 14px;
  left: auto; right: 0;
}
/* Coverage card: real <li class="taff-panel-card"> added in functions.php (was ::before content) */
.primary-menu-container li.menu-item-188 > ul.sub-menu > li.taff-panel-card {
  grid-column: 4; grid-row: 1 / span 3;
  background: var(--taff-cream);
  border: 1px solid var(--taff-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px; line-height: 1.55; color: var(--taff-charcoal);
}
.primary-menu-container li.menu-item-188 > ul.sub-menu > li.menu-item-196 > a {
  color: var(--taff-red) !important; font-weight: 600;
}
.primary-menu-container li.menu-item-188 > ul.sub-menu > li.menu-item-196 > a::after { content: " \2192"; }

/* About panel: links + continuity card */
.primary-menu-container li.menu-item-55 > ul.sub-menu { width: 390px; padding-bottom: 10px; }
/* Continuity card: real <li class="taff-panel-card"> added in functions.php (was ::after content) */
.primary-menu-container li.menu-item-55 > ul.sub-menu > li.taff-panel-card {
  display: block;
  margin: 10px 6px 2px;
  background: var(--taff-cream);
  border: 1px solid var(--taff-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px; line-height: 1.55; color: var(--taff-charcoal);
}

/* Areas panel: closed by default, opens on hover/focus (display:grid needs its own reveal) */
.primary-menu-container li.menu-item-188 > ul.sub-menu {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease;
}
.primary-menu-container li.menu-item-188:hover > ul.sub-menu,
.primary-menu-container li.menu-item-188:focus-within > ul.sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ============================================================
   Guides hub (category archive): bare list -> card grid
   ============================================================ */
.category-pest-guides .page-title {
  font-size: clamp(32px, 4vw, 44px);
}
.category-pest-guides .archive-description { max-width: 760px; font-size: 17px; }
.category-pest-guides .kadence-posts-list { gap: 20px; }
.category-pest-guides article.loop-entry {
  background: #fff;
  border: 1px solid var(--taff-line);
  border-radius: var(--taff-radius);
  box-shadow: var(--taff-shadow-s);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.category-pest-guides article.loop-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--taff-shadow-m);
}
.category-pest-guides .entry-content-wrap { padding: 24px 26px 22px; }
.category-pest-guides .entry-title { font-size: 21px; line-height: 1.3; }
.category-pest-guides .entry-title a { color: var(--taff-charcoal); }
.category-pest-guides .entry-title a:hover { color: var(--taff-red); text-decoration: none; }
.category-pest-guides .entry-meta { display: none; }
.category-pest-guides .entry-summary { font-size: 15px; line-height: 1.6; color: var(--taff-grey); }
.category-pest-guides .post-more-link {
  color: var(--taff-red); font-weight: 600; font-size: 15px;
  background: none; border: none; padding: 0;
}
.category-pest-guides .post-more-link::after { content: " \2192"; }

/* Fix: Kadence read-more already carries an arrow; drop the duplicate */
.category-pest-guides .post-more-link::after { content: ""; }

/* --- Mega panel fix (wildlife placement): the grid-column:3 rule above parks
   Wildlife in implicit row 2, which only starts below the tallest column
   (Insects) — so Wildlife sat marooned mid-panel under a block of white space.
   Explicit placement instead: tall categories span both rows, Wasps takes
   row 1 of column 3, Wildlife takes row 2 and tucks directly beneath it. --- */
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-35 { grid-column: 1; grid-row: 1 / span 2; }
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-39 { grid-column: 2; grid-row: 1 / span 2; }
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-46 { grid-column: 3; grid-row: 1; }
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-50 { grid-column: 3; grid-row: 2; align-self: start; }
.primary-menu-container li.menu-item-403 > ul.sub-menu > li.menu-item-47 { grid-column: 4; grid-row: 1 / span 2; }


/* --- Areas panel fix: hover pill overflow. Town links are nowrap and some
   (Barry & the Vale, View all areas) are wider than the 118px columns, so the
   anchor box, and with it the cream hover background, spilled across the
   neighbouring column. Columns widened to fit the longest label instead. --- */
.primary-menu-container li.menu-item-188 > ul.sub-menu {
  grid-template-columns: repeat(3, minmax(152px, 1fr)) 215px;
  width: 730px;
  gap: 2px 8px;
}
.primary-menu-container li.menu-item-188 > ul.sub-menu > li > a { padding: 8px 12px; max-width: 100%; }

/* Panel cards are real text now: reset menu-item styling inside them */
.primary-menu-container li.taff-panel-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--taff-charcoal); white-space: normal; }

/* ============================================================
   Design pass 2026-10-01 (rampstack design-standards +
   vertical-site-conventions review of staging2; client-approved item by item)
   ============================================================ */

/* Form fields: visible slate borders (Line #DFE4E4 was 1.2:1; this is
   3.4:1 on the slate panel, 3.8:1 on white) and 44px touch height */
.taff-form-wrap input[type=text], .taff-form-wrap input[type=email],
.taff-form-wrap input[type=tel], .taff-form-wrap select, .taff-form-wrap textarea,
.taff-form-wrap .fluentform .ff-el-form-control { border-color: #7A858C; }
.taff-form-wrap input[type=text], .taff-form-wrap input[type=email],
.taff-form-wrap input[type=tel], .taff-form-wrap select,
.taff-form-wrap .fluentform select.ff-el-form-control { min-height: 44px; }
/* Radio choices: larger, brand-coloured, whole label line tappable */
.taff-form-wrap input[type=radio] { width: 20px; height: 20px; accent-color: var(--taff-red); }
.taff-form-wrap .ff-el-form-check label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }

/* Keyboard focus: FAQ questions get the same red ring as everything else */
.taff-faq summary:focus-visible { outline: 3px solid var(--taff-red); outline-offset: 2px; }

/* Mobile drawer: descriptors readable on the dark panel (was #5E6A72 at 11.5px) */
.mobile-menu-container .sub-menu .taff-nav-desc { color: #A3AAB5; font-size: 13px; }

/* Tap targets: 44px menu button and header phone pill (were 31px / 36px) */
.menu-toggle-open { min-width: 44px; min-height: 44px; justify-content: center; }
.header-html .taff-tel { min-height: 44px; }

/* Body-copy links: underline so they don't rely on colour alone.
   Buttons, card arrows and nav untouched. */
.entry-content p a:not(.taff-btn):not(.taff-arrow),
.entry-content li a:not(.taff-btn),
.entry-content td a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}

/* Small red label sits directly above its heading (was a 59–86px gap) */
.taff-eyebrow + h1, .taff-eyebrow + .entry-title { margin-top: 0; }

/* Buttons that wrap to two lines keep their text centred */
.taff-btn { text-align: center; }

/* Leave room for the sticky bar so it never covers the footer's last line */
@media (max-width: 767px) { body.taff-show-sticky { padding-bottom: 56px; } }

/* Mobile header: tap-to-call beside the menu button. The logo box is wide,
   so phones get a compact "Call"; the number shows from 420px. */
.mobile-html .taff-tel {
  font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--taff-red);
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px;
}
.mobile-html .taff-tel:hover { color: var(--taff-red-dark); text-decoration: none; }
.taff-mob-call__num { color: var(--taff-charcoal); }
@media (max-width: 419px) { .taff-mob-call__num { display: none; } }
@media (min-width: 420px) { .taff-mob-call__label { display: none; } }
@media (max-width: 359px) { #mobile-header .site-branding img { max-width: 160px; } }

/* Homepage hero: less air so the credentials strip shows on a laptop */
@media (min-width: 768px) {
  .entry-content section.taff-band.taff-hero:first-of-type { padding-top: 44px; padding-bottom: 34px; }
}

/* Phone numbers never break across lines in body copy (landing-copy pass, 1 Oct 2026) */
.entry-content a[href^="tel:"] { white-space: nowrap; }

/* Phones: hide the hero "How it works" card (the same three steps appear lower on
   the page) so the trust strip sits right under the hero buttons (client, 1 Oct 2026) */
@media (max-width: 767px) { .taff-hero-card { display: none; } }

/* Custom pest icons inside the tile (replace the emoji, 1 Oct 2026) */
.taff-ico svg { width: 28px; height: 28px; display: block; color: var(--taff-charcoal); }

/* Contact page: the "Rather write it down?" jump link lands the form below the sticky header (CRO pass, 1 Oct 2026) */
#enquiry-form { scroll-margin-top: 110px; }

/* Form help text sits under each field in small grey type (client, 1 Oct 2026) */
.taff-form-wrap .fluentform .ff-el-help-message { font-size: 14px; line-height: 1.4; color: var(--taff-grey); margin-top: 6px; font-style: normal; }

/* Badge logo (client chose B, 5 Oct 2026; replaces option A): about 4 : 1, no built-in margin,
   so it is sized by height: 48px on laptops, 44px on phones, 38px on the narrowest */
.site-branding a.brand img.custom-logo { height: 48px; width: auto; max-height: none; max-width: none; }
@media (max-width: 1024px) { #mobile-header .site-branding a.brand img.custom-logo { height: 44px; } }
@media (max-width: 359px) { #mobile-header .site-branding a.brand img.custom-logo { height: 38px; } }

/* Footer: quick links column (B2, client 2 Oct 2026) */
.taff-footer .taff-foot-grid { grid-template-columns: 1.2fr 1fr 1fr 0.8fr; }
@media (max-width: 900px) { .taff-footer .taff-foot-grid { grid-template-columns: 1fr; } }
.taff-footer .taff-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.taff-footer .taff-foot-links a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .taff-footer .taff-foot-links { gap: 0; } .taff-footer .taff-foot-links a { display: inline-block; padding: 10px 0; } }
/* Footer logo centred like the footer text (option A 2 Oct 2026; now the dark badge, 5 Oct 2026) */
.taff-footer img.taff-foot-logo { display: block; margin: 0 auto 16px; }

/* ============================================================
   QA fixes (2 Oct 2026, qa-report-2026-10-02.md)
   ============================================================ */
/* Breadcrumb links are underlined, so they don't rely on colour alone (WCAG 1.4.1) */
.taff-breadcrumb-bar a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
/* Desktop menu arrow buttons: at least 24px wide (WCAG 2.2 target size), widened to the right */
.header-navigation .menu-item--has-toggle > .dropdown-nav-special-toggle { width: 24px; right: -4px; }
/* Footer headings are h2 for a correct outline, styled exactly as the old h4 */
.taff-footer h2.taff-foot-head { color: #fff; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; line-height: 18.75px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 10px; }
/* Phone header "Call": a full 44px tap width */
.mobile-html .taff-tel { min-width: 44px; justify-content: center; }
/* Card arrow links: 44px tap height on phones */
@media (max-width: 767px) { .entry-content a.taff-arrow { display: inline-flex; align-items: center; min-height: 44px; } }
/* Guides hub: the "Pest guides" label repeats on its own category page */
.category-pest-guides article.loop-entry .entry-taxonomies { display: none; }

/* Homepage hero photo: Henry's bird-netting job, faded behind the text (client, 2 Oct 2026).
   Strongest fade on the left where the copy sits; the netting shows through on the right. */
.entry-content section.taff-band.taff-hero--photo:first-of-type {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.90) 42%, rgba(255,255,255,.55) 100%),
    url(/wp-content/uploads/2026/10/taff-hero-bird-netting-roof-2000.webp);
  background-size: cover;
  background-position: center 35%;
}
/* Phones: the 90% white wash is baked into the image itself (15 KB instead of 71 KB),
   so the hero paints faster (audit A5, 2 Oct 2026: phone LCP 2.72 s back to about 2.4 s). */
@media (max-width: 767px) {
  .entry-content section.taff-band.taff-hero--photo:first-of-type {
    background-image: url(/wp-content/uploads/2026/10/taff-hero-bird-netting-roof-1000-washed.webp);
  }
}

/* Launch: hide the grey "photo: ..." boxes that still have no photo (client, 2 Oct 2026).
   The boxes stay in the page masters as markers: swapping one for a <figure> brings a photo
   back with nothing else to undo. Delete this rule to show the remaining boxes again. */
.taff-ph { display: none; }