/* Suraj Mahal Haveli: cream, maroon, saffron and Jodhpur blue. Rozha One for headings, Hind for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #FBF4E8;
  --surface: #FFFBF3;
  --soft: #F4E7D0;
  --ink: #2A1712;
  --muted: #6B5148;
  --line: #E6D3B6;
  --line-strong: #D2B892;
  --brand: #7A1F2B;
  --brand-hover: #5F1621;
  --brand-ink: #FFF6E6;
  --brand-text: #7A1F2B;
  --saffron: #E39B2D;
  --blue: #2F5D8C;
  --eyebrow: #A25A0E;
  --announce-bg: #2F5D8C;
  --announce-ink: #FFF6E6;
  --head: "Rozha One", Georgia, serif;
  --body: "Hind", system-ui, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --btn-radius: 4px;
  --wrap: 1180px;
  --gap: 24px;
  --cta-bg: #7A1F2B;
  --sum-bg: #2A1712;
  --sum-ink: #FFF6E6;
  --sum-muted: #D9C2A4;
  --badge-bg: #F6E0B5;
  --badge-ink: #7A1F2B;
}
body { font-size: 1.04rem; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.btn { font-weight: 600; letter-spacing: .02em; }

/* centred header: logo on its own line, nav below on wide screens */
.header { background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 42px; height: 42px; }
.logo span { display: grid; line-height: 1.05; }
.logo b { font: 400 1.6rem var(--head); color: var(--brand); }
.logo small { font-size: .74rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.nav a { font-weight: 500; color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); background: transparent; box-shadow: inset 0 -2px 0 var(--saffron); border-radius: 0; }
@media (min-width: 961px) {
  .hd-center .wrap { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". logo cta" "nav nav nav"; row-gap: 4px; padding-top: 12px; }
  .hd-center .logo { grid-area: logo; flex-direction: column; text-align: center; gap: 4px; }
  .hd-center .header-cta { grid-area: cta; justify-self: end; }
  .hd-center .nav { grid-area: nav; justify-self: center; margin: 0; border-top: 1px solid var(--line); padding: 4px 0; }
}

/* hero */
.hero { position: relative; padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px); background: radial-gradient(120% 80% at 80% 0%, #F6E0B5 0%, transparent 60%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 380px; margin-inline: auto !important; } }
.hero-tag { display: inline-block; padding: 6px 14px; border: 1px solid var(--saffron); color: var(--eyebrow); font-weight: 600; font-size: .9rem; letter-spacing: .04em; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.02; margin: 18px 0; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .qbar { margin-top: 28px; }
.hero-art { margin: 0; }
.hero-art svg { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(122,31,43,.25)); }
.motif { height: 22px; background: repeating-linear-gradient(90deg, var(--brand) 0 18px, var(--saffron) 18px 22px, var(--blue) 22px 40px, var(--saffron) 40px 44px); opacity: .9; }

.intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 820px) { .intro-grid { grid-template-columns: minmax(0, 1fr); } }
.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 26px 0 0; }
.kv div { padding: 16px; border-top: 3px solid var(--saffron); background: var(--surface); }
.kv dt { font: 400 2rem/1 var(--head); color: var(--brand); }
.kv dd { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }

/* rooms */
.room-card { border-color: var(--line); box-shadow: 0 14px 30px -26px rgba(42,23,18,.5); }
.room-body h3 { font-size: 1.7rem; color: var(--brand); }
.room-rate b { font-family: var(--head); font-weight: 400; color: var(--brand); }

/* season strip */
.season-band { background: var(--soft); }
.season-strip { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; }
@media (max-width: 760px) { .season-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.season-strip li { display: grid; gap: 2px; padding: 12px 6px; text-align: center; color: #fff; border-radius: 4px; }
.season-strip b { font: 400 1.15rem var(--head); }
.season-strip span { font-size: .72rem; line-height: 1.2; opacity: .9; }
.ss-festive { background: #7A1F2B; } .ss-peak { background: #C9781A; } .ss-regular { background: #2F5D8C; } .ss-summer { background: #7D8259; } .ss-weekend { background: #2A1712; }
.season-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.season-key li { padding: 4px 10px; border-radius: 4px; color: #fff; font-size: .82rem; font-weight: 600; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sig-out .tbl th, .sig-out .tbl td { border-color: rgba(255,246,230,.15); }
.sig-out .tbl th { color: var(--sum-muted); }
.sig-out .lines div { border-color: rgba(255,246,230,.2); }
.sig-out .eyebrow { color: var(--saffron); }
.sig-out .form-note { color: var(--sum-muted); }
.sig-out .btn-primary { background: var(--saffron); color: #2A1712; }
.sig-out .tbl-wrap { max-height: 300px; overflow: auto; }
.sig-total { color: #FFE3B0; font-weight: 400; }

/* sections */
.quotes-band { background: var(--brand); color: var(--brand-ink); }
.quotes-band .quotes li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.quotes-band .q-by { color: #EBC9A0; }
.quotes blockquote { font-family: var(--head); font-size: 1.2rem; line-height: 1.45; }
.page-head { background: var(--soft); border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 3vw, 36px); }
.page-head h1 { color: var(--brand); }
.cta-band { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px); }
.cta-band .btn-primary { background: var(--saffron); color: #2A1712; }
.numbers-band { background: var(--soft); }
.footer { background: #2A1712; color: #F3E3CB; --footer-line: rgba(255,255,255,.15); }
.footer .logo b { color: #FFE3B0; }
.footer .logo small { color: #D9C2A4; }
.nb-dist, .s-months { color: var(--eyebrow) !important; }