/* BANSI — public homepage styles
   Palette: cream background, gold serif headings, maroon sub-headings. */

:root {
    /* --cream is matched to the logo's paper background so the logo blends with
       no visible box. Nudge this one value if a faint box remains. */
    --cream:      #f2ece0;
    --cream-deep: #e8dfca;
    --panel:      #fffdf8;
    --gold:       #c19a2e;
    --gold-deep:  #a87f1c;
    --maroon:     #7a1f1f;
    --maroon-2:   #5e1717;
    --ink:        #2c2722;
    --muted:      #6f6658;
    --line:       #e5dcc8;
    --shadow:     0 14px 40px rgba(60, 40, 10, 0.16);
    --serif:      "Playfair Display", Georgia, "Times New Roman", serif;
    --body:       "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --maxw:       1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--maroon); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }

.section-title {
    color: var(--gold-deep);
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 0.5px;
    text-align: center;
}
.section-kicker {
    display: block;
    text-align: center;
    color: var(--maroon);
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px;
}
.section { padding: 78px 0; }
.section--alt { background: var(--cream-deep); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--body);
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 14px 30px;
    border-radius: 999px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(168, 127, 28, 0.35);
}
.btn--maroon { background: var(--maroon); color: #fff; }
.btn--maroon:hover { background: var(--maroon-2); }
.btn--ghost { background: transparent; border-color: var(--gold); color: var(--gold-deep); }
.btn--ghost:hover { background: var(--gold); color: #fff; }

/* ---------- Header / nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    /* Same cream paper colour as the logo, so the logo image blends seamlessly. */
    background: var(--cream);
    border-bottom: 1px solid rgba(120, 90, 30, 0.10);
}
.nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 12px 22px; max-width: var(--maxw); margin: 0 auto;
}
.nav__logo img { height: 50px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
    color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: .3px;
}
.nav__links a:hover { color: var(--maroon); text-decoration: none; }
.nav__cta { margin-left: 6px; }
.nav__toggle, .nav__toggle-label { display: none; }

/* ---------- Hero ---------- */
.hero {
    /* Flat paper colour so both the BANSI wordmark and the silhouette blend with no box. */
    background: var(--cream);
    padding: 64px 0 72px;
}
.hero__grid {
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
}
/* The hero "BANSI" is the real gold logo image, CSS-cropped to show only the
   gold lettering band — hiding the logo's own top strapline and baked-in subtitle.
   Two knobs if the crop needs nudging:
     • aspect-ratio  → taller/shorter visible band (trims the maroon subtitle at the bottom)
     • img margin-top → shift the image up/down (hides more/less of the top strapline) */
.hero__wordmark {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 3.92 / 1;
    overflow: hidden;
    margin: 0 0 4px;
    line-height: 0;
}
.hero__wordmark img {
    width: 100%;
    display: block;
    margin-top: -8%;
}
.hero__subtitle {
    color: var(--maroon);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(22px, 3.2vw, 32px);
    margin: 10px 0 6px;
}
/* Change #6: center the BANSI wordmark + subtitle together as a unit. The rest of the
   hero copy (strapline, lead, actions) stays left-aligned. Scoped to #home only. */
#home .hero__wordmark { margin-left: auto; margin-right: auto; }
#home .hero__subtitle { text-align: center; }
.hero__strapline { color: var(--muted); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.hero__lead { font-size: 19px; margin: 22px 0 28px; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__price { color: var(--maroon); font-weight: 700; font-family: var(--serif); font-size: 22px; }
.hero__art { position: relative; text-align: center; }
.hero__art img { margin: 0 auto; max-height: 560px; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.25)); }

/* ---------- About the book ---------- */
.book__grid { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: center; }
.book__cover img { border-radius: 8px; box-shadow: var(--shadow); margin: 0 auto; }
.book__body p { margin: 0 0 18px; }
/* "A Timeless Melody, Retold" — two-column About-the-Book layout (image | heading + text).
   Scoped to #about so no other section is affected. */
#about .book__grid { align-items: start; }
#about .section-kicker,
#about .section-title { text-align: left; }
#about .section-title { margin-bottom: 20px; }
/* Intro paragraph fills the text column (left-aligned beside the cover) instead of
   its global centered, max-width treatment. Only the homepage column instance. */
#about .book__body .book-intro { max-width: none; margin: 0; text-align: left; }
.lead { font-size: 20px; color: var(--ink); }

