/*
Theme Name:   BAS Foundation Child
Theme URI:    https://thebasfoundation.org
Description:  Divi child theme for Babatunde Adelani Sherifat Foundation (BAS Foundation). Palette and components sampled from the 2026 Institutional Brochure.
Author:       BAS Foundation
Template:     Divi
Version:      2.2.0
Text Domain:  bas-foundation-child
*/

/* =========================================================
   1. DESIGN TOKENS — sampled from the 2026 Institutional Brochure
   Brochure value -> web value (only where WCAG AA required a darker shade)
     navy   #0B2A5B  (exact)           blue   #0B4DB5  (exact)
     green  #2E9E3F  (exact, large text / graphics only: 3.45:1)
     green text  #1F7A2E (small green text: 4.99 on pale)
     amber  #F5A31A  (exact)           amber deep #D98A00 (exact; navy text on it: 5.07)
     amber text  #9A5B00 (brochure #C97F00 is 2.97:1 -> darkened to 5.0)
     pale   #F2F6FB  (exact)           green tint #EAF6EC (exact)
   VERIFIED RATIOS
     navy/white 14.03 | blue/white 7.66 | body/white 9.71 | text/white 14.63 | muted/white 5.74
     navy on amber 6.77 | navy on amber deep 5.07 | amber on navy 6.77 | white on blue 7.66
     blue-light on navy 7.85 | green-light on navy 6.67 | subtext on navy 11.16 | input border 3.5 (non-text)
   NEVER: white on #2E9E3F for small text (3.45) | white on #D98A00 (2.77) | amber as text on white | blue on navy.
   ========================================================= */
:root {
  --bas-navy: #0B2A5B;
  --bas-navy-deep: #081F45;
  --bas-navy-mid: #0B367A;         /* brochure cover circle */
  --bas-teal: #154D52;             /* brochure cover circle */
  --bas-blue: #0B4DB5;
  --bas-blue-dark: #093F94;
  --bas-blue-light: #9CC4FF;       /* links/icons on navy */
  --bas-green: #2E9E3F;
  --bas-green-text: #1F7A2E;
  --bas-green-light: #5BC878;      /* green accents on navy */
  --bas-amber: #F5A31A;
  --bas-amber-hover: #E39400;
  --bas-amber-deep: #D98A00;
  --bas-amber-text: #9A5B00;

  --bas-text: #1E293B;             /* strong body / lead text */
  --bas-body: #394557;             /* paragraphs */
  --bas-muted: #5B6779;            /* captions, running header */
  --bas-pale: #F2F6FB;
  --bas-white: #FFFFFF;
  --bas-border: #E4E9F2;           /* decorative dividers, card outlines */
  --bas-input-border: #7C8AA0;     /* form fields (3.5:1) */
  --bas-disabled-bg: #E4E9F1;
  --bas-disabled-text: #6B7588;

  --bas-green-tint: #EAF6EC;
  --bas-amber-tint: #FFF6E3;
  --bas-blue-tint: #E8F0FB;
  --bas-beige: #FDECD1;            /* brochure accent circle */
  --bas-error: #B42318;
  --bas-error-tint: #FEF3F2;
  --bas-footer-text: #DCE6F7;
  --bas-footer-muted: #B6C3DA;

  --bas-font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bas-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --bas-radius: 12px;
  --bas-shadow: 0 1px 2px rgba(11, 42, 91, .06), 0 8px 22px rgba(11, 42, 91, .08);
  --bas-focus: 0 0 0 3px #fff, 0 0 0 6px var(--bas-blue);

  --bas-section-y: 90px;
  --bas-header-h: 84px;
}
@media (max-width: 980px) { :root { --bas-section-y: 62px; --bas-header-h: 72px; } }
@media (max-width: 767px) { :root { --bas-section-y: 46px; --bas-header-h: 64px; } }

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
body, .et_pb_text, .et_pb_blurb_description, input, textarea, select, button { font-family: var(--bas-font-body); }
body { font-size: 17px; line-height: 1.7; color: var(--bas-body); }

