/* Turquoise theme inspired by the updated Agape logo. */
:root {
  --ink: #061715;
  --ink-soft: #0b2422;
  --gold: #20cfc4;
  --gold-light: #a2f5ee;
  --cream: #f1fbf9;
  --muted: #a8bdb9;
  --line: rgba(105, 232, 222, .25);
}

.agape-footer .footer-main {
  grid-template-columns: minmax(190px, 1.2fr) minmax(120px, .65fr) minmax(130px, .7fr) minmax(230px, 1fr);
  gap: clamp(24px, 3vw, 42px);
}
.footer-visit-card {
  align-self: start;
  padding: 18px 20px 16px;
  border: 1px solid rgba(241, 211, 155, .18);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(34, 54, 76, .72), rgba(16, 14, 11, .82));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.footer-visit-card h2 {
  margin: 0 0 10px;
  color: var(--gold-light);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.footer-visit-stats { margin: 0; }
.footer-visit-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.footer-visit-stats dt {
  color: #e9bd6e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.footer-visit-stats dd {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.footer-visit-chart-wrap {
  margin-top: 12px;
  padding: 8px 10px 5px;
  border: 1px solid rgba(241, 211, 155, .16);
  border-radius: 8px;
  background: rgba(7, 13, 20, .64);
}
.footer-visit-chart { display: block; width: 100%; height: 72px; overflow: visible; }
.footer-visit-chart polyline {
  fill: none;
  stroke: #d8a449;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-visit-chart circle { fill: #f1d39b; stroke: #d8a449; stroke-width: 2; }
.footer-visit-chart-wrap > span {
  display: block;
  color: #8e887d;
  font-size: 8px;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .agape-footer .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-visit-card { max-width: 360px; }
}
@media (max-width: 680px) {
  .agape-footer .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-visit-card { grid-column: 1 / -1; width: 100%; max-width: 420px; }
}

body.agape-site { background: var(--ink); color: var(--cream); font-size: 16px; }
.agape-header { border-bottom-color: rgba(162, 245, 238, .12); }
.agape-brand { width: 94px; height: 94px; justify-content: center; }
.agape-brand img { width: 88px; height: 88px; max-height: none; object-fit: contain; mix-blend-mode: screen; }
.agape-nav { gap: clamp(18px, 1.7vw, 30px); font-size: 14px; letter-spacing: .025em; color: #d6e9e6; }
.agape-nav .nav-social { font-size: 18px; }
.agape-nav>a:not(.nav-visit):hover, .agape-nav .active,
.nav-dropdown.is-active>.nav-dropdown-toggle { color: var(--gold-light); }
.nav-visit { color: var(--gold-light); border-color: var(--line); }
.nav-visit:hover { background: var(--gold); color: #05201d; }
.nav-toggle span { background: var(--gold-light); }
.nav-dropdown-menu { background: #0b2422; border-color: var(--line); }
.nav-dropdown-menu a { color: #d6e9e6; font-size: 15px; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { color: var(--gold-light); }

.home-hero { background: radial-gradient(ellipse at 72% 47%, #123c38 0%, #0b2422 36%, #061715 76%); }
.home-hero:after { background: linear-gradient(90deg, rgba(6,23,21,.95), rgba(6,23,21,.78) 36%, rgba(6,23,21,.1)); }
.hero-glow-one { border-color: rgba(32,207,196,.2); box-shadow: 0 0 110px rgba(32,207,196,.13); }
.hero-glow-two { border-color: rgba(32,207,196,.1); }
.hero-art .art-frame img { filter: hue-rotate(0deg) saturate(1.25); }
.eyebrow { color: var(--gold-light); }
.eyebrow-line, .art-caption-dot { background: #071917; }
.hero-copy>p { color: #bdcecb; font-size: 16px; }
.button-gold { background: linear-gradient(115deg, #18bdb3, #a0f2e9); color: #05201d; font-size: 13px; }
.button-gold:hover { color: #05201d; }
.button-text { font-size: 13px; }
.hero-follow { color: #a8bdb9; font-size: 12px; }
.follow-icons a { color: var(--gold-light); border-color: var(--line); }
.art-caption { color: #a2e7df; font-size: 9px; }
.scroll-cue { color: #a8bdb9; font-size: 9px; }

.welcome-section { background: #a8bdb9; }
.welcome-mark { border-color: #afd8d2; background: linear-gradient(145deg, #dcefeb, #f7fcfa); color: #087e77; }
.welcome-mark:before, .welcome-mark:after { border-color: #c4e2de; }
.mark-heart { color: #12a99f; }
.welcome-copy .dark, .social-callout .dark { color: #071917; }
.welcome-copy h2 em, .social-callout h2 em { color: #07877f; }
.welcome-copy p { color: #4e6460; font-size: 16px; }
.text-link { color: #086d67; border-color: #46b9b1; font-size: 13px; }

.gather-section { background: var(--ink); }
.gather-copy>p { color: #b2c5c1; font-size: 15px; }
.gather-card { background: linear-gradient(145deg, #10312e, #0b2422); border-color: rgba(105,232,222,.2); }
.gather-card-outline { background: transparent; }
.gather-card-top { color: var(--gold); }
.card-index { color: #a8bdb9; font-size: 10px; }
.gather-card h3 { color: #eaf7f4; }
.gather-card p { color: #bbccc8; font-size: 13px; }
.gather-card>a { color: var(--gold-light); font-size: 13px; }

.social-section { background: #a8bdb9; }
.social-callout-right>p { color: #071917; font-size: 15px; }
.social-buttons a { border-color: #071917; color: #071917; font-size: 13px; }
.social-buttons a i:last-child { color: #07877f; }
.agape-footer { background: #04110f; color: #c4d5d2; border-top-color: rgba(162,245,238,.12); }
.footer-brand-block img { width: 94px; height: 94px; object-fit: contain; mix-blend-mode: screen; }
.footer-brand-block p { color: #a5bbb7; font-size: 13px; }
.footer-main .eyebrow { font-size: 10px; }
.footer-main a:not(.footer-brand-block a) { color: #d4e4e1; font-size: 13px; }
.footer-main a:hover { color: var(--gold-light); }
.footer-social-block a i { color: var(--gold); }
.footer-bottom { color: #9bb0ac; font-size: 11px; }

.inner-hero { background: radial-gradient(ellipse at 70% 70%, #123c38, #061715 67%); }
.page-content { color: #e0ece9; }
.page-content article { font-size: 16px; }
.page-content h2, .page-content h3 { color: #087d5a; }
.page-content a { color: var(--gold-light); }
.page-content .page-lead { color: var(--cream); }
.page-content .info-list i { color: var(--gold); }

.agape-nav .nav-account, .agape-nav .nav-giving { color: #d1e6e2; white-space: nowrap; }
.agape-nav .nav-giving i { color: #72d8cf; margin-right: 4px; }
.agape-nav .nav-account i { color: #72d8cf; margin-right: 5px; }
.agape-nav .nav-account-logout { opacity: .78; }
.giving-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); align-items: center; gap: clamp(34px, 7vw, 92px); max-width: 1120px; margin: 0 auto; }
.giving-intro { padding: 18px 0; }
.giving-kicker { display: inline-flex; align-items: center; gap: 9px; color: #82e1d8; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.giving-kicker i { font-size: 14px; }
.giving-intro h2 { max-width: 540px; margin: 22px 0 16px; color: #f1f8f6; font: 500 clamp(38px, 4.8vw, 58px)/1.08 var(--serif); }
.giving-intro h2 em { color: #65d1c7; }
.giving-intro > .page-lead { max-width: 510px; margin-bottom: 30px; color: #b9ceca; font: 400 16px/1.8 var(--sans); }
.giving-pix-card { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(114,216,207,.2); background: linear-gradient(125deg, rgba(23,90,83,.46), rgba(9,38,35,.42)); }
.giving-pix-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; color: #09201e; background: #7de0d7; font-size: 21px; }
.giving-pix-card strong { color: #f3fbf9; font-size: 15px; }
.giving-pix-card p { margin: 4px 0 0; color: #b8cbc8; font-size: 13px; line-height: 1.6; }
.giving-key-wrap { margin-top: 25px; }
.giving-label { color: #a4bbb6; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.giving-key-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding: 10px 10px 10px 15px; border: 1px solid rgba(114,216,207,.28); background: #061a18; }
.giving-key-row code { overflow-wrap: anywhere; color: #e8f6f3; font: 600 15px/1.5 var(--sans); }
.giving-copy { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 10px 12px; border: 0; background: #80e1d8; color: #08211e; font: 600 12px var(--sans); cursor: pointer; }
.giving-copy:hover { background: #a2f0e8; }
.giving-copy-status { display: block; min-height: 20px; margin-top: 5px; color: #80e1d8; font-size: 12px; }
.giving-note { display: flex; gap: 9px; margin: 12px 0 0; color: #91aaa5; font-size: 12px; line-height: 1.7; }
.giving-note i { color: #78d9cf; }
.giving-poster { width: min(100%, 475px); justify-self: center; margin: 0; padding: 11px; background: #fff; box-shadow: 0 24px 70px #0005; }
.giving-poster img { display: block; width: 100%; height: auto; }
.giving-poster figcaption { padding: 10px 8px 3px; color: #475653; font-size: 11px; text-align: center; }
@media (max-width: 760px) {
  .giving-page { grid-template-columns: 1fr; gap: 28px; }
  .giving-intro { padding-top: 0; }
  .giving-intro h2 { font-size: 42px; }
  .giving-intro > .page-lead { font-size: 15px; }
  .giving-poster { width: min(100%, 420px); }
}

@media (min-width: 1051px) and (max-width: 1199px) {
  .agape-brand { width: 82px; }
  .agape-brand img { width: 78px; height: 78px; }
  .agape-nav { gap: 15px; font-size: 13px; }
}
@media (max-width: 1050px) {
  .agape-brand { width: 78px; height: 76px; }
  .agape-brand img { width: 72px; height: 72px; }
  .agape-nav { background: #071b19; font-size: 16px; }
  .agape-nav>a { border-bottom-color: rgba(162,245,238,.1); }
  .nav-dropdown { border-bottom-color: rgba(162,245,238,.1); }
  .nav-dropdown-toggle { padding-block: 14px; }
  .nav-dropdown-menu a { font-size: 15px; }
}
@media (max-width: 680px) {
  .agape-brand { height: 72px; }
  .agape-brand img { width: 68px; height: 68px; }
  .agape-nav { top: 76px; }
  .agape-nav>a { padding-block: 14px; }
  .agape-nav .nav-visit { padding: 14px; }
  .hero-copy>p { font-size: 15px; }
  .gather-card p { font-size: 14px; }
  .footer-main a:not(.footer-brand-block a) { font-size: 14px; }
  .footer-brand-block img { width: 82px; height: 82px; }
  .page-content article { font-size: 15px; }
}