/* DearAfrica elevated shell — shared by public information pages. */
:root{
  --da-shell:#201c18;
  --da-shell-deep:#15120f;
  --da-surface:rgba(37,32,28,.94);
  --da-surface-soft:rgba(52,45,38,.86);
  --da-edge:rgba(244,237,226,.13);
  --da-highlight:rgba(255,255,255,.06);
  --da-shadow:0 26px 72px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.05) inset;
  --da-radius:28px;
}

html{background:var(--da-shell-deep)}
body{
  min-height:100dvh;
  background:
    linear-gradient(180deg,rgba(15,13,11,.54),rgba(15,13,11,.72)),
    url('forest-bg.jpg') center/cover fixed,
    var(--da-shell-deep)!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(68% 45% at 50% 0,rgba(201,169,138,.06),transparent 72%);
}

/* The navigation is a single floating object everywhere. */
.site-header,
.site-nav,
.global-nav{
  width:min(1200px,calc(100% - 36px))!important;
  min-height:58px!important;
  margin:18px auto 0!important;
  padding-inline:clamp(16px,3vw,32px)!important;
  border:1px solid var(--da-edge)!important;
  border-radius:18px!important;
  background:rgba(30,26,22,.9)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.28),inset 0 1px 0 var(--da-highlight)!important;
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
}
.site-header,.global-nav{top:18px!important}
.site-nav{top:18px!important}

/* Information pages float in a readable, consistent surface. */
body > main,
.page-content{
  width:min(1200px,calc(100% - 36px))!important;
  max-width:none!important;
  margin:18px auto!important;
  border:1px solid var(--da-edge);
  border-radius:var(--da-radius);
  background:linear-gradient(155deg,rgba(48,42,36,.96),rgba(31,27,23,.97))!important;
  box-shadow:var(--da-shadow);
  overflow:clip;
}

/* Home remains image-led, but now lives inside the same elevated frame. */
body > main > .hero{
  width:100%!important;
  margin-left:0!important;
  padding-inline:clamp(24px,6vw,76px)!important;
  border-bottom:1px solid var(--da-edge);
}
body > main > .section,
body > main > .two-outcomes,
body > main > .language-field{
  margin-inline:clamp(24px,6vw,76px);
}
body > main > .section{border-color:var(--da-edge)!important}

/* Card material is intentionally subtle: raised, not boxed. */
.ab-card,.ab-behind-card,.feature-card,.faq-item,.post,.program-card,
.contact-form,.domain-checker,.domain-support-card,.gift-card,.pwb-sponsor{
  border:1px solid var(--da-edge)!important;
  background:var(--da-surface-soft)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.23),inset 0 1px 0 var(--da-highlight)!important;
}
.ab-card,.feature-card,.contact-form,.domain-checker,.gift-card,.pwb-sponsor{border-radius:20px!important}
.ab-behind-card,.faq-item,.post,.program-card,.domain-support-card{border-radius:16px!important}

/* CTAs are tactile and consistently legible. */
.button-primary,.btn,.menu-apply,.site-nav a[data-primary="true"],
.pwb-sponsor__details summary,.pwb-sponsor__checkout{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px!important;
  background:#8faf79!important;
  color:#17140f!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.26)!important;
}
.button-primary:hover,.btn:hover,.menu-apply:hover,.site-nav a[data-primary="true"]:hover,
.pwb-sponsor__details summary:hover,.pwb-sponsor__checkout:hover{filter:brightness(1.08);transform:translateY(-1px)}

.site-footer,.global-footer{
  width:min(1200px,calc(100% - 36px));
  max-width:none!important;
  margin:0 auto 18px!important;
  border:1px solid var(--da-edge)!important;
  border-radius:20px!important;
  background:rgba(30,26,22,.9)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.2),inset 0 1px 0 var(--da-highlight);
}

@media (max-width:700px){
  :root{--da-radius:20px}
  .site-header,.site-nav,.global-nav{width:calc(100% - 20px)!important;min-height:54px!important;margin-top:10px!important;border-radius:14px!important}
  .site-header,.site-nav,.global-nav{top:10px!important}
  body > main,.page-content{width:calc(100% - 20px)!important;margin:10px auto!important;border-radius:20px}
  body > main > .hero{padding-inline:22px!important}
  body > main > .section,body > main > .two-outcomes,body > main > .language-field{margin-inline:22px}
  .site-footer,.global-footer{width:calc(100% - 20px);margin-bottom:10px!important;border-radius:16px!important}
}

/* City-led rotating artwork is reserved for the public home and about pages. */
.city-rotator{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#15120f}
.city-rotator span{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.025);transition:opacity 1.5s ease,transform 9s ease}
.city-rotator span.is-active{opacity:1;transform:scale(1)}
.hero:has(.city-rotator){isolation:isolate;background-image:none!important}
.hero:has(.city-rotator)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,17,14,.68) 0%,rgba(20,17,14,.48) 52%,rgba(20,17,14,.18) 100%)}
.hero:has(.city-rotator)>:not(.city-rotator){position:relative;z-index:2}

body.about-city-rotating .about-city-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:#15120f;pointer-events:none}
body.about-city-rotating .about-city-backdrop .city-rotator{position:absolute}
body.about-city-rotating>.site-nav,body.about-city-rotating>.page-content,body.about-city-rotating>.site-footer{position:relative;z-index:1}
body.about-city-rotating .about-city-page{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
body.about-city-rotating .about-city-page .ab-card{background:rgba(40,35,31,.7)!important;backdrop-filter:blur(6px)}

/* The home chapters float independently, leaving open seams to the city imagery. */
body:has(.hero .city-rotator)>main{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
body:has(.hero .city-rotator)>main>.hero{border:1px solid var(--da-edge);border-radius:var(--da-radius);overflow:hidden}
body:has(.hero .city-rotator)>main>:is(.section,.two-outcomes,.language-field){
  margin:18px 0!important;
  padding:clamp(58px,8vw,96px) clamp(24px,6vw,76px)!important;
  border:1px solid var(--da-edge);
  border-radius:var(--da-radius);
  background:rgba(37,32,28,.7);
  box-shadow:var(--da-shadow);
}
body:has(.hero .city-rotator)>main>.two-outcomes{width:auto!important}

@media(max-width:700px){
  .hero:has(.city-rotator)::before{background:linear-gradient(180deg,rgba(20,17,14,.62),rgba(20,17,14,.42))}
  body:has(.hero .city-rotator)>main>:is(.section,.two-outcomes,.language-field){margin:10px 0!important;padding:52px 22px!important;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){.city-rotator span{transition:none}}