/* lampeguide.no — site design layer over kronika (ADR-034 rung 2).
 * Tokens only; no literal colours. See docs/page-template.md for why each rule exists. */

/* 1. Hero byline: the engine prints Swedish "Av …" / "Uppdaterad 2026-10-19" (no fi locale).
 *    `updated` must stay set for dateModified, so the line is hidden and pages carry the Finnish
 *    "Lampeguide Redaksjon · Oppdatert D.M.YYYY" line in the summary prose instead. */
.kr-hero .kr-byline {
  display: none;
}

/* 2. Mobile: the quick box already precedes the hero photo in the DOM. Tighten the hero so the
 *    first shop button lands inside a 390 × 844 first screen.
 *    Lever "Decision first": on hubs and brand pages (H1 ~70 chars, dek 170–270 chars, quick
 *    text ~50 words) the q1 button sat ~780–800 px down, below the fold. The dek is an intro,
 *    not the answer, so on phones it is shown after the quick box (visual order only; the DOM,
 *    reading order and focus order are unchanged — the dek holds no links). */
@media (max-width: 600px) {
  .kr-band--hero {
    padding-top: calc(var(--kr-section-y) * 0.45);
  }
  .kr-band--hero:has(.kr-quick) .kr-hero {
    gap: 0.6rem;
  }
  .kr-band--hero:has(.kr-quick) .kr-hero__title {
    font-size: clamp(1.75rem, 7.4vw, 2.2rem);
    line-height: 1.1;
  }
  .kr-band--hero:has(.kr-quick) .kr-hero__dek {
    order: 1;
    font-size: 1rem;
    line-height: 1.45;
    margin-block: 0.25rem 0;
  }
  .kr-band--hero:has(.kr-quick) .kr-quick {
    margin-block-start: 0.35rem;
    padding: 0.85rem 0.9rem;
  }
  .kr-band--hero:has(.kr-quick) .kr-hero__media {
    margin-top: 1.2rem;
  }
}

/* 3. Ad-link labels (KKV: marking in the immediate context of the link). Interim until the
 *    engine renders a real text label (platform request). Never select on rel: the engine adds
 *    "sponsored" to every external link in sections, including Tukes citations. Links to shops with no
 *    affiliate programme (PO D10) are plain links and must never carry the label. Hobbyhall earns
 *    since D25 (26.10.2026), so hobbyhall.fi links do carry it. */
a[data-merchant]::after,
.kr-quick__actions a[target="_blank"]::after,
.kr-band--prose a[href*="/t/t?a="]::after,
.kr-band--prose a[href*="clk.tradedoubler.com/click"]::after,
.kr-band--prose a[href*="awin1.com/cread.php"]::after,
.kr-band--prose a[href*="lampegiganten.no/"]::after,
.kr-band--prose a[href*="tilbords.no/"]::after,
.kr-band--prose a[href*="lampemesteren.no/"]::after {
  content: "Annonselenke";
  display: inline-block;
  margin-inline-start: 0.45em;
  padding: 0 0.3em;
  font-family: var(--kr-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: 0.1em;
  border: 1px solid currentColor;
  opacity: 0.75;
}

/* 4. Comparison tables in prose (kronika ships no table styling). */
.kr-band--prose .wp-block-table {
  margin: 1.4rem 0;
  overflow-x: auto;
}
.kr-band--prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.45;
}
.kr-band--prose .wp-block-table th {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--kr-grafit);
  border-bottom: 2px solid var(--kr-ink);
  padding: 0.5rem 0.6rem 0.5rem 0;
}
.kr-band--prose .wp-block-table td {
  vertical-align: top;
  border-bottom: var(--kr-rule);
  padding: 0.65rem 0.6rem 0.65rem 0;
}
.kr-band--prose .wp-block-table td:first-child {
  font-weight: 600;
}

/* 4b. ≤ 600 px: rows stack as cards, so a 3-column table never scrolls sideways. Cells must be
 *     self-describing (see docs/page-template.md: "Paras: …" in column 3). */
