/*
Theme Name: Royal Canadian Pardons
Theme URI: https://royalcanadianpardons.ca/
Author: Royal Canadian Pardon Services
Author URI: https://royalcanadianpardons.ca/
Description: A lightweight, Elementor-ready WordPress theme for pardon and U.S. entry waiver application services. Ships with a one-click demo import that builds every page as fully editable Elementor content, a lead-capture form shortcode, and header/footer areas that can be replaced with Elementor Pro Theme Builder templates.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rcps
Tags: business, one-column, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --rcps-red: #cc0005;
  --rcps-red-dark: #a30004;
  --rcps-red-light: #e32526;
  --rcps-ink: #1c2024;
  --rcps-ink-soft: #40474e;
  --rcps-muted: #6b7480;
  --rcps-line: #dfe3e8;
  --rcps-bg: #ffffff;
  --rcps-bg-alt: #f4f6f8;
  --rcps-navy: #16191d;
  --rcps-radius: 6px;
  --rcps-shadow: 0 2px 10px rgba(16, 20, 24, .08);
  --rcps-shadow-lg: 0 10px 34px rgba(16, 20, 24, .14);
  --rcps-wrap: 1140px;
  --rcps-header-h: 92px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--rcps-ink-soft);
  background: var(--rcps-bg);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Oswald, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--rcps-ink);
  line-height: 1.22;
  margin: 0 0 .6em;
  font-weight: 600;
  letter-spacing: .2px;
}

h1 { font-size: clamp(1.85rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.12rem; }
h5 { font-size: 1rem; }
h6 { font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; }

p { margin: 0 0 1.1em; }
a { color: var(--rcps-red); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; }
figure { margin: 0 0 1.2em; }
blockquote {
  margin: 0 0 1.4em; padding: 4px 0 4px 22px;
  border-left: 4px solid var(--rcps-red); color: var(--rcps-ink); font-style: italic;
}
code, pre { font-family: Consolas, Monaco, "Courier New", monospace; font-size: .92em; }
pre { background: var(--rcps-bg-alt); padding: 18px; border-radius: var(--rcps-radius); overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--rcps-line); margin: 2.5rem 0; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

:focus-visible { outline: 3px solid var(--rcps-red-light); outline-offset: 2px; }

/* WordPress required helper classes */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important; clip-path: none; color: var(--rcps-red);
  display: block; font-size: .95rem; font-weight: 700; height: auto;
  left: 8px; top: 8px; line-height: normal; padding: 14px 22px;
  text-decoration: none; width: auto; z-index: 100000;
}
.alignleft  { float: left;  margin: .3em 1.6em 1.2em 0; }
.alignright { float: right; margin: .3em 0 1.2em 1.6em; }
.aligncenter { clear: both; display: block; margin: 0 auto 1.2em; }
.alignwide, .alignfull { margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption {
  font-size: .88rem; color: var(--rcps-muted); text-align: center; margin-top: .6em;
}
.sticky .rcps-entry-title::after {
  content: "Featured"; display: inline-block; margin-left: 10px; padding: 3px 10px;
  background: var(--rcps-red); color: #fff; font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; vertical-align: middle;
}
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 1.4em; }
.bypostauthor > .comment-body { }

