/*
Theme Name: Alphabets of Islam Child
Template:   twentytwentyfive
Version:    1.1.6
Description: Child theme for Alphabets of Islam
*/

/* ============================================================
   PARENT THEME OVERRIDES
   Strip Twenty Twenty-Five's layout constraints from our content
   ============================================================ */

/* 1. Hide parent header & footer */
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > footer {
  display: none !important;
}

/* 2. Remove the constrained content width that locks layout to 645px */
.entry-content,
.wp-block-post-content,
.is-layout-constrained,
.is-layout-flow,
.wp-block-group {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. Make all wrappers full width so sections go edge-to-edge */
.wp-site-blocks,
.wp-site-blocks > main,
.wp-site-blocks > main > .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 5. Force ALL our sections to full viewport width, breaking out of any block container */
#aoi-nav, .nav-mobile,
#aoi-hero, .aoi-marquee,
#aoi-about, #aoi-programs,
#aoi-why, #aoi-testi,
#aoi-formats, #aoi-faq,
#aoi-enroll, #aoi-footer,
#aoi-c, #aoi-cr {
  position: relative;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* Nav and cursor are fixed/absolute — override the transform for those */
#aoi-nav {
  position: fixed !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
}

.nav-mobile {
  position: fixed !important;
  left: 0 !important;
  transform: translateY(-110%) !important;
  width: 100% !important;
}

.nav-mobile.open {
  transform: translateY(0) !important;
}

#aoi-c, #aoi-cr {
  position: fixed !important;
  left: 0 !important;
  transform: none !important;
  width: 8px !important;
}

#aoi-cr {
  width: 32px !important;
}

/* 4. Override Twenty Twenty-Five global content size CSS vars */
:where(body) {
  --wp--style--global--content-size: 100% !important;
  --wp--style--global--wide-size: 100% !important;
}

/* ============================================================
   RESET & ROOT VARIABLES
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --forest:      #0d2818;
  --forest-mid:  #153d24;
  --forest-light:#1e5c35;
  --gold:        #c9a84c;
  --gold-light:  #e8c97a;
  --cream:       #faf8f3;
  --white:       #fff;
  --text-dark:   #0a1f12;
  --text-mid:    #2d4a35;
  --text-muted:  #6b8c74;
  --nav-h:       72px;
}

html, body {
  background: #0d2818 !important;
  overflow-x: hidden !important;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--white);
  overflow-x: hidden;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
#aoi-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}

#aoi-nav.scrolled {
  background: rgba(13, 40, 24, 0.97);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(201, 168, 76, 0.15);
}

/* Admin bar offset */
#aoi-nav            { top: 0 !important; }
.admin-bar #aoi-nav { top: 32px !important; }
.admin-bar .nav-mobile { top: calc(72px + 32px) !important; }

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
}

.nav-logo span { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
  transition: color .3s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s;
}

.nav-links a:hover            { color: var(--gold); }
.nav-links a:hover::after     { width: 100%; }

.nav-cta {
  background: var(--gold) !important;
  color: var(--forest) !important;
  padding: .55rem 1.5rem;
  border-radius: 2px;
  font-weight: 500 !important;
  transition: background .3s, transform .2s !important;
}

.nav-cta::after           { display: none !important; }
.nav-cta:hover            { background: var(--gold-light) !important; transform: translateY(-1px) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}

.nav-mobile {
  display: none;
}

@media (max-width: 860px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }

  .nav-mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: rgba(13, 40, 24, 0.98);
    padding: 2rem 5vw;
    gap: 1.5rem;
    transform: translateY(-110%);
    transition: transform .4s;
    z-index: 999;
  }

  .nav-mobile.open { transform: translateY(0); }

  .nav-mobile a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201, 168, 76, .1);
    padding-bottom: 1.25rem;
  }

  .nav-mobile a:last-child {
    border: none;
    color: var(--gold);
  }
}

/* ============================================================
   HERO
   ============================================================ */
#aoi-hero {
  min-height: 100vh;
  background: var(--forest);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
}

.h-bg1 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 15% 60%, rgba(201, 168, 76, .05) 0%, transparent 60%);
}

.h-bg2 {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 85% 20%, rgba(30, 92, 53, .5) 0%, transparent 55%);
}

.h-grid {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image:
    linear-gradient(rgba(201, 168, 76, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 1) 1px, transparent 1px);
  background-size: 72px 72px;
}

