/* ==========================================================================
   Bhakti Vedanta Institute — global styles
   Shared by every page: colors, fonts, base, top bar, header/nav, footer,
   buttons, section headings and cards.
   WordPress: becomes the theme's style.css (header.php / footer.php markup).
   ========================================================================== */

/* ---- Design tokens & base ---- */
:root{
  --ink:#651C14; --ink-2:#891A10;
  --parchment:#F7F2E7; --parchment-2:#EFE6D2;   /* page background / alternate sections & cards */
  --brass:#C99A2E; --brass-dim:#EDC76C;          /* gold accents (brass-dim = on dark backgrounds) */
  --brass-text:#8C6A1C;                          /* gold text on the light background */
  --line:#E0D3B6;
  --text:#2A2016; --text-dim:#5F5240;
  font-family:'Roboto',Arial,Tahoma,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  background:var(--parchment); color:var(--text);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
/* Visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- Top bar ---- */
.topbar{background:var(--ink);color:#E9E2CE;font-size:13px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 28px;flex-wrap:wrap;gap:6px;}
.topbar a{text-decoration:none;color:inherit;opacity:.85;}
.topbar .socials{display:flex;gap:14px;}

/* ---- Nav ---- */
/* Header keeps the dark maroon colors so the light logo stays readable */
header.site{--parchment:#3A1611;--parchment-2:#4A1F17;--line:#5C2A20;--text:#F0E4CC;--text-dim:#C9AE8A;color:var(--text);position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--parchment);border-bottom:1px solid var(--line);}
nav.main{display:flex;align-items:center;justify-content:space-between;padding:8px 28px;position:relative;}
.brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.brand img{height:88px;width:auto;max-width:none;display:block;}
@media(max-width:860px){.brand img{height:64px;}}
@media(max-width:480px){.brand img{height:52px;}}
.navlinks{display:flex;gap:30px;list-style:none;font-size:15px;font-family:'Libre Baskerville',serif;}
.navlinks a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;}
.navlinks a:hover,.navlinks a[aria-current="page"]{border-color:var(--brass);}
.navlinks .donate{background:var(--brass);color:#fff;padding:9px 18px;border-radius:2px;}
.navlinks .donate:hover{border-color:transparent;opacity:.9;}
/* Same box for every top-level link so "About" (inside the dropdown wrapper) lines up with the rest */
@media(min-width:861px){.navlinks{align-items:center;}.navlinks > li > a{display:inline-block;}}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:18px;color:var(--text);}
@media(max-width:860px){
  .navlinks{display:none;}
  .navtoggle{display:block;}
  .navlinks.open{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--parchment);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px 28px 18px;
    box-shadow:0 12px 20px rgba(0,0,0,.12);
  }
  .navlinks.open li{width:100%;}
  .navlinks.open a{display:block;padding:12px 0;border-bottom:1px solid var(--line);}
  .navlinks.open li:last-child a{border-bottom:none;}
  .navlinks.open .donate{display:inline-block;padding:9px 18px;border-radius:2px;}
}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:12px 22px;border-radius:2px;text-decoration:none;font-size:15px;font-weight:500;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;}
.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink);}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.22);}
.btn-secondary{border:1px solid var(--line);color:var(--text);}
.btn-secondary:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12);}

