/* ============================================================
   HWRF custom overrides — loaded AFTER Giveon custom.css.
   Home for reliability + polish fixes on top of the theme.
   ============================================================ */

/* --- WOW reveal reliability -------------------------------------------------
   The Giveon theme hides every `.wow` element (visibility:hidden) and relies on
   WOW.js to reveal it on scroll. When a reveal doesn't fire, whole sections stay
   invisible (blank space). Keep content ALWAYS visible; let the fade-in animation
   remain a pure enhancement when it triggers. */
.wow {
    visibility: visible !important;
}

/* --- Magic cursor disabled --------------------------------------------------
   The theme's custom "magic cursor" replaces the native pointer (poor for the
   seniors audience / accessibility) and, since its stylesheet wasn't loaded, its
   `.cb-cursor` divs rendered in-flow at the page bottom (a stray "View" label +
   empty space). The script is removed from the layout; this hides any leftover
   nodes and guarantees the native cursor. */
.cb-cursor,
.cb-cursor-text {
    display: none !important;
}

/* Respect reduced-motion: no entrance animations at all. */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .animated,
    [data-wow-delay] {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Fix #2: Map iframe explicit block display (ensure height always renders) */
.google-map-iframe iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
}

/* --- Fix #4: Team card (volunteer overlay) — stronger gradient scrim -------- */
/* Override the theme's lighter gradient so white name/role text is always legible
   on any photo, including light ones. Covers the bottom 55% of the card. */
.our-volunteers .volunteer-item-image figure::before {
    background: linear-gradient(
        to top,
        rgba(15, 44, 83, 0.96) 0%,
        rgba(15, 44, 83, 0.85) 35%,
        rgba(15, 44, 83, 0.45) 60%,
        rgba(15, 44, 83, 0) 100%
    ) !important;
}

/* Ensure volunteer content sits above the gradient and its text is legible on
   ANY photo (text-shadow guarantees contrast even over bright backgrounds). */
