/* ═══════════════════════════════════════════════════════════════
   requestaprayer.com — Main Stylesheet v3
   Palette: G1 — Sage Green · Warm Gold · Parchment
   Layout: Contained max-width, collapsible ad zones
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────────── */
:root {
  --green:          #6B7D6A;
  --green-dark:     #5A6C59;
  --green-deep:     #3D4F3C;
  --green-light:    #A8BCA7;
  --green-pale:     #D4E2D3;
  --green-tint:     #EFF4EE;

  --gold:           #E8C97A;
  --gold-dark:      #C9A84C;
  --gold-deep:      #2C3830;

  --parchment:      #F5F2EC;
  --parchment-mid:  #EDE9E0;
  --white:          #ffffff;

  --charcoal:       #2C3531;
  --muted:          #7A8C7A;
  --divider:        #DDD9D0;

  --font-serif:     'Lora', Georgia, serif;
  --font-sans:      'Inter', system-ui, sans-serif;

  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;

  --page-max:       1060px;
  --content-max:    600px;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

html {
  background: #E0DDD7;
  margin:     0;
  padding:    0;
}

body {
  background:  #E0DDD7;
  color:       var(--charcoal);
  font-family: var(--font-sans);
  font-size:   16px;
  line-height: 1.7;
  min-height:  100vh;
  margin:      0;
  padding:     0;
}

img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--green-dark); }
/* ── Card links — never underline on hover ── */
.spoke-card:hover,
.pillar-card:hover,
.insights-card-link:hover,
.insights-card-badge:hover,
.page-btn:hover,
.spokes-insights-link:hover,
.spokes-more-link:hover,
.related-all-link:hover { text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── PAGE CONTAINER ─────────────────────────────────────────────── */
/* Parchment card centered in gray browser chrome on all four sides.
   flex column ensures footer is always pushed to bottom even on
   short-content pages so gray never bleeds through the parchment. */
.page-container {
  max-width:      var(--page-max);
  margin:         0 auto;
  background:     var(--parchment);
  min-height:     100vh;
  position:       relative;
  display:        flex;
  flex-direction: column;
}

/* Body layout and main content grow to fill available space */
.page-container > .body-layout { flex: 1; }

/* ── SITE HEADER ────────────────────────────────────────────────── */
.site-header {
  background: var(--green);
  width: 100%;
  position: relative;
}

.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 24px;
  max-width:       var(--content-max);
  margin:          0 auto;
  position:        relative;
}

/* ── LOGO ───────────────────────────────────────────────────────── */
.logo-link {
  display:         inline-block;
  line-height:     1;
  text-decoration: none;
}
.logo-link:hover  { opacity: 0.88; text-decoration: none; }
.logo-link:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 4px;
  border-radius:  var(--radius-sm);
}

.site-logo {
  display:   block;
  height:    28px;
  width:     auto;
  max-width: 100%;
}

@media (max-width: 480px) {
  .site-logo { height: 26px; }
}

/* ── HAMBURGER ──────────────────────────────────────────────────── */
.hamburger {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  padding:        6px;
  border-radius:  var(--radius-sm);
  transition:     background 0.15s;
  position:       relative;
  user-select:    none;
}
.hamburger:hover { background: rgba(255,255,255,0.12); }

.hamburger span {
  display:       block;
  height:        1.5px;
  background:    #F5F2EC;
  border-radius: 2px;
  transition:    all 0.2s;
}
.hamburger span:nth-child(1) { width: 22px; }
.hamburger span:nth-child(2) { width: 15px; }
.hamburger span:nth-child(3) { width: 22px; }

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── NAV DROPDOWN ───────────────────────────────────────────────── */
.nav-dropdown {
  position:      absolute;
  top:           calc(100% + 6px);
  right:         0;
  background:    var(--white);
  border:        0.5px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    0 6px 24px rgba(44,53,49,0.14);
  min-width:     200px;
  z-index:       500;
  display:       none;
}
.nav-dropdown.open { display: block; }

.nav-drop-label {
  font-size:      9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--muted);
  padding:        11px 18px 4px;
  font-weight:    500;
}

.nav-drop-item {
  display:         block;
  padding:         12px 18px;
  font-size:       14px;
  color:           var(--charcoal);
  border-bottom:   0.5px solid var(--divider);
  text-decoration: none;
  transition:      background 0.12s, color 0.12s;
  font-weight:     400;
}
.nav-drop-item:last-child  { border-bottom: none; }
.nav-drop-item:hover       { background: var(--green-tint); color: var(--green); text-decoration: none; }
.nav-drop-external         { color: var(--green); }
.nav-drop-divider {
  height:     0.5px;
  background: var(--divider);
  margin:     2px 0;
}

