/* =========================================================
   ButGod Blog — Custom styles (Bootstrap 5 base)
   Palette sampled directly from the logo: navy #002044 / gold #efa623
   ========================================================= */

:root {
  --navy: #002044;
  --navy-deep: #00142e;
  --navy-text: #16233f;
  --cream: #fdf9f0;
  --cream-alt: #f5ecd7;
  --gold: #efa623;
  --gold-light: #f6c25e;
  --gold-deep: #c17a1e;
  --muted: #5c6274;
  --rust: #b8492a;
  --cream-on-navy: #f7efe0;
  --lightblue-on-navy: #aab6d6;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--navy-text);
  font-family: 'Karla', sans-serif;
  padding-top: 80px; /* clears the fixed navbar */
}

.font-display { font-family: 'Fraunces', serif; }

::selection { background: var(--gold); color: var(--navy-deep); }

/* ---------- Brand color utilities (Bootstrap doesn't know these) ---------- */
.bg-navy       { background-color: var(--navy) !important; }
.bg-navy-deep  { background-color: var(--navy-deep) !important; }
.bg-cream      { background-color: var(--cream) !important; }
.bg-cream-alt  { background-color: var(--cream-alt) !important; }
.text-navy     { color: var(--navy-text) !important; }
.text-gold     { color: var(--gold) !important; }
.text-muted-warm   { color: var(--muted) !important; }
.text-cream-light  { color: var(--cream-on-navy) !important; }
.text-light-blue   { color: var(--lightblue-on-navy) !important; }
.border-gold       { border-color: var(--gold) !important; }
.border-gold-soft  { border-color: rgba(239,166,35,0.25) !important; }
.border-rust       { border-color: var(--rust) !important; }
.text-rust         { color: var(--rust) !important; }
.cs-logo-img { height: 38px; width: 38px; object-fit: contain; border-radius: 8px; background: white; padding: 3px; }

/* ---------- Navbar links ---------- */
.nav-link-brand {
  color: var(--lightblue-on-navy);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  position: relative;
  transition: color .25s ease;
}
.nav-link-brand:hover, .nav-link-brand:focus { color: var(--cream-on-navy); }
.nav-link-brand.active { color: var(--gold); font-weight: 600; }

.navbar-brand img { max-height: 48px; width: auto; }