.our-volunteers .volunteer-item-content {
    z-index: 2;
}
.our-volunteers .volunteer-item-content h2,
.our-volunteers .volunteer-item-content h3,
.our-volunteers .volunteer-item-content .role,
.our-volunteers .volunteer-item-content p {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* Board of Directors / team-card designation (.role): the theme left it the
   default navy heading colour, which was navy-on-navy over the dark photo scrim
   (unreadable). Use a LIGHT tint of the brand rose so it stays on-brand AND
   readable — #F472B6 ≈ 5.5:1 on the navy scrim (deep #BE185D would be ~2.2:1). */
.our-volunteers .volunteer-item-content .role {
    color: #F472B6;
}

/* Board of Directors cards — fix ragged vertical arrangement (2026-06-30).
   The theme absolutely-anchors all text to the BOTTOM of the photo, so with
   varying bio lengths each director's name floated to a different height and the
   row looked uneven. Restyle the board into clean, EQUAL-HEIGHT cards: a square
   photo on top + a navy text panel below, so names/roles/bios line up across the
   whole grid. Scoped to .our-team so other .volunteer-item uses are untouched. */
.our-team .row {
    align-items: stretch;        /* equal-height columns per row */
    row-gap: 26px;               /* vertical gap between the two rows */
}
.our-team .volunteer-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--primary-color);
    border-radius: 16px;
    box-shadow: 0 18px 40px -22px rgba(15, 44, 83, 0.35);
}
.our-team .volunteer-item-image figure {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.our-team .volunteer-item-image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-team .volunteer-item-image figure::before {
    display: none;               /* drop the bottom photo scrim (text is below now) */
}
.our-team .volunteer-item-content {
    position: static;            /* flow below the photo instead of overlaying it */
    inset: auto;
    padding: 22px 24px 26px;
    flex: 1 1 auto;
}
.our-team .volunteer-item-content h2 {           /* name */
    color: var(--white-color);
    margin-bottom: 2px;
    text-shadow: none;
}
.our-team .volunteer-item-content .role {        /* designation */
    color: #F472B6;
    margin-bottom: 12px;
    text-shadow: none;
}
.our-team .volunteer-item-content p {            /* bio */
    color: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
    margin: 0;
    text-shadow: none;
}

/* --- Fix #5: Donate form — LIGHT card (was a dark navy panel) -------------- */
/* The donation box now reads as a clean white card on a soft tinted section,
   matching the rest of the site's light surfaces. Scoped to .donate-now--light
   so any other .donate-now.dark-section band (e.g. a CTA) stays dark. */
.donate-now--light {
    background: #FBF6F8;          /* soft warm light tint behind the card */
}
.donate-now--light .donation-box {
    background: #fff;
    border: 1px solid var(--divider-color);
    box-shadow: 0 24px 60px -28px rgba(15, 44, 83, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Inputs: white field, visible grey border, dark text. */
.donate-now--light .donation-form .form-group .form-control {
    width: 100%;
    background-color: #fff !important;
    color: #1a1a2e !important;
    border: 1px solid var(--divider-color) !important;
}
.donate-now--light .donation-form .form-group .form-control::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}
.donate-now--light .donation-form .form-group .form-control:focus {
    border-color: var(--accent-deep) !important;
    box-shadow: 0 0 0 0.2rem rgba(190, 24, 93, 0.15) !important;
}

/* Controls/labels: the theme made .form-group a flex row with a 20px gap, which
   detached each label from its input and broke the vertical rhythm. Stack them
   as normal blocks with a tight, consistent label→control gap. */
.donate-now--light .donation-form .form-group {
    display: block;
    gap: 0;
    margin-bottom: 18px;
}
.donate-now--light .donation-form .form-group label {
    color: var(--primary-color);
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    line-height: 1.3;
}
/* Bootstrap row columns each hold a .form-group; remove the doubled bottom gap
   on the last field of a stacked row so spacing stays even. */
.donate-now--light .donation-form .row {
    --bs-gutter-y: 0;
}

/* Choose a Fund — each option is a selectable bordered card (was a bare radio
   list). Selected state uses :has() to highlight the whole card. */
.donate-now--light .fund-options {
    display: grid;
    gap: 12px;
}
.donate-now--light .fund-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 2px solid var(--divider-color);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.donate-now--light .fund-option:hover {
    border-color: var(--accent-deep);
}
.donate-now--light .fund-option:has(input:checked) {
    border-color: var(--accent-deep);
    background: rgba(190, 24, 93, 0.05);
    box-shadow: 0 6px 18px -10px rgba(190, 24, 93, 0.40);
}
.donate-now--light .fund-option .form-check-input {
    flex-shrink: 0;
    float: none;
    margin: 3px 0 0;
}
.donate-now--light .fund-option__text strong {
    color: var(--primary-color);
    font-weight: 600;
}
.donate-now--light .fund-option__text small {
    line-height: 1.45;
}

/* Frequency / preset-amount pills: light grey by default, rose when active. */
.donate-now--light .donation-pricing-list .donation-value label {
    color: var(--primary-color);
    background-color: #f1f3f5;
    border: 1px solid var(--divider-color);
}
.donate-now--light .donation-pricing-list .donation-value input[type="radio"]:hover + label,
.donate-now--light .donation-pricing-list .donation-value input[type="radio"]:focus + label,
.donate-now--light .donation-pricing-list .donation-value input[type="radio"]:checked + label {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}

/* Fund radios → rose accent (was default Bootstrap blue). */
.donate-now--light .form-check-input:checked {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* Dividers + notice text were tuned for dark; use light tokens. */
.donate-now--light .donation-pricing-box,
.donate-now--light .donation-form-notice {
    border-top-color: var(--divider-color);
}
.donate-now--light .donation-form-notice p {
    color: var(--text-color);
}
.donate-now--light .donation-form-notice p i {
    color: var(--accent-deep);
}

/* Keep the section-title tight inside the card. */
.donate-now--light .donation-box .section-title {
    margin-bottom: 24px;
}

/* Impact-card icons (intro section): distinct FontAwesome glyphs inside the pink
   circle — the markup previously reused one palette SVG for all three cards. */
.donate-now-item .icon-box i {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    transition: color 0.4s ease-in-out;
}
.donate-now-item:hover .icon-box i {
    color: var(--accent-deep);
}

/* Contact / Volunteer form labels — the theme rendered labels inline and flush
   against the input (0px gap), so each label sat cramped on top of its control.
   Make labels block-level with a clean, consistent gap above the field. */
.contact-form label {
    display: block;
    margin-bottom: 8px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--primary-color);
}

/* --- Fix #6: Membership tier cards — push Join Now to bottom for balance --- */
.our-approach .approach-item {
    display: flex;
    flex-direction: column;
}
.our-approach .approach-item .approach-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Header secondary (ghost) button — Sign In / My Account ---------------- */
/* Mirrors .btn-default sizing so both buttons sit at the same height.
   Uses only the existing CSS variable tokens; no new colors introduced.
   The 2px border is compensated by reducing vertical padding by 2px (15px vs
   17px) so the total box height equals .btn-default's 50px. */
.btn-ghost {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--primary-color);
    background: transparent;
    border: 2px solid var(--accent-deep);
    border-radius: 5px;
    padding: 15px 20px;
    outline: none;
    transition: color 0.4s ease-in-out, background 0.4s ease-in-out, border-color 0.4s ease-in-out;
    white-space: nowrap;
}

.btn-ghost:hover {
    color: var(--white-color);
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* Lay out .header-btn as flex so Sign In and Register sit side-by-side with
   consistent spacing and are vertically centred. Overrides the theme's bare
   line-height:0 rule that was sufficient when only one button was present. */
.header-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: normal;
}

/* --- Mobile-only auth nav items --------------------------------------------
   .auth-mobile-item lives inside #menu so slicknav clones them into the
   mobile slide-out menu. On desktop (navbar-expand-lg breakpoint = 992 px)
   the same #menu is visible in the collapsed navbar, so we hide these items
   there — the .header-btn buttons already serve desktop auth. On mobile,
   #menu is inside .navbar-collapse (Bootstrap hides it), so only the
   slicknav clone in .responsive-menu shows; the items are naturally visible
   inside that clone and no extra "show" rule is required. */
@media (min-width: 992px) {
    .auth-mobile-item {
        display: none !important;
    }
}

/* --- Logout form: normalize <button> to match .btn-ghost anchors (desktop) -
   Browsers apply their own defaults to <button> that differ from <a>.
   background, border, size, padding, and outline are already set by the shared
   .btn-ghost rule above; only cursor and font-family need correcting here.     */
button.btn-ghost {
    cursor: pointer;
    font-family: inherit;
}

/* .logout-form is a flex child of .header-btn; zero the form's default margin
   so the gap property on .header-btn controls all inter-button spacing.        */
.logout-form {
    margin: 0;
}

/* --- Mobile logout button: fill the slicknav row like a .nav-link anchor ----
   The .nav-link class handles color and font from the theme. These rules
   supply the button-specific resets so it spans the full row and is left-aligned
   exactly like the My Account and other mobile nav items.                       */
.logout-form-mobile {
    padding: 0;
    width: 100%;
}

button.logout-nav-btn {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
}

/* ============================================================
   HOME-PAGE REFRESH — 2026-06-30
   1) Brand accent recoloured cyan → accessible green (arrow buttons + accents)
   2) Section polish: eyebrow labels, card hover-lift, CTA depth, partner logos
   3) Hero background image replaced with a community-service photo
      (the file public/site/images/hero-bg-image.webp was swapped; the old
       flower image is preserved as hero-bg-image-flowers-original.webp).
   All rules are OVERRIDES, loaded after the Giveon theme so it stays intact.
   ============================================================ */

/* --- 1. Accent recolour: cyan → green --------------------------------------
   The Giveon accent was cyan (--accent-color #1DC0FB / --accent-deep #0E8FBF):
   generic, and ~1.9:1 on white (fails WCAG AA). Remap BOTH accent tokens to an
   accessible green that fits a welfare charity and doubles as text-on-white.
   The navy --primary-color is kept as the structural brand colour.
     • white text on --accent-deep #11652F ≈ 6.3:1  (AA / AAA)
     • --accent-color #15803D as text on white ≈ 4.5:1 (AA)
   Every arrow button (.btn-default uses var(--accent-deep)) turns green, plus
   every accent fill/link/icon site-wide — for one cohesive palette. */
:root {
    /* Rose accent (option #17, 2026-06-30) — a warm, caring contrast to the
       navy + cyan logo. */
    --accent-color : #DB2777;   /* lighter rose: decorative accents, eyebrow marker, hovers (≈4.5:1 text) */
    --accent-deep  : #BE185D;   /* rose: arrow-button bg, icon circles, eyebrow text — white ≈ 6.0:1 (AA) */

    /* Typography (#7 "Lora + Inter", 2026-06-30): a warm humanist serif for
       headings + clean Inter for body and UI labels. Fits a charity with a
       story to tell. Overrides the theme's single Inter Tight token. */
    --default-font : "Inter", "Inter Tight", sans-serif;  /* body, nav, labels, buttons */
    --heading-font : "Lora", Georgia, serif;              /* display & content headings */
}

/* Body / default text → Inter (the theme applies var(--default-font) to
   html/body, so the token override above flows everywhere by inheritance). */

/* Content & display headings → Lora (serif). Section headings, card/feature
   titles, and footer column titles are all <h2>/<h3>, so they pick up the
   serif here for one consistent heading voice. */
h1, h2, h3, h4 {
    font-family: var(--heading-font);
}
.section-title h1, .section-title h2 {
    letter-spacing: -0.01em;
}
/* Labels / UI / eyebrows keep Inter (sans) — a serif reads oddly on these.
   .section-title h3 is the small uppercase eyebrow, NOT a content heading. */
.section-title h3,
.section-sub-title,
.btn-default, .btn-ghost, .readmore-btn,
.main-menu ul li a {
    font-family: var(--default-font);
}

/* Nav fit: Inter is wider than the theme's original Inter Tight, so tighten the
   6-item menu's spacing/size a touch to keep it on a single line (≥992px). */
@media (min-width: 992px) {
    .main-menu ul li { margin: 0 4px; }
    .main-menu ul li a {
        font-size: 15px;
        padding: 12px 8px !important;
    }
}

/* Footer logo: all-white mark, enlarged from the theme's 150px cap (2026-06-30). */
.footer-logo img {
    max-width: 230px;
}

/* About-page gallery teaser thumbnails: the 4 photos have mixed source aspect
   ratios, so at natural height they left a ragged bottom edge. Lock them to a
   uniform, rounded 4:3 tile (object-fit cover) for a clean grid. */
.gallery-teaser figure.image-anime {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}
.gallery-teaser figure.image-anime img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   EVENTS PAGE fixes (2026-06-30)
   ============================================================ */

/* Our Programs — proper card "boxes" in a clean equal-height grid.
   The program cards shipped no card treatment (just an icon + text block) and
   sat in an Isotope masonry that staggered the rows. The masonry is now removed
   (see events.blade); here we make each .service-item a real, equal-height card
   so every row lines up and "Learn More" sits at the same baseline. */
.programs-grid { align-items: stretch; }
.programs-grid > [class*="col-"] { display: flex; }
.programs-grid .service-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--white-color);
    border: 1px solid var(--divider-color);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 14px 34px -22px rgba(15, 44, 83, 0.28);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.programs-grid .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px -20px rgba(15, 44, 83, 0.38);
}
/* Push the "Learn More" link to the card bottom so it aligns across the grid. */
.programs-grid .service-item-btn {
    margin-top: auto;
    padding-top: 18px;
}
@media (prefers-reduced-motion: reduce) {
    .programs-grid .service-item:hover { transform: none; }
}

