/* ════════════════════════════════════════════════════════════════════════
   Base element styling. Bare tags only — no classes, no components.

   This layer's job is to make an unstyled WooCommerce template already obey
   INV-1 (one field), the type voice split and the Hungarian leading floors,
   so that a surface nobody has built yet still renders as Rutriven rather
   than as a browser default.
   ════════════════════════════════════════════════════════════════════════ */

@layer base {

  html {
    /* Anchors and skip links must not land under the sticky mobile bar. */
    scroll-padding-block-start: var(--bar-h);
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* INV-1: the only page background in the entire spine. Every surface
       separates with the shelf rule, never with a second field. */
    background-color: var(--rtv-ground);
    color: var(--rtv-ink);
    font-family: var(--rtv-font-system);
    font-size: var(--t-15);
    font-weight: 400;
    line-height: var(--lh-prose);

    /* Never let the browser fake a weight. Four faces are self-hosted and a
       synthesised bold of Anton is a fifth face nobody approved (§3.2). */
    font-synthesis: none;
  }

  /* Headings are the machine's voice by default. Anton (--rtv-font-voice) is
     rationed to <=1 per viewport and is opted INTO by the two surfaces that
     earn it, never inherited. A product-page <h1> is supplier data and must
     be Gabarito, which is why nothing here sets the voice face. */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--rtv-font-system);
    font-weight: 700;
    line-height: var(--lh-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--t-34); }
  h2 { font-size: var(--t-27); }
  h3 { font-size: var(--t-22); }
  h4 { font-size: var(--t-19); }
  h5 { font-size: var(--t-17); }
  h6 { font-size: var(--t-15); }

  p {
    text-wrap: pretty;
  }

  /* Prose rhythm uses the spacing scale, not a magic margin. */
  p + p,
  ul + p,
  ol + p,
  p + ul,
  p + ol {
    margin-block-start: var(--s-3);
  }

  a {
    color: var(--rtv-link);
    /* A 1px underline at 3px offset, never a bare colour change: colour is
       not permitted to be the only signal (§2.5, §2.6). */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--rtv-green-action-hover);
  }

  /* Prices, quantities and line totals align on a digit grid everywhere
     (§2.2). Setting it on the numeric elements costs nothing and means a
     component that forgets is still correct. */
  data,
  output,
  time {
    font-variant-numeric: tabular-nums;
  }

  strong, b { font-weight: 700; }
  em, i     { font-style: italic; }
  small     { font-size: var(--t-13); }

  hr {
    /* The shelf rule is the store's only divider. Structure, never state. */
    block-size: 0;
    border: 0;
    border-block-start: var(--bw-rule) solid var(--rtv-rule);
    margin: 0;
  }

  ::placeholder {
    /* Only ever an example, never an instruction (§2.6). */
    color: var(--rtv-ink-3);
    opacity: 1;
  }

  ::selection {
    background-color: var(--rtv-green-brand);
    color: var(--rtv-on-brand);
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
  }

  legend {
    padding: 0;
  }

  /* WordPress requires these class names to exist for accessibility; they are
     platform contract, not components. */
  .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .screen-reader-text:focus-within,
  .screen-reader-text:focus {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}