/* =========================================
   Defend Dad — Global Styles (Brand v2 Light)
   Path: /assets/tools/global.css
   ========================================= */

/* ---------- Theme Tokens ---------- */
:root{
  /* Light scheme with royal purple accent */
  --bg:#f6f7fb;           /* page background */
  --panel:#ffffff;        /* cards/panels */
  --line:#e6e8ef;         /* borders/dividers */
  --ink:#1f2430;          /* primary text (dark ink) */
  --muted:#6b7380;        /* secondary text */
  --gold:#d4af37;         /* brand gold */
  --purple:#5b3df5;       /* royal purple */
  --purple-ink:#3b2bd4;   /* deeper purple for text/accents */

  /* Tracker sizing */
  --bar-h:22px;
}

/* Page base helpers (optional, safe to reuse) */
.dd-wrap { max-width:980px; margin:0 auto; padding:28px 18px; }
.dd-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:20px; margin:18px 0; box-shadow:0 2px 10px rgba(27,30,45,.04);
}
.dd-hr{ height:1px; background:var(--line); border:0; margin:18px 0; }

/* ---------- Global Navigation (Brand v2) ---------- */
.dd-nav { position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line) }

.dd-nav__row{
  max-width:1160px; margin:0 auto; padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.dd-brand{ display:flex; align-items:center; gap:10px; color:var(--purple-ink); font-weight:800; text-decoration:none }
.dd-brand img{ width:28px; height:28px }

.dd-hamburger{ display:none; background:transparent; border:1px solid var(--line); color:var(--ink); padding:8px 10px; border-radius:10px }

.dd-nav__hero{ position:relative; max-width:1160px; margin:0 auto; padding:0 16px }
.dd-nav__imgwrap{
  position:relative; height:92px; overflow:hidden; border-bottom:1px solid var(--line); border-top:1px solid var(--line)
}
/* Use your text-less banner asset (case sensitive PNG) */
.dd-nav__imgwrap::before{
  content:""; position:absolute; inset:0;
  background:url("/assets/Image/nav-banner-blank.PNG") center/cover no-repeat;
  background-color:#f3f4fa; filter:saturate(1.05) brightness(1.02);
}
.dd-nav__imgmask{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,.35) 22%, rgba(255,255,255,.35) 78%, rgba(255,255,255,.75));
  pointer-events:none;
}

/* Real, accessible links over the banner */
.dd-nav__links{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:18px; padding:0 12px;
}
.dd-nav__links a{
  color:var(--purple-ink); text-decoration:none; font-weight:760; letter-spacing:.2px;
  font-size:1.02rem; padding:10px 12px; border-radius:10px; white-space:nowrap;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.dd-nav__links a:hover{ background:var(--purple); color:#fff }
.dd-nav__links a:focus-visible{ outline:2px solid var(--purple); outline-offset:2px }

/* Mobile drawer */
@media (max-width:760px){
  .dd-hamburger{ display:block }
  .dd-nav__imgwrap{ height:84px }
  .dd-nav__links{ display:none }
}
.dd-drawer{ display:none; border-top:1px solid var(--line); background:#fff }
.dd-drawer a{
  display:block; padding:12px 16px; border-top:1px solid var(--line);
  color:var(--purple-ink); text-decoration:none; font-weight:700;
}
.dd-drawer a:hover{ background:#efeefe; color:#2016a8 }

/* ---------- Donation Tracker Embed Wrapper ---------- */
.embed{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
}
.embed iframe{ width:100%; height:920px; border:0; display:block }
@media (max-width:720px){
  .embed iframe{ height:1050px }
}

/* ---------- Buttons (shared) ---------- */
.dd-btn{
  display:inline-block; padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none;
  border:1px solid var(--purple); color:#fff; background:var(--purple);
  box-shadow:0 6px 14px rgba(91,61,245,.18); transition:filter .15s ease;
}
.dd-btn:hover{ filter:brightness(1.06) }
.dd-btn.secondary{ background:transparent; color:var(--purple-ink); border-color:var(--purple) }

/* ---------- State Grid (from your snippet) ---------- */
.state-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); 
  gap:10px; 
  margin:20px 0;
}
.state{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:#131820; color:#e6edf3; text-decoration:none;
  transition:all .2s ease;
}
.state:hover{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; transform:translateY(-2px) }
.state img{ width:36px; height:36px; object-fit:contain; image-rendering:auto }
.state span{ font-weight:700 }
/* ––––– Donation Tracker Slim Bar Overrides ––––– /
:root {
–bar-h: 12px;   / slim progress bar height */
}

/* Slim progress bar */
.bar {
height: var(–bar-h);
border: 1px solid var(–line);
background: #0b0e13;
border-radius: 14px;
overflow: hidden;
position: relative;
}
.fill {
position: absolute;
inset: 0;
width: 0%;
background: linear-gradient(90deg, var(–gold), #f6d773);
transition: width 0.8s ease;
}

/* Mascots stay big & fun /
.push-dad {
position: absolute;
left: -4px;
bottom: calc(var(–bar-h) * -0.8);
height: 60px; / fixed mascot size */
pointer-events: none;
user-select: none;
}
.kids {
position: absolute;
right: -4px;
bottom: calc(var(–bar-h) * -0.6);
height: 55px;
pointer-events: none;
user-select: none;
}
.coin-dad-link {
position: absolute;
left: 46%;
top: 6px;
transform: translate(-50%, -50%);
display: block;
}
.coin-dad {
height: 55px;
display: block;
filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
transition: transform 0.2s ease;
}
.coin-dad-link:hover .coin-dad {
transform: translateY(-2px);
}
.goal-dad {
position: absolute;
bottom: calc(var(–bar-h) * 2.5);
height: 52px;
transform: translateX(-50%);
left: 0%;
transition: left 0.8s cubic-bezier(.22,.8,.26,1);
pointer-events: none;
}