/**
* Styles shared by the 100-Weeks Bhagavad Gita pages:
*   100-weeks-bhagavad-gita-learning.html  (landing)
*   gita-sponsor.html                      (sponsorship tiers & payment)
*   gita-sponsor-thanks.html               (post-sponsorship next steps)
* Palette and fonts follow index.html / assets/css/style.css.
*/

@font-face {
  font-family: OldeEnglish;
  src: url('OldeEnglish.ttf');
}

@font-face {
  font-family: Nudi;
  src: url('Nudi 17 e Regular.ttf');
}

:root {
  --maroon: #653c3b;
  --maroon-dark: #4b2928;
  --maroon-deep: #331a19;
  --cream: #ffebcd;
  --gold: #d9a44b;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  padding: 14px 0;
  background: linear-gradient(180deg, var(--maroon-dark) 0%, var(--maroon-deep) 100%);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 14px rgba(51, 26, 25, 0.35);
}

#header .logo img {
  max-height: 50px;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
/* Clears the fixed header: 14px padding top and bottom, a 50px logo and the
   3px gold rule. Keep in step with #header above. */
main {
  padding-top: 81px;
}

.gita-section {
  padding: 32px 0;
}

@media (min-width: 768px) {
  .gita-section {
    padding: 48px 0;
  }
}

.card-cream {
  background: #fff8ec;
  border: 1px solid rgba(101, 60, 59, 0.18);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 14px rgba(101, 60, 59, 0.12);
}

.section-heading {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 700;
  margin-bottom: 18px;
  text-align: center;
}

.eyebrow {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 8px;
}

/*--------------------------------------------------------------
# Hero (landing page)
--------------------------------------------------------------*/
#gita-hero {
  padding: 0;
}

#gita-hero img {
  width: 100%;
  height: auto;
  display: block;
}

#gita-hero .hero-text {
  background: var(--maroon);
  color: var(--cream);
  border-top: 4px solid var(--gold);
  padding: 22px 15px;
  text-align: center;
}

#gita-hero .eyebrow {
  opacity: 0.85;
}

#gita-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.9rem, 6.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 10px;
}

#gita-hero .trust-name {
  font-family: 'OldeEnglish', serif;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  margin-bottom: 4px;
}

#gita-hero .legacy {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Page banner (pay / thanks pages)
--------------------------------------------------------------*/
.page-banner {
  background: var(--maroon);
  color: var(--cream);
  border-bottom: 4px solid var(--gold);
  padding: 28px 15px;
  text-align: center;
}

.page-banner h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 6px;
}

.page-banner p {
  margin-bottom: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  opacity: 0.85;
}

/*--------------------------------------------------------------
# Facts list
--------------------------------------------------------------*/
.fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(101, 60, 59, 0.25);
}

.fact:last-child {
  border-bottom: 0;
}

.fact i {
  font-size: 22px;
  color: var(--gold);
  line-height: 1.3;
}

.fact .label {
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
}

.fact .value {
  font-weight: 600;
  margin: 0;
}

.fact-note {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  opacity: 0.8;
  margin: 4px 0 0;
}

.fact-note a {
  font-weight: 600;
}

/*--------------------------------------------------------------
# Teacher card
--------------------------------------------------------------*/
.teacher {
  text-align: center;
}

.teacher h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 4px;
}

.teacher .credentials {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  opacity: 0.85;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn-gita {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 14px;
  border-radius: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
  border: 2px solid var(--maroon);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gita:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(101, 60, 59, 0.25);
}

.btn-gita i {
  font-size: 22px;
}

.btn-gita small {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.85;
}

/* Heading above each pair of pay-term buttons on the landing page. */
.join-group-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0.8;
  margin: 26px 0 10px;
}

.section-heading+.join-group-label {
  margin-top: 0;
}

.join-group-label i {
  font-size: 16px;
}

.btn-join {
  background: var(--maroon);
  color: var(--cream);
}

.btn-join:hover {
  background: var(--maroon-dark);
  color: var(--cream);
}

.btn-register {
  background: var(--gold);
  color: #3f2322;
}

.btn-register:hover {
  color: #3f2322;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border-color: #128C7E;
}

.btn-whatsapp:hover {
  color: #fff;
}

/*--------------------------------------------------------------
# "Free for all" callout (landing page)
--------------------------------------------------------------*/
.free-banner {
  background: var(--gold);
  color: #3f2322;
  border-top: 3px solid var(--maroon);
  border-bottom: 3px solid var(--maroon);
  text-align: center;
  padding: 20px 15px;
}

.free-banner .free-mark {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
}