/* ---------- Footer links ---------- */
.footer-link {
  color: var(--lightblue-on-navy);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-link:hover { color: var(--gold); }

/* ---------- Narrow content containers (article-width sections) ---------- */
.mw-672  { max-width: 672px;  margin-left: auto; margin-right: auto; }
.mw-720  { max-width: 720px;  margin-left: auto; margin-right: auto; }
.mw-896  { max-width: 896px;  margin-left: auto; margin-right: auto; }
.mw-1152 { max-width: 1152px; margin-left: auto; margin-right: auto; }

/* ---------- Hero section background ---------- */
.hero-wrap {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(239,166,35,0.16), transparent 60%),
    linear-gradient(180deg, #fdf9f0 0%, #f7efdb 55%, #f2e6c8 100%);
  padding-top: 6rem;
  padding-bottom: 4rem;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal-delay-3 { transition-delay: .34s; }
.reveal-delay-4 { transition-delay: .46s; }

/* ---------- Cards ---------- */
.story-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #fdfaf1 100%);
  border: 1px solid rgba(22,35,63,0.08);
  border-radius: 1.1rem;
  box-shadow: 0 10px 30px -18px rgba(22,35,63,0.25);
  transition: transform .4s cubic-bezier(.2,.8,.3,1), border-color .4s ease, box-shadow .4s ease;
  transform-style: preserve-3d;
  will-change: transform;
  text-decoration: none;
  color: inherit;
  display: block;
}
.story-card:hover {
  transform: translateY(-6px);
  border-color: rgba(239,166,35,0.45);
  box-shadow: 0 26px 50px -22px rgba(22,35,63,0.32), 0 0 0 1px rgba(239,166,35,0.12);
  color: inherit;
}
.story-card .glow {
  position: absolute;
  inset: -1px;
  border-radius: 1.1rem;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(239,166,35,0.16), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.story-card:hover .glow { opacity: 1; }

.quote-mark {
  font-family: 'Fraunces', serif;
  line-height: 0.6;
}

/* Testimony image — subtle Ken Burns zoom on hover */
.testimony-img-wrap {
  overflow: hidden;
  border-radius: 0.85rem;
}
.testimony-img-wrap img {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-card:hover .testimony-img-wrap img,
.testimony-img-wrap.always-zoom:hover img {
  transform: scale(1.06);
}

/* ---------- Buttons ---------- */
.btn-gold {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0b155, #c17a1e);
  border: none;
  color: var(--navy-deep);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-gold:hover, .btn-gold:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(239,166,35,0.55);
  filter: brightness(1.05);
  color: var(--navy-deep);
}
.btn-gold:active { transform: translateY(0) scale(0.98); }

.ripple {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255,255,255,0.55);
  transform: scale(0);
  animation: rippleAnim .6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(3); opacity: 0; } }

.btn-outline-brand {
  border: 1px solid rgba(22,35,63,0.2);
  color: var(--navy-text);
  background: transparent;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.btn-outline-brand:hover {
  border-color: var(--gold);
  background: rgba(239,166,35,0.10);
  transform: translateY(-2px);
  color: var(--navy-text);
}

.btn-navy-solid {
  background: var(--navy);
  color: #fff;
  border: none;
  transition: background .25s ease, color .25s ease;
}
.btn-navy-solid:hover { background: var(--gold); color: var(--navy-deep); }

/* ---------- Form elements ---------- */
.field-input {
  background: #ffffff;
  border: 1px solid rgba(22,35,63,0.14);
  color: var(--navy-text);
  border-radius: 0.75rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(239,166,35,0.18);
}
.field-input::placeholder { color: #9096a6; }

/* ---------- Verse / pull-quote divider ---------- */
.divider-verse { position: relative; text-align: center; }
.divider-verse::before, .divider-verse::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider-verse::before { left: -80px; }
.divider-verse::after  { right: -80px; transform: scaleX(-1); }

/* ---------- Misc animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeInUp .9s cubic-bezier(.2,.8,.3,1) both; }

@keyframes pulseSoft { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.pulse-soft { animation: pulseSoft 2.4s ease-in-out infinite; }

.clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream-alt); }
::-webkit-scrollbar-thumb { background: #d9c396; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

.toast-flash { transition: transform .4s cubic-bezier(.2,.8,.3,1), opacity .4s ease; }

/* ---------- Scroll progress bar ---------- */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  z-index: 1060;
  transition: width .1s linear;
}

/* ---------- Back to top button ---------- */
#backToTop {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: var(--navy-text);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 10px 24px -8px rgba(22,35,63,0.4);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
  z-index: 1040;
}
#backToTop.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#backToTop:hover { background: var(--gold); color: var(--navy-text); }

/* ---------- Founder/photo frame with gold ring ---------- */
.photo-frame {
  position: relative;
  border-radius: 9999px;
  padding: 5px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
}
.photo-frame img, .photo-frame .placeholder {
  border-radius: 9999px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Pagination pills (used on stories.php) ---------- */
.page-pill {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.page-pill.active { background: var(--gold); color: var(--navy-deep); }
.page-pill:not(.active) { color: var(--muted); border: 1px solid rgba(22,35,63,0.1); }
.page-pill:not(.active):hover { color: var(--gold); }

/* Mobile navbar collapse background */
@media (max-width: 767.98px) {
  .navbar-collapse { background: var(--navy); border-radius: 0.5rem; padding: 0.5rem 1rem 1rem; }
}

/* ==========================================================
   ARTICLE HEADER — WordPress-style full-bleed featured image
   ========================================================== */
.article-header {
  position: relative;
  height: 62vh;
  min-height: 26rem;
  max-height: 34rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.article-header-bg {
  position: absolute;
  inset: -8% -8% -8% -8%; /* oversized so parallax translate never reveals an edge */
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.article-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,20,46,0.15) 0%, rgba(0,20,46,0.35) 55%, rgba(0,20,46,0.88) 100%);
}
.article-header-content {
  position: relative;
  z-index: 2;
  padding-bottom: 3rem;
}
.article-header-scroll-cue {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  z-index: 2;
  animation: scrollCueBounce 2s ease-in-out infinite;
}
@keyframes scrollCueBounce {
  0%, 100% { transform: translate(-50%, 0); opacity: .6; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}
.text-white-75 { color: rgba(255,255,255,0.82); }
.badge-gold-outline {
  color: var(--gold-light);
  border: 1px solid rgba(246,194,94,0.6);
  border-radius: 9999px;
  padding: 0.3rem 0.9rem;
  font-size: .68rem;
  letter-spacing: .1em;
  background: rgba(0,0,0,0.15);
}

/* ---------- Article body typography (editorial feel) ---------- */
.article-body p {
  margin-bottom: 1.5rem;
  line-height: 1.9;
}
.article-dropcap::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 3.8rem;
  font-weight: 600;
  float: left;
  line-height: 0.85;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  color: var(--gold);
}

/* ---------- Share buttons ---------- */
.share-btn {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-alt);
  color: var(--navy-text);
  border: none;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.share-btn:hover {
  background: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-2px);
}
.share-btn.copied { background: var(--gold); color: var(--navy-deep); }

/* ---------- Card image badge overlays (WordPress category-badge style) ---------- */
.badge-overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--navy);
  color: var(--gold-light);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  z-index: 2;
}
.badge-overlay-static {
  background: var(--cream-alt);
  color: var(--gold-deep);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
}