/*
Theme Name: RCPA
Theme URI: https://rcpa.com.au
Author: RCPA migration
Description: RCPA brand theme, rebuilt to match the live Joomla/YOOtheme
  production site (https://rcpa.com.au) pixel-for-pixel where practical:
  navy/yellow palette, all-Poppins typography at the production weights,
  photo-card product grid, navy Knowledge Hub cards, and the outlined hero
  treatment. No code was carried over from the compromised source - only
  design tokens read from the live site's computed styles.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rcpa
*/

/* ==========================================================================
   Poppins

   theme.12.css sets `font-family: Poppins` on html and on every heading, but
   the live server ships no @font-face for it and links no font service - so
   live only renders Poppins for visitors who happen to have it installed, and
   falls back to the browser's default for everyone else. The theme had the
   same gap, which is why the two machines disagreed about the typeface.

   Self-hosted here instead, at the six weights the theme actually asks for
   (200/300/400/500/600/900), latin subset, so it renders as designed on every
   machine. Poppins is SIL Open Font License 1.1.

   Campton is in assets/fonts too - live declares it in custom.css and uses it
   for .uk-heading-*/.display-*/.uk-navbar-item only, none of which this theme
   renders, so it stays undeclared rather than loaded for nothing.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('assets/fonts/poppins-200.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('assets/fonts/poppins-900.woff2') format('woff2');
}

/* ==========================================================================
   Design tokens - read directly from https://rcpa.com.au computed styles.
   The live site is Poppins throughout (200/300/400/500 weights); Campton
   exists in the old theme's asset files but is not used anywhere rendered.
   ========================================================================== */

:root {
  --rcpa-navy: #002f67;
  --rcpa-navy-dark: #001b3d;
  --rcpa-navy-light: #0a4a96;
  --rcpa-navy-hover: #003471;  /* live .uk-card-primary.uk-card-hover:hover */

  /* Live marks these download buttons with Font Awesome's fa-download, not a
     page glyph. Drawn as a mask so it takes the button's own colour. */
  --rcpa-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 19h16'/%3E%3C/svg%3E");
  --rcpa-yellow: #ffd400;
  --rcpa-yellow-dark: #e6bf00;

  --rcpa-ink: #363636;
  --rcpa-body: #6d6e71;       /* live body copy colour, rgb(109,110,113) */
  --rcpa-muted: #939598;
  --rcpa-line: #e5e5e7;
  --rcpa-bg-soft: #eeeeee;    /* live footer / CTA-bar backdrop */
  --rcpa-cta-bar: #58595b;    /* live quote-request bar background */
  --rcpa-white: #fff;

  --rcpa-danger: #e44e56;
  --rcpa-success: #3dc372;
  --rcpa-warning: #ff9e45;

  --rcpa-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --rcpa-max: 1280px;          /* 1280 - 2x40 gutter = live's 1200px column.
                                 live caps .uk-container at 1200 but is
                                 content-box, so its gutter sits outside. */
  --rcpa-gutter: 40px;        /* live .uk-container padding: 40px, and it
                                 narrows on the way down - see the two rules
                                 under :root further on */
  --rcpa-radius: 2px;
  --rcpa-shadow: 0 2px 14px rgba(0, 47, 103, .10);
  --rcpa-shadow-lg: 0 12px 40px rgba(0, 47, 103, .16);
  --rcpa-header-h: 135px;     /* live tm-header-placeholder height */
}

/* .uk-container{padding-left:15px} then 20px from 640px and 40px from 960px.
   Without this every page runs a 40px gutter on a phone, which is 50px of
   width lost against live - enough to wrap a line that live keeps whole. */
@media (max-width: 959px) { :root { --rcpa-gutter: 20px; } }
@media (max-width: 639px) { :root { --rcpa-gutter: 15px; } }

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Live's html rule carries two more declarations that thin the type on a
   high-DPI screen - without them the same weight looks a shade heavier here:

     html{ ... -webkit-font-smoothing:antialiased;
               -moz-osx-font-smoothing:grayscale;
               text-rendering:optimizeLegibility }                           */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--rcpa-font);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.625;
  color: var(--rcpa-body);
  background: var(--rcpa-white);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--rcpa-navy); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--rcpa-navy-light); text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--rcpa-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Typography - all Poppins, at the production weights and sizes.
   200 = section display headings, 300 = body, 400 = nav, 500 = h1/buttons.
   ========================================================================== */

/* Live's own scale, copied from its stylesheet rather than approximated:
 *
 *   html{font-size:22px;line-height:1.625;font-weight:300;color:#6d6e71}
 *   h1..h6{margin:0 0 20px;font-weight:200;color:#002f67}
 *   h1 36.54px/1.2  -> 56px from 960px up
 *   h2 32.04px/1.3  -> 52px from 960px up
 *   h3 48px/1.4
 *   h4 36px/1.4 w400 uppercase, letter-spacing 2px
 *   h5 28px/1.4 w500 uppercase, letter-spacing 2px
 *   h6 22px/1.4 w500 uppercase, letter-spacing 2px
 *
 * Note the scale is not monotonic - live's h3 is larger than its h1, which is
 * why the migrated bodies (all <h3>) read as big section headings there.
 *
 * The sizes are written in px, not rem: this theme leaves html at the browser
 * default, so 1rem here is 16px while live's is 22px. Writing them as rem
 * would silently shrink everything by 27%, which is the bug this replaces. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 20px;
  font-family: var(--rcpa-font);
  font-weight: 200;
  line-height: 1.4;
  color: var(--rcpa-navy);
}

h1 { font-size: 36.54px; line-height: 1.2; }
h2 { font-size: 32.04px; line-height: 1.3; }
h3 { font-size: 48px; }
h4 { font-size: 36px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }
h5 { font-size: 28px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
h6 { font-size: 22px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }

@media (min-width: 960px) {
  h1 { font-size: 56px; }
  h2 { font-size: 52px; }
}

p {
  margin: 0 0 1.15em;
  font-size: 22px;
  font-weight: 300;
  color: var(--rcpa-body);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 500; color: var(--rcpa-ink); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35rem; }
li { margin-bottom: .4em; }

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 4px solid var(--rcpa-yellow);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--rcpa-navy);
}

hr { height: 1px; margin: 2.5rem 0; border: 0; background: var(--rcpa-line); }

code, pre {
  font-family: Consolas, Monaco, monospace;
  font-size: .9em;
  background: var(--rcpa-bg-soft);
}
code { padding: .15em .4em; border-radius: 3px; }
pre { padding: 1rem; overflow-x: auto; border-radius: var(--rcpa-radius); }

/* ==========================================================================
   Layout
   ========================================================================== */

.rcpa-container {
  width: 100%;
  max-width: var(--rcpa-max);
  margin-inline: auto;
  padding-inline: var(--rcpa-gutter);
}

.rcpa-container--wide { max-width: 1440px; }
.rcpa-container--small { max-width: 900px; }

.rcpa-main { min-height: 45vh; }

.rcpa-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.rcpa-section--soft { background: var(--rcpa-bg-soft); }
.rcpa-section--navy { background: var(--rcpa-navy); color: rgba(255, 255, 255, .88); }
.rcpa-section--navy h1,
.rcpa-section--navy h2,
.rcpa-section--navy h3 { color: var(--rcpa-white); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--rcpa-yellow);
  color: var(--rcpa-navy);
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  text-decoration: none;
}

/* ==========================================================================
   Header / navigation
   Live behaviour: transparent + overlaying the hero at the top of the page,
   solid navy once scrolled (tm-header-overlay / uk-navbar-transparent).
   On mobile the bar is always solid navy.
   ========================================================================== */

.rcpa-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.rcpa-has-hero .rcpa-header { margin-bottom: calc(-1 * var(--rcpa-header-h)); }

.rcpa-header.is-solid,
body:not(.rcpa-has-hero) .rcpa-header {
  background: var(--rcpa-navy);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 2px 16px rgba(0, 20, 45, .28);
}

.rcpa-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--rcpa-header-h);
  /* Live puts the navbar in .uk-container.uk-container-expand - full bleed
     with only the gutter, so the logo sits against the left edge of the
     window rather than lining up with the 1200px content column. */
  max-width: none;
}

.rcpa-logo { flex: 0 0 auto; }
/* Live's mark stands 57px tall in the navbar. Its own file is 1900x900 with
   generous padding baked in, while this one is trimmed to 1500x493 - so the
   height is set from the artwork that shows, not from the file box, or the
   logo comes out a third too small.
   Below 1200px live caps it: .uk-navbar-left img{max-width:120px}. */
.rcpa-logo img { width: auto; height: 57px; max-width: 52vw; object-fit: contain; }

@media (max-width: 1199px) {
  .rcpa-logo img { max-width: 120px; height: auto; }
}
.rcpa-logo a { display: block; }

/* Live's bar items run its full height -

     .uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle{min-height:80px}
     .uk-navbar-nav>li>a{height:100%}

   which is what puts the top edge of a dropdown on the bottom edge of the
   bar. Hung off a link only as tall as its own text, the panel opened 44px
   higher and sat over the navy. */
.rcpa-nav { margin-left: auto; align-self: stretch; }

.rcpa-nav ul {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rcpa-nav > ul { height: 100%; align-items: stretch; }
.rcpa-nav > ul > li { display: flex; }

.rcpa-nav li { position: relative; margin: 0; }

/* Top-level nav: white, 20px, weight 400, no uppercase - matches the live
   .uk-navbar-nav > li > a computed style exactly. */
.rcpa-nav > ul > li > a {
  display: flex;
  align-items: center;
  /* .uk-navbar-item,.uk-navbar-nav>li>a{min-height:80px} */
  min-height: 80px;
  padding: .6rem .85rem;
  font-family: var(--rcpa-font);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--rcpa-white);
  text-shadow: 0 1px 8px rgba(0, 20, 45, .45);
  white-space: nowrap;
}
.rcpa-nav > ul > li > a:hover { color: var(--rcpa-yellow); text-decoration: none; }

.rcpa-nav > ul > li.current-menu-item > a,
.rcpa-nav > ul > li.current-menu-ancestor > a,
.rcpa-nav > ul > li.current-page-ancestor > a { color: var(--rcpa-yellow); }

/* dropdowns */

/* Live's .uk-navbar-dropdown, verbatim - a plain white card, no rule on top:

     .uk-navbar-dropdown      width:280px; padding:25px; background:#fff;
                              box-shadow:0 1px 4px rgba(0,0,0,.14)
     .uk-navbar-dropdown-nav  18px Poppins 500; ls 1px; no uppercase
     ...>li>a                 color:#002f67; padding:6px 0
     ...>li>a:hover           color:#5e5e5e  (a colour change, no fill)
     .uk-nav-sub              padding-left:15px; padding:5px 0
     .uk-nav-sub a            color:#002f67; padding:2px 0                   */