@media (max-width: 600px) {
  .kr-band--prose .wp-block-table {
    overflow-x: visible;
  }
  .kr-band--prose .wp-block-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .kr-band--prose .wp-block-table table,
  .kr-band--prose .wp-block-table tbody,
  .kr-band--prose .wp-block-table tr,
  .kr-band--prose .wp-block-table td {
    display: block;
    width: 100%;
  }
  .kr-band--prose .wp-block-table tr {
    border: var(--kr-rule);
    border-left: 3px solid var(--kr-ink);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.75rem;
    background: var(--kr-panel);
  }
  .kr-band--prose .wp-block-table td {
    border: 0;
    padding: 0.15rem 0;
  }
  .kr-band--prose .wp-block-table td:first-child {
    font-size: 1.02rem;
    padding-bottom: 0.3rem;
  }
  /* Lever "Mobile" (tap targets ≥ 44 px): the t1–t6 shop links were ~20 px tall text links. */
  .kr-band--prose .wp-block-table td a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    vertical-align: middle;
  }
}

/* 5. Lever "Mobile" (sticky bar): the bar is hidden from first paint on any page with a quick
 *    box and appears only when js/10-lampeguide.js adds .lp-sticky-show (quick box out of view).
 *    Before, the bar was visible until the deferred script ran, so a slow first screen showed
 *    two identical buttons and then slid one away. Pages without a quick box keep the engine
 *    default. Its button gets the 44 px target (engine: 40 px). */
@media (max-width: 640px) {
  body:has(.kr-quick):not(.lp-sticky-show) .kr-stickycta {
    transform: translateY(115%);
    visibility: hidden;
  }
  .kr-stickycta {
    transition: transform 0.2s var(--kr-ease), visibility 0.2s;
  }
  .kr-stickycta__btn {
    min-block-size: 2.75rem;
  }
  /* Long shop labels plus the Annonselenke chip ("Se pris hos – Nordic Nest") overflowed the engine's
   * nowrap button and squeezed the product name to zero width. Let the button wrap and cap it. */
  .kr-stickycta__meta {
    min-width: 6.5rem;
  }
  .kr-stickycta__btn {
    flex: 0 1 auto;
    max-width: 62%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.3rem;
  }
  /* The ad chip drops under the label instead of squeezing it into three lines. */
  .kr-stickycta__btn::after {
    margin: 0 auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kr-stickycta {
    transition: none;
  }
}

/* 6. Footer legal line. */
.lp-footer__legal {
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--kr-grafit);
  margin: 0;
}

/* 7. Lever "One dominant CTA" + "Mobile": the card buy link (r1–rN) was a 13 px mono text link,
 *    ~20 px tall, styled unlike every other shop button. It now uses the one ink button look
 *    (same as q1, review and sticky), ≥ 44 px, full width on phones. One link per card, so no
 *    competing buttons. Selects on data-merchant, which every card buy link carries (PO D2). */
.kr-roundup__links a[data-merchant] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.45em;
  box-sizing: border-box;
  min-block-size: 2.75rem;
  padding: 0.7em 1.3em;
  color: var(--kr-paper);
  background: var(--kr-ink);
  border-radius: var(--kr-r-sm);
  text-decoration: none;
  transition: background-color 140ms ease;
}
.kr-roundup__links a[data-merchant]:hover {
  color: var(--kr-paper);
  background: var(--kr-pencil);
  text-decoration: none;
}
.kr-roundup__links a[data-merchant]:focus-visible {
  outline: 3px solid var(--kr-ink);
  outline-offset: 3px;
}
.kr-roundup__links a[data-merchant] .kr-arrow {
  margin-left: 0;
}
@media (max-width: 600px) {
  .kr-roundup__links a[data-merchant] {
    inline-size: 100%;
  }
}

/* 8. Card readability (bug fix, not a test): cards carry no image yet (PO D2), but the empty
 *    media cell still took an 11 rem column on desktop and a gap-plus-row on phones. */
.kr-roundup__media:empty {
  display: none;
}
.kr-roundup__row:has(> .kr-roundup__media:empty) {
  grid-template-columns: 2.8rem minmax(0, 1fr);
}
@media (max-width: 760px) {
  .kr-roundup__row:has(> .kr-roundup__media:empty) {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }
}

/* 9. Lever "Anxiety reducers" + WCAG AA: the "Annonselenke · Vi sælger ikke selv – køb direkte
 *    kaupasta" note and the "Lyhyesti" label sit right above q1 in grafit on the quick-box tint
 *    (#6B675E on ≈ #E2E1DB = 4.3 : 1, fails AA). Pencil gives ≈ 7.2 : 1. */
