/* ──────────────────────────────────────────────────────────────
   House of India PA — legal documents
   Shared styling for the privacy policy and terms of service.

   Served from the Express static root (flip-menu/), so these live at
   /legal/privacy.html and /legal/terms.html on whatever host the API runs on.
   The folder is self-contained apart from the webfonts — copy it anywhere.

   Design: typeset editorial. Legal text is long and nobody wants to read it,
   so the job is comfortable measure, clear hierarchy, and enough warmth that
   it reads as part of the restaurant rather than a generated boilerplate page.
   ────────────────────────────────────────────────────────────── */

:root {
  --crimson:    #8B1A1A;
  --crimson-lo: #A83232;
  --gold:       #C9A96E;
  --gold-dim:   #E4D3AE;
  --cream:      #FDF8F1;
  --cream-deep: #F5EDE1;
  --ink:        #1F1714;
  --ink-soft:   #5A4C44;
  --rule:       #E6DACA;

  --measure: 34rem;              /* ~68 characters — the comfortable read */
  --display: "Marcellus", "Hoefler Text", Georgia, serif;
  --body:    "Spectral", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --crimson:    #E8A0A0;
    --crimson-lo: #F0B8B8;
    --gold:       #C9A96E;
    --gold-dim:   #6B5836;
    --cream:      #15100E;
    --cream-deep: #1E1714;
    --ink:        #EFE6DA;
    --ink-soft:   #B0A093;
    --rule:       #33291F;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-optical-sizing: auto;
  /* Paper-like warmth without an image request */
  background-image:
    radial-gradient(circle at 12% -8%, rgba(201,169,110,.14), transparent 45%),
    radial-gradient(circle at 92% 4%, rgba(139,26,26,.07), transparent 40%);
  background-attachment: fixed;
}

/* ── Masthead ─────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--cream-deep), transparent);
}
.masthead__inner {
  max-width: 74rem; margin: 0 auto;
  padding: 2.25rem 1.5rem 2.75rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--display);
  font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--crimson); text-decoration: none;
}
.brand:hover { color: var(--crimson-lo); }
.brand__mark { width: 20px; height: 20px; flex: none; }

.doc-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.08;
  margin: 1.5rem 0 0;
  letter-spacing: -.01em;
}
.doc-meta {
  margin-top: .9rem;
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: .8125rem; color: var(--ink-soft);
}
.stamp {
  display: inline-block;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .2rem .7rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--crimson);
}

/* Ornamental rule — a flattened Mughal arch motif */
.ornament { display: block; width: 100%; max-width: 15rem; height: 14px; margin-top: 1.6rem; color: var(--gold); }

/* ── Layout ───────────────────────────────────────────────── */
.shell {
  max-width: 74rem; margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 62rem) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
}

/* ── Contents ─────────────────────────────────────────────── */
.toc { font-size: .875rem; }
@media (min-width: 62rem) {
  .toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; }
}
.toc__label {
  font-family: var(--display);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 .9rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: .1rem; }
.toc a {
  display: flex; gap: .6rem;
  padding: .3rem .5rem .3rem .55rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft); text-decoration: none;
  line-height: 1.4;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--gold); font-size: .75rem; flex: none; padding-top: .1rem;
}
.toc a:hover { color: var(--crimson); background: var(--cream-deep); }
.toc a.is-active { color: var(--crimson); border-left-color: var(--crimson); font-weight: 600; }

/* ── Prose ────────────────────────────────────────────────── */
.prose { max-width: var(--measure); }
.prose > .lede {
  font-size: 1.1875rem; line-height: 1.7; color: var(--ink-soft);
  border-left: 2px solid var(--gold); padding-left: 1.1rem; margin: 0 0 2.75rem;
}
.prose section { margin-bottom: 2.75rem; scroll-margin-top: 2rem; }
.prose h2 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.5rem; line-height: 1.25;
  margin: 0 0 .85rem;
  display: flex; align-items: baseline; gap: .7rem;
}
.prose h2::before {
  content: attr(data-num);
  font-size: .8125rem; color: var(--gold); letter-spacing: .1em; flex: none;
}
.prose h3 {
  font-family: var(--display); font-weight: 400; font-size: 1.125rem;
  margin: 1.75rem 0 .5rem; color: var(--crimson);
}
.prose p  { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1.15rem; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 1.25rem; margin-bottom: .6rem; }
.prose li::before {
  content: "◆"; position: absolute; left: 0; top: -.05em;
  color: var(--gold); font-size: .625rem;
}
.prose strong { color: var(--crimson); font-weight: 600; }
.prose a { color: var(--crimson); text-decoration-color: var(--gold-dim); text-underline-offset: .18em; }
.prose a:hover { text-decoration-color: var(--crimson); }

/* Callout for the things people actually need to notice */
.callout {
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: .9375rem;
}
.callout p:last-child { margin-bottom: 0; }

/* Plain-language summary table */
.datatable { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .9375rem; }
.datatable caption { text-align: left; color: var(--ink-soft); font-size: .8125rem; padding-bottom: .6rem; }
.datatable th, .datatable td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--rule); }
.datatable th {
  font-family: var(--display); font-weight: 400; color: var(--crimson);
  width: 38%; white-space: nowrap;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rule);
  background: var(--cream-deep);
}
.footer__inner {
  max-width: 74rem; margin: 0 auto; padding: 2.5rem 1.5rem 3.5rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between;
  font-size: .875rem; color: var(--ink-soft);
}
.footer a { color: var(--crimson); text-decoration-color: var(--gold-dim); text-underline-offset: .18em; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__addr { font-style: normal; line-height: 1.7; }

/* ── Entrance ─────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }

/* ── Print ────────────────────────────────────────────────── */
@media print {
  :root { --cream: #fff; --ink: #000; --ink-soft: #333; --rule: #ccc; }
  body { background: #fff; font-size: 11pt; }
  .toc, .footer__nav, .ornament { display: none; }
  .shell { display: block; padding: 0; max-width: none; }
  .prose { max-width: none; }
  .prose section { page-break-inside: avoid; margin-bottom: 1.5rem; }
  a { text-decoration: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}