.h-arabic {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10rem, 22vw, 26rem);
  color: rgba(201, 168, 76, .04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.h-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.h-imgslot {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 96px;
  width: 40%;
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.h-imgslot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--forest) 0%, transparent 18%);
  z-index: 0;
}

.h-imgslot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
}

.h-content {
  position: relative;
  z-index: 2;
  padding: 4rem 5vw 10rem;
  max-width: 860px;
}

.h-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp .7s .3s forwards;
}

.h-eyebrow::before {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--gold);
}

.h-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.2rem, 7.5vw, 7rem);
  font-weight: 600;
  line-height: 1.02;
  color: var(--white);
  margin-bottom: 1.75rem;
  opacity: 0;
  animation: fadeUp .85s .5s forwards;
}

.h-content h1 em { color: var(--gold); font-style: italic; }

.h-sub {
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, .58);
  line-height: 1.8;
  max-width: 500px;
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp .85s .7s forwards;
}

.h-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .85s .9s forwards;
}

/* Hero stats bar */
.h-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(201, 168, 76, .12);
  opacity: 0;
  animation: fadeUp .85s 1.1s forwards;
}

.h-stat {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 1.75rem 5vw;
  border-right: 1px solid rgba(201, 168, 76, .1);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.h-stat:last-child { border-right: none; }

.h-sn {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  min-width: 3rem;
}

.h-sl {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  line-height: 1.4;
}

@media (max-width: 768px) {
  /* Override desktop slot positioning — make it fill entire hero */
  .h-imgslot {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  /* Override the left-to-right gradient with top-to-bottom for mobile */
  .h-imgslot::before {
    background: linear-gradient(to bottom, rgba(13,40,24,0.45) 0%, rgba(13,40,24,0.88) 75%) !important;
  }

  .h-imgslot img {
    opacity: .35 !important;
    object-position: center top !important;
  }

  .h-stats { flex-wrap: wrap; }

  .h-stat {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(201, 168, 76, .1);
    padding: 1.25rem 5vw;
  }

  .h-stat:nth-child(odd) { border-right: 1px solid rgba(201, 168, 76, .1); }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.aoi-marquee {
  background: var(--gold);
  padding: .9rem 0;
  overflow: hidden;
}

.aoi-mtrack {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

.aoi-mi {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
  flex-shrink: 0;
}

.aoi-md {
  width: 3px;
  height: 3px;
  background: var(--forest);
  border-radius: 50%;
  opacity: .35;
}

/* ============================================================
   SHARED SECTION UTILITIES
   ============================================================ */
.aoi-sec  { padding: 8rem 0; }
.aoi-in   { max-width: 1200px; margin: 0 auto; padding: 0 5vw; }

.aoi-tag {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

.aoi-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.aoi-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--text-dark);
}

.aoi-h2.light { color: var(--white); }

.aoi-p {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 510px;
  margin-top: .9rem;
}

.aoi-p.light { color: rgba(255, 255, 255, .52); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-gold {
  background: var(--gold);
  color: var(--forest);
  padding: .95rem 2.25rem;
  border-radius: 2px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background .3s, transform .3s, box-shadow .3s;
}

.btn-gold svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(201, 168, 76, .28);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--white);
  padding: .95rem 2.25rem;
  border-radius: 2px;
  font-size: .82rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s, color .3s, transform .3s;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 6rem;
  align-items: center;
}

.about-img { position: relative; }

.about-frame {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--forest-mid);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}

.about-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s;
}

.about-frame:hover img { transform: scale(1.04); }

.about-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--gold);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(201, 168, 76, .32);
}

.about-badge-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--forest);
  line-height: 1;
}

.about-badge-t {
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--forest);
  text-align: center;
  line-height: 1.4;
  margin-top: .15rem;
}

/* Pillars list */
.pillars {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}

.pillar {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(13, 40, 24, .1);
  position: relative;
  transition: padding-left .35s;
  cursor: default;
}

.pillar:first-child { border-top: 1px solid rgba(13, 40, 24, .1); }

.pillar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(201, 168, 76, .06);
  transition: width .35s;
}

.pillar:hover            { padding-left: .75rem; }
.pillar:hover::before    { width: 100%; }

.pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  background: var(--forest);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
}

.pillar-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
}

.pillar-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: .2rem;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 4rem; }
}

