/*
 * Base element styles — Hitsi-Äijät redesign
 * Applies design tokens to bare HTML elements (body, headings, links, forms,
 * media). Loads after tokens.css and before components.css. Scoped to
 * element selectors only so it can't outrank future component classes and
 * never needs !important.
 */

/* DOCX 2.2 / 7.5: local self-hosted WOFF2, latin-ext, font-display swap.
   Disabled on purpose: the actual .woff2 files don't exist yet (see
   assets/fonts/README.md), and an active @font-face pointing at a missing
   file makes the browser issue a request that 404s on every page load.
   Uncomment once real, licensed files are added under assets/fonts/ —
   the system fallback stacks in tokens.css (Oswald -> Arial Narrow/Arial,
   Inter -> Arial) are what's actually in effect until then.

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0000-00FF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0000-00FF;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+0000-00FF;
}
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg-page);
  color: var(--color-text-default);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-text-default);
  margin: 0;
}

h1 {
  font-size: var(--text-h1-size-mobile);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
}

h2 {
  font-size: var(--text-h2-size-mobile);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
}

h3 {
  font-size: var(--text-h3-size-mobile);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-h1-size); }
  h2 { font-size: var(--text-h2-size); }
  h3 { font-size: var(--text-h3-size); }
}

p, li, dd {
  max-width: var(--text-reading-max-chars);
}

a {
  color: inherit;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* DOCX 4.5 / 7.3: visible focus ring, never suppressed. industrial-900 was
   picked over the safety-yellow tokens because measured contrast showed
   safety-600 only reaches 2.01:1 on white and 1.84:1 on canvas — well under
   the 3:1 non-text WCAG 2.2 target (1.4.11). industrial-900 clears both by
   a wide margin (18.26:1 / 16.73:1). See .section--dark below for the
   dark-surface override, since industrial-900 disappears against itself. */
:focus-visible {
  outline: var(--border-width-active) solid var(--color-industrial-900);
  outline-offset: 2px;
}

.section--dark :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* Phase B6: real, site-owned .btn links (confirmed via getMatchedCSSRules
   on live staging, not guessed) lose the two rules above to Astra's own
   dynamic CSS. Astra's Customizer output includes a large comma-joined
   selector list ending in a bare `a:focus-visible` alternative — specificity
   (0,1,1): one type selector (a) + one pseudo-class — which sets
   outline-style/-color/-width as three separate longhands:
     outline-style: dotted; outline-color: inherit; outline-width: thin;
   Our own `:focus-visible` above is specificity (0,1,0) (pseudo-class
   only), so it loses on every one of those three longhands whenever the
   focused element is an <a> — confirmed live on "Varaa huolto"
   (assets/css/product.css's service CTA): computed outline was
   `1px dotted rgb(10, 90, 156)`, not our 2px solid industrial-900/accent.
   <button class="btn ..."> elements (the map-load button, form submits)
   were never affected — Astra's selector list has no bare `button`
   alternative — but the two rules below are written class-based, not
   tag-based, so they correctly cover both element types for one
   consistent outline regardless of markup.
   .btn:focus-visible is specificity (0,2,0) — one class (.btn) + one
   pseudo-class — which already beats Astra's (0,1,1) on the class tier
   alone (2 > 1), so no !important is needed, and this only touches
   theme-owned .btn elements, never plain <a> tags sitewide.
   .section--dark .btn:focus-visible mirrors .section--dark :focus-visible
   above at correspondingly higher specificity (0,3,0), so the dark-surface
   accent-color override still correctly wins over the light-surface
   default when a .btn sits inside a dark section (e.g. the Coming Soon
   "Soita meille" CTA), regardless of the two rules' source order. */
.btn:focus-visible {
  outline: var(--border-width-active) solid var(--color-industrial-900);
  outline-offset: 2px;
}

.section--dark .btn:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* DOCX 2.9 / 4.5: motion supports state changes; when reduced motion is
   requested, tokens.css already zeroes the duration variables, so this
   block only removes scroll-triggered movement that isn't duration-based. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 404 (A11Y-10/A11Y-11) ---------- */
/* Sitewide, not conditionally-enqueued: base.css already loads on every
   page and this is the only rule set 404.php needs — a dedicated
   404-only stylesheet + enqueue.php branch would be overhead for three
   rules. Every value below is an existing token; no new color/spacing
   scale introduced. */
.hitsiaijat-404 {
  padding-block: var(--space-9);
}

.hitsiaijat-404__search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-6);
  max-width: 28rem;
}

.hitsiaijat-404__search .field {
  flex: 1 1 auto;
  min-width: 0;
}

/* A11Y-04 — templates/coming-soon.html. Same minimal-additive approach as
 * .hitsiaijat-404 above: this page has no site header/footer chrome (see
 * that file's own comment), so a small min-height keeps the single centred
 * message from looking cramped at the very top of an otherwise-empty
 * viewport, without forcing exact full-viewport centering that could clip
 * content at very short viewport heights. Existing tokens only. */
.hitsiaijat-coming-soon {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-block: var(--space-9);
}

/* Admin login link (inc/coming-soon.php, wp_footer hook) — pinned to the
   viewport corner rather than placed inside the centred CTA cluster, so
   it never visually competes with "Soita meille" (the actual primary
   CTA): a small, compact secondary utility link, not a third same-weight
   button. position: fixed is safe here because this page is a full-page
   takeover with nothing else competing for the corner. Padding restores
   the 44px touch target a plain small link would otherwise miss (DOCX
   5.2 / --touch-target-min) without looking like a filled button. */
.hitsiaijat-coming-soon__admin-link {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding-inline: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-small-line-height);
  color: var(--color-text-on-dark);
  text-decoration: none;
  border: var(--border-width-default) solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-control);
  background: transparent;
}

.hitsiaijat-coming-soon__admin-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  text-decoration: underline;
}

/* Same reasoning as .btn:focus-visible above: a bare `a:focus-visible`
   loses to Astra's own dynamic CSS (specificity (0,1,1) vs our (0,1,0)),
   so this link needs its own class-based focus rule — (0,2,0) — rather
   than relying on the sitewide :focus-visible / .section--dark
   :focus-visible rules above, exactly like every .btn element already
   does on this same dark section. */
.hitsiaijat-coming-soon__admin-link:focus-visible {
  outline: var(--border-width-active) solid var(--color-focus-on-dark);
  outline-offset: 2px;
}