/**
* AUK CTA-strip global styles
* ---------------------------
* Enqueued sitewide by auk-cta-hydrator.php. Replaces the homepage-scoped
* `.auk-contact-strip` and prior inline-per-page hero/CTA CSS.
*
* Provides three reusable classes:
* .auk-page-hero — navy hero strip at top of a content page (H1)
* .auk-cta-strip — navy CTA strip at bottom of a content page
* .auk-cta-strip__cta-row — flex layout for the canonical 3 CTAs
*
* Plus the button variants .tbg-cta-btn--quote/configure/book/wa/call which are
* defensive duplicates of the per-button styling so any consuming page can
* rely on this file alone without depending on theme-level CSS being loaded.
*
* Canonical 3-CTA markup pattern:
*
*
*
Heading
*
Lead paragraph.
*
*
*
* Backward-compat (14 May 2026): row-level + button-variant selectors below
* are aliased to FOUR wrapper variants so the same CSS renders identically
* across the historical wrapper-class drift:
* .auk-cta-strip__cta-row — canonical (current target for new pages)
* .tbg-cta-row — sector + location pages (and others added
* pre-CSS-standardisation)
* .auk-contact-strip__cta-row — homepage page-23 inline CSS pattern
* .auk-contact-strip__actions — legacy case-study template pattern
* Future pages should still use the canonical `.auk-cta-strip__cta-row`.
*
* WhatsApp button colour note: the `auk-a11y-contrast.php` mu-plugin
* overrides `--wa` to `#128C7E` (WhatsApp Brand Teal) with !important
* for WCAG AA contrast (white-on-#25D366 is 2.74:1, fails AA). Our --wa
* rule below matches that value as defence-in-depth so the visual stays
* accessible even if the mu-plugin is ever disabled.
*/
/* -------------------- Page hero (navy top strip with H1) -------------------- */
.auk-page-hero {
background: #103060;
color: #fff;
padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
text-align: center;
}
.auk-page-hero h1 {
color: #fff;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
line-height: 1.15;
margin: 0 0 16px;
}
.auk-page-hero p {
color: #fff;
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.5;
max-width: 780px;
margin: 0 auto;
opacity: 0.95;
}
/* -------------------- Bottom CTA strip ------------------------------------- */
.auk-cta-strip {
background: #0066cc;
color: #fff;
padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px);
text-align: center;
}
.auk-cta-strip__inner {
max-width: 960px;
margin: 0 auto;
}
.auk-cta-strip h2 {
color: #fff;
font-size: clamp(24px, 3vw, 34px);
margin: 0 0 16px;
}
.auk-cta-strip p {
color: #fff;
font-size: 17px;
line-height: 1.5;
max-width: 780px;
margin: 0 auto;
opacity: 0.95;
}
/* -------------------- 3-CTA row flex layout -------------------------------- */
/* Desktop: nowrap so all 3 buttons sit on one line.
Mobile (<=600px): stack vertically full-width. */
.auk-cta-strip__cta-row,
.tbg-cta-row,
.auk-contact-strip__cta-row,
.auk-contact-strip__actions {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 12px;
margin: 24px auto 0;
}
.auk-cta-strip__cta-row .tbg-cta-btn,
.tbg-cta-row .tbg-cta-btn,
.auk-contact-strip__cta-row .tbg-cta-btn,
.auk-contact-strip__actions .tbg-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
/* Per-button icon prefix (added 14 May 2026 — restoring original design).
Inline SVG via background-image data URI keeps the icon white-filled
regardless of button background colour, with no HTML changes required
on 145+ existing pages. flex-shrink:0 protects icon from squishing on
the narrow Book-a-Call button when label personalises to "Book a call
with Steve". Aliased to all 3 wrapper variants per the doc-comment. */
.auk-cta-strip__cta-row .tbg-cta-btn::before,
.tbg-cta-row .tbg-cta-btn::before,
.auk-contact-strip__cta-row .tbg-cta-btn::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
flex-shrink: 0;
}
.auk-cta-strip__cta-row .tbg-cta-btn--configure::before,
.auk-cta-strip__cta-row .tbg-cta-btn--quote::before,
.tbg-cta-row .tbg-cta-btn--configure::before,
.tbg-cta-row .tbg-cta-btn--quote::before,
.auk-contact-strip__cta-row .tbg-cta-btn--configure::before,
.auk-contact-strip__cta-row .tbg-cta-btn--quote::before {
background-image: url("data:image/svg+xml;utf8,