.rcpa-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 280px;
  max-width: 90vw;
  padding: 25px;
  background: var(--rcpa-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Live's navbar is uk-navbar="{"align":"center"}", so a dropdown is centred
   under the item that opens it rather than hung off its left edge - measure
   the Products panel on live and its midpoint sits exactly on the word. */
.rcpa-nav > ul > li > ul {
  left: 50%;
  transform: translateX(-50%) translateY(6px);
}

/* The last item sits hard against the right edge, so its panel opens
   leftwards instead of running off the viewport. UIkit does this by clamping
   to --uk-position-viewport-offset, which needs JS to measure; pinning the
   last one is the CSS-only equivalent. */
.rcpa-nav > ul > li:last-child > ul {
  left: auto;
  right: 0;
  transform: translateY(6px);
}

/* A closed panel is not there to be hovered.

     .uk-drop{display:none}

   is how live keeps one out of the way, and nothing about it answers the
   pointer. Parked on opacity and visibility instead, this one stayed
   hit-testable for the 180ms the visibility transition runs on the way out -
   and because the panel is a descendant of the item, catching it in that
   window re-opened it. Moving into the panel's footprint without ever
   crossing "Products" was enough to bring it back.

   Only the top-level panel is pinned: pointer-events is inherited, so the
   whole subtree comes back with it and the second and third levels inside an
   open panel stay clickable. */
.rcpa-nav > ul > li > ul { pointer-events: none; }
.rcpa-nav > ul > li:hover > ul,
.rcpa-nav > ul > li:focus-within > ul { pointer-events: auto; }

.rcpa-nav li:hover > ul,
.rcpa-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rcpa-nav > ul > li:hover > ul,
.rcpa-nav > ul > li:focus-within > ul { transform: translateX(-50%) translateY(0); }
.rcpa-nav > ul > li:last-child:hover > ul,
.rcpa-nav > ul > li:last-child:focus-within > ul { transform: translateY(0); }

.rcpa-nav ul ul li { width: 100%; }

/* display:block, or the left padding only holds for the first line box - an
   inline box re-starts each wrapped line at the container edge. "Product
   Return | Credit Request" is long enough to wrap in both the offcanvas sheet
   and the 280px desktop panel, and its second line was falling out of the
   indent. */
.rcpa-nav ul ul a {
  display: block;
  padding: 6px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.625;
  text-transform: none;
  letter-spacing: 1px;
  color: var(--rcpa-navy);
  text-shadow: none;
  /* Live carries this on .uk-nav li>a, not on :hover - a plain declaration
     with enough weight to outrank the base a:hover{text-decoration:underline},
     so a dropdown item never picks up a rule under it. */
  text-decoration: none;
}
/* live only shifts the colour - no fill behind the item */
.rcpa-nav ul ul a:hover { background: none; color: #5e5e5e; }
.rcpa-nav ul ul li.current-menu-item > a { background: none; color: #000; }

/* The live Products dropdown lays its two groups (Pipes / Precast) out side
   by side in one panel - UIkit's `uk-navbar-dropdown-width-2` - rather than
   opening a third-level flyout. Reproduced with a two-column dropdown on any
   top-level item whose children themselves have children. */
.rcpa-nav > ul > li.menu-item-has-children > ul:has(> li.menu-item-has-children) {
  /* .uk-navbar-dropdown-width-2:not(.uk-drop-stack){width:560px} - twice the
     280px panel, same 25px padding. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* .rcpa-nav ul sets align-items:center for the top-level bar, and it lands
     on this element too - which centred the shorter Pipes column against the
     taller Precast one and dropped it half a line. Grid's own default. */
  align-items: start;
  gap: 0 25px;
  width: 560px;
  max-width: 90vw;
  padding: 25px;
}

/* Inside that panel the group heading stays put and its children list under
   it, so nothing flies out sideways. */
.rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) > li > a {
  padding-inline: 0;
  font-weight: 500;
  color: var(--rcpa-navy);
}
.rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) ul {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  /* still .uk-nav-sub: 5px of air and the 15px step-in */
  padding: 5px 0 5px 15px;
  background: none;
  border-top: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* .uk-nav-sub{padding:5px 0 5px 15px} - the third level steps in 15px */
.rcpa-nav ul ul ul { padding: 5px 0 5px 15px; }
.rcpa-nav ul ul ul a { padding: 2px 0; }

/* Fallback for browsers without :has() - a plain third-level flyout. */
.rcpa-nav ul ul ul { top: 0; left: 100%; }

/* "Contact Us" is a dropdown label on the live navbar, not a link. Keep the
   pointer as an arrow so it does not advertise a destination it has none of. */
.rcpa-nav .rcpa-nav-label > a { cursor: default; }

/* Parent items carry the live site's small chevron - the top-level ones, and
   the two group headings inside the Products panel, which live marks the same
   way ("Pipes v", "Precast v"). */
.rcpa-nav > ul > li.menu-item-has-children > a::after,
.rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) > li.menu-item-has-children > a::after {
  display: inline-block;
  width: .42em; height: .42em;
  margin-left: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  content: '';
}

/* mobile toggle */

.rcpa-burger {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--rcpa-radius);
  cursor: pointer;
}
.rcpa-burger span,
.rcpa-burger span::before,
.rcpa-burger span::after {
  position: absolute;
  left: 50%;
  width: 22px; height: 2px;
  margin-left: -11px;
  background: var(--rcpa-white);
  transition: transform .22s ease, opacity .18s ease;
  content: '';
}
.rcpa-burger span { top: 50%; margin-top: -1px; }
.rcpa-burger span::before { top: -7px; margin-left: 0; left: 0; }
.rcpa-burger span::after  { top:  7px; margin-left: 0; left: 0; }

.rcpa-burger[aria-expanded="true"] span { background: transparent; }
.rcpa-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.rcpa-burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

.rcpa-search-toggle {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-left: .5rem;
  color: var(--rcpa-white);
  opacity: .9;
  flex: 0 0 auto;
}
.rcpa-search-toggle:hover { color: var(--rcpa-yellow); opacity: 1; }

/* Search panel - live's uk-modal, opened from the navbar's search icon:

     .uk-modal        fixed; z-index:1010; padding:15px, 50px 20px from 640,
                      40px sides from 960; background:rgba(0,0,0,.6);
                      opacity 0 -> 1 over .15s
     .uk-modal-dialog margin:0 auto; width:600px; background:#002f67;
                      translateY(-100px) -> 0 over .3s
     .uk-modal-body   padding:20px
     .uk-search-medium .uk-search-input
                      height:55px; font-size:20px; transparent;
                      border-bottom:1px solid; 36px of room for the icon
   The dialog is an inverse surface, so the field, its placeholder and the
   icon are the white-on-navy set. */
.rcpa-search-modal {
  position: fixed;
  inset: 0;
  z-index: 1010;
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .15s linear;
}
/* the panel is laid out, so [hidden] needs saying out loud */
.rcpa-search-modal[hidden] { display: none; }

/* live's html.uk-modal-page - the page does not scroll behind the overlay */
html.rcpa-modal-open { overflow: hidden; }
.rcpa-search-modal.is-open { opacity: 1; }

@media (min-width: 640px) { .rcpa-search-modal { padding: 50px 20px; } }
@media (min-width: 960px) { .rcpa-search-modal { padding-inline: 40px; } }

.rcpa-search-modal__dialog {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: var(--rcpa-navy);
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity .3s linear, transform .3s linear;
}
.rcpa-search-modal.is-open .rcpa-search-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .rcpa-search-modal,
  .rcpa-search-modal__dialog { transition: none; }
}

/* named for the modal: .rcpa-search-form is the results page's own
   component further down, with margins of its own */
.rcpa-search-modal__form { position: relative; }

.rcpa-search-modal__icon {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  color: rgba(255, 255, 255, .4);
  pointer-events: none;
}

.rcpa-search-modal__form input[type="search"] {
  width: 100%;
  height: 55px;
  padding: 0 0 0 36px;
  font-family: inherit;
  font-size: 20px;
  color: rgba(255, 255, 255, .7);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  border-radius: 0;
  -webkit-appearance: none;
}
.rcpa-search-modal__form input[type="search"]::placeholder { color: rgba(255, 255, 255, .4); }
.rcpa-search-modal__form input[type="search"]:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: rgba(255, 255, 255, .1);
}

/* ==========================================================================
   Hero - outlined/filled headline, matches the live "WE ARE LEADERS" banner.
   Live: h1 weight 500 size 56px, outline stroke 2px white, hero itself is
   shorter than a full-viewport hero (~440-620px depending on content).
   ========================================================================== */

.rcpa-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* live: uk-height-viewport="offset-top: true; offset-bottom: 40" on a
     banner that starts under the transparent header - 60% of the window
     height. The floor keeps it usable on short windows. */
  min-height: max(340px, 60vh);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--rcpa-navy);
  background-size: cover;
  background-position: center;
  color: var(--rcpa-white);
  overflow: hidden;
}

/* Live lays a flat 14% black over the whole banner - not a gradient at the
   top - and that even wash is what lifts the outlined headline off a busy
   photo:

     <div class="uk-position-cover" style="background-color: rgba(0,0,0,0.14)">

   Present on every banner: the home video, the news field, the locations
   yard. An earlier note here claimed live used no scrim at all; it does. */
.rcpa-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .14);
}

/* No separate interior height: live runs the same 60%-of-viewport banner on
   the front page, the About pages, Products and Knowledge Hub alike. */

/* background-color, not the shorthand: the shorthand resets background-size
   and background-position, which left the still tiling at its natural 1290px
   instead of covering the banner whenever the video was not showing. */
.rcpa-hero--video { background-color: var(--rcpa-navy); }
.rcpa-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Video that cannot play (autoplay refused, CDN failure, reduced motion):
   hide it so the hero's own background still shows instead of a blank box.
   Set by assets/hero-video.js - see QA row 7. */
.rcpa-hero__video.is-unavailable { display: none; }

.rcpa-hero__inner { position: relative; z-index: 1; width: 100%; }

.rcpa-hero__title {
  margin: 0;
  font-family: var(--rcpa-font);
  /* live .titleanimation h1: 120px/900, 75px below 1200px, 45px below 768px */
  font-size: 120px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--rcpa-white);
  text-align: center;
}

@media (max-width: 1199px) { .rcpa-hero__title { font-size: 75px; } }
@media (max-width: 767px)  { .rcpa-hero__title { font-size: 45px; } }

.rcpa-hero__title .outlinetext,
.outlinetext {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  paint-order: stroke fill;
}

.rcpa-hero__title .filltext,
.filltext { color: #fff; }

/* --------------------------------------------------------- banner animation

   Live brings every banner headline in on two mechanisms at once.

   1. uk-scrollspy on the banner section, targeting the h1:
        cls: uk-animation-slide-bottom-small        (most pages)
        cls: uk-animation-slide-bottom; delay: 100  (the policy banners)
      .uk-animation-slide-bottom-small{animation-name:uk-fade,uk-slide-bottom-small}
      [class*=uk-animation-]{animation:.5s ease-out both}
      @keyframes uk-fade              {0%{opacity:0}        100%{opacity:1}}
      @keyframes uk-slide-bottom-small{0%{translateY(10px)} 100%{translateY(0)}}
      @keyframes uk-slide-bottom      {0%{translateY(100%)} 100%{translateY(0)}}

   2. ScrollOut on the two halves of the headline, which rise 90px in turn:
      @keyframes fadeIn{from{bottom:-90px;opacity:0} to{bottom:0;opacity:1}}
      .outlinetext[data-scroll=in]{animation:fadeIn .5s ease-in both; delay 2s}
      .filltext[data-scroll=in]   {animation:fadeIn .5s ease-in both; delay 2.5s}

   Every banner sits at the top of its page, so ScrollOut's data-scroll=in is
   set as soon as the page paints - the delays alone carry the sequence, and
   no observer is needed to reproduce it. */

@keyframes rcpaBannerTitle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rcpaBannerTitleFar {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* live animates `bottom`, not transform - hence the position:relative */
@keyframes rcpaBannerWord {
  from { bottom: -90px; opacity: 0; }
  to   { bottom: 0; opacity: 1; }
}

.rcpa-hero__title { animation: rcpaBannerTitle .5s ease-out both; }

/* the policy banners use the full-height slide, 100ms behind */
.rcpa-pagehead--policy h1 {
  animation: rcpaBannerTitleFar .5s ease-out both;
  animation-delay: .1s;
}

.outlinetext,
.filltext {
  position: relative;
  animation: rcpaBannerWord .5s ease-in both;
}
.outlinetext { animation-delay: 2s; }
.filltext { animation-delay: 2.5s; }

@media (prefers-reduced-motion: reduce) {
  .rcpa-hero__title,
  .rcpa-pagehead--policy h1,
  .outlinetext,
  .filltext { animation: none; }
}

.rcpa-hero__title h1 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}

.rcpa-hero .rcpa-pagehead__crumbs {
  margin-top: .85rem;
  text-align: center;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 20, 45, .6);
}
.rcpa-hero .rcpa-pagehead__crumbs a { color: var(--rcpa-yellow); }

/* flat navy title band for interior pages with no photo banner */
.rcpa-pagehead {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  background: var(--rcpa-navy);
  color: var(--rcpa-white);
}
.rcpa-pagehead h1 { margin: 0; color: var(--rcpa-white); text-align: center; text-transform: uppercase; }
.rcpa-pagehead__crumbs {
  margin-top: .5rem;
  text-align: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .72);
}
.rcpa-pagehead__crumbs a { color: var(--rcpa-yellow); }

/* The policy articles use live's .all-banner-design block instead:
     .uk-section-primary   background:#002955   (a shade darker than the navy)
     style="min-height:500px" + uk-flex uk-flex-middle
     h1.uk-h5.uk-font-secondary.uk-width-2xlarge.uk-margin-auto.uk-text-center
     #page\#0 {color:#fff !important; font-size:50px; text-transform:uppercase}
   .uk-font-secondary is Poppins 500, and uk-width-2xlarge caps the line at
   750px. No breadcrumbs on this one. */
