/* backend/src/main/resources/static/modules_styles/starter_standard/base.css */

/* ==============================================
   BASE STYLES — starter-standard

   Foundational styles using contract variables.
   gabion-reset.css handles the minimal reset;
   this file adds starter-specific defaults.
   ============================================== */

/* ==============================================
   ROOT
   ============================================== */

/* Without this the page axis jumps sideways the moment a scrollbar
   appears — visible on anything centered, fatal to a background grid. */
html {
  scrollbar-gutter: stable;
}

/* ==============================================
   MAIN CONTENT AREA
   ============================================== */

/* The header is fixed at every width, so the main area starts below it at
   every width. The header height token is the upper bound of the header
   on all screens (the compact mobile header is shorter), and it is the
   same value the framework reserves for anchor scrolling on the root. A
   smaller offset on narrow screens hid the first line of every page under
   the header — invisible to readers, while machines still read it. */
main {
  position: relative;
  padding-top: var(--gb-header-height);
  width: 100%;
}

/* ==============================================
   HEADINGS
   ============================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--gb-text-heading);
  font-weight: var(--gb-font-weight-bold);
}

/* The three dressed levels take the heading face and the weight that
   face is a heading at — a pair the theme declares together. h4–h6
   stay in the text face in bold: at the body size a regular-weight
   display face would not read as a heading at all. */
h1,
h2,
h3 {
  font-family: var(--gb-font-heading);
  font-weight: var(--gb-font-heading-weight);
}

/* Element defaults map the three heading levels onto the three heading
   roles. A module that needs a different role on a heading element
   (a card title as h2 in the outline, set in the third-level role)
   restyles the element in its own file — the outline level and the
   type role are different axes. h4–h6 keep the body size: they are
   structural levels the starter does not dress. */
h1 {
  font-size: var(--gb-type-heading-1-size);
  line-height: var(--gb-type-heading-1-leading);
  letter-spacing: var(--gb-type-heading-1-tracking);
}

h2 {
  font-size: var(--gb-type-heading-2-size);
  line-height: var(--gb-type-heading-2-leading);
  letter-spacing: var(--gb-type-heading-2-tracking);
}

h3 {
  font-size: var(--gb-type-heading-3-size);
  line-height: var(--gb-type-heading-3-leading);
  letter-spacing: var(--gb-type-heading-3-tracking);
}

h4,
h5,
h6 {
  font-size: var(--gb-type-body-size);
  line-height: var(--gb-type-body-leading);
  letter-spacing: var(--gb-type-body-tracking);
}

/* ==============================================
   MONOSPACE
   ============================================== */

/* The monospace face is a required theme token, so binding it to the
   elements that exist for monospace text is the starter's job, exactly
   as the heading roles are bound to h1–h3 above. Without this rule the
   browser default (Courier or its metric clone) renders here while the
   page still looks "designed" — the substitution is invisible to the eye
   and to every checker. Size is left alone: the monospace face pairs
   with the primary at the same x-height, and an optical correction
   would be a hardcoded size. */
code,
kbd,
samp,
pre {
  font-family: var(--gb-font-mono);
}

/* ==============================================
   LINKS
   ============================================== */

a {
  color: var(--gb-accent-primary);
  text-decoration: none;
  transition: color var(--gb-transition-fast);
}

/* The hover color weighs exactly as much as the resting color above —
   :where() adds nothing to the selector. A component that gives a link
   its own color with a single class (a button's label) therefore keeps
   that color under the pointer too. Written as plain a:hover, this rule
   outweighed every single-class color: the label of a link styled as a
   primary button took the accent hover color on a surface of nearly the
   same color and disappeared. */
a:where(:hover) {
  color: var(--gb-accent-hover);
}

/* A link inside running text must be told apart from the words around
   it by more than color (WCAG 1.4.1): a reader who cannot see the hue
   difference sees no link at all, and an accent close in lightness to
   the text color — a warm brand accent on brown text — falls under the
   3:1 the color-only route needs. Prose links carry no class; links with
   a class (navigation, buttons, cards) are styled by their component.

   The line runs a quarter of an em under the baseline — below the tails
   of g, p and y. Any closer and it crosses them, the browser cuts the
   line around each tail, and a word that ends in one ("Pricing") looks
   underlined only part of the way. */
:where(p, li, dd, blockquote) a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ==============================================
   SELECTION
   ============================================== */

::selection {
  background: var(--gb-accent-subtle);
  color: inherit;
}

/* ==============================================
   ACCESSIBILITY — SKIP LINK
   ============================================== */

.skip-to-main {
  position: absolute;
  top: -100%;
  left: var(--gb-spacing-md);
  background: var(--gb-accent-primary);
  color: var(--gb-text-on-accent);
  padding: var(--gb-spacing-sm) var(--gb-spacing-md);
  border-radius: var(--gb-radius-md);
  text-decoration: none;
  z-index: 100000;
  font-size: var(--gb-type-secondary-size);
  font-weight: var(--gb-font-weight-medium);
}

.skip-to-main:focus {
  top: var(--gb-spacing-sm);
}