/* Lampguiden's legal colophon remains deliberately quieter than the footer copy. */
.kr-footer__legal {
  font-family: var(--kr-mono);
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--kr-paper) 42%, var(--kr-ink));
  margin: 0.9rem 0 0;
}

/* Four link columns instead of kronika's two. Core stacks wp-block-columns only
   below 782px, which leaves the 23% columns painfully narrow on tablets — so
   pair them up in the middle range before core takes over. */
@media (min-width: 782px) and (max-width: 1080px) {
  .kr-footer__cols {
    flex-wrap: wrap !important;
    row-gap: 2.25rem;
  }
  .kr-footer__cols > .wp-block-column {
    flex-basis: 46% !important;
    flex-grow: 1;
  }
}

/* The legal pair in the base row sits inline next to the colophon, and must not
   inherit the vertical rhythm of the column link lists. */
.kr-footer__fine .wp-block-navigation__container {
  gap: 1.4rem;
}
.kr-footer__fine a {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kr-paper) 62%, var(--kr-ink));
}
.kr-footer__fine a:hover {
  color: var(--kr-paper);
}
/* At 2xs these two would land at 41px tall — under the 44px touch minimum. */
.kr-footer__fine .wp-block-navigation-item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width: 600px) {
  .kr-footer__base {
    gap: 0.75rem;
  }
}

/* Progressive-enhancement host for the lumen calculator on /hur-manga-lumen. */
.kr-lumen {
  margin: 1.25rem 0 1.5rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--kr-panel, var(--wp--preset--color--surface));
  border: 1px solid var(--kr-rule, currentColor);
  border-radius: var(--kr-r-sm, 0);
}
.kr-lumen__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.kr-lumen__field {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 0.3rem;
}
.kr-lumen__field > span {
  font-family: var(--kr-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kr-pencil, currentColor);
}
.kr-lumen__room,
.kr-lumen__area {
  font: inherit;
  padding: 0.55rem 0.65rem;
  color: var(--kr-ink, inherit);
  background: var(--kr-paper, var(--wp--preset--color--base));
  border: 1px solid var(--kr-rule, currentColor);
  border-radius: var(--kr-r-sm, 0);
}
.kr-lumen__room:focus-visible,
.kr-lumen__area:focus-visible {
  outline: 2px solid var(--kr-rea, currentColor);
  outline-offset: 1px;
}
.kr-lumen__out {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px var(--kr-rule-style, dotted) var(--kr-rule, currentColor);
  line-height: 1.5;
}
.kr-lumen__out strong {
  color: var(--kr-rea, inherit);
}

/*
 * Mobile navigation: the open overlay was clipping to the header's height.
 *
 * Measured on production 2026-09-10 at 390x844: the open
 * `.wp-block-navigation__responsive-container` computed to 390x117 with
 * `overflow: auto`, while its content measured 390x393. Seven of the nine
 * primary nav items were unreachable — the drawer rendered as a ~120 px strip
 * with the page showing through beneath it, and the right-aligned items ran
 * off the right edge.
 *
 * Mobile is where this site's traffic is, so a nav that only exposes
 * Taklampor and Bordslampor is a conversion problem, not a cosmetic one.
 *
 * Fix: when the container is open, make it a genuine full-viewport drawer and
 * let it scroll. Scoped to `.is-menu-open` so the desktop inline nav, which
 * uses the same class, is untouched.
 */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* dvh accounts for mobile browser chrome; vh is the fallback. */
  height: 100dvh;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  background: var(--kr-paper, var(--wp--preset--color--base, #fff));
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: 5rem 1.5rem 3rem;
  overflow-y: auto;
}

/* Full-width tap targets rather than a right-aligned column that can overflow. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}

/*
 * Tap targets. The first attempt at this lost the cascade: core sets
 * `padding: 0` on .wp-block-navigation-item__content with higher specificity,
 * so `display:block` applied but the padding did not and the anchors measured
 * 15 px tall — spaced apart by the list's gap, but only 15 px actually
 * tappable. Matching core's depth fixes it.
 */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container
  .wp-block-navigation-item
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  /* 15 px line + 2x15.2 px = 45 px, clearing the 44 px touch minimum. */
  padding: 0.95rem 0;
  line-height: 1.4;
}

/* The gap provided the visual rhythm while the anchors stayed small; now the
   padding does it, so the gap would double the spacing. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
}

/*
 * Affiliate CTA tap targets on mobile.
 *
 * Measured 2026-09-10 at 390 px: the "Se pris hos …" links inside
 * `.kr-roundup__links` computed to 13 px text in a 22 px-tall box with no
 * padding — half the 44 px comfortable touch minimum. These are the revenue
 * links, and mobile is where this site's traffic is, so a mis-tap is a lost
 * click-out rather than a cosmetic annoyance.
 *
 * Deliberately NOT turned into buttons. The brand is an editorial guide, not
 * an affiliate farm, and the restrained text link is the house style — the
 * problem is the hit area, not the styling. So: vertical padding only, mobile
 * only, and scoped to the roundup's link row so the same class used in section
 * headings ("Så jobbar vi") is untouched.
 */