.rcpa-pagehead--policy {
  display: flex;
  align-items: center;
  min-height: 500px;
  padding-block: 40px;
  background: #002955;
}
.rcpa-pagehead--policy .rcpa-container { width: 100%; }
.rcpa-pagehead--policy h1 {
  max-width: 750px;
  margin-inline: auto;
  font-size: 50px;
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 639px) {
  .rcpa-pagehead--policy { min-height: 320px; }
  .rcpa-pagehead--policy h1 { font-size: 34px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.rcpa-btn,
.wp-block-button__link,
button, input[type="submit"], .wpforms-submit {
  display: inline-block;
  padding: .75rem 1.75rem;
  font-family: var(--rcpa-font);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  color: var(--rcpa-white);
  background: var(--rcpa-navy);
  border: 1px solid var(--rcpa-navy);
  border-radius: var(--rcpa-radius);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.rcpa-btn:hover,
.wp-block-button__link:hover,
button:hover, input[type="submit"]:hover, .wpforms-submit:hover {
  background: var(--rcpa-navy-light);
  border-color: var(--rcpa-navy-light);
  color: var(--rcpa-white);
  text-decoration: none;
}

/* the quote-bar button: white bg, navy text - matches the live CTA */
.rcpa-btn--white {
  background: var(--rcpa-white);
  border-color: var(--rcpa-white);
  color: var(--rcpa-navy);
}
.rcpa-btn--white:hover { background: var(--rcpa-bg-soft); color: var(--rcpa-navy); }

.rcpa-btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--rcpa-white);
}
.rcpa-btn--ghost:hover {
  background: var(--rcpa-white);
  border-color: var(--rcpa-white);
  color: var(--rcpa-navy);
}

.rcpa-btn--outline {
  background: transparent;
  color: var(--rcpa-navy);
  border-color: var(--rcpa-navy);
}
.rcpa-btn--outline:hover { background: var(--rcpa-navy); color: var(--rcpa-white); }

/* Small grey pill button - the live "Read more" / "More Details" style used
   on news cards (uk-button-default). */
/* Live's is uk-button + uk-button-small + uk-button-default:
     .uk-button        {font-weight:500; text-transform:uppercase; letter-spacing:1px;
                        border-radius:0}
     .uk-button-small  {padding:0 20px; line-height:38px; font-size:15px}
     .uk-button-default{background-color:#f7f7f7; color:#5e5e5e;
                        border:1px solid transparent}
   The old .78rem came out at 12.5px, and without the base .rcpa-btn class the
   label kept its sentence case where live shows it uppercase. */
.rcpa-btn--pill {
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 38px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5e5e5e;
  background: #f7f7f7;
  border: 1px solid transparent;
  border-radius: 0;
}
.rcpa-btn--pill:hover {
  background: transparent;
  color: var(--rcpa-ink);
  border-color: var(--rcpa-line);
  /* this one is not built on .rcpa-btn, so it misses that rule's reset and
     would otherwise pick up the base a:hover underline */
  text-decoration: none;
}

/* Plain text "More Details" link used on product cards - no button chrome */
/* live: .el-link.uk-button.uk-button-text - the .uk-button base gives it
   22px/500, uppercase and 1px tracking, and uk-button-text strips the button
   chrome. Its rule is drawn by ::before on hover only, so nothing is
   underlined at rest. */
.rcpa-link--plain {
  font-family: var(--rcpa-font);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.625;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rcpa-white);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rcpa-link--plain:hover { color: var(--rcpa-white); border-color: currentColor; text-decoration: none; }

/* ==========================================================================
   Content styling
   ========================================================================== */

.rcpa-content { font-size: 22px; }   /* live html{font-size:22px} */

.rcpa-content > :first-child { margin-top: 0; }

.rcpa-content h2 { margin-top: 2.25em; }
.rcpa-content h3 { margin-top: 1.9em; }
.rcpa-content h2:first-child,
.rcpa-content h3:first-child { margin-top: 0; }

/* The lead heading over a form (see rcpa_lead_headings()). h3 already carries
   live's uk-h3 metrics - 48px/1.4, weight 200, #002f67 - so only the spacing
   and the alignment come from the rest of live's class list:
     uk-margin-medium   40px under it
     uk-text-center     centred...
     uk-text-left@m     ...until 960px, left from there */
.rcpa-content h3.rcpa-lead-heading {
  margin-bottom: 40px;
  text-align: center;
}

@media (min-width: 960px) {
  .rcpa-content h3.rcpa-lead-heading { text-align: left; }
}

.rcpa-content img { border-radius: var(--rcpa-radius); }

.rcpa-content figure { margin: 1.75rem 0; }
.rcpa-content figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--rcpa-muted);
}

.rcpa-content > div { margin-bottom: 1.15em; }

.rcpa-content ul { list-style: none; padding-left: 0; }

.rcpa-content ul.rcpa-doclist {
  columns: 320px 3;
  column-gap: 2.5rem;
}
.rcpa-content ul.rcpa-doclist > li { break-inside: avoid; page-break-inside: avoid; }

.rcpa-content ul > li {
  padding: .9rem 0;
  border-bottom: 1px solid var(--rcpa-line);
}

/* A list whose items are nothing but links - live's PIRMP pair on /legal -
   is a row of buttons there, not a list:
     uk-grid-small       10px between them
     .uk-button          weight 500; uppercase; ls 1px; border-radius 0
     .uk-button-large    padding:0 40px; line-height:53px; font-size:16px
     .uk-button-primary  background:#002f67; color:#fff;
                         border:1px solid transparent
     ...:hover           background:transparent; color:#002f67;
                         border-color:#002f67                                */
.rcpa-content ul.rcpa-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.rcpa-content ul.rcpa-btn-row > li {
  padding: 0;
  border: 0;
}

.rcpa-content ul.rcpa-btn-row > li > a,
.rcpa-content ul.rcpa-btn-row > li > a[href$=".pdf"]:not(.rcpa-kb-card) {
  display: inline-block;
  margin: 0;
  padding: 0 40px;
  font-size: 16px;
  line-height: 53px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rcpa-white);
  background: var(--rcpa-navy);
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out;
}

/* no download glyph on these - live draws a plain button */
.rcpa-content ul.rcpa-btn-row > li > a[href$=".pdf"]:not(.rcpa-kb-card)::before { content: none; }

.rcpa-content ul.rcpa-btn-row > li > a:hover,
.rcpa-content ul.rcpa-btn-row > li > a[href$=".pdf"]:not(.rcpa-kb-card):hover {
  background: transparent;
  color: var(--rcpa-navy);
  border-color: var(--rcpa-navy);
  text-decoration: none;
}
.rcpa-content ul > li:last-child { border-bottom: 0; }
.rcpa-content ul.rcpa-doclist > li:last-child { border-bottom: 1px solid var(--rcpa-line); }

.rcpa-content li > h3,
.rcpa-content li > h4 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: none;
}

.rcpa-content li > p { margin: 0 0 .5rem; font-size: .93rem; }
.rcpa-content li > p:last-child { margin-bottom: 0; }

/* document download links */
.rcpa-content a[href$=".pdf"]:not(.rcpa-kb-card),
.rcpa-content a[href$=".docx"]:not(.rcpa-kb-card),
.rcpa-content a[href$=".xlsx"]:not(.rcpa-kb-card),
.rcpa-content a[href$=".xls"]:not(.rcpa-kb-card) {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  margin: .2rem .3rem .2rem 0;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--rcpa-ink);
  background: var(--rcpa-bg-soft);
  border: 1px solid var(--rcpa-line);
  border-radius: 2px;
  text-decoration: none;
}
.rcpa-content a[href$=".pdf"]:not(.rcpa-kb-card)::before,
.rcpa-content a[href$=".docx"]:not(.rcpa-kb-card)::before,
.rcpa-content a[href$=".xlsx"]:not(.rcpa-kb-card)::before,
.rcpa-content a[href$=".xls"]:not(.rcpa-kb-card)::before {
  content: '';
  flex: 0 0 auto;
  width: 14px; height: 14px;
  background: var(--rcpa-navy);
  clip-path: polygon(20% 0, 72% 0, 100% 26%, 100% 100%, 20% 100%);
}
.rcpa-content a[href$=".pdf"]:not(.rcpa-kb-card):hover,
.rcpa-content a[href$=".docx"]:not(.rcpa-kb-card):hover,
.rcpa-content a[href$=".xlsx"]:not(.rcpa-kb-card):hover,
.rcpa-content a[href$=".xls"]:not(.rcpa-kb-card):hover {
  background: var(--rcpa-line);
  color: var(--rcpa-navy);
}

/* tables */
.rcpa-content table {
  width: 100%;
  margin: 1.75rem 0;
  border-collapse: collapse;
  font-size: .92rem;
}
.rcpa-content thead th {
  background: var(--rcpa-navy);
  color: var(--rcpa-white);
  font-weight: 500;
  text-align: left;
}
.rcpa-content th, .rcpa-content td {
  padding: .65rem .85rem;
  border: 1px solid var(--rcpa-line);
}
.rcpa-content tbody tr:nth-child(even) { background: var(--rcpa-bg-soft); }

.rcpa-tablewrap { overflow-x: auto; margin: 1.75rem 0; }
.rcpa-tablewrap table { margin: 0; }

/* ==========================================================================
   Product grid - photo-background square cards, matching /products live.
   Live: 285x285 square, img object-fit:cover fills it, centered white
   overlay text (title 28px/500/ls2px + plain "More Details" link).
   ========================================================================== */

.rcpa-product-grid {
  display: grid;
  /* live: uk-child-width-1-1 / 1-2@s / 1-4@m, on UIkit's 640px and 960px
     breakpoints - one tile per row on a phone, never two squeezed side by
     side, which is what clipped "STORMWATER SYSTEMS". */
  grid-template-columns: 1fr;
  gap: 20px;            /* live uk-grid-medium */
  margin-top: 2.5rem;
}

.rcpa-product-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rcpa-radius);
  color: var(--rcpa-white);
}

.rcpa-product-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.rcpa-product-card:hover img { transform: scale(1.06); }

.rcpa-product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 20, 45, .15) 0%, rgba(0, 20, 45, .55) 100%);
}

.rcpa-product-card__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;            /* live uk-margin-top */
  text-align: center;
  padding: 1rem;
}

/* live: .product-items h4.el-title {font-size:28px; padding:0 8px} - that
   beats the uk-h2 the markup also carries. The old 1.4rem came out at
   22.4px, rem against the 16px html default again. */
.rcpa-product-card__title {
  margin: 0;
  padding: 0 8px;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rcpa-white);
}

/* ==========================================================================
   Knowledge Hub - solid navy cards, matching /knowledge-hub live
   (uk-card-primary, rgb(0,47,103) background).
   ========================================================================== */

/* Live lays every one of these tiles out with the same YOOtheme "fs-grid"
   element, so the card itself is identical on /knowledge-hub and inside a
   product body - only the column count and the title size differ:

     .js-filter  uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s
                 uk-child-width-1-4@m          <- Knowledge Hub: 4 per row
     EKOPipe     ... uk-width-1-3@m            <- in-body tiles: 3 per row

   Card chrome (theme.12.css):
     .uk-card-primary  background:#002f67; color:#fff
     .uk-card-body     padding:20px; @media(min-width:1200px) padding:40px
     .uk-h4            36px/1.4, weight 400, uppercase, letter-spacing 2px
     .uk-margin-top    margin-top:20px !important   (title, and button block)
     .uk-button        padding:0 30px; 22px/58px; weight 500; uppercase; ls 1px
     .uk-card-primary .uk-button-default
                       background:rgba(255,255,255,.1); color:rgba(255,255,255,.7)

   plus the page-level inline block both pages carry:
     #page\#1 .uk-button {font-size:16px; line-height:25px;
                          padding-top:10px; padding-bottom:10px}
     #page\#1 .fas       {margin-right:10px}
     @media (min-width:1200px){ #page\#1 .uk-card-body{padding:40px 10px} }
   and, on /knowledge-hub only, the section override that shrinks the titles:
     #page\#2 h4, #page\#2 .uk-h4 {font-size:26px; font-weight:600} */

.rcpa-kb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;            /* uk-grid-small: 10px on both axes */
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .rcpa-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .rcpa-kb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rcpa-kb-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  background: var(--rcpa-navy);
  color: var(--rcpa-white);
  border-radius: var(--rcpa-radius);
  text-align: center;
  text-decoration: none;
  transition: background .2s ease;
}

/* The filter bar hides cards with the hidden attribute - the display:flex
   above would otherwise beat the browser's [hidden]{display:none}. */
.rcpa-kb-card[hidden] { display: none; }

@media (min-width: 1200px) {
  .rcpa-kb-card { padding: 40px 10px; }
}

/* Live lifts nothing on hover - .uk-card-primary.uk-card-hover:hover only
   shifts the navy one shade lighter, so no transform here either. */
.rcpa-kb-card:hover {
  background: var(--rcpa-navy-hover);
  text-decoration: none;
}

.rcpa-kb-card__title {
  margin: 20px 0 0;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--rcpa-white);
}

.rcpa-kb-card__btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .1);
  border: 1px solid transparent;
  border-radius: 0;
  transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out;
}

.rcpa-kb-card__btn::before {
  content: '';
  flex: 0 0 auto;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: var(--rcpa-icon-download) center / contain no-repeat;
          mask: var(--rcpa-icon-download) center / contain no-repeat;
}

.rcpa-kb-card:hover .rcpa-kb-card__btn {
  background: transparent;
  color: var(--rcpa-white);
  border-color: rgba(255, 255, 255, .1);
}

/* The same cards inside a page body - EKOPipe's three document tiles run
   three to a row and keep the full 36px .uk-h4 title. */
.rcpa-content .rcpa-kb-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 959px) {
  .rcpa-content .rcpa-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .rcpa-content .rcpa-kb-grid { grid-template-columns: 1fr; }
}

/* A page with a single document runs it the full width of the container, the
   way live swaps that item from uk-width-1-3@m to uk-width-1-1@m - see Large
   Culverts against EKOPipe. */
.rcpa-content .rcpa-kb-card:only-child {
  grid-column: 1 / -1;
}

.rcpa-content .rcpa-kb-card__title {
  font-size: 36px;
  font-weight: 400;
}

@media (max-width: 959px) {
  .rcpa-content .rcpa-kb-card__title { font-size: 26px; }
}

