/* =============================================================================
   SECTIONS.CSS - Section-Based CSS Architecture
   =============================================================================
   Marketing page styling using 5 predefined section types.
   Each section sets local CSS variables that child elements inherit.
   ============================================================================= */

/* All colour variables are now served from /brand.css (cms.brand_scheme).
   No static fallbacks needed — if the DB is down, the site doesn't run.

   KNOWN LIMITATION — HARDCODED COLOURS — DO NOT UPDATE
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   This file is loaded on the PUBLIC marketing site which does NOT load
   shared_assets/css/default/palette.css (that stylesheet is admin-only).
   Therefore palette vars like --white-text, --clean-white, --shadow-subtle,
   --hover-lift, --success-message, --error-message etc. are UNDEFINED here.
   All colours in this file MUST be hardcoded hex/rgba values or --mkt-color-*
   / --section-* vars (which ARE available via brand.css and inline styles).
   Do NOT replace hardcoded values with palette CSS variables — they will
   silently fail and break the public site appearance. */

/* =============================================================================
   BASE SECTION - Shared layout for all sections
   ============================================================================= */

.section {
    padding: 3rem 0;
}

.section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* =============================================================================
   SECTION TYPE: HERO
   Purpose: Page banners, main headlines
   Visual: Brand background, white text, prominent
   ============================================================================= */