/* Upcoming Events filter — was a raw bulleted list of links. Style as a
   horizontal row of filter pills with a clear active (rose) state. */
.events-filter-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 38px;
}
.events-filter-nav li { line-height: 1; }
.events-filter-nav a {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    border: 1.5px solid var(--divider-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.events-filter-nav a:hover,
.events-filter-nav a:focus-visible {
    color: var(--accent-deep);
    border-color: var(--accent-deep);
}
.events-filter-nav a.active-btn {
    color: var(--white-color);
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* ============================================================
   MEMBER DASHBOARD (/member/dashboard) — 2026-06-30
   ============================================================ */

/* Root fix: the dashboard cards reuse .contact-us-form, whose
   `.page-contact-us .contact-us-form { height:100%; align-content:center }`
   rule is meant for the Contact page (one card per column). The dashboard
   stacks several cards per column, so each card stretched to the full column
   height and — since modern CSS applies align-content in block layout — the
   content was vertically centred, leaving large empty gaps. Reset to natural,
   content-sized cards and give them a proper card surface. */
.member-dashboard .contact-us-form {
    height: auto;
    align-content: normal;
    padding: 32px;
    border: 1px solid var(--divider-color);
    box-shadow: 0 14px 34px -24px rgba(15, 44, 83, 0.28);
}
.member-dashboard .contact-us-form h2 {
    font-size: 24px;        /* card title, not a page heading */
}
.member-dashboard .contact-us-form h3 {
    font-size: 18px;
}

/* Quick Actions (navy card): brighter, tappable links with dividers + hover. */
.member-dashboard .contact-us-form[style*="primary-color"] {
    border-color: rgba(255, 255, 255, 0.10);
}
.member-dashboard .contact-us-form ul.list-unstyled li {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.member-dashboard .contact-us-form ul.list-unstyled li:last-child {
    border-bottom: none;
}
.member-dashboard .contact-us-form ul.list-unstyled a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88) !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.member-dashboard .contact-us-form ul.list-unstyled a:hover {
    color: #fff !important;
    padding-left: 4px;
}
.member-dashboard .contact-us-form ul.list-unstyled a i {
    color: #F472B6;         /* light rose icons on navy */
    width: 18px;
    text-align: center;
}

/* Renewal tier chooser — brand-rose radios + a clear hover/selected affordance
   (the theme left radios default Bootstrap blue and the selected tint cyan). */
.member-dashboard .form-check-input:checked {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
}
.member-dashboard .form-check-input:focus {
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 0.2rem rgba(190, 24, 93, 0.20);
}
.member-dashboard .tier-option {
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.member-dashboard .tier-option:hover {
    border-color: var(--accent-deep) !important;
}
/* White-icon accent circles must sit on the DEEP emerald (white-on-#18D694 is
   only ~1.9:1). Remap them from --accent-color to --accent-deep for crisp icons. */
.about-us-item .icon-box,
.service-item .icon-box,
.feature-item .icon-box,
.feature-counter-item .icon-box,
.donate-now-item .icon-box,
.approach-item-header .icon-box,
.sidebar-cta-header .icon-box,
.service-contribute-item .icon-box,
.program-expect-item .icon-box,
.volunteer-contact-item .icon-box,
.contact-info-item .icon-box {
    background-color: var(--accent-deep);
}

/* --- 2a. Section eyebrow label ---------------------------------------------
   The <x-site.section-title> eyebrow renders as a bare <h3> with no dedicated
   style (it looked like a stray heading). Style it as a refined uppercase
   label with a leading rule — a small, professional editorial touch. */
.section-title h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--accent-deep);
    margin: 0 0 18px;
}
.section-title h3::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-color);
}
/* On navy sections, use a light pink so the label stays legible. */
.dark-section .section-title h3 {
    color: #F9A8D4;
}
.dark-section .section-title h3::before {
    background: #F9A8D4;
}