/* Filter bar above the Knowledge Hub grid: "All" tab + two dropdowns.
   Live builds it from three uk-tab lists sitting in one centred
   uk-grid-large row (80px columns, 140px from 1200px up), and .uk-tab::before
   is transparent in this theme, so there is no rule drawn under the bar:

     .uk-tab>*>a           5px 10px; 11px/20px; weight 500; uppercase; ls 2px;
                           #5e5e5e; border-bottom:1px solid transparent
     .uk-tab>.uk-active>a  #363636; border-color:#002f67
     .uk-dropdown          min-width:250px; padding:25px; background:#fff;
                           box-shadow:0 1px 4px rgba(0,0,0,.14); offset 10px
     .uk-dropdown-nav>li>a #5e5e5e; padding:6px 0                          */
/* Live drops the filter bar well clear of the banner. #page#2 is a plain
   .uk-section (40px top, 70px from 960px up), then the bar picks up
   .uk-margin's 20px and .uk-margin-medium's 40px on the way down:

     <div class="fs-grid uk-margin">              margin-top:20px !important
       <div class="fs-grid-pro-filter-sticky">
         <div class="grid-pro-filter-top uk-margin"></div>
         <div class="fs-filter-grid ... uk-margin-medium">  margin-top:40px

   The inline padding-top:0 this section used to carry pulled the whole bar
   up against the banner. */
.rcpa-section--kb { padding-block: 40px; }

@media (min-width: 960px) {
  .rcpa-section--kb { padding-block: 70px; }
}

.rcpa-kb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 80px;
  margin-top: 60px;
  font-size: 11px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  .rcpa-kb-filters { gap: 10px 140px; }
}

.rcpa-kb-filters > button,
.rcpa-kb-filters__toggle {
  padding: 5px 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #5e5e5e;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color .1s ease-in-out, border-color .1s ease-in-out;
}

/* the global button:hover (navy fill, white label) has to be shut off here -
   live's .uk-tab>*>a:hover only greys the rule under the label */
.rcpa-kb-filters > button:hover,
.rcpa-kb-filters__toggle:hover {
  background: none;
  color: #5e5e5e;
  border-bottom-color: var(--rcpa-line);
  text-decoration: none;
}

.rcpa-kb-filters > button.is-active,
.rcpa-kb-filters__toggle.is-active,
.rcpa-kb-filters__dropdown.is-open .rcpa-kb-filters__toggle {
  color: #363636;
  border-bottom-color: var(--rcpa-navy);
}

.rcpa-kb-filters__dropdown { position: relative; }

/* live marks the two dropdown labels with uk-icon="triangle-down" */
.rcpa-kb-filters__toggle {
  padding-right: 24px;
}
.rcpa-kb-filters__toggle::after {
  content: '';
  position: absolute;
  right: 10px; top: 50%;
  width: 0; height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
}

.rcpa-kb-filters__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 20;
  min-width: 250px;
  margin: 0;
  padding: 25px;
  list-style: none;
  text-align: left;
  background: var(--rcpa-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.rcpa-kb-filters__dropdown.is-open .rcpa-kb-filters__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.rcpa-kb-filters__menu button {
  display: block;
  width: 100%;
  padding: 6px 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #5e5e5e;
  cursor: pointer;
  transition: color .1s ease-in-out;
}
.rcpa-kb-filters__menu button:first-child { padding-top: 0; }
/* .uk-nav-default>li>a:hover / li.uk-active>a - a colour change only, so the
   global button:hover fill has to be turned off here too */
.rcpa-kb-filters__menu button:hover,
.rcpa-kb-filters__menu button.is-active {
  background: none;
  color: #363636;
  text-decoration: none;
}

/* ==========================================================================
   News grid - matching /rcpa-news live cards
   (image top, small grey date, navy uppercase title, grey pill button)
   ========================================================================== */

.rcpa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
}

.rcpa-card {
  display: flex;
  flex-direction: column;
  background: var(--rcpa-white);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* Live only tints the tile on hover - .uk-tile-default.uk-tile-hover:hover
   sets background-color:#f2f2f2 and nothing moves. */
.rcpa-card:hover { background: #f2f2f2; }

/* Live wraps the whole tile in a single .uk-link-toggle, which carries
     .uk-link-toggle{color:inherit!important; text-decoration:none!important}
   so neither the date, the headline nor the Read more label is underlined on
   hover - only the tint changes. Here the tile is three separate links, so
   each has to opt out of the base a:hover underline. */
.rcpa-card a,
.rcpa-card a:hover {
  text-decoration: none;
}

.rcpa-card__media { aspect-ratio: 3 / 2; background: var(--rcpa-bg-soft); overflow: hidden; }
.rcpa-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* uk-padding-small on live: 10px on every side. The horizontal 0 here left
   the date, title and button flush against the image edge. */
.rcpa-card__body { display: flex; flex-direction: column; flex: 1; padding: 10px; }

/* .el-meta.uk-text-small.uk-margin-top */
.rcpa-card__meta {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rcpa-muted);
}

/* .el-title.uk-h6.uk-margin-small-top.uk-margin-remove-bottom - uk-h6 is
   22px/500, uppercase, 2px tracking. The old 1.05rem rendered at 16.8px,
   because rem resolves against the 16px html default, not the 22px body. */
.rcpa-card__title {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.4;
}
.rcpa-card__title a { color: var(--rcpa-navy); }

.rcpa-card__excerpt { margin: 0 0 1.1rem; font-size: .94rem; }

/* uk-margin-small-top, not pushed to the card foot: live lets the button sit
   directly under the title, so a shorter headline leaves space below it. */
.rcpa-card__more { margin-top: 10px; align-self: flex-start; }

.rcpa-children { margin-top: 3rem; }

/* ==========================================================================
   Single post - sidebar layout matching /latest-news/<slug> live
   ========================================================================== */

.rcpa-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: start;
}

.rcpa-single__date {
  display: inline-block;
  margin: 1.25rem 0 1.5rem;
  padding: .6rem 1.1rem;
  background: var(--rcpa-navy);
  color: var(--rcpa-white);
  font-size: .85rem;
  font-weight: 500;
}

.rcpa-sidebar {
  padding: 1.75rem;
  background: var(--rcpa-bg-soft);
}
.rcpa-sidebar h2 {
  margin: 0 0 1.25rem;
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--rcpa-navy);
}
.rcpa-sidebar ul { margin: 0; padding: 0; list-style: none; }
.rcpa-sidebar li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--rcpa-line);
  margin-bottom: 0;
}
.rcpa-sidebar li:last-child { border-bottom: 0; }
.rcpa-sidebar a { font-size: .92rem; color: var(--rcpa-navy); font-weight: 500; }
.rcpa-sidebar li.is-current a { color: var(--rcpa-muted); pointer-events: none; }

/* ==========================================================================
   Testimonial carousel - the italic navy quote block that recurs on every
   page, with dot pagination in yellow.
   ========================================================================== */

.rcpa-testimonial {
  max-width: 900px;
  margin: 3rem auto 0;
  padding-block: 1rem;
  text-align: center;
}

/* Live's uk-slider keeps every slide on one flex track and animates the
   track's transform, so the quote glides across instead of being cut out and
   faded back in. The track is a block-level flex container, so its own box
   stays exactly one slide wide - which is what makes translateX(-100%) per
   step land on the next slide with no measuring.

   All slides share the row, so the block settles at the height of the longest
   quote and nothing below it moves between slides. */
.rcpa-testimonial__viewport { overflow: hidden; }

.rcpa-testimonial__track {
  display: flex;
  align-items: stretch;
  transform: translateX(calc(var(--rcpa-slide, 0) * -100%));
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .rcpa-testimonial__track { transition: none; }
}

.rcpa-testimonial__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  /* live module-127 inline style: 24px, italic, #002f67 */
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--rcpa-navy);
  line-height: 1.6;
}

/* live: <div class="el-meta uk-margin-medium-top"> - 40px clear of the quote,
   and the page's inline block only sets its size and slant:
     #module-127\#0 .el-content {color:#002f67; font-size:24px; font-style:italic}
     #module-127\#0 .el-meta    {font-size:24px; font-style:italic}
   With no colour of its own it keeps html's #6d6e71, so the attribution is
   body grey against the navy quote - not navy as well. */
.rcpa-testimonial__slide cite {
  display: block;
  margin-top: 40px;
  font-style: italic;
  /* live .el-meta matches the quote's own size, it is not a small caption */
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  color: var(--rcpa-body);
}

.rcpa-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2rem;
}
.rcpa-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rcpa-line);
  cursor: pointer;
  transition: background .3s ease;
}
.rcpa-dots button:hover { background: var(--rcpa-muted); }
.rcpa-dots button.is-active { background: var(--rcpa-yellow); }
.rcpa-dots button:focus-visible { outline-offset: 3px; }

/* ==========================================================================
   Quote-request CTA bar - full-width dark grey band above the footer.
   ========================================================================== */

/* Live: .uk-section-secondary (#5e6062) with its vertical padding removed, a
   35px lead-in on the row (.el-elem#request-a-quote{padding-top:35px}) and
   each half in a uk-flex-middle panel of min-height:100px.

     copy    h1.uk-text-large.uk-text-center -> 20px/1.5, centred, and white
             because the section is an inverse surface
     button  .uk-button.uk-button-primary, also inverted, so navy on white:
             padding:0 30px; 22px/58px; weight 500; uppercase; ls 1px
     :hover  transparent with white text and a #ffd400 border
     the button sits in a .uk-margin, hence 20px clear of the copy           */
.rcpa-quote-bar {
  background: #5e6062;
  color: var(--rcpa-white);
}
.rcpa-quote-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 135px;
  padding-top: 35px;
}
/* The copy centres itself in whatever room the button leaves - the same split
   live uses, where the sentence sits in a uk-text-center 3/4 column and the
   button keeps its own column rather than being centred too. */
.rcpa-quote-bar p {
  flex: 1;
  margin: 0;
  color: var(--rcpa-white);
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
}

.rcpa-quote-bar .rcpa-btn {
  padding: 0 30px;
  font-size: 22px;
  line-height: 58px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  background: var(--rcpa-white);
  border: 1px solid transparent;
  color: var(--rcpa-navy);
}
.rcpa-quote-bar .rcpa-btn:hover {
  background: transparent;
  color: var(--rcpa-white);
  border-color: var(--rcpa-yellow);
}

/* ==========================================================================
   Footer - light grey band, contact numbers + form + ISO badges + legal bar
   matching the live footer exactly.
   ========================================================================== */

.rcpa-footer {
  background: var(--rcpa-bg-soft);
  color: var(--rcpa-body);
  font-size: .93rem;
}

.rcpa-footer a { color: var(--rcpa-navy); }
.rcpa-footer a:hover { color: var(--rcpa-navy-light); text-decoration: none; }

/* Live's contact block - uk-section-muted > uk-container-large, two halves:
     <h1 class="uk-h4">Get in Touch:</h1>
     <ul class="uk-list uk-list-divider">
       <li><div class="el-title uk-text-large">All Enquiries</div>
           <div class="el-content uk-h4"><a class="uk-link-text">1800 887 272</a>
     <div class="uk-margin uk-width-large"><img ... 450x150>

   .uk-h4            36px/1.4, weight 400, uppercase, ls 2px, colour #002f67
   .uk-text-large    20px/1.5, and it keeps the body grey
   .uk-list-divider  a 1px #e5e5e7 rule ABOVE every item after the first,
                     10px of air either side of it - not a rule under each
   .uk-grid          30px gutter, 40px from 1200px up                       */
.rcpa-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.rcpa-footer h2 {
  margin: 0 0 20px;
  font-size: 36px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rcpa-navy);
}

.rcpa-footer ul { margin: 0; padding: 0; list-style: none; }
.rcpa-footer li { margin: 0; padding: 0; border: 0; }
.rcpa-footer li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rcpa-line);
}

.rcpa-contact__label {
  display: block;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rcpa-body);
}
.rcpa-contact__value {
  display: inline-block;
  font-size: 36px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--rcpa-navy);
}
.rcpa-contact__value:hover { color: var(--rcpa-navy-light); }

/* one 450x150 artwork, set in a uk-width-large block 20px under the list */
.rcpa-iso-badges { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 20px; }
.rcpa-iso-badges img { width: 450px; max-width: 100%; height: auto; }

/* live .footer-social: .uk-icon-button in a uk-grid-small row
     .uk-icon-button {width:36px; height:36px; border-radius:500px;
                      background:#fff; color:#5e5e5e; border:1px solid #e5e5e7}
     .uk-icon-button:hover {background:#fff; color:#002f67; border-color:#002f67} */
.rcpa-social { display: flex; gap: 10px; margin-top: 1.5rem; }
.rcpa-social a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--rcpa-white);
  color: #5e5e5e;
  border: 1px solid var(--rcpa-line);
  border-radius: 500px;
  transition: color .1s ease-in-out, border-color .1s ease-in-out;
}
.rcpa-social svg { display: block; }
.rcpa-social a:hover {
  background: var(--rcpa-white);
  color: var(--rcpa-navy);
  border-color: var(--rcpa-navy);
}