.free-banner p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  max-width: 620px;
  margin: 0 auto;
}

.free-banner .strike {
  text-decoration: line-through;
  opacity: 0.65;
}

/*--------------------------------------------------------------
# Sponsor roll
#
# Shown on both the landing page and gita-sponsor.html. There is no build
# step on this site, so the two name lists are duplicated markup -- edit
# BOTH pages when a sponsor is added.
--------------------------------------------------------------*/
.sponsor-roll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sponsor-roll li {
  flex: 1 1 220px;
  max-width: 320px;
}

.sponsor-pill {
  background: #fff8ec;
  border: 2px solid var(--maroon);
  border-radius: 999px;
  padding: 12px 20px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sponsor-pill .sponsor-name {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--maroon-dark);
  display: block;
}

.sponsor-pill .sponsor-place {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0.75;
  display: block;
  margin-top: 2px;
}

.sponsor-intro {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 22px;
}

/*--------------------------------------------------------------
# Payment page (sponsorship tiers)
--------------------------------------------------------------*/
.plan {
  margin-bottom: 28px;
}

/* Sanskrit tier name sitting above the amount in the maroon header. */
.plan-head .tier-name {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
  margin: 0 0 6px;
}

.plan-head .tier-gloss {
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 1;
  margin: 0;
}

/* Hairline between the tier's identity and its price. */
.plan-head .tier-gloss::after {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: rgba(217, 164, 75, 0.5);
  margin: 12px auto 0;
}

.tier-covers {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  text-align: center;
  opacity: 0.85;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(101, 60, 59, 0.3);
}

/* Open-amount tier: "Any Amount" is far longer than a price, so it needs a
   smaller face to sit on one line on a phone. */
.plan-head .amount-open {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  letter-spacing: 0.5px;
}

/* Marks the open tier as a quieter alternative to the priced ones. */
.plan.plan-open .plan-head {
  border-top: 4px solid rgba(217, 164, 75, 0.45);
}

/* Explains what the pay button will do, directly under it. */
.tier-hint {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  text-align: center;
  opacity: 0.8;
  margin: 0 0 10px;
}

.tier-hint i {
  color: var(--gold);
}

/* Highlighted top tier: the base header is already the deep brown, so this
   leans on the gold edge and the ribbon to stand apart. */
.plan.plan-featured .plan-head {
  border-top: 4px solid var(--gold);
  box-shadow: inset 0 0 36px rgba(217, 164, 75, 0.16);
}

.plan-ribbon {
  display: inline-block;
  background: var(--gold);
  color: #3f2322;
  font-family: "Open Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

/*--------------------------------------------------------------
# 80G tax-benefit note
--------------------------------------------------------------*/
.note-80g {
  background: #fff8ec;
  border: 1px solid rgba(101, 60, 59, 0.18);
  border-left: 5px solid var(--gold);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.note-80g h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.note-80g p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  margin-bottom: 0;
}

.note-80g p+p {
  margin-top: 8px;
}

/* Deep end of the palette with a little depth, so the tier header reads as a
   solid plate rather than a washed-out brown band. */
.plan-head {
  background: linear-gradient(165deg, var(--maroon-dark) 0%, var(--maroon-deep) 100%);
  color: var(--cream);
  border-radius: 14px 14px 0 0;
  padding: 26px 22px 22px;
  text-align: center;
}

.plan-head h2 {
  color: var(--cream);
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  margin: 0 0 4px;
}

.plan-head .amount {
  font-family: "Open Sans", sans-serif;
  font-size: clamp(2rem, 7.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  display: block;
  margin: 10px 0 6px;
  color: #fff;
}

.plan-head .amount small {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.plan-head .terms {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
}

.plan-head .terms-link {
  color: var(--cream);
  text-decoration: underline;
}

.plan-body {
  background: #fff8ec;
  border: 1px solid rgba(101, 60, 59, 0.18);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 20px;
}

/* A tier may offer more than one payable amount, stacked so the page still
   works with JavaScript off. */
.pay-option+.pay-option {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed rgba(101, 60, 59, 0.3);
}

.pay-option-head {
  text-align: center;
  margin-bottom: 14px;
}

.pay-label {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.65;
}

.pay-amount {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(1.4rem, 5.5vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--maroon);
}

.pay-note {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  opacity: 0.75;
  margin: 2px 0 0;
}

.pay-option .qr-box {
  max-width: 220px;
}

/* Closes every tier box: the exact payee name and UPI ID the donor should see
   in their app before confirming, so a wrong payee is caught before payment. */
.payee-check {
  font-family: "Open Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  background: #fff;
  border: 1px dashed rgba(101, 60, 59, 0.35);
  border-radius: 10px;
  padding: 11px 12px;
  margin: 14px 0 0;
}

.payee-check i {
  color: var(--gold);
}

.payee-check .payee-name {
  display: block;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--maroon-dark);
  margin-top: 5px;
}

.payee-check code {
  display: block;
  font-size: 12.5px;
  color: var(--maroon);
  background: none;
  padding: 0;
  word-break: break-all;
}

/* The QR code only matters to desktop visitors and anyone whose UPI app lives
   on another device, so keep it folded away -- four open QR codes dominate the
   sponsorship page and push the tiers off the screen. */
details.qr-toggle {
  margin-bottom: 12px;
}

details.qr-toggle summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px dashed rgba(101, 60, 59, 0.45);
  border-radius: 10px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--maroon);
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle; the flex summary centres its own icon. */
details.qr-toggle summary::-webkit-details-marker {
  display: none;
}

details.qr-toggle summary::marker {
  content: "";
}

details.qr-toggle[open] summary {
  margin-bottom: 12px;
}

.qr-box {
  background: #fff;
  border: 1px solid rgba(101, 60, 59, 0.2);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
}

.qr-box img {
  width: 100%;
  height: auto;
  display: block;
}

.app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--maroon);
  color: var(--cream);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--gold);
  /* Anchors the sheen in ::after and clips it to the rounded corners. */
  position: relative;
  overflow: hidden;
  animation: sponsor-glow 2.4s ease-in-out infinite;
}