/* --- 2b. Program / service cards: hover lift + soft elevation --------------
   The service cards were flat with hairline grid borders. Add a gentle lift
   and shadow on hover so they feel interactive and premium. */
/* Full-width 4-up program grid (home.blade now uses col-lg-12) — fills the
   section evenly instead of leaving the right half empty, and keeps the section
   short enough to sit comfortably on a Full HD screen. */
.our-services .services-item-list .service-item {
    width: 25%;
}
@media (max-width: 1199px) {
    .our-services .services-item-list .service-item { width: 50%; }
}
@media (max-width: 575px) {
    .our-services .services-item-list .service-item { width: 100%; }
}
.our-services .service-item {
    background: var(--white-color);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}
.our-services .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(15, 44, 83, 0.38);
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .our-services .service-item:hover { transform: none; }
}

/* --- 2c. CTA "donate-now" band: layered navy → green gradient for depth -----
   Keep the theme's subtle texture image and lay a brand gradient over it so
   the call-to-action band reads as a rich, deliberate focal point. */
.donate-now.dark-section {
    background-image:
        linear-gradient(115deg,
            rgba(11, 34, 71, 0.94) 0%,
            rgba(15, 44, 83, 0.88) 52%,
            rgba(190, 24, 93, 0.50) 135%),
        url('../images/dark-section-bg-image.webp');
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, top center;
}