/* ── AD ZONES ───────────────────────────────────────────────────── */
/* Leaderboard — collapses when empty */
.ad-leaderboard {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      0;
  background:      var(--parchment);
  border-bottom:   0.5px solid transparent;
}
.ad-leaderboard:not(:empty) {
  min-height:    56px;
  padding:       8px 0;
  border-bottom-color: var(--divider);
}

/* 3-column body layout */
.body-layout {
  display:               grid;
  grid-template-columns: 0px minmax(0, 1fr) 0px;
  align-items:           start;
}
.body-layout.ads-active {
  grid-template-columns: 160px minmax(0, 1fr) 160px;
}

/* Sidebar columns */
.sidebar-col {
  padding-top: 32px;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         20px;
  position:    sticky;
  top:         24px;
  overflow:    hidden;
  width:       0;
  opacity:     0;
  transition:  opacity 0.3s, width 0.3s;
}
.ads-active .sidebar-col {
  width:   160px;
  opacity: 1;
}

.ad-sidebar {
  width:         140px;
  min-height:    280px;
  border:        0.5px solid var(--divider);
  border-radius: var(--radius-md);
  background:    var(--white);
  padding:       4px;
}

.ad-label {
  font-size:      9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--muted);
  text-align:     center;
  margin-bottom:  4px;
  opacity:        0.6;
}

/* Sticky footer ad */
.ad-sticky-footer {
  position:   fixed;
  bottom:     0;
  left:       50%;
  transform:  translateX(-50%);
  width:      100%;
  max-width:  var(--page-max);
  background: var(--parchment);
  border-top: 0.5px solid var(--divider);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  padding:    4px 0;
  z-index:    100;
  box-shadow: 0 -2px 12px rgba(44,53,49,0.06);
}
body:has(.ad-sticky-footer) { padding-bottom: 72px; }

/* ── CENTER COLUMN ──────────────────────────────────────────────── */
.center-col { padding: 0; }

/* ── TAGLINE BLOCK ──────────────────────────────────────────────── */
.tagline-block {
  text-align: center;
  padding:    28px 24px 0;
  max-width:  var(--content-max);
  margin:     0 auto;
}

.tagline-link {
  display:         inline-block;
  font-family:     var(--font-serif);
  font-size:       22px;
  font-weight:     400;
  color:           var(--charcoal);
  text-decoration: none;
  letter-spacing:  -0.01em;
  line-height:     1.3;
  margin-bottom:   8px;
  border-bottom:   1.5px solid var(--gold);
  padding-bottom:  2px;
  transition:      color 0.2s, border-color 0.2s;
}
.tagline-link:hover {
  color:        var(--green-dark);
  border-color: var(--gold-dark);
  text-decoration: none;
}

.tagline-arrow {
  display:          inline-block;
  color:            var(--gold);
  margin-left:      7px;
  font-style:       normal;
  font-size:        17px;
  vertical-align:   1px;
  transition:       transform 0.2s, color 0.2s;
}
.tagline-link:hover .tagline-arrow {
  transform: translateX(3px);
  color:     var(--gold-dark);
}

