/*
 * .hero-carousel-section — Outer wrapper for the full-width hero carousel.
 * Fixed viewport-relative height (82vh) with a minimum floor prevents the
 * section from collapsing on short screens; overflow:hidden clips slides
 * that are off-stage so only one is visible at a time.
 */
.hero-carousel-section {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    overflow: hidden;
}

/*
 * .hero-swiper — The Swiper.js root element that fills its carousel wrapper.
 * Both dimensions are set to 100% so the library can calculate slide
 * positions relative to the full container size.
 */
.hero-swiper {
    width: 100%;
    height: 100%;
}

/*
 * .swiper-slide — Individual slide within the hero carousel.
 * Flexbox with centred alignment acts as a fallback layout for any
 * slide content that is not absolutely positioned.
 */
.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * .hero-slide-link — Anchor tag that wraps the entire slide area.
 * Displayed as a block that stretches to cover the full slide so the
 * whole hero image is clickable; text-decoration is removed to avoid
 * an underline on the invisible link text.
 */
.hero-slide-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/*
 * .hero-image-wrapper — Absolutely-positioned container that pins the
 * background image to all four corners of its slide. z-index:1 keeps the
 * image behind the overlay and text layers that are stacked above it.
 */
.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/*
 * .hero-image-wrapper picture, .hero-image-wrapper img — Responsive image
 * elements inside the wrapper. object-fit:cover fills the frame without
 * distortion; object-position:center top keeps subjects near the top of
 * the image in frame when the aspect ratio is cropped.
 */
.hero-image-wrapper picture,
.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/*
 * .hero-overlay — Transparent dark scrim layer sitting above the image.
 * Using background:none by default allows individual slides to set their
 * own gradient or colour via inline styles; z-index:2 places it between
 * the photo and the text so it can soften contrast without JS.
 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 2;
}

/*
 * .hero-content — Text block anchored to the left-centre of each slide.
 * Vertical centring uses top:50% + translateY(-50%) instead of flexbox so
 * it works correctly inside the absolutely-positioned slide. Width:50%
 * leaves the right half of the hero free and prevents long headings from
 * stretching to the edge of the viewport.
 */
.hero-content {
    position: absolute;
    z-index: 3;
    text-align: left;
    color: #ffffff;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    box-sizing: border-box;
}

/*
 * .hero-heading — Primary headline displayed over each carousel slide.
 * A large bold font weight combined with a subtle text-shadow creates
 * legibility against varied photography backgrounds.
 */
.hero-heading {
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/*
 * .hero-subtext — Supporting descriptor line beneath the main heading.
 * Lighter font weight and a smaller size subordinate it visually; a
 * softer text-shadow ensures it remains readable on bright images.
 */
.hero-subtext {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/*
 * .hero-swiper .swiper-button-prev / .swiper-button-next — Previous and
 * next arrow controls for the hero carousel. The white colour and lack of
 * background keep the arrows minimal so they do not compete with the slide
 * imagery behind them.
 */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
    color: #ffffff;
    background: none;
}

/*
 * ::after pseudo-elements for the carousel arrow buttons — Swiper renders
 * its arrow icons via these pseudo-elements. The large font-weight and
 * text-shadow make the chevrons bold and readable over dark and light
 * slide backgrounds alike.
 */
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
    font-size: 1.75rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/*
 * .hero-swiper .swiper-pagination — Dot row at the bottom of the carousel.
 * bottom:20px lifts the dots off the very edge so they do not overlap with
 * any caption text positioned near the lower portion of the slide.
 */
.hero-swiper .swiper-pagination {
    bottom: 20px;
}

/*
 * .hero-swiper .swiper-pagination-bullet — Individual inactive pagination
 * dot. Transparent fill with a white border gives a hollow ring appearance
 * that is visible on both light and dark slide backgrounds.
 */
.hero-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #ffffff;
    opacity: 1;
}

/*
 * .hero-swiper .swiper-pagination-bullet-active — Currently active
 * pagination dot. Filling with solid white distinguishes the active slide
 * index from the rest of the hollow ring dots.
 */
.hero-swiper .swiper-pagination-bullet-active {
    background: #ffffff;
}

