/*
Theme Name: Middelthon
Theme URI: https://middelthon.com
Author: C. Middelthon
Author URI: https://middelthon.com
Description: Blokk-tema for middelthon.com. Bygget på designprinsippene i CM/merkevare/visuell_identitet.md — protokollmargen som bærende grep, Jost* og Inter som lokale variable fonter, palett «Blekk». Ingen eksterne avhengigheter.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: middelthon
Tags: block-theme, full-site-editing, one-column, accessibility-ready
*/

/* ==========================================================================
   Alle farger, skrifter og avstander er definert i theme.json.
   Denne filen inneholder KUN det som ikke kan uttrykkes der:
   protokollmargen, ordmerket og monogrammet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ordmerke og monogram
   -------------------------------------------------------------------------- */

.mid-brandlock {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: inherit;
}

.mid-wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
}

/* Midlertidig monogram — sirkel med CM.
   Erstattes av rekonstruksjonen fra firmabilen når den er ferdigstilt.
   Se CM/merkevare/visuell_identitet.md § Monogram. */
.mid-monogram {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--mid-monogram-size, 2.25rem);
  block-size: var(--mid-monogram-size, 2.25rem);
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: calc(var(--mid-monogram-size, 2.25rem) * 0.36);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   2. Protokollmargen — det bærende grepet
   -------------------------------------------------------------------------- */

/*
  Struktur:
    .mid-rail            rad med marg + innhold
      .mid-rail__label   margen (nummer + metadata)
      .mid-rail__body    innholdet

  Margen er 150 px på desktop og legger seg som horisontal stripe
  over innholdet under 820 px.
*/

.mid-rail {
  display: grid;
  grid-template-columns: var(--wp--custom--rail--width) 1fr;
  border-block-start: 1px solid var(--wp--preset--color--line);
}

.mid-rail:last-of-type {
  border-block-end: 1px solid var(--wp--preset--color--line);
}

.mid-rail__label {
  padding-block: var(--wp--preset--spacing--40);
  padding-inline-end: var(--wp--preset--spacing--30);
  border-inline-end: 1px solid var(--wp--preset--color--line);
}

.mid-rail__body {
  padding-block: var(--wp--preset--spacing--40);
  padding-inline-start: var(--wp--custom--rail--gap);
  min-inline-size: 0;
}

/* Løpenummeret i margen */
.mid-rail__n {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.625rem;
  font-weight: 300;
  color: var(--wp--preset--color--brand);
  line-height: 1;
  margin-block-end: 0.7rem;
  font-variant-numeric: tabular-nums;
}

/* Metadata i margen — sperrede småversaler */
.mid-rail__m {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--wider);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
  margin: 0;
}

/* Etikett i samme språk, brukt utenfor margen */
.mid-cap {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--widest);
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

@media (max-width: 819px) {
  .mid-rail,
  .mid-rail--hero {
    grid-template-columns: 1fr;
  }

  .mid-rail__label {
    padding-block: var(--wp--preset--spacing--20);
    padding-inline-end: 0;
    border-inline-end: none;
    border-block-end: 1px solid var(--wp--preset--color--line);
  }

  .mid-rail__body {
    padding-inline-start: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Topp og bunn
   -------------------------------------------------------------------------- */

.mid-header {
  border-block-end: 1px solid var(--wp--preset--color--line);
}

.mid-footer {
  border-block-start: 1px solid var(--wp--preset--color--line);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
}

.mid-footer a { color: inherit; }

/* Navigasjon — ingen understrek før hover */
.mid-nav a {
  text-decoration: none;
  color: var(--wp--preset--color--muted);
}

.mid-nav a:hover,
.mid-nav .current-menu-item > a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Tilgjengelighet
   -------------------------------------------------------------------------- */

.skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  border-radius: 2px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}