.section-hero {
    --section-bg: var(--mkt-color-9);
    --section-text: var(--mkt-color-5);
    --section-heading: var(--mkt-color-5);
    --section-btn-bg: transparent;
    --section-btn-text: var(--mkt-color-5);
    --section-btn-border: var(--mkt-color-5);
    --section-btn-hover-bg: var(--mkt-color-8);
    --section-btn-hover-text: var(--mkt-color-1);
    --section-card-bg: rgba(255, 255, 255, 0.15);
    --section-card-border: rgba(255, 255, 255, 0.3);
    --section-card-text: var(--mkt-color-5);
    --section-link: var(--mkt-color-5);
    --section-link-hover: var(--mkt-color-8);

    background-color: var(--section-bg);
    color: var(--section-text);
    text-align: center;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section-hero .container {
    width: 100%;
}

/* Hero height variants — fixed across all screen sizes */
.section-hero.hero-small { height: 180px; }
.section-hero.hero-large { height: 400px; }

/* Hero with background media (image/video/rotating) */
.section-hero-media {
    position: relative;
}

.section-hero-media .hero-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.section-hero-media video.hero-media-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-hero-media .hero-media-slideshow {
    position: absolute;
    inset: 0;
}

.section-hero-media .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.section-hero-media .hero-slide.active {
    opacity: 1;
}

.section-hero-media .hero-media-overlay {
    position: absolute;
    inset: 0;
    background: #000;
}

.section-hero-media .hero-media-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* =============================================================================
   SECTION TYPE: CONTENT
   Purpose: Main content, cards, text
   Visual: Light page background, dark text
   ============================================================================= */

.section-content {
    --section-bg: var(--mkt-color-6);
    --section-text: var(--mkt-color-2);
    --section-heading: var(--mkt-color-1);
    --section-btn-bg: var(--mkt-color-1);
    --section-btn-text: var(--mkt-color-5);
    --section-btn-border: var(--mkt-color-1);
    --section-btn-hover-bg: var(--mkt-color-12);
    --section-btn-hover-text: var(--mkt-color-5);
    --section-card-bg: var(--mkt-color-8);
    --section-card-border: var(--mkt-color-7);
    --section-card-text: var(--mkt-color-2);
    --section-link: var(--mkt-color-12);
    --section-link-hover: var(--mkt-color-1);

    background-color: var(--section-bg);
    color: var(--section-text);
}

/* =============================================================================
   SECTION TYPE: CTA
   Purpose: Call to action, booking prompts
   Visual: Brand background, white text, action-focused
   ============================================================================= */

.section-cta {
    --section-bg: var(--mkt-color-10);
    --section-text: var(--mkt-color-5);
    --section-heading: var(--mkt-color-5);
    --section-btn-bg: transparent;
    --section-btn-text: var(--mkt-color-5);
    --section-btn-border: var(--mkt-color-5);
    --section-btn-hover-bg: var(--mkt-color-8);
    --section-btn-hover-text: var(--mkt-color-1);
    --section-card-bg: rgba(255, 255, 255, 0.15);
    --section-card-border: rgba(255, 255, 255, 0.3);
    --section-card-text: var(--mkt-color-5);
    --section-link: var(--mkt-color-5);
    --section-link-hover: var(--mkt-color-8);

    background-color: var(--section-bg);
    color: var(--section-text);
}

/* =============================================================================
   SECTION TYPE: NEUTRAL
   Purpose: Secondary info, coverage areas
   Visual: Soft/muted background, subtle
   ============================================================================= */

.section-neutral {
    --section-bg: var(--mkt-color-7);
    --section-text: var(--mkt-color-2);
    --section-heading: var(--mkt-color-1);
    --section-btn-bg: var(--mkt-color-1);
    --section-btn-text: var(--mkt-color-5);
    --section-btn-border: var(--mkt-color-1);
    --section-btn-hover-bg: var(--mkt-color-12);
    --section-btn-hover-text: var(--mkt-color-5);
    --section-card-bg: var(--mkt-color-8);
    --section-card-border: var(--mkt-color-7);
    --section-card-text: var(--mkt-color-2);
    --section-link: var(--mkt-color-12);
    --section-link-hover: var(--mkt-color-1);

    background-color: var(--section-bg);
    color: var(--section-text);
}

/* =============================================================================
   SECTION TYPE: IMPORTANT
   Purpose: Promotions, alerts, special offers
   Visual: Accent/highlight colour, attention-grabbing
   ============================================================================= */

.section-important {
    --section-bg: var(--mkt-color-11);
    --section-text: var(--mkt-color-5);
    --section-heading: var(--mkt-color-5);
    --section-btn-bg: var(--mkt-color-1);
    --section-btn-text: var(--mkt-color-5);
    --section-btn-border: var(--mkt-color-1);
    --section-btn-hover-bg: var(--mkt-color-12);
    --section-btn-hover-text: var(--mkt-color-5);
    --section-card-bg: var(--mkt-color-8);
    --section-card-border: var(--mkt-color-11);
    --section-card-text: var(--mkt-color-5);
    --section-link: var(--mkt-color-5);
    --section-link-hover: var(--mkt-color-8);

    background-color: var(--section-bg);
    color: var(--section-text);
    text-align: center;
}

/* =============================================================================
   SECTION MEDIA BACKGROUNDS - Image/Video/Rotating on any section
   ============================================================================= */

.section-media {
    position: relative;
    overflow: hidden;
}

.section-media .media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.section-media video.media-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Section height variants for media backgrounds */
.section-media.media-height-small  { min-height: 200px; }
.section-media.media-height-medium { min-height: 350px; }
.section-media.media-height-large  { min-height: 500px; }
.section-media.media-height-xlarge { min-height: 700px; }

.section-media .media-slideshow {
    position: absolute;
    inset: 0;
}

.section-media .media-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.section-media .media-slide.active {
    opacity: 1;
}

.section-media .media-overlay {
    position: absolute;
    inset: 0;
    background: #000;
}

.section-media > .container {
    position: relative;
    z-index: 2;
}

/* =============================================================================
   VIDEO GROUP - Seamless video background across consecutive sections
   When consecutive CMS sections share the same background video, they are
   wrapped in a single .video-group container with one shared <video> element.
   ============================================================================= */

.video-group {
    position: relative;
    overflow: hidden;
}

.video-group-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.video-group-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 1;
}

/* Sections inside a video group: override CSS variables so every existing
   rule that reads var(--section-*) naturally picks up video-friendly colours.

   IMPORTANT: !important is REQUIRED on background and colour overrides below.
   The CMS block renderer injects inline style attributes on each <section>
   (e.g. style="--section-bg: var(--mkt-color-1); --section-heading: #ffffff")
   which set CSS custom properties that feed into .section-content rules like
   background-color: var(--section-bg). Without !important, the section's own
   background colour paints over the video, creating a tinted opaque layer
   that makes the white text appear translucent/washed-out.
   DO NOT remove these !important declarations during code review. */
