/* ==========================================================================
   Netkravler 2.0
   Global site styles
   ========================================================================== */

/* ==========================================================================
   Custom Properties
   ========================================================================== */

:root {
  --nk-header-height: 5.5rem;
  --nk-focus-ring-width: 2px;
  --nk-focus-ring-offset: 3px;
}

/* ==========================================================================
   Modern baseline / reset

   Keep this deliberately small. WordPress/theme.json owns typography,
   colours and block spacing; this layer only removes browser-dependent
   geometry and inheritance surprises.
   ========================================================================== */

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

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

body {
  margin: 0;
  min-block-size: 100vh;
}

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

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

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

textarea {
  resize: block;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Main
   ========================================================================== */

.site-main {
  min-height: 60vh;
}

/* Landing page */
.site-main--landing {
  min-height: 0;
}

.site-main--landing > * {
  margin-block-start: 0;
}

/* ==========================================================================
   Shared page frame

   All standard editorial pages use one outer alignment grid. Components may
   still choose a narrower reading measure inside this frame. Full-width
   landing sections are intentional exceptions.
   ========================================================================== */

.nk-page-frame {
  width: min(
    calc(100% - (2 * var(--wp--custom--spacing--site-gutter, 1rem))),
    var(--wp--custom--layout--page, 1200px)
  );
  max-width: var(--wp--custom--layout--page, 1200px);
  margin-inline: auto;
}

/* ==========================================================================
   Shared layout rhythm

   Semantic spacing values live in theme.json. Components/pages should use
   these tokens instead of inventing local section margins and paddings.
   ========================================================================== */

.nk-section {
  width: min(
    calc(100% - (2 * var(--wp--custom--spacing--site-gutter, 1rem))),
    var(--wp--custom--layout--section, 1200px)
  );
  margin-inline: auto;
}

.nk-section + .nk-section {
  margin-block-start: var(--wp--custom--spacing--section-gap, clamp(3rem, 5vw, 5rem));
}

.nk-section--padded {
  padding-block: var(--wp--custom--spacing--section-padding-block, clamp(2rem, 3.5vw, 3.5rem));
}

/* ==========================================================================
   Global keyboard focus
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--nk-focus-ring-width) solid var(--wp--preset--color--accent, #f28c28);
  outline-offset: var(--nk-focus-ring-offset);
}

/* Keep anchored headings visible below the persistent header. */
:where(h1, h2, h3, h4, h5, h6, [id]) {
  scroll-margin-block-start: calc(var(--nk-header-height) + 1rem);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Windows High Contrast / forced-colours should retain visible controls. */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}