/* ht_history.css — extracted from ht-history.html head styles */

/* Make only the 'Give Today' button gold */
.actions .btn.primary[href="#plan"]{
  background: var(--gold);
}

:root{
  --brand:#0b2a5b;   /* navy */
  --brand-2:#11336e; /* deeper navy */
  --white:#ffffff;
  --gold:#d4af37;
}

*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background:#000}

/* === FULL PAGE BANNER === */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:start center;
  color:#fff;
  overflow:hidden;
}

.hero > img.hero-bg,
.hero > video.hero-bg{
  position: fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0;
  margin-top: 75px;
}

/* MUCH DARKER gradient overlay for maximum readability */
.hero::after{ content:"";
  position:absolute; inset:0; 
  background:linear-gradient(
    to top,
    rgba(10,10,62, 1) 0%,
    rgba(10,10,62,.90) 30%,
    rgba(10,10,62,.60) 65%,
    rgba(10,10,62,.0) 100%
  ); z-index:1; }

/* Content */
.hero-content{ text-align:center;
  padding:clamp(16px,4vw,28px);
  max-width:min(92vw, 900px);
  margin-top:clamp(180px, 32vh, 520px); z-index:2; position:relative; }
.hero .kicker{
  margin:0 0 .35rem;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:.8rem; color:#fff;
}
.hero h1{
  margin:.25rem 0 .35rem;
  font-size:clamp(2rem,6vw,3rem);
  line-height:1.06; letter-spacing:-.01em;
}

/* Gold divider */
.headline-divider{
  width:90px; height:2px; background:var(--gold);
  margin:clamp(14px,2.4vw,18px) auto clamp(18px,3vw,22px);
  border-radius:2px;
}

.hero p:not(.kicker){
  margin:0 auto 1rem; 
  max-width:70ch; 
  font-size:clamp(1rem,2.4vw,1.15rem);
  color:#f3f4f6;
}

/* Buttons */
.actions{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:.25rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:800; text-decoration:none;
  border:2px solid transparent; transition:filter .15s ease;
  will-change:transform;
}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:var(--white)}
.btn.outline{background:transparent; color:#fff; border-color:#fff}

/* Hover “hop” animation */
@keyframes hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.btn:hover{ animation: hop .22s ease-out; filter:brightness(1.04) }
.icon:hover{ animation: hop .22s ease-out }

/* Icon row */
.icon-row{
  margin-top:clamp(16px,6vw,44px);
  display:flex; gap: clamp(16px, 3.5vw, 36px); justify-content:center; align-items:center;
  margin-bottom: clamp(32px, 7vw, 50px);
}
.icon{ width:28px; height:28px; border-radius:50%;
  position:relative;  flex:0 0 28px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
  will-change:transform; overflow:visible; }
.icon > img{ position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top; border-radius:50%; }

@media (prefers-reduced-motion: reduce){
  .btn, .icon{ transition:none; animation:none !important; }
}

@media (max-width: 640px){
  .hero h1{  font-size: 65px;
    line-height: 70px;}
  .actions{ flex-direction:column; }
  .actions .btn{ width:100%; }
  .hero-content{ margin-top:clamp(140px, 28vh, 360px); }
}

/* New module under hero (non-destructive) */
.after-hero { background:#ffffff;
  color:#111827;
  padding: clamp(28px, 5vw, 80px) 20px; position:relative; z-index:3; }
.after-hero .wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.after-hero h2 {
  margin: 0 0 10px 0;
  font-size: clamp(22px, 5.5vw, 34px);
  font-weight: 800;
}
.after-hero p {
  margin: 0;
  color: #6b7280;
  font-size: clamp(16px, 3.5vw, 18px);
  line-height: 1.8;
}

/* Hover labels under icons (keeps original hover animation intact) */
.icon{ position: relative; } /* positioning context only */
.icon::after{
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;           /* small text */
  line-height: 1;
  color: #ffffff;            /* white text */
  opacity: 0;
  pointer-events: none;      /* don't interfere with hover */
  transition: opacity .12s ease, transform .12s ease;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  z-index: 3;                /* ensure it's above */
}
.icon:hover::after{
  opacity: 1;
  transform: translateX(-50%) translateY(-1px);
}

.hero > img.hero-bg, .hero > video.hero-bg{ position: fixed; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none }

/* --- Icon hover behavior override: stay up while hovered --- */
.icon { transition: transform .16s ease; }
.icon:hover { animation: none !important; transform: translateY(-8px); }

/* Ensure hover labels appear for all four icons */
.icon{ position: relative; overflow: visible; }
.icon > img{ border-radius: 50%; }
.icon::after{
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  z-index: 3;
}
.icon:hover::after{ opacity: 1; transform: translateX(-50%) translateY(-1px); }

.hero > img.hero-bg, .hero > video.hero-bg{ z-index:0; pointer-events:none; }
.hero::after{ z-index:1; }
.hero-content{ position:relative; z-index:2; }
.after-hero{ position:relative; z-index:3; }

/* Scoped hero title so other H1s are unaffected (visuals unchanged) */
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
@media (max-width: 640px){
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3rem); }
}

/* Simple pixel-based sizing for the hero header (easy to tweak) */
.hero h1{
  font-size: 45px;
  line-height: 50px;
}

/* Desktop-only hero heading size */
@media (min-width: 1024px){
  .hero h1{ font-size: 60px; line-height: 65px; }
}