/* ═══════════════════════════════════════════════════════════════════════
   doc.css — the five document pages:
   оферта · политика конфиденциальности · возврат · два «спасибо».

   WHY THIS FILE EXISTS
   These rules lived in an inline <style> block, identical on all five pages.
   The Content-Security-Policy added on 11 Sep 2026 sets `style-src 'self'`,
   which blocks inline <style> outright. From that day the five pages
   rendered with no layout at all: no measure, no padding, text flush to the
   left edge of the viewport. Eight days, including the page a buyer lands on
   immediately after paying.

   The fix is this file, not an 'unsafe-inline' exception. The whole site was
   built to afford a strict CSP (the reasoning is in netlify.toml) and
   loosening it to rescue four layout rules would trade a real security
   property for nothing. Same-origin stylesheets pass `style-src 'self'`.

   BRAND NOTE
   Every colour here is a token from css/styles.css, which took them from
   brandbook-mini.pdf. The cream ground is `--cream: #FEF0E7`, the brandbook's
   own "light ground" — it is the client's named colour, not a default reach
   for warm beige.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── semantic tokens ─────────────────────────────────────────────────────
   Named by role, not by colour, so the dark block at the bottom is one
   override instead of forty. */
:root{
  --doc-ground : var(--cream);          /* the page itself            */
  --doc-raised : var(--white);          /* callouts lifted off it     */
  --doc-head   : var(--ink);            /* headings                   */
  --doc-text   : var(--body);           /* running copy               */
  --doc-quiet  : #7A6272;               /* dates, footnotes           */
  --doc-link   : var(--gold-ink);       /* 4.5:1 on cream, checked    */
  --doc-accent : var(--gold);           /* decorative only, never text*/
  --doc-marker : var(--gold-d);         /* list bullets: brand gold is 1.62:1
                                           on cream and vanishes at 7px, so
                                           markers use the darkened gold      */
  --doc-rule   : rgba(76,31,60,.13);
  --doc-lift   : 0 2px 3px rgba(56,21,43,.04), 0 12px 28px rgba(56,21,43,.07);
}

body{
  background : var(--doc-ground);
  color      : var(--doc-text);
}

/* ── the masthead ────────────────────────────────────────────────────────
   Before this, every document opened with a bare "← На главную" floating at
   x=0 with nothing around it, which is what made them read as text files
   rather than as pages belonging to a company. A named owner at the top of a
   legal document is not decoration; it is the first thing a cautious reader
   looks for. */
.dochead{
  border-bottom : 1px solid var(--doc-rule);
  background    : color-mix(in srgb, var(--doc-raised) 55%, transparent);
}
.dochead__in{
  max-width   : 74ch;
  margin      : 0 auto;
  padding     : 14px 24px;
  display     : flex;
  align-items : center;
  gap         : 11px;
}
.dochead__brand{
  display        : inline-flex;
  align-items    : center;
  gap            : 11px;
  text-decoration: none;
  color          : var(--doc-head);
  font-weight    : 700;
  font-size      : 15px;
  letter-spacing : -.005em;
  border-radius  : 8px;
}
.dochead__brand img{ width:30px; height:30px; border-radius:8px; flex:none }
.dochead__brand:hover span{ text-decoration:underline; text-underline-offset:3px }

/* ── the measure ─────────────────────────────────────────────────────────
   68ch, not a pixel width. Cyrillic runs wider per character than Latin, so
   a fixed 760px gives a longer line here than the same number would in
   English. Character-based measure is correct in both. */
.doc{
  max-width : 68ch;
  margin    : 0 auto;
  padding   : 52px 24px 96px;
}

/* Back link. A quiet affordance, not a button competing with the content. */
.doc .back{
  display        : inline-flex;
  align-items    : center;
  gap            : 6px;
  margin         : 0 0 30px;
  font-size      : 14px;
  font-weight    : 600;
  color          : var(--doc-quiet);
  text-decoration: none;
  border-radius  : 8px;
}
.doc .back:hover{ color:var(--doc-link) }

/* ── headings ────────────────────────────────────────────────────────────
   Playfair carries the title, Raleway carries the structure. The serif is
   the page's voice and appears once; the sans is what a reader's eye runs
   down when they are scanning for one answer ("can I get my money back?").
   Legal copy is skimmed before it is read, and sans subheads skim better. */
.doc h1{
  font-family   : var(--serif);
  font-size     : clamp(30px, 4.6vw, 45px);
  line-height   : 1.12;
  letter-spacing: -.018em;
  color         : var(--doc-head);
  margin        : 0 0 12px;
  text-wrap     : balance;
}

.doc h2{
  font-family   : var(--sans);
  font-size     : clamp(17px, 2vw, 19px);
  font-weight   : 700;
  line-height   : 1.35;
  letter-spacing: -.008em;
  color         : var(--doc-head);
  margin        : 46px 0 12px;
  text-wrap     : balance;
}
.doc h2:first-of-type{ margin-top:38px }

/* ── running copy ────────────────────────────────────────────────────────*/
.doc p,
.doc li{
  font-size  : 16.5px;
  line-height: 1.72;
  color      : var(--doc-text);
}
.doc p{ margin:0 0 1.05em }
.doc b,
.doc strong{ color:var(--doc-head); font-weight:700 }

/* Lists: a real hanging marker in the accent, so items read as items.
   Browser default discs were being suppressed by `ul{list-style:none}` in
   styles.css, which is why every list arrived as an undifferentiated block. */
