/*
Theme Name: DIAA Official Theme
Theme URI: https://dorityalumni.org
Description: Custom theme for Dority International Alumni Association
Author: DIAA
Version: 1.0
*/

/* -------------------------
   PASTE ALL YOUR CSS HERE 
   (Copy everything between the <style> and </style> tags 
   from your source file, excluding the tags themselves)
   ------------------------- */

:root{
  --navy:#0B2A4A;
  --gold:#F5B700;
  --royal:#18238D;
  --charcoal:#111827;
  --ink:#0b0b12;
  --paper:#ffffff;
  --muted:#6b7280;
  --soft:#f7f7f7;
  --ring: 0 0 0 3px rgba(17,24,39,.15);
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
}

 /* -------------------------
       Design Tokens / Resets
       ------------------------- */
    :root{
      --navy:#0B2A4A;      /* primary */
      --gold:#F5B700;      /* accent */
      --royal:#18238D;     /* new primary button color */
      --charcoal:#111827;  /* body text on light */
      --ink:#0b0b12;       /* extra dark */
      --paper:#ffffff;     /* background */
      --muted:#6b7280;     /* secondary text */
      --soft:#f7f7f7;      /* section bg */
      --ring: 0 0 0 3px rgba(17,24,39,.15);
      --radius: 16px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
      --shadow-md: 0 8px 24px rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--charcoal); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%; display:block}
    a{color:inherit}
    .container{max-width:1200px; margin-inline:auto; padding-inline:1rem}
    .visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1rem; border-radius: 999px; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent}
    .btn-primary{background:var(--royal); color:#fff; box-shadow:var(--shadow-sm)}
    .btn-outline{background:transparent; color:#111; border-color:#e5e7eb}
    .btn-white{background:#fff; color:#111; border-color:#e5e7eb}
    .chip{display:inline-block; font-weight:800; font-size:.7rem; padding:.35rem .6rem; border-radius:999px}
    /* -------------------------
       Header / Navigation
       ------------------------- */
    header.sticky{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(6px); background:rgba(255,255,255,.8); border-bottom:1px solid rgba(0,0,0,.06)}
    .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{display:flex; align-items:center; gap:.75rem}
    .logo{display:grid; place-items:center; width:40px; height:40px; border-radius:999px;}
    .logo img{
  width:24px;
  height:24px;
  display:block;
  object-fit:contain;
}
    .nav-links{display:none; gap:1rem}
    .nav-links a{font-weight:600; font-size:.95rem; color:#374151; text-decoration:none}
    .nav-links a:focus-visible{outline:var(--ring)}
    .actions{display:none; gap:.5rem}
    /* Mobile menu (CSS-only checkbox hack) */
    #menu-toggle{display:none}
    .menu-btn{display:inline-flex; padding:.5rem .65rem; border:1px solid #e5e7eb; border-radius:12px; background:#fff}
    .mobile-panel{display:none; border-top:1px solid #eee; background:#fff}
    #menu-toggle:checked ~ .mobile-panel{display:block}
    .mobile-panel a{display:block; padding:.75rem; text-decoration:none; border-radius:12px}
    .mobile-panel .btn{width:100%}
    @media (min-width: 768px){
      .nav-links{display:flex}
      .actions{display:flex}
      .menu-btn{display:none}
      .mobile-panel{display:none!important}
    }
    /* -------------------------
       Hero
       ------------------------- */
    .hero{position:relative}
    .hero-media{position:absolute; inset:0;}
    .hero-media img{width:100%; height:70vh; object-fit:cover}
    .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,42,74,.65) 0%, rgba(11,42,74,.65) 40%, rgba(11,42,74,.35) 100%)}
    .hero-inner{position:relative; min-height:70vh; display:flex; align-items:center}
    .hero h1{color:#fff; font-weight:900; line-height:1.15; font-size:clamp(2rem, 4vw + 1rem, 3.25rem); letter-spacing:.2px}
    .hero p{color:rgba(255,255,255,.92); max-width:42ch; font-size:clamp(1rem, .5vw + .9rem, 1.25rem)}
    .hero .cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem}
    /* -------------------------
       Sections
       ------------------------- */
    section{scroll-margin-top:80px}
    .section{padding-block:4rem}
    .title{font-weight:900; color:var(--navy); letter-spacing:.2px; font-size: clamp(1.5rem, .9vw + 1.25rem, 2rem)}
    .muted{color:var(--muted)}
    /* Shared section header (centered) */
    .section-header{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:.35rem;
      text-align:center;
      margin-bottom:1rem;
    }
    /* About — CENTERED */
    .about{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1.5rem;
      text-align:center;
    }
    .about > div{
      max-width:720px;
    }
    /* Grid cards */
    .grid{display:grid; gap:1rem}
    .grid.pillars{--cols: 1}
    @media (min-width:640px){.grid.pillars{--cols:2}}
    @media (min-width:1024px){.grid.pillars{--cols:4}}
    .grid.pillars{grid-template-columns: repeat(var(--cols), minmax(0,1fr))}
    .card{border:1px solid #eee; border-radius:20px; box-shadow:var(--shadow-sm); background:#fff}
    .card .p{padding:1rem}
    .card .ph{padding:1rem; display:flex; align-items:center; gap:.75rem}
    .card .ph .icon{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--navy)}
    .card .ph .icon svg{width:20px; height:20px; fill:var(--gold)}
    /* Class Champions */
    .grid.champions{--cols:1}
    @media (min-width:640px){.grid.champions{--cols:2}}
    @media (min-width:1024px){.grid.champions{--cols:3}}
    .grid.champions{grid-template-columns:repeat(var(--cols), minmax(0,1fr))}
    .champion-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
      margin-top:.5rem;
      font-size:.9rem;
    }
    /* Testimonials (CSS slider + JS auto-advance) */
    .testimonials{position:relative}
    .slides{display:grid; grid-template-columns:1fr; border:1px solid #eee; border-radius:20px; overflow:hidden}
    @media (min-width:768px){.slides{grid-template-columns:1fr 1fr}}
    .slide-photo{position:relative}
    .slide-photo img{width:100%; height:100%; object-fit:cover}
    .slide-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
    .slide-copy{padding:2rem}
    .slide-copy q{font-size:1.125rem}
    .t-controls{display:flex; gap:.5rem; justify-content:center; margin-top:.25rem}
    .t-controls label{display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid #e5e7eb; border-radius:12px; cursor:pointer; background:#fff}
      /* radio/slide binding */
    input[name="t"]{position:absolute; left:-9999px}
    .t1:checked ~ .t-wrap .t-1,
    .t2:checked ~ .t-wrap .t-2,
    .t3:checked ~ .t-wrap .t-3,
    .t4:checked ~ .t-wrap .t-4{display:grid}
    .t-wrap article{display:none}
    /* News cards */
    .grid.news{--cols:1}
    @media (min-width:640px){.grid.news{--cols:2}}
    @media (min-width:1024px){.grid.news{--cols:3}}
    .grid.news{grid-template-columns:repeat(var(--cols), minmax(0,1fr))}
 .ratio {
  position: relative;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.ratio::before {
  content: "";
  display: block;
  padding-top: 62.5%;
}

/* This now catches images even if they're inside a link */
.ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.card:hover .ratio img {
  transform: scale(1.05);
}

    /* Gallery preview on home */
    .grid.gallery{--cols:2}
    @media (min-width:640px){.grid.gallery{--cols:3}}
    @media (min-width:1024px){.grid.gallery{--cols:5}}
    .grid.gallery{grid-template-columns:repeat(var(--cols), minmax(0,1fr))}
    .card.gallery-card{
      display:block;
      text-decoration:none;
      color:inherit;
    }
    /* CTA banner */
.cta-band{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:var(--gold);       /* was var(--navy) */
  color:var(--charcoal);        /* dark text for contrast on gold */
  box-shadow:var(--shadow-md);
}  
    .cta-band .ghost{position:absolute; inset:0; opacity:.08}
    /* Upcoming */
    .grid.upcoming{--cols:1}
    @media (min-width:1024px){.grid.upcoming{grid-template-columns: 1.2fr .8fr}}
    /* Footer */
    footer{border-top:1px solid #eee}
    .footer-grid{display:grid; gap:2rem}
    @media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media (min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
    .field{display:flex; gap:.5rem}
    .field input{flex:1; padding:.65rem .8rem; border:1px solid #e5e7eb; border-radius:12px}

    /* Sticky donate dock */
    .dock{position:fixed; right:20px; bottom:20px; display:none; align-items:center; gap:.5rem; background:var(--navy); color:#fff; padding:.4rem .5rem; border-radius:18px; box-shadow:var(--shadow-md)}
    .dock .btn{padding:.4rem .7rem}
    @media (min-width:640px){.dock{display:flex}}

    /* Focus styles */
    :where(a,button,[role="button"], input, label):focus-visible{outline:var(--ring)}
    
/* ... [Paste the rest of your CSS rules here] ... */

/* ADD THIS EXTRA RULE for WordPress Admin Bar compatibility */
body.admin-bar header.sticky { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header.sticky { top: 46px; } }