/* ------------------------------------------------------- footer bottom bar

   Live: an <hr> and then a two-column uk-grid - the legal subnav with the
   back-to-top under it on the left, the social buttons with the copyright
   under them on the right.

     hr                     border:solid 1px #cdcdce; margin:20px 0
     .uk-grid-margin        margin-top:30px
     .uk-width-2-3@m / 1-3@m
     .uk-margin             20px between the two rows of each column
     .uk-subnav>*>a         14px Poppins 500, uppercase, ls 2px, #5e5e5e;
                            hover #000, no underline
     .uk-subnav-divider     2px rule in #ababab, 20px of air either side
     .uk-text-meta          14px/1.4 Poppins 500, uppercase, ls 2px, #727272
     .uk-totop              padding:5px; color:#363636                       */
.rcpa-footer__bar { padding-bottom: 40px; }

/* both footer blocks are uk-section-muted with a uk-container-large - a
   1400px content box plus the 40px gutter */
.rcpa-footer > .rcpa-container,
.rcpa-footer__bar > .rcpa-container { max-width: 1480px; }

.rcpa-footer__rule {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #cdcdce;
}

.rcpa-footer__bar-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px 40px;
  align-items: start;
  margin-top: 30px;
}

.rcpa-footer__bar-col { display: flex; flex-direction: column; gap: 20px; }
.rcpa-footer__bar-col--end { align-items: flex-end; text-align: right; }
.rcpa-footer__bar-col--end .rcpa-social { margin-top: 0; }

.rcpa-footer__legal { display: flex; flex-wrap: wrap; align-items: center; }
.rcpa-footer__legal a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5e5e5e;
}
.rcpa-footer__legal a::before {
  content: '';
  height: 1em;
  margin: 0 20px;
  border-left: 2px solid #ababab;
}
/* live's .uk-subnav-divider hangs the row out by its own gutter so the first
   link sits flush with the container, and UIkit tags whichever item opens a
   wrapped row .uk-first-column so its divider is dropped too - which is why
   "Legal" starts a clean second line on a phone. nav.js sets .is-row-start
   for the same reason. */
.rcpa-footer__legal a:first-child::before,
.rcpa-footer__legal a.is-row-start::before { display: none; }
.rcpa-footer__legal a:hover { color: #000; text-decoration: none; }

.rcpa-footer__copy {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #727272;
}
/* live leaves LOGIN in the same meta grey, unmarked */
.rcpa-footer__copy a { color: inherit; text-decoration: none; }
.rcpa-footer__copy a:hover { color: var(--rcpa-navy); text-decoration: none; }

@media (max-width: 959px) {
  /* uk-width-*@m only splits the row from 960px up; below that the columns
     stack, and only the right one recentres (uk-text-right@m uk-text-center) */
  .rcpa-footer__bar-inner { grid-template-columns: 1fr; }
  .rcpa-footer__bar-col--end { align-items: center; text-align: center; }

  /* The contact list carries the same pair of classes:
       <ul class="uk-list uk-list-divider uk-text-left@m uk-text-center">
     so the labels and numbers centre under 960px. The heading above it has no
     such class and stays left, which is why live reads the way it does. */
  .rcpa-footer__main ul { text-align: center; }
}

/* ==========================================================================
   Homepage intro band - two columns (copy left, photo right), matching the
   live site's `uk-container-large` + `uk-width-1-2@m` builder grid.
   ========================================================================== */

/* The live intro/product rows sit in UIkit's wider container, not the
   1200px default the rest of the theme uses. */
.rcpa-container--large { max-width: 1600px; }

.rcpa-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* Live's is a plain uk-h3 -

     <h3 class="el-title uk-margin-remove-top uk-margin-remove-bottom">

   so 48px/1.4 at weight 200 in navy, flat across every width. It is left to
   the theme's own h3, which already carries exactly those metrics; the clamp
   that used to sit here ran the heading from 24px to 34px instead, less than
   three quarters of live's at its widest and half of it on a phone. */
.rcpa-intro__title {
  margin: 0;
  color: var(--rcpa-navy);
}

/* Stand-in for UIkit's uk-visible@m: the heading only breaks from 960px. */
.rcpa-break-desktop { display: none; }
@media (min-width: 960px) { .rcpa-break-desktop { display: inline; } }

/* uk-margin-medium-top on live's el-content, so 40px under the heading. */
.rcpa-intro__copy { margin-top: 40px; }
/* The section carries live's .title-dis-section, whose only job is the copy:
     .title-dis-section p{font-size:22px; color:#6d6e71; line-height:1.7}
   - a longer line than the 1.625 the rest of the site runs on. */
.rcpa-intro__copy p {
  margin: 0 0 1rem;
  line-height: 1.7;
  color: var(--rcpa-body);
}
.rcpa-intro__copy p:last-child { margin-bottom: 0; }

/* Square, as live leaves it - the theme's 2px radius is not on this photo. */
.rcpa-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Live pairs these as uk-width-1-2@m, so the two columns form at 960px and
   below that each is a full-width panel in source order - heading, copy, then
   the photo. The photo was being pulled to the top here, and the split came a
   hundred pixels early. */
@media (max-width: 959px) {
  .rcpa-intro__grid { grid-template-columns: 1fr; }
  /* Live centres the text once the columns stack (uk-text-center, with
     uk-text-left@m taking over from 960px). */
  .rcpa-intro__text { text-align: center; }
}

/* ==========================================================================
   Footer contact form - the live RSForm field set: name + phone paired on one
   row, state / email / message full width, primary submit button.
   ========================================================================== */

.rcpa-contact-form p { margin: 0 0 1rem; }

.rcpa-contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.rcpa-contact-form__row p { margin-bottom: 1rem; }

/* Live's RSForm fields are not boxes - they are a tint with a single rule
   under them, and only the textarea is framed:

     .uk-input,.uk-select,.uk-textarea  border:0 none; padding:0 10px;
                                        background:rgba(255,255,255,.35);
                                        colour + placeholder #939598
     .uk-input,.uk-select               height:60px;
                                        border-bottom:1px solid #bbb
     #footer\#0 .uk-input               height:45px
     .uk-textarea                       padding:6px 10px; border:1px solid #bbb
     :focus                             background:#fff; colour:#000;
                                        border-color:#002f67

   Named by type so these beat the theme's own input rules further down. */
.rcpa-contact-form input[type="text"],
.rcpa-contact-form input[type="tel"],
.rcpa-contact-form input[type="email"],
.rcpa-contact-form select,
.rcpa-contact-form textarea,
.rcpa-filefield__name {
  width: 100%;
  padding: 0 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--rcpa-ink);
  background: rgba(255, 255, 255, .35);
  border: 0;
  border-radius: 0;
}

/* A native select keeps the OS box and arrow unless the appearance is reset.
   Live swaps in its own two-triangle mark:

     .uk-select:not([multiple]):not([size]){
       -webkit-appearance:none; -moz-appearance:none; padding-right:20px;
       background-image: <svg 24x16, two #939598 triangles>;
       background-repeat:no-repeat; background-position:100% 50% }          */
.rcpa-contact-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%23939598%22%20points%3D%2212%201%209%206%2015%206%22%2F%3E%3Cpolygon%20fill%3D%22%23939598%22%20points%3D%2212%2013%209%208%2015%208%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

/* Nothing chosen yet, so the prompt reads as a placeholder - it is the first
   option's text, which would otherwise take the full input colour and sit a
   shade darker than every field beside it.

   :invalid only covers the required ones, which left the optional "Preferred
   contact method" dark while the two beside it were grey; :has() catches the
   empty option however the select is marked. */
.rcpa-contact-form select:invalid,
.rcpa-contact-form select:has(option[value=""]:checked) { color: #939598; }

.rcpa-contact-form input[type="text"],
.rcpa-contact-form input[type="tel"],
.rcpa-contact-form input[type="email"],
.rcpa-contact-form select,
.rcpa-filefield__name {
  height: 60px;
  border-bottom: 1px solid #bbb;
}

/* .uk-input and .uk-select are 60px everywhere; the footer form alone is cut
   down by its own inline block - #footer\#0 .uk-input{height:45px} */
.rcpa-footer .rcpa-contact-form input[type="text"],
.rcpa-footer .rcpa-contact-form input[type="tel"],
.rcpa-footer .rcpa-contact-form input[type="email"],
.rcpa-footer .rcpa-contact-form select {
  height: 45px;
}

.rcpa-contact-form textarea {
  padding: 6px 10px;
  border: 1px solid #bbb;
  resize: vertical;
  min-height: 130px;
}

.rcpa-contact-form ::placeholder { color: #939598; }

.rcpa-contact-form input[type="text"]:focus,
.rcpa-contact-form input[type="tel"]:focus,
.rcpa-contact-form input[type="email"]:focus,
.rcpa-contact-form select:focus,
.rcpa-contact-form textarea:focus {
  outline: 0;
  box-shadow: none;
  color: #000;
  background: var(--rcpa-white);
  border-color: var(--rcpa-navy);
}

/* Anti-spam honeypot. Hidden from people, left in the DOM for bots to fill.
   Not display:none - some bots skip those - and taken out of the layout so
   it cannot affect the grid. */
.rcpa-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Form confirmation dialog

   All three forms sit at the foot of a long page and the handler redirects
   back to the top of it, so a line of text inside the form is never seen -
   which is what "the footer form does not work" actually was. Live answers in
   a modal, so this does too, on the same uk-modal metrics as the search panel:
   overlay rgba(0,0,0,.6), a 600px dialog, fade in over .15s.
   ========================================================================== */
.rcpa-form-modal {
  position: fixed;
  inset: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s linear, visibility .15s;
}
.rcpa-form-modal.is-open { opacity: 1; visibility: visible; }

@media (min-width: 640px) { .rcpa-form-modal { padding: 50px 20px; } }

.rcpa-form-modal__dialog {
  position: relative;
  width: 600px;
  max-width: 100%;
  padding: 40px;
  background: var(--rcpa-white);
  color: var(--rcpa-body);
  box-shadow: var(--rcpa-shadow-lg);
}

/* The dialog takes the focus when it opens, so a reader lands inside it - but
   it is the container, not a control, so it draws no ring of its own. */
.rcpa-form-modal__dialog:focus,
.rcpa-form-modal__dialog:focus-visible { outline: none; }

.rcpa-form-modal__dialog p { margin: 0 0 1.15em; font-size: 18px; }
.rcpa-form-modal__error { color: var(--rcpa-danger); }

.rcpa-form-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 0;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 26px;
  color: var(--rcpa-muted);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.rcpa-form-modal__close:hover { background: none; color: var(--rcpa-ink); }

.rcpa-form-modal__actions { margin: 0; }
.rcpa-form-modal__actions .rcpa-btn {
  padding: 0 15px;
  font-size: 22px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
}

.rcpa-form-notice {
  margin: 0 0 1rem;
  padding: .75rem .9rem;
  border-left: 4px solid;
  border-radius: var(--rcpa-radius);
  font-size: .92rem;
}
.rcpa-form-notice--ok {
  border-color: var(--rcpa-success);
  background: rgba(61, 195, 114, .10);
  color: #1c6c3c;
}
.rcpa-form-notice--error {
  border-color: var(--rcpa-danger);
  background: rgba(228, 78, 86, .10);
  color: #96262c;
}

/* Quote Request: the BOQ/RFQ attachment row.

     .uk-form-label  16px Poppins 500, uppercase, ls 2px, #363636
     #page\#1 .uk-form-stacked .uk-form-label{margin-top:50px; margin-bottom:15px}
     .uk-form-custom input[type=file]{position:absolute; inset:0; opacity:0;
                                      width:100%; height:100%; cursor:pointer}
     .uk-input.uk-form-width-medium   the 200px read-only box
     .uk-button.uk-button-default     the Select button                      */
.rcpa-quote-form__file {
  margin-top: 50px;
}
.rcpa-quote-form__file label {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rcpa-ink);
}

.rcpa-filefield {
  display: inline-flex;
  position: relative;
  max-width: 100%;
  vertical-align: middle;
}

/* the real control, laid over the pair so the browser chrome never shows */
.rcpa-filefield input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 500px;
  overflow: hidden;
}

/* live's box is a disabled .uk-input, and that is where the grey comes from:
     .uk-input:disabled{background-color:#f7f7f7; color:#939598;
                        border-color:#e5e5e7 !important}                     */
.rcpa-filefield__name {
  width: 200px;
  max-width: 100%;
}
.rcpa-filefield__name:disabled {
  background-color: #f7f7f7;
  color: #939598;
  border-color: #e5e5e7;
}

.rcpa-filefield__btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 30px;
  font-size: 22px;
  line-height: 58px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5e5e5e;
  background: #f7f7f7;
  border: 1px solid transparent;
}
.rcpa-filefield:hover .rcpa-filefield__btn {
  background: transparent;
  color: var(--rcpa-ink);
  border-color: var(--rcpa-line);
}

/* Send + Reset sit side by side, the way uk-button-primary and
   uk-button-danger do on live. */
.rcpa-contact-form__submit {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 0;
}
.rcpa-btn--danger {
  background: var(--rcpa-danger);
  border-color: var(--rcpa-danger);
  color: var(--rcpa-white);
}
.rcpa-btn--danger:hover {
  background: transparent;
  border-color: var(--rcpa-danger);
  color: var(--rcpa-danger);
}
/* live: .uk-button-primary at the base size - padding:0 30px; 22px/58px;
   weight 500; uppercase; ls 1px - which is what the Quote Request and Careers
   forms get. Only the footer form is shrunk, by its own inline block:
     #footer\#0 .uk-button {line-height:40px; padding:0 15px}              */
