/* =====================================================
   POSITIVE ID LABELS - CUSTOM STYLESHEET
   Child theme custom styles for Kadence
   Organized by section for easy maintenance & agency handoff
   Updated: March 2026
   ===================================================== */

/* Google Fonts — must remain at top of file before all rules */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* =====================================================
   RESPONSIVE BREAKPOINTS (aligned to Kadence theme)
   - Tablet: 1024px (Kadence header/layout switch)
   - Mobile: 767px  (Kadence mobile breakpoint)
   - Small mobile: 640px (sub-breakpoint for grid collapse)
   
   DO NOT introduce other breakpoints without updating
   this reference. All custom CSS must use these three.
   
   Logo sizing managed in Kadence Customizer:
   PC: 350px | Tablet: 330px | Mobile: 275px
   (Appearance > Customize > Header > Logo)
   ===================================================== */

/* ===================================
   1. COLOR VARIABLES
   =================================== */
:root {
  --pid-cyan: #2EC1EF;
  /* Accessible blue — 4.95:1 on white (WCAG AA).
     Use for interactive elements (buttons, text links) on light backgrounds.
     --pid-cyan retained for decorative uses and on dark/navy backgrounds
     where it passes at 7.98:1. */
  --pid-cyan-accessible: #0070D1;
  --pid-pink: #DB0047;
  --pid-navy: #002032;
  --pid-dark-blue: #003F63;
  --pid-light-blue: #0F71A9;
  --pid-pale-blue: #C7ECF5;
  --pid-light-bg: #F0F8FA;
  --pid-grey: #898989;
  --pid-off-white: #FAFAFA;
  --pid-near-black: #3D3D3D;
  --wp-editor-canvas-background: var(--pid-light-bg) !important;
}
/* ===================================
   2. LAYOUT SYSTEM - Native Gutenberg Columns
   =================================== */

/* 4-Column Responsive Grid */
.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 30px 0;
  background: #f9f9f9;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.wp-block-column {
  background: var(--pid-light-bg);
  padding: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-column:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wp-block-column img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.wp-block-column h3 {
  margin: 15px 0 10px 0;
  font-weight: bold;
  color: var(--pid-near-black);
}

.wp-block-column p {
  line-height: 1.6;
  margin: 10px 0;
}

@media (max-width: 1024px) {
  .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
    padding: 25px;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .wp-block-columns {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px;
  }
}

/* 3-Column 2-Row Grid (3x2) - 6 cards */
.wp-block-group.offering-grid-3x2 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* 2-Column 1-Row Grid (2x1) - 2 cards */
.wp-block-group.offering-grid-2x1 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* 3-Column 1-Row Grid (3x1) - 3 cards */
.wp-block-group.offering-grid-3x1 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* 4-Column 1-Row Grid (4x1) - 4 cards */
.wp-block-group.offering-grid-4x1 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* 2-Column 2-Row Grid (2x2) - 4 cards */
.wp-block-group.offering-grid-2x2 > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* Asymmetric/Masonry Grid - Variable sized cards */
.wp-block-group.offering-grid-masonry > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 40px 0;
}

/* Card size variations for masonry layout */
.offering-card.span-2 {
  grid-column: span 2;
}

.offering-card.span-1 {
  grid-column: span 1;
}

.offering-card.span-full {
  grid-column: span 4;
}

