/* Answers for a Broken Heart — canonical shared site shell
   This file is the one visual source of truth for the header and footer on
   every page, including the homepage. */

:root{
  --shell-pine:#294533;
  --shell-deep:#183024;
  --shell-gold:#ad823d;
  --shell-line:#ded8cd;
  --shell-paper:#fffefb;
  --shell-wide:1160px;
}

.siteShellHeader{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  min-height:76px!important;
  background:rgba(255,254,251,.97)!important;
  color:#334139!important;
  border:0!important;
  border-bottom:1px solid rgba(33,49,40,.08)!important;
  box-shadow:none!important;
  backdrop-filter:blur(12px)!important;
}
.siteShellWrap{
  width:min(var(--shell-wide),calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.siteShellNav{
  min-height:76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
}
.siteShellBrand{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:var(--shell-deep)!important;
  text-decoration:none!important;
  line-height:.84!important;
}
.siteShellBrandWords{
  font:1.7rem/.82 Georgia,"Times New Roman",serif!important;
  letter-spacing:-.04em!important;
  color:var(--shell-deep)!important;
}
.siteShellBrandWords small{
  display:block!important;
  font-size:.78rem!important;
  letter-spacing:-.01em!important;
}
.siteShellHeart{
  font:2rem Georgia,"Times New Roman",serif!important;
  color:var(--shell-gold)!important;
  transform:rotate(-4deg)!important;
  margin-top:-4px!important;
}
.siteShellLinks{
  display:flex!important;
  align-items:center!important;
  gap:27px!important;
  font-size:.79rem!important;
  font-weight:400!important;
}
.siteShellLinks a{
  position:relative!important;
  padding:29px 0 24px!important;
  color:#334139!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  background:transparent!important;
  border:0!important;
}
.siteShellLinks a:hover:after,
.siteShellLinks a.active:after,
.siteShellLinks a[aria-current="page"]:after{
  content:""!important;
  height:2px!important;
  background:var(--shell-pine)!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:17px!important;
}
.siteShellMobile{display:none!important;position:relative!important}
.siteShellMobile summary{
  list-style:none!important;
  cursor:pointer!important;
  border:1px solid var(--shell-line)!important;
  background:#fff!important;
  color:var(--shell-pine)!important;
  padding:8px 12px!important;
  border-radius:2px!important;
  font-size:.73rem!important;
  font-weight:800!important;
}
.siteShellMobile summary::-webkit-details-marker{display:none!important}
.siteShellMobileMenu{
  position:absolute!important;
  right:0!important;
  top:44px!important;
  width:230px!important;
  padding:8px!important;
  background:#fff!important;
  border:1px solid var(--shell-line)!important;
  border-radius:2px!important;
  box-shadow:0 16px 36px rgba(30,44,35,.14)!important;
}
.siteShellMobileMenu a{
  display:block!important;
  padding:10px 11px!important;
  color:#334139!important;
  font-size:.78rem!important;
  font-weight:700!important;
  text-decoration:none!important;
  border-bottom:1px solid #eee9df!important;
  background:#fff!important;
}
.siteShellMobileMenu a:last-child{border-bottom:0!important}

.siteShellFooter{
  background:#244833!important;
  color:rgba(255,255,255,.88)!important;
  padding:31px 0 25px!important;
  border:0!important;
  box-shadow:none!important;
  font-size:.76rem!important;
}
.siteShellFooterGrid{
  display:grid!important;
  grid-template-columns:240px 1fr!important;
  gap:48px!important;
  align-items:start!important;
}
.siteShellFooterBrand{
  font:1.5rem/.86 Georgia,"Times New Roman",serif!important;
  color:#fff!important;
}
.siteShellFooterBrand small{
  display:block!important;
  font-size:.69rem!important;
  color:rgba(255,255,255,.72)!important;
}
.siteShellFooterTag{
  margin-top:12px!important;
  color:rgba(255,255,255,.68)!important;
  font-size:.71rem!important;
  line-height:1.5!important;
}
.siteShellFooterLinks{
  display:flex!important;
  justify-content:flex-end!important;
  gap:18px 23px!important;
  flex-wrap:wrap!important;
}
.siteShellFooterLinks a{
  text-decoration:none!important;
  color:rgba(255,255,255,.88)!important;
  font-size:.72rem!important;
}
.siteShellCopyright{
  grid-column:1/-1!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
  padding-top:18px!important;
  color:rgba(255,255,255,.6)!important;
  font-size:.67rem!important;
}

/* Final homepage-palette pass for interior content.
   site-shell.css loads last, so these rules intentionally neutralize the
   handful of legacy page-level colors that survived earlier design locks. */
body[class*="page-"]{
  --ab-pine:#294533;
  --ab-deep:#183024;
  --ab-sage:#738371;
  --ab-cream:#f5f0e7;
  --ab-warm:#fbf8f2;
  --ab-paper:#fffefb;
  --ab-ink:#242a26;
  --ab-muted:#656d67;
  --ab-gold:#ad823d;
  --ab-line:#ded8cd;
}

body[class*="page-"] .supportingLinks,
body[class*="page-"] .supportingLinksWave2{
  background:#faf8f3!important;
  border-top:1px solid var(--ab-line)!important;
  border-bottom-color:var(--ab-line)!important;
}
body[class*="page-"] .supportingLinks .supportingEyebrow,
body[class*="page-"] .supportingLinksWave2 .waveEyebrow{
  color:var(--ab-gold)!important;
}
body[class*="page-"] .supportingLinks h2,
body[class*="page-"] .supportingLinksWave2 h2{
  color:var(--ab-deep)!important;
}
body[class*="page-"] .supportingLinks .supportingIntro,
body[class*="page-"] .supportingLinksWave2 .waveLead{
  color:var(--ab-muted)!important;
}
body[class*="page-"] .supportingLinks .supportingCard,
body[class*="page-"] .supportingLinksWave2 .waveCard{
  background:#fff!important;
  border:1px solid var(--ab-line)!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
body[class*="page-"] .supportingLinks .supportingCard:hover,
body[class*="page-"] .supportingLinksWave2 .waveCard:hover{
  border-color:#cfc6b7!important;
  box-shadow:0 12px 28px rgba(30,44,35,.08)!important;
}
body[class*="page-"] .supportingLinks .supportingCard small,
body[class*="page-"] .supportingLinksWave2 .waveCard small{
  color:var(--ab-gold)!important;
}
body[class*="page-"] .supportingLinks .supportingCard strong,
body[class*="page-"] .supportingLinksWave2 .waveCard strong{
  color:#25382d!important;
}
body[class*="page-"] .supportingLinks .supportingCard span,
body[class*="page-"] .supportingLinksWave2 .waveCard span{
  color:var(--ab-muted)!important;
}

/* Podcast resources use the same cream / white / pine / gold language as home. */
body[class*="page-"] .podcastResource,
body[class*="page-"] .hurtingPodcastResource{
  background:var(--ab-cream)!important;
  border:1px solid var(--ab-line)!important;
  border-top:4px solid var(--ab-gold)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body[class*="page-"] .podcastEpisode,
body[class*="page-"] .hurtingPodcastEpisode{
  background:#fffefb!important;
  border:1px solid var(--ab-line)!important;
}
body[class*="page-"] .podcastResource .podcastEyebrow,
body[class*="page-"] .hurtingPodcastEyebrow{
  color:var(--ab-gold)!important;
}
body[class*="page-"] .podcastResource h2,
body[class*="page-"] .podcastEpisode h3,
body[class*="page-"] .hurtingPodcastCopy h2{
  color:var(--ab-deep)!important;
}
body[class*="page-"] .podcastResource .podcastIntro,
body[class*="page-"] .podcastEpisode p,
body[class*="page-"] .hurtingPodcastCopy p{
  color:var(--ab-muted)!important;
}
body[class*="page-"] .podcastButton,
body[class*="page-"] .hurtingPodcastButton{
  background:var(--ab-pine)!important;
  color:#fff!important;
  border:1px solid var(--ab-pine)!important;
}
body[class*="page-"] .podcastButton:hover,
body[class*="page-"] .hurtingPodcastButton:hover{
  background:var(--ab-deep)!important;
  border-color:var(--ab-deep)!important;
}

/* Book + Free Resources: green is an accent, not a dominant surface.
   These large panels now follow the homepage's warm neutral section language. */
body.page-book .scriptureBox,
body.page-free-guides .tonightCard{
  background:var(--ab-cream)!important;
  color:var(--ab-ink)!important;
  border:1px solid var(--ab-line)!important;
  border-top:4px solid var(--ab-gold)!important;
  box-shadow:none!important;
}
body.page-book .scriptureBox p,
body.page-free-guides .tonightCard p{
  color:var(--ab-muted)!important;
}
body.page-book .scriptureBox small,
body.page-free-guides .tonightCard small{
  color:var(--ab-gold)!important;
}
body.page-free-guides .tonightCard h2{
  color:var(--ab-deep)!important;
}
body.page-free-guides .tonightCard .btn{
  background:var(--ab-pine)!important;
  color:#fff!important;
  border-color:var(--ab-pine)!important;
}
body.page-free-guides .tonightCard .btn:hover{
  background:var(--ab-deep)!important;
  border-color:var(--ab-deep)!important;
}
body.page-book .darkBand,
body.page-free-guides .darkBand{
  background:#faf8f3!important;
  color:var(--ab-ink)!important;
  border-top:1px solid var(--ab-line)!important;
  border-bottom:1px solid var(--ab-line)!important;
}
body.page-book .darkBand h2,
body.page-free-guides .darkBand h2{
  color:var(--ab-deep)!important;
}
body.page-book .darkBand p,
body.page-free-guides .darkBand p{
  color:var(--ab-muted)!important;
}
body.page-book .darkBand .eyebrow,
body.page-free-guides .darkBand .eyebrow{
  color:var(--ab-gold)!important;
}
body.page-book .releaseForm input[type="email"],
body.page-free-guides .signupForm input[type="email"]{
  border:1px solid var(--ab-line)!important;
  background:#fff!important;
  color:var(--ab-ink)!important;
}
body.page-book .releaseForm button,
body.page-free-guides .signupForm button{
  background:var(--ab-pine)!important;
  color:#fff!important;
  border:1px solid var(--ab-pine)!important;
}
body.page-book .releasePrivacy,
body.page-free-guides .signupPrivacy{
  color:var(--ab-muted)!important;
}

@media(max-width:900px){
  .siteShellLinks{gap:16px!important;font-size:.72rem!important}
}
@media(max-width:760px){
  .siteShellLinks{display:none!important}
  .siteShellMobile{display:block!important}
  .siteShellFooterGrid{grid-template-columns:1fr!important;gap:22px!important}
  .siteShellFooterLinks{justify-content:flex-start!important}
  .siteShellCopyright{grid-column:1!important}
  .siteShellWrap{width:min(100% - 30px,var(--shell-wide))!important}
}