.video-group > .section {
    position: relative;
    z-index: 2;
    /* !important: beats inline --section-bg that feeds .section-content background */
    background: transparent !important;
    background-color: transparent !important;

    /* Override the section colour variables — white text over video */
    --section-bg: transparent;
    --section-text: #fff;
    --section-heading: #fff;
    --section-btn-bg: transparent;
    --section-btn-text: #fff;
    --section-btn-border: #fff;
    --section-btn-hover-bg: #fff;
    --section-btn-hover-text: #333;
    --section-card-bg: rgba(255, 255, 255, 0.12);
    --section-card-border: rgba(255, 255, 255, 0.25);
    --section-card-text: #fff;
    --section-link: rgba(255, 255, 255, 0.9);
    --section-link-hover: #fff;

    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* !important: beats inline --section-heading fed into .section h* { color: var(--section-heading) } */
.video-group > .section h1,
.video-group > .section h2,
.video-group > .section h3,
.video-group > .section h4,
.video-group > .section h5,
.video-group > .section h6 {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* !important: beats inline --section-text fed into .section p { color: var(--section-text) } */
.video-group > .section p,
.video-group > .section li,
.video-group > .section .subtitle {
    color: #fff !important;
}

/* Buttons in video groups: outlined style for contrast */
.video-group > .section .btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-shadow: none;
}

.video-group > .section .btn:hover {
    background: #fff;
    color: #333;
}

/* Cards inside video groups: frosted glass effect */
.video-group > .section .card {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* !important: same reason — CMS inline vars override card text colours without it */
.video-group > .section .card-title {
    color: #fff !important;
    text-shadow: none;
}

.video-group > .section .card-body p {
    color: #fff !important;
    text-shadow: none;
}

/* Accessibility: strip video group for high-contrast / dyslexic themes.
   Hide the shared video and overlay, then revert sections to their normal
   accessible styling so high-contrast.css / dyslexic.css rules take over. */
body[data-theme="dyslexic"] .video-group-bg,
body[data-theme="highcontrast"] .video-group-bg,
body[data-theme="dyslexic"] .video-group-overlay,
body[data-theme="highcontrast"] .video-group-overlay {
    display: none !important;
}

body[data-theme="dyslexic"] .video-group > .section,
body[data-theme="highcontrast"] .video-group > .section {
    /* Undo video-group overrides — let accessibility theme rules control colours */
    --section-bg: revert;
    --section-text: revert;
    --section-heading: revert;
    --section-btn-bg: revert;
    --section-btn-text: revert;
    --section-btn-border: revert;
    --section-btn-hover-bg: revert;
    --section-btn-hover-text: revert;
    --section-card-bg: revert;
    --section-card-border: revert;
    --section-card-text: revert;
    --section-link: revert;
    --section-link-hover: revert;
    background: var(--background-color, #fff) !important;
    background-color: var(--background-color, #fff) !important;
    color: var(--body-text, #000) !important;
    text-shadow: none !important;
}

body[data-theme="dyslexic"] .video-group > .section h1,
body[data-theme="dyslexic"] .video-group > .section h2,
body[data-theme="dyslexic"] .video-group > .section h3,
body[data-theme="dyslexic"] .video-group > .section h4,
body[data-theme="dyslexic"] .video-group > .section h5,
body[data-theme="dyslexic"] .video-group > .section h6,
body[data-theme="highcontrast"] .video-group > .section h1,
body[data-theme="highcontrast"] .video-group > .section h2,
body[data-theme="highcontrast"] .video-group > .section h3,
body[data-theme="highcontrast"] .video-group > .section h4,
body[data-theme="highcontrast"] .video-group > .section h5,
body[data-theme="highcontrast"] .video-group > .section h6 {
    color: var(--heading-text, #000) !important;
    text-shadow: none !important;
}

body[data-theme="dyslexic"] .video-group > .section p,
body[data-theme="dyslexic"] .video-group > .section li,
body[data-theme="highcontrast"] .video-group > .section p,
body[data-theme="highcontrast"] .video-group > .section li {
    color: var(--body-text, #000) !important;
}

body[data-theme="dyslexic"] .video-group > .section .btn,
body[data-theme="highcontrast"] .video-group > .section .btn {
    background: var(--button-background-color) !important;
    color: var(--button-text-color) !important;
    border-color: var(--button-background-color, #000) !important;
    text-shadow: none !important;
}

body[data-theme="dyslexic"] .video-group > .section .card,
body[data-theme="highcontrast"] .video-group > .section .card {
    background: var(--card-background, #fff) !important;
    border-color: var(--body-text, #000) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body[data-theme="dyslexic"] .video-group > .section .card-title,
body[data-theme="highcontrast"] .video-group > .section .card-title {
    color: var(--heading-text, #000) !important;
}

body[data-theme="dyslexic"] .video-group > .section .card-body p,
body[data-theme="highcontrast"] .video-group > .section .card-body p {
    color: var(--body-text, #000) !important;
}

/* =============================================================================
   SPACER - Full-width spacing elements
   ============================================================================= */

.cms-spacer-small { height: 1.5rem; }
.cms-spacer-medium { height: 3rem; }
.cms-spacer-large { height: 5rem; }

.cms-spacer { display: flex; align-items: center; }
.cms-spacer hr { width: 100%; border-width: 1px 0 0 0; }

/* =============================================================================
   TYPOGRAPHY - Uses section variables
   ============================================================================= */

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
    color: var(--section-heading);
    margin-bottom: 1rem;
}

.section h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.section h2 {
    font-size: 2rem;
    font-weight: 600;
}

.section h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.section p {
    color: var(--section-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.section .subtitle {
    font-size: 1.25rem;
}

.section a {
    color: var(--section-link);
    text-decoration: none;
}

.section a:hover {
    color: var(--section-link-hover);
    text-decoration: underline;
}

/* =============================================================================
   CARDS - Uses section variables
   ============================================================================= */

.section .card {
    background: var(--section-card-bg);
    border: 1px solid var(--section-card-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.section .card-title {
    color: var(--card-heading-override, var(--section-heading));
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

/* Lucide icon styling for cards */
.section .card-title .lucide-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--button-background-color);
    flex-shrink: 0;
}

/* Custom SVG icon styling */
.section .card-title .custom-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--card-background, #fff);
}

.section .card-title .custom-svg-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.section .card-body {
    color: var(--card-text-override, var(--section-card-text));
}

.section .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* =============================================================================
   FAQ - Per-item colour overrides mirror cards
   ============================================================================= */

.section .cms-faq {
    margin-top: 1.5rem;
}

.section .cms-faq-item {
    border: 1px solid var(--table-border, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--soft-background, #f5f5f5);
}

.section .cms-faq-item > summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--faq-question-override, var(--section-heading));
}

.section .cms-faq-item > summary::-webkit-details-marker {
    display: none;
}

.section .cms-faq-arrow {
    transition: transform 0.2s;
}

.section .cms-faq-item[open] .cms-faq-arrow {
    transform: rotate(180deg);
}

.section .cms-faq-answer {
    padding: 1rem 1.25rem;
    line-height: 1.6;
    color: var(--faq-answer-override, var(--section-text));
}

/* =============================================================================
   BUTTONS - Uses section variables
   ============================================================================= */

.section .btn,
.section .cta-button {
    background: var(--btn-bg-override, var(--section-btn-bg));
    color: var(--btn-text-override, var(--section-btn-text));
    border: 2px solid var(--section-btn-border, var(--btn-bg-override, var(--section-btn-bg)));
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.section .btn:hover,
.section .cta-button:hover {
    background: var(--btn-hover-bg-override, var(--section-btn-hover-bg));
    color: var(--btn-hover-text-override, var(--section-btn-hover-text, var(--section-btn-text)));
    text-decoration: none;
}

.section .btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* =============================================================================
   FORMS - Uses section variables
   ============================================================================= */

.section .form-group {
    margin-bottom: 1rem;
}

.section .form-label {
    display: block;
    color: var(--section-text);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.section .form-control {
    width: 100%;
    padding: 0.75rem;
    background: var(--section-card-bg);
    border: 1px solid var(--section-card-border);
    border-radius: 4px;
    color: var(--section-text);
    font-size: 1rem;
}

.section .form-control:focus {
    outline: none;
    border-color: var(--button-background-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* =============================================================================
   LISTS - Uses section variables
   ============================================================================= */

.section ul,
.section ol {
    color: var(--section-text);
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.section li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.section .text-center {
    text-align: center;
}

.section .text-muted {
    color: var(--secondary-text);
}

.section .mt-1 { margin-top: 0.5rem; }
.section .mt-2 { margin-top: 1rem; }
.section .mt-3 { margin-top: 1.5rem; }
.section .mt-4 { margin-top: 2rem; }

.section .mb-1 { margin-bottom: 0.5rem; }
.section .mb-2 { margin-bottom: 1rem; }
.section .mb-3 { margin-bottom: 1.5rem; }
.section .mb-4 { margin-bottom: 2rem; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* =============================================================================
   ABOUT/TEAM PROFILE LAYOUT
   ============================================================================= */

.section .about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.section .about-text {
    line-height: 1.7;
}

.section .about-text h2 {
    color: var(--section-heading);
    margin-bottom: 1.5rem;
}

.section .about-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.section .about-image img {
    border-radius: 8px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {
    .section .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .section .about-image {
        order: -1; /* Put image first on mobile */
    }
}

@media (max-width: 768px) {
    .section {
        padding: 2rem 0;
    }

    .section h1 {
        font-size: 2rem;
    }

    .section h2 {
        font-size: 1.5rem;
    }

    .section .card-grid {
        grid-template-columns: 1fr;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .section .container {
        max-width: 1400px;
    }

    .section {
        padding: 4rem 0;
    }

    .section h1 {
        font-size: 3rem;
    }

    .section h2 {
        font-size: 2.25rem;
    }

    .section .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
    }

    .section .about-content {
        gap: 4rem;
    }
}

/* Print */
@media print {
    .section-hero,
    .section-cta {
        height: auto;
        min-height: 0;
    }

    .section-hero-media .hero-media-bg,
    .section-hero-media .hero-media-slideshow,
    .section-media .media-bg,
    .section-media .media-slideshow,
    .video-group-bg,
    .video-group-overlay {
        display: none !important;
    }

    .section .btn,
    .section .cta-button {
        display: none;
    }

    .section {
        background: #fff !important;
        color: #000 !important;
        padding: 1.5rem 0;
    }

    .section h1,
    .section h2,
    .section h3,
    .section p {
        color: #000 !important;
    }

    .section .card {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/* =============================================================================
   CONTACT REQUEST FORM
   ============================================================================= */

.cms-contact-request .contact-form-wrapper {
    max-width: 500px;
    margin: 0 auto;
    background: var(--section-card-bg);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cms-contact-request .contact-subtitle {
    color: var(--secondary-text);
    margin-bottom: 1.5rem;
    text-align: center;
}

.cms-contact-request h2 {
    text-align: center;
    margin-bottom: 0.5rem;
}

.cms-contact-request .form-group {
    margin-bottom: 1.25rem;
}

.cms-contact-request .form-control {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #333;
}

.cms-contact-request .form-control::placeholder {
    color: #888;
}

.cms-contact-request .form-control:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--button-background-color, #4a7c59);
    box-shadow: 0 0 0 2px rgba(74, 125, 89, 0.2);
}

.cms-contact-request textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.cms-contact-request button[type="submit"] {
    width: 100%;
    margin-top: 1rem;
}

.cms-contact-request .contact-form-message {
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-align: center;
}

.cms-contact-request .contact-form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.cms-contact-request .contact-form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* =============================================================================
   ACCESSIBILITY THEMES — strip background images for non-default themes
   ============================================================================= */
body[data-theme="dyslexic"] .section-media,
body[data-theme="highcontrast"] .section-media {
    background-image: none !important;
}

body[data-theme="dyslexic"] .section-media .media-bg,
body[data-theme="highcontrast"] .section-media .media-bg,
body[data-theme="dyslexic"] .section-media .media-slideshow,
body[data-theme="highcontrast"] .section-media .media-slideshow {
    display: none !important;
}