/* Base of the public pages (.kl) — landing, about us, catalogue, product page, contact, legal documents, sign-in,
   account panel: the page grid, the reset and the typography of the Rails markup. Linked in the shared <head>
   (app/views/layouts/_head.html.erb), so they reach every layout, but they only apply inside a .kl wrapper (and
   html:has(.kl)). The React apps have none, except around the public-site navbar the designer and the checkout show
   above themselves (layouts/application_spa.html.erb + spa_site_nav.css).
   Every value of the style comes from the design system (docs/styl.md); the kl/ sheets lay the pages out.

   The landing mockup is drawn at 1280px (desktop) and 390px (phone); where it leaves the line height to the browser,
   so does this sheet (line-height: normal on the navbar, the landing and the footer). */

@layer base {
  .kl {
    /* Page grid of the mockup: a 1280px box with 40px gutters on a desktop (content 1200px), 20px on a phone. */
    --page-max: 1280px;
    --gutter: clamp(20px, 3.2vw, 40px);
    /* Height of the navbar while it covers the top of the window: sticky columns stop under it. A desktop bar scrolls
       away with the page (0); the phone bar (max-width 768px) is sticky and 73px tall with its border. */
    --nav-stuck: 0px;

    font-family: var(--font-sans);
    font-weight: var(--weight-regular);
    color: var(--ink);
    background: var(--paper);
    /* No -webkit-font-smoothing: the mockups render with the system's default smoothing — on macOS "antialiased"
       would draw every stroke thinner than they do. */
    line-height: 1.65;
  }
  .kl * { box-sizing: border-box; }

  /* Smooth scrolling after a click on an in-page anchor. scroll-behavior has to sit on the scrolling element (html),
     not on .kl. prefers-reduced-motion is respected. */
  @media (prefers-reduced-motion: no-preference) {
    html:has(.kl) { scroll-behavior: smooth; }
  }
  /* What the browser scrolls to — an anchor's section, or an element focused with the keyboard — stops a little below
     the top of the window. On a phone the sticky navbar covers the top, so the scrollport starts under it (the phone
     section). Only on the Rails layout: above a React application (.spa-site-nav) the application sets its own scroll
     padding. */
  html:has(> body > .kl:not(.spa-site-nav)) { scroll-padding-top: 24px; }

  /* Short pages (sign-in, contact, a small catalogue) on a tall window: the footer sits at the bottom of the window
     instead of ending above an empty strip. Only the Rails layout; on body, so the development banner above .kl
     counts too. */
  body:has(> .kl:not(.spa-site-nav)) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body > .kl:not(.spa-site-nav) { flex: 1 0 auto; display: flex; flex-direction: column; }
  body > .kl:not(.spa-site-nav) > .kl__footer { margin-top: auto; }

  /* Every Rails page lies on the page gradient, painted on the whole .kl wrapper, so the navbar and the footer lie on
     it without a seam; the landing has its own variant. */
  body > .kl:not(.spa-site-nav) { background: var(--atmosphere), var(--paper); }
  body > .kl:has(> .kl__landing) { background: var(--atmosphere-landing), var(--paper); }

  /* Links take their look from their class (ms-link, a button, the navbar…); plain links in running text (no class)
     take the link blue. */
  .kl a { text-decoration: none; }
  .kl a:not([class]) { color: var(--link); transition: color var(--duration-fast) var(--ease-standard); }
  .kl a:not([class]):hover { color: var(--link-hover); }
  .kl img { max-width: 100%; }
  /* A photo of the library is an <img> in a <picture> (ImagesHelper#picture_tag): the wrapper takes no box, so the
     <img> is laid out — absolutely, at 100% of its parent's height — as if it stood alone. */
  .kl picture { display: contents; }
  .kl__wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

  /* ——— Typography ——— */

  /* The section headings of the pages, also in their saved content (Page::Tags, page_components). */
  .kl__h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(var(--heading-xl), 3vw, var(--heading-3xl));
    line-height: 1.12;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 16px;
  }
  .kl__h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: var(--heading-md);
    line-height: 1.25;
    color: var(--ink);
    margin: 30px 0 12px;
  }
  /* The landing's label above a heading („Nowości”), in the link blue — an eyebrow, under the name the pages' saved
     content uses. */
  .kl__kicker {
    margin: 0;
    font-size: var(--text-xs);
    line-height: normal;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--link);
  }
}