/*
 * The MEDiscuss hub (mediscuss.org/). One page, one stylesheet.
 *
 * The look is the article pages' own, so that a reader who moves from the hub
 * into an article does not feel a seam: the Manohara theme's paper, ink and
 * crimson, its two typefaces (Merriweather for names, Noto Sans for the rest)
 * and its top bar. The values are copied from the theme's theme.json and from
 * the live top bar on 5 October 2026. If the theme's colours change, change
 * them here too; nothing links the two.
 *
 * Each tool carries the colour of the site it opens: crimson for the CDSS,
 * teal for Swasthya, indigo for Medha, gold for the books. The colour is the
 * one a reader will land on, which is the only reason it is there. The colours
 * themselves are in config.php, beside the tools.
 *
 * index.php names this file with ?v= and this file's date, so a change here
 * reaches readers without anything else being edited.
 */

@font-face {
  font-family: "Merriweather";
  src: url("fonts/merriweather-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0-00B1, U+00B5, U+00BC-00BE, U+00D7, U+00E0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20B9, U+2122, U+2190-2193, U+2212, U+2264-2265, U+FFFD;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/noto-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0-00B1, U+00B5, U+00BC-00BE, U+00D7, U+00E0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20B9, U+2122, U+2190-2193, U+2212, U+2264-2265, U+FFFD;
}
/* Kannada. A browser fetches these two only when Kannada is on the page. */
@font-face {
  font-family: "Noto Serif Kannada";
  src: url("fonts/noto-serif-kannada-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+25CC, U+A830-A835;
}
@font-face {
  font-family: "Noto Sans Kannada";
  src: url("fonts/noto-sans-kannada.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+25CC, U+A830-A835;
}

:root {
  --paper: #FAF6EC;
  --paper-sunk: #F2ECDC;
  --card: #FFFDF7;
  --ink: #2F261C;
  --ink-soft: #665A4B;
  --rule: #E3D9C2;
  --crimson: #8D1F1A;
  --bar: #8A4130;
  --bar-ink: #F7F7F8;

  --names: "Merriweather", "Noto Serif Kannada", Georgia, serif;
  --text: "Noto Sans", "Noto Sans Kannada", system-ui, sans-serif;

  --gutter: 32px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }

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

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 6px;
  font-weight: 600; box-shadow: 0 2px 10px rgba(47, 38, 28, .25);
}
.skip:focus { top: 8px; }

/* ── the top bar: the article pages' own, with two links ─────────────────── */
.bar { background: var(--bar); color: var(--bar-ink); border-bottom: 1px solid rgba(247, 247, 248, .16); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.brand { display: block; flex: none; border-radius: 6px; }
.brand img { width: auto; height: 40px; }
.bar-nav { display: flex; align-items: center; gap: 4px; }
.bar-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 8px; font-weight: 600; font-size: .9375rem;
}
.bar-nav a:hover { background: rgba(247, 247, 248, .14); }
.bar :focus-visible { outline-color: var(--bar-ink); }

/* ── the notice on the preview at mediscuss.org/hub/, before the hub is the home page ── */
.preview { background: #F6E7C8; color: var(--ink); border-top: 1px solid rgba(247, 247, 248, .16); padding: 9px 0; font-size: .9375rem; }
.preview .wrap { display: block; }

/* ── the name of the site ───────────────────────────────────────────────── */
.intro { border-bottom: 1px solid var(--rule); padding: 38px 0 34px; }
h1 {
  font: 700 clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem)/1.08 var(--names);
  letter-spacing: -.02em; color: var(--crimson);
}
.tagline { margin-top: 10px; font-size: 1.125rem; color: var(--ink-soft); }
.lede { margin-top: 18px; max-width: 40em; font-size: 1.1875rem; line-height: 1.55; }

/* ── the doors: articles on the left, tools and books on the right ─────── */
.doors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 0 56px; padding-top: 40px; }
h2 { font: 700 1.5rem/1.2 var(--names); letter-spacing: -.01em; }

/* Articles: the sections as a ruled list. */
.sections { margin-top: 16px; border-top: 1px solid var(--rule); }
.sections li { border-bottom: 1px solid var(--rule); }
.sections a { display: block; padding: 19px 0 20px; }
.s-name {
  display: block; font: 700 1.5rem/1.25 var(--names); letter-spacing: -.012em; color: var(--crimson);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .22em;
}
.s-what { display: block; margin-top: 5px; color: var(--ink-soft); max-width: 36em; }
.sections a:hover .s-name { text-decoration-color: currentColor; }
.sections a[lang="kn"] .s-name { line-height: 1.5; letter-spacing: 0; }
.sections a[lang="kn"] .s-what { line-height: 1.75; }

/* Tools and books: one panel each, headed by who it is for, in the colour of the site it opens. */
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.tool {
  --tool: var(--crimson);
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
}
/* Each panel is given its colour by index.php, from config.php: style="--tool: #RRGGBB". */
.who { background: var(--tool); color: #fff; padding: 8px 20px 9px; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.tool-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 20px 18px; }
.tool h3 { font: 700 1.3125rem/1.25 var(--names); letter-spacing: -.012em; }
.tool-body > p { font-size: .9375rem; line-height: 1.55; }
/* The name is the link, stretched over the whole panel. */
.tool h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.tool h3 a:focus-visible { outline: none; }
.tool h3 a:focus-visible::after { outline: 3px solid var(--tool); outline-offset: 3px; }
.tool .go, .tool .soon { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: .9375rem; }
.tool .go { color: var(--tool); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.tool:hover .go { text-decoration-color: currentColor; }
.tool:has(a):hover { border-color: var(--tool); }
.tool .soon { color: var(--ink-soft); }

/* The newest articles, in a band of their own beneath the doors. */
.latest { margin-top: 44px; background: var(--paper-sunk); border-radius: 14px; padding: 24px 28px 14px; }
.latest h2 { font-size: 1.25rem; }
.latest ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; margin-top: 8px; }
.latest li { border-bottom: 1px solid var(--rule); }
.latest li:nth-last-child(-n+3) { border-bottom: 0; }
.latest a { display: block; padding: 14px 0 15px; }
.l-title {
  display: block; font: 700 1.0625rem/1.4 var(--names);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
}
.latest a:hover .l-title { text-decoration-color: currentColor; }
.l-title[lang="kn"] { line-height: 1.6; }
.l-meta { display: block; margin-top: 3px; font-size: .875rem; color: var(--ink-soft); }

main { padding-bottom: 64px; }

/* ── the foot ───────────────────────────────────────────────────────────── */
.foot { background: var(--paper-sunk); border-top: 1px solid var(--rule); padding: 30px 0 40px; font-size: .9375rem; }
.foot-in { display: grid; gap: 14px; }
.foot-about { color: var(--ink-soft); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-left: -2px; }
.foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em;
}
.foot-nav a:hover { text-decoration-color: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .s-name, .l-title, .tool .go, .foot-nav a { transition: text-decoration-color .15s; }
  .tool { transition: border-color .15s; }
  .bar-nav a { transition: background-color .15s; }
}

@media (max-width: 960px) {
  .doors { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .latest ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest li:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .latest li:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .intro { padding: 30px 0 28px; }
  .lede { font-size: 1.0625rem; }
  .doors { padding-top: 32px; row-gap: 34px; }
  .s-name { font-size: 1.3125rem; }
  .tools-grid { grid-template-columns: minmax(0, 1fr); }
  .latest { margin-top: 36px; padding: 20px 18px 8px; }
  .latest ol { grid-template-columns: minmax(0, 1fr); }
  .latest li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .latest li:last-child { border-bottom: 0; }
  .bar-nav a { padding: 0 10px; }
  main { padding-bottom: 48px; }
}