/* japanordic — rung-2 override CSS (ADR-042).
 *
 * Every rule here restores something the site's forked `app.css` carried and
 * upstream kronika does NOT provide FOR THIS SITE'S MARKUP. Derived by
 * comparing the fork's app.css against `main`'s vendored kronika app.css at
 * `engineCommit 458f83f`, rule by rule (media context + selector + normalized
 * declarations) — not by re-reading the fork's git diff, which is blind to the
 * cases where upstream MOVED a rule onto a selector the fork's theme parts
 * cannot match.
 *
 * Deliberately NOT carried (recorded on SMED-50, session 4):
 *   - the fork's `.kr-faq*` styling. kronika's canonical faq CSS supersedes it;
 *     near-identical look, and the fork's `--kr-rule` computes to the same
 *     border. Upstream's version is strictly better (::marker suppression, the
 *     +/- marker variant, the reduced-motion fold).
 *   - the fork's `.kr-imglink` block — upstream ships it verbatim (SMED-58),
 *     only at a different position in the file.
 *   - the fork's `[id] { scroll-margin-top: 8.5rem }` — upstream ships the same
 *     value (SMED-61); only the comment prose differs.
 */

/* ---------------------------------------------------------------------------
 * 1. Flat-HTML navigation (header).
 * The override `theme-parts/header.html` carries the site's real navigation as
 * flat <a> elements inside `<!-- wp:html -->`, not a `wp:navigation` block, so
 * upstream's `.kr-nav .wp-block-navigation__container { gap: 1.4rem }` never
 * matches and the links run together.
 * ------------------------------------------------------------------------- */
.kr-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * 2. Flat-HTML navigation (FOOTER) — v3 addition.
 * Same class of bug as (1), in the footer, and it was missing from the v1 and
 * v2 packages. The override `theme-parts/footer.html` carries four link columns
 * as `<p class="kr-footer__links">` with bare anchors. kronika's baseline at
 * this site's engine-sync point (9eac1b1) styled that shape directly
 * (`display: grid; gap: .55rem`); upstream has since MOVED the layout onto
 * `.kr-footer__links .wp-block-navigation__container` / `.wp-block-navigation-item`,
 * which this markup has no elements for. Without this rule the anchors reflow
 * inline with no separator ("Vad är japandiJapandimöblerTopplistor…").
 * This does NOT appear in the fork's `git diff 9eac1b1..HEAD` — the fork never
 * touched the rule; upstream moved out from under it.
 * ------------------------------------------------------------------------- */
.kr-footer__links {
  display: grid;
  gap: 0.55rem;
}

/* ---------------------------------------------------------------------------
 * 3. Narrow-desktop nav gap.
 * Companion to (1): the flat nav tightens before it is replaced by the mobile
 * disclosure at 860px, so this rule is live only in the 861–920px window.
 * ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .kr-nav {
    gap: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Row-style section header stacking (the v2 addition).
 * A long "more" link takes the auto column and squeezes the title to 0 width,
 * so the text collides. On narrow screens the title and the link each take a
 * full row. Upstream defines `.kr-section-head--row` only at top level and has
 * no narrow-screen stacking — this is a generic kronika bug and an upstream
 * candidate (tracked on SMED-50).
 * ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .kr-section-head--row {
    grid-template-columns: 1fr;
  }
  .kr-section-head--row .kr-mlink {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---------------------------------------------------------------------------
 * 5. The CSS-only mobile menu (`.kr-mnav`) and its 860px takeover.
 * Upstream kronika has no `.kr-mnav` at all (0 occurrences): its header uses
 * `wp:navigation` with `overlayMenu: "mobile"`, which this site's flat-HTML
 * header part deliberately does not. The disclosure markup lives in
 * `theme-parts/header.html`; these are its styles.
 * ------------------------------------------------------------------------- */
.kr-mnav { display: none; position: relative; }
.kr-mnav__btn {
  cursor: pointer; list-style: none;
  font-family: var(--kr-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--kr-ink);
  padding: 0.6rem 0.2rem 0.6rem 0.75rem; display: flex; align-items: center; gap: 0.45rem;
}
.kr-mnav__btn::-webkit-details-marker { display: none; }
.kr-mnav__btn::after {
  content: "➔"; font-size: 0.7rem; color: var(--kr-ink);
  transform: rotate(90deg); transition: transform 0.15s ease;
}
.kr-mnav[open] .kr-mnav__btn::after { transform: rotate(-90deg); }
.kr-mnav__panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 60;
  min-width: 14rem; display: grid;
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid var(--wp--preset--color--line, #ddd);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  padding: 0.4rem 1rem;
}
.kr-mnav__panel a {
  font-family: var(--kr-mono); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--kr-ink);
  text-decoration: none; padding: 0.8rem 0;
  border-bottom: 1px var(--kr-rule-style) var(--wp--preset--color--line, #ddd);
}
.kr-mnav__panel a:last-child { border-bottom: none; }
.kr-nav a, .kr-mnav__panel a { white-space: nowrap; }
/* The full text nav needs room for four descriptive labels + wordmark + CTA.
   Below ~860px they'd crowd, so the compact Meny disclosure takes over there
   (not only on phones) and the standalone CTA hides — the panel carries it. */
@media (max-width: 860px) {
  .kr-nav { display: none; }
  .kr-masthead__cta { display: none; }
  .kr-mnav { display: block; }
}