.offering-card {
  border-radius: 12px;
  padding: 40px 25px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* Subtle gradient overlay on all cards */
.offering-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content appears above gradient */
.offering-card > * {
  position: relative;
  z-index: 2;
}

.offering-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.offering-card .offering-image {
  width: 120px;
  height: 120px;
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.offering-card .offering-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.offering-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.offering-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 20px 0;
  flex-grow: 1;
  color: inherit;
}

.offering-card a {
  text-decoration: underline;
  font-weight: 500;
  display: inline-block;
  transition: opacity 0.3s ease;
  margin-top: auto;
}

.offering-card a:hover {
  opacity: 0.8;
}

/* Dark Color Variants - WCAG AA Compliant */
.offering-card.bg-navy {
  background: var(--pid-navy) !important;
  color: var(--pid-off-white) !important;
}

.offering-card.bg-navy h3 {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-navy p {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-dark-blue {
  background: var(--pid-dark-blue) !important;
  color: var(--pid-off-white) !important;
}

.offering-card.bg-dark-blue h3 {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-dark-blue p {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-cyan {
  /* White text on #2EC1EF was 2.01:1 — fails WCAG AA.
     White on --pid-cyan-accessible is 4.95:1 — passes. */
  background: var(--pid-cyan-accessible) !important;
  color: var(--pid-off-white) !important;
}

.offering-card.bg-cyan h3 {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-cyan p {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-pink {
  background: var(--pid-pink) !important;
  color: var(--pid-off-white) !important;
}

.offering-card.bg-pink h3 {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-pink p {
  color: var(--pid-off-white) !important;
}

/* Burgundy/Maroon - New dark red variant */
.offering-card.bg-burgundy {
  background: #8B2F4E !important;
  color: var(--pid-off-white) !important;
}

.offering-card.bg-burgundy h3 {
  color: var(--pid-off-white) !important;
}

.offering-card.bg-burgundy p {
  color: var(--pid-off-white) !important;
}

/* H2 & H4 — dark variants: near-white colour + suppress grey outline shadow
   (the global heading text-shadow reads as a dark fringe on dark backgrounds) */
.offering-card.bg-navy h2,
.offering-card.bg-navy h4,
.offering-card.bg-dark-blue h2,
.offering-card.bg-dark-blue h4,
.offering-card.bg-cyan h2,
.offering-card.bg-cyan h4,
.offering-card.bg-pink h2,
.offering-card.bg-pink h4,
.offering-card.bg-burgundy h2,
.offering-card.bg-burgundy h4 {
  color: var(--pid-off-white) !important;
  text-shadow: none !important;
}

/* Light Color Variants */
.offering-card.bg-off-white {
  background: var(--pid-off-white) !important;
  color: var(--pid-near-black) !important;
  border: 1px solid #e0e0e0;
}

.offering-card.bg-off-white h2,
.offering-card.bg-off-white h3,
.offering-card.bg-off-white h4 {
  color: var(--pid-near-black) !important;
}

.offering-card.bg-off-white p {
  color: var(--pid-grey) !important;
}

.offering-card.bg-pale-blue {
  background: var(--pid-pale-blue) !important;
  color: var(--pid-near-black) !important;
  border: 1px solid #b0dce8;
}

.offering-card.bg-pale-blue h2,
.offering-card.bg-pale-blue h3,
.offering-card.bg-pale-blue h4 {
  color: var(--pid-navy) !important;
}

.offering-card.bg-pale-blue p {
  color: var(--pid-dark-blue) !important;
}

/* Responsive: 2x1 → 1x2 on tablet */
@media (max-width: 1024px) {
  .wp-block-group.offering-grid-2x1 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 3x1 → 2 → 1 on tablet/mobile */
@media (max-width: 1024px) {
  .wp-block-group.offering-grid-3x1 > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .wp-block-group.offering-grid-3x1 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 4x1 → 2x2 on tablet → 1 on mobile */
@media (max-width: 1024px) {
  .wp-block-group.offering-grid-4x1 > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .wp-block-group.offering-grid-4x1 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 3x2 → 2 → 1 on tablet/mobile */
@media (max-width: 1024px) {
  .wp-block-group.offering-grid-3x2 > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .wp-block-group.offering-grid-3x2 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Responsive: 2x2 → 1 on mobile */
@media (max-width: 640px) {
  .wp-block-group.offering-grid-2x2 > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }
}

/* Responsive: Masonry → 2x2 on tablet → 1 on mobile */
@media (max-width: 1024px) {
  .wp-block-group.offering-grid-masonry > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .offering-card.span-2 {
    grid-column: span 1;
  }

  .offering-card.span-full {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .wp-block-group.offering-grid-masonry > .wp-block-group__inner-container {
    grid-template-columns: 1fr;
  }

  .offering-card.span-2,
  .offering-card.span-full {
    grid-column: span 1;
  }
}

.offering-card {
  padding: 40px 25px;
}

@media (max-width: 1024px) {
  .offering-card {
    padding: 30px 20px;
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .offering-card {
    padding: 25px 20px;
    min-height: auto;
  }

  .offering-card h3 {
    font-size: 20px;
  }
}

/* ===================================
   3. HEADER & NAVIGATION
   =================================== */

/* Sticky header - body scrolls underneath */
#masthead,
header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Reduce gap between header/breadcrumbs and page content
   Kadence Customizer outputs: .content-area { margin-top: 5rem }
   Override here rather than in Customizer for version control */
.content-area,
#primary.content-area {
    margin-top: 1rem !important;
}

@media all and (max-width: 1024px) {
    .content-area,
    #primary.content-area {
        margin-top: 0.75rem !important;
    }
}

@media all and (max-width: 767px) {
    .content-area,
    #primary.content-area {
        margin-top: 0.5rem !important;
    }
}

#masthead,
.site-header,
.site-header-wrap,
header.site-header,
.site-header-row,
.site-header-row-layout-contained,
.site-header-row-layout-standard,
.site-top-header-wrap,
.site-main-header-wrap,
.site-header-main-section {
    background: var(--pid-navy) !important;
    border-bottom: 1px solid var(--pid-dark-blue);
}

.site-header-inner-wrap,
.site-branding,
.site-header .header-html,
.header-main-layout-left,
.header-main-layout-center,
.header-main-layout-right {
    background: transparent !important;
}

#masthead [style*="background"],
.site-header [style*="background"] {
    background: var(--pid-navy) !important;
}

.site-title,
.site-title a {
    color: var(--pid-off-white) !important;
}

.site-description {
    color: var(--pid-cyan) !important;
}

#site-navigation a,
.main-navigation a,
.header-navigation a,
.primary-menu-container a,
.header-menu a {
    color: var(--pid-off-white) !important;
}

#site-navigation a:hover,
.main-navigation a:hover,
.header-navigation a:hover,
.primary-menu-container a:hover,
.header-menu a:hover {
    color: var(--pid-cyan) !important;
}

.header-navigation .sub-menu,
.header-menu .sub-menu {
    background: var(--pid-navy) !important;
    border: 1px solid var(--pid-dark-blue);
}

.header-navigation .sub-menu a,
.header-menu .sub-menu a {
    color: var(--pid-off-white) !important;
}

.header-navigation .sub-menu a:hover,
.header-menu .sub-menu a:hover {
    background: var(--pid-dark-blue) !important;
    color: var(--pid-cyan) !important;
}

.mobile-toggle-open-container .mobile-toggle-open-icon {
    color: var(--pid-off-white) !important;
}

.header-navigation .current-menu-item > a,
.header-navigation .current_page_item > a,
.header-navigation .current-menu-ancestor > a,
.header-navigation .current-menu-parent > a,
.primary-menu-container .current-menu-item > a,
.primary-menu-container .current_page_item > a {
    background: var(--pid-dark-blue) !important;
    color: var(--pid-off-white) !important;
    border-radius: 8px;
    padding: 8px 16px;
}

.header-navigation .current-menu-item > a:hover,
.header-navigation .current_page_item > a:hover,
.primary-menu-container .current-menu-item > a:hover,
.primary-menu-container .current_page_item > a:hover {
    background: #004570 !important;
    color: var(--pid-cyan) !important;
}

.header-navigation .sub-menu .current-menu-item > a,
.header-navigation .sub-menu .current_page_item > a {
    background: var(--pid-dark-blue) !important;
    color: var(--pid-off-white) !important;
}

@media (max-width: 1024px) {
    .mobile-navigation .current-menu-item > a,
    .mobile-navigation .current_page_item > a {
        background: var(--pid-dark-blue) !important;
        color: var(--pid-off-white) !important;
    }
}

/* ===================================
   4. BODY & CONTENT
   =================================== */

body,
.entry-content,
.entry-content p,
.entry-content li {
    color: var(--pid-near-black) !important;
}

.entry-content p,
.entry-summary p,
article p,
.post-content p {
    background: transparent !important;
}

footer.entry-footer,
.entry-footer,
.entry-footer *,
.entry-actions,
.entry-actions *,
article footer,
article .entry-footer {
    background: transparent !important;
    color: var(--pid-near-black) !important;
}

.entry-footer a {
    color: var(--pid-dark-blue) !important;
}

.entry-footer a:hover {
    color: var(--pid-pink) !important;
}

/* Hide Kadence page title on single pages/posts (H1 is in content)
   .loop-entry = blog cards (keep visible)
   .single-entry = individual page/post view (hide, H1 in content) */
.entry-hero.page-hero-section,
article.single-entry > .entry-content-wrap > .entry-header {
    display: none !important;
}

/* Blog card category links - match hero banner colour */
.loop-entry .entry-taxonomies,
.loop-entry .entry-taxonomies a,
.loop-entry .cat-links,
.loop-entry .cat-links a {
    color: var(--pid-light-blue) !important;
}

/* Category archive hero banner */
.post-archive-hero-section,
.post-archive-hero-section .entry-hero-container-inner,
.post-archive-hero-section .hero-container {
    background: var(--pid-light-blue) !important;
}

.post-archive-hero-section .entry-header,
.post-archive-hero-section .entry-header *,
.post-archive-hero-section h1,
.post-archive-hero-section .archive-title,
.post-archive-hero-section .archive-description,
.post-archive-hero-section .archive-description p {
    color: var(--pid-off-white) !important;
}

/* ===================================
   5. FOOTER
   =================================== */

footer.site-footer,
.site-footer,
.site-footer *:not(a):not(span):not(p):not(li):not(h1):not(h2):not(h3):not(h4):not(h5),
.site-footer-wrap,
.site-top-footer-wrap,
.site-middle-footer-wrap,
.site-bottom-footer-wrap,
.site-footer-row-layout-contained,
.site-footer-row-layout-standard,
.site-footer-row-container,
.site-footer-row-container-inner,
.site-footer-inner-wrap,
.footer-widget-area,
.footer-column,
.widget-area.footer-widgets {
    background: var(--pid-navy) !important;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer div {
    color: var(--pid-off-white) !important;
}

.site-footer a {
    color: var(--pid-off-white) !important;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--pid-cyan) !important;
}

.site-footer .widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: var(--pid-off-white) !important;
}

.site-footer nav a,
.site-footer .widget_nav_menu a,
.site-footer .menu a,
.site-footer ul li a,
.footer-navigation a {
    font-size: 13px !important;
    line-height: 1.6;
}

.site-footer .widget-title {
    font-size: 16px !important;
    margin-bottom: 12px;
}

.site-footer-bottom-wrap,
.site-footer-bottom-wrap p,
.site-footer-bottom-wrap span,
.site-footer-bottom-wrap div,
.site-bottom-footer-wrap,
.site-bottom-footer-wrap p,
.site-bottom-footer-wrap span,
.site-bottom-footer-wrap div,
.footer-copyright,
.footer-copyright p {
    color: var(--pid-grey) !important;
}

.site-footer-bottom-wrap a,
.site-bottom-footer-wrap a,
.footer-copyright a {
    color: var(--pid-grey) !important;
}

.site-footer-bottom-wrap a:hover,
.site-bottom-footer-wrap a:hover,
.footer-copyright a:hover {
    color: var(--pid-cyan) !important;
}

.site-footer [style*="background-color: #000"],
.site-footer [style*="background: #000"],
.site-footer [style*="background: rgb(0, 0, 0)"] {
    background: var(--pid-navy) !important;
}

/* PID Footer Navigation (3-column menu grid)
   Rendered via pid_render_footer_menus() in functions.php
   Uses kadence_footer hook - sits inside .site-footer */
.pid-footer-menus {
    background: var(--pid-navy) !important;
    padding: 3rem 1rem 2rem;
}

.pid-footer-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pid-footer-menus h4 {
    color: var(--pid-off-white) !important;
    font-size: 16px !important;
    font-weight: 600;
    margin-bottom: 12px;
}

.pid-footer-menus ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pid-footer-menus li {
    padding: 0.25rem 0;
}

.pid-footer-menus a {
    color: var(--pid-off-white) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.6;
    transition: color 0.25s ease-in-out;
}

.pid-footer-menus a:hover {
    color: var(--pid-cyan) !important;
}

@media (max-width: 767px) {
    .pid-footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* ===================================
   6. TYPOGRAPHY & HEADINGS
   =================================== */

a {
    transition: all 0.25s ease-in-out;
}

a:hover {
    color: var(--pid-pink);
}

.entry-content a:not(.kb-button):not(.wp-block-button__link):not(.more-link):not(.post-more-link):not(.read-more):not(.button):not(.btn) {
    color: var(--pid-light-blue) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    display: inline !important;
}



.entry-content a:not(.kb-button):not(.wp-block-button__link):not(.more-link):not(.post-more-link):not(.read-more):not(.button):not(.btn):hover {
    color: var(--pid-pink) !important;
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.hero-heading,
h1.hero-heading {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--pid-near-black);
    margin-bottom: 30px;
    margin-top: 0;
}

.hero-heading.compact {
    margin-bottom: 20px;
}

.hero-heading .highlight,
.hero-heading .accent {
    /* Cyan text on light bg was 1.95:1 — fails WCAG AA.
       Accessible blue is 4.60:1 on light bg — passes. */
    color: var(--pid-cyan-accessible);
}

.hero-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--pid-cyan);
    margin-top: 15px;
}

.hero-heading.no-underline::after {
    display: none;
}

@media (max-width: 767px) {
    .hero-heading,
    h1.hero-heading {
        font-size: 32px;
        margin-bottom: 25px;
    }
}

.hero-section,
.hero-section > .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 6px 0;
}

/* Prevent double-padding if inner container exists */
.hero-section > .wp-block-group__inner-container {
    padding: 0;
}

.hero-section.text-only,
.hero-section:not(:has(.hero-image)) {
    padding: 2px 0 4px 0;
}

.hero-section .hero-content {
    flex: 1;
}

.hero-section .hero-image {
    flex: 1;
    max-width: 50%;
    display: block !important;
}

.hero-section .hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Carousel images inside hero: restore cover height and remove
   the border-radius that applies to standalone images.
   The carousel container handles its own border-radius.
   Added v1.2.2 — fixes object-fit:cover not engaging,
   which prevented object-position from taking effect. */
.hero-section .hero-image .pid-imgc-img {
    height: 100%;
    border-radius: 0;
}

.hero-section .hero-image .pid-carousel {
    width: 100%;
}

.hero-section .hero-image .pid-imgc-carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pid-imgc-slides {
    background-color: var(--pid-light-bg);
}

.hero-heading:not(.hero-section .hero-heading) {
    margin-bottom: 30px;
}

.hero-heading + p,
.hero-heading + div,
.hero-section .hero-content > p:first-of-type {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .hero-section,
    .hero-section > .wp-block-group__inner-container {
        flex-direction: column;
        padding: 4px 0;
    }
    
    .hero-section > .wp-block-group__inner-container {
        padding: 0;
    }
    
    .hero-section .hero-image {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    
    .hero-section.text-only {
        padding: 2px 0 3px 0;
    }
}

blockquote,
.wp-block-quote {
    background: var(--pid-pale-blue);
    color: var(--pid-near-black);
    padding: 20px 25px;
    margin: 20px 0;
    border-left: 4px solid var(--pid-cyan);
    border-radius: 8px;
    font-style: italic;
}

blockquote p,
.wp-block-quote p {
    margin: 0 0 10px 0;
    color: var(--pid-near-black);
}

blockquote p:last-child,
.wp-block-quote p:last-child {
    margin-bottom: 0;
}

blockquote cite,
.wp-block-quote cite,
.wp-block-quote__citation {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--pid-grey);
    font-style: normal;
}

.kadence-breadcrumbs,
.rank-math-breadcrumb {
    font-size: 12px;
    color: var(--pid-grey);
}

.kadence-breadcrumbs a,
.rank-math-breadcrumb a {
    color: var(--pid-dark-blue) !important;
}

.kadence-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover {
    color: var(--pid-cyan-accessible) !important;
}

/* ===================================
   7. COMPONENTS - Buttons, Forms, Cards
   =================================== */

.kb-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.button:not(.entry-content a),
.btn:not(.entry-content a),
a.button,
a.btn {
    background: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
    border: 1px solid var(--pid-cyan-accessible) !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease-in-out !important;
    cursor: pointer;
    display: inline-block;
    text-decoration: none !important;
}

.kb-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover,
a.button:hover,
a.btn:hover {
    background: #005BB8 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 112, 209, 0.3);
}

@media (max-width: 767px) {
    .kb-button,
    .wp-block-button__link,
    button[type="submit"],
    input[type="submit"],
    .button,
    .btn {
        padding: 10px 20px !important;
        border-radius: 12px !important;
    }
}

.entry-content .more-link,
.read-more,
.read-more-button,
a.read-more,
.post-more-link,
a.post-more-link,
.more-link-wrap > a,
.entry-actions > a,
.entry-footer .entry-actions a {
    background: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
    border: 1px solid var(--pid-cyan-accessible) !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.25s ease-in-out !important;
    margin-top: 10px !important;
}

.entry-content .more-link:hover,
.read-more:hover,
.read-more-button:hover,
a.read-more:hover,
.post-more-link:hover,
a.post-more-link:hover,
.more-link-wrap > a:hover,
.entry-actions > a:hover,
.entry-footer .entry-actions a:hover {
    background: #005BB8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 112, 209, 0.3) !important;
}

.more-link:before,
.more-link:after,
.read-more:before,
.read-more:after,
.post-more-link:before,
.post-more-link:after {
    display: none !important;
}

.more-link svg,
.read-more svg,
.post-more-link svg,
.kadence-svg-iconset,
.kadence-arrow-right-alt-svg {
    fill: var(--pid-off-white) !important;
    color: var(--pid-off-white) !important;
    background: transparent !important;
}

.more-link span,
.read-more span,
.post-more-link span {
    background: transparent !important;
    color: var(--pid-off-white) !important;
}

.more-link-wrap,
p.more-link-wrap,
.entry-content .more-link-wrap,
.entry-summary .more-link-wrap {
    background: transparent !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.more-link-wrap[style*="background"] {
    background: transparent !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: var(--pid-off-white);
    color: var(--pid-near-black);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--pid-cyan);
    box-shadow: 0 0 0 3px rgba(46, 193, 239, 0.1);
}

.feature-card {
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 40px 30px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 32, 50, 0.85) 0%, rgba(0, 32, 50, 0.6) 100%);
    z-index: 1;
}

.feature-card * {
    position: relative;
    z-index: 2;
}

.feature-card h3,
.feature-card .feature-card-title {
    color: var(--pid-off-white);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.feature-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    color: var(--pid-off-white);
}

.feature-card ul li {
    padding: 5px 0;
    color: var(--pid-off-white);
}

.feature-card ul li::before {
    content: '• ';
    color: var(--pid-cyan);
    font-weight: bold;
    margin-right: 8px;
}

.feature-card .view-more,
.feature-card a.view-more {
    color: var(--pid-off-white) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    font-weight: 500;
    display: inline-block;
    margin-top: 15px;
    transition: color 0.3s ease;
}

.feature-card .view-more:hover,
.feature-card a.view-more:hover {
    color: var(--pid-cyan) !important;
}

.feature-card.bg-navy {
    background-color: var(--pid-navy);
}

.feature-card.bg-cyan {
    background: linear-gradient(135deg, var(--pid-cyan) 0%, #1FB1D9 100%);
}

.feature-card.bg-pink {
    background: linear-gradient(135deg, var(--pid-pink) 0%, #B00039 100%);
}

.feature-card.bg-dark-blue {
    background-color: var(--pid-dark-blue);
}

.feature-card.no-image::before {
    display: none;
}

.contact-page-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 40px 0;
}

.contact-form-section {
    background: var(--pid-off-white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-section h2,
.contact-form-section h3 {
    color: var(--pid-near-black);
    margin-bottom: 10px;
}

.contact-form-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--pid-cyan);
    margin-top: 10px;
    margin-bottom: 20px;
}

.contact-form-section p {
    color: var(--pid-grey);
    margin-bottom: 20px;
}

.contact-form-section .phone-link {
    color: var(--pid-light-blue) !important;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
}

.contact-form-section .phone-link:hover {
    color: var(--pid-pink) !important;
}

.contact-map-section {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-map-section iframe,
.contact-map-section .map-embed {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none;
}

.contact-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.contact-info-block h4 {
    color: var(--pid-near-black);
    font-size: 18px;
    margin-bottom: 15px;
}

.contact-info-block p,
.contact-info-block a {
    color: var(--pid-grey);
    line-height: 1.6;
    margin: 5px 0;
}

.contact-info-block a {
    color: var(--pid-light-blue) !important;
    text-decoration: none;
}

.contact-info-block a:hover {
    color: var(--pid-pink) !important;
}

.form-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--pid-grey);
    margin-top: 15px;
    padding: 10px;
    background: rgba(46, 193, 239, 0.05);
    border-radius: 8px;
}

.form-security-note svg,
.form-security-note .icon {
    color: var(--pid-cyan);
    font-size: 20px;
}

@media (max-width: 1024px) {
    .contact-page-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-info-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .contact-map-section iframe,
    .contact-map-section .map-embed {
        min-height: 350px;
    }
}

/* ===================================
   SUB-PAGE LINK CLOUD
   Add "pid-link-cloud" as Additional CSS class on Buttons block
   Use site-wide for sub-page navigation at top of pages
   =================================== */

.wp-block-buttons.pid-link-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  margin: 20px 0 30px 0;
}

.wp-block-buttons.pid-link-cloud .wp-block-button {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 280px;
}

.wp-block-buttons.pid-link-cloud .wp-block-button__link {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-buttons.pid-link-cloud .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Mobile: 2-column grid */
@media (max-width: 640px) {
  .wp-block-buttons.pid-link-cloud {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .wp-block-buttons.pid-link-cloud .wp-block-button {
    min-width: unset;
    max-width: unset;
  }

  .wp-block-buttons.pid-link-cloud .wp-block-button__link {
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ===================================
   8. UTILITIES
   =================================== */

.accent,
.text-accent {
    color: var(--pid-pink);
}

.card,
.info-box,
.content-box {
    background: var(--pid-off-white);
    color: var(--pid-near-black);
}

/* ===================================
   LOGO CAROUSEL - HEIGHT OVERRIDE
   Nuclear option: Force carousel to auto height
   to override Kadence/Gutenberg dimension controls
   =================================== */

.pid-logo-carousel {
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
}

.pid-logo-carousel__track {
	height: auto !important;
	min-height: auto !important;
}

.pid-logo-carousel__set {
	height: auto !important;
	min-height: auto !important;
}
/* =====================================================
   FAB CONTACT WIDGET STYLES
   Floating Action Button with Call Back, Call Now & Message
   ===================================================== */

/* --- FAB Container --- */
.pid-fab-container {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9998 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
}

/* --- Main FAB Button --- */
.pid-fab-main {
    height: 56px !important;
    padding: 0 22px !important;
    border-radius: 28px !important;
    border: none !important;
    background: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0, 112, 209, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    position: relative !important;
    z-index: 2 !important;
    animation: pidFabPulse 2.5s ease-in-out 3 !important;
}

.pid-fab-main:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 6px 28px rgba(0, 112, 209, 0.55) !important;
    background: #005BB8 !important;
}

/* --- Icons in main button --- */
.pid-fab-main-icons {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: opacity 0.2s ease !important;
}

.pid-fab-main-icon--phone,
.pid-fab-main-icon--envelope {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.pid-fab-main-icon--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

.pid-fab-main-icon--envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 4l-10 8L2 4'/%3E%3C/svg%3E") !important;
}

/* --- Close X icon --- */
.pid-fab-main-close {
    display: none !important;
    width: 26px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.pid-fab-container.is-open .pid-fab-main-icons {
    display: none !important;
}

.pid-fab-container.is-open .pid-fab-main-close {
    display: block !important;
}

/* --- Pulse animation --- */
@keyframes pidFabPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 112, 209, 0.4); }
    50% { box-shadow: 0 4px 35px rgba(0, 112, 209, 0.7); }
}

/* --- Speed-dial Options --- */
.pid-fab-options {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease !important;
    pointer-events: none !important;
}

.pid-fab-container.is-open .pid-fab-options {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Staggered animation */
.pid-fab-container.is-open .pid-fab-option--callback { transition-delay: 0.05s !important; }
.pid-fab-container.is-open .pid-fab-option--call { transition-delay: 0.1s !important; }
.pid-fab-container.is-open .pid-fab-option--message { transition-delay: 0.15s !important; }

/* --- Option Buttons --- */
.pid-fab-option-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    border-radius: 28px !important;
    border: none !important;
    background: var(--pid-off-white) !important;
    color: var(--pid-navy) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.pid-fab-option-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2) !important;
}

/* --- Option Icons --- */
.pid-fab-icon {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.pid-fab-icon--callback {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002032' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94'/%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

.pid-fab-icon--phone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002032' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") !important;
}

.pid-fab-icon--envelope {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002032' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 4l-10 8L2 4'/%3E%3C/svg%3E") !important;
}

.pid-fab-label {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* --- Phone Number Reveal --- */
.pid-fab-phone-reveal {
    display: none !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    opacity: 0 !important;
    transform: translateY(5px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.pid-fab-phone-reveal.is-visible {
    display: flex !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.pid-fab-phone-number {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: var(--pid-navy) !important;
    color: var(--pid-off-white) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    border-radius: 28px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(0, 32, 50, 0.3) !important;
    transition: background 0.2s ease !important;
}

.pid-fab-phone-number:hover {
    background: var(--pid-dark-blue) !important;
    color: var(--pid-off-white) !important;
    text-decoration: none !important;
}

/* --- Device-specific: Mobile vs Desktop --- */
.pid-fab-call-desktop {
    display: none !important;
}

.pid-fab-call-mobile {
    display: flex !important;
}

@media (min-width: 769px) {
    .pid-fab-call-mobile {
        display: none !important;
    }
    .pid-fab-call-desktop {
        display: flex !important;
    }
}

/* --- Scrim overlay --- */
.pid-fab-scrim {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.15) !important;
    z-index: 9997 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.pid-fab-scrim.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- Modals --- */
.pid-modal {
    display: none !important;
    position: fixed !important;
    z-index: 9999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.pid-modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pid-modal-content {
    position: relative !important;
    max-width: 500px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: var(--pid-off-white) !important;
    border-radius: 12px !important;
    padding: 35px 25px 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.pid-modal-content--compact {
    max-width: 420px !important;
}

.pid-modal-close {
    position: absolute !important;
    right: 15px !important;
    top: 10px !important;
    font-size: 35px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    color: var(--pid-grey) !important;
    z-index: 10 !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.pid-modal-close:hover {
    color: var(--pid-near-black) !important;
}

.pid-modal-title {
    margin: 0 0 8px 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--pid-navy) !important;
}

.pid-modal-subtitle {
    margin: 0 0 16px 0 !important;
    font-size: 15px !important;
    color: var(--pid-grey) !important;
    line-height: 1.4 !important;
}

/* --- CF7 Form Styling inside modals --- */
.pid-cf7-container .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #E5E5E5 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: #FFFFFF !important;
    color: var(--pid-near-black) !important;
    box-sizing: border-box !important;
    margin-bottom: 10px !important;
}

.pid-cf7-container .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--pid-cyan) !important;
    outline: none !important;
}

.pid-cf7-container textarea.wpcf7-form-control {
    min-height: 120px !important;
    resize: vertical !important;
}

.pid-cf7-container .wpcf7-submit {
    background: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: 10px !important;
    transition: background 0.25s ease !important;
}

.pid-cf7-container .wpcf7-submit:hover {
    background: #005BB8 !important;
}

/* --- Form success state --- */
.pid-cf7-container .wpcf7-form.sent .wpcf7-form-control-wrap,
.pid-cf7-container .wpcf7-form.sent p:not(.pid-cf7-success-msg),
.pid-cf7-container .wpcf7-form.sent label,
.pid-cf7-container .wpcf7-form.sent .wpcf7-submit,
.pid-cf7-container .wpcf7-form.sent fieldset,
.pid-cf7-container .wpcf7-form.sent br {
    display: none !important;
}

.pid-cf7-container .wpcf7-form.sent .wpcf7-response-output {
    border: none !important;
    margin: 30px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--pid-navy) !important;
    line-height: 1.5 !important;
}

.pid-cf7-success-icon {
    display: none !important;
    margin: 20px auto 10px !important;
    width: 60px !important;
    height: 60px !important;
}

.pid-cf7-container .wpcf7-form.sent .pid-cf7-success-icon {
    display: block !important;
}

/* Hide FAB when modal is open */
body.pid-modal-open .pid-fab-container {
    display: none !important;
}

/* --- Mobile adjustments --- */
@media (max-width: 767px) {
    .pid-fab-container {
        bottom: 20px !important;
        right: 16px !important;
    }
    
    .pid-fab-main {
        height: 50px !important;
        padding: 0 18px !important;
    }
    
    .pid-fab-main-icon--phone,
    .pid-fab-main-icon--envelope,
    .pid-fab-main-close {
        width: 22px !important;
        height: 22px !important;
    }
    
    .pid-modal-content {
        width: 95% !important;
        padding: 30px 20px 20px !important;
    }
}

/* ===================================
   PID LIVE SEARCH - Complete Search Styles
   Covers: Floating icon, search panel, live dropdown,
   search results page
   Added: March 2026
   =================================== */

/* -----------------------------------------
   A. FLOATING SEARCH ICON
   Fixed position, top-right, below sticky header
   ----------------------------------------- */

.pid-fsearch {
    position: fixed !important;
    top: 90px !important;
    right: 24px !important;
    z-index: 9998 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

/* Toggle button (magnifying glass / close) */
.pid-fsearch-toggle {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--pid-navy) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 32, 50, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

.pid-fsearch-toggle:hover {
    background: var(--pid-dark-blue) !important;
    box-shadow: 0 6px 20px rgba(0, 32, 50, 0.5) !important;
    transform: scale(1.05) !important;
}

/* Search icon (magnifying glass SVG) */
.pid-fsearch-icon--search {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Close icon (X) */
.pid-fsearch-icon--close {
    display: none !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Swap icons when open */
.pid-fsearch--open .pid-fsearch-icon--search {
    display: none !important;
}

.pid-fsearch--open .pid-fsearch-icon--close {
    display: block !important;
}

/* When open, change button to accessible blue */
.pid-fsearch--open .pid-fsearch-toggle {
    background: var(--pid-cyan-accessible) !important;
    box-shadow: 0 4px 15px rgba(0, 112, 209, 0.4) !important;
}

/* -----------------------------------------
   B. SEARCH PANEL (expands from icon)
   ----------------------------------------- */

.pid-fsearch-panel {
    position: absolute !important;
    top: 56px !important;
    right: 0 !important;
    width: 400px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.95) !important;
    transform-origin: top right !important;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
    pointer-events: none !important;
}

.pid-fsearch--open .pid-fsearch-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.pid-fsearch-form {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pid-fsearch-input {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    color: var(--pid-near-black) !important;
    background: var(--pid-off-white) !important;
    border: 2px solid var(--pid-dark-blue) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important;
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out !important;
    box-sizing: border-box !important;
}

.pid-fsearch-input:focus {
    border-color: var(--pid-cyan) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(46, 193, 239, 0.2) !important;
    outline: none !important;
}

.pid-fsearch-input::placeholder {
    color: var(--pid-grey) !important;
    font-style: italic !important;
}

/* -----------------------------------------
   C. LIVE SEARCH DROPDOWN
   Appears below the input inside the panel
   ----------------------------------------- */

.pid-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--pid-off-white);
    border: 1px solid #e0e0e0;
    border-top: 3px solid var(--pid-cyan);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    max-height: 380px;
    overflow-y: auto;
    display: none;
}

.pid-search-dropdown--visible {
    display: block;
}

.pid-search-result {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s ease-in-out !important;
    cursor: pointer !important;
    background: var(--pid-off-white) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pid-search-result:hover,
.pid-search-result--active {
    background: var(--pid-light-bg) !important;
}

.pid-search-result:last-of-type {
    border-bottom: none !important;
}

.pid-search-result-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

.pid-search-result-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--pid-navy) !important;
    line-height: 1.3 !important;
    flex: 1 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pid-search-result:hover .pid-search-result-title,
.pid-search-result--active .pid-search-result-title {
    color: var(--pid-dark-blue) !important;
}

.pid-search-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: var(--pid-pale-blue) !important;
    color: var(--pid-dark-blue) !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
    display: inline-block !important;
}

.pid-search-result-excerpt {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--pid-grey) !important;
    display: block !important;
    overflow: hidden !important;
    max-height: 40px !important;
}

.pid-search-result-excerpt mark,
.pid-search-dropdown mark {
    background: rgba(46, 193, 239, 0.2) !important;
    color: var(--pid-navy) !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
}

.pid-search-no-results {
    padding: 20px 16px !important;
    text-align: center !important;
    color: var(--pid-grey) !important;
    font-size: 14px !important;
    font-style: italic !important;
}

.pid-search-view-all {
    display: block !important;
    padding: 12px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pid-light-blue) !important;
    text-decoration: none !important;
    border-top: 1px solid #e0e0e0 !important;
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out !important;
    background: var(--pid-off-white) !important;
    border-radius: 0 0 12px 12px !important;
}

.pid-search-view-all:hover {
    background: var(--pid-light-bg) !important;
    color: var(--pid-pink) !important;
}

.pid-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.pid-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.pid-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--pid-pale-blue);
    border-radius: 3px;
}

.pid-search-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--pid-cyan);
}

/* -----------------------------------------
   D. WORDPRESS SEARCH RESULTS PAGE
   ----------------------------------------- */

.search-results .entry-hero-container-inner,
.search-results .page-hero-section {
    background: var(--pid-light-bg) !important;
    padding: 30px 0 !important;
}

.search-results .search-title,
.search-results h1.page-title,
.search-results h1.entry-title {
    color: var(--pid-navy) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.search-results .no-results .page-header,
.search-results .nothing-found {
    padding: 20px !important;
    background: var(--pid-light-bg) !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.search-results .search-form input[type="search"],
.search-results .search-field {
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    background: #fff !important;
    color: var(--pid-near-black) !important;
}

.search-results .search-form input[type="search"]:focus,
.search-results .search-field:focus {
    border-color: var(--pid-cyan) !important;
    box-shadow: 0 0 0 3px rgba(46, 193, 239, 0.1) !important;
    outline: none !important;
}

/* Fix search form layout on results page */
.search-results .search-form,
.search-results form.search-form {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
    max-width: 680px !important;
}

.search-results .search-form input[type="search"],
.search-results .search-field {
    flex: 1 !important;
    min-width: 0 !important;
}

.search-results .search-form .search-submit,
.search-results .search-form button[type="submit"] {
    background: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: background 0.25s ease-in-out !important;
}

.search-results .search-form .search-submit:hover,
.search-results .search-form button[type="submit"]:hover {
    background: #005BB8 !important;
}

.search-results article.entry,
.search-results .entry.post,
.search-results .entry.page {
    background: var(--pid-off-white) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: box-shadow 0.25s ease-in-out !important;
}

.search-results article.entry:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.search-results article .entry-title,
.search-results article .entry-title a {
    color: var(--pid-navy) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}

.search-results article .entry-title a:hover {
    color: var(--pid-cyan) !important;
}

.search-results article .entry-summary,
.search-results article .entry-summary p,
.search-results article .entry-content,
.search-results article .entry-content p {
    color: var(--pid-grey) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.search-results article .entry-meta,
.search-results article .entry-meta a,
.search-results article .entry-meta span {
    color: var(--pid-grey) !important;
    font-size: 12px !important;
}

.search-results mark,
.search-results .search-highlight {
    background: rgba(46, 193, 239, 0.2) !important;
    color: var(--pid-navy) !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
}

/* -----------------------------------------
   E. RESPONSIVE
   ----------------------------------------- */

@media (max-width: 1024px) {
    .pid-fsearch {
        top: 80px !important;
        right: 20px !important;
    }

    .pid-fsearch-panel {
        width: 350px !important;
    }

    .pid-search-dropdown {
        max-height: 340px;
    }
}

@media (max-width: 767px) {
    .pid-fsearch {
        top: 70px !important;
        right: 16px !important;
    }

    .pid-fsearch-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .pid-fsearch-icon--search,
    .pid-fsearch-icon--close {
        width: 20px !important;
        height: 20px !important;
    }

    .pid-fsearch-panel {
        width: calc(100vw - 32px) !important;
        top: 50px !important;
    }

    .pid-fsearch-input {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }

    .pid-search-dropdown {
        max-height: 280px;
        border-radius: 0 0 8px 8px;
    }

    .pid-search-result {
        padding: 10px 12px !important;
    }

    .pid-search-result-title {
        font-size: 14px !important;
    }

    .pid-search-result-excerpt {
        font-size: 12px !important;
    }

    .pid-search-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    .search-results article.entry {
        padding: 16px !important;
        border-radius: 8px !important;
    }
}

/* -----------------------------------------
   F. ACCESSIBILITY
   ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pid-fsearch-panel,
    .pid-fsearch-toggle,
    .pid-search-result,
    .pid-search-view-all {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .pid-search-dropdown {
        border: 2px solid CanvasText;
    }

    .pid-search-result--active {
        outline: 2px solid Highlight;
    }

    .pid-search-result-excerpt mark,
    .pid-search-dropdown mark {
        background: Highlight;
        color: HighlightText;
    }
}

/* =====================================================
   OUTFIT FONT & HERO SECTION STYLES
   
   Adds:
   - Outfit (Google Fonts) as site-wide heading font,
     replacing Bree Serif for H1–H6
   - Hero H1 (.hero-title) — Variant 6 drop-shadow treatment
   - Hero intro paragraph (.hero-intro) — P1-E treatment
   - Hero image panel (.hero-section .hero-image) — lift shadow
   - Hero CTA buttons — cyan / pink / navy per button type
   
   Added: March 2026
   ===================================================== */

/* -----------------------------------------
   A. GLOBAL HEADING FONT — Outfit site-wide
   Overrides Kadence default (Bree Serif) on
   all headings everywhere. Sizing, weight,
   colour and line-height remain under
   Kadence Customizer control.
   ----------------------------------------- */

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-summary h1,
.entry-summary h2,
.entry-summary h3,
.entry-summary h4,
.entry-summary h5,
.entry-summary h6,
.widget-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    font-family: 'Outfit', sans-serif !important;
}

/* -----------------------------------------
   A2. GLOBAL HEADING SHADOW
   Same pale-grey outline + drop shadow as
   the hero H1 but scaled by heading level.
   H1 hero gets its own stronger version via
   .hero-title below — this covers everything
   else site-wide.
   
   Outline offsets reduce from 0.4px → 0.2px
   as headings get smaller. Drop shadow softens
   from 6px blur → 3px blur at H5/H6.
   ----------------------------------------- */

h1:not(.hero-title),
.entry-content h1:not(.hero-title) {
    text-shadow:
        -0.4px -0.4px 0 rgba(200, 200, 200, 0.55),
         0.4px -0.4px 0 rgba(200, 200, 200, 0.55),
        -0.4px  0.4px 0 rgba(200, 200, 200, 0.55),
         0.4px  0.4px 0 rgba(200, 200, 200, 0.55),
        1.5px 3px 6px rgba(0, 0, 0, 0.14);
}

h2,
.entry-content h2 {
    text-shadow:
        -0.35px -0.35px 0 rgba(200, 200, 200, 0.5),
         0.35px -0.35px 0 rgba(200, 200, 200, 0.5),
        -0.35px  0.35px 0 rgba(200, 200, 200, 0.5),
         0.35px  0.35px 0 rgba(200, 200, 200, 0.5),
        1px 2px 5px rgba(0, 0, 0, 0.12);
}

h3,
.entry-content h3 {
    text-shadow:
        -0.3px -0.3px 0 rgba(200, 200, 200, 0.45),
         0.3px -0.3px 0 rgba(200, 200, 200, 0.45),
        -0.3px  0.3px 0 rgba(200, 200, 200, 0.45),
         0.3px  0.3px 0 rgba(200, 200, 200, 0.45),
        1px 2px 4px rgba(0, 0, 0, 0.10);
}

h4,
.entry-content h4 {
    text-shadow:
        -0.25px -0.25px 0 rgba(200, 200, 200, 0.4),
         0.25px -0.25px 0 rgba(200, 200, 200, 0.4),
        -0.25px  0.25px 0 rgba(200, 200, 200, 0.4),
         0.25px  0.25px 0 rgba(200, 200, 200, 0.4),
        1px 1.5px 3px rgba(0, 0, 0, 0.09);
}

h5, h6,
.entry-content h5,
.entry-content h6 {
    text-shadow:
        -0.2px -0.2px 0 rgba(200, 200, 200, 0.35),
         0.2px -0.2px 0 rgba(200, 200, 200, 0.35),
        -0.2px  0.2px 0 rgba(200, 200, 200, 0.35),
         0.2px  0.2px 0 rgba(200, 200, 200, 0.35),
        0.5px 1px 3px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    h1, h2, h3, h4, h5, h6 {
        text-shadow: none;
    }
}

/* -----------------------------------------
   B. HERO H1 — .hero-title
   Variant 6: pale grey 4-direction outline
   halo + soft directional drop shadow.
   Responsive sizes at 1024px and 767px.
   ----------------------------------------- */

h1.hero-title,
.hero-section .hero-content h1.hero-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--pid-navy) !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 20px;
    text-shadow:
        -0.5px -0.5px 0 rgba(200, 200, 200, 0.6),
         0.5px -0.5px 0 rgba(200, 200, 200, 0.6),
        -0.5px  0.5px 0 rgba(200, 200, 200, 0.6),
         0.5px  0.5px 0 rgba(200, 200, 200, 0.6),
        2px 4px 8px rgba(0, 0, 0, 0.18);
}

@media (max-width: 1024px) {
    h1.hero-title,
    .hero-section .hero-content h1.hero-title {
        font-size: 2.3rem;
    }
}

@media (max-width: 767px) {
    h1.hero-title,
    .hero-section .hero-content h1.hero-title {
        font-size: 1.9rem;
        letter-spacing: -0.01em;
    }
}

/* -----------------------------------------
   C. HERO INTRO PARAGRAPH — .hero-intro
   P1-E: 1.1em, dark blue, bold 700.
   !important on font-size and color needed
   to beat .entry-content p rule above.
   ----------------------------------------- */

p.hero-intro,
.hero-section .hero-content p.hero-intro {
    font-size: 1.1em !important;
    line-height: 1.65;
    color: var(--pid-dark-blue) !important;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1em;
}

/* -----------------------------------------
   D. HERO IMAGE PANEL
   Lift shadow + rounded corners.
   overflow:hidden clips carousel cleanly.
   Extends existing .hero-section .hero-image
   rules (flex, max-width) set above.
   ----------------------------------------- */

.hero-section .hero-image {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    overflow: hidden;
}

/* -----------------------------------------
   E. HERO CTA BUTTONS
   Three colours for three button types.
   Hover: translateY(-2px) consistent with
   site-wide button behaviour in Section 7.
   !important beats global .wp-block-button__link
   rule set in Section 7 above.
   ----------------------------------------- */

/* Call Now — Accessible Blue (WCAG AA on light backgrounds) */
.pid-cta-call .wp-block-button__link {
    background: var(--pid-cyan-accessible) !important;
    border-color: var(--pid-cyan-accessible) !important;
    color: var(--pid-off-white) !important;
}

.pid-cta-call .wp-block-button__link:hover {
    background: #005BB8 !important;
    border-color: #005BB8 !important;
    box-shadow: 0 4px 12px rgba(0, 112, 209, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Get a Call Back — Pink */
.pid-cta-callback .wp-block-button__link {
    background: var(--pid-pink) !important;
    border-color: var(--pid-pink) !important;
    color: var(--pid-off-white) !important;
}

.pid-cta-callback .wp-block-button__link:hover {
    background: #b8003c !important;
    border-color: #b8003c !important;
    box-shadow: 0 4px 12px rgba(219, 0, 71, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Contact Us — Navy */
.pid-cta-contact .wp-block-button__link {
    background: var(--pid-navy) !important;
    border-color: var(--pid-navy) !important;
    color: var(--pid-off-white) !important;
}

.pid-cta-contact .wp-block-button__link:hover {
    background: var(--pid-dark-blue) !important;
    border-color: var(--pid-dark-blue) !important;
    box-shadow: 0 4px 12px rgba(0, 32, 50, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* -----------------------------------------
   E2. TABLES — transparent borders
   Removes default Kadence/WordPress core
   border colouring from all content tables.
   ----------------------------------------- */

.wp-block-table,
.wp-block-table table,
.wp-block-table thead,
.wp-block-table tbody,
.wp-block-table tfoot,
.wp-block-table tr,
.wp-block-table th,
.wp-block-table td,
.entry-content table,
.entry-content thead,
.entry-content tbody,
.entry-content tfoot,
.entry-content tr,
.entry-content th,
.entry-content td {
    border-color: transparent !important;
}

/* Subtle structural row divider — keeps tables readable.
   Remove this block entirely for zero visible borders. */
.wp-block-table td,
.wp-block-table th,
.entry-content td,
.entry-content th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* -----------------------------------------
   F. ACCESSIBILITY
   ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    h1.hero-title,
    .hero-section .hero-content h1.hero-title {
        text-shadow: none;
    }

    .pid-cta-call .wp-block-button__link:hover,
    .pid-cta-callback .wp-block-button__link:hover,
    .pid-cta-contact .wp-block-button__link:hover {
        transform: none !important;
    }
}


/* =====================================================
   RELATED POSTS (SIMILAR POSTS) — SPLIDE CAROUSEL
   Fixes:
   1. "Similar Posts" heading — drop shadow suppressed
      on dark background; heading made readable
   2. Prev/Next arrows repositioned outside the cards
   
   HTML context:
   .entry-related > .entry-related-inner >
     .entry-related-inner-content >
       h2.entry-related-title
       .entry-related-carousel.splide >
         .splide__arrows > .splide__arrow--prev/next
         .splide__track > .splide__list > .splide__slide
   
   Added: March 2026
   ===================================================== */

/* -----------------------------------------
   1. HEADING — suppress drop shadow on dark
   background and ensure readable colour.
   The global h2 shadow rule looks harsh
   against the dark section background.
   ----------------------------------------- */

.entry-related .entry-related-title,
.entry-related h2.entry-related-title {
    text-shadow: none !important;
    color: var(--pid-off-white) !important;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
}

/* -----------------------------------------
   2. ARROWS — move outside the card area
   Strategy:
   - Add horizontal padding to the carousel
     wrapper so cards don't run to the edges
   - Position arrows flush to the left/right
     edges of that padded container
   - This pushes them clear of the card faces
   ----------------------------------------- */

.entry-related-carousel.splide {
    position: relative;
    padding-left: 52px;
    padding-right: 52px;
}

/* Arrow base — consistent size and style */
.entry-related-carousel .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pid-dark-blue);
    border: 2px solid var(--pid-cyan);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease-in-out, border-color 0.25s ease-in-out;
    z-index: 10;
}

.entry-related-carousel .splide__arrow:hover {
    background: var(--pid-cyan);
    border-color: var(--pid-cyan);
}

/* Arrow SVG icon colour */
.entry-related-carousel .splide__arrow svg {
    fill: var(--pid-off-white);
    width: 16px;
    height: 16px;
}

.entry-related-carousel .splide__arrow:hover svg {
    fill: var(--pid-navy);
}

/* Position: flush to the padded edges */
.entry-related-carousel .splide__arrow--prev {
    left: 0;
}

.entry-related-carousel .splide__arrow--next {
    right: 0;
}

/* -----------------------------------------
   3. PAGINATION DOTS — match brand colours
   ----------------------------------------- */

.entry-related-carousel .splide__pagination__page {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    transition: background 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.entry-related-carousel .splide__pagination__page.is-active {
    background: var(--pid-cyan);
    transform: scale(1.3);
}

/* -----------------------------------------
   4. RESPONSIVE — reduce padding on mobile
   ----------------------------------------- */

@media (max-width: 767px) {
    .entry-related-carousel.splide {
        padding-left: 44px;
        padding-right: 44px;
    }

    .entry-related-carousel .splide__arrow {
        width: 34px;
        height: 34px;
    }

    .entry-related-carousel .splide__arrow svg {
        width: 13px;
        height: 13px;
    }
}

/* -----------------------------------------
   5. ACCESSIBILITY
   ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .entry-related-carousel .splide__arrow {
        transition: none;
    }
}