.kr-quick__label,
.kr-quick__note {
  color: var(--kr-pencil);
}

/* 10. Lever "Mobile" (tap targets ≥ 44 px): every engine button (review c1, disclosure jump) and
 *     the 24 × 24 px menu toggles. The open toggle's negative margin keeps the masthead height,
 *     so nothing below it moves. */
.kr-btn {
  min-block-size: 2.75rem;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation__responsive-container-open {
  margin: -10px;
}

/* 11. Mobile header and menu (bug fix + lever "Mobile").
 *  a) The engine's backdrop-filter on .kr-masthead made the masthead the containing block of the
 *     position:fixed overlay, so the open menu was a 136 px strip inside the header, with
 *     right-justified links cut off at the screen edge. The filter is dropped on phones (the bar is
 *     94 % opaque paper anyway).
 *  b) The sticky bar was 141 px (17 % of a 390 × 844 screen): masthead padding + block gap + bar
 *     padding. Now ~64 px.
 *  c) The seasonal header CTA (Jouluvalot, the season's biggest money page) was hidden on phones;
 *     it returns as a compact button next to the menu toggle.
 *  d) The overlay is a full-screen list: 56 px rows, display type, arrows, the 5 category hubs
 *     first, then the guide hubs (menu items 6+, which desktop never shows: its bar fits 5). */
@media (max-width: 600px) {
  .kr-masthead {
    padding-block: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .kr-masthead > .kr-masthead__main {
    margin-block-start: 0;
    padding-block: 0.5rem;
  }
  .kr-wordmark {
    font-size: 1.45rem;
  }
  .kr-masthead__nav {
    gap: 0.6rem;
  }
  .kr-masthead__nav .kr-masthead__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-block-size: 2.75rem;
    box-sizing: border-box;
    padding: 0 0.85em;
    font-size: 0.6875rem;
  }
  [id] {
    scroll-margin-top: 5.5rem;
  }
}
@media (max-width: 359px) {
  .kr-masthead__nav .kr-masthead__cta {
    display: none;
  }
}

/* Desktop and tablet bars show the first 5 items only. */
.kr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) {
  display: none;
}

/* The open overlay. */
.kr-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0;
  background: var(--kr-paper);
  color: var(--kr-ink);
}
.kr-nav .is-menu-open .wp-block-navigation__responsive-close {
  max-width: none;
}
.kr-nav .is-menu-open .wp-block-navigation__responsive-container-close {
  top: 0.6rem;
  right: 1rem;
}
.kr-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 4.25rem 1rem 2rem;
  align-items: stretch;
}
.kr-nav .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.kr-nav .is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: var(--kr-rule);
}
.kr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child {
  border-top: var(--kr-rule-strong);
}
.kr-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-block-size: 3.5rem;
  padding: 0.75rem 0;
  font-family: var(--kr-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.kr-nav .is-menu-open .wp-block-navigation-item__content::after {
  content: "➔";
  font-family: var(--kr-mono);
  font-size: 0.9rem;
  color: var(--kr-grafit);
}
/* Guide hubs (items 6+): a labelled second group in the smaller mono style. */
.kr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6) {
  margin-block-start: 1.6rem;
  border-top: var(--kr-rule-strong);
}
.kr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6)::before {
  content: "Guider";
  display: block;
  margin-block: -2.4rem 1.2rem;
  font-family: var(--kr-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kr-pencil);
}
.kr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) .wp-block-navigation-item__content {
  min-block-size: 3rem;
  font-size: 1.05rem;
}
/* The sticky buy bar (z 60) sat above the open menu. */
html.has-modal-open .kr-stickycta {
  display: none;
}
/* 11e. The toggle belongs at the screen edge: the CTA comes first on phones. The group label
 *      starts the row (WP sets the item's flex alignment from the bar's right justification). */
@media (max-width: 600px) {
  .kr-masthead__nav .kr-masthead__cta {
    order: -1;
  }
}
.kr-nav .is-menu-open .wp-block-navigation-item {
  align-items: stretch;
}
.kr-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(6)::before {
  align-self: flex-start;
  text-align: left;
}

