/* ==========================================================================
   Shivganga — site chrome (header + footer)
   Loaded on every page. All selectors are prefixed .sg- so nothing here
   collides with the theme stylesheets that came with the template.
   ========================================================================== */

:root {
  --sg-green:       #0E6B57;
  --sg-green-dark:  #0A5344;
  --sg-green-soft:  #A8C8BF;
  --sg-green-tint:  #E7F1ED;
  --sg-orange:      #E86A24;
  --sg-orange-dark: #C4551A;
  --sg-ink:         #15211D;
  --sg-ink-2:       #3D4B46;
  --sg-muted:       #5C6A64;
  --sg-cream:       #EDE7DD;
  --sg-cream-2:     #E3DCD1;
  --sg-paper:       #FBF8F3;

  --sg-font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --sg-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sg-font-quote: 'Lora', Georgia, serif;

  --sg-header-h: 76px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.sg-header { position: sticky; top: 0; z-index: 900; font-family: var(--sg-font-body); }
.sg-header__bar {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--sg-cream-2);
  transition: box-shadow .25s ease, background .25s ease;
}
.sg-header.is-stuck .sg-header__bar { box-shadow: 0 6px 24px rgba(21,33,29,.09); background: rgba(255,255,255,.97); }

.sg-header__inner {
  width: min(1400px, 94vw); margin-inline: auto;
  /* absorb the bar's 1px bottom border so the header measures exactly
     --sg-header-h, which the hero subtracts from 100vh */
  height: calc(var(--sg-header-h) - 1px);
  display: flex; align-items: center; gap: 1.5rem;
}

/* ---------- Brand ---------- */
.sg-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
/* The logo file carries an opaque white background. Setting it on a white
   tile costs nothing against the solid bar and reads as deliberate once the
   bar goes transparent over the hero. */
.sg-header__logo { display: block; background: #fff; padding: 7px 9px; border-radius: 10px; }
/* The logo file carries the wheel emblem above its own Devanagari wordmark.
   At brand size that text is illegible and duplicates the wordmark set beside
   it, so the mark is cropped to the emblem alone (measured at y 19.2-60.6%,
   x 17.5-78.3% of the square). Percentage margins resolve against the square
   wrapper's width, so the crop holds at any --mark size. */
.sg-brand__mark {
  --mark: 46px;
  display: block;              /* a bare <span> is inline and would ignore width */
  width: var(--mark);
  aspect-ratio: 60.8 / 41.4;   /* the emblem is wider than tall */
  overflow: hidden; flex: 0 0 auto;
}
.sg-brand__mark img {
  width: 164.5%; height: auto; max-width: none; display: block;
  margin: -31.6% 0 0 -28.8%;
}
.sg-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.sg-brand__text strong {
  font-family: var(--sg-font-head); font-size: 1.16rem; font-weight: 700;
  color: var(--sg-green); letter-spacing: -0.01em;
}
.sg-brand__text small {
  font-family: var(--sg-font-quote); font-style: italic;
  font-size: .78rem; color: var(--sg-muted);
}
@media (max-width: 420px) { .sg-brand__text { display: none; } }

/* ---------- Desktop nav ---------- */
.sg-nav { margin-left: auto; }
.sg-nav > ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.sg-nav > ul > li { position: relative; }
.sg-nav a, .sg-nav .sg-nav__toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sg-font-head); font-size: .88rem; font-weight: 600;
  color: var(--sg-ink-2); text-decoration: none;
  padding: .6rem .68rem; border-radius: 9px; border: 0; background: none;
  cursor: pointer; white-space: nowrap; transition: color .18s ease, background .18s ease;
}
.sg-nav a:hover, .sg-nav .sg-nav__toggle:hover,
.sg-nav li.is-open > .sg-nav__toggle { color: var(--sg-green); background: var(--sg-green-tint); }
.sg-nav > ul > li.is-active > a { color: var(--sg-green); }
.sg-nav > ul > li.is-active > a::after {
  content: ""; position: absolute; left: .68rem; right: .68rem; bottom: .18rem;
  height: 2px; background: var(--sg-orange); border-radius: 2px;
}
.sg-nav__toggle .caret { font-size: .62rem; transition: transform .2s ease; }
.sg-nav li.is-open > .sg-nav__toggle .caret { transform: rotate(180deg); }

/* Submenu */
.sg-nav__sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 254px;
  background: #fff; border: 1px solid var(--sg-cream-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(21,33,29,.14); padding: .45rem;
  list-style: none; margin: 0; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sg-nav li.is-open > .sg-nav__sub { opacity: 1; visibility: visible; transform: none; }