.rcps-wrap { width: 100%; max-width: var(--rcps-wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--rcps-red); color: #fff; padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   3. Header, navigation, footer
   ========================================================================== */

.rcps-topbar { background: var(--rcps-navy); color: #cfd4da; font-size: .85rem; padding: 7px 0; }
.rcps-topbar .rcps-wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.rcps-topbar a { color: #fff; }
.rcps-topbar-note { color: #9aa2ac; }

.rcps-site-header {
  background: #1f2429; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.22);
}
.admin-bar .rcps-site-header { top: 32px; }

/* Below 782px WordPress switches #wpadminbar to position:absolute, so it
   scrolls away with the page. Offsetting the sticky header by its height would
   leave a 46px window that page content shows through above the header. */
@media screen and (max-width: 782px) { .admin-bar .rcps-site-header { top: 0; } }

.rcps-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--rcps-header-h); }
.rcps-branding img,
.rcps-branding .custom-logo { width: 300px; max-width: 60vw; height: auto; display: block; }
.rcps-site-title { font-size: 1.5rem; margin: 0; }
.rcps-site-title a { color: #fff; text-decoration: none; }
.rcps-site-description { margin: 0; font-size: .82rem; color: #9aa2ac; }

.rcps-header-phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.rcps-header-phone .rcps-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: #9aa2ac; }
.rcps-header-phone a { font-family: Oswald, sans-serif; font-size: 1.42rem; font-weight: 600; color: #fff; text-decoration: none; }
.rcps-header-phone a:hover { color: var(--rcps-red-light); }

.rcps-nav-toggle {
  display: none; background: transparent; border: 1px solid #4a525b; color: #fff;
  font: 600 .95rem/1 Oswald, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 15px; border-radius: var(--rcps-radius); cursor: pointer; align-items: center; gap: 9px;
}
.rcps-nav-toggle .rcps-bars { display: inline-block; width: 18px; height: 2px; background: #fff; position: relative; }
.rcps-nav-toggle .rcps-bars::before,
.rcps-nav-toggle .rcps-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff; }
.rcps-nav-toggle .rcps-bars::before { top: -6px; }
.rcps-nav-toggle .rcps-bars::after { top: 6px; }

.rcps-main-nav { background: var(--rcps-red); }
.rcps-main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.rcps-main-nav li { margin: 0; position: relative; }
.rcps-main-nav a {
  display: block; padding: 15px 20px; color: #fff; text-decoration: none;
  font-family: Oswald, sans-serif; font-size: .96rem; text-transform: uppercase;
  letter-spacing: .05em; border-right: 1px solid rgba(255,255,255,.16); transition: background .18s ease;
}
.rcps-main-nav #rcps-primary-menu > li:first-child > a { border-left: 1px solid rgba(255,255,255,.16); }
.rcps-main-nav a:hover, .rcps-main-nav a:focus { background: var(--rcps-red-dark); text-decoration: none; }
.rcps-main-nav .current-menu-item > a,
.rcps-main-nav .current_page_item > a,
.rcps-main-nav .current-menu-ancestor > a { background: var(--rcps-red-dark); box-shadow: inset 0 -3px 0 #fff; }

/* Dropdowns */
.rcps-main-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 240px; flex-direction: column; background: var(--rcps-red-dark);
  box-shadow: var(--rcps-shadow-lg);
}
.rcps-main-nav li:hover > .sub-menu,
.rcps-main-nav li:focus-within > .sub-menu { display: flex; }
.rcps-main-nav .sub-menu a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); text-transform: none; letter-spacing: 0; }

.rcps-site-footer { background: var(--rcps-navy); color: #a8b0b9; font-size: .93rem; padding: 52px 0 0; }
.rcps-site-footer h2, .rcps-site-footer h3, .rcps-site-footer h4, .rcps-site-footer .widget-title {
  color: #fff; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1em;
}
.rcps-site-footer a { color: #dfe3e8; }
.rcps-site-footer a:hover { color: #fff; }
.rcps-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; padding-bottom: 40px; }
.rcps-footer-grid ul { list-style: none; padding: 0; margin: 0; }
.rcps-footer-grid li { margin-bottom: .55em; }
.rcps-footer-logo { width: 250px; margin-bottom: 18px; height: auto; }
.rcps-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 30px; font-size: .84rem; color: #838c96; line-height: 1.65; }
.rcps-footer-bottom p { margin: 0 0 .5em; }
.rcps-footer-bottom p:last-child { margin-bottom: 0; }

/* ==========================================================================
   4. Page furniture
   ========================================================================== */

.rcps-page-banner { background: var(--rcps-navy); position: relative; background-size: cover; background-position: center; }
.rcps-page-banner::after { content: ""; position: absolute; inset: 0; background: rgba(14,17,20,.72); }
.rcps-page-banner .rcps-wrap { position: relative; z-index: 2; padding-top: 52px; padding-bottom: 52px; }
.rcps-page-banner h1 { color: #fff; margin-bottom: .25em; }
.rcps-breadcrumb { color: #b9c0c8; font-size: .88rem; margin: 0; }
.rcps-breadcrumb a { color: #fff; }

.rcps-content { padding: 60px 0; }
.rcps-content-narrow { max-width: 860px; }
.rcps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 46px; align-items: start; }
.rcps-entry-meta { font-size: .88rem; color: var(--rcps-muted); margin-bottom: 1.4em; }
.rcps-entry-thumb { margin-bottom: 1.6em; border-radius: var(--rcps-radius); overflow: hidden; }

.rcps-pagination { margin-top: 40px; }
.rcps-pagination .page-numbers {
  display: inline-block; padding: 9px 15px; margin-right: 6px;
  border: 1px solid var(--rcps-line); border-radius: var(--rcps-radius); color: var(--rcps-ink);
}
.rcps-pagination .page-numbers.current,
.rcps-pagination .page-numbers:hover { background: var(--rcps-red); border-color: var(--rcps-red); color: #fff; text-decoration: none; }

.widget { margin-bottom: 32px; }
.widget ul { list-style: none; padding: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--rcps-line); }

/* ==========================================================================
   5. Reusable blocks (also used by the Elementor demo content via CSS classes)
   ========================================================================== */

.rcps-eyebrow {
  display: inline-block; font-family: Oswald, sans-serif; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--rcps-red); margin-bottom: .7em;
}
.rcps-eyebrow .elementor-heading-title { font-size: inherit; letter-spacing: inherit; color: inherit; }

.rcps-btn, .rcps-form button[type="submit"] {
  display: inline-block; cursor: pointer; background: var(--rcps-red); color: #fff;
  font-family: Oswald, sans-serif; font-size: 1.02rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  padding: 14px 30px; border: 2px solid var(--rcps-red); border-radius: var(--rcps-radius);
  transition: background .18s ease, transform .12s ease;
}
.rcps-btn:hover, .rcps-btn:focus,
.rcps-form button[type="submit"]:hover, .rcps-form button[type="submit"]:focus {
  background: var(--rcps-red-dark); border-color: var(--rcps-red-dark); color: #fff;
  text-decoration: none; transform: translateY(-1px);
}
.rcps-btn-block { display: block; width: 100%; text-align: center; }

.rcps-card {
  background: #fff; border: 1px solid var(--rcps-line); border-radius: var(--rcps-radius);
  padding: 28px 26px; box-shadow: var(--rcps-shadow); height: 100%;
}
.rcps-card .elementor-widget:last-child { margin-bottom: 0; }

.rcps-callout { background: var(--rcps-navy); border-radius: var(--rcps-radius); padding: 30px 32px; }
.rcps-callout, .rcps-callout p { color: #dfe3e8; }
.rcps-callout h1, .rcps-callout h2, .rcps-callout h3, .rcps-callout h4,
.rcps-callout .elementor-heading-title { color: #fff; }
.rcps-callout a { color: #fff; text-decoration: underline; }

.rcps-notice {
  border-left: 4px solid var(--rcps-red); background: #fdf3f3;
  padding: 16px 20px; border-radius: 0 var(--rcps-radius) var(--rcps-radius) 0; font-size: .96rem;
}
.rcps-notice p:last-child { margin-bottom: 0; }
.rcps-notice strong { color: var(--rcps-ink); }

.rcps-section-alt { background: var(--rcps-bg-alt); }

.rcps-cta-strip, .rcps-cta-strip p { color: #fff; }
.rcps-cta-strip { background: var(--rcps-red); }
.rcps-cta-strip h1, .rcps-cta-strip h2, .rcps-cta-strip h3,
.rcps-cta-strip .elementor-heading-title { color: #fff; }
.rcps-cta-strip .rcps-btn, .rcps-cta-strip .elementor-button {
  background: transparent; border-color: #fff; color: #fff;
}
.rcps-cta-strip .rcps-btn:hover, .rcps-cta-strip .elementor-button:hover {
  background: #fff; color: var(--rcps-red); border-color: #fff;
}

/* Tables — used by the waiting-period table */
.rcps-table-wrap { overflow-x: auto; }
.rcps-content table, .elementor-widget-text-editor table {
  width: 100%; border-collapse: collapse; font-size: .97rem; margin-bottom: 1.4em;
}
.rcps-content th, .rcps-content td,
.elementor-widget-text-editor th, .elementor-widget-text-editor td {
  padding: 12px 14px; border-bottom: 1px solid var(--rcps-line); text-align: left;
}
.rcps-content thead th, .elementor-widget-text-editor thead th {
  background: var(--rcps-navy); color: #fff; font-family: Oswald, sans-serif; font-weight: 500; letter-spacing: .04em;
}
.rcps-content tbody tr:nth-child(even), .elementor-widget-text-editor tbody tr:nth-child(even) { background: var(--rcps-bg-alt); }
.rcps-content td strong, .elementor-widget-text-editor td strong { color: var(--rcps-red); }

.rcps-check-list { list-style: none; padding: 0; }
.rcps-check-list li { position: relative; padding-left: 30px; margin-bottom: .55em; }
.rcps-check-list li::before {
  content: ""; position: absolute; left: 6px; top: .55em; width: 7px; height: 13px;
  border: solid var(--rcps-red); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* ==========================================================================
   6. Forms (shortcode output)
   ========================================================================== */

.rcps-form {
  background: #fff; border: 1px solid var(--rcps-line); border-top: 5px solid var(--rcps-red);
  border-radius: var(--rcps-radius); box-shadow: var(--rcps-shadow-lg); padding: 28px 26px 26px;
}
.rcps-form h3 { margin-bottom: .25em; }
.rcps-form .rcps-form-intro { font-size: .95rem; color: var(--rcps-muted); margin-bottom: 1.4em; }
.rcps-form .rcps-field { margin-bottom: 16px; }
.rcps-form label, .rcps-form .rcps-legend {
  display: block; font-weight: 600; font-size: .95rem; color: var(--rcps-ink); margin-bottom: 6px;
}
.rcps-form .rcps-req { color: var(--rcps-red); margin-left: 2px; }

.rcps-form input[type="text"], .rcps-form input[type="tel"],
.rcps-form input[type="email"], .rcps-form select, .rcps-form textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .98rem; color: var(--rcps-ink);
  background: #fff; border: 1px solid #c6ccd3; border-radius: var(--rcps-radius);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rcps-form input:focus, .rcps-form select:focus, .rcps-form textarea:focus {
  border-color: var(--rcps-red); box-shadow: 0 0 0 3px rgba(204,0,5,.13); outline: none;
}
.rcps-form textarea { min-height: 140px; resize: vertical; }
.rcps-form fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.rcps-form .rcps-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rcps-form .rcps-radio-opt { flex: 1 1 130px; position: relative; margin: 0; }
.rcps-form .rcps-radio-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rcps-form .rcps-radio-opt span {
  display: block; text-align: center; padding: 11px 8px; font-size: .95rem; font-weight: 400;
  border: 1px solid #c6ccd3; border-radius: var(--rcps-radius); cursor: pointer; transition: all .16s ease;
}
.rcps-form .rcps-radio-opt input:checked + span {
  border-color: var(--rcps-red); background: rgba(204,0,5,.06); color: var(--rcps-red); font-weight: 600;
}
.rcps-form .rcps-radio-opt input:focus-visible + span { outline: 3px solid var(--rcps-red-light); outline-offset: 2px; }
.rcps-form .rcps-hp { position: absolute; left: -9999px; }
.rcps-form .rcps-form-note { font-size: .82rem; color: var(--rcps-muted); margin: 14px 0 0; line-height: 1.55; }

.rcps-form-message { padding: 14px 16px; border-radius: var(--rcps-radius); margin-bottom: 18px; font-size: .95rem; }
.rcps-form-message.is-success { background: #eef7ee; border: 1px solid #bcd9bc; color: #24601f; }
.rcps-form-message.is-error { background: #fdf1f1; border: 1px solid #e3bcbc; color: #8c1f1f; }

.rcps-form-sticky { position: sticky; top: calc(var(--rcps-header-h) + 16px); }

/* ==========================================================================
   7. Elementor integration
   ========================================================================== */

/* Elementor pages provide their own section padding, so drop the theme's. */
.rcps-elementor-page .rcps-content { padding: 0; }
.rcps-elementor-page .rcps-content-narrow { max-width: none; }

/* Keep Elementor's default container in step with the theme wrapper. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--rcps-wrap); }

/* Elementor only ships width rules for a fixed set of column fractions
   (10, 11, 12, 14, 16, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 83, 90, 100).
   A column on any other value gets no width at all and falls back to 100%,
   which collapses two-column layouts. These fill in the intermediate widths
   used by the demo layouts. Scoped above the mobile breakpoint so Elementor's
   own stacking rule still wins on small screens. */
@media (min-width: 768px) {
  .elementor-column.elementor-col-35, .elementor-column[data-col="35"] { width: 35%; }
  .elementor-column.elementor-col-38, .elementor-column[data-col="38"] { width: 38%; }
  .elementor-column.elementor-col-42, .elementor-column[data-col="42"] { width: 42%; }
  .elementor-column.elementor-col-58, .elementor-column[data-col="58"] { width: 58%; }
  .elementor-column.elementor-col-62, .elementor-column[data-col="62"] { width: 62%; }
  .elementor-column.elementor-col-65, .elementor-column[data-col="65"] { width: 65%; }
}

/* Elementor toggle/accordion restyled to match the theme */
.elementor-widget-toggle .elementor-toggle-item,
.elementor-widget-accordion .elementor-accordion-item {
  border: 1px solid var(--rcps-line); border-radius: var(--rcps-radius); margin-bottom: 10px; background: #fff;
}
.elementor-widget-toggle .elementor-tab-title,
.elementor-widget-accordion .elementor-tab-title {
  padding: 16px 20px; font-family: Oswald, sans-serif; font-size: 1.06rem;
  font-weight: 500; color: var(--rcps-ink); border: 0;
}
.elementor-widget-toggle .elementor-tab-title.elementor-active,
.elementor-widget-accordion .elementor-tab-title.elementor-active { color: var(--rcps-red); }
.elementor-widget-toggle .elementor-tab-title:hover,
.elementor-widget-accordion .elementor-tab-title:hover { background: var(--rcps-bg-alt); }
.elementor-widget-toggle .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content { padding: 4px 20px 8px 52px; border: 0; }

/* Elementor button falls back to the theme button styling */
.elementor-button { font-family: Oswald, sans-serif; letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Dark-section overrides.

   Elementor's generated CSS paints every heading with the global "primary"
   colour via `.elementor-widget-heading .elementor-heading-title` (0,2,0) and
   every button with the global "accent" colour, and that CSS loads after the
   theme stylesheet. On the sections that sit on a dark or red background the
   text has to stay white, so these selectors are prefixed with `body` to
   outrank Elementor without resorting to !important.
   -------------------------------------------------------------------------- */

/* Overlay stacking.

   The theme's `.rcps-page-banner::after` overlay was written for the static
   markup, where `.rcps-wrap` carried `z-index: 2` and sat above it. Elementor
   emits `.elementor-container` instead, which has no z-index, so that
   pseudo-element paints straight over the heading and breadcrumb. Elementor
   also draws its own `.elementor-background-overlay`, so the section ends up
   double-darkened. Drop the theme overlay on Elementor sections and let
   Elementor's own overlay do the work. */
   Rather than fight Elementor's per-page overlay rule — which is
   `.elementor-N .elementor-element.elementor-element-XXX > .elementor-background-overlay`
   at (0,4,0) and would beat anything reasonable here — the overlay div is
   simply hidden. `display` is a property Elementor never sets on it, so this
   applies regardless of specificity. The theme's own ::after then provides the
   single, predictable darkening layer, sitting below the content. */
body .rcps-page-banner > .elementor-background-overlay { display: none; }

.rcps-page-banner::after { z-index: 0; }
body .rcps-page-banner > .elementor-container { position: relative; z-index: 1; }

body .rcps-page-banner .elementor-heading-title,
body .rcps-hero .elementor-heading-title,
body .rcps-cta-strip .elementor-heading-title,
body .rcps-callout .elementor-heading-title {
  color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

body .rcps-page-banner .elementor-widget-text-editor,
body .rcps-hero .elementor-widget-text-editor,
body .rcps-cta-strip .elementor-widget-text-editor { color: rgba(255, 255, 255, .92); }

body .rcps-callout .elementor-widget-text-editor { color: #dfe3e8; }

body .rcps-page-banner .elementor-widget-text-editor a,
body .rcps-hero .elementor-widget-text-editor a,
body .rcps-cta-strip .elementor-widget-text-editor a,
body .rcps-callout .elementor-widget-text-editor a { color: #fff; text-decoration: underline; }

/* Breadcrumb line under a banner heading. */
body .rcps-page-banner .rcps-breadcrumb { color: #b9c0c8; }

/* The CTA strip button sits on red, so it inverts to an outline. */
body .rcps-cta-strip .elementor-button {
  background-color: transparent; border: 2px solid #fff; color: #fff;
}
body .rcps-cta-strip .elementor-button:hover,
body .rcps-cta-strip .elementor-button:focus {
  background-color: #fff; color: var(--rcps-red); border-color: #fff;
}

/* The eyebrow label stays red rather than taking the heading colour. */
body .rcps-eyebrow .elementor-heading-title {
  color: var(--rcps-red); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Card columns.

   `.rcps-card` is applied to the Elementor column, but a column spans the full
   track including the gutter, so painting the card surface on it leaves the
   white boxes touching. Instead the column becomes a transparent track that
   carries the gutter as padding, and the card surface moves to the inner
   `.elementor-widget-wrap`.

   The `body` prefix is needed because Elementor's own gutter rule
   `.elementor-column-gap-extended > .elementor-column > .elementor-element-populated`
   is (0,3,0) and loads after this stylesheet.
   -------------------------------------------------------------------------- */

body .elementor-column.rcps-card {
  background: none;
  border: 0;
  box-shadow: none;
  padding-left: 13px;
  padding-right: 13px;
}

body .elementor-column.rcps-card > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--rcps-line);
  border-radius: var(--rcps-radius);
  box-shadow: var(--rcps-shadow);
  padding: 28px 26px;
  height: 100%;
  align-content: flex-start;
}

/* --------------------------------------------------------------------------
   Mobile spacing for Elementor content.

   Elementor writes each section's padding into the page stylesheet with no
   media queries at all, so the desktop `padding: 60px 0` also applies on a
   phone and the sections read as huge empty bands. The per-element selector
   `.elementor-N .elementor-element.elementor-element-XXX` is (0,3,0), so these
   overrides use `body` plus three classes to land at (0,3,1) and win.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Side gutters, so nothing runs to the edge of the screen. */
  body .elementor-section.elementor-element > .elementor-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tighter vertical rhythm than the desktop 60px. */
  body .elementor-section.elementor-element.elementor-top-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }

  /* Banners and the hero keep a little more height. */
  body .elementor-section.elementor-element.rcps-page-banner {
    padding-top: 46px;
    padding-bottom: 46px;
  }

  /* Stacked cards: the gutter is handled by the container, so the column only
     needs to space the cards apart vertically. */
  body .elementor-column.rcps-card {
    padding-left: 0;
    padding-right: 0;
  }

  body .elementor-column.rcps-card > .elementor-widget-wrap {
    margin-bottom: 16px;
    padding: 24px 22px;
  }

  body .elementor-column.rcps-callout > .elementor-widget-wrap {
    padding: 24px 22px;
  }
}

/* Same treatment for the dark callout block. */
body .elementor-column.rcps-callout {
  background: none;
  padding: 0;
}

body .elementor-column.rcps-callout > .elementor-widget-wrap {
  background: var(--rcps-navy);
  border-radius: var(--rcps-radius);
  padding: 30px 32px;
}

/* Icon list spacing inside cards */
.elementor-widget-icon-list .elementor-icon-list-item { margin-bottom: .3em; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .rcps-layout { grid-template-columns: 1fr; }
  .rcps-form-sticky { position: static; }
}

@media (max-width: 782px) {
  :root { --rcps-header-h: 66px; }

  /* The header row is logo + toggle only on small screens. Keeping the phone
     block in the row leaves it too narrow and the number wraps one character
     per line; the top bar already carries a tap-to-call link. */
  .rcps-header-phone { display: none; }
  .rcps-topbar-note { display: none; }
  .rcps-topbar .rcps-wrap { justify-content: center; }
  .rcps-topbar a { font-weight: 600; white-space: nowrap; }

  .rcps-header-inner { gap: 12px; }
  .rcps-branding img, .rcps-branding .custom-logo { width: 190px; }
  .rcps-nav-toggle { flex: 0 0 auto; white-space: nowrap; }

  .rcps-nav-toggle { display: inline-flex; }
  .rcps-main-nav { background: #1f2429; }
  .rcps-main-nav #rcps-primary-menu { display: none; flex-direction: column; border-top: 1px solid rgba(255,255,255,.12); }
  .rcps-main-nav #rcps-primary-menu.is-open { display: flex; }
  .rcps-main-nav a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px 20px; }
  .rcps-main-nav #rcps-primary-menu > li:first-child > a { border-left: 0; }
  .rcps-main-nav .sub-menu { display: flex; position: static; min-width: 0; box-shadow: none; background: rgba(0,0,0,.25); }
  .rcps-main-nav .sub-menu a { padding-left: 38px; }
  .rcps-main-nav .current-menu-item > a, .rcps-main-nav .current_page_item > a {
    box-shadow: inset 4px 0 0 var(--rcps-red); background: rgba(204,0,5,.18);
  }

  .rcps-content { padding: 40px 0; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .rcps-form { padding: 22px 18px; }
  .rcps-callout { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .rcps-site-header, .rcps-main-nav, .rcps-topbar, .rcps-cta-strip,
  .rcps-form, .rcps-site-footer, .rcps-page-banner { display: none !important; }
  body { font-size: 12pt; color: #000; }
}