/* ---- Dropdown submenu (About) ---- */
.navlinks .has-sub{position:relative;display:flex;align-items:center;gap:4px;}
.navlinks .current-parent > a{border-color:var(--brass);}
.sub-toggle{width:22px;height:22px;padding:0;border:0;background:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sub-toggle::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;}
.has-sub.open .sub-toggle::before{transform:translateY(2px) rotate(-135deg);}
.submenu{
  position:absolute;top:100%;left:-18px;min-width:240px;list-style:none;
  padding:14px 0 10px;margin-top:6px;background:var(--parchment);border:1px solid var(--line);border-top:2px solid var(--brass);
  border-radius:0 0 10px 10px;box-shadow:0 16px 30px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:20;
}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}
.has-sub:hover > .submenu,.has-sub:focus-within > .submenu,.has-sub.open > .submenu{opacity:1;visibility:visible;transform:none;}
.navlinks .submenu a{display:block;padding:9px 20px;border:0;font-size:14.5px;white-space:nowrap;}
.navlinks .submenu a:hover,.navlinks .submenu a[aria-current="page"]{background:rgba(248,242,230,.07);color:var(--brass-dim);}
@media(max-width:860px){
  .navlinks.open .has-sub{flex-wrap:wrap;gap:0;}
  .navlinks.open .has-sub > a{flex:1;}
  .navlinks.open .sub-toggle{width:44px;height:44px;border-bottom:1px solid var(--line);}
  .navlinks.open .submenu{position:static;display:none;width:100%;min-width:0;margin:0;padding:4px 0 8px 16px;border:0;border-radius:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none;}
  .navlinks.open .has-sub.open > .submenu{display:block;}
  .navlinks.open .submenu a{padding:10px 0;border-bottom:1px solid var(--line);white-space:normal;}
  .navlinks.open .submenu li:last-child a{border-bottom:1px solid var(--line);}
}

/* ---- Page headings ---- */
.eyebrow{font-size:20px;color:var(--brass-text);letter-spacing:.02em;margin-bottom:16px;}
h1.headline{font-family:'Rosarivo',serif;font-weight:500;font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.01em;}

/* ---- Section heading pattern ---- */
.section{padding:72px 0;border-bottom:1px solid var(--line);}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px;gap:20px;flex-wrap:wrap;}
.sec-head h2{font-family:'Rosarivo',serif;font-weight:500;font-size:28px;}
.sec-head a.more{font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--brass);color:var(--brass-text);padding-bottom:1px;}

/* ---- Featured grid (podcast/conference/club) ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
@media(max-width:860px){.grid3{grid-template-columns:1fr;}}
.card{background:var(--parchment-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.card:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.18);border-color:var(--brass);}
.card .card-body{padding:20px;}
.card .tag{font-size:18px;color:var(--brass-text);margin-bottom:8px;}
.card h3{font-family:'Rosarivo',serif;font-weight:500;font-size:17.5px;line-height:1.35;transition:color .25s ease;}

.card a{text-decoration:none;}
.card .card-img{overflow:hidden;}
.card .card-img img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block;transition:transform .5s ease;}
.card:hover .card-img img{transform:scale(1.06);}

/* ---- Inner page layout (page-template.html) ---- */
.page-header{padding:64px 0 48px;border-bottom:1px solid var(--line);}
.page-content p{font-size:16.5px;line-height:1.75;color:var(--text-dim);max-width:70ch;margin-bottom:18px;}

/* ---- Footer ---- */
footer.site-footer{background:var(--ink);color:#D8D2BE;padding:56px 48px 28px;}
footer.site-footer .wrap{max-width:none;padding:0;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:40px;}
@media(max-width:860px){footer.site-footer{padding:48px 24px 24px;}}
@media(max-width:420px){.foot-grid{grid-template-columns:1fr;gap:28px;}}
footer.site-footer h4{font-family:'Libre Baskerville',serif;font-size:15px;font-weight:500;margin-bottom:14px;color:#fff;}
footer.site-footer .motto{font-style:italic;font-size:13.5px;color:var(--brass-dim);margin:8px 0 14px;}
footer.site-footer p{font-size:14px;color:#AFA98F;line-height:1.7;}
footer.site-footer ul{list-style:none;}
footer.site-footer ul li{margin-bottom:9px;}
footer.site-footer a{text-decoration:none;font-size:14px;color:#D8D2BE;}
footer.site-footer a:hover{color:var(--brass-dim);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;color:#8C8771;flex-wrap:wrap;gap:10px;}
footer.site-footer .foot-logo{height:92px;width:auto;max-width:100%;margin-bottom:14px;object-fit:contain;object-position:left center;}

@media(max-width:640px){
  .topbar .wrap{
    justify-content:center;
    text-align:center;
    flex-direction:column;
    gap:4px;
    padding:8px 16px;
  }

  .topbar .wrap > span:first-child{
    width:100%;
  }

  .topbar .socials{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 14px;
  }
}