.sg-nav__sub a {
  display: block; padding: .6rem .75rem; font-weight: 500; font-size: .875rem;
  color: var(--sg-ink-2); border-radius: 9px; white-space: normal;
}
.sg-nav__sub a:hover { background: var(--sg-green-tint); color: var(--sg-green); }

@media (max-width: 1199px) { .sg-nav { display: none; } }

/* ---------- Actions ---------- */
.sg-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
@media (min-width: 1200px) { .sg-header__actions { margin-left: 0; } }

.sg-donate { position: relative; }
.sg-donate__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--sg-font-head); font-weight: 700; font-size: .88rem;
  background: var(--sg-orange); color: #fff; border: 0; cursor: pointer;
  padding: .72rem 1.25rem; border-radius: 999px; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(232,106,36,.3);
  transition: background .18s ease, transform .18s ease;
}
.sg-donate__btn:hover { background: var(--sg-orange-dark); transform: translateY(-1px); }
.sg-donate__btn .caret { font-size: .6rem; }
.sg-donate__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 218px;
  background: #fff; border: 1px solid var(--sg-cream-2); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(21,33,29,.16); padding: .45rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 30;
}
.sg-donate.is-open .sg-donate__menu { opacity: 1; visibility: visible; transform: none; }
.sg-donate__menu a {
  display: block; padding: .62rem .75rem; border-radius: 9px; text-decoration: none;
  font-family: var(--sg-font-head); font-weight: 600; font-size: .87rem; color: var(--sg-ink-2);
}
.sg-donate__menu a:hover { background: var(--sg-green-tint); color: var(--sg-green); }

/* ---------- Burger ---------- */
.sg-burger {
  display: none; width: 44px; height: 44px; border-radius: 11px;
  border: 1px solid var(--sg-cream-2); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0;
}
.sg-burger span { display: block; width: 19px; height: 2px; background: var(--sg-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
@media (max-width: 1199px) { .sg-burger { display: flex; } }
body.sg-drawer-open .sg-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sg-drawer-open .sg-burger span:nth-child(2) { opacity: 0; }
body.sg-drawer-open .sg-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.sg-drawer__backdrop {
  position: fixed; inset: 0; background: rgba(10,20,17,.55); z-index: 950;
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
}
body.sg-drawer-open .sg-drawer__backdrop { opacity: 1; visibility: visible; }

.sg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
  background: var(--sg-paper); z-index: 960; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -18px 0 44px rgba(21,33,29,.2);
}
body.sg-drawer-open .sg-drawer { transform: none; }
.sg-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--sg-cream-2); flex: 0 0 auto;
}
.sg-drawer__close {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sg-cream-2);
  background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--sg-ink); line-height: 1;
}
.sg-drawer__body { overflow-y: auto; padding: .8rem .75rem 1.4rem; flex: 1; -webkit-overflow-scrolling: touch; }
.sg-drawer__body ul { list-style: none; margin: 0; padding: 0; }
.sg-drawer__body > ul > li { border-bottom: 1px solid var(--sg-cream-2); }
.sg-drawer__body > ul > li:last-child { border-bottom: 0; }
.sg-drawer__body a, .sg-drawer__acc {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--sg-font-head); font-weight: 600; font-size: .97rem;
  color: var(--sg-ink); text-decoration: none; padding: .88rem .7rem;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.sg-drawer__acc .caret { font-size: .7rem; color: var(--sg-muted); transition: transform .22s ease; }
.sg-drawer__acc.is-open .caret { transform: rotate(180deg); }
.sg-drawer__sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.sg-drawer__sub.is-open { max-height: 520px; }
.sg-drawer__sub a {
  font-weight: 500; font-size: .9rem; color: var(--sg-muted);
  padding: .6rem .7rem .6rem 1.5rem;
}
.sg-drawer__sub a:hover { color: var(--sg-green); }
.sg-drawer__foot { padding: 1rem 1.15rem 1.4rem; border-top: 1px solid var(--sg-cream-2); flex: 0 0 auto; }
.sg-drawer__social { display: flex; gap: .55rem; margin-top: .9rem; }
.sg-drawer__social a {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--sg-green-tint);
  display: grid; place-items: center;
}
.sg-drawer__social img { width: 17px; height: 17px; object-fit: contain !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sg-footer {
  background: var(--sg-ink); color: rgba(255,255,255,.72);
  font-family: var(--sg-font-body); font-size: .93rem; line-height: 1.7;
}
.sg-footer__wrap { width: min(1180px, 92vw); margin-inline: auto; }
.sg-footer a { color: rgba(255,255,255,.72); text-decoration: none; transition: color .18s ease; }
.sg-footer a:hover { color: #fff; }

.sg-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px);
  padding: clamp(48px, 6vw, 76px) 0 clamp(32px, 4vw, 48px);
}
@media (max-width: 980px) { .sg-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sg-footer__top { grid-template-columns: 1fr; } }