/*
 * Mobile breakpoint — adjusts the hero carousel section for screens
 * up to 768px wide. Switches the section height from viewport-relative
 * to auto so it can shrink with the content, reduces heading sizes so
 * text fits without wrapping awkwardly, and scales down arrow buttons
 * to remain tap-friendly without dominating the smaller screen.
 */
@media (max-width: 768px) {
    .hero-carousel-section {
        height: 82vh;
        min-height: 560px;
    }

    .hero-content {
        padding: 0 20px;
    }

    .hero-heading {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .hero-subtext {
        font-size: 1.1rem;
    }

    .hero-swiper .swiper-button-prev,
    .hero-swiper .swiper-button-next {
        width: 36px;
        height: 36px;
    }

    .hero-swiper .swiper-button-prev::after,
    .hero-swiper .swiper-button-next::after {
        font-size: 1rem;
    }
}

/*
 * .section-what-we-support — Full-width section presenting the categories
 * of community initiatives that BBOS supports. White background and generous
 * vertical padding create clear separation from adjacent sections.
 */
.section-what-we-support {
    padding: 80px 24px;
    background: #ffffff;
}

/*
 * .section-how-we-give-back — Full-width section describing BBOS giving-back
 * programs. The light blue-grey background (#f5f7fb) visually distinguishes
 * this section from the white sections that flank it on the page.
 */
.section-how-we-give-back {
    padding: 80px 24px;
    background: #f5f7fb;
}

/*
 * Small-screen breakpoint — reduces vertical padding of the How We Give
 * Back section on screens up to 600px so the section takes up less
 * vertical space on compact mobile viewports.
 */
@media (max-width: 600px) {
    .section-how-we-give-back {
        padding: 60px 20px;
    }
}

/*
 * .section-featured-highlights — Outer section wrapper for the Community
 * Featured Highlights grid. White background and uniform padding keep this
 * section consistent with the What We Support section above it.
 */
.section-featured-highlights {
    padding: 80px 24px;
    background: #ffffff;
}

/*
 * .cfh-container — Centred content container for the Featured Highlights
 * section. max-width caps the layout at 1200px so lines do not become
 * uncomfortably long on ultra-wide monitors.
 */
.cfh-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .cfh-grid — Two-column CSS Grid that lays out the community highlight
 * cards in a 2×2 arrangement. The 28px gap provides breathing room
 * between cards without wasting too much space.
 */
.cfh-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/*
 * .cfh-card — Individual highlight card combining a light border, rounded
 * corners, and a subtle drop shadow to lift it off the white page background.
 * flex-direction:column ensures the image stays pinned to the top while the
 * content area grows to fill remaining height.
 */
.cfh-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

/*
 * .cfh-card:hover — Hover state for a community highlight card.
 * A blue-tinted shadow and a slight upward translate give tactile
 * feedback that the card is interactive.
 */
.cfh-card:hover {
    box-shadow: 0 6px 20px rgba(0, 70, 190, 0.1);
    transform: translateY(-2px);
}

/*
 * .cfh-card-image — Fixed-ratio image container at the top of each card.
 * aspect-ratio:16/9 locks the image area to a landscape format regardless
 * of the actual image dimensions; flex-shrink:0 prevents the image from
 * being compressed when card content is tall.
 */
.cfh-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e5e7eb;
    flex-shrink: 0;
}

/*
 * .cfh-card-image img — Photograph inside the card image container.
 * object-fit:cover fills the 16:9 frame without distortion; the CSS
 * transition on transform enables the zoom-in hover effect below.
 */
.cfh-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

/*
 * .cfh-card:hover .cfh-card-image img — Zoom effect applied to the card
 * image when the user hovers over the card. scale(1.03) is subtle enough
 * to feel polished without causing jarring motion.
 */
.cfh-card:hover .cfh-card-image img {
    transform: scale(1.03);
}

/*
 * .cfh-card-image-placeholder — Fallback coloured block shown when no
 * image is available for a highlight card. The diagonal gradient gives
 * the empty state a finished look rather than a flat grey rectangle.
 */
.cfh-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #dce8fb 0%, #c5d8f8 100%);
}

/*
 * .cfh-card-content — Text body area below the image in each highlight card.
 * flex:1 allows this area to grow so that cards in the same row share equal
 * total height; gap:10px spaces the title, location, and blurb apart evenly.
 */