/* ---------- About the book (structured content) ---------- */
.book-intro {
    max-width: 780px; margin: 0 auto; text-align: center;
    font-size: 20px; line-height: 1.85;
}
.book-name-lead {
    max-width: 760px; margin: 52px auto 28px; text-align: center;
    font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 19px;
}
.values {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
    max-width: 940px; margin: 0 auto;
}
.value {
    text-align: center; background: #211c17; border: 1px solid var(--line);
    border-radius: 14px; padding: 26px 14px; box-shadow: 0 10px 28px rgba(33,28,23,.20);
    transition: transform .15s ease, box-shadow .15s ease;
}
.value:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.value__icon { color: var(--gold); width: 30px; height: 30px; margin: 0 auto 12px; }
.value__icon svg { width: 100%; height: 100%; display: block; }
.value__letter { font-family: var(--serif); color: var(--gold); font-size: 44px; font-weight: 700; line-height: 1; }
.value__word { color: #d9cfbe; font-weight: 700; letter-spacing: .4px; margin-top: 6px; }
.values__subtext {
    max-width: 720px; margin: 30px auto 0; text-align: center;
    color: var(--muted); font-style: italic; font-size: 17px; line-height: 1.7;
}
.book-gita {
    max-width: 780px; margin: 54px auto 0; text-align: center;
    font-size: 18px; line-height: 1.9;
}
.book-blessing { max-width: 760px; margin: 56px auto 0; text-align: center; }
.book-blessing::before {
    content: ""; display: block; width: 64px; height: 2px;
    background: var(--gold); margin: 0 auto 28px;
}
.book-blessing p {
    font-family: var(--serif); font-style: italic; color: var(--maroon);
    font-size: clamp(21px, 2.7vw, 27px); line-height: 1.5; margin: 0;
}
@media (max-width: 820px) { .values { grid-template-columns: repeat(2, 1fr); max-width: 460px; } }
@media (max-width: 460px) { .values { grid-template-columns: 1fr; max-width: 280px; } }

/* ---------- About the author ---------- */
.author__grid { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: center; }
.author__photo img { border-radius: 8px; box-shadow: var(--shadow); filter: grayscale(8%); margin: 0 auto; }
.author__name { color: var(--gold-deep); font-size: 30px; margin-bottom: 4px; }
.author__role { color: var(--maroon); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; margin-bottom: 16px; }

/* ---------- Themes ---------- */
.themes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.theme-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    overflow: hidden; box-shadow: 0 8px 24px rgba(60,40,10,.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.theme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.theme-card__img { aspect-ratio: 4 / 5; overflow: hidden; }
.theme-card__img img { width: 100%; height: 100%; object-fit: cover; }
.theme-card__body { padding: 22px 22px 26px; }
.theme-card__title { color: var(--maroon); font-size: 22px; margin-bottom: 8px; }
.theme-card__body p { margin: 0; color: var(--muted); font-size: 16px; }

/* ---------- Gita quote ---------- */
.quote { background: var(--maroon); color: #f6e9d8; text-align: center; padding: 80px 0; }
.quote__mark { font-family: var(--serif); font-size: 70px; line-height: 0; color: var(--gold); display: block; height: 30px; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3.6vw, 36px); margin: 22px auto 18px; max-width: 18em; line-height: 1.35; }
.quote cite { font-style: normal; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; color: var(--gold); }

/* ---------- Price block (MRP / save / final) ---------- */
.price { display: inline-flex; flex-direction: column; gap: 6px; }
.price__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.price__mrp { color: var(--muted); text-decoration: line-through; font-size: 18px; }
.price__save {
    color: #1c6b1c; background: #e3f4e3; font-family: var(--body);
    font-weight: 700; font-size: 13px; letter-spacing: .3px;
    padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.price__final { font-family: var(--serif); color: var(--maroon); font-weight: 700; font-size: 34px; line-height: 1; }

.price--hero { align-items: flex-start; }
.price--center { align-items: center; text-align: center; }
.price--center .price__row { justify-content: center; }
.price--xl .price__final { font-size: clamp(44px, 6vw, 64px); }
.price--xl .price__mrp { font-size: 22px; }

/* ---------- Policy / content pages ---------- */
.policy { max-width: 820px; margin: 0 auto; }
.policy__title {
    font-family: var(--serif); color: var(--gold-deep);
    font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 0 0 18px;
}
.policy p { margin: 0 0 18px; line-height: 1.8; }
.policy .lead-label { color: var(--maroon); font-weight: 700; }
.policy a { color: var(--maroon); font-weight: 600; }
.policy__contact { list-style: none; padding: 0; margin: 0 0 22px; }
.policy__contact li { margin: 0 0 10px; line-height: 1.7; }

/* ---------- Checkout form ---------- */
.checkout__grid { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; margin-top: 40px; }
.checkout__product {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 20px; margin-bottom: 28px;
}
.checkout__product-cover { width: 112px; flex-shrink: 0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.checkout__product-info { flex: 1; }
.checkout__product-info h2 { font-family: var(--serif); color: var(--gold-deep); font-size: 22px; line-height: 1.2; margin: 0 0 2px; }
.checkout__subhead { font-family: var(--serif); color: var(--maroon); font-size: 20px; margin: 0 0 16px; }
@media (max-width: 560px) {
    .checkout__product { flex-direction: column; }
    .checkout__product-cover { width: 96px; }
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field label { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--maroon); }
.field input {
    font-family: var(--body); font-size: 16px; padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(193,154,46,.18); }
.field--error input { border-color: #c0392b; background: #fdf3f2; }
.field__err { color: #c0392b; font-size: 13px; margin-top: 5px; }
.form__optional { color: var(--muted); font-weight: 400; }
.errorbox { background: #fbe4e4; border: 1px solid #e3a3a3; color: #8a1c1c; padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; }

.summary {
    position: sticky; top: 90px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 14px; padding: 26px; box-shadow: var(--shadow);
}
.summary h3 { font-family: var(--serif); color: var(--gold-deep); font-size: 22px; margin-bottom: 18px; }
.summary__cover { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.summary__cover img { width: 64px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.summary__line { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.summary__line--muted { color: var(--muted); }
.summary__total { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.summary__total .price__final { font-size: 30px; }

@media (max-width: 860px) {
    .checkout__grid { grid-template-columns: 1fr; }
    .summary { position: static; order: -1; }
    .form__row { grid-template-columns: 1fr; }
}

/* ---------- Buy page: quantity + total ---------- */
.buy__qtyrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 6px; }
.buy__qtyrow label { font-weight: 700; }
.qty {
    display: inline-flex; align-items: center;
    border: 2px solid var(--line); border-radius: 999px;
    overflow: hidden; background: var(--panel);
}
.qty__btn {
    width: 44px; height: 44px; border: none; background: transparent;
    font-size: 22px; line-height: 1; color: var(--maroon); cursor: pointer;
    font-family: var(--serif);
}
.qty__btn:hover { background: var(--cream-deep); }
.qty__input {
    width: 54px; text-align: center; border: none; background: transparent;
    font-size: 18px; font-weight: 700; color: var(--ink);
    -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy__hint { color: var(--muted); font-size: 14px; }
.buy__total { font-family: var(--serif); font-size: 24px; color: var(--ink); margin: 4px 0 24px; }
.buy__total span { color: var(--maroon); font-weight: 700; }
.buy__note { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- Buy band ---------- */
.buyband { background: linear-gradient(135deg, #fbf4e2 0%, var(--cream-deep) 100%); text-align: center; padding: 72px 0; }
.buyband__pricewrap { display: flex; justify-content: center; margin: 6px 0 4px; }
.buyband__note { color: var(--muted); margin: 16px 0 26px; }

/* ---------- Follow the author (social) ---------- */
.follow { text-align: center; }
.follow__title { font-family: var(--serif); color: var(--gold-deep); font-size: 22px; margin: 0 0 16px; }
.follow__icons { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.follow__icon {
    color: var(--gold); display: inline-flex; line-height: 0;
    transition: color .15s ease, transform .15s ease;
}
.follow__icon:hover, .follow__icon:focus-visible { color: var(--maroon); transform: translateY(-2px); }
.follow__icon svg { width: 26px; height: 26px; display: block; }
/* In the dark footer, keep the gold→maroon idea readable on a dark ground */
.site-footer .follow { margin: 6px 0 26px; }
.site-footer .follow__icon:hover, .site-footer .follow__icon:focus-visible { color: #d98b8b; }

/* ---------- Footer ---------- */
.site-footer { background: #211c17; color: #d9cfbe; padding: 52px 0 30px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px; align-items: center; }
.footer__brand { font-family: var(--serif); color: var(--gold); font-size: 26px; letter-spacing: 4px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.footer__links a { color: #d9cfbe; font-size: 14px; }
.footer__links a:hover { color: var(--gold); text-decoration: none; }
.footer__legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid #3a322a; font-size: 13px; color: #9c9183; text-align: center; }
.footer__credit { margin-top: 8px; }
.footer__credit a { color: var(--gold); }
.footer__credit a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
    .hero__grid, .book__grid, .author__grid { grid-template-columns: 1fr; gap: 34px; }
    .hero__art { order: -1; }
    .book__cover, .author__photo { max-width: 320px; margin: 0 auto; }
    .themes__grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 760px) {
    .section { padding: 56px 0; }
    /* CSS-only mobile menu */
    .nav__toggle-label {
        display: inline-flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px;
    }
    .nav__toggle-label span { width: 26px; height: 3px; background: var(--maroon); border-radius: 2px; }
    .nav__links {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--cream); border-bottom: 1px solid var(--line);
        max-height: 0; overflow: hidden; transition: max-height .25s ease;
    }
    .nav__links li { width: 100%; }
    .nav__links a { display: block; padding: 14px 22px; width: 100%; border-top: 1px solid var(--line); }
    .nav__cta { padding: 14px 22px; }
    .nav__toggle:checked ~ .nav__links { max-height: 420px; }
    .nav { position: relative; flex-wrap: wrap; }
}