.app-btn:hover {
  background: var(--maroon-dark);
  color: var(--cream);
}

/* A gold ring breathing outward, so the pay button is the obvious next step
   in a box that also holds a QR toggle and a confirm button. */
@keyframes sponsor-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 164, 75, 0.7), 0 3px 12px rgba(101, 60, 59, 0.25);
  }

  60% {
    box-shadow: 0 0 0 11px rgba(217, 164, 75, 0), 0 3px 12px rgba(101, 60, 59, 0.25);
  }
}

/* Light sweeping across the face of the button. */
.app-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 235, 205, 0.35), transparent);
  transform: skewX(-20deg);
  animation: sponsor-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sponsor-sheen {
  0% {
    left: -60%;
  }

  55%,
  100% {
    left: 130%;
  }
}

/* Motion is decoration here; the button must still read as the main action. */
@media (prefers-reduced-motion: reduce) {

  .app-btn {
    animation: none;
    box-shadow: 0 0 0 3px rgba(217, 164, 75, 0.45), 0 3px 12px rgba(101, 60, 59, 0.25);
  }

  .app-btn::after {
    display: none;
  }
}

/* The UPI mark replaces a generic icon inside the pay button. The logo is
   dark-on-transparent, so it needs a light chip to read on the maroon fill. */
.app-btn .upi-mark {
  flex: 0 0 auto;
  height: 26px;
  width: auto;
  background: #fff;
  border-radius: 5px;
  padding: 3px 5px;
}

/* "Pay with" strip: the apps that open these UPI links. Shown once, below the
   tiers, rather than repeated under every button. */
.pay-apps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.pay-apps .pay-apps-label {
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--maroon);
  opacity: 0.75;
}

.pay-apps img {
  height: 22px;
  width: auto;
  background: #fff;
  border: 1px solid rgba(101, 60, 59, 0.15);
  border-radius: 5px;
  padding: 3px 5px;
}

.vpa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px dashed rgba(101, 60, 59, 0.45);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.vpa-row code {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--maroon);
  word-break: break-all;
  background: none;
  padding: 0;
}

.vpa-row button {
  flex: 0 0 auto;
  background: var(--maroon);
  color: var(--cream);
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

details.help {
  border: 1px solid rgba(101, 60, 59, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff8ec;
}

details.help summary {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  color: var(--maroon);
}

details.help[open] summary {
  margin-bottom: 10px;
}

details.help p:last-child,
details.help ol:last-child,
details.help ul:last-child {
  margin-bottom: 0;
}

.bank-details {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Thanks page
--------------------------------------------------------------*/
.thanks-mark {
  font-size: 64px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}

/*--------------------------------------------------------------
# Contact strip
--------------------------------------------------------------*/
.contact-strip {
  background: var(--maroon);
  color: var(--cream);
  text-align: center;
  padding: 28px 15px;
}

.contact-strip h3 {
  color: var(--cream);
  font-size: 1.3rem;
}

.contact-strip a {
  color: var(--cream);
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  display: inline-block;
  margin: 4px 10px;
}