.cfh-card-content {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/*
 * .cfh-card-title — Headline text for a community highlight card.
 * Bold weight and near-black colour give it clear hierarchy over the
 * supporting location and blurb text below it.
 */
.cfh-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

/*
 * .cfh-card-location — Uppercase location badge beneath the card title.
 * Flexbox aligns the pin icon and the text on the same baseline; the BBOS
 * brand blue and letter-spacing create the appearance of a small label tag.
 */
.cfh-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.825rem;
    font-weight: 600;
    color: #1C48AA;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
 * .cfh-card-location svg — SVG pin/map icon inside the location badge.
 * flex-shrink:0 prevents the icon from being squeezed when the location
 * string is long; stroke colour matches the surrounding text.
 */
.cfh-card-location svg {
    stroke: #1C48AA;
    flex-shrink: 0;
}

/*
 * .cfh-card-blurb — Short descriptive paragraph at the bottom of the card.
 * Muted grey and a relaxed line-height keep this supporting copy from
 * competing visually with the bold title above it.
 */
.cfh-card-blurb {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.65;
}

/*
 * Tablet breakpoint — collapses the two-column highlight grid to a single
 * column on screens up to 768px so cards are not too narrow to read
 * comfortably on mid-size tablets.
 */
@media (max-width: 768px) {
    .cfh-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/*
 * Small-screen breakpoint — reduces section padding and card content padding
 * for the Featured Highlights section on screens up to 600px, so cards use
 * the available screen width more efficiently on compact phones.
 */
@media (max-width: 600px) {
    .section-featured-highlights {
        padding: 60px 20px;
    }

    .cfh-card-content {
        padding: 20px 20px 24px;
    }
}

/*
 * .section-proud-partners — Full-width section showcasing partner organisation
 * logos. White background and generous padding keep the logo display clean
 * and airy, giving each logo room to breathe.
 */
.section-proud-partners {
    padding: 80px 24px;
    background: #ffffff;
}

/*
 * .pp-container — Centred layout container for the Proud Partners section.
 * max-width:1200px aligns it with the other main content containers on
 * the page for a consistent column width.
 */
.pp-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .pp-logo-row — Flex row that displays partner logos in a wrapping, evenly
 * spaced arrangement. space-evenly distribution fills the row symmetrically
 * whether there are three or eight logos present.
 */
.pp-logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 40px 48px;
    margin-top: 16px;
}

/*
 * .pp-logo-item — Individual flex child wrapping a single partner logo.
 * Centred flex alignment ensures logos of different natural sizes stay
 * optically aligned on the same horizontal baseline.
 */
.pp-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * .pp-logo-item img — Partner logo image constrained to a consistent
 * maximum display size. object-fit:contain preserves aspect ratios so
 * tall and wide logos both fit within the same bounding box; the opacity
 * transition enables the hover fade-out effect.
 */
.pp-logo-item img {
    max-height: 80px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    transition: opacity 0.2s ease;
}

/*
 * .pp-logo-item a — Anchor wrapper around a linked partner logo.
 * flex display ensures the anchor shrinks tightly around the image
 * rather than stretching to the full width of its parent.
 */
.pp-logo-item a {
    display: flex;
    align-items: center;
}

/*
 * .pp-logo-item a:hover img — Hover state for a linked partner logo.
 * Reducing opacity to 0.75 gives subtle interactive feedback while
 * keeping the logo visible and recognisable.
 */
.pp-logo-item a:hover img {
    opacity: 0.75;
}

/*
 * Tablet breakpoint — tightens the gap between partner logos and
 * reduces their maximum height on screens up to 768px so the row
 * fits comfortably on mid-size tablet widths.
 */
@media (max-width: 768px) {
    .pp-logo-row {
        gap: 32px 36px;
    }

    .pp-logo-item img {
        max-height: 60px;
    }
}

/*
 * Small-screen breakpoint — reduces section padding and switches the
 * logo row to centred justification on screens up to 480px so logos
 * stack neatly in the centre of narrow phone displays.
 */
@media (max-width: 480px) {
    .section-proud-partners {
        padding: 60px 20px;
    }

    .pp-logo-row {
        justify-content: center;
        gap: 28px 32px;
    }
}

/*
 * .section-request-support — Full-width section containing the community
 * support request form. The light blue-grey background visually groups
 * the form card with the page while separating it from white sections.
 */
.section-request-support {
    padding: 80px 24px;
    background: #f5f7fb;
}

/*
 * .rcs-container — Centred, narrower content container for the support
 * request section. max-width:1000px keeps the form at a comfortable
 * reading width without stretching across the full 1200px grid.
 */
.rcs-container {
    max-width: 1000px;
    margin: 0 auto;
}

/*
 * .rcs-success, .rcs-error — Shared base styles for the form submission
 * feedback banners. Flex layout with a gap allows an icon on the left
 * to sit alongside multi-line message text without overlapping.
 */
.rcs-success,
.rcs-error {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 32px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/*
 * .rcs-success — Green success banner shown after a form submission is
 * accepted. Background, border, and text colour all use a green palette
 * to give clear positive confirmation to the user.
 */
.rcs-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

/*
 * .rcs-success svg — Checkmark icon inside the success banner.
 * flex-shrink:0 prevents the icon from being squashed when the message
 * text is long; margin-top nudges it into optical alignment with the
 * first line of text.
 */
.rcs-success svg {
    stroke: #059669;
    flex-shrink: 0;
    margin-top: 2px;
}

/*
 * .rcs-error — Red error banner displayed when form submission fails.
 * Background, border, and text colour use a red palette so the error
 * state is immediately distinguishable from the success state.
 */
.rcs-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/*
 * .rcs-error a — Inline link inside an error message, for example a
 * "try again" or contact link. Bold weight and matching dark-red colour
 * make it readable while keeping it visually part of the error banner.
 */
.rcs-error a {
    color: #991b1b;
    font-weight: 600;
}

/*
 * .rcs-form-wrap — White card that contains the support request form fields.
 * A rounded border, subtle shadow, and generous internal padding lift the
 * form off the light-grey section background and frame it as a distinct
 * interactive surface.
 */
.rcs-form-wrap {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/*
 * .rcs-helper-text — Informational callout box above the form fields.
 * The light blue-tinted background and rounded corners distinguish it
 * from the regular form fields; it sets user expectations before they
 * begin filling in the form.
 */
.rcs-helper-text {
    background: #f0f4fd;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 32px;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.7;
}

/*
 * .rcs-helper-text p — Paragraph elements inside the helper callout.
 * A small bottom margin separates consecutive lines of advice while the
 * last-child rule removes the trailing gap to prevent uneven padding.
 */
.rcs-helper-text p {
    margin: 0 0 4px;
}

/*
 * .rcs-helper-text p:last-child — Removes bottom margin from the final
 * paragraph inside the helper text box so the box padding alone controls
 * the spacing between the text and the box edge.
 */
.rcs-helper-text p:last-child {
    margin-bottom: 0;
}

/*
 * .rcs-columns — Two-column grid that separates the form into a
 * "Who We Support" checklist column on the left and the contact/detail
 * fields on the right. A 40px column gap keeps both columns readable
 * without them feeling cramped.
 */
.rcs-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    margin-bottom: 28px;
}

/*
 * .rcs-col-title — Section heading displayed at the top of each form
 * column. Bold centred text makes column purposes clear to users scanning
 * the form before they start typing.
 */
.rcs-col-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 20px;
    text-align: center;
}

/*
 * .rcs-col--left — Left form column containing the support-type checklist.
 * The tinted blue-grey background and rounded corners give this column a
 * card-within-a-card appearance, visually grouping the checkboxes together.
 */
.rcs-col--left {
    background: #edf2fb;
    border-radius: 12px;
    padding: 28px 24px;
}

/*
 * .rcs-col--right — Right form column for contact and request detail fields.
 * Minimal top padding aligns its first label optically with the heading in
 * the left column; no background keeps this column clean and open.
 */
.rcs-col--right {
    padding: 4px 0 0;
}

/*
 * .rcs-field — Wrapper for a single label-input pair within the form.
 * flex-direction:column stacks the label directly above its input;
 * the 18px bottom margin separates fields from one another vertically.
 */
.rcs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

/*
 * .rcs-field:last-child — Removes the bottom margin from the final field
 * in a column or container so no extra space appears before the next
 * section or the form's bottom padding.
 */
.rcs-field:last-child {
    margin-bottom: 0;
}

/*
 * .rcs-field label — Text label above each form input. Medium weight
 * and a small font size give it a subdued but clearly readable style
 * that does not compete with the input content below it.
 */
.rcs-field label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
}

