/* Core Precision component stylesheet (cp-widgets plugin).
   Two permitted CSS homes rule: component-scoped rules live HERE, brand tokens in the child theme.
   Tokens come from the child theme :root (--cp-teal, --cp-navy, etc.). */

/* [MOBILE MENU] Slide-in panel, backdrop, focus trap - the house pop-out pattern (ported from FFF build).
   Why: Elementor's native nav-menu mobile dropdown positions inside the widget wrapper - unusable in a grouped header.
   Used on: header template (cp-mobile-menu widget). Added 17/08/2026. */
.cp-menu button.cp-menu__toggle{
  display:inline-flex !important;align-items:center;justify-content:center;gap:9px;
  min-width:44px;min-height:44px;padding:8px 14px !important;
  background:transparent;border:1.5px solid currentColor;border-radius:6px;
  color:var(--cp-navy);cursor:pointer;width:auto !important;
  font-family:Montserrat,sans-serif !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.08em;text-transform:uppercase;
}
.cp-menu button.cp-menu__toggle:hover{background:var(--cp-teal-tint);}
.cp-menu__bars{display:block;width:18px;height:12px;position:relative;flex:0 0 auto;}
.cp-menu__bars span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
}
.cp-menu__bars span:nth-child(1){top:0;}
.cp-menu__bars span:nth-child(2){top:5px;}
.cp-menu__bars span:nth-child(3){top:10px;}