/* --- 2c-bis. Swiper hero slider sizing -------------------------------------
   The Giveon theme shipped NO CSS for the dynamic (CMS-banner) hero slider, so
   the .swiper-slide collapsed and the .hero wrapper's own background image bled
   through the top band (a visible seam between two photos). Make each slide the
   full-height hero panel — carrying its own cover image and gradient scrim —
   and neutralise the now-redundant wrapper background/scrim in slider mode. */
.hero:has(.hero-slider) {
    padding: 0;
    background-image: none;
}
.hero:has(.hero-slider)::before {
    display: none;
}
.hero .hero-slider,
.hero .hero-slider .swiper-wrapper,
.hero .hero-slider .swiper-slide {
    min-height: 100vh;
    height: auto;
}
.hero .hero-slider .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;          /* centre the hero content within the viewport */
    background-size: cover;
    background-position: center;
    padding: 150px 0 90px;        /* clears the fixed header; balanced for 1080px */
}
.hero .hero-slider .swiper-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(33, 41, 59, 0.90) 32%,
        rgba(33, 41, 59, 0.00) 62%);
}
.hero .hero-slider .swiper-slide .container {
    position: relative;
    z-index: 2;
}
.hero .hero-pagination {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 3;
}

/* --- 3. Fit sections to the viewport (Full HD 1920×1080) -------------------
   The theme used a heavy 120px top/bottom padding on every section and a tall
   590px hero content box, so each section overran a 1080px screen and the page
   felt loose. Tighten the vertical rhythm and compact the hero so each section
   reads as a comfortable full-screen panel on Full HD, scaling down on smaller
   viewports. */