/*
 * .rcs-req — Required field asterisk indicator appended to field labels.
 * Red colour follows universal convention for marking mandatory inputs
 * so users know at a glance which fields must be filled.
 */
.rcs-req {
    color: #dc2626;
}

/*
 * .rcs-field input / textarea — Shared styles for all text-type inputs
 * and the textarea in the support request form. A consistent border,
 * border-radius, and padding create visual uniformity across input types;
 * the transition smoothly animates the focus ring colour change.
 */
.rcs-field input[type="text"],
.rcs-field input[type="email"],
.rcs-field input[type="tel"],
.rcs-field input[type="url"],
.rcs-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

/*
 * .rcs-field input:focus, .rcs-field textarea:focus — Focus state for
 * form inputs. Replacing the browser default outline with a brand-blue
 * border and a soft outer glow makes the active field clearly visible
 * while staying on-brand.
 */
.rcs-field input:focus,
.rcs-field textarea:focus {
    outline: none;
    border-color: #1C48AA;
    box-shadow: 0 0 0 3px rgba(0, 70, 190, 0.12);
}

/*
 * .rcs-field textarea — Additional rules specific to the textarea input.
 * resize:vertical lets users expand the box for longer descriptions while
 * preventing horizontal resizing that could break the two-column layout.
 */
