/* =====================================================================
   style.css — the look of every page on paramanas.com

   What this file does, in plain words:
   HTML files say WHAT is on a page (headings, paragraphs, links).
   This one file says HOW it looks: colours, fonts, spacing, and how the
   layout changes on a phone versus a laptop. Every page links to it, so
   changing a colour here changes it everywhere at once.
   ===================================================================== */


/* ---------- 1. Fonts ------------------------------------------------
   The font files live in the /fonts folder of this website, so visitors'
   browsers never contact Google or anyone else to load them.
   "unicode-range" tells the browser which file holds which letters:
   Devanagari (Hindi/Sanskrit) letters come from one file, English from
   another, so a page only downloads what it actually needs. */

@font-face { font-family: "Tiro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/tiro-devanagari-sanskrit-devanagari-400-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Tiro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/tiro-devanagari-sanskrit-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF; }
@font-face { font-family: "Tiro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/tiro-devanagari-sanskrit-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: "Tiro"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/tiro-devanagari-sanskrit-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: "Tiro"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/tiro-devanagari-sanskrit-devanagari-400-italic.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A8E0-A8FF; }

@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/mukta-devanagari-400-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/mukta-devanagari-600-normal.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/mukta-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/mukta-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/mukta-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }


/* ---------- 2. Colours and sizes, defined once ----------------------
   These are named settings ("variables"). The rest of the file refers to
   them by name, e.g. var(--peacock). To change the brand colour, change
   it here only. The palette comes from Krishna's peacock feather. */

:root {
  --paper:   #F1F3EE;   /* page background: a cool, quiet off-white      */
  --ink:     #15262C;   /* main text: a deep blue-green, softer than black */
  --muted:   #4D5F64;   /* secondary text                                 */
  --peacock: #174F57;   /* brand colour: deep peacock teal                */
  --gold:    #D8BA5C;   /* the gold "eye" of the feather, used sparingly  */
  --indigo:  #2C3B6B;   /* links                                          */
  --line:    #C9D2CE;   /* thin dividing lines                            */

  --serif: "Tiro", "Noto Serif Devanagari", Georgia, serif;
  --sans:  "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;

  --measure: 36rem;     /* comfortable reading width for paragraphs       */
}

/* Dark mode: if the visitor's phone or laptop is set to dark mode,
   the same design switches to night colours automatically. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0F1C20;
    --ink:     #E3E9E6;
    --muted:   #A3B2B0;
    --peacock: #174F57;   /* same panel colour as light mode keeps the verse readable */
    --gold:    #DDBF62;
    --indigo:  #A9B8EA;
    --line:    #2A3B40;
  }
}


/* ---------- 3. Basic page setup ------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }   /* sizes include padding: easier layout maths */

html { -webkit-text-size-adjust: 100%; }             /* stops iPhone from enlarging text on rotate */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;          /* 18px: easy to read on phones */
  line-height: 1.6;
}

a { color: var(--indigo); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* A clear outline when someone moves through links with the keyboard (Tab key). */
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* The outer frame: keeps content from touching the screen edges
   (16px on phones) and centred with a maximum width on big screens. */
.wrap { width: 100%; max-width: 68rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2rem; } }

/* "Skip to content" link: invisible until a keyboard user presses Tab.
   It lets screen-reader and keyboard users jump past the menu. */
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem .75rem; z-index: 10; }


/* ---------- 4. Header: name on the left, menu on the right ---------- */

.site-header { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.brand { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); text-decoration: none; line-height: 1.2; }
.brand span { color: var(--muted); font-size: 1.05rem; margin-left: .4rem; }

.site-nav { display: flex; gap: 1.25rem; font-size: 1rem; }
.site-nav a { color: var(--ink); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--peacock); text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); }
}


/* ---------- 5. Home page hero ---------------------------------------
   On phones: everything stacks in one column.
   On laptops (wider than 56rem): two columns, the name and introduction
   on the left, the sample answer card on the right. */

/* Note: only top/bottom padding is set here ("padding-block"), so the
   side padding from .wrap is kept and text never touches the screen edge. */