/* ============================================================
   PROGRAMS
   ============================================================ */
#aoi-programs {
  background: var(--forest);
  overflow: hidden;
  position: relative;
  padding: 8rem 0;
}

#aoi-programs::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at 80% 30%, rgba(201, 168, 76, .06) 0%, transparent 55%);
  pointer-events: none;
}

.prog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(201, 168, 76, .1);
  border: 1.5px solid rgba(201, 168, 76, .1);
}

.prog-card {
  background: var(--forest);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: background .35s;
  cursor: default;
}

.prog-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}

.prog-card:hover             { background: var(--forest-mid); }
.prog-card:hover::after      { transform: scaleX(1); }

.prog-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--forest-mid);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.prog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.prog-card:hover .prog-img img { transform: scale(1.05); }

.prog-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: rgba(201, 168, 76, .08);
  line-height: 1;
  margin-bottom: .75rem;
  transition: color .35s;
}

.prog-card:hover .prog-num { color: rgba(201, 168, 76, .16); }

.prog-label {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .55);
  margin-bottom: .4rem;
}

.prog-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .6rem;
}

.prog-desc {
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.prog-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: gap .3s;
}

.prog-link:hover { gap: .75rem; }

.prog-link svg {
  width: 14px;
  height: 14px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 2;
}

@media (max-width: 860px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .prog-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
#aoi-why {
  background: var(--forest);
  padding: 8rem 0;
}

.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.features {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}

.feat {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(13, 40, 24, .1);
  position: relative;
  transition: padding-left .3s;
  cursor: default;
}

.feat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(201, 168, 76, .06);
  transition: width .3s;
}

.feat:hover            { padding-left: .75rem; }
.feat:hover::before    { width: 100%; }

.feat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  color: var(--gold);
  font-weight: 600;
  min-width: 1.75rem;
  margin-top: .1rem;
}

.feat-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .3rem;
}

.feat-text {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.75;
}

.why-visual { position: relative; }

.why-card {
  background: var(--forest);
  padding: 2.75rem;
  border-radius: 3px;
  position: relative;
}

.why-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--white);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.why-attr {
  font-size: .75rem;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .06em;
}

.why-accent {
  position: absolute;
  bottom: -1.75rem;
  right: -1.75rem;
  background: var(--gold);
  padding: 1.75rem 2rem;
  border-radius: 2px;
}

.why-accent-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--forest);
  line-height: 1;
}

.why-accent-l {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin-top: .25rem;
}

.why-wrap {
  padding-bottom: 2rem;
  padding-right: 2rem;
}

@media (max-width: 860px) {
  .why-grid   { grid-template-columns: 1fr; gap: 4rem; }
  .why-wrap   { padding-bottom: 0; padding-right: 0; }
  .why-accent { position: static; margin-top: 1rem; display: inline-block; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
#aoi-testi {
  background: var(--forest);
  padding: 8rem 0;
}

.testi-hdr {
  text-align: center;
  margin-bottom: 4rem;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(201, 168, 76, .08);
  border: 1px solid rgba(201, 168, 76, .08);
}

.tcard {
  background: var(--forest);
  padding: 2.25rem;
  transition: background .3s;
}

.tcard:hover { background: var(--forest-mid); }

.tstars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.25rem;
}

.tstar {
  width: 11px;
  height: 11px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.tquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, .8);
  line-height: 1.72;
  margin-bottom: 1.75rem;
}

.tattr {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-top: 1px solid rgba(201, 168, 76, .08);
  padding-top: 1.25rem;
}

.tavatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--forest-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem;
  color: var(--gold);
  font-weight: 600;
}

.tname {
  font-size: .82rem;
  color: var(--white);
  font-weight: 500;
}

.trole {
  font-size: .7rem;
  color: rgba(255, 255, 255, .38);
  margin-top: .08rem;
}

@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .testi-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FORMATS (PRIVATE / GROUP)
   ============================================================ */
#aoi-formats {
  background: var(--cream);
  padding: 8rem 0;
}

.formats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(13, 40, 24, .1);
  margin-top: 3.5rem;
}

.fcard {
  background: var(--cream);
  padding: 3.25rem;
  transition: background .3s;
}

.fcard:hover { background: #f0ede4; }

.fcard-type {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.fcard-type::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
}

.fcard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .85rem;
}

