/**
Theme Name: astra child
Author: RFA Media
Author URI: https://royalfamilyacademy.org
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/











.rfa-footer{
  background: var(--rfa-soft);
  color: var(--rfa-ink);
  border-top: 4px solid var(--rfa-purple);
  font-size: 15px;
}
.rfa-footer .container{
  max-width: 1200px; margin: 0 auto; padding: 56px 20px;
}
.rfa-footer__inner{
  display: grid; gap: 32px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.rfa-footer__title{
  font-size: 16px; font-weight: 700; margin: 0 0 14px; color: var(--rfa-purple);
  letter-spacing: .2px;
}
.rfa-footer__list{ list-style: none; margin: 0; padding: 0; }
.rfa-footer__list li{ margin: 8px 0; line-height: 1.5; }
.rfa-footer__list a{
  color: var(--rfa-ink); text-decoration: none;
  border-bottom: 1px solid transparent; transition: .2s ease;
}
.rfa-footer__list a:hover{ color: var(--rfa-purple); border-color: var(--rfa-gold); }

.rfa-footer__socials{
  display: flex; gap: 12px; margin: 18px 0 14px;
}
.rfa-social{
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rfa-bg); color: var(--rfa-purple); border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .15s ease, color .2s ease, box-shadow .2s ease;
}
.rfa-social:hover{ transform: translateY(-2px); color: var(--rfa-ink); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

.rfa-footer__cta{
  display: inline-block; margin-top: 8px; font-weight: 700;
  background: var(--rfa-purple); color: #fff; text-decoration: none;
  padding: 12px 16px; border-radius: 10px; border: 2px solid var(--rfa-purple);
  box-shadow: 0 3px 14px rgba(91,45,144,.15);
  transition: background .2s ease, color .2s ease, transform .15s ease, border-color .2s ease;
}
.rfa-footer__cta:hover{ background: var(--rfa-gold); border-color: var(--rfa-gold); color: #1a1a1a; transform: translateY(-2px); }

.rfa-footer__bottom{
  background: var(--rfa-bg); border-top: 1px solid #eaeaf0;
}
.rfa-footer__bottom .container{ padding: 16px 20px; }
.rfa-footer__bottom-inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.rfa-footer__credits{ color: var(--rfa-muted); font-size: 13px; }

/* Responsive */
@media (max-width: 900px){
  .rfa-footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .rfa-footer__inner{ grid-template-columns: 1fr; }
  .rfa-footer .container{ padding: 40px 16px; }
}
















/* ===== RFA Hero – Heritage + Premium ===== */


/* Brand tokens */
:root{
  --rfa-purple:#5A2D82;
  --rfa-gold:#C7A44A;
  --ink:#171717;
  --surface:#F7F7FB;

  --radius-xl: 20px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.10);

  /* spacing scales */
  --pad-x: clamp(16px, 6vw, 72px);
  --pad-y: clamp(24px, 4vw, 48px);
  --gap-lg: clamp(20px, 3vw, 40px);
  --gap-md: clamp(10px, 1.5vw, 20px);
  --gap-sm: clamp(10px, 1.4vw, 16px);
}

/* Base type */
.rfa-hero, .rfa-hero *{
  box-sizing: border-box;
}
.rfa-hero{
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
  min-height: 60vh; /* desktop */
  display: grid;
  align-items: center;
  padding-block: var(--pad-y);
  font-family: "Lora", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
@media (max-width: 700px){
  .rfa-hero{ min-height: 85vh; } /* small screens */
}

.rfa-hero__container{
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  max-width: 1200px;
}

.rfa-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: var(--gap-lg);
}
@media (max-width: 900px){
  .rfa-hero__grid{ grid-template-columns: 1fr; }
}

/* Copy */
.rfa-hero__copy{
  display: grid;
  align-content: start;
  gap: var(--gap-md);
  max-width: 720px;
}

.rfa-hero__kicker{
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--ink);
  margin: 0;
}

.rfa-hero__title{
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.15;
  margin: 0 0 clamp(8px, 1.2vw, 14px);
  color: var(--ink);
}

.rfa-hero__lead{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: #333;
}

.rfa-hero__ctas{
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

/* Buttons */
.btn{
  --ring: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.1vw, 14px) clamp(16px, 1.6vw, 22px);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  outline: none;
  border: 1px solid transparent;
}
.btn:focus-visible{
  box-shadow: 0 0 0 var(--ring) rgba(90,45,130,.35);
  transform: translateY(-1px);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn--primary{
  background: var(--rfa-gold);
  color: #1f1f1f;
}
.btn--secondary{
  background: #fff;
  color: var(--rfa-purple);
  border-color: rgba(90,45,130,.25);
}

/* Media panel */
.rfa-hero__media{
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #eae9f5;
}

/* Slides */
.glitch-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.glitch-slide.is-active{
  opacity: 1;
}
.glitch-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}














/* ===== RFA – Our Programmes ===== */
:root{
  --rfa-purple:#5A2D82;
  --rfa-gold:#C7A44A;
  --ink:#171717;
  --muted:#333;
  --pad-x: clamp(16px, 5vw, 72px);
  --pad-y: clamp(32px, 6vw, 80px);
  --gap-lg: clamp(20px, 3vw, 40px);
  --gap-md: clamp(12px, 1.6vw, 18px);
  --radius: 18px;
  --shadow: 0 10px 28px rgba(0,0,0,.10);
  --shadow-hover: 0 16px 36px rgba(0,0,0,.14);
}

.rfa-programmes{
  background: #fff;
  padding-block: var(--pad-y);
}
.rfa-programmes__container{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Section head */
.section-head{
  text-align: center;
  margin-bottom: clamp(20px, 4vw, 48px);
}
.section-head .kicker{
  font-family: "Lora", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rfa-purple);
  font-size: clamp(12px, 1.1vw, 14px);
  margin: 0 0 8px;
}
.section-head h2{
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.section-head .lead{
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(15px, 1.4vw, 18px);
}

/* Grid */
.programme-grid{
  --cols: 4;
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: repeat(var(--cols), 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1099px){
  .programme-grid{ --cols: 2; }
}
@media (max-width: 699px){
  .programme-grid{ --cols: 1; }
}

/* Card */
.programme-item{ display: block; }
.programme-card{
  background: #fff;
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.programme-link{
  display: grid;
  text-decoration: none;
  color: inherit;
  grid-template-rows: auto 1fr;
  height: 100%;
  outline: none;
}
.programme-card:focus-within,
.programme-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Media */
.card-media{
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
}
.card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.programme-card:hover .card-media img{
  transform: scale(1.04);
}

/* Age chip */
.age-chip{
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,.92);
  color: #222;
  border: 1px solid rgba(0,0,0,.06);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* Overlay */
.overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(90,45,130,.0), rgba(199,164,74,.35));
  opacity: 0;
  transition: opacity .28s ease;
}
.programme-card:hover .overlay{ opacity: 1; }

.overlay-cta{
  display: inline-block;
  border-radius: 999px;
  border: 1px solid rgba(199,164,74,.9);
  color: #1f1f1f;
  background: rgba(255,255,255,.92);
  padding: 10px 16px;
  font-weight: 700;
}

/* Body */
.card-body{
  padding: clamp(14px, 1.6vw, 18px) clamp(14px, 2vw, 22px) clamp(16px, 2vw, 22px);
}
.card-title{
  font-family: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 2vw, 22px);
  margin: 0 0 6px;
  color: var(--ink);
}
.card-text{
  font-family: "Lora", serif;
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Section CTA */
.section-cta{
  text-align: center;
  margin-top: clamp(20px, 4vw, 48px);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding: 12px 18px;border-radius:999px;border:1px solid rgba(90,45,130,.25);
  text-decoration:none;font-weight:600;transition:.2s ease;outline:none
}
.btn:hover{ box-shadow: 0 8px 20px rgba(0,0,0,.10); transform: translateY(-1px); }
.btn:focus-visible{ box-shadow: 0 0 0 2px rgba(90,45,130,.35); }
.btn--secondary{ background:#fff;color:var(--rfa-purple) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .programme-card,
  .programme-card:hover .card-media img{
    transition: none !important;
    transform: none !important;
  }
  .overlay{ transition: none !important; }
}













/* ===== RFA – What We Offer (Features Grid) — Final Version ===== */
:root{
  --rfa-purpled:#8b69cf;
  --rfa-gold:#C7A44A;
  --ink:#171717;
  --muted:#333;
  --surface:#F7F7FB;

  --pad-x: clamp(16px, 5vw, 72px);
  --pad-y: clamp(36px, 6vw, 88px);
  --gap-lg: clamp(16px, 2.6vw, 28px);
  --card-pad: clamp(16px, 1.8vw, 22px);
  --radius: 18px;

  --shadow: 0 10px 26px rgba(0,0,0,.10);
  --shadow-hover: 0 16px 38px rgba(0,0,0,.14);
}

/* Section surface + spacing */
.rfa-offers{
  padding-block: var(--pad-y);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.06), transparent 60%),
    linear-gradient(#F7F7FB, #FFFFFF);
}
.rfa-offers__container{
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Section head */
.rfa-offers .section-head{ text-align:center; margin-bottom: clamp(22px, 4vw, 48px); }
.rfa-offers .kicker{
  font-family: "Lora", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rfa-purple);
  font-size: clamp(12px, 1.1vw, 14px);
  margin: 0 0 8px;
}
.rfa-offers h2{
  font-family: "Libre Caslon Display","Cormorant Garamond",Georgia,serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--ink);
}
.rfa-offers .lead{
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(15px, 1.35vw, 18px);
}

/* Grid */
.offers-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1099px){ .offers-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 699px){  .offers-grid{ grid-template-columns: 1fr; } }