.rcpa-contact-form__submit .rcpa-btn {
  cursor: pointer;
  border: 1px solid transparent;
  padding: 0 30px;
  font-size: 22px;
  line-height: 58px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
}

.rcpa-footer .rcpa-contact-form__submit .rcpa-btn {
  padding: 0 15px;
  line-height: 40px;
}

@media (max-width: 640px) {
  .rcpa-contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Content grids rebuilt from the flattened migrated body
   (see rcpa_group_content_grids). Mirrors the live site's YOOtheme grids:
   value cards three-up with the icon above the title, figure runs two- or
   three-up instead of stacked.
   ========================================================================== */

.rcpa-value-grid {
  display: grid;
  /* Live puts all five FIRST values in a single row; a fixed 3-up wrapped
     them 3+2. Sizing by content lets a five-card set sit on one line and a
     three-card set still fill the width, without hardcoding either count. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin: 2.5rem 0;
  text-align: center;
}

.rcpa-value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.25rem;
  background: var(--rcpa-bg-soft);
  border-radius: var(--rcpa-radius);
}

.rcpa-value-card__icon {
  display: block;
  margin-bottom: 1.1rem;
}
.rcpa-value-card__icon img {
  display: block;
  width: auto;
  max-height: 84px;
  margin: 0 auto;
}
/* The migrated icons come through as block figures; inside a card they are
   just the image. */
.rcpa-value-card__icon figure { margin: 0; }

.rcpa-value-card__title {
  margin: 0 0 .75rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--rcpa-navy);
}

.rcpa-value-card__copy p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
}

/* Locations page: the six sites, three-up like the live layout. */
.rcpa-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: 2rem 0;
}
.rcpa-location {
  padding: 1.5rem 1.4rem;
  background: var(--rcpa-bg-soft);
  border-radius: var(--rcpa-radius);
}
.rcpa-content .rcpa-location h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--rcpa-navy);
}
.rcpa-content .rcpa-location p { margin: 0 0 .35rem; font-size: .95rem; }
.rcpa-location__label {
  font-weight: 500;
  color: var(--rcpa-ink);
  margin-top: .85rem !important;
}
.rcpa-location__label:first-of-type { margin-top: 0 !important; }

/* Innovations' statement rows: copy beside the photo, half width each and
   vertically centred, the way live sets them
   (https://rcpa.com.au/about/innovations). See rcpa_group_statement_rows(). */
.rcpa-content .rcpa-srow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin: clamp(2rem, 5vw, 3.25rem) 0;
}

.rcpa-content .rcpa-srow__copy > :first-child { margin-top: 0; }
.rcpa-content .rcpa-srow__copy > :last-child { margin-bottom: 0; }

.rcpa-content .rcpa-srow__media figure { margin: 0; }

.rcpa-content .rcpa-srow__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stacked and centred below the theme's usual breakpoint, matching live's
   uk-text-center fallback. */
@media (max-width: 860px) {
  .rcpa-content .rcpa-srow {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* SRCPipe's spec row. Live keeps that grid top-aligned rather than centred -
   the copy column is far taller than the photo - and spaces the halves with
   uk-grid-column-large (70px from 960px up). Its lists are uk-list-disc
   uk-list-primary: real bullets in navy, not the rules .rcpa-content puts on
   lists elsewhere. */
.rcpa-content .rcpa-srow--top {
  align-items: start;
  gap: 70px;
}

/* Large Culverts is not a pair of halves: live gives the copy uk-width-2-3@m
   and the photo uk-width-1-3@m. */
.rcpa-content .rcpa-srow--2-1 {
  grid-template-columns: 2fr 1fr;
}

/* Keyed on the <h6> the spec filter puts directly above each list, so the
   rules hold whether or not the block sits in a two-column row - Small
   Culverts runs the same labelled lists full width. */
.rcpa-content h6 + ul {
  margin: 0 0 20px;
  padding-left: 30px;
  list-style: disc;
}
.rcpa-content h6 + ul > li {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  line-height: 1.625;
}
.rcpa-content h6 + ul > li:last-child { margin-bottom: 0; }
.rcpa-content h6 + ul > li::marker { color: var(--rcpa-navy); }
.rcpa-content h6 + ul > li > div { display: inline; }

@media (max-width: 860px) {
  .rcpa-content .rcpa-srow--top { gap: 40px; text-align: left; }
}

/* "Key Features and Benefits" columns on the product pages. */
/* "Key Features and Benefits".
 *
 * Live wraps this block in .title-dis-section.list-three.uk-section-muted: a
 * full-width #efefef band holding white uk-card-default columns. The sizes
 * below are that section's OWN rules, which override the theme defaults the
 * rest of this stylesheet was built from:
 *
 *   .list-three h5   {font-size:23px;text-transform:capitalize;color:#002f67;
 *                     letter-spacing:normal}
 *   .list-three ul li{font-size:20px;color:#6d6e71;line-height:1.5;
 *                     margin-bottom:15px;list-style:none}
 *   .uk-list-large.uk-list-divider>:nth-child(n+2)
 *                    {margin-top:20px;padding-top:20px;
 *                     border-top:1px solid #e5e5e7}
 *   .uk-card-body    {padding:40px}   .uk-section{padding:70px 0}
 *   .uk-grid-large>* {padding-left:70px}
 *
 * Sizes are px, not rem, for the same reason the rest of the file uses px:
 * body is 22px but html is left at the 16px default, so rem here would come
 * out roughly a third too small.
 */
.rcpa-content .rcpa-feature-band {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 70px 0;
  background: #efefef;
}

.rcpa-content .rcpa-feature-band__inner {
  box-sizing: border-box;
  /* This one section is the page's only .uk-container-xlarge on live: 1600px
     content-box + 2x40px gutter. The rest of the page keeps the 1200px
     .uk-container that --rcpa-max encodes, so it is not used here. */
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--rcpa-gutter);
}

.rcpa-content .rcpa-feature-band__inner > h1,
.rcpa-content .rcpa-feature-band__inner > h2,
.rcpa-content .rcpa-feature-band__inner > h3,
.rcpa-content .rcpa-feature-band__inner > h4 {
  margin: 0 0 40px;
  font-size: 48px;          /* live .uk-h3 */
  line-height: 1.4;
  font-weight: 200;
  color: var(--rcpa-navy);
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

.rcpa-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 70px;
  margin: 0;
}

.rcpa-content .rcpa-feature-col {
  box-sizing: border-box;
  padding: 40px;
  background: var(--rcpa-white);
  border: 1px solid var(--rcpa-white);
  color: #5e5e5e;
  text-align: center;
}

.rcpa-feature-col__title {
  margin: 0 0 20px;
  font-size: 23px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: normal;
  color: var(--rcpa-navy);
}

/* Divider rules, not bullets - live uses uk-list-divider uk-list-large here. */
.rcpa-content .rcpa-feature-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcpa-content .rcpa-feature-col ul > li {
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rcpa-body);
}
.rcpa-content .rcpa-feature-col ul > li + li {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rcpa-line);
}
.rcpa-content .rcpa-feature-col ul > li:last-child { margin-bottom: 0; }
.rcpa-content .rcpa-feature-col ul > li > div { display: inline; }

@media (max-width: 959px) {
  .rcpa-content .rcpa-feature-band { padding: 40px 0; }
  .rcpa-feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .rcpa-content .rcpa-feature-band__inner > h1 { font-size: 34px; margin-bottom: 28px; }
  .rcpa-content .rcpa-feature-col { padding: 28px; }
  .rcpa-content .rcpa-feature-col ul > li { font-size: 17px; }
}

.rcpa-figure-grid {
  display: grid;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 2.5rem 0;
}
.rcpa-figure-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcpa-figure-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* About sets its body in live's uk-container-large - 1400px content-box plus
   the 40px gutter - rather than the 1200px .uk-container the other interior
   pages use, so its paragraphs run noticeably wider. */
.rcpa-content--wide { max-width: 1480px; }

/* ==========================================================================
   T&C's - live article 29 (rcpa.com.au/?view=article&id=29:t-cs&catid=8)

   Its body sits in a uk-container-expand, so it runs the full width on the
   container's own gutter, and the download appears twice: once as an ordinary
   link inside the sentence, and once under it as a uk-button.
   ========================================================================== */
.rcpa-content--full { max-width: none; }

/* the theme turns every document link into a download tile; live only does
   that for the standalone one, so the in-sentence "click here" reverts to a
   plain link here */
.rcpa-content--full a[href$=".pdf"]:not(.rcpa-kb-card) {
  display: inline;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: var(--rcpa-navy);
  background: none;
  border: 0;
}
.rcpa-content--full a[href$=".pdf"]:not(.rcpa-kb-card)::before { content: none; }

/* Live sets every heading 40px clear of what precedes it (*+h1..h6), not the
   1.9em/2.25em the theme uses elsewhere - on a 48px h3 that is 91px, which is
   what left the hole above "Terms and conditions of sale". */
.rcpa-content--full h2,
.rcpa-content--full h3 { margin-top: 40px; }

/* ...and the link that stands alone in its own paragraph is live's Read more
   button. rcpa_mark_doc_cta() flags it, because :only-child counts elements
   and not text, so it matches the in-sentence "click here" as well:
     .uk-button         padding:0 30px; 22px/58px; 500; uppercase; ls 1px
     .uk-button-default background:#f7f7f7; color:#5e5e5e;
                        border:1px solid transparent                        */
.rcpa-content--full .rcpa-doc-cta { margin: 20px 0 0; }

.rcpa-content--full p.rcpa-doc-cta > a[href$=".pdf"] {
  display: inline-block;
  padding: 0 30px;
  font-size: 22px;
  line-height: 58px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5e5e5e;
  background: #f7f7f7;
  border: 1px solid transparent;
  transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out;
}
.rcpa-content--full p.rcpa-doc-cta > a[href$=".pdf"]:hover {
  background: transparent;
  color: var(--rcpa-ink);
  border-color: var(--rcpa-line);
}

/* ==========================================================================
   Long-form policy article - /privacy-policy
   (live: knowledge-hub?view=article&id=71:privacy-policy&catid=8)

   Live nests a uk-container-small inside the section's uk-container and sets
   every block apart with uk-margin-large, so the whole article reads as one
   evenly spaced 900px column:

     .uk-container-small          max-width:900px (no padding when nested)
     .uk-panel.uk-margin-large    margin:40px 0; 70px from 1200px up
     .uk-panel.uk-margin          the opening paragraph only - 20px
     h2/h3                        margin:0 0 20px; *+h2/h3 margin-top:40px
     ul.uk-list-disc              list-style:disc; padding-left:30px
     .uk-list-collapse            no gap between items

   Adjacent margins collapse, so the run comes out 70px apart throughout with
   the opening paragraph 40px clear of the first heading. The heading sizes,
   weights and body colour are already the live values on h2/h3/p - see the
   base typography block.
   ========================================================================== */
.rcpa-content--policy { max-width: 980px; }   /* 900 + 2 x 40px gutter */

.rcpa-content--policy > p,
.rcpa-content--policy > ul { margin: 40px 0; }
.rcpa-content--policy > h2,
.rcpa-content--policy > h3 { margin: 40px 0 20px; }
.rcpa-content--policy > :first-child { margin-top: 0; }
.rcpa-content--policy > p:first-child { margin-bottom: 20px; }

@media (min-width: 1200px) {
  .rcpa-content--policy > p,
  .rcpa-content--policy > ul { margin: 70px 0; }
}

/* .rcpa-content ul is the document-list style - rules between rows - which is
   not what these bullets are. */
.rcpa-content--policy ul.rcpa-list-disc {
  list-style: disc;
  padding-left: 30px;
}
.rcpa-content--policy ul.rcpa-list-disc > li {
  padding: 0;
  border: 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--rcpa-body);
}

.rcpa-figure-grid figure { margin: 0; }
.rcpa-figure-grid img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rcpa-radius);
}
/* Logo/badge rows should sit at their natural size, centred, not stretched
   edge to edge the way a photo grid does. */
/* The three-up run is always the certification and membership badges, so this
   covers the run rather than picking filenames out of it - the ISO marks are
   only 150x150 and would blur if stretched, while the association logos are
   multi-thousand-pixel PNGs that have to come down. Live shows the marks at
   about 155px and caps the logos near 300px wide. */
.rcpa-figure-grid--3 img {
  width: auto;
  max-width: 300px;
  max-height: 160px;
  margin: 0 auto;
  border-radius: 0;
}

@media (max-width: 860px) {
  .rcpa-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rcpa-value-grid,
  .rcpa-figure-grid--2,
  .rcpa-figure-grid--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
input[type="date"], select, textarea {
  width: 100%;
  padding: .7rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--rcpa-ink);
  background: var(--rcpa-white);
  border: 1px solid var(--rcpa-line);
  border-radius: var(--rcpa-radius);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rcpa-navy);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 47, 103, .12);
}
label { display: block; margin-bottom: .35rem; font-weight: 500; color: var(--rcpa-ink); font-size: .92rem; }