.fcard-desc {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.82;
  margin-bottom: 1.75rem;
}

.fcard-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.fcard-list li {
  font-size: .82rem;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: .65rem;
}

.fcard-list li::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

@media (max-width: 640px) { .formats-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
#aoi-faq {
  background: var(--forest);
  padding: 8rem 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 6rem;
  align-items: start;
}

.faq-item { border-bottom: 1px solid rgba(201, 168, 76, .1); }

.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 1.6rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--white);
  transition: color .3s;
}

.faq-q:hover { color: var(--gold); }

.faq-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 168, 76, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, transform .35s;
  color: var(--gold);
  font-size: .9rem;
  line-height: 1;
}

.faq-item.open .faq-icon {
  background: var(--gold);
  color: var(--forest);
  border-color: var(--gold);
  transform: rotate(45deg);
}

.faq-a {
  font-size: .875rem;
  color: rgba(255, 255, 255, .5);
  line-height: 1.82;
  display: none;
  padding-bottom: 0;
}

.faq-item.open .faq-a {
  display: block !important;
  padding-bottom: 1.5rem;
}

@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* ============================================================
   ENROLL FORM
   ============================================================ */
#aoi-enroll {
  background: var(--forest);
  position: relative;
  overflow: hidden;
}

#aoi-enroll::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 168, 76, .07) 0%, transparent 65%);
}

.enroll-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  padding: 8rem 5vw;
}

.enroll-inner .aoi-h2 { color: var(--white); }

.enroll-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  margin-top: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fg {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.flabel {
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
}

.finput {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 168, 76, .15);
  padding: .82rem 1.1rem;
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  border-radius: 2px;
  transition: border-color .3s, background .3s;
  outline: none;
  width: 100%;
}

.finput::placeholder { color: rgba(255, 255, 255, .2); }

.finput:focus {
  border-color: var(--gold);
  background: rgba(201, 168, 76, .04);
}

select.finput            { appearance: none; cursor: pointer; }
select.finput option     { background: var(--forest); color: var(--white); }
textarea.finput          { resize: none; height: 100px; }

.fsubmit {
  background: var(--gold);
  color: var(--forest);
  padding: 1rem 2.75rem;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  margin-top: .5rem;
  transition: background .3s, transform .3s;
  align-self: flex-start;
}

.fsubmit:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

.fnote {
  font-size: .7rem;
  color: rgba(255, 255, 255, .22);
  margin-top: .4rem;
}

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
#aoi-footer {
  background: var(--forest);
  border-top: 1px solid rgba(201, 168, 76, .1);
  padding: 4.5rem 5vw 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-tagline {
  font-size: .85rem;
  color: rgba(255, 255, 255, .38);
  line-height: 1.75;
  margin-top: .85rem;
  max-width: 240px;
}

.footer-phones {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.25rem;
}

.footer-phones a {
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .3s;
}

.footer-phones a:hover { color: var(--gold); }

.footer-col-h {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.footer-links a {
  font-size: .82rem;
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .3s;
}

.footer-links a:hover { color: var(--white); }

.footer-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 168, 76, .07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: .72rem;
  color: rgba(255, 255, 255, .22);
}

.footer-socials { display: flex; gap: 1rem; }

.fsoc {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201, 168, 76, .15);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255, 255, 255, .4);
  font-size: .65rem;
  text-transform: uppercase;
  transition: border-color .3s, color .3s;
}

.fsoc:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s ease, transform .75s ease;
}

.rv.vis {
  opacity: 1;
  transform: translateY(0);
}

.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Enroll form validation styles ─────────────────────────────── */
.ef-error {
  display: none;
  background: rgba(220, 38, 38, .12);
  border: 1px solid rgba(220, 38, 38, .5);
  color: #fca5a5;
  font-size: .82rem;
  padding: .75rem 1rem;
  margin-bottom: .75rem;
  text-align: center;
  border-radius: 2px;
}
.ef-error.show { display: block; }
.ef-field-error { border-color: rgba(220, 38, 38, .7) !important; background: rgba(220, 38, 38, .06) !important; }