/* The logo file has an opaque white background (no alpha), so on the dark
   footer it is set on a deliberate white tile rather than filtered — filtering
   would destroy the wheel, trishul and water-drop colours. */
.sg-footer__logo {
  display: inline-block; background: #fff;
  padding: 13px 15px; border-radius: 14px; margin-bottom: 1.4rem;
}
.sg-footer__logo .sg-brand__mark { --mark: 72px; }
.sg-footer__brand h3 {
  font-family: var(--sg-font-head); color: #fff; font-size: 1.4rem;
  font-weight: 700; margin: 0 0 .1rem; letter-spacing: -0.01em;
}
.sg-footer__brand .tag {
  font-family: var(--sg-font-quote); font-style: italic;
  color: var(--sg-green-soft); font-size: 1rem; display: block; margin-bottom: 1rem;
}
.sg-footer__brand p { max-width: 34ch; margin: 0 0 1.3rem; color: rgba(255,255,255,.62); }

.sg-footer__social { display: flex; gap: .6rem; }
.sg-footer__social a {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; transition: background .2s ease, transform .2s ease;
}
.sg-footer__social a:hover { background: var(--sg-green); transform: translateY(-2px); }
/* see the note in home.css: a global `img { object-fit: cover !important }`
   in shivganga.css would otherwise crop these icons */
.sg-footer__social img { width: 17px; height: 17px; object-fit: contain !important; filter: brightness(0) invert(1); opacity: .85; }

.sg-footer__col h4 {
  font-family: var(--sg-font-head); color: #fff; font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem;
}
.sg-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sg-footer__col li { margin-bottom: .58rem; }
.sg-footer__col li a { font-size: .92rem; }

.sg-footer__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.6rem 0;
  font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.85;
}
.sg-footer__legal strong { color: rgba(255,255,255,.72); font-weight: 600; }

.sg-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding: 1.3rem 0 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.5);
}
.sg-footer__policies { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }

@media (prefers-reduced-motion: reduce) {
  .sg-drawer, .sg-drawer__backdrop, .sg-nav__sub, .sg-donate__menu, .sg-drawer__sub { transition: none; }
}


/* ==========================================================================
   HOME — header sits over the hero until the page is scrolled
   ========================================================================== */

/* Pulled out of flow so the hero starts at the top of the viewport and the
   header floats on it. Sticky still pins it once scrolling begins. */
body.sg-overlay-header .sg-header { margin-bottom: calc(-1 * var(--sg-header-h)); }

body.sg-overlay-header .sg-header:not(.is-stuck) .sg-header__bar {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Light type while the bar is over the photograph.
   These are deliberately scoped to the bar's own top-level items
   (.sg-nav > ul > li > a) rather than every link inside .sg-nav. A dropdown
   opens as its own white panel, and a blanket `.sg-nav a:hover` rule outranks
   the panel's own colours, which painted each child white-on-white the moment
   it was hovered. */
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-brand__text strong { color: #fff; }
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-brand__text small  { color: rgba(255,255,255,.78); }
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav > ul > li > a,
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav .sg-nav__toggle { color: rgba(255,255,255,.92); }
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav > ul > li > a:hover,
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav .sg-nav__toggle:hover,
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav li.is-open > .sg-nav__toggle {
  color: #fff; background: rgba(255,255,255,.14);
}
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav > ul > li.is-active > a { color: #fff; }
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-burger {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34);
}
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-burger span { background: #fff; }

/* The dropdown panel is a light surface in both header states, so its links
   keep the dark treatment — restated for :hover so nothing above can win. */
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav__sub a {
  color: var(--sg-ink-2); background: transparent;
}
body.sg-overlay-header .sg-header:not(.is-stuck) .sg-nav__sub a:hover {
  color: var(--sg-green); background: var(--sg-green-tint);
}

@media (prefers-reduced-motion: no-preference) {
  .sg-header__bar,
  .sg-brand__text strong, .sg-brand__text small,
  .sg-nav a, .sg-nav .sg-nav__toggle, .sg-burger, .sg-burger span {
    transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
  }
}