/* ==========================================================================
   Pagination
   ========================================================================== */

.rcpa-pagination { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 3rem; }
.rcpa-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding: 0 .6rem;
  font-weight: 500;
  color: var(--rcpa-navy);
  background: var(--rcpa-white);
  border: 1px solid var(--rcpa-line);
  border-radius: var(--rcpa-radius);
}
.rcpa-pagination .page-numbers:hover { background: var(--rcpa-bg-soft); text-decoration: none; }
.rcpa-pagination .page-numbers.current {
  background: var(--rcpa-navy);
  border-color: var(--rcpa-navy);
  color: var(--rcpa-white);
}

/* ==========================================================================
   Careers
   ========================================================================== */

/* Live drops Open Positions and Career Enquiries into
   .careers-form-page.uk-section-muted - a full-width #efefef band holding a
   uk-container-large (1400px) split by uk-grid-large into two halves. */
.rcpa-content .rcpa-careers-cols {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(2rem, 5vw, 3.5rem);
  padding: 70px 0;
  background: #efefef;
}

.rcpa-content .rcpa-careers-cols__inner {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 70px;
  max-width: 1480px;   /* live uk-container-large: 1400 content-box + 2x40 */
  margin: 0 auto;
  padding: 0 var(--rcpa-gutter);
}

.rcpa-content .rcpa-careers-cols h3 { margin: 0 0 40px; }

/* uk-alert.uk-alert-danger: white panel, red rule, lead-size copy. */
.rcpa-content .rcpa-alert {
  margin: 0;
  padding: 15px 29px 15px 15px;
  background: var(--rcpa-white);
  border: 1px solid var(--rcpa-danger);
}
.rcpa-content .rcpa-alert p {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rcpa-ink);
}

/* The staff quotes: uk-list uk-list-primary uk-text-center - centred, no
   bullets and none of the rules .rcpa-content puts on lists elsewhere. */
.rcpa-content .rcpa-quotes {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  text-align: center;
}
.rcpa-content .rcpa-quotes > li {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}
.rcpa-content .rcpa-quotes > li:last-child { margin-bottom: 0; }

@media (max-width: 959px) {
  .rcpa-content .rcpa-careers-cols { padding: 40px 0; }
  .rcpa-content .rcpa-careers-cols__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rcpa-content .rcpa-careers-cols h3 { margin-bottom: 24px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The bar hands over to the offcanvas sheet below 1200px.

   Live switches at UIkit's @m, 960px (.tm-header.uk-visible@m), and its own
   seven items still fit there - but only because live asks for Poppins
   without ever shipping it, so the bar is drawn in whatever the machine falls
   back to, around 18% narrower than the real face. This build serves Poppins
   itself, and measured against a 1032px iPad Pro the same seven items plus
   the logo and the search icon come to 1050px - the search icon was being cut
   in half. They need about 1080px, so the sheet takes the tablets. */
@media (max-width: 1199px) {
  :root { --rcpa-header-h: 76px; }

  /* Live's mobile header is not an overlay. .tm-header-mobile is position:
     relative, so it sits above the banner rather than over it, on its own
     solid ground:

       .tm-header-mobile .uk-navbar-container { background: #012044 }

     That is what keeps the logo, the search icon and the burger legible - over
     the home page's video they were all but invisible here, which is what the
     "hard to see the buttons" report is. The bar stays sticky, it just no
     longer borrows the banner for a backdrop. */
  body.rcpa-has-hero .rcpa-header { margin-bottom: 0; }

  .rcpa-header,
  .rcpa-header.is-solid {
    background: #012044;
    border-bottom-color: transparent;
  }

  /* Live's mobile menu, read off .uk-offcanvas-bar and .uk-nav-default:

       .uk-offcanvas-bar        top:0; bottom:0; right:0; width:300px,
                                350px from 640px; padding:20px;
                                background:#002f67; overflow-y:auto
       .uk-offcanvas-overlay    rgba(0,0,0,.1) behind it
       .uk-offcanvas-close      top:5px; right:5px; padding:5px - a bare
                                icon, 10px in from 640px
       .uk-nav-default          16px/1.625; weight 600; uppercase; ls 1px
       .uk-nav>li>a             padding:8px 0
       .uk-offcanvas-bar .uk-nav>li>a          border-bottom:solid 1px #fff
       .uk-offcanvas-bar .uk-nav-default>li>a  colour rgba(255,255,255,.4),
                                               .7 on hover - the same muted
                                               white the sub items use
       .uk-nav-sub              padding:5px 0, no indent of its own
       .uk-nav-sub a            padding:2px 0; rgba(255,255,255,.4)
       .uk-nav-sub ul           padding-left:15px - only the third level
                                is stepped in
       .uk-nav-parent-icon      margin-left:auto, so the chevron rides the
                                right edge; top level only

     The bar runs the full height of the window, over the header, which is
     why the close sits inside it rather than in the header row. */
  .rcpa-burger {
    display: block;
    position: relative;
    order: 3;
    background: transparent;
    border: 0;
  }
  .rcpa-burger:hover,
  .rcpa-burger:focus { background: transparent; }

  /* Open, it is live's .uk-offcanvas-close: a bare cross at the top right of
     the bar, above it in the stack. */
  .rcpa-burger[aria-expanded="true"] {
    position: fixed;
    top: 5px;
    right: 5px;
    z-index: 1020;
    width: 40px;
    height: 40px;
  }

  .rcpa-search-toggle { order: 2; }

  /* With the nav taken out of flow the header row holds only the logo and the
     two icons, and space-between would strand the search icon in the middle.
     Live keeps both icons together against the right edge. */
  .rcpa-header__inner { justify-content: flex-start; }
  .rcpa-logo { margin-right: auto; }

  .rcpa-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1010;
    width: min(300px, 88vw);
    margin: 0;
    padding: 20px;
    background: var(--rcpa-navy);
    box-shadow: var(--rcpa-shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .26s ease;
  }
  .rcpa-nav[data-open="true"] { transform: none; }

  /* .uk-offcanvas-overlay::before */
  body[data-nav-open="true"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1005;
    background: rgba(0, 0, 0, .1);
  }

  /* The panel lives inside .rcpa-header, so its z-index:1010 is measured
     against its siblings inside that header - not against the overlay, which
     sits in the root stacking context. Against the root the header is only
     z-index:100, so the overlay was painting over the whole menu and eating
     every click on it. Lift the header itself while the panel is open. */
  body[data-nav-open="true"] .rcpa-header { z-index: 1010; }

  .rcpa-nav ul { display: block; }
  .rcpa-nav li { border-bottom: 0; }
  /* the desktop bar's own sizing must not follow the menu into the sheet */
  .rcpa-nav > ul { height: auto; }
  .rcpa-nav > ul > li { display: block; }

  .rcpa-nav > ul > li > a {
    display: flex;
    align-items: center;
    /* The bar's own 80px item height must not follow the menu into the sheet -
       live's is .uk-nav>li>a{padding:8px 0} on a 16px/1.625 line, so 42px. */
    min-height: 0;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.625;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .4);
    text-shadow: none;
    white-space: normal;
    border-bottom: 1px solid var(--rcpa-white);
  }
  .rcpa-nav > ul > li > a:hover { color: rgba(255, 255, 255, .7); }
  /* White, not the bar's yellow: in the sheet live marks the page you are on
     with .uk-offcanvas-bar .uk-nav-default>li.uk-active>a{color:#fff}. */
  .rcpa-nav > ul > li.current-menu-item > a,
  .rcpa-nav > ul > li.current-menu-ancestor > a { color: var(--rcpa-white); }

  /* The desktop panel's own sizing must not follow it into the sheet - and
     nor must its placement. The centring rules are written on
     `.rcpa-nav > ul > li > ul`, which outranks this block's `.rcpa-nav ul ul`,
     so without an equally specific reset the sub-menus were still being
     pulled half their width to the left and rendered outside the sheet. */
  .rcpa-nav > ul > li > ul,
  .rcpa-nav > ul > li:last-child > ul,
  .rcpa-nav > ul > li:hover > ul,
  .rcpa-nav > ul > li:focus-within > ul,
  .rcpa-nav > ul > li:last-child:hover > ul,
  .rcpa-nav > ul > li:last-child:focus-within > ul {
    left: auto;
    right: auto;
    transform: none;
    /* every level is laid out open in the sheet, so nothing is parked */
    pointer-events: auto;
  }

  .rcpa-nav ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 5px 0;
    border-top: 0;
    box-shadow: none;
    background: none;
  }
  .rcpa-nav ul ul a {
    padding: 2px 0;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .4);
    border-bottom: 0;
  }
  .rcpa-nav ul ul a:hover,
  .rcpa-nav ul ul li.current-menu-item > a {
    background: none;
    color: var(--rcpa-white);
  }
  /* only the third level steps in - .uk-nav-sub ul{padding-left:15px} */
  .rcpa-nav ul ul ul { padding-left: 15px; }
  .rcpa-nav ul ul ul a { padding-left: 0; }

  /* The desktop two-column Products panel collapses back to the plain
     stacked accordion on mobile, where every level is already expanded. */
  .rcpa-nav > ul > li.menu-item-has-children > ul:has(> li.menu-item-has-children) {
    display: block;
    width: auto;
    max-width: none;
    padding: 5px 0;
    gap: 0;
  }
  .rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) > li > a {
    padding-left: 0;
    font-weight: 400;
    color: rgba(255, 255, 255, .4);
  }
  .rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) ul { padding-left: 15px; background: none; }
  .rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) ul a { padding-left: 0; }

  /* uk-nav-parent-icon sits on the top-level parents only, pushed to the
     right edge; the second-level groups carry no icon on live. */
  .rcpa-nav > ul > li.menu-item-has-children > a::after { margin-left: auto; }
  .rcpa-nav > ul > li > ul:has(> li.menu-item-has-children) > li.menu-item-has-children > a::after { display: none; }

  /* The one branch the sheet collapses.

       <ul class="uk-nav uk-nav-default uk-nav-accordion" uk-nav="targets: > .js-accordion">

     Only items carrying .js-accordion are accordion targets, and live carries
     it on Contact Us alone - which is why About and Products sit permanently
     open in the sheet and Contact Us is the one that opens and shuts on tap.
     rcpa_nav_accordion_class() marks the same item here, and adds .is-open
     for live's uk-open: the branch you are reading starts expanded. */
  .rcpa-nav li.rcpa-nav-accordion > ul {
    display: none;
    overflow: hidden;
    /* nav.js animates this open over 200ms, the way uk-accordion does */
    transition: height .2s ease;
    /* The 5px every sub-list carries rides on the items instead, or a panel
       animated down to a height of 0 would still leave 10px standing. */
    padding-block: 0;
  }
  .rcpa-nav li.rcpa-nav-accordion.is-open > ul { display: block; }
  .rcpa-nav li.rcpa-nav-accordion > ul > li:first-child { padding-top: 5px; }
  .rcpa-nav li.rcpa-nav-accordion > ul > li:last-child { padding-bottom: 5px; }

  @media (prefers-reduced-motion: reduce) {
    .rcpa-nav li.rcpa-nav-accordion > ul { transition: none; }
  }

  /* .uk-nav-parent-icon{transition:transform .3s ease-out} and
     .uk-nav>li.uk-open>a .uk-nav-parent-icon{transform:rotateX(180deg)} - the
     chevron turns over while the branch is open. */
  .rcpa-nav > ul > li.menu-item-has-children > a::after {
    transition: transform .3s ease-out;
  }
  .rcpa-nav > ul > li.rcpa-nav-accordion.is-open > a::after {
    transform: translateY(.15em) rotate(-135deg);
  }

  body[data-nav-open="true"] { overflow: hidden; }

  .rcpa-single { grid-template-columns: 1fr; }
  .rcpa-footer__main { grid-template-columns: 1fr; }
}

@media (min-width: 640px) and (max-width: 1199px) {
  /* .uk-offcanvas-bar{width:350px} and .uk-offcanvas-close{top:10px;right:10px} */
  .rcpa-nav { width: 350px; }
  .rcpa-burger[aria-expanded="true"] { top: 10px; right: 10px; }
}

/* Live splits this bar into uk-width-3-4@m and uk-width-1-4@m, and UIkit's
   @m is 960px - so below that the two stack and each takes the full width.
   Without this the copy just shrinks to share the line with the button and
   ends up six words tall in a narrow column. */
@media (max-width: 959px) {
  /* Stacked, both halves centred on the line.

     Live leaves the button flush with the gutter here - each half is a
     full-width panel and the button is simply the first thing in it - but
     the client asked for this one to be centred with the copy:
     "On product pages for the request a quote section, could we please
     center align on screen button and text." So this is a deliberate
     departure from live, not a mismatch. uk-grid puts 30px between them. */
  .rcpa-quote-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding-bottom: 35px;
  }
  .rcpa-quote-bar p { flex: 0 0 auto; }
  .rcpa-quote-bar .rcpa-btn { align-self: center; }
}

@media (min-width: 640px) {
  .rcpa-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .rcpa-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rcpa-content a[href$=".pdf"]:not(.rcpa-kb-card) { width: 100%; }
}

/* ==========================================================================
   Motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Back to top (QA 12)
   ========================================================================== */

