/* ── mobil: chrome, träffytor, tabeller, offertrader ──────────────────────
 *
 * From a Playwright pass on iPhone 13 (390 × 844), 2026-10-14. Each block names
 * what was measured so the next person can re-measure instead of guessing.
 */

/* ── 1. sticky header: släpp hjälpraden på telefon ─────────────────────────
 * Measured: header 111 px, of which the dark .sg-utility strip was 34 px of a
 * tagline with nothing to tap (its links are already hidden below 920 px by the
 * template). With a 66 px sticky bar at the bottom that was ~21 % of the screen
 * as fixed chrome. Hidden outright — not on scroll — so the header height never
 * changes mid-scroll and the scroll-anchor jitter fixed in 20-commerce.css
 * cannot come back.
 */
@media (max-width: 640px) {
  .sg-masthead .sg-utility,
  .sg-masthead.is-condensed .sg-utility { display: none; }
}

/* ── 2. träffytor ≥ 44 px ──────────────────────────────────────────────────
 * Measured below 44 px: menu button 24 × 24, topic-rail chips 35 px tall,
 * consent buttons 36 px, the summary list's product names 21 px. Hit areas grow
 * through padding and min-height; the visual weight stays where it was.
 */

/* the burger: 24 px icon, 44 px target; the negative margin keeps the icon
   exactly where it sat so the masthead does not grow */
.sg-masthead .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  margin: -10px;
}
.sg-masthead .wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: -4px;
}

/* topic-rail chips: centre the label in a 44 px box */
.sg-topicrail__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
}

/* consent banner (engine mu-plugin markup; only height is touched here) */
#smedja-consent button {
  min-height: 44px;
  box-sizing: border-box;
}

/* "Våra val i korthet": the whole row is the target, not the 21 px name.
   Stretched-link pattern — the name's ::after covers the row, while the buy
   button and the thumbnail link sit above it and keep their own destinations. */
.sg-picks__row { position: relative; }
.sg-picks__name::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sg-picks__buy {
  position: relative;
  z-index: 1;
}
.sg-picks__name:focus-visible { outline: none; }
.sg-picks__name:focus-visible::after {
  outline: 2px solid var(--sg-ink);
  outline-offset: -3px;
}

/* ── 3. tabeller: visa att det går att scrolla ────────────────────────────
 * Measured: every .sg-data table is 576 px (min-width 36rem) inside a 390 px
 * scroller, with nothing telling the reader there are more columns, and 11 px
 * header text. CSS-only scroll shadows: the two `local` covers travel with the
 * content and hide each shadow once that edge is reached; the two `scroll`
 * shadows stay pinned to the scroller's edges. Nothing to compute, no script.
 */
.sg-data {
  background:
    linear-gradient(to right, var(--sg-plate) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--sg-plate) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--sg-ink) 24%, transparent), transparent) left center / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--sg-ink) 24%, transparent), transparent) right center / 1rem 100% no-repeat scroll,
    var(--sg-plate);
  overscroll-behavior-x: contain;
}
.sg-data:focus-visible {
  outline: 2px solid var(--sg-ink);
  outline-offset: 2px;
}
/* nothing in a table below 13 px */
.sg-data table { font-size: 0.8125rem; }
.sg-data thead th { font-size: 0.8125rem; letter-spacing: 0.06em; }
@media (max-width: 640px) {
  .sg-data th,
  .sg-data td { padding: 0.65rem 0.8rem; }
}

/* ── 4. /hemlarm-offert/: leverantörslänkarna som knappar ──────────────────
 * The supplier links were 21 px inline text — the one action the page exists
 * for. Prose markdown cannot carry a class (the compiler runs markdown-it with
 * html: false) and WordPress adds no slug class to <body> here, only a page-id
 * that changes with every reseed. So the page is identified by its canonical
 * URL, which the SEO plugin always prints in <head>.
 *
 * Content contract (content/sv/pages/hemlarm-offert.md, inside a prose block):
 *
 *     ### Verisure
 *
 *     [Begär offert hos Verisure](https://go.adt212.net/…&epi=hemlarm-offert) — **annonslänk**
 *
 * i.e. the paragraph directly after each supplier h3 STARTS with the external
 * offer link (optionally wrapped in **…**), followed by nothing but the ad mark
 * when the supplier pays. Every supplier gets the identical button: paid and
 * unpaid look the same, because order and emphasis are never bought.
 */
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"],
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  width: fit-content;
  min-width: min(100%, 22rem);
  min-height: 48px;
  margin: 0 0 0.35rem;
  padding: 0.75rem 1.1rem;
  font-family: var(--sg-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--sg-plate);
  background: var(--sg-red);
  border: 1px solid var(--sg-red);
  border-radius: var(--sg-r);
  transition: background var(--sg-fast), border-color var(--sg-fast);
}
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"]::after,
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"]::after {
  content: "↗";
  flex: none;
  font-weight: 400;
}
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"]:hover,
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"]:hover {
  background: var(--sg-red-deep);
  border-color: var(--sg-red-deep);
  color: var(--sg-plate);
}
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"]:focus-visible,
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"]:focus-visible {
  outline: 3px solid var(--sg-ink);
  outline-offset: 2px;
}
/* the "— annonslänk" mark that follows reads as a quiet caption under the button */
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p:has(> a:first-child[href^="http"]),
html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p:has(> strong:first-child > a:only-child[href^="http"]) {
  font-family: var(--sg-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--sg-gray);
}
@media (max-width: 640px) {
  html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"],
  html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"] {
    width: 100%;
    min-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > a:first-child[href^="http"],
  html:has(link[rel="canonical"][href$="/hemlarm-offert/"]) .sg-main h3 + p > strong:first-child > a:only-child[href^="http"] { transition: none; }
}