/* 12. Bug fix: horizontal scroll on phones (/jouluvalot/ was 401 px wide at 390).
 *  a) Block 4b stacks table rows as cards with padding + border on a 100 % width row: border-box.
 *  b) A card's price row (price + role tag) was nowrap flex; a long tag ("Design-valinta · Tähti
 *     ikkunaan") pushed the card past the screen edge. */
@media (max-width: 600px) {
  .kr-band--prose .wp-block-table tr,
  .kr-band--prose .wp-block-table td {
    box-sizing: border-box;
  }
  .kr-rail__more {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}
@media (max-width: 760px) {
  .kr-roundup__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .kr-roundup__prices {
    flex-wrap: wrap;
    white-space: normal;
    min-width: 0;
  }
  .kr-roundup__prices .kr-tag {
    white-space: normal;
  }
  .kr-roundup__name {
    overflow-wrap: anywhere;
  }
}

/* 13. Lever "Default choice": the quick box named slot 1 in words only; the cards below show its
 *     photo. js/10-lampeguide.js copies the first roundup card's photo into the quick box as a
 *     thumbnail (the engine's quick box takes no image field). No CLS: on pages whose first card has
 *     a photo, this grid and its reserved cell (::before) exist from first paint; the <img> then
 *     takes the same cell and the pseudo is dropped. Grid rows keep the block layout's spacing (no
 *     child margins collapse here). Phones: the thumb sits beside the q1 button, next to the two
 *     stacked buttons (98 px tall), so the box gets no taller; q1 moves down only if its label
 *     wraps. Not a link: q1 stays the one CTA, so the q1 SubID measures the change cleanly.
 *     No thumb in the sticky bar: at 390 px a 40 px thumb grew it by up to 31 px and pinned the
 *     product name at its 6.5 rem minimum. */
body:has(.kr-band--roundup:not(.kr-band--roundup ~ .kr-band--roundup) .kr-roundup__row:first-child > .kr-roundup__media img) .kr-quick:not(.lp-nothumb) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  grid-template-areas: "label label" "text text" "note note" "act thumb";
  column-gap: 0.75rem;
}
.kr-quick > .kr-quick__label { grid-area: label; }
.kr-quick > .kr-quick__text { grid-area: text; }
.kr-quick > .kr-quick__note { grid-area: note; }
.kr-quick > .kr-quick__actions { grid-area: act; }
body:has(.kr-band--roundup:not(.kr-band--roundup ~ .kr-band--roundup) .kr-roundup__row:first-child > .kr-roundup__media img) .kr-quick:not(.lp-nothumb)::before,
.kr-quick > .lp-thumb {
  content: "";
  grid-area: thumb;
  align-self: start;
  box-sizing: border-box;
  inline-size: 100%;
  aspect-ratio: 1;
  block-size: auto;
}
body:has(.kr-band--roundup:not(.kr-band--roundup ~ .kr-band--roundup) .kr-roundup__row:first-child > .kr-roundup__media img) .kr-quick:not(.lp-nothumb):has(> .lp-thumb)::before {
  content: none;
}
.kr-quick > .lp-thumb {
  padding: 0.2rem;
  object-fit: contain;
  background: var(--kr-paper);
  border: var(--kr-rule);
  border-radius: var(--kr-r-sm);
}
@media (min-width: 601px) {
  body:has(.kr-band--roundup:not(.kr-band--roundup ~ .kr-band--roundup) .kr-roundup__row:first-child > .kr-roundup__media img) .kr-quick:not(.lp-nothumb) {
    grid-template-columns: minmax(0, 1fr) 5.5rem;
    grid-template-areas: "label thumb" "text thumb" "note thumb" "act thumb";
  }
}

/* Consent banner: Godta and Avvis carry equal weight, as Datatilsynet asks. */
.lp-samtykke {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  max-inline-size: 32rem;
  margin-inline: auto;
  z-index: 9999;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--line);
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
}
.lp-samtykke[hidden] { display: none; }
.lp-samtykke p { margin: 0 0 0.75rem; line-height: 1.4; }
.lp-samtykke__knapper { display: flex; gap: 0.5rem; }
.lp-samtykke__knapper button {
  flex: 1;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--surface);
  border: 1px solid transparent;
}

/* Stacked table values name their column (labels set by js/10-lampeguide.js). */
@media (max-width: 600px) {
  .kr-band--prose .wp-block-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
  }
}