.rcs-field textarea {
    resize: vertical;
    min-height: 100px;
}

/*
 * .rcs-field-row — Two-column inline row used to place the email and phone
 * inputs side by side. The 12px gap is tighter than the column gap because
 * both fields belong to the same logical group.
 */
.rcs-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

/*
 * .rcs-field-row .rcs-field — Removes the bottom margin from fields nested
 * inside a field row so the row's own margin controls the spacing below
 * the paired inputs rather than each field adding its own gap.
 */
.rcs-field-row .rcs-field {
    margin-bottom: 0;
}

/*
 * .rcs-checkboxes — Grid container for the support-type checkbox options
 * in the left column. Two equal columns allow more options to fit in the
 * space without the list becoming excessively long.
 */
.rcs-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
}

/*
 * .rcs-checkboxes--error — Error state modifier for the checkbox group.
 * A red border and faint red glow mirror the individual input focus
 * ring pattern to signal that a selection is required.
 */
.rcs-checkboxes--error {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/*
 * .rcs-checkbox — Individual checkbox label row inside the checkbox grid.
 * Flex layout aligns the native checkbox element with its text label;
 * cursor:pointer extends the clickable area feel to the label text.
 */
.rcs-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

/*
 * .rcs-checkbox input[type="checkbox"] — Native checkbox element styled
 * to match the brand. accent-color tints the check mark and box border
 * with BBOS blue; fixed dimensions and flex-shrink:0 prevent the box
 * from resizing or wrapping with the label text.
 */
.rcs-checkbox input[type="checkbox"] {
    accent-color: #1C48AA;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

/*
 * .rcs-upload-zone — Dashed-border drag-and-drop file upload area.
 * Flex column layout centres the icon, hint text, and button vertically;
 * the dashed border and light background signal that this is a
 * droppable/interactive region to the user.
 */
.rcs-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    text-align: center;
    background: #fafafa;
    transition: border-color 0.15s ease;
}

/*
 * .rcs-upload-zone:hover — Hover state for the file upload drop zone.
 * Changing the dashed border to brand blue provides clear feedback that
 * the zone is active and ready to accept a file drop.
 */
.rcs-upload-zone:hover {
    border-color: #1C48AA;
}

/*
 * .rcs-upload-zone svg — Upload icon inside the drop zone.
 * A grey stroke colour keeps the icon secondary to the hint text
 * and the upload button so it does not draw too much attention.
 */
.rcs-upload-zone svg {
    stroke: #9ca3af;
}

/*
 * .rcs-upload-hint — Small supporting text beneath the icon in the upload
 * zone. Muted grey and a small font size give it the visual weight of a
 * placeholder or caption rather than an instruction.
 */
.rcs-upload-hint {
    font-size: 0.8rem;
    color: #9ca3af;
}

/*
 * .rcs-upload-zone input[type="file"] — Visually hidden native file input.
 * clip and absolute positioning remove it from visual layout while keeping
 * it accessible; the visible upload button triggers this input via JS.
 */
.rcs-upload-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/*
 * .rcs-upload-btn — Styled button inside the upload zone that triggers the
 * hidden file input. The white background and grey border give it a
 * secondary button appearance so it does not overpower the primary submit
 * button at the bottom of the form.
 */
.rcs-upload-btn {
    display: inline-block;
    padding: 7px 18px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

/*
 * .rcs-upload-btn:hover — Hover state for the upload trigger button.
 * Brand-blue border and text colour signal interactivity while keeping
 * the background white to distinguish it from primary action buttons.
 */
.rcs-upload-btn:hover {
    border-color: #1C48AA;
    color: #1C48AA;
}

/*
 * .rcs-file-name — Display text showing the name of a selected file.
 * Small muted styling keeps it subordinate to the upload button so it
 * reads as a confirmation label rather than an interactive element.
 */
.rcs-file-name {
    font-size: 0.8rem;
    color: #9ca3af;
}

/*
 * .rcs-pot-wrap — Honeypot field wrapper for bot-spam prevention.
 * Absolutely positioned far off-screen and collapsed to 1×1 px so
 * real users never see or interact with it; bots that fill every
 * visible field will trigger this and be rejected server-side.
 */
.rcs-pot-wrap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * .rcs-confirm-row — Container for the terms/confirmation checkbox row
 * above the submit button. Bottom margin creates a comfortable gap
 * between the confirmation checkbox and the submit button below it.
 */
.rcs-confirm-row {
    margin-bottom: 24px;
}

/*
 * .rcs-checkbox--confirm — Modifier for the confirmation checkbox at the
 * bottom of the form. Slightly larger font size than the support-type
 * checkboxes gives the consent statement appropriate visual prominence.
 */
.rcs-checkbox--confirm {
    font-size: 0.9rem;
    color: #374151;
}

/*
 * .rcs-submit-row — Flex container for the form submit button.
 * Using flex (rather than block) here allows future additions such as
 * a cancel link or spinner to be placed alongside the button with
 * minimal layout changes.
 */
.rcs-submit-row {
    display: flex;
}

/*
 * .rcs-submit-btn — Primary call-to-action submit button for the support
 * request form. Brand blue background, white text, and bold weight make
 * it the most visually prominent element in the form; transitions add
 * a smooth colour fade and upward nudge on hover.
 */
.rcs-submit-btn {
    padding: 14px 40px;
    background: #1C48AA;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

/*
 * .rcs-submit-btn:hover — Hover state for the submit button. Darkening
 * the background to a deeper blue and applying a slight upward translate
 * reinforces the interactive feel and draws the eye to the action.
 */
.rcs-submit-btn:hover {
    background: #1C48AA;
    transform: translateY(-1px);
}

/*
 * .rcs-submit-btn:active — Active/pressed state for the submit button.
 * Resetting the Y-translate to zero creates a "press-down" effect when
 * the user clicks, providing tactile-style feedback.
 */
.rcs-submit-btn:active {
    transform: translateY(0);
}

/*
 * Tablet breakpoint — adapts the request support form layout for screens
 * up to 768px. The two-column form collapses to a single column, the form
 * card padding is reduced, and the checkbox grid becomes single-column so
 * options remain easy to tap on a touch screen.
 */
@media (max-width: 768px) {
    .rcs-form-wrap {
        padding: 28px 20px;
    }

    .rcs-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rcs-col--left {
        margin-bottom: 24px;
    }

    .rcs-checkboxes {
        grid-template-columns: 1fr;
    }
}

/*
 * Small-screen breakpoint — further adjustments to the request support
 * section for screens up to 600px. Section padding is reduced, the
 * email/phone field row collapses to a single column, and the submit
 * button stretches full width for easy tapping on narrow phones.
 */
@media (max-width: 600px) {
    .section-request-support {
        padding: 60px 20px;
    }

    .rcs-field-row {
        grid-template-columns: 1fr;
    }

    .rcs-submit-btn {
        width: 100%;
        text-align: center;
    }
}

/*
 * .wws-container — Centred content container for the What We Support
 * section. max-width:1200px aligns it with the other main content
 * containers used across the community page.
 */
.wws-container {
    max-width: 1200px;
    margin: 0 auto;
}

/*
 * .wws-header — Centred header block above the What We Support card grid.
 * The large bottom margin creates clear separation between the heading
 * block and the first row of support-category cards below it.
 */
.wws-header {
    text-align: center;
    margin-bottom: 56px;
}

/*
 * .wws-heading — Large bold section title for What We Support.
 * Uppercase text, wide letter-spacing, and the BBOS brand blue give it
 * a strong editorial presence that anchors the section visually.
 */
.wws-heading {
    font-size: 2.75rem;
    font-weight: 900;
    color: #1C48AA;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 16px;
    line-height: 1.1;
}

/*
 * .wws-subtext — Supporting description line beneath the section heading.
 * Muted grey and white-space:nowrap keep it as a clean single line on
 * desktop; the nowrap is overridden to normal in the mobile breakpoint
 * so the text wraps naturally on narrow screens.
 */
.wws-subtext {
    font-size: 1rem;
    color: #6b7280;
    margin: 0 auto;
    line-height: 1.6;
    white-space: nowrap;
}

/*
 * .wws-grid — Four-column CSS Grid for the What We Support category cards.
 * repeat(4, 1fr) distributes four equal-width columns; the 24px gap keeps
 * cards well-spaced without wasting too much row width.
 */
.wws-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/*
 * .wws-card — Individual support-category card with an icon, heading, and
 * body text. Centred flex column layout stacks the icon circle above the
 * text; the subtle shadow and hover transition give each card a slight
 * elevation feel that invites interaction.
 */
.wws-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/*
 * .wws-card:hover — Hover state for a support-category card. Deepening
 * the shadow and raising the card by 2px provides the same interactive
 * lift used on the Featured Highlights cards for visual consistency.
 */
.wws-card:hover {
    box-shadow: 0 6px 20px rgba(0, 70, 190, 0.1);
    transform: translateY(-2px);
}

/*
 * .wws-icon-wrap — Circular icon container at the top of each support card.
 * The fixed 64×64 px size and light-blue background create a consistent
 * branded pill that frames icons of varying shapes and origins.
 */
.wws-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dce8fb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/*
 * .wws-icon-wrap svg — SVG icon inside the circular icon container.
 * Brand-blue stroke colour and a 28×28 px size ensure the icon is
 * legible and consistently sized across all support-category cards.
 */
.wws-icon-wrap svg {
    stroke: #1C48AA;
    width: 28px;
    height: 28px;
}

/*
 * .wws-icon-wrap .dashicons — WordPress Dashicons font icon inside the
 * circle. Explicit font-size, width, and height override Dashicons'
 * default sizing so it matches the SVG icon dimensions used elsewhere.
 */
.wws-icon-wrap .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #1C48AA;
}

/*
 * .wws-icon-wrap img — Image-based icon inside the circular container.
 * Fixed 28×28 px with object-fit:contain ensures the image fills the
 * same space as SVG and Dashicons variants without distortion.
 */
.wws-icon-wrap img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/*
 * .wws-card-heading — Title text for each support-category card.
 * Bold weight and a near-black colour make it the primary text element
 * within the card, clearly identifying the category at a glance.
 */
.wws-card-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.3;
}

/*
 * .wws-card-body — Supporting description text inside a support card.
 * Muted grey and a comfortable line-height keep this copy easy to read
 * without drawing attention away from the card title above it.
 */
.wws-card-body {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}

/*
 * Tablet breakpoint — collapses the four-column What We Support grid to
 * two columns on screens up to 1024px so cards remain large enough to
 * read comfortably on tablets without becoming too narrow.
 */
@media (max-width: 1024px) {
    .wws-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
 * Small-screen breakpoint — multiple adjustments for the What We Support
 * section on screens up to 600px. Section padding is reduced, the subtext
 * wraps naturally, the heading shrinks to 2rem, the grid becomes single
 * column, and card padding is trimmed so content is not cramped on phones.
 */
@media (max-width: 600px) {
    .section-what-we-support {
        padding: 60px 20px;
    }

    .wws-subtext {
        white-space: normal;
    }

    .wws-heading {
        font-size: 2rem;
    }

    .wws-grid {
        grid-template-columns: 1fr;
    }

    .wws-card {
        padding: 28px 24px;
    }
}