.doc ul{
  display    : grid;
  gap        : 9px;
  margin     : 0 0 1.15em;
  padding    : 0;
  list-style : none;
}
.doc ul li{ position:relative; padding-left:22px }
.doc ul li::before{
  content   : "";
  position  : absolute;
  left      : 2px;
  top       : .72em;
  width     : 7px;
  height    : 7px;
  border-radius : 50%;
  background: var(--doc-marker);
}

/* ── .upd ────────────────────────────────────────────────────────────────
   One class doing three jobs across the five pages: the "Обновлено …" date,
   the sentence under the title, and the closing note. Rather than touch nine
   places in the markup, position decides the treatment. Sibling selectors,
   no new classes, no risk to the copy. */
.doc .upd{
  font-size  : 14px;
  line-height: 1.6;
  color      : var(--doc-quiet);
}
/* directly under the title: it is a subtitle, so give it room and size */
.doc h1 + .upd{
  font-size    : 16px;
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--doc-rule);
}
/* last thing on the page: a closing note, set apart and quiet */
.doc .upd:last-child{
  margin-top : 40px;
  padding-top: 22px;
  border-top : 1px solid var(--doc-rule);
}

/* ── callout ─────────────────────────────────────────────────────────────
   The old rule filled this with --cream on a white page: a cream box on a
   cream-adjacent ground is invisible, which is the opposite of a callout.
   Inverted — the page is cream, the callout is raised white with a gold
   rule and a tinted shadow, so it actually lifts. */
.doc .box{
  background   : var(--doc-raised);
  border-left  : 3px solid var(--doc-accent);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow   : var(--doc-lift);
  padding      : 20px 22px;
  margin       : 26px 0 30px;
}
.doc .box p:last-child{ margin-bottom:0 }

/* ── links ───────────────────────────────────────────────────────────────
   --gold-ink is the darkened brand gold that clears 4.5:1 on cream; the
   brand gold itself is 1.62:1 and is decorative only. The underline sits
   clear of Cyrillic descenders (у, р, ф) at 3px. */
.doc a{
  color                   : var(--doc-link);
  font-weight             : 600;
  text-decoration         : underline;
  text-decoration-thickness: 1px;
  text-underline-offset   : 3px;
  border-radius           : 3px;
}
.doc a:hover{ text-decoration-thickness:2px }

/* ── the requisites block ────────────────────────────────────────────────
   Every page ends with "Реквизиты" as an h2, which gave the company address
   the same weight as "Как вернуть деньги". It is reference material, so it
   is demoted: smaller, quieter, visually parked at the foot. */
.doc h2:last-of-type{
  font-size  : 13px;
  font-weight: 700;
  text-transform : uppercase;
  letter-spacing : .1em;
  color      : var(--doc-quiet);
  margin-top : 54px;
  padding-top: 26px;
  border-top : 1px solid var(--doc-rule);
}
.doc h2:last-of-type + p{
  font-size  : 14.5px;
  line-height: 1.66;
  color      : var(--doc-quiet);
}
.doc h2:last-of-type + p b{ color:var(--doc-text) }

/* ── focus ───────────────────────────────────────────────────────────────
   styles.css already sets a 3px gold ring. Keeping it, adding offset so it
   clears the underline on inline links. */
.doc a:focus-visible,
.dochead__brand:focus-visible{ outline-offset:4px }

/* ── small screens ───────────────────────────────────────────────────────*/
@media (max-width:640px){
  .doc{ padding:36px 20px 72px }
  .dochead__in{ padding:12px 20px }
  .doc h2{ margin-top:38px }
  .doc .box{ padding:17px 18px; margin:22px 0 26px }
}

/* ── dark ────────────────────────────────────────────────────────────────
   Why these pages get a dark mode and the rest of the site does not, yet:
   the site declares no colour-scheme at all, so Chrome's force-dark setting
   invents one by inverting the page. That is how a buyer reported this page
   looking. Declaring a real dark mode takes the decision back from the
   browser. The tokens are the ones already in styles.css.

   index.html still has no dark mode. Until it does, a visitor on a
   dark-forced browser sees a browser-inverted home page and a designed
   document page. That is a known, deliberate inconsistency, and the fix is
   to give the home page the same treatment. */
@media (prefers-color-scheme: dark){
  :root{
    --doc-ground : var(--bg);          /* #230F1B */
    --doc-raised : var(--panel);       /* #2C1726 */
    --doc-head   : var(--txt);         /* #F4EAE6 */
    --doc-text   : rgba(244,234,230,.86);
    --doc-quiet  : rgba(244,234,230,.60);
    --doc-link   : var(--gold-lt);     /* #F1D087 — the dark-ground gold  */
    --doc-accent : var(--gold);
    --doc-marker : var(--gold);
    --doc-rule   : rgba(255,255,255,.13);
    --doc-lift   : 0 2px 3px rgba(0,0,0,.28), 0 14px 32px rgba(0,0,0,.34);
  }
  .doc .box{ border-left-color:var(--gold) }
}

/* ── print ───────────────────────────────────────────────────────────────
   People save and print an offer and a refund policy — it is the one kind
   of web page that still gets filed. Force the light palette, drop the
   masthead chrome, and print the destination of every link so the paper
   copy is self-contained. */
@media print{
  :root{
    --doc-ground:#fff; --doc-raised:#fff; --doc-head:#000;
    --doc-text:#1a1a1a; --doc-quiet:#444; --doc-link:#000;
    --doc-rule:#bbb; --doc-lift:none;
  }
  .dochead, .doc .back{ display:none }
  .doc{ max-width:none; padding:0 }
  .doc .box{ border:1px solid #999; border-left-width:3px; box-shadow:none }
  .doc a[href^="http"]::after,
  .doc a[href^="mailto"]::after{ content:" (" attr(href) ")"; font-weight:400; font-size:.85em }
}