.hero-content-box {
    min-height: auto;
    gap: 24px;
}
.about-us,
.our-services,
.our-programs,
.our-approach,
.our-team,
.gallery-teaser,
.donate-now {
    padding-top: 80px;
    padding-bottom: 80px;
}
.our-blog {
    padding: 80px 0 60px;
}
@media (min-width: 1600px) {
    /* On large/Full-HD displays give a touch more breathing room. */
    .about-us,
    .our-services,
    .our-programs,
    .our-approach,
    .our-team,
    .gallery-teaser,
    .donate-now {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}
@media (max-width: 991px) {
    .about-us,
    .our-services,
    .our-programs,
    .our-approach,
    .our-team,
    .gallery-teaser,
    .donate-now {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .hero .hero-slider,
    .hero .hero-slider .swiper-wrapper,
    .hero .hero-slider .swiper-slide {
        min-height: 88vh;
    }
}

/* --- 2e. Secondary (outline) button — visual hierarchy on CTA bands --------
   <x-site.btn variant="outline"> rendered identically to the solid button, so a
   primary + secondary pair looked like two equal CTAs. Make the outline variant
   a transparent, bordered button so the primary action stays dominant. The 2px
   border replaces 2px of padding to keep both buttons the same height. */
.btn-default.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.55);
    padding: 15px 63px 15px 18px;
}
.btn-default.btn-outline::after {
    background: var(--white-color);
}
.btn-default.btn-outline:hover {
    color: var(--primary-color);
    border-color: var(--white-color);
}
/* On light sections, border/text follow the brand navy instead of white. */
.light-section .btn-default.btn-outline {
    border-color: rgba(15, 44, 83, 0.30);
    color: var(--primary-color);
}