/* Card (solid bold fills + hover sheen) */
.offer-card{
  position: relative;
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  border-radius: var(--radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  outline: none;
  overflow: hidden;
  background: #fff; /* default fallback */
  color: var(--ink);
}
.offer-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.offer-card::after{
  content:"";
  position:absolute; inset:-40%;
  transform: rotate(25deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: transform .6s ease;
  pointer-events: none;
}
.offer-card:hover::after{ transform: rotate(25deg) translateX(20%); }

/* Icon + text inherit currentColor */
.offer-icon{
  width: clamp(28px, 3.4vw, 44px);
  height: clamp(28px, 3.4vw, 44px);
  stroke-width: 1.8;
  display: inline-block;
  transition: transform .22s ease;
  color: inherit;
}
.offer-card:hover .offer-icon{ transform: scale(1.04); }

.offer-title{
  font-family: "Libre Caslon Display","Cormorant Garamond",Georgia,serif;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  margin: 0;
  color: inherit;
}
.offer-text{
  font-family: "Lora", serif;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.6;
  margin: 0;
  color: inherit;
}
.offer-more{
  font-weight:700;
  text-decoration:none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  opacity: .9;
}
.offer-more:hover{ opacity: 1; }

/* Keyboard focus */
.offer-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(90,45,130,.45), var(--shadow);
}

/* ---- Bold background palette (brand + accents) ---- */
/* ---- Bold background palette (brand + accents) ---- */
/* target the <li class="offer-card"> directly */
.offers-grid > .offer-card:nth-child(1){ background: var(--rfa-purpled); color:#fff; }
.offers-grid > .offer-card:nth-child(1):hover{ background:#4b236d; }

.offers-grid > .offer-card:nth-child(2){ background: var(--rfa-gold); color:#1a1a1a; }
.offers-grid > .offer-card:nth-child(2):hover{ background:#d4b452; }

.offers-grid > .offer-card:nth-child(3){ background:#0077b6; color:#fff; }
.offers-grid > .offer-card:nth-child(3):hover{ background:#005f8d; }

.offers-grid > .offer-card:nth-child(4){ background:#e63946; color:#fff; }
.offers-grid > .offer-card:nth-child(4):hover{ background:#c62828; }

.offers-grid > .offer-card:nth-child(5){ background:#06d6a0; color:#fff; }
.offers-grid > .offer-card:nth-child(5):hover{ background:#049e7a; }

.offers-grid > .offer-card:nth-child(6){ background:#ffb703; color:#1a1a1a; }
.offers-grid > .offer-card:nth-child(6):hover{ background:#e09c00; }

/* Reveal utility + stagger */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.show{ opacity: 1; transform: none; }
.offers-grid > li.reveal:nth-child(1){ transition-delay: 0ms; }
.offers-grid > li.reveal:nth-child(2){ transition-delay: 60ms; }
.offers-grid > li.reveal:nth-child(3){ transition-delay: 120ms; }
.offers-grid > li.reveal:nth-child(4){ transition-delay: 180ms; }
.offers-grid > li.reveal:nth-child(5){ transition-delay: 240ms; }
.offers-grid > li.reveal:nth-child(6){ transition-delay: 300ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .offer-card, .offer-card::after, .offer-icon{
    transition: none !important;
    transform: none !important;
  }
}






















 /* ===== RFA – Values Marquee (text only) ===== */
    :root{
      --rfa-purple:#5A2D82; --rfa-gold:#C7A44A; --ink:#171717; --surface:#F7F7FB;
      --pad-x:clamp(16px,5vw,72px);
    }

    .rfa-values{
      padding-block: clamp(20px, 3.5vw, 40px);
      background:
        radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.05), transparent 60%),
        linear-gradient(#F7F7FB, #FFFFFF);
    }
    .rfa-values__container{max-width:1280px; margin-inline:auto; padding-inline:var(--pad-x)}
    .rfa-values .section-head{text-align:center; margin-bottom:clamp(14px,3vw,28px)}
    .rfa-values .kicker{
      font-family:"Lora",serif; letter-spacing:.18em; text-transform:uppercase; color:var(--rfa-purple);
      font-size:clamp(12px,1.1vw,14px); margin:0 0 6px;
    }
    .rfa-values h2{
      font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif; color:var(--ink);
      font-size:clamp(22px,3vw,32px); line-height:1.15; margin:0;
    }

  /* --- Marquee (text only) with natural handoff gap --- */
.values-marquee{
  --speed: 42s;                         /* loop speed */
  --row-h: clamp(44px, 4.5vw, 56px);    /* row height */
  --gap: clamp(20px, 3vw, 36px);        /* space between items */
  --handoff-gap: var(--gap);            /* extra distance between Track A and B */
  --viewport: clamp(560px, 72vw, 720px);/* ~4–5 items visible */
  --fade-bg: #fff;                      /* match section bg if needed */
  position: relative;
  width: var(--viewport);
  height: var(--row-h);
  margin-inline: auto;
  overflow: hidden;
}

.values-track{
  position:absolute; left:0; top:50%;
  display:inline-flex; align-items:center; gap:var(--gap);
  white-space:nowrap; will-change:transform,opacity;
  transform: translateY(-50%);
  animation-duration: var(--speed);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.values-track--a{ animation-name: rfa-marquee-out; }
.values-track--b{ animation-name: rfa-marquee-in; }

/* Natural gap at the handoff */
@keyframes rfa-marquee-out{
  0%   { transform: translate(0, -50%); opacity:1; }
  90%  { opacity:1; }
  100% { transform: translate(calc(-100% - var(--handoff-gap)), -50%); opacity:0; }
}
@keyframes rfa-marquee-in{
  0%   { transform: translate(calc(100% + var(--handoff-gap)), -50%); opacity:0; }
  10%  { opacity:1; }
  100% { transform: translate(0, -50%); opacity:1; }
}

/* Edge fades (unchanged) */
.values-marquee::before,
.values-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(24px,6vw,60px);
  pointer-events:none; z-index:2;
  background: linear-gradient(to right, var(--fade-bg), rgba(255,255,255,0));
}
.values-marquee::before{ left:0; }
.values-marquee::after{ right:0; transform:rotate(180deg); }

/* Pause/focus + reduced motion (unchanged) */
.values-marquee:hover .values-track,
.values-marquee:focus-within .values-track{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .values-track{ position:relative; animation:none; transform:none; left:auto; top:auto; }
  .values-track--b{ display:none; }
  .values-marquee{ height:auto; }
}

/* Text items (unchanged) */
.value{
  flex:0 0 auto;
  font-family:"Lora",serif;
  font-weight:700;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--rfa-purple);
}


    /* Pure text items (no pills) */
    .value{
      flex:0 0 auto;
      font-family:"Lora",serif;
      font-weight:700;
      font-size: clamp(16px, 1.6vw, 20px);
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: .18em;
      color: var(--rfa-purple);
    }

    /* Edge fades */
    .values-marquee::before,
    .values-marquee::after{
      content:""; position:absolute; top:0; bottom:0; width:clamp(24px,6vw,60px);
      pointer-events:none; z-index:2;
       background: linear-gradient(to right, var(--teal-soft, var(--teal-soft)), transparent);
    } 
    .values-marquee::before{ left:0; }
    .values-marquee::after{ right:0; transform:rotate(180deg); }

    /* Pause on hover/focus */
    .values-marquee:hover .values-track,
    .values-marquee:focus-within .values-track{ animation-play-state: paused; }

    /* Reduced motion: one static row */
    @media (prefers-reduced-motion: reduce){
      .values-track{ position:relative; animation:none; transform:none; left:auto; top:auto; }
      .values-track--b{ display:none; }
      .values-marquee{ height:auto; }
    }









 /* ===== RFA — Single-Row Leadership Carousel + Lightbox ===== */
   /* ===== RFA — Single-Row Leadership Carousel + Lightbox (consolidated) ===== */
:root{
  --rfa-purple:#5A2D82; --rfa-gold:#C7A44A; --ink:#171717; --muted:#515151; --surface:#F7F7FB;
  --pad-x:clamp(16px,5vw,72px); --pad-y:clamp(28px,6vw,80px);
  --radius:16px; --shadow:0 10px 26px rgba(0,0,0,.10); --shadow-lg:0 30px 60px rgba(0,0,0,.35);
  --gap:clamp(10px,2.4vw,18px);
}

/* Section + container */
.rfa-leaders-carousel{
  padding-block:var(--pad-y);
  /* Section background */
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.05), transparent 60%),
    linear-gradient(#fff,#fbfbfe);
  /* Use the same layered bg for fade masks so they blend perfectly */
  --fade-bg:
    radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.05), transparent 60%),
    linear-gradient(#fff,#fbfbfe);
}
.rfa-leaders-carousel .container{max-width:1280px;margin:0 auto;padding-inline:var(--pad-x);}

/* Head */
.rfa-leaders-carousel .section-head{text-align:center;margin-bottom:clamp(14px,3.5vw,28px)}
.rfa-leaders-carousel .kicker{font:600 12px/1 Lora,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rfa-purple);margin:0 0 6px}
#leaders-title{font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif;color:var(--rfa-purple);margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.15}
.rfa-leaders-carousel .lead{max-width:760px;margin:8px auto 0;color:var(--muted);font:400 clamp(15px,1.35vw,18px)/1.6 Lora,serif}

/* --- Carousel core --- */
.rfa-leaders-carousel .carousel{position:relative}
.rfa-leaders-carousel .track-wrap{
  position:relative; overflow:hidden; isolation:isolate;
}
/* Edge fades (blending with section background) */
.rfa-leaders-carousel .track-wrap::before,
.rfa-leaders-carousel .track-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:38px; z-index:2; pointer-events:none;
  background: linear-gradient(to right, var(--fade-bg), transparent);
}
.rfa-leaders-carousel .track-wrap::before{ left:0; }
.rfa-leaders-carousel .track-wrap::after { right:0; transform: scaleX(-1); }

.rfa-leaders-carousel .track{
  display:flex; flex-wrap:nowrap; gap:var(--gap);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:6px 4px 10px; scrollbar-width:none; -ms-overflow-style:none;
}
.rfa-leaders-carousel .track::-webkit-scrollbar{display:none}

.rfa-leaders-carousel .slide{
  flex:0 0 auto; width:clamp(200px, 22vw, 280px);
  scroll-snap-align:center; outline:none;
}
.rfa-leaders-carousel .card{
  background:#fff; border:1px solid rgba(199,164,74,.35); border-radius:20px; box-shadow:var(--shadow);
  overflow:hidden; display:grid; gap:8px; padding:10px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rfa-leaders-carousel .card:focus-visible{outline:2px solid rgba(90,45,130,.45); outline-offset:2px}
.rfa-leaders-carousel .card:hover{transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,0,.14)}

.rfa-leaders-carousel .headshot{margin:0; border-radius:14px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 8px 20px rgba(0,0,0,.08)}
.rfa-leaders-carousel .headshot img{width:100%; height:100%; object-fit:cover; display:block}
.rfa-leaders-carousel .meta{display:grid; gap:2px}
.rfa-leaders-carousel .name{margin:0; font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif; font-size:clamp(16px,2vw,20px); color:var(--ink)}
.rfa-leaders-carousel .role{margin:0; color:#403f45; font:400 13px/1.4 Lora,serif}

/* --- Navigation arrows (transparent + glow) --- */
.rfa-leaders-carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  /* Transparent base (no bg/border/shadow) */
  background:none; border:none; box-shadow:none;
  /* Larger hit area + visible glyph */
  padding:6px 10px; color:var(--rfa-purple);
  font-size:clamp(44px, 6vw, 76px); line-height:1; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  transition: opacity .2s ease, text-shadow .2s ease, transform .2s ease;
  opacity:.9; cursor:pointer;
}
.rfa-leaders-carousel .nav:hover{
  opacity:1; text-shadow:0 0 8px rgba(90,45,130,.35), 0 0 14px rgba(199,164,74,.25);
  transform: translateY(-50%) scale(1.06);
}
.rfa-leaders-carousel .nav:focus-visible{
  outline:2px solid rgba(90,45,130,.45); border-radius:8px;
  text-shadow:0 0 8px rgba(90,45,130,.35), 0 0 14px rgba(199,164,74,.25);
}
.rfa-leaders-carousel .nav.prev{ left:4px; }
.rfa-leaders-carousel .nav.next{ right:4px; }

@media (pointer:coarse){
  .rfa-leaders-carousel .nav{ padding:10px 14px; font-size:clamp(52px, 8vw, 84px); }
}

/* --- Lightbox --- */
.lb[hidden]{display:none}
.lb{position:fixed; inset:0; z-index:9999; display:grid; place-items:center}
.lb-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.lb-dialog{
  position:relative; z-index:2; width:min(1100px,92vw); max-height:90vh; background:#fff; border-radius:20px;
  border:1px solid rgba(199,164,74,.45); box-shadow:var(--shadow-lg); padding:clamp(12px,2vw,18px);
  display:grid; grid-template-columns:1fr 360px; gap:clamp(12px,2vw,18px);
}
@media (max-width:900px){ .lb-dialog{grid-template-columns:1fr} }
.lb-media{margin:0; border-radius:14px; overflow:hidden; background:#000; display:grid; place-items:center}
.lb-media img{max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain}
.lb-meta h3{margin:.2rem 0 0; font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif; font-size:clamp(18px,2.4vw,24px); color:var(--ink)}
.lb-meta p{margin:.2rem 0 1rem; color:#403f45; font:400 clamp(14px,1.15vw,16px)/1.6 Lora,serif}
.lb-close,.lb-prev,.lb-next{
  position:absolute; top:10px; width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff;
  cursor:pointer; display:grid; place-items:center; font-size:20px; font-weight:700; color:#333;
}
.lb-close{right:10px} .lb-next{right:58px} .lb-prev{left:10px}

/* Motion prefs */
@media (prefers-reduced-motion:reduce){
  .rfa-leaders-carousel .card{transition:none}
}




/* ===== Force Leadership Meta Text Black (Normal + Hover/Focus) ===== */
.rfa-leaders-carousel .meta,
.rfa-leaders-carousel .name,
.rfa-leaders-carousel .role {
  color: #000 !important; /* Always black */
}

.rfa-leaders-carousel .card:hover .meta,
.rfa-leaders-carousel .card:focus-visible .meta,
.rfa-leaders-carousel .card:hover .name,
.rfa-leaders-carousel .card:focus-visible .name,
.rfa-leaders-carousel .card:hover .role,
.rfa-leaders-carousel .card:focus-visible .role {
  color: #000 !important; /* Stay black on hover/focus */
}








/* ===== RFA — Testimonials (ONE at a time, avatar centered, no card surface) ===== */
    :root{
      --rfa-purple:#5A2D82; --rfa-gold:#C7A44A; --ink:#171717; --muted:#515151; --surface:#F7F7FB;
      --pad-x:clamp(16px,5vw,72px); --pad-y:clamp(28px,6vw,80px);
    }
    .rfa-testimonials.one-up{padding-block:var(--pad-y); background:
      radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.05), transparent 60%),
      linear-gradient(#fff,#fbfbfe);}
    .rfa-testimonials .container{max-width:900px;margin:0 auto;padding-inline:var(--pad-x);}

    .section-head{text-align:center;margin-bottom:clamp(12px,3vw,24px)}
    .kicker{font:600 12px/1 Lora,serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rfa-purple);margin:0 0 6px}
    #t-title{font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif;color:var(--rfa-purple);margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.15}
    .lead{max-width:720px;margin:8px auto 0;color:var(--muted);font:400 clamp(15px,1.35vw,18px)/1.6 Lora,serif}

    /* Stage: stack slides; arrows sit on the sides of this stage */
    .t-stage{position:relative; min-height:clamp(340px,42vh,560px); overflow:visible}
    .t-slide{
      position:absolute; inset:0; display:grid; place-items:start center; text-align:center;
      padding:clamp(8px,2vw,16px);
      opacity:0; transform:translateY(8px); pointer-events:none;
      transition:opacity .45s ease, transform .45s ease; z-index:1;
    }
    .t-slide.is-active{position:relative; opacity:1; transform:none; pointer-events:auto; z-index:1}

    /* No card background/outline; avatar centered on top */
    .t-avatar{
      width:clamp(72px,10vw,96px); height:clamp(72px,10vw,96px); border-radius:50%;
      object-fit:cover; display:block; margin:0 auto clamp(10px,2vw,14px);
      box-shadow:0 8px 22px rgba(0,0,0,.10);
    }
    .t-name{margin:.1rem 0 0; font-family:"Libre Caslon Display","Cormorant Garamond",Georgia,serif;
      color:var(--ink); font-size:clamp(18px,2.1vw,22px)}
    .t-role{margin:.15rem 0 .4rem; color:#403f45; font:400 13px/1.4 Lora,serif}
    .badge{display:inline-block; padding:4px 8px; border:1px solid rgba(199,164,74,.45); border-radius:999px;
      color:var(--rfa-purple); font:700 10px/1 Lora,serif; background:#fff}

    /* Quote with clamp; expands via .is-expanded */
    .t-quote{margin:.3rem 0 0; color:#2a2a2a; font:400 clamp(16px,1.4vw,18px)/1.75 Lora,serif;
      display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden}
    .t-quote.is-expanded{-webkit-line-clamp:unset; overflow:visible}
    .t-actions{margin-top:clamp(8px,1.6vw,12px)}
    .t-more{border:1px solid rgba(90,45,130,.35); background:#fff; color:var(--rfa-purple);
      border-radius:10px; padding:8px 12px; font:700 13px/1 Lora,serif; cursor:pointer}

    /* Side arrows: big, borderless, over the stage sides */
    .t-side{
      position:absolute; top:50%; transform:translateY(-50%);
      background:transparent; border:none; color:var(--rfa-purple);
      font-size:clamp(40px,6vw,64px); line-height:1; font-weight:700; cursor:pointer;
      z-index:50 !important; padding:6px 10px; pointer-events:auto !important;
    }
    .t-prev{left:-6px}
    .t-next{right:-6px}
    /* bring arrows inside on small screens */
    @media (max-width:560px){
      .t-prev{left:6px} .t-next{right:6px}
    }
    .t-side:focus-visible{outline:2px solid rgba(90,45,130,.45); border-radius:8px}
    .t-side:hover{transform:translateY(-50%) scale(1.06)}








































































































/* ===== RFA — Subtle Colour Play (add at END of style.css) ===== */

/* 0) Palette extensions (won’t override your existing tokens) */
:root{
  /* gentle supporting accents */
  --rfa-teal:#1FA6A0;   /* STEM/ICT */
  --rfa-sage:#7AA27A;   /* wellbeing/care */
  --rfa-berry:#8A3B5A;  /* arts/culture */
  /* soft tints for backgrounds/borders */
  --purple-soft: color-mix(in srgb, var(--rfa-purple), #fff 88%);
  --gold-soft:   color-mix(in srgb, var(--rfa-gold),   #fff 88%);
  --teal-soft:   color-mix(in srgb, var(--rfa-teal),   #fff 90%);
  --sage-soft:   color-mix(in srgb, var(--rfa-sage),   #fff 90%);
  --berry-soft:  color-mix(in srgb, var(--rfa-berry),  #fff 90%);
  /* focus ring */
  --rfa-focus:   color-mix(in srgb, var(--rfa-purple), #fff 35%);
}

/* 1) Section alternates (apply on big blocks) */
.section--alt-purple{ background: linear-gradient(#fff, var(--purple-soft)); }
.section--alt-gold  { background: linear-gradient(#fff, var(--gold-soft));   }
.section--alt-teal  { background: linear-gradient(#fff, var(--teal-soft));   }
.section--alt-sage  { background: linear-gradient(#fff, var(--sage-soft));   }
.section--alt-berry { background: linear-gradient(#fff, var(--berry-soft));  }

/* 2) Premium heading accents */
.h-underline{
  display:inline-block; padding-bottom:.2rem;
  background: linear-gradient(var(--rfa-gold), var(--rfa-gold)) 0 100%/48px 2px no-repeat;
}
.grad-text{
  background: linear-gradient(90deg, var(--rfa-purple), var(--rfa-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kicker--berry{ color: var(--rfa-berry); }
.kicker--teal { color: var(--rfa-teal);  }
.kicker--sage { color: var(--rfa-sage);  }

/* 3) Quiet dividers & borders */
.rfa-hr{ height:1px; border:0;
  background: linear-gradient(90deg, transparent, var(--rfa-gold), transparent);
}
.border-soft{ border:1px solid color-mix(in srgb, #000, #fff 92%); border-radius:12px; }

/* 4) Card whisper effects (works with your existing .offer-card/.programme-card) */
.card-soft{
  background:#fff; border-radius:14px; 
  border:1px solid color-mix(in srgb, #000, #fff 92%);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.card-soft:hover{ box-shadow: 0 14px 32px rgba(0,0,0,.12); }

/* 5) Buttons (reuse your .btn — add subtle & gold variants) */
.btn--subtle{
  background: var(--purple-soft);
  color: var(--rfa-purple);
  border-color: color-mix(in srgb, var(--rfa-purple), #fff 70%);
  box-shadow:none;
}
.btn--gold{
  background: var(--rfa-gold);
  color:#1f1f1f;
}

/* 6) Tiny pops for lists, icons, and links */
ul.brand-dots li::marker{ color: var(--rfa-gold); }
a.link-soft{
  color: var(--rfa-purple); text-decoration:none; border-bottom:1px solid transparent;
}
a.link-soft:hover{ border-bottom-color: color-mix(in srgb, var(--rfa-gold), #000 10%); }

/* 7) Subject badges (great for Clubs/Subjects/Tags) */
.badge{ display:inline-block; padding:.28rem .6rem; border-radius:999px; font-size:.82rem; font-weight:600; }
.badge--stem { background: var(--teal-soft);  color:#083937; }
.badge--arts { background: var(--berry-soft); color:#3a1523; }
.badge--care { background: var(--sage-soft);  color:#2c432d; }

/* 8) Accessibility: stronger keyboard focus */
:where(a,button,input,select,textarea,.programme-card,.offer-card):focus-visible{
  outline:3px solid var(--rfa-focus); outline-offset:2px; border-radius:8px;
}

/* 9) Optional: alternate animated background tone */
.rfa-animated-bg.alt{ color: var(--rfa-gold); opacity:.12; }


/* ===== Section backgrounds using your new tokens ===== */

/* Testimonials: soft purple wash */
.rfa-testimonials.one-up{
  /* padding is already in your component; keep if you need more vertical breath */
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--rfa-purple), #fff 94%), transparent 60%),
    linear-gradient(#fff, var(--purple-soft));
}

/* News & Events: soft gold wash */
.rfa-news{
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--rfa-gold), #fff 92%), transparent 60%),
    linear-gradient(#fff, var(--gold-soft));
}

/* Optional: themed kickers (matches your palette) */
.rfa-testimonials .kicker{ color: var(--rfa-teal); } /* community vibe */
.rfa-news .kicker{ color: var(--rfa-berry); }       /* editorial vibe */

/* Optional: headings for extra polish */
.rfa-testimonials .section-head h2{ /* quiet underline */
  display:inline-block; padding-bottom:.2rem;
  background: linear-gradient(var(--rfa-gold), var(--rfa-gold)) 0 100%/48px 2px no-repeat;
}
.rfa-news .section-head h2{ /* gradient ink */
  background: linear-gradient(90deg, var(--rfa-purple), var(--rfa-gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}







/* ===== Arrows: Transparent base + hover glow ===== */

/* Leadership carousel + Testimonials */
.rfa-leaders-carousel .nav.prev,
.rfa-leaders-carousel .nav.next,
.rfa-testimonials .t-side {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--rfa-purple);       /* brand purple for glyphs */
  opacity: 0.9;                   /* a bit softer than full black */
  transition: opacity .2s ease, text-shadow .2s ease, transform .2s ease;
}

/* Hover/focus: subtle glow for legibility */
.rfa-leaders-carousel .nav.prev:hover,
.rfa-leaders-carousel .nav.next:hover,
.rfa-testimonials .t-side:hover {
  opacity: 1;
  text-shadow: 0 0 8px rgba(90,45,130,.35), 0 0 14px rgba(199,164,74,.25);
  transform: translateY(-50%) scale(1.08); /* keeps center + enlarges slightly */
}

.rfa-leaders-carousel .nav.prev:focus-visible,
.rfa-leaders-carousel .nav.next:focus-visible,
.rfa-testimonials .t-side:focus-visible {
  outline: 2px solid rgba(90,45,130,.55);
  border-radius: 8px;
  text-shadow: 0 0 8px rgba(90,45,130,.35), 0 0 14px rgba(199,164,74,.25);
}

















/* style.css for Header*/
/* ===== Fonts ===== */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display:wght@400;700&family=Lora:wght@400;500;600&display=swap");

/* ===== Tokens ===== */
:root{
  --rfa-purple:#5A2D82;
  --rfa-gold:#C7A44A;
  --ink:#171717;
  --muted:#555;
  --header-h:72px;
  --radius:14px;
  --shadow:0 10px 28px rgba(0,0,0,.10);
}

/* ===== Base ===== */
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px;}

.navbar{
  position:fixed; top:0; left:0; right:0; z-index:999;
  padding-block:10px;
  background:transparent;
  transition:background .28s ease, box-shadow .28s ease, border-color .28s ease;
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:#ffffff;                  /* solid, not transparent */
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  backdrop-filter:none;                /* remove any blur when scrolled */
  -webkit-backdrop-filter:none;
}
}
.navbar .container{
  max-width:min(1240px, 92vw);
  margin:0 auto; display:flex; align-items:center; gap:18px;
  padding-inline:clamp(16px,4vw,64px);
}

/* ===== Brand ===== */
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark img{height:36px; width:auto; display:block;}
@media (min-width:992px){ .brand-mark img{height:44px;} }
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-name{font-family:"Libre Caslon Display", Georgia, serif; font-weight:700; font-size:clamp(16px,2.2vw,24px); letter-spacing:.01em; color:#fff;}
.brand-tagline{font-family:"Lora", serif; font-weight:500; font-size:clamp(10px,1.4vw,12px); color:rgba(255,255,255,.85); margin-top:2px; letter-spacing:.02em;}
.navbar.scrolled .brand-name{color:var(--ink);}
.navbar.scrolled .brand-tagline{color:var(--muted);}
@media (max-width:420px){ .brand-tagline{display:none;} }

/* ===== Header actions (desktop) ===== */
.header-actions{display:none; align-items:center; gap:12px; margin-left:auto;}
@media (min-width:992px){ .header-actions{display:flex;} }

.header-social{display:flex; gap:8px;}
.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:saturate(120%) blur(4px);
  border:1px solid rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.social-btn svg{width:18px; height:18px; fill:#fff;}
.navbar.scrolled .social-btn{ background:#f5f5f8; border-color:#e9e9f2; }
.navbar.scrolled .social-btn svg{ fill:#333; }
.social-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.12); }

.btn-portal{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:12px;                  /* <- changed from 999px (pill) */
  background:var(--rfa-gold);
  color:#1a1a1a; text-decoration:none;
  font-family:"Lora", serif; font-weight:700; letter-spacing:.01em;
  border:1px solid color-mix(in oklab, var(--rfa-gold) 70%, #000 10%);
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-portal:hover{
  filter:brightness(.96);
  box-shadow:0 8px 24px rgba(199,164,74,.35);
  transform:translateY(-1px);
}

/* ===== Menu (desktop) ===== */
.main-menu-wrapper{display:flex; align-items:center; margin-left:auto;}
.menu{list-style:none; margin:0; padding:0; display:flex; gap:4px;}
.menu > .menu-item{position:relative;}
.menu > .menu-item > a{
  font-family:"Lora", serif; font-weight:600; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; margin:6px 2px; border-radius:12px;
  text-decoration:none; line-height:1.2;
  color:#fff; /* transparent header */
  transition:background .18s ease, color .18s ease;
}
.navbar.scrolled .menu > .menu-item > a{ color:var(--ink); }
.menu > .menu-item > a:hover,
.menu > .menu-item:focus-within > a{ background:rgba(255,255,255,.18); }
.navbar.scrolled .menu > .menu-item > a:hover,
.navbar.scrolled .menu > .menu-item:focus-within > a{ background:rgba(0,0,0,.06); }

/* Desktop dropdowns — purple panels */
.submenu, .sub-menu{
  position:absolute; top:100%; left:0; min-width:260px; z-index:20;
  background:var(--rfa-purple); color:#fff; border-radius:14px;
  border:1px solid color-mix(in oklab, var(--rfa-purple) 90%, #000 10%);
  box-shadow:0 18px 36px rgba(38,17,56,.35);
  padding:8px; display:none;
}
.menu > .menu-item:hover > .submenu,
.menu > .menu-item:hover > .sub-menu,
.menu > .menu-item:focus-within > .submenu,
.menu > .menu-item:focus-within > .sub-menu{ display:block; }

.submenu .menu-item, .sub-menu .menu-item{ display:block; }
.submenu a, .sub-menu a{
  display:block; color:#fff; text-decoration:none;
  font-family:"Lora", serif; font-weight:500;
  padding:12px 14px; margin:4px; border-radius:10px;
  line-height:1.2; min-height:44px;
}
.submenu a:hover, .sub-menu a:hover{
  background:color-mix(in oklab, #ffffff 18%, var(--rfa-purple) 82%);
}

/* Nested submenu (flyout) */
.submenu .submenu, .sub-menu .sub-menu{ left:100%; top:0; }

/* ===== Transparent contrast helpers ===== */
.navbar:not(.scrolled) .btn-portal{ border-color:rgba(255,255,255,.35); }
.navbar:not(.scrolled) .btn-portal{ background:var(--rfa-gold); color:#1a1a1a; }
.navbar:not(.scrolled) .header-social .social-btn{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25); }

/* ===== Hamburger ===== */
.menu-toggle{ display:none; background:none; border:0; cursor:pointer; margin-left:auto; }
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
  width:26px; height:3px; background:#fff; display:block; position:relative; transition:.3s ease;
}
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{ content:""; position:absolute; left:0; }
.menu-toggle .hamburger::before{ top:-8px; }
.menu-toggle .hamburger::after{ top:8px; }
.navbar.scrolled .menu-toggle .hamburger,
.navbar.scrolled .menu-toggle .hamburger::before,
.navbar.scrolled .menu-toggle .hamburger::after{ background:var(--ink); }
.menu-toggle.open .hamburger{ background:transparent; }
.menu-toggle.open .hamburger::before{ transform:rotate(45deg); top:0; }
.menu-toggle.open .hamburger::after{ transform:rotate(-45deg); top:0; }

/* ===== Mobile drawer ===== */
@media (max-width: 992px){
  .header-actions{ display:none; } /* hide desktop actions */
  .menu-toggle{ display:block; }

  .main-menu-wrapper{
    position:fixed; inset:0 auto 0 0; width:min(80vw, 420px); height:100dvh;
    background:linear-gradient(180deg, #20152B, #2B1D3E); /* deep purple slate */
    color:#fff; transform:translateX(-100%); transition:transform .28s ease;
    display:flex; flex-direction:column; padding:14px 12px 0; z-index:1000;
    box-shadow:var(--shadow);
  }
  .main-menu-wrapper.open{ transform:translateX(0); }

  .menu{ flex-direction:column; gap:2px; }
  .menu > .menu-item > a{
    color:#fff; margin:0; padding:14px 12px; border-radius:10px;
  }
  /* Mobile accordions */
  .menu .menu-item-has-children > a{ position:relative; }
  .menu .menu-item-has-children > a::after{
    content:"▾"; position:absolute; right:10px; font-size:14px; opacity:.9;
  }
  .menu .submenu, .menu .sub-menu{
    position:relative; top:auto; left:auto; min-width:unset; border:0; box-shadow:none;
    background:transparent; padding:0; margin:0 0 8px 0; display:none;
  }
  .menu .menu-item.open > .submenu,
  .menu .menu-item.open > .sub-menu{ display:block; }
  .menu .submenu a, .menu .sub-menu a{ padding:12px 16px 12px 22px; margin:2px 0; background:rgba(255,255,255,.08); }

  /* Drawer footer pinned at bottom */
  .drawer-footer{
    margin-top:auto; padding:12px 8px 16px; display:grid; gap:10px;
    position:sticky; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.25) 40%, #1f1530 90%);
    backdrop-filter:saturate(120%) blur(6px);
  }
  .drawer-footer .btn-portal{ width:100%; justify-content:center; }
  .drawer-footer .header-social{ justify-content:center; }
}

/* ===== Backdrop for drawer ===== */
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900;
}
.menu-backdrop[hidden]{ display:none; }

/* ===== Focus rings ===== */
:where(.brand, .menu a, .btn-portal, .social-btn, .menu-toggle):focus-visible{
  outline:2px solid color-mix(in oklab, var(--rfa-gold) 70%, #000 10%);
  outline-offset:2px; border-radius:12px;
}






/* Ensure solid header after 50px scroll */
body .navbar.scrolled {
  background-color:#fff !important;   /* force a solid bg */
  background:#fff !important;         /* kill any gradients */
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* If any pseudo-layer is used for a transparent/gradient look, disable it on scroll */
body .navbar.scrolled::before,
body .navbar.scrolled::after {
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* If you still have the old 'rfa-header skin' rules, neutralize them when scrolled */
body .navbar.rfa-header.scrolled {
  --bg1: #fff; 
  --bg2: #fff;  /* stops translucent skin gradients */
}

/* Astra Transparent Header (if enabled) – force solid on scroll */
.ast-theme-transparent-header .site-header.navbar.scrolled,
.ast-theme-transparent-header .main-header-bar.navbar.scrolled {
  background:#fff !important;
}










/* ====== HARD OVERRIDES: Sticky header solid + safe stacking ====== */

/* Solid header when scrolled */
body .navbar.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Only allow transparency at the very top */
body .navbar:not(.scrolled){ background:transparent !important; }

/* Kill any gradient/overlay pseudo-elements that may keep things transparent */
body .navbar.scrolled::before,
body .navbar.scrolled::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
}

/* Ensure header sits above content; drawer/backdrop stack correctly */
.navbar{ z-index:1000 !important; }
.main-menu-wrapper{ z-index:1001; }
.menu-backdrop{ z-index:900; }

/* Backdrop must be truly hidden when not used */
.menu-backdrop[hidden]{ display:none !important; }
.menu-backdrop{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
.menu-backdrop.is-visible{ opacity:1; pointer-events:auto; }

/* ====== Avoid content being hidden under fixed header ====== */
/* JS sets --header-h; this applies a safe offset so top sections show */
body.offset-under-header{
  padding-top: var(--header-h, 72px) !important;
}

/* Portal Login button: rectangular (not pill) */
.btn-portal{
  border-radius:12px !important;  /* not circular */
}







/***** === RFA Header & Reveal FIX PACK (place LAST) === *****/

/* 1) Force solid header after 50px (wins over any earlier transparency/skins) */
body .navbar.scrolled {
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body .navbar.scrolled::before,
body .navbar.scrolled::after { content:none !important; }

/* If you still have the old “skin” variables, neutralize them when scrolled */
body .navbar.rfa-header.scrolled { --bg1:#fff; --bg2:#fff; }

/* 2) Safety: never keep sections invisible if the reveal script isn't running */
.reveal { opacity:1 !important; transform:none !important; filter:none !important; }

/* 3) Make sure the mobile drawer backdrop can actually hide/show */
.menu-backdrop[hidden] { display:none !important; }

/* 4) Ensure content isn’t buried under the fixed header */
:root { --header-safe: clamp(72px, 10vh, 96px); }
#main { display:block; padding-top: var(--header-safe); }





/* ==== EMERGENCY VISIBLE HEADER (place last) ==== */
body .navbar{
  display:block !important;
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:100000 !important;          /* jump above hero/backdrops */
  background:#fff !important;          /* solid always (for now) */
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
  opacity:1 !important;
  transform:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* make text/icons readable on white */
body .navbar .brand-name,
body .navbar .menu > .menu-item > a{ color:#171717 !important; }
body .navbar .menu-toggle .hamburger,
body .navbar .menu-toggle .hamburger::before,
body .navbar .menu-toggle .hamburger::after{ background:#171717 !important; }
body .navbar .header-social svg{ fill:#171717 !important; }

/* kill any header overlay layers */
body .navbar::before,
body .navbar::after{ content:none !important; display:none !important; }

/* if a menu backdrop is stuck open, hide it */
.menu-backdrop{ display:none !important; }

/* ensure content isn't hidden under the fixed header */
:root{ --header-safe: clamp(72px, 10vh, 96px); }
#main{ padding-top: var(--header-safe) !important; }

/* if hero/sections used a reveal animation, keep them visible */
.reveal{ opacity:1 !important; transform:none !important; filter:none !important; }

/* logged-in admin bar offset so the header isn't hidden under it */
@media (min-width:783px){
  body.admin-bar .navbar{ top:32px !important; }
}
@media (max-width:782px){
  body.admin-bar .navbar{ top:46px !important; }
}






/* --- 1) Show drawer footer only on mobile --- */
.drawer-footer{ display:none; }              /* hide on desktop */
@media (max-width:992px){
  .drawer-footer{ display:grid; }            /* only visible in the mobile drawer */
  .header-actions{ display:none; }           /* desktop actions hidden on mobile */
}

/* --- 2) Keep everything on one row, correct order --- */
.navbar .container{
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
}
.brand{ order:1; }
.main-menu-wrapper{ order:2; margin-left:auto; }   /* nav pushes actions to the edge */
.header-actions{ order:3; margin-left:12px; }      /* actions sit after the menu */
.menu-toggle{ order:4; margin-left:8px; }          /* hamburger last */

/* Ensure the menu itself doesn't wrap weirdly */
.menu{ display:flex; flex-wrap:nowrap; gap:4px; }
.menu > .menu-item{ white-space:nowrap; }

/* --- 3) Keep header SOLID on scroll (not transparent) --- */
body .navbar.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
body .navbar.scrolled::before, body .navbar.scrolled::after{ content:none !important; }

/* (Optional) If you still see transparency, keep the header solid always for now: */
/* body .navbar{ background:#fff !important; } */









/* === RFA HEADER PATCH (place LAST) ====================================== */

/* 0) Ensure header and its contents don’t clip dropdowns */
.navbar, .navbar .container { overflow: visible !important; }

/* 1) Solid (non-transparent) once scrolled */
body .navbar.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body .navbar.scrolled::before,
body .navbar.scrolled::after{ content:none !important; }

/* 2) Desktop dropdowns: rich purple panel, white links, comfy spacing */
@media (min-width: 993px){
  .navbar .menu > li { position: relative; }

  /* Target both WP's .sub-menu and any .submenu class */
  .navbar .menu > li > ul,
  .navbar .menu > li > .submenu,
  .navbar .menu > li > .sub-menu{
    position:absolute; top:100%; left:0;
    display:none; z-index: 2147482000;    /* sit above hero */
    min-width:260px; max-width:360px;     /* keep it neat */
    padding:8px;
    background:#5A2D82 !important;        /* brand purple (solid) */
    color:#fff !important;
    border-radius:14px;
    border:1px solid rgba(0,0,0,.18);
    box-shadow:0 18px 36px rgba(38,17,56,.35);
  }
  .navbar .menu > li:hover > ul,
  .navbar .menu > li:hover > .submenu,
  .navbar .menu > li:hover > .sub-menu,
  .navbar .menu > li:focus-within > ul,
  .navbar .menu > li:focus-within > .submenu,
  .navbar .menu > li:focus-within > .sub-menu{
    display:block;
  }

  .navbar .menu > li > ul > li > a,
  .navbar .menu > li > .submenu > li > a,
  .navbar .menu > li > .sub-menu > li > a{
    display:block; color:#fff !important; text-decoration:none;
    font-family:"Lora", serif; font-weight:500;
    padding:12px 14px; margin:4px; border-radius:10px;
    line-height:1.2; min-height:44px;     /* good tap target */
    white-space:normal;
  }
  .navbar .menu > li > ul > li > a:hover,
  .navbar .menu > li > .submenu > li > a:hover,
  .navbar .menu > li > .sub-menu > li > a:hover{
    background:rgba(255,255,255,.12);
  }

  /* Nested flyout (if any) */
  .navbar .menu > li > ul .sub-menu,
  .navbar .menu > li > ul .submenu{
    left:100%; top:0;
  }
}

/* 3) Keep header and top row tidy */
.navbar .container{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
.menu{ display:flex; flex-wrap:nowrap; gap:4px; }
.menu > .menu-item{ white-space:nowrap; }




/* === Final toggle styles (place LAST) === */

/* Top-of-page (transparent) */
body .navbar{
  background:transparent !important;
  border-bottom:1px solid transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* After 50px scroll (solid) */
body .navbar.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
}

/* If any overlay existed on the header, kill it so the background can change */
body .navbar::before,
body .navbar::after{ content:none !important; display:none !important; }









/* === Header side padding (stops logo/portal touching edges) === */
body .navbar{ padding-block:10px; }  /* keeps the bar comfy */

body .navbar > .container{
  /* center the row and add left/right padding */
  width: min(1240px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 64px) !important;
  box-sizing: border-box;
}

/* Respect iOS safe-area notches too */
@supports (padding: max(0px)) {
  body .navbar > .container{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}


/* Keep the brand title on ONE line (desktop) */
.brand{ flex:0 0 auto; }                    /* don't let the brand shrink */
.brand-name{
  white-space: nowrap;                      /* never wrap */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Let the menu take the flexible space instead of squeezing the brand */
.main-menu-wrapper{ flex:1 1 auto; min-width:0; }
.header-actions{ flex:0 0 auto; }

/* Prevent the whole header row from wrapping weirdly */
.navbar .container{ display:flex; flex-wrap:nowrap; gap:14px; }

/* If space gets tight, slightly reduce the brand font-size (but still single-line) */
@media (max-width: 1200px){
  .brand-name{ font-size: clamp(16px, 1.6vw, 20px); letter-spacing:.005em; }
}

/* On very small screens we already stack/hide tagline — no change needed */









/* === One-bar header: hard layout + spacing (place LAST) ================== */

/* 1) Container = single flex row with breathing room */
body .navbar > .container{
  width: min(1240px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 64px);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

/* 2) Brand never shrinks; menu owns the flexible middle */
.brand{ flex:0 0 auto; min-width:max-content; }
.main-menu-wrapper{ flex:1 1 auto; min-width:0; } /* <- lets the menu compress safely */

/* 3) Menu spacing + prevent touching the actions on the right */
.menu{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap: clamp(8px, 1.4vw, 16px);
  padding-right: clamp(8px, 2vw, 32px);  /* buffer before socials/portal */
}
.menu > .menu-item{ white-space:nowrap; }
.menu > .menu-item > a{ padding:10px clamp(8px, 1vw, 14px); }

/* 4) Actions block (socials + Portal) pinned to the right */
.header-actions{
  order:3; flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  margin-left: clamp(16px, 2vw, 32px);   /* clear gap from the menu */
  white-space:nowrap;
}

/* Kill any rogue positioning that could make icons overlap the menu */
.header-social, .header-social *{
  position: static !important;
  float: none !important;
}

/* Social buttons sizing */
.header-social{ display:flex; gap:8px; }
.social-btn{
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
}

/* Portal button stays tidy & one line */
.btn-portal{
  padding:10px 16px; border-radius:12px;
  white-space:nowrap; word-break:keep-all; overflow-wrap:normal;
}

/* 5) Gentle squeeze rules (before mobile) so nothing collides */
@media (max-width: 1280px){
  .brand-name{ font-size: clamp(16px, 1.6vw, 22px); }
  .menu > .menu-item > a{ padding:8px 10px; font-size:.96rem; }
}
@media (max-width: 1140px){
  .menu{ gap:6px; }
  .menu > .menu-item > a{ padding:8px 9px; font-size:.92rem; }
}
/* If space still gets tight on wide tablets, hide desktop socials
   (they’re still in the mobile drawer). */
@media (max-width: 1080px){
  .header-social{ display:none; }
}

/* 6) Make sure the hamburger stays at the far right */
.menu-toggle{ flex:0 0 auto; margin-left:8px; }




/* ===== Hero Image Sizing ===== */
.rfa-hero__media {
  position: relative;
  height: 70vh;            /* take 70% of viewport height */
  width: 100%;             /* full width inside its grid cell */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #eae9f5;
}

.rfa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* keeps image nicely cropped */
  display: block;
}


@media (max-width: 768px) {
  .rfa-hero__media {
    height: 50vh;   /* slightly shorter on mobile */
  }
}










/* === Header text color → brand purple (place LAST) === */
:root{ --rfa-purple:#5A2D82; }

/* Brand + tagline + top-level menu links */
body .navbar .brand-name,
body .navbar .brand-tagline,
body .navbar .menu > .menu-item > a{
  color: var(--rfa-purple) !important;
}

/* Keep it purple both before and after scroll */
body .navbar:not(.scrolled) .menu > .menu-item > a,
body .navbar.scrolled .menu > .menu-item > a,
body .navbar:not(.scrolled) .brand-name,
body .navbar.scrolled .brand-name,
body .navbar:not(.scrolled) .brand-tagline,
body .navbar.scrolled .brand-tagline{
  color: var(--rfa-purple) !important;
}

/* Social icons in the header */
body .navbar .header-social svg{ fill: var(--rfa-purple) !important; }

/* Hamburger (mobile) */
body .navbar .menu-toggle .hamburger,
body .navbar .menu-toggle .hamburger::before,
body .navbar .menu-toggle .hamburger::after{
  background: var(--rfa-purple) !important;
}

/* Keep submenu items WHITE on the purple dropdown background */
body .navbar .sub-menu a,
body .navbar .submenu a{ color:#fff !important; }



/* ===== Hero: Solid background variants (school-friendly) ===== */
.bg-purple { background: #5A2D82; }
.bg-gold   { background: #C7A44A; }
.bg-blue   { background: #3B82F6; }
.bg-green  { background: #10B981; }
.bg-berry  { background: #7C3AED; }

/* optional: subtle line-art patterns per bg (swap URLs as you like) */
.bg-purple { background: #5A2D82 url('/wp-content/uploads/2025/09/bg-books.svg') center/140px repeat; }
.bg-gold   { background: #C7A44A url('/wp-content/uploads/2025/09/bg-stars.svg') center/160px repeat; }
.bg-blue   { background: #3B82F6 url('/wp-content/uploads/2025/09/bg-ruler.svg') center/140px repeat; }
.bg-green  { background: #10B981 url('/wp-content/uploads/2025/09/bg-pencils.svg') center/160px repeat; }
.bg-berry  { background: #7C3AED url('/wp-content/uploads/2025/09/bg-grid.svg') center/140px repeat; }

/* Smoothly transition the hero surface when bg class changes */
.rfa-hero{
  transition: background-color .6s ease, background-image .6s ease, background-size .6s ease;
}

/* ===== Slider base (no glitch) ===== */
.hero-slider{ position:relative; aspect-ratio:16/10; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-soft); }
.hero-slide{
  position:absolute; inset:0; opacity:0;
  display:grid; place-items:center;
  transition: opacity .6s ease;
}
.hero-slide.is-active{ opacity:1; }

/* image + Ken Burns on entry */
.hero-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform 3.5s ease;
}
.hero-slide.is-active img{
  transform: scale(1.08);
}

/* ===== Angled wipe animation ===== */
.hero-slide.entering::after{
  content:""; position:absolute; inset:-10% -10% -10% -10%; /* oversize to avoid edges */
  background:#ffffff;         /* curtain; use hero bg color if you want a color wipe */
  transform: translateX(0) rotate(-8deg);
  transform-origin: left center;
  animation: rfaWipe 650ms ease forwards;
  mix-blend-mode: normal;     /* keep it clean over the image */
}
@keyframes rfaWipe{
  0%   { transform: translateX(0)       rotate(-8deg); }
  100% { transform: translateX(120%)    rotate(-8deg); }
}

/* Reduced motion: keep a simple fade */
@media (prefers-reduced-motion: reduce){
  .hero-slide img{ transition:none; transform:none; }
  .hero-slide.entering::after{ animation:none; display:none; }
}



























/* === Footer: center the middle column, equal space on both sides === */
.rfa-footer__inner{
  /* left and right flex equally; middle has a comfortable fixed range */
  grid-template-columns: 1fr clamp(260px, 24vw, 360px) 1fr;
  gap: clamp(32px, 3vw, 56px);
  align-items: start;
}

/* Ensure the 2nd item is the center column and doesn't hug a side */
.rfa-footer__inner > *:nth-child(2){
  grid-column: 2;                /* explicitly place it in the middle track */
  justify-self: center;          /* keep it centered inside its track */
  width: 100%;
  max-width: clamp(260px, 24vw, 360px);
}

/* Keep side columns in their tracks */
.rfa-footer__inner > *:nth-child(1){ grid-column: 1; }
.rfa-footer__inner > *:nth-child(3){ grid-column: 3; }

/* Responsive (unchanged) */
@media (max-width: 900px){
  .rfa-footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .rfa-footer__inner{ grid-template-columns: 1fr; }
}






/* Light, high-contrast backgrounds for black text */
.bg-red-soft    { background: #FBE5E8; } /* soft rosy red (Slide 1)   */
.bg-gold-soft   { background: #F6EED9; } /* pale school gold (Slide 2)*/
.bg-blue-soft   { background: #E6F0FF; } /* gentle academy blue (3)   */
.bg-green-soft  { background: #E7F6EE; } /* mint classroom green (4)  */
.bg-purple-soft { background: #EFE7FF; } /* soft royal purple (Slide 5) */

/* Smooth change when the JS swaps bg classes */
.rfa-hero{
  transition: background-color .6s ease, background-image .6s ease, background-size .6s ease;
  color: #171717; /* ensure text stays black */
}



/* --- HERO: make the right media/card see-through --- */
.rfa-hero__media,
.hero-slider{
  background: transparent !important;   /* was #eae9f5 / #fff */
}

/* optional: remove the card look entirely */
.rfa-hero__media{ box-shadow: none; }   /* delete this line if you still want the soft shadow */





/* kill the white curtain; keep the fade/zoom */
.hero-slide.entering::after{ background: transparent !important; }

/* if you still have the older class name around */
.glitch-slide.entering::after{ background: transparent !important; }











































/* ===== Reusable animated background canvas ===== */
/* ===== RFA Animated Background (Elementor-safe) ===== */
:root{
  --rfa-purple:#5A2D82;
  --rfa-gold:#C7A44A;
}
.rfa-animated-bg{
  position: fixed; inset: 0; pointer-events: none;
  z-index: -1;
  opacity: var(--bg-opacity, .18);
  color: var(--rfa-purple);
}
.rfa-animated-bg svg{ width: 200%; height: 200%; display:block; }

@keyframes rfaBgDrift { from{ transform: translate3d(-8%, -6%, 0) } to{ transform: translate3d(0,0,0) } }
.rfa-animated-bg--gridstars svg{ animation: rfaBgDrift var(--speed, 200s) linear infinite alternate; }

@media (prefers-reduced-motion: reduce){
  .rfa-animated-bg svg{ animation: none !important; transform: none !important; }
}

/* If the background doesn't show behind content, bump wrappers above it: */
.elementor-location-header, .elementor-location-footer, .site, #content {
  position: relative; z-index: 1;
}








/* base crossfade: 5s */
:root{ --fade: 5s; }

.glitch-slider{ position:relative; border-radius: var(--radius-xl); overflow:hidden; }
.glitch-slide{ position:absolute; inset:0; opacity:0; transition: opacity var(--fade) ease; }
.glitch-slide.is-active{ opacity:1; }

.glitch-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* hero bg animates when bg-* class changes */
.rfa-hero{
  background: var(--hero-bg, #fff);
  transition: background-color var(--fade) ease, background-image var(--fade) ease;
}
.bg-red-soft    { --hero-bg:#FBE5E8; }
.bg-blue-soft   { --hero-bg:#E6F0FF; }
.bg-gold-soft   { --hero-bg:#F6EED9; }
.bg-purple-soft { --hero-bg:#EFE7FF; }
.bg-green-soft  { --hero-bg:#E7F6EE; }

/* ===== Transition 4: STRIPES ===== */
:root{ --stripe: 22px; --gap: 12px; }
.t-stripes .glitch-slide.entering::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.9) 0 var(--stripe),
      transparent var(--stripe) calc(var(--stripe) + var(--gap))
    );
  transform: translateX(-120%);
  animation: stripesSweep var(--fade) ease forwards;
}
@keyframes stripesSweep{ to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce){
  .glitch-slide{ transition: opacity .4s ease; }
  .t-stripes .glitch-slide.entering::after{ display:none; }
}




/* Allow per-slide focus + zoom anchor */
.glitch-slide img{
  object-fit: cover;
  object-position: var(--obj-pos, 50% 50%);
  transform-origin: var(--zoom-origin, 50% 50%); /* keeps Ken Burns anchored */
}

/* Top-right preset for any slide */
.glitch-slide.focus-top-right img{
  --obj-pos: 85% 15%;     /* adjust if you need even more to the corner */
  --zoom-origin: 100% 0%; /* zoom from the top-right */
}

/* (optional) lighter zoom on critical slides to avoid edge trim */
.glitch-slide.zoom-soft.is-active img{ --active-scale: 1.03; }





.glitch-slide img{ transform: scale(1); transition: transform var(--kenburns, 6s) ease; }
.glitch-slide.is-active img{ transform: scale(var(--active-scale, 1.06)); }


/* === Fix 1: Let the HERO own the header offset so its color reaches the top === */
/* Remove the global top padding ONLY on pages where the hero is first */
body.home #main{ padding-top: 0 !important; } /* change .home to your page body class if needed */

/* Pull hero up under the header and add the same space inside the hero */
body.home .rfa-hero:first-of-type{
  margin-top: calc(var(--header-safe, 88px) * -1);
  padding-top: calc(var(--header-safe, 88px) + var(--pad-y));
}

/* (safety) make sure hero paints underneath the header area cleanly */
.rfa-hero{ position: relative; z-index: 0; }

/* === Fix 2: Sticky header behaviour === */
/* Transparent at the very top, SOLID after 50px scroll */
body .navbar{
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
body .navbar.scrolled{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
}

/* The page wrapper should NOT add space */
body.home #main{ padding-top: 0 !important; }

/* Hero handles the space under the fixed header using padding (no margin) */
body.home .rfa-hero:first-of-type{
  margin-top: 0 !important; /* ensure no stray margins */
  /* header height + your normal hero vertical padding */
  padding-top: calc(var(--header-safe, var(--header-h, 72px)) + var(--pad-y));
}




/* Home (or the page with the hero at the top) */
body.home #main{ padding-top:0 !important; }          /* wrapper adds no gap */
body.home .rfa-hero:first-of-type{
  margin-top:0 !important;                             /* no negative margins */
  padding-top: calc(var(--header-safe, 72px) + var(--pad-y));
}




/* Transparent at top */
body .navbar{
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Solid white after 50px (JS adds .scrolled) */
body .navbar.scrolled{
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;
}


























/* ===== RFA palette ===== */
:root{
  --rfa-purple:#5a2a82;     /* primary */
  --rfa-gold:#d4af37;       /* accent */
  --rfa-blue:#1f5eff;       /* requested blue (no green anywhere) */
  --rfa-bg:#fbfbfe;
}

/* Section spacing */
.rfa-block{ padding-block: 3.5rem; background: linear-gradient(#fff, var(--rfa-bg)); }

/* Kicker */
.kicker{ font-weight:700; letter-spacing:.03em; margin:0 0 .25rem; }
.kicker--blue{ color: var(--rfa-blue); }

/* ===== FAQ Accordion (premium) ===== */
.faq-accordion{ max-width: 860px; }
.faq-item{
  border: 1px solid rgba(31,94,255,0.25);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover{ box-shadow: 0 10px 28px rgba(31,94,255,.12); border-color: rgba(31,94,255,.45); }

.faq-question{
  width:100%;
  padding: 18px 22px;
  background: linear-gradient(0deg, var(--rfa-purple), #6a38a0);
  color:#fff;
  border:none;
  text-align:left;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-question::after{
  content:"›";
  transform: rotate(90deg);
  transition: transform .2s ease, color .2s ease;
  font-size:1.25rem;
  color: var(--rfa-gold);
  margin-left:1rem;
}
.faq-item .faq-question:focus{ outline: 2px solid var(--rfa-blue); outline-offset: 2px; }
.faq-item:not(.open) .faq-question::after{ transform: rotate(0); }

.faq-answer{
  max-height: 0;
  overflow:hidden;
  transition:max-height .4s ease, padding .3s ease, background .3s ease;
  padding: 0 22px;
  background: #fff;
}
.faq-item.open .faq-answer{
  max-height: 600px;   /* adjust if you have longer content */
  padding: 18px 22px 22px;
  background: #fff;
}
.faq-answer p{ margin:0; color:#333; }












/* ===== RFA – History ===== */
.rfa-history {
  background: linear-gradient(#fff, #fbfbfe);
  padding-block: var(--pad-y);
}
.rfa-history__container {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.rfa-history .history-text p {
  font-family: "Lora", serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1em;
}

/* ===== RFA – Milestones Timeline ===== */
.rfa-milestones {
  background: var(--surface);
  padding-block: var(--pad-y);
}
.rfa-milestones__container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--rfa-purple);
  position: relative;
}
.timeline-item {
  position: relative;
  padding: 0 0 28px 24px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--rfa-gold);
  border: 2px solid var(--rfa-purple);
  border-radius: 50%;
}
.timeline-date {
  font-weight: 700;
  color: var(--rfa-purple);
  margin-bottom: 6px;
}
.timeline-content h3 {
  font-family: "Libre Caslon Display", serif;
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 22px);
}
.timeline-content p {
  margin: 0;
  font-size: clamp(14px, 1.35vw, 16px);
  color: var(--muted);
}

/* Force history + milestones backgrounds to span 100vw */
.rfa-history,
.rfa-milestones {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* break out of Elementor's container */
  padding-block: var(--pad-y);
}
/* Remove extra gaps between custom full-width sections */
.rfa-history,
.rfa-milestones {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* Reset Elementor/Theme spacing */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-block: var(--pad-y);
}

/* Optional: reduce the bottom padding if sections feel too far apart */
.rfa-history { padding-bottom: calc(var(--pad-y) * 0.7); }
.rfa-milestones { padding-top: calc(var(--pad-y) * 0.7); }
Perfect — I’ll make the sections **flush (no visible gap)**.

Add this to your `style.css` (it replaces the earlier spacing rules):

```css
/* Full-bleed backgrounds + no gap between sections */
.rfa-history,
.rfa-milestones{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* break out of Elementor container */
  margin-right: calc(50% - 50vw);  /* keep symmetry */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: var(--pad-y);
  padding-bottom: var(--pad-y);
  overflow-x: clip;                 /* avoid 100vw overflow jiggle */
}

/* Make them visually touch (flush) */
.rfa-history{  padding-bottom: 0; }
.rfa-milestones{ padding-top: 0; }

/* If Elementor adds extra section spacing, neutralize it for these blocks */
.elementor .elementor-section:has(#rfa-history),
.elementor .elementor-section:has(#rfa-milestones){
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep inner content nicely aligned */
.rfa-history__container,
.rfa-milestones__container{
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}


/* ===== That will give you full-width backgrounds and **zero gap** where the two sections meet. If you later want a tiny breathing space, change one of the zeros to `20px` (or any value) instead.
 ===== */






/* ===== Director Row (Unified Layout) ===== */
.director-row{
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding-inline: clamp(20px, 5vw, 60px); /* consistent side padding */
}

/* Image column */
.director-media{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.director-media img{ width:100%; height:100%; object-fit:cover; }
.director-media .badge{
  position: absolute; bottom: 12px; left: 12px;
  background: var(--rfa-gold); color:#1a1a1a;
  font-weight:700; font-size:.85rem;
  padding:.4rem .6rem; border-radius:.5rem;
}

/* Text column */
.director-message p{
  margin-bottom: 1rem;
  line-height: 1.7;
  color: var(--muted,#333);
}
.director-meta{
  margin-top: 1.2rem;
}
.director-name{ margin: 0 0 .25rem; color: var(--rfa-purple); font-weight: 800; }
.director-role{ margin: 0; color: var(--rfa-blue); font-weight: 600; }

/* Responsive: stack on mobile */
@media (max-width: 768px){
  .director-row{ grid-template-columns: 1fr; }
  .director-media{ max-width: 380px; margin-inline: auto; }
}



/* ===== Utilities: full-bleed + flush ===== */
.rfa-bleed{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow-x: clip;
  padding-block: var(--pad-y, clamp(28px,6vw,80px));
}
/* Remove visible gaps where sections meet */
.rfa-bleed.flush-bottom{ padding-bottom: 0; }
.rfa-bleed.flush-top{ padding-top: 0; }
/* Neutralize Elementor wrapper spacing for these blocks only */
.elementor .elementor-section:has(.rfa-bleed),
.elementor .elementor-widget-html:has(.rfa-bleed){
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== Shared inner wrap ===== */
.rfa-wrap{ max-width: 1100px; margin-inline: auto; padding-inline: var(--pad-x, clamp(16px,5vw,72px)); }
.section-head .kicker{ color: var(--rfa-gold,#C7A44A); font-weight: 700; letter-spacing:.2px; margin:0 0 6px; }
.section-head h1,.section-head h2{ margin:0 0 10px; }
.section-head .lead{ color: var(--muted,#515151); }

/* ===== Section backgrounds ===== */
.rfa-hero-soft{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(90,45,130,.06), transparent 60%),
    linear-gradient(#ffffff,#fbfbfe);
}
.rfa-ethos{ background: #fff; }
.rfa-outcomes{ background: var(--surface,#F7F7FB); }
.rfa-philosophy{
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(199,164,74,.10), transparent 60%),
    linear-gradient(#ffffff,#fbfbfe);
}

/* ===== Ethos ===== */
.ethos-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(12,minmax(0,1fr));
  margin-top: 18px;
}
.ethos-card{
  grid-column: span 6;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 18px 18px 16px;
}
.ethos-card h3{ margin: 0 0 8px; color: var(--rfa-purple,#5A2D82); }
.ethos-card ul{ margin: 0; padding-left: 18px; }
.ethos-card ul.cols-2{
  columns: 2; column-gap: 22px; padding-left: 0; list-style: none;
}
.ethos-card ul.cols-2 li{ break-inside: avoid; margin: 6px 0; padding-left: 16px; position: relative; }
.ethos-card ul.cols-2 li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--rfa-gold,#C7A44A); position:absolute; left:0; top:.6em;
}

/* Statement of Faith emphasis */
.ethos-card.faith ul{ padding-left: 18px; }
.ethos-long{
  margin-top: 14px; border:1px solid rgba(0,0,0,.08); border-radius: 12px; background:#fff;
}
.ethos-long summary{
  cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; color: var(--rfa-purple,#5A2D82);
}
.ethos-long summary::-webkit-details-marker{ display:none; }
.ethos-long summary span{ position:relative; padding-left: 24px; }
.ethos-long summary span::before{
  content: "▶"; position:absolute; left:0; top:0; transform: translateY(1px);
  font-size: 12px; opacity:.7;
}
.ethos-long[open] summary span::before{ content:"▼"; }
.ethos-long .ethos-prose{ padding: 0 16px 16px; color: var(--muted,#515151); }

/* ===== Outcomes ===== */
.outcomes-grid{
  display: grid; gap: 18px;
  grid-template-columns: repeat(12,minmax(0,1fr));
  margin-top: 14px;
}
.outcome{
  grid-column: span 6;
  background: #fff; border:1px solid rgba(0,0,0,.06); border-radius: 14px; padding: 18px;
}
.outcome h3{ margin:0 0 8px; color: var(--rfa-purple,#5A2D82); }
.outcome ul{ margin:0; padding-left: 18px; color: var(--muted,#515151); }

/* ===== Philosophy ===== */
.philo-prose p{ color: var(--muted,#515151); line-height: 1.7; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .ethos-card, .outcome{ grid-column: span 12; }
}









/* ===== Mobile Nav (full-screen overlay) ===== */
.mobile-toggle{ display:none; }

@media (max-width: 992px){
  .mobile-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }

  .mobile-nav{
    position: fixed; inset: 0 0 0 auto;     /* off-canvas from left */
    width: 100vw; max-width: 100vw;
    height: 100vh;
    transform: translateX(-100%);           /* hidden */
    transition: transform .3s ease;
    z-index: 1001;
    background:
      radial-gradient(60% 60% at 20% 0%, rgba(199,164,74,.10), transparent 60%),
      linear-gradient(180deg, #2b1740 0%, #1d1130 100%); /* deep purple */
    color: #fff;
    padding: clamp(16px, 4vw, 28px);
    overflow-y: auto;
  }

  /* Big touch targets */
  .mobile-nav .menu, .mobile-nav ul{ list-style:none; margin:0; padding:0; }
  .mobile-nav li{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .mobile-nav a{
    display:block; padding: 14px 4px;
    font-weight:700; letter-spacing:.2px;
    color:#fff; text-decoration:none;
  }
  .mobile-nav a:hover{ color: var(--rfa-gold,#d4af37); }

  /* Close button */
  .mobile-close{
    position:absolute; top:10px; right:12px;
    width:44px; height:44px; font-size:28px; line-height:1;
    background: transparent; color:#fff; border:0; cursor:pointer;
  }

  /* Backdrop */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1000;
  }
  .nav-backdrop[hidden]{ display:none; }

  /* Open state */
  .menu-open .mobile-nav{ transform: translateX(0); }
  .menu-open .nav-backdrop{ display:block; }
  .menu-open{ overflow:hidden; } /* scroll lock */

  /* Optional: style submenu indicators */
  .mobile-nav .menu-item-has-children > a{ position:relative; padding-right:28px; }
  .mobile-nav .menu-item-has-children > a::after{
    content:"›"; position:absolute; right:4px; top:50%; transform:translateY(-50%) rotate(90deg);
    color: var(--rfa-gold,#d4af37); font-size:18px;
  }
  .mobile-nav .menu-item-has-children.open > a::after{ transform:translateY(-50%) rotate(0); }

  /* Submenu */
  .mobile-nav .sub-menu{ display:none; padding-left:12px; }
  .mobile-nav .menu-item-has-children.open > .sub-menu{ display:block; }
}






/* ===== Global typography tokens (if not already set) ===== */
:root{
  --muted:#515151;
  --rfa-purple:#5a2a82;
  --rfa-gold:#d4af37;
  --pad-y: clamp(28px,6vw,80px);
  --pad-x: clamp(16px,5vw,72px);
}

/* ===== Unified prose (match History page text) ===== */
.rfa-prose{
  /* same feel as .rfa-history .history-text p */
  font-family: "Lora", serif;
  color: var(--muted);
}
.rfa-prose p,
.rfa-prose li{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}
.rfa-prose p{ margin: 0 0 1em; }
.rfa-prose ul, .rfa-prose ol{ margin: 0 0 1em 1.25em; }
.rfa-prose strong{ font-weight: 700; }

/* Consistent headings across pages */
.rfa-prose h1, .rfa-prose .h1{ 
  font-family: "Libre Caslon Display", serif;
  color: var(--rfa-purple); 
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 .5em;
}
.rfa-prose h2, .rfa-prose .h2{
  font-family: "Libre Caslon Display", serif;
  color: var(--rfa-purple);
  font-size: clamp(22px, 2.6vw, 34px);
  margin: 1.2em 0 .5em;
}
.rfa-prose h3, .rfa-prose .h3{
  font-family: "Libre Caslon Display", serif;
  color: var(--rfa-purple);
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 1.1em 0 .5em;
}

/* Optional: links in prose */
.rfa-prose a{ color: var(--rfa-purple); text-decoration: underline; }
.rfa-prose a:hover{ color: var(--rfa-gold); }

/* ===== Make FAQ answers inherit the same prose ===== */
/* (Remove any conflicting rules like `.faq-answer p { color:#333; }`) */
.faq-answer{ background:#fff; }
.faq-answer .rfa-prose p,
.faq-answer .rfa-prose li{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--muted);
}

/* If you want ALL body text inside FAQ to match, keep it simple: */
.faq-answer{ }
.faq-answer p, .faq-answer li{
  font-family: "Lora", serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: var(--muted);
}




/* ===== ACSI Badge above kicker (transparent + bigger) ===== */
.acsi-badge {
  margin-bottom: 14px;   /* space between logo and kicker */
  background: transparent !important; /* no background */
  box-shadow: none !important;        /* no shadow */
  padding: 0;                         /* no padding */
}

.acsi-badge img {
  max-width: 360px;   /* 3× bigger */
  height: auto;
  display: block;
}

/* Mobile scaling */
@media (max-width: 700px){
  .acsi-badge img { 
    max-width: 220px;  /* still big, but fits on small screens */
  }
}


/* ===== Events & Activities — Text Styling Enhancements ===== */
/* Scope: just this page’s sections */
#school-activities .section-head .kicker,
#chapel-mentoring .section-head .kicker,
#whole-school-fasting .section-head .kicker,
#graduation-prize .section-head .kicker,
#co-curricular .section-head .kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rfa-gold);
  font-weight: 700;
  opacity: .95;
}

#school-activities .section-head h2,
#chapel-mentoring .section-head h2,
#whole-school-fasting .section-head h2,
#graduation-prize .section-head h2,
#co-curricular .section-head h2{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
#school-activities .section-head h2::after,
#chapel-mentoring .section-head h2::after,
#whole-school-fasting .section-head h2::after,
#graduation-prize .section-head h2::after,
#co-curricular .section-head h2::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:72px; height:3px;
  background: var(--rfa-gold);
  border-radius: 2px;
}

/* Lead paragraphs: slightly larger, softer color */
#school-activities .lead,
#chapel-mentoring .lead,
#whole-school-fasting .lead,
#graduation-prize .lead,
#co-curricular .lead{
  color:#3a3a3a;
  max-width: 900px;
  margin-inline: auto;
  letter-spacing:.01em;
}

/* Paragraph rhythm & measure */
#school-activities .rfa-copy p,
#chapel-mentoring .rfa-copy p,
#whole-school-fasting .rfa-copy p,
#graduation-prize .rfa-copy p,
#co-curricular .rfa-copy p{
  margin: 0 0 .9rem;
  color: var(--ink);
}

/* Unordered lists: gold dot bullets */
#school-activities .rfa-copy ul,
#chapel-mentoring .rfa-copy ul,
#whole-school-fasting .rfa-copy ul,
#graduation-prize .rfa-copy ul,
#co-curricular .rfa-copy ul{
  list-style: none;
  padding-left: 0;
  margin: .2rem 0 1rem;
}
#school-activities .rfa-copy ul li,
#chapel-mentoring .rfa-copy ul li,
#whole-school-fasting .rfa-copy ul li,
#graduation-prize .rfa-copy ul li,
#co-curricular .rfa-copy ul li{
  position: relative;
  padding-left: 1.25rem;
  margin: .38rem 0;
}
#school-activities .rfa-copy ul li::before,
#chapel-mentoring .rfa-copy ul li::before,
#whole-school-fasting .rfa-copy ul li::before,
#graduation-prize .rfa-copy ul li::before,
#co-curricular .rfa-copy ul li::before{
  content:"";
  position:absolute; left:0; top:.68em;
  width:8px; height:8px; border-radius:50%;
  background: var(--rfa-gold);
}

/* Ordered lists: gold numbers */
#school-activities .rfa-copy ol,
#chapel-mentoring .rfa-copy ol,
#whole-school-fasting .rfa-copy ol,
#graduation-prize .rfa-copy ol,
#co-curricular .rfa-copy ol{
  counter-reset:item;
  list-style:none;
  padding-left:0;
  margin:.2rem 0 1rem;
}
#school-activities .rfa-copy ol li,
#chapel-mentoring .rfa-copy ol li,
#whole-school-fasting .rfa-copy ol li,
#graduation-prize .rfa-copy ol li,
#co-curricular .rfa-copy ol li{
  counter-increment:item;
  position:relative; padding-left:1.6rem;
  margin:.38rem 0;
}
#school-activities .rfa-copy ol li::before,
#chapel-mentoring .rfa-copy ol li::before,
#whole-school-fasting .rfa-copy ol li::before,
#graduation-prize .rfa-copy ol li::before,
#co-curricular .rfa-copy ol li::before{
  content: counter(item) ".";
  position:absolute; left:0; top:0;
  color: var(--rfa-gold); font-weight:700;
}

/* “Chip list” (School Activities) – subtle gold tint */
#school-activities .chiplist{
  display:flex; flex-wrap:wrap; gap:10px; padding-left:0; list-style:none;
}
#school-activities .chiplist li{
  background: color-mix(in srgb, var(--rfa-gold), #fff 90%);
  border:1px solid color-mix(in srgb, var(--rfa-gold), #000 20%);
  color:#222;
  border-radius:999px; padding:8px 12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Cards (Co-curricular section) – tidy headings & copy */
#co-curricular .card{ line-height: 1.6; }
#co-curricular .card h3{
  margin-top:0; margin-bottom:.35rem;
  color: var(--ink);
}

/* Optional inline highlight utility (wrap words in <span class="highlight">) */
#school-activities .rfa-copy .highlight,
#chapel-mentoring .rfa-copy .highlight,
#whole-school-fasting .rfa-copy .highlight,
#graduation-prize .rfa-copy .highlight,
#co-curricular .rfa-copy .highlight{
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--rfa-gold), #fff 75%) 0);
}














































/* ==== RFA — Global Typography System (site-wide) ==== */

/* 0) Fonts already imported near top of your stylesheet */

/* 1) Base tokens — reuse your existing color vars */
:root{
  /* Body & heading font stacks */
  --rfa-body: "Lora", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --rfa-head: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;

  /* Type sizes (clamp keeps it responsive) */
  --fs-xxl: clamp(28px, 5.0vw, 56px); /* H1 */
  --fs-xl:  clamp(24px, 3.6vw, 40px); /* H2 */
  --fs-lg:  clamp(20px, 2.6vw, 28px); /* H3 */
  --fs-md:  clamp(18px, 2.1vw, 22px); /* H4 */
  --fs-sm:  clamp(16px, 1.7vw, 18px); /* H5 */
  --fs-xs:  clamp(14px, 1.5vw, 16px); /* H6 */

  --fs-body: clamp(15px, 1.35vw, 18px);
  --fs-lead: clamp(16px, 1.6vw, 20px);

  /* Rhythm */
  --lh-tight: 1.15;
  --lh-head: 1.2;
  --lh-body: 1.65;
  --space-xxs: .35rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.25rem;
  --space-xl:  1.75rem;
}

/* 2) Global element defaults */
html { font-size: 100%; }
body {
  font-family: var(--rfa-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings: same everywhere */
:where(h1,h2,h3,h4,h5,h6){
  font-family: var(--rfa-head);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}
h1{ font-size: var(--fs-xxl); }
h2{ font-size: var(--fs-xl); }
h3{ font-size: var(--fs-lg); }
h4{ font-size: var(--fs-md); }
h5{ font-size: var(--fs-sm); }
h6{ font-size: var(--fs-xs); letter-spacing: .02em; text-transform: none; }

/* Paragraphs & lists */
p{ margin: 0 0 var(--space-md); }
.lead, .is-lead{ font-size: var(--fs-lead); line-height: calc(var(--lh-body) + .05); color: #333; }
:where(ul,ol){ margin: 0 0 var(--space-md) var(--space-lg); }
:where(ul,ol) li{ margin: 0 0 var(--space-xxs); }
:where(li > ul, li > ol){ margin-top: var(--space-xs); }

/* Inline text */
a{ color: var(--rfa-purple); text-decoration: none; border-bottom: 1px solid transparent; transition: .2s ease; }
a:hover{ border-bottom-color: color-mix(in srgb, var(--rfa-gold), #000 12%); }
strong, b{ font-weight: 700; }
em, i{ font-style: italic; }
small{ font-size: .875em; color: #555; }
code,kbd,pre,samp{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace; font-size: .95em; }

/* Blockquotes & figures */
blockquote{
  margin: var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--rfa-gold);
  background: color-mix(in srgb, var(--rfa-gold), #fff 92%);
}
figure{ margin: var(--space-lg) 0; }
figcaption{ font-size: .9em; color: #666; margin-top: var(--space-xs); }

/* Tables */
table{ width:100%; border-collapse: collapse; margin: var(--space-lg) 0; font-size: .98em; }
th, td{ padding: .75rem; border-bottom: 1px solid color-mix(in srgb, #000, #fff 90%); }
th{ text-align:left; font-weight:700; }

/* Forms & buttons inherit */
button, input, select, textarea{
  font: inherit; color: inherit; letter-spacing: inherit; line-height: var(--lh-body);
}

/* 3) Make Astra/Elementor/Gutenberg inherit the same typography */
.entry-content,
.site-content,
.widget-area,
.footer-widgets,
.ast-header-break-point .main-header-bar,
.elementor,
.elementor-widget,
.elementor-widget-text-editor,
.elementor-heading-title,
.wp-block,
.wp-block-group,
.wp-block-paragraph,
.wp-block-heading{
  font-family: var(--rfa-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Force Elementor headings to use your unified heading styles */
.elementor-heading-title{
  font-family: var(--rfa-head) !important;
  font-weight: 700 !important;
  line-height: var(--lh-head) !important;
  color: var(--ink) !important;
}
.elementor-heading-title.elementor-size-xxl{ font-size: var(--fs-xxl) !important; }
.elementor-heading-title.elementor-size-xl { font-size: var(--fs-xl)  !important; }
.elementor-heading-title.elementor-size-large{ font-size: var(--fs-lg) !important; }
.elementor-heading-title.elementor-size-medium{ font-size: var(--fs-md) !important; }
.elementor-heading-title.elementor-size-small{ font-size: var(--fs-sm) !important; }

/* Unify paragraph blocks in Gutenberg/Elementor */
.elementor-widget-text-editor,
.wp-block-paragraph{ font-size: var(--fs-body); line-height: var(--lh-body); }

/* 4) Optional: apply the same look inside any custom “prose” wrapper */
.rfa-prose, .rfa .prose{
  font-family: var(--rfa-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.rfa-prose :where(h1,h2,h3,h4,h5,h6){ font-family: var(--rfa-head); }

/* 5) Tighten heading spacing inside cards/sections if needed */
.section-head h2{ font-size: var(--fs-xl); } /* keeps current look while staying consistent */
.section-head .lead{ font-size: var(--fs-lead); }







/* ==== School Day & Support — Layout & Tabs ==== */
.section-divider{ border:0; height:1px; background:rgba(0,0,0,.08); margin:32px 0 24px; }
.content-block{ margin-block:24px 32px; }
.note{ font-size:.95em; color:#555; margin-top:8px; }

/* Tabs */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  background: linear-gradient(#fafafe, #fff);
  padding:8px; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.07);
  margin-bottom:18px;
}
.tab{
  appearance:none; border:1px solid transparent; border-radius:999px;
  padding:10px 16px; background:#fff; cursor:pointer;
  font:inherit; line-height:1; transition:.2s ease;
}
.tab:hover{ border-color: rgba(0,0,0,.12); }
.tab.is-active{
  background: color-mix(in srgb, var(--rfa-gold), #fff 80%);
  border-color: color-mix(in srgb, var(--rfa-gold), #000 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* Panels */
.tab-panels{ position:relative; }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation: fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:.5; transform:translateY(4px)} to{opacity:1; transform:none} }

/* Tables */
.rfa-table{ width:100%; border-collapse:collapse; margin:14px 0 8px; font-size:.98em; }
.rfa-table th, .rfa-table td{ padding:.75rem; border-bottom:1px solid rgba(0,0,0,.06); text-align:left; }
.rfa-table thead th{ font-weight:700; }

/* Remove gaps between full-width sections */
section{ margin:0; }














/* =========================================================
   RFA — DRY Typography Normalizer (place LAST in style.css)
   - Unifies type across Elementor, Gutenberg, Astra & custom blocks
   - Removes local font overrides; everything inherits from globals
   ========================================================= */

/* 0) Ensure the global system exists (from History & Milestones) */
:root{
  --rfa-body: "Lora", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --rfa-head: "Libre Caslon Display", "Cormorant Garamond", Georgia, serif;

  --fs-xxl: clamp(28px, 5.0vw, 56px); /* H1 */
  --fs-xl:  clamp(24px, 3.6vw, 40px); /* H2 */
  --fs-lg:  clamp(20px, 2.6vw, 28px); /* H3 */
  --fs-md:  clamp(18px, 2.1vw, 22px); /* H4 */
  --fs-sm:  clamp(16px, 1.7vw, 18px); /* H5 */
  --fs-xs:  clamp(14px, 1.5vw, 16px); /* H6 */

  --fs-body: clamp(15px, 1.35vw, 18px);
  --fs-lead: clamp(16px, 1.6vw, 20px);

  --lh-head: 1.2;
  --lh-body: 1.65;
  --ink:#171717;
}

/* 1) Global defaults */
html{font-size:100%}
body{
  font-family:var(--rfa-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
}

/* Headings everywhere */
:where(h1,h2,h3,h4,h5,h6){
  font-family:var(--rfa-head);
  font-weight:700;
  line-height:var(--lh-head);
  color:var(--ink);
  margin:0 0 .6rem;
}
h1{font-size:var(--fs-xxl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}  h5{font-size:var(--fs-sm)} h6{font-size:var(--fs-xs)}

/* Leads & paragraphs */
.lead,.is-lead{font-size:var(--fs-lead); line-height:calc(var(--lh-body) + .05); color:#333}
p{margin:0 0 1rem}

/* 2) Force common builders/blocks to inherit */
.entry-content,
.site-content,
.widget-area,
.footer-widgets,
.elementor,
.elementor-widget,
.elementor-widget-text-editor,
.elementor-heading-title,
.wp-block,
.wp-block-group,
.wp-block-paragraph,
.wp-block-heading{
  font-family:var(--rfa-body) !important;
  font-size:var(--fs-body) !important;
  line-height:var(--lh-body) !important;
  color:var(--ink) !important;
}

/* Elementor headings honor the same system */
.elementor-heading-title{
  font-family:var(--rfa-head) !important;
  font-weight:700 !important;
  line-height:var(--lh-head) !important;
  color:var(--ink) !important;
}
.elementor-heading-title.elementor-size-xxl{font-size:var(--fs-xxl) !important}
.elementor-heading-title.elementor-size-xl {font-size:var(--fs-xl)  !important}
.elementor-heading-title.elementor-size-large{font-size:var(--fs-lg) !important}
.elementor-heading-title.elementor-size-medium{font-size:var(--fs-md) !important}
.elementor-heading-title.elementor-size-small{font-size:var(--fs-sm) !important}

/* 3) Neutralize local font overrides already present in components
      (cards, section heads, carousels, testimonials, etc.) */
.section-head .kicker,
.section-head h2,
.rfa-offers .kicker,
.rfa-offers h2,
.rfa-programmes .section-head .kicker,
.rfa-programmes .section-head h2,
.card-title,
.card-text,
.offer-title,
.offer-text,
.rfa-leaders-carousel .kicker,
.rfa-leaders-carousel .name,
.rfa-leaders-carousel .role,
.lb-meta h3,
.lb-meta p,
.rfa-testimonials .t-name,
.rfa-testimonials .t-role,
.rfa-testimonials .t-quote{
  font-family: inherit !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* 4) Re-apply intended sizing where components relied on custom sizes */
.section-head h2,
.rfa-offers h2,
#leaders-title,
#t-title{ font-size: var(--fs-xl) !important; }
.section-head .lead,
.rfa-offers .lead,
.rfa-leaders-carousel .lead{ font-size: var(--fs-lead) !important; }

/* 5) Button/inputs inherit */
button,input,select,textarea{ font:inherit; color:inherit; line-height:var(--lh-body) }














/* ===========================
   RFA Premium Header
=========================== */
:root{
  --rfa-purple:#5A2D82;
  --rfa-gold:#C7A44A;
  --rfa-ink:#171717;
  --rfa-soft:#F7F7FB;
  --nav-h:72px;
}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:16px; top:10px; width:auto; height:auto; padding:8px 12px; background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.12); border-radius:8px; z-index:10000; }

.navbar{
  position:sticky; top:0; z-index:999;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in srgb, #ffffff 70%, transparent);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
  border-bottom: 1px solid rgba(90,45,130,.08);
}
.navbar.scrolled{
  background:#ffffff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border-bottom-color: transparent;
}
.navbar__inner{
  max-width: 1200px; margin: 0 auto; padding: 0 20px; height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand__link{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand__text{ font-weight:800; letter-spacing:.2px; color:var(--rfa-purple); }

.main-nav{ display:flex; align-items:center; }
.main-menu-wrapper{
  display:flex; align-items:center; gap:20px;
}

/* Menu list (desktop) */
.menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:12px;
}
.menu > li > a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 12px; border-radius:12px;
  text-decoration:none; color:var(--rfa-ink); font-weight:600; font-size:15px;
}
.menu > li > a:hover,
.menu > li.current-menu-item > a,
.menu > li.current-menu-ancestor > a{ 
  background: linear-gradient(180deg, rgba(90,45,130,.08), rgba(90,45,130,.02));
  color:var(--rfa-purple);
}

/* Dropdowns (generic, Walker can add classes) */
.menu li.menu-item-has-children{ position:relative; }
.menu li.menu-item-has-children > a::after{
  content:"▾"; font-size:.8em; margin-left:6px; transform:translateY(-1px);
}
.menu li .sub-menu{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.14);
  padding:10px; margin-top:10px; display:none;
}
.menu li:hover > .sub-menu{ display:block; }
.menu li .sub-menu li a{
  display:flex; padding:10px 12px; border-radius:10px; color:#222; text-decoration:none; font-weight:500;
}
.menu li .sub-menu li a:hover{ background:#f6f2fb; color:var(--rfa-purple); }

/* Actions */
.navbar__actions{ display:flex; align-items:center; gap:12px; }
.btn{
  inline-size: auto; white-space: nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; font-weight:700; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn--portal{
  background: linear-gradient(135deg, var(--rfa-purple), #7f4bb3);
  color:#fff; border-color: transparent; box-shadow: 0 10px 20px rgba(90,45,130,.25);
}
.btn--portal:hover{ filter:brightness(1.03); transform: translateY(-1px); }

/* Mobile: drawer */
.menu-toggle{
  display:none; border:0; background:transparent; padding:8px; border-radius:10px;
}
.menu-toggle__bar{
  display:block; width:24px; height:2px; background:#222; margin:5px 0; border-radius:2px;
}
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998;
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
}
.main-menu-wrapper{
  /* desktop inline; becomes drawer on mobile */
}
@media (max-width: 980px){
  .btn--desk{ display:none; }
  .menu-toggle{ display:inline-block; }
  .main-menu-wrapper{
    position: fixed; inset:0 0 0 auto; width:min(84vw, 380px);
    background:#ffffff; z-index:999; transform: translateX(100%);
    box-shadow: -20px 0 60px rgba(0,0,0,.2);
    display:flex; flex-direction:column; padding:18px; gap:12px;
    transition: transform .28s ease;
  }
  .main-menu-wrapper.is-open{ transform: translateX(0); }
  .menu-backdrop[aria-hidden="false"]{ opacity:1; visibility:visible; }
  .menu{
    flex-direction:column; align-items:flex-start; gap:4px; width:100%;
  }
  .menu > li > a{ width:100%; padding:12px 14px; border-radius:10px; }
  .menu li .sub-menu{
    position:static; display:none; padding:6px; margin:4px 0 0; box-shadow:none; background:#faf7ff; border-radius:10px;
  }
  /* Allow your JS to toggle submenu visibility via a class (e.g., .is-open) */
  .menu li .sub-menu.is-open{ display:block; }
  .drawer-cta{
    margin-top:auto; padding-top:12px; border-top:1px dashed rgba(90,45,130,.25);
  }
}

/* Utility container (matches header inner) */
.container{ max-width:1200px; margin-inline:auto; padding-inline:20px; }


/* =========================================================
   RFA — Global Page Hero (applies to all pages except .home)
   Usage: add CSS class "page-hero" to the top section per page
   ========================================================= */

/* 0) Scope: exclude homepage */
body:not(.home) .page-hero{
  /* full-bleed background even in boxed layouts */
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw;

  /* spacing + responsive height */
  padding: clamp(56px, 8vw, 120px) 20px;
  min-height: clamp(220px, 36vh, 420px);

  /* default gradient if no image is set */
  background: linear-gradient(120deg, var(--rfa-purple) 0%, var(--rfa-gold) 100%);
  color: #fff;
  overflow: hidden;
}

/* 1) Optional dark overlay for background images set via Elementor */
body:not(.home) .page-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events: none;
}

/* 2) Inner container + text system */
body:not(.home) .page-hero .inner{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  text-align: center;
}
body:not(.home) .page-hero .kicker{
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .9; margin-bottom: .4rem;
}
body:not(.home) .page-hero h1{
  font-family: var(--rfa-head);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.15;
  margin: 0 0 .5rem;
  color: #fff;
}
body:not(.home) .page-hero .lead{
  font-family: var(--rfa-body);
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 900px; margin: 0 auto;
  opacity: .95;
}

/* 3) Breadcrumbs (optional – add .breadcrumbs inside .inner) */
body:not(.home) .page-hero .breadcrumbs{
  margin-top: 12px; font-size: .95rem; opacity: .9;
}
body:not(.home) .page-hero .breadcrumbs a{
  color: #fff; border-bottom: 1px solid transparent;
}
body:not(.home) .page-hero .breadcrumbs a:hover{
  border-bottom-color: rgba(255,255,255,.6);
}

/* 4) Modifiers (optional): color themes if you want variety */
body:not(.home) .page-hero.is-gold{
  background: linear-gradient(120deg, #C7A44A 0%, #8B6D24 100%);
}
body:not(.home) .page-hero.is-berry{
  background: linear-gradient(120deg, #5A2D82 0%, #B14882 100%);
}

/* 5) Remove gaps above/below if the next/prev sections create seams */
body:not(.home) .page-hero + *{ margin-top: 0; }



/* ==== Fix gap between custom header and page hero ==== */

/* If #main starts with a .page-hero, remove the layout padding */
body:not(.home) #main { padding-top: 0 !important; }
body:not(.home) .page-hero{
  padding-top: calc(clamp(80px, 12vh, 160px) + var(--header-safe, 72px)) !important;
  margin-top: 0 !important;
}
body:not(.home) .elementor-section:first-of-type{ margin-top: 0 !important; }


/* Force all inner-page heroes to use the same background if no image is set */
body:not(.home) .page-hero{
  background-image: none !important; /* neutralize Elementor/inline images */
  background-color: transparent !important;
  background: linear-gradient(120deg, var(--rfa-purple) 0%, var(--rfa-gold) 100%) !important;
}

/* If you WANT to allow a custom image on a page,
   keep the gradient only when NO inline background-image exists */
body:not(.home) .page-hero[style*="background-image"]{
  /* keep your overlay working; remove the hard reset above for images */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* Remove container padding/gaps and widget margins when you add class "no-gap" */
.e-con.no-gap,
.e-con.no-gap > .e-con-inner{
  padding: 0 !important;
  gap: 0 !important;
}
.no-gap .elementor-widget,
.no-gap .elementor-widget-html,
.no-gap .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the first element inside the HTML widget fill the container cleanly */
.no-gap .elementor-widget-html > .elementor-widget-container > *:first-child{
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
}


/* Force an element to bleed to the full viewport width from inside any container */
.bleed-vw,
.bleed-vw > .elementor-widget-container > *:first-child{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

/* Also remove default widget spacing when bleeding */
.bleed-vw,
.bleed-vw .elementor-widget-container{
  margin: 0 !important;
  padding: 0 !important;
}




/* ===== RFA Premium Header — 3-Zone Layout Fix ===== */

/* Shell */
.navbar{
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in srgb, #ffffff 70%, transparent);
  transition: background .25s ease, box-shadow .25s ease;
  border-bottom: 1px solid rgba(90,45,130,.08);
}
.navbar.scrolled{
  background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.08);
  border-bottom-color:transparent;
}

/* Three columns: brand | menu | actions */
.navbar__inner{
  max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* Brand (left) */
.brand__link{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.custom-logo{ max-height: 42px; height: 42px; width:auto; }
.brand__text{ font-weight: 800; color: var(--rfa-purple); letter-spacing:.2px; }

/* Centered nav */
.main-nav{ display: contents; } /* let wrapper take the center grid cell */
.main-menu-wrapper{
  grid-column: 2;            /* middle column */
  display: flex; align-items: center; justify-content: center;
}

/* Desktop menu */
.menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap: 8px;
}
.menu > li > a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius: 999px;
  text-decoration:none; color:#242424; font-weight:600; font-size:15px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.menu > li > a:hover,
.menu > li.current-menu-ancestor > a,
.menu > li.current-menu-item > a{
  background: rgba(90,45,130,.08);
  color: var(--rfa-purple);
  box-shadow: inset 0 0 0 1px rgba(90,45,130,.10);
}

/* Dropdowns (desktop) */
.menu li.menu-item-has-children{ position:relative; }
.menu li.menu-item-has-children > a::after{ content:"▾"; font-size:.8em; margin-left:6px; }
.menu li .sub-menu{
  position:absolute; top:100%; left:50%; transform: translateX(-50%);
  min-width: 260px; padding:10px; margin-top:12px;
  background:#fff; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.14);
  display:none;
}
.menu li:hover > .sub-menu{ display:block; }
.menu li .sub-menu li a{
  display:flex; padding:10px 12px; border-radius:10px; color:#222; text-decoration:none; font-weight:500;
}
.menu li .sub-menu li a:hover{ background:#f6f2fb; color:var(--rfa-purple); }

/* Actions (right) */
.navbar__actions{ display:flex; align-items:center; gap:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; font-weight:700; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn--portal{
  background: linear-gradient(135deg, var(--rfa-purple), #7f4bb3);
  color:#fff; box-shadow: 0 10px 20px rgba(90,45,130,.25);
}
.btn--portal:hover{ filter:brightness(1.04); transform: translateY(-1px); }

/* Mobile behaviour */
.menu-toggle{ display:none; border:0; background:transparent; padding:8px; border-radius:10px; }
.menu-toggle__bar{ display:block; width:24px; height:2px; background:#222; margin:5px 0; border-radius:2px; }

@media (max-width: 1024px){
  /* Right column: show toggle, hide desktop portal; center column becomes drawer */
  .btn--desk{ display:none; }
  .menu-toggle{ display:inline-block; }

  .main-menu-wrapper{
    position: fixed; inset:0 0 0 auto; width:min(84vw, 380px);
    transform: translateX(100%); transition: transform .28s ease;
    background:#fff; z-index:999; box-shadow:-20px 0 60px rgba(0,0,0,.2);
    display:flex; flex-direction:column; align-items:stretch; padding:18px; gap:10px;
    justify-content:flex-start;
  }
  .main-menu-wrapper.is-open{ transform: translateX(0); }

  .menu{ flex-direction:column; align-items:stretch; gap:4px; }
  .menu > li > a{ width:100%; padding:12px 14px; border-radius:10px; }
  .menu li .sub-menu{ position:static; transform:none; display:none; padding:6px; margin:4px 0 0; box-shadow:none; background:#faf7ff; border-radius:10px; }
  .menu li .sub-menu.is-open{ display:block; }

  .drawer-cta{ margin-top:auto; padding-top:12px; border-top:1px dashed rgba(90,45,130,.25); }
}

/* Backdrop used by your JS */
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998;
  opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease;
}
.menu-backdrop[aria-hidden="false"]{ opacity:1; visibility:visible; }

/* ===== RFA Premium Header – 3-Zone Layout ===== */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(90,45,130,.08);
  transition: background .25s ease, box-shadow .25s ease;
}
.navbar.scrolled {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* Brand (left) */
.brand__link { display:flex; align-items:center; text-decoration:none; }
.custom-logo { max-height: 46px; width:auto; }

/* Menu (center) */
.main-menu-wrapper {
  display: flex;
  justify-content: center;
}
.menu {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu > li > a {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--rfa-purple);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.menu > li > a:hover,
.menu > li.current-menu-item > a {
  background: rgba(90,45,130,.08);
  color: var(--rfa-purple);
}

/* Actions (right) */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn--portal {
  background: linear-gradient(135deg, var(--rfa-purple), #7f4bb3);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(90,45,130,.25);
}
.btn--portal:hover {
  background: var(--rfa-gold);
  color: #111;
}

/* Mobile */
.menu-toggle { display:none; background:none; border:0; cursor:pointer; }
.menu-toggle__bar { width:24px; height:2px; background:#333; margin:5px 0; border-radius:2px; }

@media (max-width: 992px) {
  .btn--desk { display: none; }
  .menu-toggle { display: inline-block; }

  .main-menu-wrapper {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(84vw, 360px);
    background: #fff;
    box-shadow: -20px 0 60px rgba(0,0,0,0.2);
    flex-direction: column;
    padding: 20px;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .main-menu-wrapper.is-open { transform: translateX(0); }

  .menu { flex-direction: column; align-items: flex-start; gap: 8px; }
  .menu > li > a { width: 100%; padding: 12px; }

  .drawer-cta {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(90,45,130,.2);
  }
}


/* Show Portal button only once */
.drawer-cta { display: none; }              /* hide in desktop/tablet */
.btn--desk   { display: inline-flex; }       /* show on desktop/tablet */

@media (max-width: 1024px){
  .drawer-cta { display: block; }           /* show inside mobile drawer */
  .btn--desk  { display: none; }            /* hide desktop button on mobile */
}


/* ===== Hard-lock header positions (brand left, menu center, actions right) ===== */
.navbar__inner{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

/* Put each zone in a specific grid column */
.brand{ grid-column: 1 !important; justify-self: start; min-width: 0; }
.main-nav{ grid-column: 2 !important; }
.main-menu-wrapper{ justify-self: center; }
.navbar__actions{ grid-column: 3 !important; justify-self: end; }

/* Kill any legacy floats or text-align hacks */
.brand, .brand__link{ float: none !important; }
.navbar__inner, .brand, .main-nav, .navbar__actions{ text-align: initial !important; }

/* Ensure hamburger lives inside the actions (right side) */
.menu-toggle{ margin-left: 8px; }

/* Mobile specifics */
@media (max-width: 1024px){
  /* keep the same 3 columns on mobile */
  .navbar__inner{ grid-template-columns: auto 1fr auto; }

  /* brand safe sizing so it never pushes out */
  .custom-logo{ height: 28px; max-height: 28px; width: auto; }
  .brand__text{
    max-width: 54vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* desktop portal hidden; drawer CTA shown at bottom (when open) */
  .btn--desk{ display: none !important; }
  .drawer-cta{ display: block; margin-top: auto; padding-top: 12px;
               border-top: 1px dashed rgba(90,45,130,.25); }
  .drawer-cta .btn{ width: 100%; justify-content: center; }

  /* drawer + backdrop */
  .main-menu-wrapper{
    position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 380px);
    transform: translateX(100%); transition: transform .28s ease;
    background: #fff; z-index: 999; display: flex; flex-direction: column; gap: 10px; padding: 18px;
    box-shadow: -20px 0 60px rgba(0,0,0,.2);
  }
  .main-menu-wrapper.is-open{ transform: translateX(0); }
  .menu{ display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
  .menu > li > a{ width:100%; padding:12px 14px; border-radius:10px; }
  .menu li .sub-menu{ position:static; display:none; padding:6px; margin-top:4px; background:#faf7ff; border-radius:10px; }
  .menu li .sub-menu.is-open{ display:block; }
}

/* Backdrop (for toggle JS) */
.menu-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 998; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.menu-backdrop.show{ opacity: 1; visibility: visible; }


/* ACSI logo above kicker — force transparent + big */
.rfa-hero .acsi-badge,
.rfa-hero .acsi-badge .elementor-widget-container,
.rfa-hero .acsi-badge .elementor-image,
.rfa-hero .acsi-badge .elementor-image a {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}

.rfa-hero .acsi-badge img {
  width: 360px !important;      /* ~3× bigger */
  max-width: none !important;    /* ignore Elementor max-width */
  height: auto !important;
  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* spacing above the kicker */
.rfa-hero .acsi-badge { margin-bottom: 14px !important; }

/* mobile safety so it doesn’t overflow */
@media (max-width: 700px){
  .rfa-hero .acsi-badge img { width: 220px !important; }
}



/* ===== Remove white space above page heroes ===== */

/* 1) Header shouldn't push content down */
.site-header,
.navbar{ margin-bottom: 0 !important; }
.site-header + .site-content,
.site-header + main,
.site-header + #content{ padding-top: 0 !important; }

/* 2) First Elementor section on the page: no top gap */
.elementor    .elementor-section:first-of-type,
.elementor    .elementor-top-section:first-of-type,
.elementor    .e-con:first-of-type{
  margin-top: 0 !important;
}
.elementor    .elementor-top-section:first-of-type > .elementor-container,
.elementor    .e-con:first-of-type > .e-con-inner{
  padding-top: 0 !important;
}

/* 3) Widgets inside the first section shouldn't add a top margin either */
.elementor .elementor-section:first-of-type .elementor-widget:first-child{
  margin-top: 0 !important;
}

/* 4) Our full-bleed hero blocks: ensure no top margin anywhere */
.page-hero{ margin-top: 0 !important; }

/* (Optional) If a tiny sliver still appears, uncomment the line below to pull the hero up by 1px */
/* .page-hero{ margin-top: -1px !important; } */


/* ===== Flush heroes to the header on ALL pages ===== */

/* If the theme adds gap under the header, zero it */
.site-header,
.navbar{ margin-bottom:0 !important; }

/* Make every .page-hero start at the very top */
.page-hero{ margin-top:0 !important; }

/* First Elementor section on a page: remove top padding/margin */
.elementor .elementor-top-section:first-of-type,
.elementor .e-con:first-of-type{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* If the first section contains a .page-hero, also zero its inner container (modern :has support) */
.elementor .elementor-top-section:first-of-type:has(.page-hero) > .elementor-container,
.elementor .e-con:first-of-type:has(.page-hero) > .e-con-inner{
  padding-top:0 !important;
}

/* First widget in the first section shouldn't add a margin either */
.elementor .elementor-section:first-of-type .elementor-widget:first-child{
  margin-top:0 !important;
}

/* Keep heroes full-bleed without causing horizontal scroll */
.page-hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  max-width:100dvw;
}

/* ===== ALSO handle Elementor CONTAINER around the hero ===== */

/* New Container widget (.e-con): remove top padding/margin if it holds a .page-hero */
.e-con:has(.page-hero){
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.e-con:has(.page-hero) > .e-con-inner{
  padding-top: 0 !important;
}

/* Fallback for browsers/themes where :has might not hit your DOM */
.elementor > .e-con:first-of-type,
.elementor > .e-con:first-of-type > .e-con-inner{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Extra guard: if the first widget inside that container is your HTML hero, kill its top margin */
.e-con:first-of-type .elementor-widget:first-child{ margin-top: 0 !important; }

/* Some themes add top padding to the main content wrapper—zero it */
.site-content,
#content,
main#main{ padding-top: 0 !important; }

/* === School Day & Support (page-id-4338) — remove space above hero === */
body.page-id-4338 #content,
body.page-id-4338 #main,
body.page-id-4338 main.site-main{ padding-top:0 !important; margin-top:0 !important; }

body.page-id-4338 .elementor-top-section:first-of-type,
body.page-id-4338 .elementor-section:first-of-type,
body.page-id-4338 .e-con:first-of-type{ margin-top:0 !important; }

body.page-id-4338 .elementor-top-section:first-of-type > .elementor-container,
body.page-id-4338 .e-con:first-of-type > .e-con-inner{ padding-top:0 !important; }

body.page-id-4338 .page-hero{ margin-top:0 !important; }

/* If a tiny sliver still shows, uncomment this hard pull-up: */
body.page-id-4338 .page-hero{ margin-top:-1px !important; }




/* === ONE-BAR HEADER (desktop) =============================== */
.navbar > .container{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
.brand{ flex:0 0 auto; min-width:max-content; }
.main-menu-wrapper{ order:2; flex:1 1 auto; min-width:0; } /* menu owns the middle */
.header-actions{ order:3; flex:0 0 auto; white-space:nowrap; }
.menu{ display:flex; flex-wrap:nowrap; gap:8px; }
.menu > .menu-item{ white-space:nowrap; }

/* If Astra’s native header renders as a second row, hide it */
.main-header-bar,
.ast-primary-header-bar,
.ast-above-header,
.ast-below-header{ display:none !important; }

/* Keep the bar visually solid (no split/overlay look) */
.navbar{
  position:sticky; top:0; z-index:1000;
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.08) !important;
}
.navbar::before,
.navbar::after{ content:none !important; display:none !important; }

/* === MOBILE DRAWER (matches .open from your JS) ============== */
@media (max-width:992px){
  .menu-toggle{ display:block; }

  .main-menu-wrapper{
    position:fixed; inset:0 auto 0 0;
    width:min(84vw, 380px); height:100dvh; max-width:100%;
    transform:translateX(-100%);
    transition:transform .28s ease;
    background:linear-gradient(180deg, #20152B, #2B1D3E); color:#fff;
    z-index:1001; padding:14px 12px 18px; overflow-y:auto;
    box-shadow:0 10px 28px rgba(0,0,0,.20);
  }
  .main-menu-wrapper.open{ transform:translateX(0); }

  .menu{ flex-direction:column; gap:4px; }
  .menu > .menu-item > a{ width:100%; padding:14px 12px; border-radius:10px; }

  /* Backdrop truly hides when closed */
  .menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:900; }
  .menu-backdrop[hidden]{ display:none !important; }
}




/* Brand image sizing + no overflow */
.brand img,
.custom-logo {
  max-height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 420px){
  .brand img, .custom-logo { max-height: 36px; }
}

/* Keep header on one line */
.navbar .container{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }
.brand{ flex:0 0 auto; min-width:0; }
.main-menu-wrapper{ margin-left:auto; }
.header-actions{ margin-left:12px; }
.menu-toggle{ margin-left:8px; }

/* Hide desktop portal on mobile; drawer footer only on mobile (your CSS already covers this) */
@media (max-width: 992px){
  .header-actions{ display:none !important; }
}





/* Hide drawer close button on desktop */
.menu-close { display: none; }
@media (max-width: 992px){
  .menu-close { 
    display: block;
    position: absolute;
    top: 12px; right: 12px;
    background: none; border: 0; font-size: 2rem; color: #fff;
    cursor: pointer;
  }
}









/* === Desktop dropdown hover-fix pack (place LAST) === */
@media (min-width: 993px){
  /* 1) Never clip the dropdown and make sure it stacks above banners */
  .navbar, .navbar .container { overflow: visible !important; }
  .navbar{ z-index: 2147483000 !important; }
  .navbar .menu > li { position: relative; }

  /* 2) Close the “tiny gap” so the mouse can travel into the panel */
  .navbar .menu > li > ul,
  .navbar .menu > li > .submenu,
  .navbar .menu > li > .sub-menu{
    position: absolute;
    top: calc(100% - 2px);     /* pull up 2px = no hover gap */
    left: 0;
    display: none;
    min-width: 260px;
    padding: 8px;
    margin: 0;                 /* kill any margin that creates a gap */
    background: #5A2D82;       /* purple panel */
    color: #fff;
    border-radius: 14px;
    z-index: 2147483001;       /* above hero/background layers */
  }

  /* 3) Keep it open while either the parent OR the panel itself is hovered */
  .navbar .menu > li:hover > ul,
  .navbar .menu > li:focus-within > ul,
  .navbar .menu > li:hover > .submenu,
  .navbar .menu > li:focus-within > .submenu,
  .navbar .menu > li:hover > .sub-menu,
  .navbar .menu > li:focus-within > .sub-menu,
  .navbar .menu > li > ul:hover,
  .navbar .menu > li > .submenu:hover,
  .navbar .menu > li > .sub-menu:hover{
    display: block;
  }

  /* 4) “Hover bridge”: invisible strip to cover any remaining pixel gap */
  .navbar .menu > li > ul::before,
  .navbar .menu > li > .submenu::before,
  .navbar .menu > li > .sub-menu::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px; height: 10px;  /* bridge */
  }

  /* 5) Nested flyouts (open to the right) */
  .navbar .menu > li > ul .sub-menu,
  .navbar .menu > li > .submenu .submenu,
  .navbar .menu > li > .sub-menu .sub-menu{
    top: 0; left: 100%;
  }

  /* 6) Ensure the mobile backdrop never sits over desktop menus */
  .menu-backdrop{ display: none !important; }
}

/* If a page hero/banner has a high z-index, lower it under the header */
.page-hero, .elementor-location-header { z-index: auto !important; }











/* ================================
   Force header menu item colors
   ================================ */

/* Transparent header (before scroll) */
header.navbar:not(.scrolled) nav.main-nav .menu > li > a {
  color: #C7A44A !important; /* Gold */
}

/* Sticky header (after scroll) */
header.navbar.scrolled nav.main-nav .menu > li > a {
  color: #5A2D82 !important; /* Purple */
}

/* Smooth transition */
header.navbar nav.main-nav .menu > li > a {
  transition: color 0.3s ease;
}












/* Consistent logo sizing */
.brand img.custom-logo { 
  max-height: 44px; width: auto; display: inline-block; vertical-align: middle;
}
@media (max-width: 420px){
  .brand img.custom-logo { max-height: 36px; }
}

/* Default visibility: show purple (sticky), hide gold */
.logo--default { display: inline-block; }
.logo--alt     { display: none; }

/* Transparent header: show gold/white, hide purple */
header.navbar:not(.scrolled) .logo--default { display: none !important; }
header.navbar:not(.scrolled) .logo--alt     { display: inline-block !important; }

/* Sticky header: show purple, hide gold/white */
header.navbar.scrolled .logo--default { display: inline-block !important; }
header.navbar.scrolled .logo--alt     { display: none !important; }

/* Smooth swap */
.brand img.custom-logo { transition: opacity .2s ease; }











/* ===== Mobile Header Overflow Fix ===== */
@media (max-width: 992px) {
  html, body {
    margin: 0;
    overflow-x: hidden; /* stop sideways scroll */
  }

  .navbar,
  .navbar__inner {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* drawer should slide in without shifting body width */
  .main-menu-wrapper {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 60vw;             /* or max-width: 320px */
    transform: translateX(-100%);
    transition: transform .3s ease;
    background: #fff;
    z-index: 1000;
    overflow-y: auto;
  }
  .main-menu-wrapper.open {
    transform: translateX(0);
  }

  /* backdrop should just cover screen, not push layout */
  .menu-backdrop {
    position: fixed;
    inset: 0;
  }

  /* make sure logo & brand text don’t nudge the width */
  .navbar__brand,
  .navbar__brand * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* tighten padding so nothing spills over */
  .navbar__inner {
    padding-inline: 16px;
  }
}



/* ===== Kill unexpected space above the header (mobile + WP) ===== */ /* 1) If WP adds margin for the admin bar, neutralize it on mobile */ @media (max-width: 782px) { html { margin-top: 0 !important; } #wpadminbar { position: fixed; top: 0; } } /* 2) Make sure the header anchors to the very top */ .navbar { position: sticky; /* or fixed if you prefer */ top: 0; left: 0; right: 0; z-index: 9999; margin-top: 0 !important; /* Optional: respect notches without creating extra gap on devices without one */ padding-top: max(env(safe-area-inset-top, 0px), 0px); } /* 3) Prevent the first section’s top margin from creating a gap above the header */ body > :first-child { margin-top: 0 !important; } /* If your hero specifically has a top margin, zero it */ .rfa-hero, .page-hero { margin-top: 0 !important; } /* If the theme wrapper adds padding at the top, remove it */ .site, .site-content, .container { padding-top: 0 !important; }




/* ===== Mobile Submenu Styling ===== */
@media (max-width: 992px) {
  /* Submenu background */
  .main-menu-wrapper .sub-menu {
    background-color: var(--rfa-purple, #5A2D82); /* fallback to brand purple */
    padding: 0;
    margin: 0;
    border: none;
  }

  /* Submenu links */
  .main-menu-wrapper .sub-menu li a {
    display: block;
    padding: 12px 16px;
    color: #fff; /* make text visible on purple */
    white-space: normal; /* allow wrapping instead of horizontal scroll */
    word-wrap: break-word;
  }

  /* Fix overflow */
  .main-menu-wrapper,
  .main-menu-wrapper .sub-menu {
    max-width: 100vw;
    overflow-x: hidden;
  }
}





/* ===== Logo swap: gold on transparent, purple on sticky ===== */
.brand img.custom-logo{
  max-height: 44px; width: auto; display: inline-block; vertical-align: middle;
  transition: opacity .2s ease;
}
@media (max-width: 420px){
  .brand img.custom-logo{ max-height: 36px; }
}

/* Default visibility */
.logo--default{ display: inline-block; }  /* purple */
.logo--alt{     display: none; }          /* gold */

/* Transparent header → show gold, hide purple */
header.navbar:not(.scrolled) .logo--default{ display: none !important; }
header.navbar:not(.scrolled) .logo--alt{     display: inline-block !important; }

/* Sticky header → show purple, hide gold */
header.navbar.scrolled .logo--default{ display: inline-block !important; }
header.navbar.scrolled .logo--alt{     display: none !important; }




/* ===== Mobile Submenu Background ===== */
@media (max-width: 992px) {
  .main-menu-wrapper .sub-menu {
    background: var(--rfa-purple) !important;  /* Purple background */
    color: #fff !important;                   /* White text */
    padding: 10px 0;
  }

  .main-menu-wrapper .sub-menu a {
    color: #fff !important;                   /* Make links white */
    display: block;
    padding: 10px 20px;
    white-space: normal;                      /* Prevent cutoff */
    word-break: break-word;                   /* Wrap long words */
  }

  /* Highlight on hover */
  .main-menu-wrapper .sub-menu a:hover {
    background: rgba(255,255,255,0.1);
    color: #ffd700;  /* gold on hover */
  }
}






/* ===== Fix mobile submenu text cutoff ===== */
@media (max-width: 992px) {
  /* Let text wrap and never ellipsize */
  .main-menu-wrapper .sub-menu a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    padding-right: 20px;          /* breathing room on the right */
    display: block;
  }

  /* Ensure the submenu itself doesn't clip children */
  .main-menu-wrapper .sub-menu {
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;             /* avoid right-edge clipping */
  }

  /* If the drawer has hidden overflow, relax it on mobile */
  .main-menu-wrapper {
    overflow-x: visible !important;
    width: 88vw;                   /* optional: keeps it safely inside viewport */
  }
}





/* ===== Hamburger base ===== */
.menu-toggle{
  --bar: var(--rfa-ink);          /* default bar color on transparent header */
  background: transparent;
  border: 0;
  width: 42px; height: 42px;
  display: grid; place-items: center;
}
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: var(--bar);
  transition: transform .25s ease, background-color .25s ease, top .25s ease, opacity .2s ease;
  position: relative;
}
.menu-toggle .hamburger::before{ top: -7px; position: relative; }
.menu-toggle .hamburger::after{  top:  7px; position: relative; }

/* When header becomes solid (scrolled) use ink-on-light or gold-on-purple as you prefer */
.navbar.scrolled .menu-toggle{ --bar: var(--rfa-purple); }  /* or var(--rfa-ink) */

/* When drawer is open: gold bars on purple button */
.menu-toggle.open{
  --bar: var(--rfa-gold);
  background: var(--rfa-purple);
  border-radius: 8px;
}

/* Optional: morph to “X” when open */
.menu-toggle.open .hamburger{ background: transparent; }
.menu-toggle.open .hamburger::before{
  top: 0; transform: rotate(45deg); background: var(--rfa-gold);
}
.menu-toggle.open .hamburger::after{
  top: 0; transform: rotate(-45deg); background: var(--rfa-gold);
}











/* ===========================
   Drawer stacking + close btn
   =========================== */
.menu-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 10000;
}

.main-menu-wrapper{
  position: fixed; inset: 0 auto 0 0;      /* left-side sheet */
  width: 88vw; max-width: 420px;
  background: #fff;                         /* your drawer bg */
  transform: translateX(-100%);
  transition: transform .3s ease;
  z-index: 10010;                           /* above backdrop */
  overflow-y: auto;                         /* avoid clipping */
}
.main-menu-wrapper.open{ transform: translateX(0); }

/* make sure nothing inside clips the close button */
.main-menu-wrapper, .main-menu-wrapper *{ overflow-x: visible; }

.menu-close{
  position: sticky; top: 8px; margin-left: auto;  /* stays visible while scrolling */
  right: 12px; float: right;                      /* works with sticky in many layouts */
  z-index: 10030;                                 /* above everything in the drawer */
  background: transparent; border: 0; cursor: pointer;
  font-size: 32px; line-height: 1;
  color: var(--rfa-gold);
}

/* Hamburger base */
.menu-toggle {
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--rfa-gold); /* default: GOLD on transparent hero */
}

.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;   /* inherit from .menu-toggle */
  position: relative;
  transition: transform 0.25s ease, background-color 0.25s ease, top 0.25s ease;
}

.menu-toggle .hamburger::before { top: -7px; }
.menu-toggle .hamburger::after  { top:  7px; }

/* When navbar sticks (JS adds .scrolled), switch to PURPLE */
.navbar.scrolled .menu-toggle {
  color: var(--rfa-purple);
}

/* ================================
   🔒 Force hamburger colours (gold → purple)
   ================================ */

/* Bars use currentColor and WIN specificity */
#menu-toggle .hamburger,
#menu-toggle .hamburger::before,
#menu-toggle .hamburger::after{
  content:"";
  display:block;
  width:24px; height:2px;
  position:relative;
  background-color: currentColor !important; /* override anything */
  transition: transform .25s ease, background-color .25s ease, top .25s ease;
}
#menu-toggle .hamburger::before{ top:-7px; }
#menu-toggle .hamburger::after { top: 7px; }

/* Default (transparent hero) → GOLD */
header.navbar:not(.scrolled) #menu-toggle,
.navbar:not(.scrolled) #menu-toggle{
  color:#C7A44A !important; /* gold */
}

/* Sticky (scrolled) → PURPLE */
header.navbar.scrolled #menu-toggle,
.navbar.scrolled #menu-toggle{
  color:#5A2D82 !important; /* purple */
}

/* Open state: purple pill + gold X */
#menu-toggle.open{
  background:#5A2D82 !important;  /* purple */
  color:#C7A44A !important;       /* gold bars/X */
  border-radius:6px;
}
#menu-toggle.open .hamburger{ background-color:transparent !important; }
#menu-toggle.open .hamburger::before{
  top:0; transform: rotate(45deg);
}
#menu-toggle.open .hamburger::after{
  top:0; transform: rotate(-45deg);
}




@media (min-width: 993px){
  .main-menu-wrapper{
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    background: transparent !important;
    overflow: visible !important;
  }
}




@media (min-width: 993px){
  .menu-toggle{ display: none !important; }
}