.hero { padding-block: 3rem 4rem; display: grid; gap: 2.5rem; }
@media (min-width: 56rem) {
  .hero { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 4rem; padding-block: 5rem 6rem; }
}

/* The big name. The meaning of the word is shown underneath as two
   parts, para + manas, like an entry in a dictionary. */
.wordmark { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1; }
.wordmark .latin { display: block; font-size: clamp(3rem, 11vw, 5.25rem); letter-spacing: -0.01em; }
.wordmark .deva  { display: block; font-size: clamp(1.75rem, 6vw, 2.6rem); color: var(--peacock); margin-top: .6rem; }
@media (prefers-color-scheme: dark) { .wordmark .deva { color: var(--gold); } }

.etymology { margin: 1.25rem 0 0; color: var(--muted); font-size: 1.05rem; }
.etymology i { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.15em; }

.lede { max-width: 30rem; font-size: 1.3rem; line-height: 1.5; margin: 1.75rem 0 0; }

.status { margin: 1.5rem 0 0; font-size: 1rem; color: var(--muted); }
.status strong { color: var(--ink); font-weight: 600; }


/* ---------- 6. The sample answer card (the one bold element) --------
   It shows exactly what the app will return: the person's question,
   a short answer, then the verse in three languages. The verse sits on
   a peacock-coloured panel, like a page from a manuscript. */

.answer { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
@media (prefers-color-scheme: dark) { .answer { background: #13242A; } }

.answer .ask { padding: 1.25rem 1.5rem 0; margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; }
.answer .short { padding: .75rem 1.5rem 1.4rem; margin: 0; }

.verse { background: var(--peacock); color: #EEF3EF; padding: 1.6rem 1.5rem 1.4rem; }
.verse .sa { font-family: var(--serif); color: var(--gold); font-size: clamp(1rem, 4.1vw, 1.55rem); line-height: 1.75; margin: 0; }
.verse .sa span { display: block; }                      /* each half-verse on its own line */
.verse .hi { font-family: var(--sans); font-size: 1.1rem; line-height: 1.75; margin: 1.1rem 0 0; }
.verse .en { font-size: 1.05rem; line-height: 1.6; margin: .9rem 0 0; color: #D7E2DE; }
.verse .src { font-size: .9rem; color: #B9CBC6; margin: 1.1rem 0 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.verse .src b { color: var(--gold); font-weight: 600; }

/* Labels that say which language each line is in. Kept small and in
   normal sentence case, so they help without shouting. */
.lang { display: block; font-size: .8rem; color: #A9C0BA; margin-bottom: .1rem; }


/* ---------- 7. Sections below the hero ------------------------------ */

.section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.section h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.2; margin: 0 0 1.5rem; }
.section > .wrap > p { max-width: var(--measure); }

/* "How it works" is a real sequence (ask, then match, then read), so it
   is numbered. On laptops the three steps sit side by side. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  font-family: var(--serif); font-size: 2.25rem; line-height: 1; color: var(--peacock);
  display: block; margin-bottom: .5rem;
}
@media (prefers-color-scheme: dark) { .steps li::before { color: var(--gold); } }
.steps h3, .promises h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .35rem; }
.steps p, .promises p { margin: 0; color: var(--muted); }

/* "Our promises": a simple two-column list on laptops, one column on phones. */
.promises { display: grid; gap: 1.75rem; max-width: 56rem; }
@media (min-width: 48rem) { .promises { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; } }


/* ---------- 8. Plain text pages (About, Privacy, Contact) ----------- */

.page { padding-block: 3rem 4rem; }   /* top/bottom only, keeps the side padding */
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 7vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; }
.page h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.25; margin: 2.5rem 0 .6rem; }
.page p, .page ul { max-width: var(--measure); }
.page li { margin-bottom: .4rem; }
.page .updated { color: var(--muted); font-size: 1rem; margin-top: 0; }
.page .big-link { font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2rem); }


/* ---------- 9. Footer ------------------------------------------------ */

.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; font-size: .95rem; color: var(--muted); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer p { margin: 0; }