.cp-menu__backdrop{
  position:fixed;inset:0;background:rgba(37,48,58,.55);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease;z-index:9998;
}
.cp-menu__panel{
  position:fixed;top:0;right:0;height:100%;height:100dvh;
  width:min(360px,86vw);background:var(--cp-navy);color:var(--cp-white);
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  z-index:9999;display:flex;flex-direction:column;
  padding:22px 26px calc(22px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;
}
.cp-menu.is-open .cp-menu__backdrop{opacity:1;visibility:visible;}
.cp-menu.is-open .cp-menu__panel{transform:translateX(0);visibility:visible;}
@media (prefers-reduced-motion:reduce){
  .cp-menu__panel,.cp-menu__backdrop{transition:none;}
}
.cp-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;}
.cp-menu__logo{width:150px;height:auto;}
.cp-menu .cp-menu__close{
  width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:0;border-radius:50%;color:var(--cp-white) !important;
  font-size:20px;line-height:1;cursor:pointer;
}
.cp-menu .cp-menu__close:hover{background:rgba(255,255,255,.2);}
.cp-menu__nav ul{list-style:none;margin:0;padding:0;}
.cp-menu__nav li{margin:0;}
.cp-menu .cp-menu__nav a{
  display:block;padding:14px 0;font-family:'Average Sans',sans-serif;
  font-size:1.18rem;color:var(--cp-white) !important;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.cp-menu .cp-menu__nav a:hover,
.cp-menu .cp-menu__nav .current-menu-item > a{color:var(--cp-teal-tint) !important;}
/* Child pages indent so the hierarchy reads at a glance (Mitch, 17/08/2026). */
.cp-menu .cp-menu__nav .sub-menu a{padding-left:22px;font-size:1.02rem;}
.cp-menu__nav .sub-menu li:last-child a{border-bottom:1px solid rgba(255,255,255,.1);}
.cp-menu__foot{margin-top:auto;padding-top:26px;}
.cp-menu .cp-menu__cta{
  display:flex;align-items:center;justify-content:center;min-height:50px;
  background:var(--cp-teal);color:var(--cp-white) !important;border-radius:999px;
  font-family:Montserrat,sans-serif;font-weight:600;text-decoration:none;
}
.cp-menu .cp-menu__cta:hover{background:var(--cp-teal-dark);color:var(--cp-white) !important;}
.cp-menu .cp-menu__tel{display:block;margin-top:14px;text-align:center;
  color:rgba(255,255,255,.85) !important;text-decoration:none;font-size:.95rem;font-family:Montserrat,sans-serif;}
.cp-menu .cp-menu__tel:hover{color:var(--cp-teal-tint) !important;}
body.cp-menu-open{overflow:hidden;}

/* [FOOTER MENU LISTS] Vertical footer nav-menu widgets on the navy footer.
   Why: nav-menu widget item colours on dark backgrounds are unreliable from data-side settings;
   one scoped rule beats per-widget colour fights. Elementor per-element CSS loads later, hence !important.
   Used on: footer template (nav-menu widgets with class cp-footer-menu). Added 17/08/2026. */
.cp-footer-menu .elementor-nav-menu a{
  color:rgba(255,255,255,.85) !important;font-family:Montserrat,sans-serif !important;font-size:.95rem;padding:4px 0;
}
/* Standardise: EVERY link in a footer menu widget is Montserrat - the nav widget's hidden
   dropdown clone escapes the rule above and fell back to the heading font (Mitch, 18/08/2026). */
.cp-footer-menu a{font-family:Montserrat,sans-serif !important;}
.cp-footer-menu .elementor-nav-menu a:hover{color:#ffffff !important;}

/* [HEADER DROPDOWN SAFETY] Desktop flyout must never be clipped by an ancestor.
   Why: overflow:hidden on header containers clips the absolutely-positioned submenu (known Elementor trap).
   Used on: header template. Added 17/08/2026. */
.cp-header, .cp-header .e-con-inner{overflow:visible !important;}

/* [FOOTER GRID] Four-column footer that collapses 4 -> 2 -> 1.
   Why: per-container widths hit the width_tablet dead-code trap (notes #59); a component grid is the proven fix.
   Shape-agnostic per notes #65 so it works on boxed AND unboxed containers.
   Used on: footer template (container with class cp-footer-grid). Added 17/08/2026. */
:is(.cp-footer-grid:not(.e-con-boxed), .e-con-boxed.cp-footer-grid > .e-con-inner){
  display:grid !important;grid-template-columns:1.8fr 1fr 1fr 1.3fr;gap:40px;
}
@media (max-width:1024px){
  :is(.cp-footer-grid:not(.e-con-boxed), .e-con-boxed.cp-footer-grid > .e-con-inner){grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:600px){
  :is(.cp-footer-grid:not(.e-con-boxed), .e-con-boxed.cp-footer-grid > .e-con-inner){grid-template-columns:1fr;gap:28px;}
}

/* [FOOTER TEXT] Body text + links on the navy footer.
   Why: the kit's global link colour (teal) is unreadable on navy; Elementor per-element CSS loads later, hence !important.
   Used on: footer template (widgets with class cp-footer-text). Added 17/08/2026. */
.cp-footer-text, .cp-footer-text p{color:rgba(255,255,255,.85);}
.cp-footer-text a{color:#ffffff !important;text-decoration:underline;}
.cp-footer-text a:hover{color:var(--cp-teal-tint) !important;}

/* [SHELL GUTTERS] Fluid side gutters for template/section root containers (16px @320 -> 40px @1440).
   Why: boxed containers have no side padding once the viewport is narrower than the content width,
   so content touches the screen edge on mobile. The Elementor padding control rejects clamp()
   (whole rule drops), and per-element padding vars load later, hence the class + !important.
   Used on: header + footer roots (class cp-shell) and future page section roots. Added 17/08/2026. */
.e-con.cp-shell{padding-inline:clamp(1rem, 0.571rem + 2.143vw, 2.5rem) !important;}

/* [NAV FLYOUT FALLBACK] CSS hover flyout for the desktop nav dropdowns.
   Why: SmartMenus does not initialise on this raw-authored nav-menu widget (handler bundle loads,
   no init - verified 17/08/2026), so JS-driven opening cannot be relied on. This is the skill's
   documented belt-and-suspenders rule; scoped >=1025px so mobile keeps the slide-in panel.
   Used on: header template (.cp-header). Added 17/08/2026. */
@media (min-width:1025px){
  .cp-header .elementor-nav-menu--main li.menu-item-has-children{position:relative;}
  .cp-header .elementor-nav-menu--main li.menu-item-has-children:hover > ul.sub-menu,
  .cp-header .elementor-nav-menu--main li.menu-item-has-children:focus-within > ul.sub-menu{
    display:block !important;position:absolute;top:100%;left:0;z-index:99999;
    background:#ffffff;min-width:260px;width:max-content;max-width:380px;border-radius:6px;padding:6px 0;
    box-shadow:0 8px 24px rgba(37,48,58,.15);
  }
  .cp-header .elementor-nav-menu--main ul.sub-menu a{white-space:normal;}
}

/* [SQUARES PATTERN] Divi's exact "squares" background pattern from the live site (8x8 SVG tile, 4x4 rect),
   three live opacities: hero 0.2, soft 0.02 (teal bands/white closers), faint 0.01 (light sections).
   Implemented as an ::after overlay layer; content !important per the ::before/container trap (notes #57);
   z-index 0 + section children already sit above (atomic content flows after).
   Used on: sections with class cp-squares / cp-squares-soft / cp-squares-faint. Added 17/08/2026. */
.e-con.cp-squares::after, .e-con.cp-squares-soft::after, .e-con.cp-squares-faint::after{
  content:"" !important;position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:repeat;background-position:center;
}
/* Pattern must sit BEHIND content: lift the section's children above the ::after layer
   (flex/grid children accept z-index; playbook decorative-shapes rule). Fix 17/08/2026 after
   the pattern rendered over hero text. */
.e-con.cp-squares > *, .e-con.cp-squares-soft > *, .e-con.cp-squares-faint > *{
  position:relative;z-index:1;
}
.e-con.cp-squares::after{background-image:url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjIpIiBoZWlnaHQ9IjhweCIgd2lkdGg9IjhweCIgdmlld0JveD0iMCAwIDggOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+PC9zdmc+);}
.e-con.cp-squares-soft::after{background-image:url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAyKSIgaGVpZ2h0PSI4cHgiIHdpZHRoPSI4cHgiIHZpZXdCb3g9IjAgMCA4IDgiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjwvc3ZnPg==);}
.e-con.cp-squares-faint::after{background-image:url(data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjAxKSIgaGVpZ2h0PSI4cHgiIHdpZHRoPSI4cHgiIHZpZXdCb3g9IjAgMCA4IDgiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjQiIGhlaWdodD0iNCIvPjwvc3ZnPg==);}
.e-con.cp-squares, .e-con.cp-squares-soft, .e-con.cp-squares-faint{position:relative;}

/* [FOOTER MENU FLUSH] Footer menu links start flush with their column heading (Mitch, 17/08/2026).
   Why: the browser/widget default ul padding indents vertical nav-menu items.
   Used on: footer template (nav-menu widgets with class cp-footer-menu). */
.cp-footer-menu .elementor-nav-menu,
.cp-footer-menu .elementor-nav-menu ul{padding:0 !important;margin:0 !important;list-style:none;}
.cp-footer-menu .elementor-nav-menu li{padding-left:0 !important;margin-left:0 !important;}
.cp-footer-menu .elementor-nav-menu a{padding-left:0 !important;}

/* [BAND FORM] Enquiry form on the homepage closing teal band (Pro form widget, _css_classes cp-band-form).
   Why: three things the form widget's native controls cannot reach (grepped form.php 18/08/2026 -
   no submit-button box-shadow control, no field :focus state, and the honeypot field's empty
   wrapper div is a stray flex item; its css_classes land on the hidden INPUT, form-base.php:208,
   hence :has(). NOTE the honeypot wrapper is NOT .elementor-field-group - honeypot-handler.php
   hide_label() REPLACES the class list with just "elementor-field-type-text", verified in-browser
   18/08/2026). Everything else - white labels, glass fields, radii, white pill submit - is set
   with native widget controls in pages/home.py.
   Used on: homepage (page 8) closing CTA band. Added 18/08/2026. */
.cp-band-form .elementor-button[type="submit"]{box-shadow:0 3px 8px rgba(0,0,0,0.16);}
.cp-band-form .elementor-field-textual:focus{
  border-color:#ffffff;background-color:rgba(255,255,255,0.24);outline:none;
}
.cp-band-form div:has(> input.cp-hp){display:none;margin:0;padding:0;}

/* [SERVICE CARDS] /our-services/ 7-card grid: whole card hoverable + clickable via the STRETCHED
   TITLE LINK - the h3 (class cp-card-link) holds the real <a> whose anchor text is the service
   name; its ::after is stretched over the card, so there is one rich anchor per card and the
   "Learn more" footer is plain text (class cp-card-more), never a generic anchor.
   Why here: atomic data-side props cannot reach transitions, ::after, or the inner <a> of a
   linked heading (kit-link-colour trap - the kit binds link colours at widget level, so the
   <a> colours are set explicitly with !important). Tokens from the child theme :root.
   Used on: page 9 our-services (cards with class cp-service-card). Added 18/08/2026. */
.cp-service-card{
  position:relative;
  box-shadow:0 1px 3px rgba(37,48,58,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cp-service-card:hover,
.cp-service-card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(37,48,58,.16);
  /* !important: the card's base border-color lives in its atomic local class, which
     loads after this sheet and ties on specificity - without it the accent never shows. */
  border-color:var(--cp-teal) !important;
}
/* The renderer puts <a class="e-heading-link-base"> INSIDE the h3, so the stretch targets the a. */
.cp-service-card .cp-card-link > a::after{
  content:"" !important;position:absolute;inset:0;z-index:1;
}
.cp-service-card .cp-card-link a{color:var(--cp-teal) !important;text-decoration:none;}
.cp-service-card:hover .cp-card-link a,
.cp-service-card:focus-within .cp-card-link a{
  color:var(--cp-teal-dark) !important;text-decoration:underline;text-underline-offset:3px;
}
.cp-service-card .cp-card-link a:focus-visible{outline:2px solid var(--cp-teal);outline-offset:4px;}
.cp-service-card .cp-card-more{margin-top:auto;color:var(--cp-teal) !important;font-weight:600;}
.cp-service-card .cp-card-more::after{
  content:"\2192";display:inline-block;margin-left:8px;transition:transform .18s ease;
}
.cp-service-card:hover .cp-card-more::after,
.cp-service-card:focus-within .cp-card-more::after{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
  .cp-service-card,.cp-service-card .cp-card-more::after{transition:none;}
  .cp-service-card:hover{transform:none;}
}

/* [FOOTER TYPE UNIFY] One text spec across the footer (Mitch, 18/08/2026: mixed weights/sizes read as
   "different fonts"). The footer template predates the global weight/size standardisation and its V3
   widgets kept old defaults (h4 w400, body w400, links fixed 15.2px). Rules: headings match site
   headings (w700); every body/menu/legal text = the site body clamp at w500. Buttons unaffected. */
.elementor-location-footer h4, .elementor-location-footer .elementor-heading-title{font-weight:700 !important;}
.cp-footer-text, .cp-footer-text p{font-size:clamp(0.875rem, 0.831rem + 0.188vw, 1rem) !important;font-weight:500 !important;}
.cp-footer-menu a{font-size:clamp(0.875rem, 0.831rem + 0.188vw, 1rem) !important;font-weight:500 !important;}

/* [GUIDED FORM] Contact page (22) guided multi-step enquiry form (Pro form widget,
   _css_classes cp-guided-form) - the A/B partner to the quick form, 18/08/2026.
   Why here: five things the widget's native controls cannot reach (grepped Pro 4.2.1
   form.php + form-steps handler 18/08/2026): (1) checkbox/radio options as tappable
   card rows - native markup is span.elementor-field-option > input + label with no
   styling hooks; the label gets a stretched ::after (service-cards pattern) so the
   WHOLE row toggles; (2) the JS-injected Next/Back button row layout (no native
   justify/gap control); (3) button + submit box-shadow (no native control);
   (4) field :focus state; (5) honeypot wrapper hide via :has() (css_classes land on
   the hidden INPUT, form-base.php:208; the wrapper is NOT .elementor-field-group).
   Colours/typography/pills/indicator colours are native widget controls in
   pages/contact.py. Tokens from the child theme :root. */
.cp-guided-form .elementor-field-subgroup{
  display:grid !important;grid-template-columns:1fr 1fr;gap:10px;width:100%;
}
@media (max-width:767px){
  .cp-guided-form .elementor-field-subgroup{grid-template-columns:1fr;}
}
.cp-guided-form .elementor-field-option{
  position:relative;display:flex;align-items:center;
  background:#ffffff;border:1px solid #C9D6D9;border-radius:8px;
  transition:border-color .15s ease,background-color .15s ease;
}
.cp-guided-form .elementor-field-option input{
  flex:0 0 auto;width:18px;height:18px;margin:0 0 0 14px;accent-color:var(--cp-teal);
}
.cp-guided-form .elementor-field-option label{
  flex:1;margin:0;padding:13px 14px 13px 10px;cursor:pointer;
  min-height:48px;display:flex;align-items:center;font-weight:500;
}
/* Whole row toggles: stretch the label's hit area over the option card. */
.cp-guided-form .elementor-field-option label::after{
  content:"" !important;position:absolute;inset:0;border-radius:8px;
}
.cp-guided-form .elementor-field-option:hover{border-color:var(--cp-teal);}
.cp-guided-form .elementor-field-option:has(input:checked){
  border-color:var(--cp-teal);background:var(--cp-teal-tint);
  box-shadow:inset 0 0 0 1px var(--cp-teal);
}
.cp-guided-form .elementor-field-option:focus-within{
  outline:2px solid var(--cp-teal);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .cp-guided-form .elementor-field-option{transition:none;}
}
/* JS-injected step button row: Next right, Back left (only step 1 has no Back). */
.cp-guided-form .e-form__buttons{
  width:100%;display:flex;justify-content:flex-end;gap:12px;margin-top:8px;
}
.cp-guided-form .e-form__buttons:has(.elementor-field-type-previous){
  justify-content:space-between;
}
.cp-guided-form .e-form__buttons__wrapper__button,
.cp-guided-form .elementor-button[type="submit"]{
  min-height:48px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,0.16);
}
/* Indicator labels: the indicator has flex-basis:0 (native), so labels wrap
   word-per-line without a width floor. One line on desktop, two tidy lines at 375. */
.cp-guided-form .e-form__indicators__indicator__label{text-align:center;}
@media (min-width:768px){
  .cp-guided-form .e-form__indicators__indicator__label{white-space:nowrap;}
}
@media (max-width:767px){
  .cp-guided-form .e-form__indicators__indicator__label{font-size:12px;min-width:5.5em;}
}
/* Button sizing rides the NATIVE button_align control (end on desktop,
   stretch on mobile - set in pages/contact.py; Pro's align-stretch rules load
   after this sheet and would beat any flex override here). Only the pill
   floor/fill is ours. */
.cp-guided-form .e-form__buttons__wrapper .elementor-button{min-width:140px;}
@media (max-width:767px){
  .cp-guided-form .e-form__buttons__wrapper .elementor-button{width:100%;min-width:0;}
}
/* Field focus state (native controls stop at :hover). */
.cp-guided-form .elementor-field-textual:focus{
  border-color:var(--cp-teal);box-shadow:0 0 0 3px rgba(18,129,129,0.15);outline:none;
}
/* Honeypot wrapper hide - same construction as [BAND FORM]. */
.cp-guided-form div:has(> input.cp-hp){display:none;margin:0;padding:0;}
/* [hidden] backup for the OTHER REVEAL field (cp-widgets.js): field groups are
   flex items, so the UA [hidden] rule must not lose to a display declaration. */
.cp-guided-form .elementor-field-group[hidden]{display:none !important;}

/* [PROCESS STRIP] Numbered process steps (design round, 18/08/2026; pattern of
   record - splicing sec5 + emergency "How we respond"). Connector line between
   the step circles from 768 up; hidden below (steps wrap 2x2). Motion round
   hooks: .cp-process-step (reveal), circle pulse. */
@media (min-width:768px){
  .cp-process-step{position:relative;}
  /* Line runs from the previous circle's edge to this circle's edge:
     adjacent circle centres sit one column-width + gap (12px) apart; the
     circles are 44px wide, so trim 22px + 8px breathing room each side. */
  .cp-process-step + .cp-process-step::before{
    content:"";position:absolute;top:21px;right:calc(50% + 30px);
    width:calc(100% + 12px - 60px);height:2px;background:#CFE4E4;
  }
}

/* [DIAGNOSTIC GRID] Fault node cards on teal bands (design round, 18/08/2026 -
   faults page flagship). Static ring now; the motion round animates the dot
   pulse here (CSS only, guarded by prefers-reduced-motion). */
.cp-diag-node{transition:background-color .18s ease;}
.cp-diag-node:hover{background-color:rgba(255,255,255,0.18) !important;}
@media (prefers-reduced-motion:reduce){
  .cp-diag-node{transition:none;}
}

/* [CTA BANNER] Mid-page CTA band, text left / actions right (design round,
   18/08/2026). Centre the text block when the columns stack. */
@media (max-width:1024px){
  .cp-cta-banner{text-align:center;}
}

/* [HEADER NAV DENSITY] Full-width header (Mitch, 18 Aug 2026 - room for the
   Articles item). Tighter item padding so the six top-level items sit on ONE
   line at laptop widths; below 1200 the density steps down again. */
@media (min-width:1025px){
  .cp-header .elementor-nav-menu--main .elementor-item{padding-inline:12px;}
}
@media (min-width:1025px) and (max-width:1199px){
  .cp-header .elementor-nav-menu--main .elementor-item{padding-inline:8px;font-size:15px;}
}

/* [STICKY HEADER] Mobile + tablet: header stays visible while scrolling
   (Mitch, 18 Aug 2026). Desktop keeps the static header. */
@media (max-width:1024px){
  .cp-header{position:sticky;top:0;z-index:990;box-shadow:0 2px 10px rgba(37,48,58,0.08);}
}