/* ── Single blog post: force content wrapper visible ───────────── */
/* Overrides each post's inline style that hides main>div.wp-block-group.alignfull */
body.single main.wp-block-group > div.wp-block-group.alignfull:has(.wp-block-post-content),
body.single main.wp-block-group > div.wp-block-group.alignwide:has(.wp-block-post-content),
body.single main.wp-block-group > div.wp-block-group.alignfull:has(.entry-content),
body.single main.wp-block-group > div.wp-block-group.alignwide:has(.entry-content) {
  display: block !important;
}
body.single .wp-block-post-content { display: flow-root !important; }

/* ── Single blog post: hide parent theme template chrome ───────── */
/* Hides duplicate title, author/category byline, comments, post nav.
   These are theme template parts OUTSIDE .wp-block-post-content;
   the article's own heading lives inside the content and is untouched. */
body.single .wp-block-post-title,
body.single .wp-block-post-author,
body.single .wp-block-post-author-name,
body.single .wp-block-post-terms,
body.single .wp-block-post-date,
body.single .wp-block-post-navigation-link,
body.single .wp-block-post-navigation,
body.single nav.post-navigation,
body.single .wp-block-comments,
body.single .wp-block-post-comments,
body.single .comment-respond,
body.single #comments,
body.single .wp-block-post-comments-form {
  display: none !important;
}

/* ── Single post: hide leftover byline group (Written by ... in ...) ── */
body.single .wp-block-post-content + *,
body.single main > .wp-block-group > .wp-block-group:has(> p:only-child) {
  /* fallback only; primary byline hide handled below */
}
/* The theme byline sits in a group with author/date/terms — hide that whole group */
body.single .entry-content ~ .wp-block-group:has(.wp-block-post-author),
body.single .wp-block-group:has(> .wp-block-post-author-name),
body.single .wp-block-group:has(> .wp-block-post-terms) {
  display: none !important;
}

/* ── Single post: reduce big top gap ──────────────────────────── */
body.single main.wp-block-group > div.wp-block-group:has(.wp-block-post-content) {
  padding-top: 90px !important;
}

/* ── Single post: style the in-content CTA buttons ────────────── */
body.single .cta-btn-primary,
body.single .cta-btn-secondary {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 2px;
  margin: .4rem .6rem .4rem 0;
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}
body.single .cta-btn-primary {
  background: #c9a84c !important;
  color: #0d2818 !important;
}
body.single .cta-btn-primary:hover {
  background: #e8c97a !important;
  transform: translateY(-2px);
}
body.single .cta-btn-secondary {
  border: 1px solid rgba(201,168,76,.45) !important;
  color: #c9a84c !important;
}
body.single .cta-btn-secondary:hover {
  background: #c9a84c !important;
  color: #0d2818 !important;
  transform: translateY(-2px);
}

/* ── Single post: trim the article H1 by 6px across all blogs ──── */
/* Each post's inline <style> sets `.post-hero h1` to
   clamp(2.2rem, 5vw, 3.8rem). This selector is more specific
   (body.single .post-hero h1), so it wins the cascade without
   !important, and `calc(... - 6px)` shaves a flat 6px off every
   breakpoint — uniform across all blog posts. */
body.single .post-hero h1 {
  font-size: calc(clamp(2.2rem, 5vw, 3.8rem) - 6px);
}

/* ── Single post: hide the duplicate Featured Image hero ───────── */
/* Primary fix lives in functions.php (render_block strips the block
   server-side so the large image never downloads). This rule is the
   cache-safe visual fallback for HTML cached before the deploy. */
body.single .wp-block-post-featured-image {
  display: none !important;
}

/* ── Single post: remove the theme's trailing blocks after the article ── */
/* After .wp-block-post-content the theme renders post-navigation / comments
   wrapper groups that are empty on these custom posts and leave a large gap
   before the footer. The article lives entirely inside .wp-block-post-content,
   so any .wp-block-group sibling after it is theme chrome — collapse it. */
body.single .wp-block-post-content ~ .wp-block-group,
body.single .entry-content ~ .wp-block-group {
  display: none !important;
}

/* ── About page (page-id-12): realign sprawling sections ──────── */
/* Sections are full-bleed with only 5vw padding and no max-width, so on
   wide screens content sprawls edge-to-edge — inconsistent with the rest
   of the site (which centers at ~1200px). #aoi-testi was also caught by the
   global 100vw breakout list, making it 16px wider than its siblings and
   dropping its side inset (cards ran to the screen edge). Scope to the page. */
body.page-id-12 #aoi-testi {
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.page-id-12 .sec > *,
body.page-id-12 .cta-sec > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}