.tagline-sub {
  display:     block;
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   15px;
  color:       var(--muted);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ── PRAYER FORM ────────────────────────────────────────────────── */
.prayer-form-wrap {
  padding:   26px 24px 0;
  max-width: var(--content-max);
  margin:    0 auto;
}

.prayer-for-label {
  display:      block;
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    19px;
  color:        var(--charcoal);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.prayer-textarea {
  width:        100%;
  height:       130px;
  border:       1px solid #C8C4BC;
  border-radius: var(--radius-md);
  background:   var(--white);
  padding:      16px 18px;
  font-family:  var(--font-sans);
  font-size:    15px;
  font-weight:  300;
  color:        var(--charcoal);
  resize:       none;
  outline:      none;
  line-height:  1.65;
  transition:   border-color 0.2s, box-shadow 0.2s;
}
.prayer-textarea::placeholder { color: #B8B0A4; font-weight: 300; }
.prayer-textarea:focus {
  border-color: var(--green);
  box-shadow:   0 0 0 3px rgba(107,125,106,0.12);
}

.textarea-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      10px;
}

.char-count {
  font-size:       12px;
  color:           var(--muted);
  letter-spacing:  0.02em;
  font-variant-numeric: tabular-nums;
}
.char-count.near-limit { color: #BA8C3A; }
.char-count.at-limit   { color: #A03030; }

/* Gold CTA button */
.btn-prayer {
  background:     var(--gold);
  color:          var(--gold-deep);
  border:         none;
  border-radius:  var(--radius-md);
  padding:        11px 28px;
  font-family:    var(--font-sans);
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.04em;
  cursor:         pointer;
  transition:     background 0.2s, transform 0.1s;
}
.btn-prayer:hover   { background: var(--gold-dark); }
.btn-prayer:active  { transform: scale(0.98); }
.btn-prayer:focus-visible {
  outline:        2px solid var(--green-dark);
  outline-offset: 3px;
}
.btn-prayer:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── PRAYER RESULT ──────────────────────────────────────────────── */
.prayer-result {
  margin:        24px 24px 0;
  max-width:     var(--content-max);
  margin-left:   auto;
  margin-right:  auto;
  background:    var(--white);
  border:        0.5px solid var(--divider);
  border-radius: var(--radius-lg);
  padding:       22px 26px;
  display:       none;
}
.prayer-result.visible { display: block; }

.prayer-result-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   14px;
}

.prayer-result-title {
  font-size:      11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--green);
  font-weight:    500;
}

.prayer-actions   { display: flex; gap: 10px; }
.btn-action {
  font-size:     12px;
  color:         var(--muted);
  background:    none;
  border:        0.5px solid var(--divider);
  border-radius: var(--radius-sm);
  padding:       5px 12px;
  cursor:        pointer;
  font-family:   var(--font-sans);
  transition:    border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-action:hover  { border-color: var(--green-light); color: var(--green); }
.btn-action.copied {
  border-color: var(--green);
  color:        var(--green);
  background:   var(--green-tint);
}

/* Copy confirmation flash */
.copy-confirm {
  font-size:      12px;
  color:          var(--green);
  font-family:    var(--font-sans);
  font-weight:    400;
  letter-spacing: 0.03em;
  opacity:        0;
  transition:     opacity 0.2s;
  pointer-events: none;
}
.copy-confirm.visible { opacity: 1; }

.prayer-text {
  font-family: var(--font-sans);
  font-size:   15px;
  font-style:  normal;
  font-weight: 300;
  line-height: 1.9;
  color:       var(--charcoal);
  margin-bottom: 20px;
}

/* Prayer style variants */
.variants-label {
  font-size:      11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--muted);
  font-weight:    500;
  margin-bottom:  10px;
}

.variants-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.btn-variant {
  font-size:     12px;
  color:         var(--green);
  border:        0.5px solid var(--green-light);
  border-radius: 20px;
  padding:       5px 14px;
  cursor:        pointer;
  font-family:   var(--font-sans);
  font-weight:   400;
  background:    none;
  transition:    background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-variant:hover {
  background:    var(--green-tint);
  border-color:  var(--green);
}
.btn-variant.active {
  background:    var(--green);
  color:         #fff;
  border-color:  var(--green);
}

/* ── MOMENTS HUB PAGE ───────────────────────────────────────────── */
.hub-intro {
  padding:    40px 24px 0;
  max-width:  var(--content-max);
  margin:     0 auto;
}

.hub-eyebrow {
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      13px;
  color:          var(--green);
  letter-spacing: 0.05em;
  display:        block;
  margin-bottom:  10px;
}

.hub-title {
  font-family: var(--font-serif);
  font-size:   30px;
  font-weight: 400;
  color:       var(--charcoal);
  line-height: 1.25;
  margin-bottom: 10px;
}

.hub-subtitle {
  font-family:  var(--font-serif);
  font-style:   italic;
  font-size:    17px;
  color:        var(--muted);
  margin-bottom: 16px;
  line-height:  1.5;
}

.hub-body {
  font-size:   15px;
  font-weight: 300;
  color:       var(--charcoal);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width:   520px;
}

/* Pillar grid */
.pillars-grid {
  padding:   0 24px 48px;
  max-width: var(--content-max);
  margin:    0 auto;
}

.pillars-grid-inner {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
}

.pillar-card {
  display:         block;
  background:      var(--white);
  border:          0.5px solid var(--divider);
  border-radius:   var(--radius-lg);
  padding:         18px 20px;
  text-decoration: none;
  color:           inherit;
  transition:      border-color 0.2s, background 0.2s, transform 0.15s;
}
.pillar-card:hover {
  border-color:    var(--green-light);
  background:      var(--green-tint);
  transform:       translateY(-1px);
  text-decoration: none;
  color:           inherit;
}
.pillar-card:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

.pillar-num {
  font-size:      11px;
  color:          var(--green);
  font-weight:    500;
  letter-spacing: 0.1em;
  margin-bottom:  5px;
}
.pillar-title {
  font-family:   var(--font-serif);
  font-size:     16px;
  font-weight:   400;
  color:         var(--charcoal);
  margin-bottom: 5px;
  line-height:   1.3;
}
.pillar-desc {
  font-size:   13px;
  color:       var(--muted);
  font-weight: 300;
  line-height: 1.55;
}

/* Pray now CTA on hub page */
.hub-cta {
  text-align:    center;
  padding:       8px 24px 48px;
  border-top:    0.5px solid var(--divider);
  margin:        0 24px;
  max-width:     var(--content-max);
  margin-left:   auto;
  margin-right:  auto;
}
.hub-cta p {
  font-family:   var(--font-serif);
  font-style:    italic;
  font-size:     15px;
  color:         var(--charcoal);
  margin-bottom: 16px;
  padding-top:   24px;
}
.btn-cta {
  display:        inline-block;
  background:     var(--gold);
  color:          var(--gold-deep);
  border:         none;
  border-radius:  var(--radius-md);
  padding:        12px 32px;
  font-family:    var(--font-sans);
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor:         pointer;
  transition:     background 0.2s;
}
.btn-cta:hover { background: var(--gold-dark); color: var(--gold-deep); text-decoration: none; }

/* ── INTERIOR PAGES ─────────────────────────────────────────────── */
.interior-wrap {
  padding:   48px 24px 80px;
  max-width: var(--content-max);
  margin:    0 auto;
}

.interior-wrap h1 {
  font-family:   var(--font-serif);
  font-size:     28px;
  font-weight:   400;
  color:         var(--charcoal);
  margin-bottom: 12px;
  line-height:   1.25;
}
.interior-wrap h2 {
  font-family:   var(--font-serif);
  font-size:     20px;
  font-weight:   400;
  color:         var(--charcoal);
  margin:        32px 0 12px;
}
.interior-wrap p {
  font-size:     15px;
  font-weight:   300;
  color:         var(--charcoal);
  line-height:   1.8;
  margin-bottom: 18px;
}
.interior-wrap hr {
  border: none;
  border-top:  0.5px solid var(--divider);
  margin: 32px 0;
}
.interior-wrap a { color: var(--green); }
.interior-wrap a:hover { color: var(--green-dark); }

.eyebrow-tag {
  font-family:    var(--font-serif);
  font-style:     italic;
  font-size:      13px;
  color:          var(--green);
  letter-spacing: 0.05em;
  display:        block;
  margin-bottom:  10px;
}

.back-link {
  font-family: var(--font-serif);
  font-style:  italic;
  font-size:   14px;
  color:       var(--green);
  display:     inline-block;
  margin-top:  32px;
}

/* Breadcrumb */
.breadcrumb {
  list-style:    none;
  display:       flex;
  gap:           8px;
  font-size:     12px;
  color:         var(--muted);
  margin-bottom: 28px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--divider); }

/* ── SITE FOOTER ────────────────────────────────────────────────── */
.site-footer {
  border-top: 0.5px solid var(--divider);
  padding:    20px 24px;
  text-align: center;
  margin-top: 16px;
}

.footer-nav {
  display:         flex;
  justify-content: center;
  gap:             24px;
  margin-bottom:   8px;
  flex-wrap:       wrap;
}
.footer-nav a {
  font-size:       13px;
  color:           var(--muted);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--green); }

.footer-copy {
  font-size:      12px;
  color:          var(--muted);
  letter-spacing: 0.03em;
}

/* ── 404 ────────────────────────────────────────────────────────── */
.not-found {
  text-align: center;
  padding:    80px 24px 100px;
  max-width:  440px;
  margin:     0 auto;
}
.not-found h1 {
  font-family:   var(--font-serif);
  font-size:     24px;
  font-weight:   400;
  color:         var(--charcoal);
  margin-bottom: 14px;
  line-height:   1.35;
}
.not-found p {
  font-size:     14px;
  color:         var(--muted);
  font-weight:   300;
  margin-bottom: 32px;
  line-height:   1.75;
}

/* ── SVG LOGO ───────────────────────────────────────────────────── */
.logo-link        { display: inline-block; line-height: 1; text-decoration: none; }
.logo-link:hover  { opacity: 0.88; text-decoration: none; }

/* ── PRINT — removed in favour of Copy button ───────────────────── */

/* ── DARK MODE ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --parchment:     #1C2420;
    --parchment-mid: #222E22;
    --white:         #263026;
    --charcoal:      #EAE6DE;
    --muted:         #8AAA88;
    --divider:       #384838;
    --green-tint:    #1E2E1E;
  }
  body { background: #141A14; }
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .body-layout,
  .body-layout.ads-active {
    grid-template-columns: 1fr;
  }
  .sidebar-col,
  .ads-active .sidebar-col { display: none; }
  .pillars-grid-inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .tagline-link  { font-size: 19px; }
  .tagline-sub   { font-size: 14px; }
  .textarea-footer { flex-direction: column; align-items: flex-end; gap: 10px; }
}