/* GaneshUtsav site styles.

   Colours are lifted from the app's own theme (lib/app/theme.dart) so the site
   and the installed app read as one thing.

   Sized fluidly rather than at breakpoints wherever a value can be. clamp()
   handles the range from a 320px phone to a desktop on its own, so the media
   queries at the bottom only have to deal with the few things that genuinely
   change shape: the header, the table of contents, and the card grid. */

:root {
  --saffron: #F4610A;
  --saffron-ink: #C2410C;
  --saffron-tint: #FFE9D8;
  --marigold: #E9A13B;
  --gold-ink: #8A5A00;
  --maroon: #7A1F2B;
  --teal: #0F5257;
  --teal-deep: #14706F;
  --teal-tint: #DDEBE9;

  --bg: #FDF8EF;
  --surface: #FFFDF8;
  --border: #EADFCE;
  --ink: #241610;
  --ink-soft: #6E5748;
  --shadow: 0 1px 2px rgba(36, 22, 16, .05), 0 8px 24px rgba(36, 22, 16, .06);

  /* One gutter value for the page edge, the cards and the boxed asides, so
     they stay in line with each other at every width. */
  --gutter: clamp(18px, 5vw, 26px);

  /* The column a page is built around. A document keeps the narrow one,
     because 760px is about 75 characters of this font and that is what a
     legal page should be read at. The landing page overrides it below: it is
     not prose, and on a wide screen a 760px strip of it looked unfinished. */
  --measure: 760px;
  --pad: clamp(18px, 4.5vw, 24px);
  --radius: clamp(12px, 3vw, 16px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14100E;
    --surface: #1E1815;
    --border: #362B25;
    --ink: #F2E9DE;
    --ink-soft: #B8A697;
    --teal: #6FBFB9;
    --teal-deep: #8CD0CA;
    --teal-tint: #14383A;
    --saffron-ink: #FFB27A;
    --saffron-tint: #40230F;
    --gold-ink: #E9A13B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Anchors from the table of contents must not land under nothing. */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Anek Devanagari', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Nirmala UI', 'Noto Sans Devanagari', Roboto, sans-serif;
  font-size: clamp(16px, 1vw + 14px, 18px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* A package name or an email address must wrap rather than widen the page.
     Nothing on this site may cause a sideways scroll. */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ------------------------------------------------------------ site header */

.top {
  background: var(--teal);
  color: #FFFDF8;
  padding: clamp(18px, 4vw, 26px) 0 clamp(20px, 4.5vw, 30px);
}

@media (prefers-color-scheme: dark) {
  .top { background: #0D3E42; }
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 14px);
  text-decoration: none;
  color: inherit;
  width: fit-content;
  max-width: 100%;
}

.brand svg {
  display: block;
  flex: none;
  width: clamp(38px, 10vw, 46px);
  height: clamp(38px, 10vw, 46px);
}

.brand b {
  font-size: clamp(19px, 4.5vw, 22px);
  font-weight: 700;
  letter-spacing: .2px;
}

.brand span {
  display: block;
  font-size: clamp(12.5px, 3.2vw, 14px);
  font-weight: 400;
  color: var(--marigold);
  line-height: 1.45;
}

/* The festoon that heads every pavti the app prints. */
.torana {
  display: block;
  width: 100%;
  height: clamp(16px, 3.5vw, 22px);
}

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(34px, 8vw, 54px) 0 10px; }

.hero h1 {
  margin: 0;
  font-size: clamp(30px, 6.5vw, 50px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.4px;
  text-wrap: balance;
}

.hero p {
  margin: 18px 0 0;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--ink-soft);
  max-width: 56ch;
}

.stamp {
  display: inline-block;
  margin-bottom: clamp(14px, 3vw, 20px);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--saffron-tint);
  color: var(--saffron-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ----------------------------------------------------------------- cards */

.cards {
  display: grid;
  gap: clamp(12px, 3vw, 16px);
  /* min() keeps the single column from being forced wider than the viewport
     on a 320px screen, which minmax(260px, 1fr) alone does. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin: clamp(28px, 6vw, 40px) 0 10px;
}

.card {
  display: block;
  padding: var(--pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}

.card:hover, .card:focus-visible {
  border-color: var(--marigold);
  transform: translateY(-2px);
}

.card h2 {
  margin: 0 0 6px;
  font-size: clamp(17px, 3.6vw, 19px);
  font-weight: 700;
  color: var(--teal-deep);
}

.card p {
  margin: 0;
  font-size: clamp(14px, 3vw, 15px);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* -------------------------------------------------------------- document */

.doc { padding: clamp(28px, 6vw, 44px) 0 20px; }

.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(27px, 6vw, 42px);
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -.3px;
  text-wrap: balance;
}

.updated {
  margin: 0 0 clamp(24px, 5vw, 34px);
  font-size: clamp(14px, 3vw, 15px);
  color: var(--ink-soft);
}

.doc h2 {
  margin: clamp(32px, 7vw, 44px) 0 12px;
  font-size: clamp(20px, 4.4vw, 23px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal-deep);
  scroll-margin-top: 20px;
}

.doc h3 {
  margin: clamp(22px, 4.5vw, 28px) 0 8px;
  font-size: clamp(16.5px, 3.6vw, 18px);
  font-weight: 700;
  line-height: 1.4;
}

.doc p { margin: 0 0 16px; }

.doc ul {
  margin: 0 0 16px;
  padding-left: clamp(18px, 4.5vw, 22px);
}

.doc li { margin-bottom: 9px; }

.doc a { color: var(--saffron-ink); }

.doc a:hover { color: var(--maroon); }

@media (prefers-color-scheme: dark) {
  .doc a:hover { color: var(--marigold); }
}

code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  /* anywhere, not break-all: it only breaks when the token cannot fit, so
     com.ragnar.GaneshUtsav stays whole on a wide screen. */
  overflow-wrap: anywhere;
}

/* A boxed aside for the things a mandal actually has to act on. */
.note {
  margin: clamp(20px, 4.5vw, 26px) 0;
  padding: var(--pad);
  border: 1px solid var(--border);
  border-left: 4px solid var(--marigold);
  border-radius: var(--radius);
  background: var(--surface);
}

.note p:last-child, .note ul:last-child { margin-bottom: 0; }

.note strong { color: var(--gold-ink); }

/* The Marathi summary that sits above the English policy. */
.summary {
  padding: var(--pad);
  padding-bottom: calc(var(--pad) / 2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.summary h2 {
  margin-top: 0;
  font-size: clamp(18px, 4vw, 20px);
}

.summary ul { padding-left: clamp(18px, 4.5vw, 22px); }

.summary li { margin-bottom: 8px; }

/* ------------------------------------------------------------------ toc */

.toc {
  margin: 0 0 10px;
  padding: var(--pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  column-gap: 28px;
}

.toc li { margin-bottom: 6px; }

.toc a {
  color: var(--ink);
  text-decoration: none;
  /* A thumb needs more than a line of 15px text to aim at. */
  display: inline-block;
  padding: 2px 0;
}

.toc a:hover { color: var(--saffron-ink); text-decoration: underline; }

/* --------------------------------------------------------------- footer */

.foot {
  margin-top: clamp(44px, 9vw, 64px);
  padding: 30px 0 clamp(34px, 7vw, 44px);
  border-top: 1px solid var(--border);
  font-size: clamp(13.5px, 3vw, 14px);
  color: var(--ink-soft);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 12px;
}

.foot a {
  color: var(--teal-deep);
  text-decoration: none;
  padding: 4px 0;
}

.foot a:hover { text-decoration: underline; }

.back {
  display: inline-block;
  margin-bottom: clamp(18px, 4vw, 24px);
  padding: 4px 0;
  font-size: clamp(14px, 3vw, 15px);
  color: var(--teal-deep);
  text-decoration: none;
}

.back:hover { text-decoration: underline; }

/* The landing page. Set on <body> so every .wrap inside it widens together,
   including the screenshot strip, which lines its first phone up with the
   heading by measuring against exactly this value. */
.home { --measure: 1100px; }

/* ------------------------------------------------------------ hero facts */

/* Three numbers, in Devanagari because the app is. They are claims the app
   can actually keep, so they are worth stating plainly rather than dressing
   up: ten seconds is the add-donation form, five is the report count, and
   zero is both the price and the amount of money the app ever touches. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px clamp(18px, 5vw, 40px);
  margin: clamp(26px, 6vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

/* On a narrow screen these are rows, not columns: three numbers each sitting
   over its own caption took three tall blocks and pushed everything below the
   fold for no gain. Number on the left, caption beside it, three short lines. */
.facts li {
  flex: 1 1 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.facts b {
  display: block;
  font-family: 'Tiro Devanagari Marathi', 'Anek Devanagari', serif;
  font-size: clamp(34px, 8vw, 46px);
  line-height: 1.1;
  color: var(--saffron-ink);
  font-weight: 400;
}

.facts b { flex: none; min-width: 2.4ch; }

.facts span {
  display: block;
  font-size: clamp(13.5px, 3vw, 15px);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- screenshots */

/* A band, so the captures are visibly a different kind of thing from the
   prose above and below them. */
.shots {
  margin: clamp(38px, 8vw, 60px) 0 clamp(30px, 6vw, 44px);
  padding: clamp(30px, 6vw, 46px) 0 clamp(20px, 4vw, 28px);
  background: var(--teal);
  color: #FDF8EF;
}

@media (prefers-color-scheme: dark) {
  .shots { background: #0D3E42; }
}

.shots h2 {
  margin: 0;
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--marigold);
}

.shots .lead {
  margin: 8px 0 clamp(22px, 5vw, 30px);
  font-size: clamp(15px, 2vw, 17px);
  color: #DDEBE9;
}

/* The strip runs the full width of the window while its first phone still
   lines up with the heading above it, so the row reads as continuing off the
   edge rather than as a box that happens to scroll. The padding is the wrap
   gutter on a narrow screen and the wrap's own left margin on a wide one. */
.strip {
  --edge: max(var(--gutter), calc((100% - var(--measure)) / 2));

  display: flex;
  gap: clamp(14px, 3.5vw, 22px);
  margin: 0;
  padding: 4px var(--edge) clamp(14px, 3vw, 20px);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--edge);
  /* A visible track on a trackpad-less machine is noise; the hint below and
     the phone cut off at the edge already say the row scrolls. */
  scrollbar-width: none;
}

.strip::-webkit-scrollbar { display: none; }

.strip > li {
  flex: 0 0 auto;
  width: clamp(210px, 62vw, 250px);
  scroll-snap-align: start;
}

.strip figure { margin: 0; }

/* The capture is the point, so the frame around it is thin and does one job:
   separating a screen full of cream UI from a teal background. */
.phone {
  border: 3px solid var(--marigold);
  border-radius: 20px;
  overflow: hidden;
  background: #FDF8EF;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  line-height: 0;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
}

.strip figcaption {
  margin-top: 14px;
  font-size: clamp(13px, 3vw, 14px);
  line-height: 1.55;
  color: #C9DEDC;
}

.strip figcaption b {
  display: block;
  margin: 7px 0 5px;
  font-size: clamp(16px, 3.6vw, 18px);
  font-weight: 700;
  line-height: 1.35;
  color: #FFFDF8;
}

.kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(233, 161, 59, .17);
  color: var(--marigold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.5;
}

.hint {
  margin: 0;
  padding: 0 max(var(--gutter), calc((100% - var(--measure)) / 2));
  font-size: 13px;
  color: #9FBFBC;
}

/* --------------------------------------------------------------- features */

.feats { padding-top: clamp(6px, 2vw, 14px); }

.feats h2 {
  margin: 0 0 clamp(18px, 4vw, 26px);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--teal-deep);
}

.feats ul {
  display: grid;
  gap: clamp(18px, 4vw, 26px) clamp(20px, 5vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A short marigold rule instead of a bullet: it groups the heading with its
   paragraph without adding another box to a page that already has several. */
.feats li {
  padding-top: 14px;
  border-top: 3px solid var(--marigold);
}

.feats h3 {
  margin: 0 0 5px;
  font-size: clamp(16px, 3.4vw, 17.5px);
  font-weight: 700;
  line-height: 1.4;
}

.feats p {
  margin: 0;
  font-size: clamp(14px, 3vw, 15.5px);
  line-height: 1.62;
  color: var(--ink-soft);
}

/* --------------------------------------------------------- what changes */

/* Three across as soon as three captions fit, which is the shape these were
   written for. Below it they are rows; see .facts above. */
@media (min-width: 560px) {
  .facts li {
    flex: 1 1 0;
    display: block;
  }
  .facts b { min-width: 0; }
  .facts span { margin-top: 4px; }
}

/* Two columns of contents only once there is room for two readable ones. */
@media (min-width: 620px) {
  .toc ol { columns: 2; }
}

/* From here the landing page has more width than one column of text should
   use, so it stops being one column. The hero splits, with the three numbers
   becoming a rail down the side rather than a row that has to stretch. */
@media (min-width: 900px) {
  .home .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(215px, 285px);
    column-gap: clamp(34px, 5vw, 64px);
    align-items: start;
  }

  .home .hero > .stamp,
  .home .hero > h1,
  .home .hero > p { grid-column: 1; }

  /* A grid item is blockified, so the pill stopped being inline-block and
     stretched the full column. This puts it back to its own width. */
  .home .hero > .stamp { justify-self: start; }

  .home .hero > .facts {
    grid-column: 2;
    grid-row: 1 / span 3;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
    margin: 6px 0 0;
    padding-left: clamp(20px, 2.5vw, 28px);
    border-left: 3px solid var(--marigold);
  }

  .home .hero > .facts li { flex: 0 0 auto; }

  /* Six items, so three columns leaves two even rows. auto-fit would have
     given four and left a widowed pair on the second. */
  .feats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A seventeen section document is worth a rail of its own once the screen can
   hold one without squeezing the prose. The contents stay put while the page
   scrolls, which is the whole reason a table of contents is there.

   The order in the markup does not change: the grid places the .toc into the
   first column and everything else into the second, so a narrow screen still
   gets the contents in the flow, exactly where it was. */
@media (min-width: 980px) {
  /* Only a document that has a table of contents. delete-data has none, and
     without this it got the grid anyway: an empty first column pushed the
     whole page off centre under a masthead that is centred on the viewport.
     A browser without :has() simply keeps the single column, which is what
     every width below 980px gets and is not a failure. */
  .doc:has(> .toc) {
    display: grid;
    /* The rail is fluid and the prose track can shrink, so this turns on at
       980px rather than waiting for a width that fits both at their widest.
       1024px is a laptop and a landscape tablet, and leaving it on the narrow
       single column was most of what looked unfinished. */
    grid-template-columns: clamp(184px, 17vw, 246px) minmax(0, 760px);
    column-gap: clamp(36px, 4vw, 56px);
    align-items: start;
    max-width: none;
    width: fit-content;
  }

  .doc:has(> .toc) > * { grid-column: 2; }

  .doc:has(> .toc) > .toc {
    grid-column: 1;
    /* Spanning far more rows than the document has children keeps the rail
       beside all of them; the extra rows are empty and take no height. */
    grid-row: 1 / span 300;
    position: sticky;
    top: 22px;
    margin: 0;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .doc:has(> .toc) > .toc ol { columns: 1; }

  .doc:has(> .toc) > .foot { grid-column: 1 / 3; }
}

/* Past this the page would drift left of centre against the header above it,
   which is centred on the viewport. Cap the measure and let the margins grow
   instead, so the landing page and the documents stay under the same masthead. */
@media (min-width: 1500px) {
  .home { --measure: 1180px; }
}

/* Below this the brand mark and the tagline stop fitting on one line. */
@media (max-width: 400px) {
  .brand { align-items: flex-start; }
  .brand b { line-height: 1.3; }
}

/* Wide screens: the measure is already capped at 760px, so the only thing
   worth giving back is a little air around the document. */
@media (min-width: 1100px) {
  .doc { padding-top: 60px; }
  .hero { padding-top: 68px; }
}

/* Someone will print the privacy policy for their mandal's file. */
@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --ink: #000;
    --ink-soft: #333;
    --border: #bbb;
    --shadow: none;
  }
  body { font-size: 11pt; line-height: 1.55; }
  .top { background: #fff; color: #000; border-bottom: 1px solid #bbb; }
  .torana, .back, .cards, .shots { display: none; }
  .doc h2 { break-after: avoid; }
  .note, .summary, .toc { break-inside: avoid; border: 1px solid #bbb; }
  /* Undo the grid: a printed page has one column and no sticky anything. */
  /* Written to match the specificity of the :has() rules above, because a
     later rule does not beat a more specific one and a printed page must not
     inherit a sticky sidebar. */
  .doc, .doc:has(> .toc) { display: block; width: auto; max-width: none; }
  .doc > .toc, .doc:has(> .toc) > .toc {
    position: static;
    max-height: none;
    overflow: visible;
  }
  a { color: #000; text-decoration: underline; }
  /* A printed page cannot be tapped, so the address has to be on it. */
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}