/* ============================================================
   BASE.CSS — shared across every page of the Youth Without Walls site.
   Page-specific styles (hero, forms, cards, etc.) live in their own
   file, e.g. assets/css/index.css, and are loaded AFTER this file.
   ============================================================ */

:root{
  --charcoal:#12211A;
  --charcoal2:#1A3226;
  --forest:#12211A;
  --cream:#FBF3E1;
  --amber:#F2B84B;
  --amber-dark:#C98A24;
  --rust:#D9481F;
  --bark:#3A2C20;
  --paper:#FFFDF8;
  --line:#D8C9A3;
}

*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Work Sans',sans-serif; background:var(--cream); color:var(--bark); line-height:1.6;}
.display{font-family:'Bebas Neue',sans-serif; letter-spacing:0.03em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto;}

.eyebrow{font-size:13px; text-transform:uppercase; letter-spacing:0.22em; color:var(--rust); font-weight:700; margin-bottom:12px;}
.eyebrow.on-dark{color:var(--amber);}
.eyebrow-line{display:flex; align-items:center; gap:10px; justify-content:center;}
.eyebrow-line::before, .eyebrow-line::after{content:""; height:1px; width:36px; background:var(--rust);}
.eyebrow-line.on-dark::before, .eyebrow-line.on-dark::after{background:var(--amber);}

/* ---------- NAV (same on every page) ---------- */
nav{position:sticky; top:0; z-index:50; background:var(--charcoal); color:var(--cream); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:18px 28px; border-bottom:1px solid rgba(242,184,75,0.2);}
nav .logo{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:0.08em; color:var(--amber); justify-self:start;}
nav ul{list-style:none; display:flex; gap:26px; font-size:14px; font-weight:600; justify-self:center;}
nav ul a{position:relative; color:var(--cream);}
nav ul a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--amber); transition:width 0.25s ease;}
nav ul a:hover{color:var(--amber);}
nav ul a:hover::after{width:100%;}
nav .cta{background:var(--rust); padding:9px 18px; border-radius:3px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#fff; transition:transform 0.2s ease;}
nav .cta:hover{transform:translateY(-2px);}
nav .nav-actions{display:flex; align-items:center; gap:10px; justify-self:end;}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:22px; cursor:pointer;}

@media (max-width:800px){
  nav ul{position:fixed; top:58px; left:0; right:0; background:var(--charcoal); flex-direction:column; padding:18px 24px; display:none; gap:14px; z-index:49;}
  nav ul.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ---------- SHOPPING CART (site-wide, cookie-based) ---------- */
.basket-btn{
  position:relative; background:rgba(242,184,75,0.12); border:1px solid rgba(242,184,75,0.4);
  color:var(--amber); border-radius:50%; width:38px; height:38px; font-size:17px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.basket-btn.visible{visibility:visible; opacity:1; pointer-events:auto;}
.basket-btn:hover{background:rgba(242,184,75,0.22); transform:translateY(-2px);}
.basket-btn[aria-expanded="true"]{background:var(--amber); color:var(--charcoal);}
.basket-badge{
  position:absolute; top:-4px; right:-4px; background:var(--rust); color:#fff;
  font-size:10px; font-weight:700; border-radius:50%; width:16px; height:16px;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--charcoal);
}

.cart-panel{
  display:none; position:fixed; top:64px; right:20px; z-index:60;
  width:280px; background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 16px 32px rgba(18,33,26,0.25); padding:16px 18px; text-align:left;
  color:var(--bark); font-family:'Work Sans',sans-serif;
}
.cart-panel.open{display:block; animation:cartIn 0.18s ease;}
@keyframes cartIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.cart-status{font-weight:700; font-size:13px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.cart-status.pending{color:var(--amber-dark);}
.cart-status.paid{color:#1F3D2B;}
.cart-line{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--bark);}
.cart-note{font-size:12px; color:#8A7B65; margin-top:8px;}
.cart-cta{
  display:block; text-align:center; margin-top:12px; padding:11px; background:var(--rust); color:#fff;
  border-radius:4px; font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:0.05em;
  transition:background 0.2s ease;
}
.cart-cta:hover{background:#b83a17;}

@media (max-width:800px){
  .cart-panel{right:12px; left:12px; width:auto; top:60px;}
}

.resume-bar{display:none; align-items:center; justify-content:center; gap:14px; font-size:14px; font-weight:600; padding:12px 20px; text-align:center; flex-wrap:wrap;}
.resume-bar.show{display:flex;}
.resume-bar.status-pending{background:var(--amber); color:var(--charcoal);}
.resume-bar.status-paid{background:#1F3D2B; color:var(--cream);}
.resume-bar a, .resume-bar button{text-decoration:underline; font-weight:700; background:none; border:none; cursor:pointer; font-size:14px; color:inherit; font-family:inherit;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block; padding:16px 34px; border-radius:3px; font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:0.06em; transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(217,72,31,0.25);}
.btn-primary{background:var(--rust); color:#fff;}
.btn-primary:hover{background:#b83a17;}
.btn-outline{border:1.5px solid var(--amber); color:var(--amber);}

/* ---------- FOOTER (same on every page) ---------- */
footer{background:#0D1811; color:#8A9A8C; padding:56px 24px 30px; text-align:center;}
footer .logo{font-family:'Bebas Neue',sans-serif; font-size:22px; color:var(--amber); margin-bottom:12px;}
.footer-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left;}
.footer-grid p{font-size:13px; line-height:1.7;}
.footer-grid h5{color:var(--cream); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px;}
.footer-grid ul{list-style:none; font-size:13px; display:flex; flex-direction:column; gap:8px;}
.footer-grid ul a:hover{color:var(--amber);}
.footer-bottom{max-width:1100px; margin:24px auto 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px;}
.social-row{display:flex; gap:16px; justify-content:center;}
footer small{font-size:12px; color:#5F6F62;}

@media (max-width:800px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- SCROLL-REVEAL ANIMATIONS (shared) ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-d1{transition-delay:0.1s;}
.reveal-d2{transition-delay:0.2s;}
.reveal-d3{transition-delay:0.3s;}
.reveal-d4{transition-delay:0.4s;}

/* ---------- PAGE HERO BAND (used by sub-pages: register, team, contact, donation, gallery) ---------- */
.page-hero{background:var(--forest); color:#fff; text-align:center; padding:60px 24px 50px;}
.page-hero .eyebrow{color:var(--amber);}
.page-hero h1{font-size:clamp(38px,6vw,60px);}
.page-hero p{color:#D9E4DA; max-width:520px; margin:14px auto 0; font-size:15px;}

/* ---------- GENERIC CARD (used across admin-style content blocks) ---------- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:8px;}