/* --- 2d. Partner / sponsor logos: grayscale → colour on hover --------------
   A classic, professional partner strip: muted by default, full colour on
   hover so the section feels considered rather than a row of loud logos. */
.our-partners .partner-item img {
    max-height: 60px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.our-partners .partner-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ============================================================================
   Volunteer page (/volunteer)
   ---------------------------------------------------------------------------
   Two custom, template-consistent components:
     • .volunteer-steps  — the "How it works" process, 2 cards per row
     • .volunteer-plan   — the single $10/year membership pricing card
   Colours use the site tokens (rose accent, navy primary) so the page stays
   on-brand. Contrast: accent-deep #BE185D and #475569 body both clear AA on
   white; number badge adds a non-colour cue to each step.
   ========================================================================== */

/* --- "How it works" steps: 2-up cards with icon + number badge ------------- */
.volunteer-steps .volunteer-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    height: 100%;
    padding: 32px;
    background: var(--bg-color, #fff);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}
.volunteer-steps .volunteer-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(190, 24, 93, 0.10);
}
.volunteer-steps .volunteer-step-icon {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--accent-deep);
    background: rgba(219, 39, 119, 0.10);
    transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
}
.volunteer-steps .volunteer-step:hover .volunteer-step-icon {
    background: var(--accent-deep);
    color: #fff;
}
.volunteer-steps .volunteer-step-num {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 0 0 0 3px var(--bg-color, #fff);
}
.volunteer-steps .volunteer-step-body {
    flex: 1 1 auto;
}
.volunteer-steps .volunteer-step-body h4 {
    margin: 0 0 8px;
    font-size: 20px;
}
.volunteer-steps .volunteer-step-body p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}
@media (max-width: 575.98px) {
    .volunteer-steps .volunteer-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 22px;
    }
}

/* --- Single-plan membership pricing card ----------------------------------- */
.volunteer-plan {
    background: var(--bg-color, #fff);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
.volunteer-plan-head {
    text-align: center;
    padding: 44px 40px 34px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #1e293b);
}
.volunteer-plan-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--default-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent-deep);
}
.volunteer-plan-head h3 {
    margin: 0 0 14px;
    font-size: 26px;
    color: #fff;
}
.volunteer-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.volunteer-plan-price .amount {
    font-family: var(--heading-font);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
}
.volunteer-plan-price .period {
    font-size: 18px;
    opacity: 0.85;
}
.volunteer-plan-body {
    padding: 36px 40px 40px;
}
.volunteer-plan-body > p {
    margin: 0 0 22px;
    color: #475569;
    line-height: 1.7;
}
.volunteer-plan-cta {
    margin-top: 30px;
    text-align: center;
}
.volunteer-plan-note {
    margin: 16px 0 0;
    font-size: 14px;
    color: #64748b;
}
@media (max-width: 575.98px) {
    .volunteer-plan-head { padding: 34px 24px 28px; }
    .volunteer-plan-body { padding: 28px 24px 32px; }
    .volunteer-plan-price .amount { font-size: 44px; }
}

/* ============================================================================
   Membership registration — "selected plan" tier card
   (resources/views/public/membership.blade.php, "Membership Tier Select")
   Turns the auto-bound single-tier confirmation (and the multi-tier picker,
   for visual coherence) into a bordered, elevated card that reads as
   "locked in / confirmed" rather than a bare form field. Scoped under
   .tier-plan-card so it can't leak into other pages/components.
   ========================================================================= */
