/* this is ONLY for the home page, all other pages have their own minimal CSS and use universal styles css */

/* ====== HAMBURGER and PRIMARY MENU COLOURS (matches site palette) ====== */
:root{
  /* fallbacks if your theme vars aren't loaded on a page */
  --brand: #0b3b79;
  --brand-2: #0ea5e9;
  --ink: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --ring: #e5e7eb;
}


/* HERO, unique for home page vs. other pages */
    header.hero{
      min-height:70svh; display:grid; place-items:center; text-align:center; color:#fff;
      background:
      linear-gradient(180deg, rgba(13,27,42,.65), rgba(13,27,42,.65)), /* void this out to remove gray over hero image */
        url('/images/downtown-victoria-bc.jpg') center/cover no-repeat;
      position:relative; overflow:hidden;
    }
    
    /* For text below the hero image */
    .wrap{max-width:1100px;margin:0 auto;padding:0 18px}
    .hero h1{font-size:clamp(32px,4.6vw,64px); margin:0 0 10px; letter-spacing:.2px; opacity:0; transform:translateY(8px); animation:fadeUp .7s .05s both}
    .hero p{font-size:clamp(20px,2.3vw,24px); margin:0 auto 24px; max-width:860px; opacity:0; transform:translateY(8px); animation:fadeUp .7s .15s both}
    .cta{display:inline-block; background:var(--brand); color:#fff; padding:14px 22px; border-radius:999px; font-weight:800; text-decoration:none; box-shadow:var(--shadow); transform:translateZ(0)}
    .cta:hover{transform:translateY(-2px)}
    @keyframes fadeUp{to{opacity:1; transform:none}}

    /* Sections & cards */
    section{padding:54px 0}
    .section-title{font-size:clamp(22px,3.4vw,32px); margin:0 0 10px}
    .section-sub{color:var(--soft); margin:0 0 20px}
    .grid{display:grid; gap:18px}
    .cols-2{grid-template-columns:repeat(2,1fr)}
    .cols-3{grid-template-columns:repeat(3,1fr)}
    @media (max-width:900px){.cols-2,.cols-3{grid-template-columns:1fr}}
    .card{background:var(--card); border:1px solid #e7edf5; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
    .muted{color:var(--soft)}
    .badge{display:inline-block; padding:4px 10px; border-radius:999px; background:#eef6ff; color:#0b3c77; font-weight:700; font-size:12px}

    /* Calculator */
    .calc{display:grid; gap:14px}
    .field{display:grid; gap:6px}
    .field label{font-weight:800}
    .field input,.field select{border:1px solid #dfe7ef; border-radius:12px; padding:12px; font-size:16px; background:#fff; width:100%}
    .pill{display:flex; gap:8px; background:#eef2f6; padding:6px; border-radius:999px; width:max-content}
    .pill button{appearance:none; border:0; background:transparent; padding:8px 14px; border-radius:999px; font-weight:800; color:#244259; cursor:pointer}
    .pill button[aria-pressed="true"]{background:#fff; box-shadow:var(--shadow)}
    .result{
      display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border-radius:14px;
      background:linear-gradient(90deg, #fff6e5, #fff); border:1px solid #ffe2ad
    }
    .result .big{font-size:clamp(26px,4vw,38px); font-weight:900; position:relative; line-height:1.2;}
    .big::after{
      content:""; position:absolute; inset:-8px -18px; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.7) 40%, transparent 60%);
      transform:skewX(-20deg) translateX(-120%); animation:shine 3s ease-in-out infinite; border-radius:12px; pointer-events:none;
    }
    @keyframes shine{50%{transform:skewX(-20deg) translateX(140%)} 100%{transform:skewX(-20deg) translateX(140%)}}


    /* Reveal on scroll */
    .reveal{opacity:0; transform:translateY(8px); transition:all .5s ease}
    .reveal.in{opacity:1; transform:none}

    /* Mission */
    #mission .card { background:#ffffff; }
    #mission strong { color:#0d1b2a; }

    /* Impact tracker */
    #impact .stats { display:grid; gap:18px; grid-template-columns:repeat(4,1fr); }
    @media (max-width:900px){ #impact .stats{ grid-template-columns:1fr 1fr } }
    @media (max-width:560px){ #impact .stats{ grid-template-columns:1fr } }
    .stat { background:#fff; border:1px solid #e7edf5; border-radius:18px; box-shadow:var(--shadow); padding:20px }
    .stat .label{ color:var(--soft); font-weight:700; margin-bottom:6px }
    .stat .value{ font-size:clamp(26px,4vw,38px); font-weight:900; line-height:1.1 }

    /* Partners */
    #partners .logo-row{ display:grid; gap:16px; grid-template-columns:repeat(6,1fr); }
    @media (max-width:1100px){ #partners .logo-row{ grid-template-columns:repeat(5,1fr) } }
    @media (max-width:900px){ #partners .logo-row{ grid-template-columns:repeat(3,1fr) } }
    @media (max-width:560px){ #partners .logo-row{ grid-template-columns:repeat(2,1fr) } }
    .partner{
      background:#fff; border:1px solid #e7edf5; border-radius:14px; box-shadow:var(--shadow);
      display:flex; align-items:center; justify-content:center; height:84px; padding:10px;
      filter:grayscale(1) contrast(1.05); opacity:.9; transition:filter .2s ease, opacity .2s ease, transform .2s ease;
    }
    .partner:hover{ filter:none; opacity:1; transform:translateY(-2px) }
    .partner img{ max-height:60px; max-width:100%; object-fit:contain }

    /* Confetti sparkle */
    .confetti {
      position: fixed;
      width: 6px; height: 6px;
      background: currentColor;
      border-radius: 2px;
      pointer-events: none;
      opacity: 0;
      animation: confetti-fall 900ms ease-out forwards;
    }
    @keyframes confetti-fall {
      0%   { transform: translate(var(--x, 0), var(--y, 0)) rotate(0deg);   opacity: 1; }
      100% { transform: translate(calc(var(--x)*1.8), calc(var(--y)*2.2)) rotate(360deg); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .confetti { animation: none; opacity: 0; }
      .big::after { animation: none; }
    }

    footer{background:var(--bg); color:#e3e9f2; padding:40px 0}
    footer a{color:#e3e9f2; text-decoration:none}
    small.disclaimer{display:block; color:#b9c6d4; margin-top:10px}
    
    /* Toast popup */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#0d1b2a; color:#fff; padding:12px 16px; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.2); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:9999; max-width:90%;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}
input.error{border-color:#d93025; outline-color:#d93025}

.hero-title{
  color:#fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* 4-way outline */
}

/* the one below puts a gray pill box behind the text */
/* .hero-title{
  color:#fff;
  background: rgba(0,0,0,.45);
  padding:.15em .5em;
  border-radius:.35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
} */


/* Myths teaser */
#myths-teaser{ padding:48px 18px;}
.myths-cta{
  position:relative; display:grid; gap:18px; align-items:center;
  grid-template-columns: 1.2fr 1fr;
  background: linear-gradient(135deg, #eef7fb 0%, #ffffff 100%);
  border:1px solid #e1eef6; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow:hidden; padding:26px;
}
@media (max-width:900px){ .myths-cta{ grid-template-columns:1fr } }

.myths-copy h2{ margin:6px 0 8px; font-size:clamp(24px,3.8vw,34px); color:#0d1b2a }
.myths-copy h2 span{
  background:linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em;
  padding:4px 8px; border-radius:999px; background:#14324a; color:#fff; margin:0 0 6px;
}
.myths-art{ width:100%; max-width:460px; margin:0 0 0 auto; opacity:.98 }
@media (max-width:900px){ .myths-art{ max-width:340px; margin:10px auto 0 } }

/* Gentle float animation (auto-disabled for users who prefer reduced motion) */
@media (prefers-reduced-motion: no-preference){
  #myths-teaser svg #house{ animation: bob 6s ease-in-out infinite }
  @keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }
}


.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--card);
  border-bottom: 1px solid var(--ring);
}

/* used to be grid-template-columns: 1fr auto 1fr but took out last 1fr so hamburger menu is right justified */
.header-inner{
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .75rem; max-width: 1100px; margin: 0 auto; padding: .75rem 1rem;
}

.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight: 800; color: var(--brand);
  text-decoration: none; font-size: 1.1rem;
}
.brand-logo{
  width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; color:#fff; font-size: .95rem; font-weight:900;
}

.primary-nav{ display:none; }
.primary-nav a{
  color: var(--ink); text-decoration: none; font-weight: 900;
  padding: .4rem .6rem; border-radius: 10px;
}
.primary-nav a:hover{ background: #f1f5f9; }
.primary-nav a.active{ color: var(--brand-2); background: #f0f9ff; }

.hamburger{
  justify-self: end;
  display:inline-grid; place-items:center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border: 1px solid rgba(0,0,0,.08); color:#fff;
  cursor:pointer;
}
.hamburger svg{ width: 24px; height: 24px; }
.hamburger[aria-expanded="true"] .icon-menu{ display:none; }
.hamburger[aria-expanded="true"] .icon-close{ display:block; }
.icon-close{ display:none; }

/* Overlay + Drawer */
.nav-overlay{
  position: fixed; inset: 0; background: rgba(2,6,23,.45);
  opacity:0; pointer-events:none; transition: opacity .25s ease;
}

.mobile-drawer{
  position: fixed; inset: 0 0 0 auto; width: 86%;
  max-width: 380px; background: var(--card); box-shadow: -10px 0 30px rgba(2,6,23,.2);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; padding: 1rem .9rem;
  border-left: 1px solid var(--ring);
}
.mobile-drawer header{ display:flex; align-items:center; justify-content:space-between; }
.mobile-drawer .title{ font-weight: 800; color: var(--brand); }
.mobile-drawer nav a{
  display:block; padding: .9rem .6rem; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.mobile-drawer nav a + a{ margin-top:.1rem; }
.mobile-drawer nav a:hover{ background: #f1f5f9; }
.mobile-drawer nav a.active{ color: var(--brand-2); background: #f0f9ff; }

.mobile-drawer .cta{
  margin-top: auto; display:grid; gap:.6rem; padding-top: .8rem;
  border-top: 1px dashed var(--ring);
}
.mobile-drawer .btn{
  display:inline-block; text-align:center; padding:.9rem 1rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-weight:800; text-decoration:none;
}

/* Open state */
.menu-open .nav-overlay{ opacity:1; pointer-events:auto; }
.menu-open .mobile-drawer{ transform: translateX(0); }

/* Desktop layout */
@media (min-width: 960px){
  .hamburger{ display:none; }
  .primary-nav{ display:flex; gap:.35rem; justify-self: end; }
  .nav-overlay, .mobile-drawer{ display:none; }
  .header-inner{ grid-template-columns: auto 1fr auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .nav-overlay, .mobile-drawer{ transition: none; }
}

/* Optional: lock body scroll when menu open */
.menu-open{ overflow:hidden; }

/* Small utility */
.hide-visually{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* === Shared FOOTER (match homepage) === */
footer{
  background: var(--bg);
  color: #e3e9f2;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
footer a{ color:#e3e9f2; text-decoration:none }
footer a:hover{ text-decoration:underline }
.footer-wrap{ max-width:1100px; margin:0 auto; padding:0 18px }
.footer-grid{
  display:grid; gap:18px; grid-template-columns: 2fr 1fr 1fr;
}

  /* Footer badge - added for pill shape around donation amount */
    .footer-badge{
      display:inline-flex; align-items:center; gap:8px;
      background:#14324a; color:#fff; padding:6px 10px; border-radius:999px;
      font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,.18); font-size:14px;
    }
    .footer-badge .emoji{ filter:saturate(1.1); }

@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand{ font-weight:900; display:flex; align-items:center; gap:10px }
.footer-brand .dot{ width:12px; height:12px; border-radius:999px; background:var(--brand) }
.footer-small{ color:#b9c6d4; font-size:14px; margin-top:10px }
.footer-col h4{ margin:0 0 8px; font-size:16px; color:#ffffff; }
.footer-col ul{ list-style:none; padding:0; margin:0 }
.footer-col li{ margin:6px 0 }
.footer-bottom{ display:flex; justify-content:space-between; gap:12px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); font-size:14px; color:#cfd8e3 }
@media (max-width:700px){ .footer-bottom{ flex-direction:column; align-items:flex-start } }