/* live a[uk-totop] in the footer's left column - a bare chevron, no chrome:
     .uk-totop { padding: 5px; color: #363636 }  hover #002f67 */
.rcpa-to-top {
  align-self: flex-start;
  display: grid;
  place-items: center;
  padding: 5px;
  background: none;
  border: 0;
  border-radius: 0;
  color: #363636;
  cursor: pointer;
  transition: color .1s ease-in-out;
}

.rcpa-to-top:hover {
  background: none;
  color: var(--rcpa-navy);
}

.rcpa-to-top:focus-visible {
  outline: 3px solid var(--rcpa-yellow);
  outline-offset: 2px;
}

/* ==========================================================================
   Search results - mirrors https://rcpa.com.au/search?q=...

   Live presents hits as full-width stacked hover cards: a link wrapping a
   navy title and a grey excerpt, with the refine-search input above them.
   Deliberately no thumbnail, date or "Read more" pill - the news-card
   treatment those belong to is index.php's, not the search view's.
   ========================================================================== */

.rcpa-search-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--rcpa-line);
}

.rcpa-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .6rem .25rem;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--rcpa-ink);
}

.rcpa-search-form__input:focus {
  outline: none;
}

.rcpa-search-form:focus-within {
  border-bottom-color: var(--rcpa-navy);
}

.rcpa-search-form__submit {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rcpa-navy);
  cursor: pointer;
}

.rcpa-search-form__submit:hover { color: var(--rcpa-yellow-dark); }

.rcpa-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rcpa-result {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--rcpa-line);
  border-radius: var(--rcpa-radius);
  background: var(--rcpa-white);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.rcpa-result:hover,
.rcpa-result:focus-visible {
  border-color: transparent;
  box-shadow: var(--rcpa-shadow);
  text-decoration: none;
}

.rcpa-result__title {
  margin: 0;
  color: var(--rcpa-navy);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
}

.rcpa-result__excerpt {
  display: block;
  margin-top: .65rem;
  color: var(--rcpa-body);
  font-size: .95rem;
  line-height: 1.65;
}

.rcpa-results__empty { margin-block: 1rem 2rem; }

@media (max-width: 640px) {
  .rcpa-result { padding: 1.15rem; }
}

/* ==========================================================================
   Product rows - the live Pipes / Precast layout.

   One row per product: a small rounded image tile (1/3) carrying the product
   name in white over a navy tint, beside its description (2/3). The tile
   swaps sides row by row. Measured from https://rcpa.com.au/products/pipes
   and /products/precast.
   ========================================================================== */

.rcpa-prows {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 140px);   /* live .uk-margin-xlarge-bottom */
}

.rcpa-prow {
  --rcpa-prow-gap: clamp(1.5rem, 5vw, 70px);   /* live .uk-grid-large */
  display: grid;
  /* Live is uk-width-1-3@m + uk-width-2-3@m inside a uk-grid-large. UIkit
     takes its thirds of (container + gutter) and then subtracts the gutter
     from each column, which lands on 353px / 777px inside a 1200px container
     - not the 377px / 753px a plain "1fr 2fr" grid would produce. */
  grid-template-columns:
    calc((100% + var(--rcpa-prow-gap)) / 3 - var(--rcpa-prow-gap)) 1fr;
  align-items: center;
  gap: var(--rcpa-prow-gap);
}

/* Every second row puts the tile on the right. The track widths swap with
   it, so the tile stays the same narrow size on both sides - placing it in
   the wide track instead would stretch every second tile. The copy keeps its
   source order for screen readers; only the painted order changes. */
.rcpa-prow--flip {
  grid-template-columns:
    1fr calc((100% + var(--rcpa-prow-gap)) / 3 - var(--rcpa-prow-gap));
}
.rcpa-prow--flip .rcpa-prow__tile { grid-column: 2; grid-row: 1; }
.rcpa-prow--flip .rcpa-prow__copy { grid-column: 1; grid-row: 1; }

.rcpa-prow__tile {
  display: block;
  /* Live gives the tile a whole uk-width-1-3@m column - 353px inside its
     1200px container - so it fills the 1fr track rather than being capped. */
  width: 100%;
  text-decoration: none;
}

.rcpa-prow--flip .rcpa-prow__tile { margin-left: auto; }

a.rcpa-prow__tile:hover { text-decoration: none; }

/* No fixed ratio: live prints each photo at its own shape (532x379, 600x400,
   1241x954), so the tiles there are deliberately unequal in height. */
.rcpa-prow__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;                      /* live .uk-border-rounded */
  /* live paints the tile rgba(1,32,68,.92) and multiplies the photo into it;
     the opaque --rcpa-navy used before came out markedly bluer. */
  background: rgba(1, 32, 68, .92);
}

.rcpa-prow__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Live multiplies the photo into a 92%-opaque navy panel, which is what
     makes these tiles read as deep blue rather than as plain photos. */
  mix-blend-mode: multiply;
  transition: transform .4s ease;
}

a.rcpa-prow__tile:hover .rcpa-prow__media img { transform: scale(1.06); }

.rcpa-prow__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--rcpa-white);
  font-size: clamp(2rem, 3.4vw, 3.25rem);   /* live .uk-h2: 32.04px -> 52px */
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
}

.rcpa-prow__copy {
  color: var(--rcpa-body);
  font-size: 22px;
  line-height: 1.625;
}

.rcpa-prow__copy p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .rcpa-prow {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  /* Stacked, every row reads tile-then-copy regardless of desktop side. */
  .rcpa-prow--flip .rcpa-prow__tile,
  .rcpa-prow--flip .rcpa-prow__copy {
    grid-column: 1;
    grid-row: auto;
  }
  .rcpa-prow__copy { text-align: center; }
}

/* ==========================================================================
   Locations - the live navy band: accordion of sites left, map right.
   Matches https://rcpa.com.au/contact-us/locations (uk-section-primary).
   ========================================================================== */

.rcpa-locsec {
  /* .uk-section-primary{background:#002955} - a shade deeper than the navy
     the rest of the site uses, the same ground the policy banners sit on */
  background: #002955;
  color: rgba(255, 255, 255, .9);
  /* uk-section-large, not the plain uk-section the other bands use */
  padding-block: 70px;
}

@media (min-width: 960px) {
  .rcpa-locsec { padding-block: 140px; }
}

/* Live: .uk-section-primary.uk-section.uk-section-large, the list in a
   uk-width-2-5@m column beside the map.

     .uk-section-large  padding 70px, 140px from 960px up
     .uk-h3             48px/1.4, weight 200 - white on this inverse section
     .uk-margin-medium  40px under the heading                              */
.rcpa-locsec__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  /* Top-aligned, like live's plain uk-grid. Centred, the map re-centres every
     time an accordion item opens and the column grows - so the map appeared
     to jump on each click. */
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.rcpa-locsec__title {
  margin: 0 0 40px;
  color: var(--rcpa-white);
  font-size: 48px;
  line-height: 1.4;
  font-weight: 200;
}

/* No rule under it. The heading carries live's `title-line-after` class, but
   every declaration in that class is written for a `<h3>` *inside* it
   (.title-line-after h3 / :after) and the heading is a bare div - so on live
   the class contributes nothing at all and no line is drawn. */

.rcpa-loc {
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

/* .uk-accordion-default .uk-accordion-title{font-size:30px; line-height:1.4;
   weight 500} and the page's own #page\#1 .el-title{color:#FFD400!important} */
.rcpa-loc__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 1rem 0;
  color: var(--rcpa-yellow);
  font-size: 30px;
  line-height: 1.4;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

/* Hide the native disclosure marker in both engines. */
.rcpa-loc__name::-webkit-details-marker { display: none; }
.rcpa-loc__name::marker { content: ""; }

/* No hover colour: live pins these with an !important on the page itself -
     #page\#1 .el-title { color: #FFD400 !important; }
   which outranks .uk-accordion-title:hover, so the six names hold their
   yellow whatever the pointer is over or which one is open. */

/* Live uses a + that becomes a - when the item is open. */
.rcpa-loc__sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.rcpa-loc__sign::before,
.rcpa-loc__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.rcpa-loc__sign::after { transform: translateY(-50%) rotate(90deg); }
.rcpa-loc[open] .rcpa-loc__sign::after { opacity: 0; }

/* nav.js animates this open and shut, the way uk-accordion does over 200ms.
   The bottom spacing rides on the last child rather than on this box, or a
   height of 0 would still leave the padding standing. */
.rcpa-loc__body {
  overflow: hidden;
  padding: 0;
  font-size: .95rem;
  line-height: 1.7;
  transition: height .2s ease;
}
.rcpa-loc__body > :last-child { padding-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .rcpa-loc__body { transition: none; }
}

.rcpa-loc__body p { margin: 0 0 .3rem; color: rgba(255, 255, 255, .82); }
.rcpa-loc__body a { color: var(--rcpa-white); }
.rcpa-loc__body a:hover { color: var(--rcpa-yellow); }

/* The migrated field labels ("Address:", "Sales & Orders"). */
.rcpa-loc__body .rcpa-location__label {
  margin-top: .8rem !important;
  color: var(--rcpa-white);
  font-weight: 500;
}
.rcpa-loc__body .rcpa-location__label:first-of-type { margin-top: 0 !important; }

/* The plate carries no pins - the theme sets them, the way live does:
     #page\#2 .el-marker {background-color:#FFD400 !important}
     .uk-marker          {padding:5px; border-radius:500px}
     the name rides in a 180px uk-card-secondary (#ffd400) beside the dot,
     .uk-h6 22px uppercase ls 2px, and #page\#2 .el-title{color:#002955} */
.rcpa-locmap { position: relative; }

.rcpa-locmap img {
  display: block;
  width: 100%;
  height: auto;
}

/* a <button>, so it has to shed the theme's button chrome first */
.rcpa-locmap__pin {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.rcpa-locmap__pin:hover,
.rcpa-locmap__pin:focus { background: none; }

/* .uk-marker: 5px of padding round a 20px glyph, so a 30px disc */
.rcpa-locmap__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 500px;
  background: var(--rcpa-yellow);
  color: #5e5e5e;
  transition: color .1s ease-in-out, background-color .1s ease-in-out;
}
.rcpa-locmap__dot svg { display: block; }

/* The dot keeps its yellow throughout. UIkit would darken it -
     .uk-marker:hover{color:#fff; background:#002f67}
   - but the page pins it with an !important of its own:
     #page\#2 .el-marker{background-color:#FFD400 !important}
   which outranks that hover, so live's markers never change colour. */

.rcpa-locmap__label {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 180px;
  padding: 20px;
  background: var(--rcpa-yellow);
  color: #002955;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translateY(-50%);
  /* A closed uk-drop is display:none, and that is what keeps it out of the
     layout entirely. Parked on opacity/visibility instead, all six 180px
     cards still measured, and the ones hanging off the right-hand pins pushed
     the document 79px wider than a 440px screen - the white strip down the
     side of the page. */
  display: none;
}
.rcpa-locmap__pin--left  .rcpa-locmap__label { right: calc(100% + 10px); }
.rcpa-locmap__pin--right .rcpa-locmap__label { left: calc(100% + 10px); }

/* uk-drop's default mode is "click,hover", so the name comes up on either.
   The hover half is fenced behind (hover: hover): a touch screen leaves a
   stale hover on whatever was last tapped, which would hold the card open and
   make the second tap look like it did nothing. */
.rcpa-locmap__pin.is-open .rcpa-locmap__label {
  display: block;
  /* uk-drop comes in on uk-animation-fade over 200ms */
  animation: rcpaDropIn .2s ease;
}

@media (hover: hover) {
  .rcpa-locmap__pin:hover .rcpa-locmap__label {
    display: block;
    animation: rcpaDropIn .2s ease;
  }
}

@keyframes rcpaDropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* uk-drop flips a card that would otherwise leave the viewport. Below 1200px
   the map column is narrow enough that the right-hand card runs past the page
   edge, so it opens inwards instead - the same call UIkit makes. */
@media (max-width: 1199px) {
  .rcpa-locmap__pin--right .rcpa-locmap__label {
    left: auto;
    right: calc(100% + 10px);
  }
}

@media (max-width: 900px) {
  .rcpa-locmap__dot { width: 22px; height: 22px; padding: 3px; }
  .rcpa-locmap__dot svg { width: 16px; height: 16px; }
}

/* The dot hides its own label behind the card once that is open, so the card
   has to sit above every other pin. */
.rcpa-locmap__pin.is-open { z-index: 3; }

@media (max-width: 900px) {
  .rcpa-locsec__inner { grid-template-columns: 1fr; }
  /* Map below the list on narrow screens, as live stacks it. */
  .rcpa-locmap { order: 2; max-width: 420px; margin-inline: auto; }
}

@media print {
  .rcpa-header, .rcpa-footer, .rcpa-burger, .rcpa-hero::after, .rcpa-quote-bar,
  .rcpa-to-top { display: none !important; }
  body { color: #000; }
  a { color: #000; text-decoration: underline; }
  .rcpa-hero { min-height: 0; background: none; color: #000; }
  .rcpa-hero__title { color: #000; }
  .outlinetext { -webkit-text-stroke: 0; color: #000; }
}