.tier-plan-card__field-label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--primary-color);
    margin-bottom: 14px;
}
.tier-plan-card {
    position: relative;
    /* Faint rose wash (same hue as --accent-deep #BE185D) over white so the
       panel reads as its own tinted surface, not just a bare white block —
       kept low-alpha so body text stays at full contrast. */
    background-color: rgba(190, 24, 93, 0.035);
    /* Border is deliberately stronger than the theme's --divider-color
       (#0F2C531A ≈ 10% alpha navy — too faint to register as a container
       edge on this light form background). */
    border: 1.5px solid rgba(190, 24, 93, 0.28);
    border-radius: 14px;
    padding: 36px 36px 32px;
    box-shadow: 0 18px 40px -22px rgba(15, 44, 83, 0.32);
    overflow: hidden;
}
/* Rose top accent — reads as "selected / locked in" without needing a full
   coloured background (keeps body text at full contrast on white). */
.tier-plan-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-color));
}

.tier-plan-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--default-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-deep);
    background: rgba(190, 24, 93, 0.08);
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 18px;
}
.tier-plan-card__badge i {
    font-size: 14px;
}

.tier-plan-card__name {
    margin: 0 0 10px;
    font-size: 24px;
}

.tier-plan-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 18px;
}
.tier-plan-card__price-amount {
    font-family: var(--heading-font);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--primary-color);
}
.tier-plan-card__price-suffix {
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
}

.tier-plan-card__desc {
    margin: 0 0 18px;
    color: #475569;
    line-height: 1.7;
}

.tier-plan-card__benefits {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
.tier-plan-card__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 44, 83, 0.08);
    color: var(--primary-color);
    line-height: 1.5;
}
.tier-plan-card__benefits li:last-child {
    border-bottom: none;
}
.tier-plan-card__benefits li i {
    color: var(--accent-deep);
    margin-top: 4px;
    flex-shrink: 0;
}

/* Multi-tier picker: same bordered/tinted container treatment as
   .tier-plan-card above (matching background, border, radius, shadow) so
   both branches read as one coherent design language — just a lighter-touch
   interior (no price/badge content here, just the label + native <select>). */
.tier-plan-card--picker {
    padding: 32px 32px;
}
.tier-plan-card--picker .tier-plan-card__field-label {
    margin-bottom: 10px;
}
.tier-plan-card--picker .form-control {
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    .tier-plan-card,
    .tier-plan-card--picker {
        padding: 28px 22px 26px;
    }
    .tier-plan-card__price-amount {
        font-size: 32px;
    }
}

/* --- Header container shadow -----------------------------------------------
   The white rounded nav pill (.header-sticky) floats over the hero and, once
   sticky (.active), over page content — a soft navy shadow lifts it off the
   background so it reads as an elevated bar. Selectors match the theme's own
   (custom.css) specificity so this override wins from the later-loaded file.
   box-shadow added to the transition so elevation eases in with the reveal. */
header.main-header .header-sticky {
    box-shadow: 0 12px 30px -14px rgba(15, 44, 83, 0.22);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
header.main-header .header-sticky.active {
    box-shadow: 0 16px 40px -14px rgba(15, 44, 83, 0.30);
}

/* --- Membership page: tighten intro → form gap ----------------------------
   With a single active tier the standalone tier-cards section is skipped, so
   the .about-us intro sits directly above the .page-contact-us form. Their
   stacked vertical paddings (intro pb 90 + section-row mb 80 + form pt 120)
   left a ~290px void between the "Become a Member" lead and the form. Collapse
   the intro's bottom spacing and trim the form's top padding so the two read
   as one continuous flow. Scoped to the membership page only. */
.membership-intro {
    padding-bottom: 20px;
}
.membership-intro .section-row {
    margin-bottom: 0;
}
#membership-register {
    padding-top: 40px;
}