@media (max-width: 600px) {
  .kr-roundup__links .kr-mlink {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0;
  }
}

/*
 * Remaining mobile hit areas, expanded WITHOUT moving anything.
 *
 * The roundup CTAs (above) could take real padding because they sit alone on
 * their own row. These cannot: `.kr-mlink` is also the "more" link inside
 * section headings and rails ("Alla guider", "Hela säsongsguiden"), where real
 * padding would push the heading row apart. Measured at 22 px tall.
 *
 * The padding/negative-margin pair grows the touch target to 44 px while the
 * element continues to occupy exactly its original box, so no layout shifts.
 */
@media (max-width: 600px) {
  .kr-mlink:not(.kr-roundup__links .kr-mlink) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 11px;
    margin-block: -11px;
  }

  /* Newsletter submit measured 40 px — four short. The wrapper is
     .kr-news__form, not .kr-newsletter; my first selector matched nothing. */
  .kr-news__form button,
  .kr-news__form input[type="submit"] {
    min-height: 44px;
  }

  /*
   * Footer navigation measured 23 px. Real padding here rather than the
   * padding/negative-margin pair used above: these are stacked in a column, and
   * negative margins would make consecutive 44 px hit areas OVERLAP, so a tap in
   * the seam would land on whichever item happens to be on top. A slightly
   * taller footer is the correct trade.
   */
  footer .wp-block-navigation-item__content {
    display: block;
    padding-block: 0.7rem;
  }
}

/*
 * Affiliate CTA: from plain text link to an actual button.
 *
 * The roundup renders its CTA as `.kr-mlink` — mono, uppercase, ink-coloured,
 * transparent — the same treatment as an ordinary "read more" link. On a
 * product card that is the single action the card exists for, so it should not
 * look identical to navigation.
 *
 * Built from the template's own tokens rather than a new palette: --kr-rea
 * (#D6380F) is the accent the design already reserves for commercial emphasis,
 * --kr-r-sm is 0 because this brand does not round corners, and the mono
 * uppercase type is kept so the button still reads as Lampguiden and not as a
 * generic affiliate badge.
 */
.kr-roundup__links .kr-mlink {
  background: var(--kr-rea, #d6380f);
  color: var(--kr-paper, #fcfcfa);
  border-radius: var(--kr-r-sm, 0);
  padding: 0.8rem 1.15rem;
  text-decoration: none;
  justify-content: center;
  gap: 0.45em;
  box-shadow: 0 1px 0 rgba(22, 21, 18, 0.18);
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

/* Second and later merchants stay quiet so the primary choice is obvious. */
.kr-roundup__links .kr-mlink ~ .kr-mlink {
  background: transparent;
  color: var(--kr-ink, #161512);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kr-ink, #161512) 28%, transparent);
}

.kr-roundup__links .kr-mlink:hover,
.kr-roundup__links .kr-mlink:focus-visible {
  background: color-mix(in srgb, var(--kr-rea, #d6380f) 86%, #000);
  color: var(--kr-paper, #fcfcfa);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px -3px rgba(214, 56, 15, 0.55);
}

.kr-roundup__links .kr-mlink ~ .kr-mlink:hover,
.kr-roundup__links .kr-mlink ~ .kr-mlink:focus-visible {
  background: color-mix(in srgb, var(--kr-ink, #161512) 6%, transparent);
  color: var(--kr-ink, #161512);
  box-shadow: inset 0 0 0 1px var(--kr-ink, #161512);
}

.kr-roundup__links .kr-mlink:focus-visible {
  outline: 2px solid var(--kr-ink, #161512);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kr-roundup__links .kr-mlink { transition: none; }
  .kr-roundup__links .kr-mlink:hover { transform: none; }
}

/* Full-width button on phones — the card is one column there anyway. */
@media (max-width: 600px) {
  .kr-roundup__links { display: flex; flex-direction: column; gap: 0.5rem; }
  .kr-roundup__links .kr-mlink { width: 100%; }
}

/*
 * Decision bullets on the product card (`spec:` in the roundup item).
 * Set as a quiet, scannable list under the description — the persuasion is in
 * the words, so the styling stays out of the way.
 */
.kr-roundup__spec {
  list-style: none;
  margin: 0.6rem 0 0.15rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.kr-roundup__spec li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.45;
  font-size: 0.95em;
}

.kr-roundup__spec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.42em;
  height: 0.42em;
  background: var(--kr-rea, #d6380f);
}

/* Review blocks were the one image context without reserved space. Roundup
   product images get `aspect-ratio: 1/1` from the template and the hero carries
   width/height attributes, but `.kr-review__cols .kr-plate img` had neither — so
   the single largest product image on a buying guide could shift the layout as
   it arrived. These are external retailer images whose intrinsic size we cannot
   know at build time, which is exactly the case `aspect-ratio` exists for.
   Same 1:1 as the roundup so the two read as one family. */
.kr-review__cols .kr-plate img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}