h1, h2, h3, h4, h5, h6, #top-menu a, .et_pb_button, .bas-eyebrow, .bas-label, .bas-num, .et_pb_slide_title { font-family: var(--bas-font-head); }
h1, .et_pb_slide_title { font-size: 52px; font-weight: 800; line-height: 1.12; color: var(--bas-navy); }
h2 { font-size: 38px; font-weight: 800; line-height: 1.2;  color: var(--bas-navy); }
h3 { font-size: 28px; font-weight: 700; line-height: 1.3;  color: var(--bas-navy); }
h4 { font-size: 22px; font-weight: 700; line-height: 1.35; color: var(--bas-navy); }
small, .bas-small { font-size: 14px; line-height: 1.55; color: var(--bas-muted); }
.bas-lead { font-size: 19px; line-height: 1.65; font-weight: 600; color: var(--bas-blue); }   /* brochure: bold blue intro */
.bas-lead-dark { font-size: 19px; line-height: 1.65; font-weight: 600; color: var(--bas-text); }
p { padding-bottom: 1em; }
strong, b { color: var(--bas-text); font-weight: 700; }
a { color: var(--bas-blue); }
.entry-content a:not(.et_pb_button), .et_pb_text a:not(.et_pb_button) { color: var(--bas-blue); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:not(.et_pb_button):hover, .et_pb_text a:not(.et_pb_button):hover { color: var(--bas-blue-dark); }
.entry-content a:not(.et_pb_button):active, .et_pb_text a:not(.et_pb_button):active { color: var(--bas-navy); }
::selection { background: var(--bas-amber); color: var(--bas-navy); }
::placeholder { color: var(--bas-muted); opacity: 1; }

/* Eyebrow: tracked caps (brochure: green, bold, 12px) */
.bas-eyebrow, .bas-label {
  display: inline-block; font-size: 12px; font-weight: 800; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 2.5px; color: var(--bas-green-text);
}
.bas-on-dark .bas-eyebrow, .bas-hero .bas-eyebrow { color: #fff; }

/* Heading with short amber rule (brochure signature) */
.bas-title h1::after, .bas-title h2::after, .bas-title h3::after,
h2.bas-title::after, h1.bas-title::after {
  content: ""; display: block; width: 85px; height: 4px; margin-top: 16px; border-radius: 2px; background: var(--bas-amber);
}
.bas-title.bas-center h2::after, .bas-title.bas-center h1::after { margin-left: auto; margin-right: auto; }

@media (max-width: 980px) {
  h1, .et_pb_slide_title { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } body { font-size: 16.5px; }
}
@media (max-width: 767px) {
  h1, .et_pb_slide_title { font-size: 36px; } h2 { font-size: 29px; } h3 { font-size: 23px; } body { font-size: 16px; }
}

/* =========================================================
   3. LAYOUT / SECTIONS
   ========================================================= */
.et_pb_row { max-width: 1170px; width: 90%; }
.et_pb_section.bas-section { padding-top: var(--bas-section-y); padding-bottom: var(--bas-section-y); }
.bas-bg-pale { background: var(--bas-pale); }
.bas-bg-green-tint { background: var(--bas-green-tint); }
.bas-bg-amber-tint { background: var(--bas-amber-tint); }
.bas-bg-navy, .bas-on-dark { background: var(--bas-navy); color: var(--bas-footer-text); }
.bas-on-dark h1, .bas-on-dark h2, .bas-on-dark h3, .bas-on-dark h4, .bas-on-dark strong { color: #fff; }
.bas-on-dark a:not(.et_pb_button) { color: var(--bas-blue-light); text-decoration: underline; }
.bas-on-dark a:not(.et_pb_button):hover { color: #fff; }
html { scroll-padding-top: calc(var(--bas-header-h) + 16px); }
img { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* Running header strip (brochure page header): BAS FOUNDATION + two-tone mark, label right */
.bas-markbar { display: block; width: 80px; height: 4px; margin-top: 8px; background: linear-gradient(90deg, var(--bas-green) 0 62%, var(--bas-amber) 62% 100%); }
.bas-runhead { display: flex; justify-content: space-between; align-items: flex-start; }
.bas-runhead .bas-runhead-name { font: 800 12px/1.4 var(--bas-font-head); letter-spacing: 2.5px; text-transform: uppercase; color: var(--bas-navy); }
.bas-runhead .bas-runhead-label { font: 600 11px/1.4 var(--bas-font-head); letter-spacing: 1px; text-transform: uppercase; color: var(--bas-muted); }

/* Brand values row: ● People first ● Practical action ● Accountable impact */
.bas-values { display: flex; flex-wrap: wrap; gap: 14px 34px; list-style: none; margin: 0; padding: 0; }
.bas-values li { display: flex; align-items: center; gap: 10px; font: 800 12.5px/1.3 var(--bas-font-head); letter-spacing: 2.5px; text-transform: uppercase; color: var(--bas-navy); padding: 0; }
.bas-values li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bas-blue); flex: 0 0 12px; }
.bas-values li:nth-child(2)::before { background: var(--bas-green); }
.bas-values li:nth-child(3)::before { background: var(--bas-amber); }
.bas-on-dark .bas-values li { color: #fff; }
.bas-on-dark .bas-values li:nth-child(1)::before { background: var(--bas-blue-light); }

/* Logo on white rounded panel (brochure cover) */
.bas-logo-panel { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 10px 30px rgba(8, 31, 69, .25); display: inline-block; }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.et_pb_button, .et_pb_module .et_pb_button, .bas-btn {
  font-size: 15.5px; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
  padding: .85em 1.6em !important; border-radius: 8px !important; border-width: 2px !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.et_pb_button:after { display: none !important; }
.et_pb_button:hover { padding: .85em 1.6em !important; }

.bas-btn-primary .et_pb_button, a.bas-btn-primary { background: var(--bas-navy); color: #fff !important; border-color: var(--bas-navy); }
.bas-btn-primary .et_pb_button:hover, a.bas-btn-primary:hover { background: var(--bas-blue); border-color: var(--bas-blue); }
.bas-btn-primary .et_pb_button:active, a.bas-btn-primary:active { background: var(--bas-navy-deep); border-color: var(--bas-navy-deep); }

.bas-btn-blue .et_pb_button, a.bas-btn-blue { background: var(--bas-blue); color: #fff !important; border-color: var(--bas-blue); }
.bas-btn-blue .et_pb_button:hover, a.bas-btn-blue:hover { background: var(--bas-blue-dark); border-color: var(--bas-blue-dark); }

.bas-btn-green .et_pb_button, a.bas-btn-green { background: var(--bas-green-text); color: #fff !important; border-color: var(--bas-green-text); }
.bas-btn-green .et_pb_button:hover, a.bas-btn-green:hover { background: #17601F; border-color: #17601F; }

.bas-btn-donate .et_pb_button, a.bas-btn-donate, .bas-donate-menu > a { background: var(--bas-amber); color: var(--bas-navy) !important; border-color: var(--bas-amber); }
.bas-btn-donate .et_pb_button:hover, a.bas-btn-donate:hover, .bas-donate-menu > a:hover { background: var(--bas-amber-hover); border-color: var(--bas-amber-hover); color: var(--bas-navy) !important; }
.bas-btn-donate .et_pb_button:active, a.bas-btn-donate:active { background: var(--bas-amber-deep); border-color: var(--bas-amber-deep); }

.bas-btn-secondary .et_pb_button, a.bas-btn-secondary { background: transparent; color: var(--bas-navy) !important; border-color: var(--bas-navy); }
.bas-btn-secondary .et_pb_button:hover, a.bas-btn-secondary:hover { background: var(--bas-navy); color: #fff !important; }
.bas-btn-secondary .et_pb_button:active, a.bas-btn-secondary:active { background: var(--bas-navy-deep); color: #fff !important; }
.bas-on-dark .bas-btn-secondary .et_pb_button, .bas-hero .bas-btn-secondary .et_pb_button { color: #fff !important; border-color: #fff; }
.bas-on-dark .bas-btn-secondary .et_pb_button:hover, .bas-hero .bas-btn-secondary .et_pb_button:hover { background: #fff; color: var(--bas-navy) !important; }

.et_pb_button:disabled, .et_pb_button[aria-disabled="true"] { background: var(--bas-disabled-bg) !important; color: var(--bas-disabled-text) !important; border-color: var(--bas-disabled-bg) !important; cursor: not-allowed; }

/* =========================================================
   5. FOCUS (keyboard)
   ========================================================= */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.et_pb_button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--bas-blue); outline-offset: 3px; box-shadow: var(--bas-focus); border-radius: 4px; }
.bas-on-dark a:focus-visible, .bas-hero a:focus-visible, .bas-hero button:focus-visible, #main-footer a:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--bas-amber); }
.bas-skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100000; background: var(--bas-navy); color: #fff; padding: 12px 18px; border-radius: 6px; }
.bas-skip-link:focus { left: 8px; }

/* =========================================================
   6. HEADER
   ========================================================= */
#main-header, .bas-header { background: #fff; box-shadow: none; border-bottom: 1px solid var(--bas-border); position: relative; }
#main-header::after, .bas-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: linear-gradient(90deg, var(--bas-green) 0 70%, var(--bas-amber) 70% 100%); }
#logo { max-height: 62px; }
@media (max-width: 767px) { #logo { max-height: 48px; } }
#top-menu a, .bas-header .et-menu a { font-size: 14.5px; font-weight: 650; color: var(--bas-navy); }
#top-menu li.current-menu-item > a, #top-menu a:hover { color: var(--bas-blue); opacity: 1; }
#top-menu li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--bas-amber); }
#top-menu li a { padding-bottom: 6px; }
.nav li ul { border-top: 3px solid var(--bas-green); box-shadow: var(--bas-shadow); width: 290px; }
.nav li li a { width: 250px; font-size: 14px; }
#top-menu li.bas-donate-menu > a, .et_mobile_menu li.bas-donate-menu > a { padding: .7em 1.4em; border-radius: 8px; font-weight: 700; display: inline-block; }
.mobile_menu_bar:before { color: var(--bas-navy); }
.et_mobile_menu { border-top: 3px solid var(--bas-green); }
.et_mobile_menu li a { padding: 14px 5%; min-height: 44px; color: var(--bas-navy); }

/* =========================================================
   7. HERO SLIDER  (class bas-hero on the Fullwidth Slider)
   Mirrors the brochure cover: deep navy, amber rule, tracked white eyebrow,
   white headline with amber final line, soft blue/teal circles + thin rings.
   ========================================================= */
.bas-hero.et_pb_slider { background: var(--bas-navy); }
.bas-hero .et_pb_slide { min-height: 620px; background-color: var(--bas-navy); }
.bas-hero .et_pb_slide:before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,42,91,.95) 0%, rgba(11,42,91,.87) 45%, rgba(11,42,91,.34) 100%);
}
.bas-hero .et_pb_slide:after {                         /* brochure circles + rings (decorative) */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 86% 24%, rgba(11,54,122,.85) 0 230px, transparent 231px),
    radial-gradient(circle at 104% 66%, rgba(21,77,82,.80) 0 210px, transparent 211px),
    radial-gradient(circle at 70% 42%, transparent 0 400px, rgba(255,255,255,.10) 400px 401px, transparent 401px 500px, rgba(255,255,255,.07) 500px 501px, transparent 501px);
}
.bas-hero .et_pb_container { min-height: 620px; display: flex; align-items: center; position: relative; z-index: 2; }
.bas-hero .et_pb_slide_description { padding: 56px 0; text-align: left; max-width: 660px; }
.bas-hero .et_pb_slide_description::before { content: ""; display: block; width: 64px; height: 4px; margin-bottom: 18px; background: var(--bas-amber); }
.bas-hero .et_pb_slide:nth-child(2) .et_pb_slide_description::before,
.bas-hero .et_pb_slide:nth-child(3) .et_pb_slide_description::before { background: var(--bas-green-light); }
.bas-hero .et_pb_slide_title, .bas-hero .et_pb_slide_title a { color: #fff; font-size: 52px; font-weight: 800; line-height: 1.12; text-shadow: none; }
.bas-hero .bas-amber { color: var(--bas-amber); }      /* wrap the last headline line: <span class="bas-amber"> */
.bas-hero .et_pb_slide_content { color: var(--bas-footer-text); font-size: 19px; line-height: 1.65; text-shadow: none; margin: 18px 0 28px; }
.bas-hero .et_pb_slide_content p { padding-bottom: 0; }
.bas-hero .et_pb_button_wrapper { display: flex; flex-wrap: wrap; gap: 14px; }
.bas-hero .et_pb_button_wrapper a { margin: 0; }
.bas-hero .et_pb_more_button { background: var(--bas-amber); color: var(--bas-navy) !important; border-color: var(--bas-amber); }
.bas-hero .et_pb_more_button:hover { background: var(--bas-amber-hover); border-color: var(--bas-amber-hover); color: var(--bas-navy) !important; }
.bas-hero .bas-hero-cta2 { background: transparent; color: #fff !important; border: 2px solid #fff; }
.bas-hero .bas-hero-cta2:hover { background: #fff; color: var(--bas-navy) !important; }

.bas-hero .et-pb-arrow-prev, .bas-hero .et-pb-arrow-next { width: 48px; height: 48px; border-radius: 50%; background: rgba(8,31,69,.88); color: #fff; border: 2px solid #fff; opacity: 1; line-height: 44px; text-align: center; display: block; margin-top: -24px; z-index: 5; }
.bas-hero .et-pb-arrow-prev:hover, .bas-hero .et-pb-arrow-next:hover { background: var(--bas-amber); color: var(--bas-navy); border-color: var(--bas-amber); }
.bas-hero .et-pb-arrow-prev:active, .bas-hero .et-pb-arrow-next:active { background: var(--bas-amber-hover); }
.bas-hero .et-pb-slider-arrows a:before { font-size: 26px; }
.bas-hero .et-pb-controllers { bottom: 22px; z-index: 5; }
.bas-hero .et-pb-controllers a { width: 14px; height: 14px; margin: 0 7px; background: transparent; border: 2px solid #fff; opacity: 1; box-sizing: border-box; }
.bas-hero .et-pb-controllers a.et-pb-active-control { background: var(--bas-amber); border-color: var(--bas-amber); width: 28px; border-radius: 8px; }
.bas-hero .bas-slider-toggle { position: absolute; right: 24px; bottom: 14px; z-index: 6; min-width: 44px; min-height: 44px; background: rgba(8,31,69,.92); color: #fff; border: 2px solid #fff; border-radius: 24px; font: 700 13px var(--bas-font-head); padding: 0 16px; cursor: pointer; }
.bas-hero .et_pb_slide { transition: opacity .5s ease; }

@media (max-width: 980px) {
  .bas-hero .et_pb_slide:before { background: rgba(11,42,91,.90); }
  .bas-hero .et_pb_slide_title, .bas-hero .et_pb_slide_title a { font-size: 40px; }
  .bas-hero .et_pb_slide, .bas-hero .et_pb_container { min-height: 560px; }
}
@media (max-width: 767px) {
  .bas-hero .et_pb_slide:after { display: none; }
  .bas-hero .et_pb_slide:before { background: linear-gradient(180deg, rgba(11,42,91,.80) 0%, rgba(11,42,91,.95) 70%); }
  .bas-hero .et_pb_slide, .bas-hero .et_pb_container { min-height: 520px; }
  .bas-hero .et_pb_slide_description { padding: 36px 0 70px; }
  .bas-hero .et_pb_slide_title, .bas-hero .et_pb_slide_title a { font-size: 33px; }
  .bas-hero .et_pb_slide_content { font-size: 16.5px; margin: 14px 0 22px; }
  .bas-hero .et_pb_button_wrapper { flex-direction: column; align-items: stretch; }
  .bas-hero .et_pb_button_wrapper a { text-align: center; }
  .bas-hero .et-pb-arrow-prev, .bas-hero .et-pb-arrow-next { width: 44px; height: 44px; line-height: 40px; }
  .bas-hero .bas-slider-toggle { right: 12px; bottom: 10px; }
}

/* =========================================================
   8. BROCHURE COMPONENTS
   ========================================================= */

/* 8a. Colour-barred cards (Our Approach / Commitment / Reach).
   Markup: <div class="bas-card bas-blue|bas-green|bas-amber|bas-navy"><span class="bas-label">Our approach</span><p>…</p></div> */
.bas-card { position: relative; overflow: hidden; background: var(--bas-pale); border-radius: var(--bas-radius); padding: 38px 28px 30px; height: 100%; }
.bas-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--bas-blue); }
.bas-card.bas-green::before { background: var(--bas-green); }
.bas-card.bas-amber::before { background: var(--bas-amber); }
.bas-card.bas-navy::before  { background: var(--bas-navy); }
.bas-card .bas-label { color: var(--bas-blue); margin-bottom: 14px; }
.bas-card.bas-green .bas-label { color: var(--bas-green-text); }
.bas-card.bas-amber .bas-label { color: var(--bas-amber-text); }
.bas-card.bas-navy .bas-label  { color: var(--bas-navy); }
.bas-card p { font-weight: 600; color: var(--bas-navy); padding-bottom: 0; margin: 0; }
.bas-card h3, .bas-card h4 { margin-top: 0; }
.bas-card a.bas-more { font-weight: 700; color: var(--bas-blue); text-decoration: underline; text-underline-offset: 3px; }
.bas-card a.bas-more:hover { color: var(--bas-navy); }

/* 8b. Numbered audience rows (Who we serve).
   Markup: <div class="bas-row bas-blue"><span class="bas-num">01</span><p><strong>Children and young people</strong> who face barriers…</p></div> */
.bas-row { position: relative; overflow: hidden; display: flex; gap: 26px; align-items: flex-start; background: #fff; border: 1.5px solid var(--bas-border); border-radius: 10px; padding: 20px 24px 20px 36px; margin-bottom: 14px; }
.bas-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--bas-blue); }
.bas-row.bas-green::before { background: var(--bas-green); }
.bas-row.bas-amber::before { background: var(--bas-amber); }
.bas-row.bas-navy::before  { background: var(--bas-navy); }
.bas-row .bas-num { flex: 0 0 44px; font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--bas-blue); }
.bas-row.bas-green .bas-num { color: var(--bas-green); }          /* 24px bold = large text, 3.45:1 passes */
.bas-row.bas-amber .bas-num { color: var(--bas-amber-text); }
.bas-row.bas-navy .bas-num  { color: var(--bas-navy); }
.bas-row p { margin: 0; padding: 0; color: var(--bas-body); font-size: 16.5px; }
.bas-row p strong { color: var(--bas-text); }

/* 8c. Navy callout. Markup: <div class="bas-callout"><p><strong>Community-centred, openly communicated.</strong> …</p></div> */
.bas-callout { position: relative; background: var(--bas-navy); color: var(--bas-footer-text); border-radius: 14px; padding: 42px 36px 28px; }
.bas-callout::before { content: ""; position: absolute; left: 36px; top: 22px; width: 42px; height: 3px; background: var(--bas-amber); }
.bas-callout p { margin: 0; padding: 0; color: var(--bas-footer-text); }
.bas-callout strong { color: #fff; }

/* 8d. Programme bar. Markup: <div class="bas-prog bas-amber"><span class="bas-num">03</span><h3>Healthcare Services & Health Awareness</h3></div>
   Order from brochure pattern: 01 blue, 02 green, 03 amber, 04 navy. */
.bas-prog { display: flex; align-items: center; gap: 20px; padding: 18px 28px; border-radius: 10px; background: var(--bas-blue); color: #fff; }
.bas-prog.bas-green { background: var(--bas-green); }
.bas-prog.bas-amber { background: var(--bas-amber-deep); color: var(--bas-navy); }   /* white fails here (2.77) */
.bas-prog.bas-navy  { background: var(--bas-navy); }
.bas-prog .bas-num { font-weight: 800; font-size: 32px; line-height: 1; color: inherit; }
.bas-prog h3, .bas-prog h2 { margin: 0; padding: 0; font-size: 24px; font-weight: 700; color: inherit; }

/* 8e. Intended-outcomes panel. Markup: <div class="bas-outcome bas-amber"><span class="bas-label">Intended outcomes</span><p>…</p></div> */
.bas-outcome { position: relative; overflow: hidden; background: var(--bas-pale); border-radius: 10px; padding: 24px 26px 22px 34px; }
.bas-outcome::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bas-navy); }
.bas-outcome.bas-amber::before { background: var(--bas-amber-deep); }
.bas-outcome.bas-green::before { background: var(--bas-green); }
.bas-outcome.bas-blue::before  { background: var(--bas-blue); }
.bas-outcome .bas-label { color: var(--bas-navy); margin-bottom: 10px; }
.bas-outcome.bas-amber .bas-label { color: var(--bas-amber-text); }
.bas-outcome p { margin: 0; padding: 0; color: var(--bas-text); }

/* 8f. Important / public-interest notice. Markup: <div class="bas-notice"><p><strong>Important:</strong> …</p></div> */
.bas-notice { position: relative; overflow: hidden; background: var(--bas-green-tint); border-radius: 10px; padding: 18px 24px 18px 30px; }
.bas-notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bas-green); }
.bas-notice p { margin: 0; padding: 0; color: var(--bas-navy); font-size: 15.5px; }
.bas-notice strong { color: var(--bas-navy); }

/* 8g. Green-dot bullet list */
.bas-list { list-style: none; margin: 0; padding: 0; }
.bas-list li { position: relative; padding: 0 0 12px 28px; color: var(--bas-body); }
.bas-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--bas-green); }

/* 8h. Verified / unverified content notice (client placeholders) */
.bas-placeholder { background: var(--bas-amber-tint); border: 1.5px dashed var(--bas-amber-text); color: var(--bas-amber-text); padding: 14px 18px; border-radius: 8px; font-size: 15px; }
.bas-panel { background: var(--bas-pale); border-radius: var(--bas-radius); padding: 24px 26px; }
.bas-panel.bas-info { background: var(--bas-blue-tint); }

@media (max-width: 767px) {
  .bas-row { gap: 16px; padding: 16px 16px 16px 26px; } .bas-row .bas-num { flex-basis: 34px; font-size: 21px; }
  .bas-prog { padding: 14px 18px; gap: 14px; } .bas-prog h3 { font-size: 19px; } .bas-prog .bas-num { font-size: 26px; }
  .bas-callout { padding: 38px 22px 22px; } .bas-callout::before { left: 22px; }
  .bas-values { flex-direction: column; gap: 12px; }
}

/* =========================================================
   9. FORMS + DONATION AMOUNTS
   ========================================================= */
.et_pb_contact_form input[type=text], .et_pb_contact_form input[type=email], .et_pb_contact_form textarea, .et_pb_contact_form select,
.bas-form input, .bas-form textarea, .bas-form select { background: #fff; border: 1.5px solid var(--bas-input-border); border-radius: 8px; padding: 14px 16px; color: var(--bas-text); font-size: 16px; min-height: 48px; }
.et_pb_contact_form input:focus, .et_pb_contact_form textarea:focus, .bas-form input:focus, .bas-form textarea:focus { border-color: var(--bas-blue); }
.et_pb_contact_form input.et_contact_error, .et_pb_contact_form textarea.et_contact_error { border-color: var(--bas-error) !important; background: var(--bas-error-tint); }
.et_pb_contact_form .et-pb-contact-message, .et_pb_contact_form .et-pb-contact-message ul li { color: var(--bas-error); }
.et_pb_contact_form_container .et-pb-contact-message p { padding: 12px 16px; border-radius: 8px; background: var(--bas-green-tint); color: var(--bas-green-text); border: 1px solid var(--bas-green-text); }
.et_pb_contact_form label, .bas-form label { font-weight: 600; color: var(--bas-navy); }

.bas-amounts { display: flex; flex-wrap: wrap; gap: 12px; }
.bas-amounts a, .bas-amounts label, .bas-amounts button { flex: 1 1 120px; text-align: center; padding: 14px 10px; border: 2px solid var(--bas-navy); border-radius: 10px; font: 700 18px var(--bas-font-head); color: var(--bas-navy); background: #fff; cursor: pointer; }
.bas-amounts a:hover, .bas-amounts .is-selected { background: var(--bas-navy); color: #fff; }
.bas-amounts a:active { background: var(--bas-navy-deep); color: #fff; }

/* =========================================================
   10. FOOTER (navy, four columns)
   ========================================================= */
#main-footer, .bas-footer { background: var(--bas-navy); color: var(--bas-footer-text); position: relative; }
#main-footer::before, .bas-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--bas-green) 0 70%, var(--bas-amber) 70% 100%); }
.bas-footer h4, #main-footer .widget-title, #main-footer h4 { color: #fff; font-size: 17px; margin-bottom: 14px; }
.bas-footer a, #main-footer a { color: var(--bas-footer-text); text-decoration: none; }
.bas-footer a:hover, #main-footer a:hover { color: var(--bas-amber); text-decoration: underline; }
.bas-footer ul { list-style: none; padding: 0; margin: 0; }
.bas-footer li { padding: 6px 0; }
.bas-footer .bas-logo-panel { padding: 12px 16px; border-radius: 10px; }
.bas-footer-bottom { border-top: 1px solid rgba(255,255,255,.18); font-size: 14px; color: var(--bas-footer-muted); padding: 18px 0; }
#footer-bottom { background: var(--bas-navy-deep); color: var(--bas-footer-muted); }

/* =========================================================
   11. BLOG / NEWS
   ========================================================= */
.et_pb_post .entry-title a, .et_pb_post h2 a { color: var(--bas-navy); }
.et_pb_post .post-meta, .post-meta { color: var(--bas-muted); font-size: 14px; }
.et_pb_post { border: 1.5px solid var(--bas-border); border-radius: var(--bas-radius); overflow: hidden; box-shadow: var(--bas-shadow); }
.et_pb_post .entry-featured-image-url { margin-bottom: 0; }
.et_pb_post .post-content, .et_pb_post h2 { padding-left: 22px; padding-right: 22px; }

/* =========================================================
   12. REDUCED MOTION + PRINT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .et_pb_slide { transition: none !important; }
}
@media print { #main-header, #main-footer, .bas-hero .et-pb-controllers, .et-pb-slider-arrows { display: none !important; } }

/* =========================================================
   13. THEME BUILDER HEADER + FOOTER  (layouts/ folder)
   Header: classes bas-header / bas-header-row / bas-header-menu / bas-donate-pill
   Footer: classes bas-footer / bas-footer-bottom / bas-footer-links
   ========================================================= */
.bas-header.et_pb_section { background: #fff; position: relative; border-bottom: 1px solid var(--bas-border); z-index: 99; }
.bas-header-row { position: relative; }
.bas-header-menu.et_pb_menu { background: transparent; padding: 0; }
.bas-header-menu .et_pb_menu_inner_container { padding-right: 150px; align-items: center; }
.bas-header-menu .et_pb_menu__logo-wrap { padding: 12px 0; }
.bas-header-menu .et_pb_menu__logo img { height: 80px; width: auto; max-height: 80px; transition: height .2s ease, max-height .2s ease; }   /* square stacked logo */
.bas-header-menu .et-menu > li { padding-left: 11px; padding-right: 11px; }
.bas-header-menu .et-menu a { font-family: var(--bas-font-head); font-weight: 650; font-size: 14.5px; color: var(--bas-navy); padding-bottom: 6px; }
.bas-header-menu .et-menu a:hover { color: var(--bas-blue); opacity: 1; }
.bas-header-menu .et-menu li.current-menu-item > a,
.bas-header-menu .et-menu li.current-menu-ancestor > a { color: var(--bas-blue); box-shadow: inset 0 -3px 0 var(--bas-amber); }
.bas-header-menu .nav li ul, .bas-header-menu .et-menu ul.sub-menu { border-top: 3px solid var(--bas-green); box-shadow: var(--bas-shadow); width: 290px; background: #fff; }
.bas-header-menu .et-menu ul.sub-menu a { width: 250px; font-size: 14px; padding: 10px 20px; }
.bas-donate-pill.et_pb_button_module_wrapper { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0 !important; }
.bas-header.et_pb_sticky .et_pb_menu__logo img { height: 52px; max-height: 52px; }
.bas-header.et_pb_sticky { box-shadow: 0 2px 12px rgba(11, 42, 91, .10); }

@media (max-width: 980px) {
  .bas-header-menu .et_pb_menu_inner_container { padding-right: 0; }
  .bas-header-menu .et_pb_menu__logo img { height: 58px; max-height: 58px; }
  .bas-header-menu .et_pb_menu__logo-wrap { padding: 10px 0; }
  .bas-header-menu .mobile_nav .mobile_menu_bar:before { color: var(--bas-navy); font-size: 32px; }
  .bas-header-menu .et_mobile_menu { border-top: 3px solid var(--bas-green); background: #fff; box-shadow: var(--bas-shadow); }
  .bas-header-menu .et_mobile_menu li a { color: var(--bas-navy); min-height: 44px; padding: 14px 5%; font-weight: 650; }
  .bas-donate-pill.et_pb_button_module_wrapper { right: 62px; }
  .bas-donate-pill .et_pb_button { font-size: 14px; padding: .6em 1.1em !important; }
}
@media (max-width: 380px) { .bas-header-menu .et_pb_menu__logo img { height: 52px; max-height: 52px; } .bas-donate-pill.et_pb_button_module_wrapper { right: 56px; } }

/* Footer */
.bas-footer.et_pb_section { padding-bottom: 0; }
.bas-footer h4 { color: #fff; font-size: 17px; margin: 0 0 18px; }
.bas-footer h4::after { content: ""; display: block; width: 36px; height: 3px; margin-top: 10px; background: var(--bas-amber); border-radius: 2px; }
.bas-footer .bas-footer-links li { padding: 6px 0; }
.bas-footer .bas-footer-links a { display: inline-block; padding: 2px 0; }
.bas-footer p { color: var(--bas-footer-text); }
.bas-footer .bas-footer-statement { color: #fff; font-weight: 700; margin-top: 8px; }
.bas-footer .bas-logo-panel { margin-bottom: 20px; }
.bas-footer .bas-logo-panel img { display: block; width: 100%; height: auto; }
.bas-footer .bas-logo-panel { max-width: 194px; }
.bas-footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding-top: 22px; padding-bottom: 22px; }
.bas-footer-bottom p, .bas-footer-bottom .bas-footer-legal a { font-size: 14px; color: var(--bas-footer-muted); }
.bas-footer-bottom .bas-footer-legal { text-align: right; }
.bas-footer-bottom .bas-footer-legal a { margin-left: 18px; }
.bas-footer-bottom .bas-footer-legal a:hover { color: var(--bas-amber); }
.bas-footer .bas-placeholder { background: rgba(245,163,26,.12); color: var(--bas-amber); border-color: var(--bas-amber); margin-top: 8px; font-size: 13.5px; }
.bas-footer.et_pb_section::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--bas-green) 0 70%, var(--bas-amber) 70% 100%); }
@media (max-width: 980px) { .bas-footer .et_pb_column { margin-bottom: 34px; } }
@media (max-width: 767px) {
  .bas-footer-bottom .bas-footer-legal { text-align: left; }
  .bas-footer-bottom .bas-footer-legal a { margin: 0 18px 0 0; display: inline-block; min-height: 44px; line-height: 44px; }
}