/*
Theme Name: Hej Nyköping
Theme URI: https://github.com/BienHecho/hejnykoping_theme
Author: David
Description: Eget tema för hejnykoping.se som ersätter Divi. Byggt från design-system/hej-nykoping tokens. Snabb, klassisk PHP-mallar, full kontroll.
Version: 0.3.16
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: hejnykoping

Auktoritativa värden kommer från `assets/css/tokens.css`, som är en synkad
ögonblicksbild av `design-system/hej-nykoping/tokens.css`. Redigera aldrig den
direkt — evolva i hejnykoping_design och kopiera om (Copy-Item samma fil).
Regler: mobile-first (bas 375px), semantiska tokens, inga råa hex, inga jQuery/
ikonfonter. Se AGENTS.md + docs/PERFORMANCE.md.
*/

/* ============================================================
   Base — mobile-first
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-foreground);
  background: var(--color-surface-subtle);
  overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  color: var(--color-foreground);
}

:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

/* Skips-länk — synlig vid fokus */
.skip-link {
  position: absolute;
  top: -100px; left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-foreground);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-3); }

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-foreground);
  z-index: 100;
}

section[id], [id] { scroll-margin-top: 84px; }

/* ============================================================
   Header + nav (fixed, transparent → solid marin vid scroll)
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent;
  transition: background var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled { background: var(--color-header-bg-strong); box-shadow: var(--shadow-md); }

/* Inner-sidor: solid header = samma navy som hero-toppen (en sammanhängande yta). */
.site-header.is-solid { background: var(--color-header-bg-strong); box-shadow: var(--shadow-md); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
.nav__brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.nav__brand img { height: 44px; width: auto; transition: height var(--duration-base) var(--ease-out); }
.site-header.is-scrolled .nav__brand img { height: 30px; }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-start: auto;
  border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-md);
  background: transparent; color: var(--color-on-dark); cursor: pointer;
}
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.nav__links {
  display: none;
  flex: 1 1 100%;
  flex-direction: column;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--color-header-bg-strong);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.nav__links.is-open { display: flex; }

.nav__links .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav__links li { margin: 0; }
.nav__links .menu > li + li { border-top: 1px solid var(--color-on-dark-border); }

.nav__links a,
.nav__links .menu a {
  width: 100%;
}

.nav__links .menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-3) var(--space-3);
  color: var(--color-on-dark); text-decoration: none;
  font-weight: var(--weight-medium); font-size: var(--text-lg);
  border-radius: var(--radius-md);
}
.nav__links .menu a:hover { background: var(--color-surface-on-dark-strong); color: var(--color-on-dark); }
.nav__links .menu a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.nav__links .current-menu-item > a,
.nav__links .current_page_item > a { text-decoration: underline; text-underline-offset: 4px; }

/* Mobil-CTA i menypanelen (markerad). Döljs från 640px där desktop-CTA:n tar över. */
.nav__menu-cta { flex: 0 0 auto; width: 100%; margin-top: var(--space-3); justify-content: center; }

/* CTA = sista menyobjekt i nav */
.nav__links .nav__cta,
.nav__links li:last-child > .btn {
  margin-top: var(--space-2);
  justify-content: center;
  white-space: nowrap;
  align-self: center;
  width: 100%;
}

/* ============================================================
   Knappar
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-primary-radius);
  font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base);
  cursor: pointer; text-decoration: none; border: none;
  transition: background var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); width: 100%; }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn--on-dark { background: var(--color-primary); color: var(--color-on-primary); }
.btn--on-dark:hover { background: var(--color-primary-hover); transform: translateY(-1px); }

.btn--ghost-on-dark {
  background: var(--btn-on-dark-bg);
  color: var(--btn-on-dark-text);
  border: 1px solid var(--btn-on-dark-border);
}
.btn--ghost-on-dark:hover { background: var(--btn-on-dark-hover); transform: translateY(-1px); }

.btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border: 1px solid var(--color-border-strong);
}
.btn--ghost:hover { background: var(--btn-ghost-hover); }
.btn--ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ============================================================
   Hem — hero (DS public-patterns äger basen; tema-override nedan)
   ============================================================ */
.hero__accent { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }

/* Sökfält i hero = DS components-search.css. */

/* Integrerad sök: orange knapp inuti fältet (ikon på mobil, ikon+text ≥640px). */
.site-search { position: relative; display: block; }
.site-search__input { padding-right: 3.75rem; }
.site-search__btn { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: var(--radius-full); }
.site-search__btn:hover { transform: translateY(-50%); }
.site-search__btn svg { margin: 0; }
.site-search__btn-text { display: none; }

@media (min-width: 40rem) {
  .site-search__input { padding-right: 7rem; }
  .site-search__btn { width: auto; padding: 0 var(--space-4); }
  .site-search__btn svg { margin-inline-end: var(--space-2); }
  .site-search__btn-text { display: inline; }
}

.cta-band .site-search { margin-bottom: var(--space-6); }

/* Populära kategorier — kompakt rad i hero (DS public-patterns äger basen). */

/* Mobil: visa bara 3 populära branscher; 4–5 från 640px. */
.hero__cats .chip:nth-of-type(n + 4) { display: none; }

@media (min-width: 640px) {
  .hero__cats .chip:nth-of-type(n + 4) { display: inline-flex; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap);
  min-height: 44px;
  padding: var(--chip-padding-y) var(--chip-padding-x);
  margin: 0 var(--space-1) var(--space-2);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.chip:hover { background: var(--chip-bg-hover); color: var(--chip-text); transform: translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* CTA-band — DS public-patterns äger basen; tema-override för dekorativ overlay. */
.cta-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%),
    linear-gradient(135deg, var(--color-cta-bg), var(--color-cta-bg-end));
}

/* CTA-bandets ghost-knapp: tydlig hover med AA-kontrast (orange + mörk text). */
.cta-band .btn--ghost-on-dark:hover,
.cta-band .btn--ghost-on-dark:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ============================================================
   Sektioner (hem) — basen ägs av DS public-patterns.css.
   ============================================================ */

/* Företagskort: se .company-card (backend-kontraktet, docs/LISTING-DATA.md).
   .badge = medlemsmärkning (Plus/Premium) på bl.a. profilsidan. */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--badge-radius);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge--plus { background: var(--color-plus-soft); color: var(--color-plus); }

.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

.blog-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.blog-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.blog-card__thumb { position: relative; aspect-ratio: var(--card-media-aspect); background: var(--color-blog-tint-top); overflow: hidden; }
.blog-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-card__thumb--empty { display: grid; place-items: center; }
.blog-card__thumb--empty svg { width: 2rem; height: 2rem; color: var(--color-foreground-subtle); }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

.blog-card__category {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-link);
  text-decoration: none;
  margin: 0;
}

.blog-card__category:hover { text-decoration: underline; }

.blog-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}
.blog-card__title a { color: var(--color-foreground); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-link); }
.blog-card__title a::after { content: ""; position: absolute; inset: 0; }
.blog-card__title a:focus-visible { outline: none; }
.blog-card__title a:focus-visible::after { outline: 3px solid var(--color-border-focus); outline-offset: -3px; border-radius: var(--card-radius); }
.blog-card__excerpt { font-size: var(--text-sm); color: var(--color-foreground-muted); margin: 0; }
.blog-card__meta { font-size: var(--text-xs); color: var(--color-foreground-meta); margin-top: auto; }

/* ============================================================
   Innehåll
   ============================================================ */
.site-main { min-height: 60vh; }

/* Page-band = .page-hero (DS public-patterns.css). Sökformens placering i page-hero ägs av DS. */

.entry-content {
  padding-block: var(--space-10) var(--space-16);
  background: var(--color-surface-subtle);
}

/* Smal textkolumn (för brödtext-artiklar); sidor som GD-sök får full bredd. */
.entry-content--prose > .container { max-width: var(--container-md); }

/* ============================================================
   Blogglista (index.php)
   Intro + innehåll ligger på sidans vanliga bakgrund
   (--color-surface-subtle via body) — samma på alla sidor.
   ============================================================ */

/* (bloggens gamla ljusa topp är ersatt av .page-hero) */

.breadcrumbs { font-size: var(--text-sm); margin: 0 0 var(--space-8); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-inline-end: var(--space-2); color: var(--color-foreground-subtle); }
.breadcrumbs a { color: var(--color-foreground-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-link); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--color-foreground); }

.page-intro { margin-bottom: var(--space-8); }
.page-intro__eyebrow { font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-link); margin: 0 0 var(--space-2); }
.page-intro__title { color: var(--color-foreground); font-size: clamp(2.1rem, 8vw, var(--text-5xl)); font-weight: var(--weight-bold); margin: 0; }
.page-intro__title .accent { color: var(--color-primary); }
.page-intro__sub { color: var(--color-foreground-muted); font-size: var(--text-lg); line-height: var(--leading-snug); margin: var(--space-3) 0 0; max-width: 44rem; }

/* Ämnesfilter (chips) — ljus variant mot DS chip-tokens */
.filters { display: flex; flex-wrap: wrap; gap: var(--chip-gap); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.filters .chip { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: var(--chip-padding-y) var(--chip-padding-x); border: 1px solid var(--chip-border); border-radius: var(--chip-radius); background: var(--chip-bg); color: var(--chip-text); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.filters .chip:hover { background: var(--chip-bg-hover); }
.filters .chip.is-active { background: var(--chip-bg-active); color: var(--chip-text-active); border-color: var(--chip-border-active); }

/* Paginering */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--pagination-gap); margin-top: var(--space-8); }
.pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: var(--pagination-item-size); min-height: var(--pagination-item-size); padding: 0 var(--space-3); border: 1px solid var(--pagination-border); border-radius: var(--pagination-radius); background: var(--pagination-bg); color: var(--pagination-text); text-decoration: none; font-weight: var(--weight-semibold); }
.pagination__item:hover { background: var(--pagination-hover-bg); }
.pagination__item[aria-current="page"] { background: var(--pagination-active-bg); color: var(--pagination-active-text); border-color: transparent; }
.pagination__item[aria-disabled="true"] { color: var(--pagination-disabled-text); pointer-events: none; }

/* Tomt tillstånd (t.ex. inga inlägg) */
.empty-state { text-align: center; padding: var(--space-12) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.empty-state h2 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.empty-state p { color: var(--color-foreground-muted); margin: 0 0 var(--space-4); }

/* ============================================================
   GeoDirectory — sökresultat (skinn mot DS-tokens)
   Se docs/GD-STYLING.md. Scoped mot .geodir-loop-container.
   ============================================================ */

/* Yttre kortet bär DS-kort-looken; GD:s inre .card-wrapper görs osynlig. */
.geodir-loop-container > .row > .col > .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.geodir-loop-container > .row > .col > .card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.geodir-loop-container > .row > .col > .card > .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.geodir-loop-container > .row > .col > .card > .card:hover {
  transform: none;
}

/* Bildyta */
.geodir-loop-container .card-img-top {
  background: var(--color-blog-tint-top);
}

.geodir-loop-container .card-img-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kropp + titel */
.geodir-loop-container .card-body {
  padding: var(--space-4) var(--space-4) var(--space-2) !important;
}

.geodir-loop-container .geodir-entry-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-1);
}

.geodir-loop-container .geodir-entry-title a {
  color: var(--color-foreground);
  text-decoration: none;
}
.geodir-loop-container .geodir-entry-title a:hover { color: var(--color-link); }

/* Dölj GD:s author-avatar-klump (gravatar-cirkel) som visas när kort saknar bild. */
.geodir-loop-container .card-body > .row.justify-content-center { display: none; }

/* Fot (betyg etc.) */
.geodir-loop-container .card-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4) var(--space-3) !important;
}

.geodir-loop-container .card-footer,
.geodir-loop-container .card-footer p {
  font-size: var(--text-sm);
  color: var(--color-foreground-muted);
}

/* Betygsstjärnor — GD sätter inline-färger; vi tvingar DS-toner.
   FLAGGAT: DS saknar formella stjärn-tokens, använder warning/premium-skalan. */
.geodir-loop-container .gd-rating-foreground { color: var(--color-warning) !important; }
.geodir-loop-container .gd-rating-background { color: var(--color-border-strong) !important; }

/* GD:s "New"-badge (inline röd). Ommappas till DS badge-new (neutral). */
.geodir-loop-container .gd-badge {
  background: var(--badge-new-bg) !important;
  border-color: transparent !important;
  color: var(--badge-new-text) !important;
  border-radius: var(--badge-radius);
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================
   Socialt + nyhetsbrev (Följ oss, blogg/artikel, footer)
   DS: .social-links + .newsletter. Lokala varianter: .ig-feed,
   .newsletter--footer (DSF-040/041, post-rollout).
   ============================================================ */
.social-links { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.social-links .btn { gap: var(--space-2); border-radius: var(--radius-full); }
.social-links svg { width: 20px; height: 20px; flex: 0 0 auto; }

.follow-hub { background: linear-gradient(180deg, var(--color-surface-tint), var(--color-surface-tint-soft)); }
.follow-hub__top { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.follow-hub__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.follow-hub__intro .section__lead { margin-top: 0; margin-bottom: 0; }
.follow-hub__newsletter { display: flex; }
.follow-hub__newsletter .newsletter { width: 100%; }
.follow-hub__feed { margin-top: var(--space-8); }
.follow-hub__feed-label { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-on-tint-muted); }

.ig-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.ig-feed a { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-hover); }
.ig-feed img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-fast) var(--ease-out); }
.ig-feed a:hover img { transform: scale(1.04); }
.ig-feed a:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

.newsletter { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--newsletter-bg); border: 1px solid var(--newsletter-border); border-radius: var(--newsletter-radius); }
.newsletter__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.newsletter__lead { margin: 0; color: var(--color-foreground-muted); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.newsletter__form .input { flex: 1 1 16rem; min-height: var(--input-height); padding: var(--input-padding-y) var(--input-padding-x); border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-text); font: inherit; }
.newsletter__form .input:focus { outline: none; border-color: var(--input-border-hover); box-shadow: var(--input-focus-ring); }
.newsletter__form .input::placeholder { color: var(--input-placeholder); }
.newsletter__form .btn { min-height: var(--input-height); }
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter__status { flex-basis: 100%; margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.newsletter__status--ok { color: var(--color-success-strong); }
.newsletter__status--error { color: var(--color-danger); }

@media (min-width: 48rem) {
  .follow-hub__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
  .ig-feed { grid-template-columns: repeat(4, 1fr); }
}

.newsletter--footer { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }
.footer__newsletter .footer__heading { margin-bottom: var(--space-4); }
.footer__newsletter .footer__heading::after { margin-top: var(--space-1); }
.newsletter--footer .newsletter__title { color: var(--color-on-dark); font-size: var(--text-lg); }
.newsletter--footer .newsletter__form { flex-direction: column; }
.newsletter--footer .newsletter__form .input { flex-basis: auto; width: 100%; background: var(--input-bg); border-color: var(--input-border); color: var(--input-text); }
.newsletter--footer .newsletter__form .input::placeholder { color: var(--input-placeholder); }
.newsletter--footer .newsletter__form .input:focus { border-color: var(--input-border-hover); box-shadow: var(--input-focus-ring); }
.newsletter--footer .newsletter__form .btn { width: 100%; }
.newsletter--footer .newsletter__status--ok { color: var(--color-on-dark-link); }
.newsletter--footer .newsletter__status--error { color: var(--color-on-dark); }

/* Footer: 5 kolumner (varumärke + 3 nav + nyhetsbrev) på bred skärm. */
@media (min-width: 64rem) { .footer__grid { grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr 1.3fr; } }

/* ============================================================
   Footer — nära svart
   ============================================================ */
.site-footer { background: var(--color-footer-bg); color: var(--color-on-dark); padding-block: var(--space-12) var(--space-6); border-top: 3px solid var(--color-primary); }

.footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8) var(--space-6); }

.footer__brand-col { display: flex; flex-direction: column; gap: var(--space-4); }

.site-footer .footer__brand { display: inline-flex; line-height: 0; }
.site-footer .footer__brand img { height: 40px; width: auto; }

.nav__brand img,
.site-footer .footer__brand img { aspect-ratio: 73.51 / 22.68; object-fit: contain; }
.footer__tagline { margin: 0; max-width: 34rem; }

.site-footer p,
.site-footer a { color: var(--color-on-dark-muted); font-size: var(--text-base); line-height: var(--leading-normal); }
.site-footer a:hover { color: var(--color-on-dark); }
.site-footer strong { color: var(--color-on-dark); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-family: var(--font-body); }

.footer__heading { margin: 0 0 var(--space-3); }

/* Orange accentmarkör under kolumnrubrikerna — ger footer varumärkesfärg
   (kolumnrubriken förblir vit för läsbarhet). */
.footer__heading::after { content: ""; display: block; width: 2.25rem; height: 3px; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--color-primary); }

.footer__links { list-style: none; margin: 0; padding: 0; }
.footer__links li { margin: var(--space-2) 0; }
.footer__links a { text-decoration: none; }
.footer__links a:hover { color: var(--color-primary); text-decoration: underline; }

.footer__socials { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--color-on-dark-border); border-radius: var(--radius-full); color: var(--color-on-dark); }
.footer__socials a:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.footer__socials svg { width: 20px; height: 20px; }

.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--color-on-dark-border); font-size: var(--text-sm); }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--color-primary); text-decoration: underline; }

@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* Header: CTA (desktop) + motsvarande post i mobilmenyn */
.nav__cta { display: none; }

.menu-item--cta { display: block; }

@media (min-width: 960px) {
  .nav__cta { display: inline-flex; }
  .menu-item--cta { display: none; }
}

/* ============================================================
   Tablet+ (>= 640px)
   ============================================================ */
@media (min-width: 640px) {
  .btn--primary { width: auto; }
  .blog-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
  .footer__grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-8); }
  .site-footer { padding-block: var(--space-12); }
}

/* ============================================================
   Bredare (>= 960px) — nav-rad i toppen
   ============================================================ */
@media (min-width: 960px) {
  .nav { flex-wrap: nowrap; padding-block: var(--space-4); }
  .nav__brand img { height: 52px; }
  .site-header.is-scrolled .nav__brand img { height: 34px; }
  .nav__toggle { display: none; }

  .nav__links {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row; align-items: center;
    margin-top: 0; margin-inline-start: auto; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav__links .menu { flex-direction: row; align-items: center; gap: var(--space-5); width: auto; }
  .nav__links li { margin: 0; }
  .nav__links .menu > li + li { border-top: 0; }
  .nav__links .menu a { display: inline-flex; width: auto; min-height: 0; padding: var(--space-2) var(--space-1); font-size: var(--text-base); }
  .nav__links .menu a:hover { background: transparent; }
  .nav__menu-cta { display: none; }

  .nav__links .nav__cta,
  .nav__links li:last-child > .btn { margin-top: 0; width: auto; }
}

/* ============================================================
   Företagsprofil (single-gd_place.php) — mobile-first
   ============================================================ */

/* Företagsprofilens toppsektion använder .page-hero (marin band) + .company-head */
.company-head { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.company-head__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.company-head__title { color: var(--color-hero-text); font-size: clamp(1.9rem, 7vw, var(--text-5xl)); font-weight: var(--weight-bold); margin: 0; }
.company-head__meta { color: var(--color-hero-text-muted); margin: var(--space-2) 0 0; }

.company-head__meta a,
.company-head__link { color: var(--color-on-dark-link); text-decoration: underline; text-underline-offset: 3px; }

.company-head__meta a:hover,
.company-head__link:hover { color: var(--color-on-dark-link-hover); }

/* Logo-slott (vit botten även i mörkt läge) */
.logo-slot { flex: 0 0 auto; width: min(46vw, 176px); height: auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-3); background: var(--logo-slot-bg); border: 1px solid var(--logo-slot-border); border-radius: var(--logo-slot-radius); overflow: hidden; }
.logo-slot img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--logo-slot-radius); }

.badge--premium { background: var(--badge-premium-bg); color: var(--badge-premium-text); }

/* Rail-layout: kontakt överst på mobil, sticky höger på desktop */
.rail-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.rail-layout__aside { order: -1; }

.contact-card,
.upsell,
.ad-slot,
.map-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--space-5); }

.contact-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }
.contact-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.contact-actions .btn { width: 100%; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.contact-list svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--color-foreground-muted); }
.contact-card .social-links { margin-bottom: var(--space-5); }
.contact-list a { color: var(--color-foreground); text-decoration: none; }
.contact-list a:hover { color: var(--color-link); text-decoration: underline; }
.contact-list strong { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-foreground-meta); }
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.contact-socials a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-link); font-size: var(--text-sm); text-decoration: none; font-weight: var(--weight-semibold); }
.contact-socials svg { width: 20px; height: 20px; }

/* Sekundära kontaktuppgifter (kollapsbara; öppna på desktop via JS) */
.contact-details { margin-top: var(--space-2); border-top: 1px solid var(--color-border); }
.contact-details__summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-foreground); list-style: none; }
.contact-details__summary::-webkit-details-marker { display: none; }
.contact-details__chevron { margin-inline-start: auto; width: 20px; height: 20px; color: var(--color-foreground-muted); transition: transform var(--duration-fast) var(--ease-out); }
.contact-details[open] .contact-details__chevron { transform: rotate(180deg); }
.contact-details .contact-list { padding-top: var(--space-2); }

/* Kartkort */
.map-card { padding: 0; overflow: hidden; margin-top: var(--space-4); }
.map-card__summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-foreground); list-style: none; }
.map-card__summary::-webkit-details-marker { display: none; }
.map-card__summary > svg { width: 20px; height: 20px; color: var(--color-foreground-muted); }
.map-card__chevron { margin-inline-start: auto; transition: transform var(--duration-fast) var(--ease-out); }
.map-card[open] .map-card__chevron { transform: rotate(180deg); }
.map-card__body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.map-card__canvas { height: 140px; background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--card-radius); display: grid; place-items: center; text-align: center; gap: var(--space-1); color: var(--color-foreground-muted); }
.map-card__canvas svg { width: 28px; height: 28px; }
.map-card__body .btn { width: 100%; }

/* Uppgradera (endast Fri) */
.upsell { margin-top: var(--space-4); border-left: 4px solid var(--color-primary); }
.upsell h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.upsell p { font-size: var(--text-sm); color: var(--color-foreground-muted); margin: 0 0 var(--space-4); }
.upsell .btn { width: 100%; }

/* Annonsplats (Fri) */
.ad-slot { margin-bottom: var(--space-8); min-height: var(--ad-slot-min-height); max-width: 100%; overflow: hidden; background: var(--ad-slot-bg); border-color: var(--ad-slot-border); display: grid; place-items: center; text-align: center; color: var(--color-foreground-muted); font-size: var(--text-sm); }
.ad-slot__label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-foreground-meta); margin-bottom: var(--space-1); }
.ad-slot__ad { width: 100%; display: flex; justify-content: center; align-items: center; }
.ad-slot__ad > * { max-width: 100%; }
.ad-slot__ad .adsbygoogle { width: 100%; }
.gtm-noscript { display: none; visibility: hidden; }

/* Annonsband — tajt, inbäddat (inte ett strukturgap) */
.ad-band { padding-block: var(--space-4); }
.ad-band .ad-slot { margin-bottom: 0; min-height: var(--ad-slot-mobile-banner-h); }

/* Sticky rail: undvik scrollfälla. När railen nått sitt slut ska hjulet
   fortsätta scrolla sidan (DS sätter `overscroll-behavior: contain`). */
@media (min-width: 64rem) {
  .rail-layout__aside--sticky {
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }
}

/* Företagsprofil: visa hela railen — ingen inre scrollbar och ingen sticky-
   klippning när kontaktkortet är längre än sidan. */
@media (min-width: 64rem) {
  body.single-gd_place .rail-layout__aside--sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (min-width: 640px) {
  .ad-band .ad-slot { min-height: var(--ad-slot-leaderboard-h); }
}

/* Rail-annons: luft mot objektet ovanför (annonsen ligger sist i railen). */
.rail-layout__aside > .ad-band,
.rail-layout__aside > .ad-slot { margin-top: var(--space-6); }

.company-block { margin-bottom: var(--space-10); }
.company-block__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-4); }
.company-block__title--flush { margin: 0; }
.company-block__head { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: baseline; justify-content: space-between; margin-bottom: var(--space-6); }

/* Prosa-basen ägs av DS components-prose.css. Tema-tillägg: .prose--wide, .prose__links, .prose .ticket. */

/* Galleri + lightbox + video = DS components-gallery.css. */

/* Logotypen som första galleriobjekt: visa hel, beskär inte. */
.gallery__item--logo img { object-fit: contain; padding: var(--space-4); background: var(--logo-slot-bg); }

/* Omdömen */
.rating { display: inline-flex; align-items: center; gap: var(--space-2); }
.rating svg { width: 20px; height: 20px; color: var(--rating-star-on); }
.rating__count { color: var(--color-foreground-muted); font-size: var(--text-sm); }
.review { display: flex; gap: var(--space-3); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--color-border); }
.review__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-surface-subtle); display: grid; place-items: center; font-weight: var(--weight-bold); color: var(--color-foreground-muted); }
.review__meta { font-size: var(--text-xs); color: var(--color-foreground-meta); margin: 0; }
.review__text { margin: var(--space-1) 0 0; }

@media (min-width: 640px) {
  .company-head { flex-flow: row nowrap; align-items: flex-start; }
  .logo-slot { width: 128px; height: 128px; }
  .contact-actions { flex-direction: row; }
  .contact-actions .btn { width: auto; }

  .upsell .btn,
  .map-card__body .btn { width: auto; }
}

@media (min-width: 64rem) {
  .rail-layout { grid-template-columns: minmax(0, 1fr) var(--rail-width); align-items: start; }

  .rail-layout__aside { order: 0; }
}

/* Page-band = .page-hero (DS public-patterns.css). */
.prose--wide { max-width: none; }

.side-block { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--space-5); margin-bottom: var(--space-5); }
.side-block__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-4); }

/* Områdesfilter — pills utan box */
.list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.list-filter__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground-muted); }

/* .hn-companies (backend-kontrakt) */
.hn-companies__heading h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); margin: 0 0 var(--space-6); }
.hn-companies__list { display: flex; flex-direction: column; gap: var(--space-4); }
.hn-companies__paid { display: flex; flex-direction: column; gap: var(--space-4); }

/* Samma luft mellan Plus/Premium-gruppen och de fria som mellan två fria kort. */
.hn-companies__paid + .hn-companies__free,
.hn-companies__paid + .hn-plus-sales-card + .hn-companies__free,
.hn-companies__paid + .company-card + .hn-companies__free { margin-top: var(--space-4); }
.hn-companies__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.hn-companies__counter { font-size: var(--text-sm); color: var(--color-foreground-muted); }
.hn-companies__load-more { min-height: 44px; padding: var(--loadmore-padding-y) var(--loadmore-padding-x); border: 1.5px solid var(--loadmore-border); border-radius: var(--loadmore-radius); background: var(--loadmore-bg); color: var(--loadmore-text-strong); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.hn-companies__load-more:hover { background: var(--loadmore-hover-bg); }

/* .company-card — immutabelt markup-kontrakt */
.company-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; }
.company-card__layout { display: flex; flex-direction: column; }
.company-card__logo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: var(--card-media-aspect); padding: var(--space-4); background: var(--logo-slot-bg); overflow: hidden; border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; }
.company-card__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--card-radius); }

/* .is-cover är opt-in: backend sätter klassen när bilden faktiskt är ett omslag.
   Logotyper är contain (hela och centrerade) — ingen ratio-baserad klassning. */
.company-card__logo img.is-cover,
.logo-slot img.is-cover,
.recent-card__logo img.is-cover { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }
.company-card__logo--placeholder { width: 100%; height: 100%; background: var(--color-surface-subtle); }
.company-card__content { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.company-card__head { display: flex; align-items: center; gap: var(--space-3); }
.company-card__title { font-size: var(--text-2xl); font-weight: var(--weight-semibold); margin: 0; }
.company-card__title a { color: var(--color-foreground); text-decoration: none; }
.company-card__title a:hover { color: var(--color-link); }
.company-card__badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--badge-radius); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--color-plus-soft); color: var(--color-plus); white-space: nowrap; }
.company-card.is-plus .company-card__badge { background: var(--badge-plus-bg); color: var(--badge-plus-text); }
.company-card.is-premium .company-card__badge { background: var(--badge-premium-strong-bg); color: var(--badge-premium-strong-text); }
.company-card__excerpt { font-size: var(--text-sm); color: var(--color-foreground-muted); margin: 0; }
.company-card__readmore { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.company-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.company-card__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-foreground); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.company-card__btn:hover { background: var(--color-surface-hover); }
.company-card__btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }
.company-card__btn--primary:hover { background: var(--color-primary-hover); }

/* Plus vs fri: smakfull kontrast (fungerar med flera Plus) */
.hn-companies__paid .company-card { border-left: 3px solid var(--color-plus); }
.hn-companies__paid .company-card__logo { background: var(--color-plus-soft); }
.hn-companies__free .company-card__logo img { filter: grayscale(1); }

/* Plus/Premium-logotyper ska alltid vara i färg (även i listvy där backend
   ibland utelämnar is-plus/is-premium). */
.hn-companies__paid .company-card .company-card__logo img,
.company-card.is-plus .company-card__logo img,
.company-card.is-premium .company-card__logo img { filter: none; }

/* A+ fade: grid fadar nedåt, listvy vänster→höger. */
.company-card.is-plus { border: 1px solid var(--color-plus-border); background: linear-gradient(180deg, var(--color-plus-soft) 0%, var(--color-surface) 70%); }
.company-card.is-premium { border: 1px solid var(--color-premium-border); background: linear-gradient(180deg, var(--color-premium-soft) 0%, var(--color-surface) 70%); }

.company-card.is-plus .company-card__logo,
.company-card.is-premium .company-card__logo { background: transparent; }
.company-card:not(.is-plus, .is-premium, .hn-plus-sales-card) .company-card__logo img { filter: grayscale(1); }

/* Grid-vy (.hn-companies__grid / hn-view--grid) */
.hn-companies__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

@media (min-width: 640px) {
  .hn-companies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .hn-cols--2 .hn-companies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-cols--3 .hn-companies__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hn-cols--4 .hn-companies__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Grid-kort sida vid sida: lika höga, och knapparna "sticky" i botten så de linjerar
   även när innehållet skiljer. Knapparna hålls horisontella när de får plats och
   bryts till nästa rad i trånga 4-kolumnslägen (backend ger "Hemsida" / "Ring"). */
.hn-view--grid .company-card { height: 100%; }

/* Den inre layouten måste fylla kortet, annars når inte `margin-top: auto` på
   `.company-card__actions` ända ner till botten och knapparna hamnar på olika nivå. */
.hn-view--grid .company-card__layout { height: 100%; }

.hn-view--grid .company-card:not(.hn-plus-sales-card) .company-card__actions { flex-wrap: wrap; }

.hn-view--grid .company-card:not(.hn-plus-sales-card) .company-card__btn { flex: 1 1 auto; white-space: nowrap; }

/* Uppgraderings-kort (avgränsare) */
.hn-plus-sales-card { margin-block: var(--space-4); background: var(--promo-bg); border: 1px solid var(--promo-border); box-shadow: none; }
.hn-plus-sales-card .company-card__content { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--promo-gap); padding: var(--promo-padding-y) var(--promo-padding-x); }
.hn-plus-sales-card .company-card__head { grid-column: 1; align-items: baseline; }
.hn-plus-sales-card .company-card__excerpt { grid-column: 1; }
.hn-plus-sales-card .company-card__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }

/* FAQ från [service_faq]-shortcoden */
.service-faq h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); margin: var(--space-12) 0 var(--space-4); }

/* FAQ-accordion (designen) */
.accordion { border: 1px solid var(--color-border); border-radius: var(--card-radius); background: var(--color-surface); overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--color-border); }
.accordion__summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-foreground); list-style: none; }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__icon { margin-inline-start: auto; width: 20px; height: 20px; color: var(--color-foreground-muted); transition: transform var(--duration-fast) var(--ease-out); }
.accordion__item[open] .accordion__icon { transform: rotate(180deg); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); color: var(--color-foreground-muted); }

@media (min-width: 640px) {
  .hn-view--list .company-card__layout { flex-direction: row; align-items: stretch; }
  .hn-view--list .company-card__logo { width: 34%; max-width: 260px; flex: 0 0 auto; aspect-ratio: auto; align-self: stretch; border-radius: calc(var(--card-radius) - 1px) 0 0 calc(var(--card-radius) - 1px); }
  .hn-view--list .company-card__logo--placeholder { min-height: 100%; }
  .hn-view--list .company-card.is-plus { background: linear-gradient(90deg, var(--color-plus-soft) 0%, var(--color-surface) 70%); }
  .hn-view--list .company-card.is-premium { background: linear-gradient(90deg, var(--color-premium-soft) 0%, var(--color-surface) 70%); }
}

/* Liggande kort (list-vyn, t.ex. 2-kol-katalogen): lika höga kort och knappraden
   i botten så den linjerar även när texten renderar olika antal rader. */
.hn-view--list .company-card { height: 100%; }
.hn-view--list .company-card__layout { height: 100%; }

/* ============================================================
   Katalogöversikt (/allaforetag/) — kategori-mini-kort + "Vad betyder Plus?".
   ⚠️ Nya komponenter: DS saknar kategori-kort + info/note (docs/DS-FLAGS.md #15–16).
   ============================================================ */

.cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }

@media (min-width: 40rem) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 64rem) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cat-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.cat-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cat-card__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0; }
.cat-card__title a { color: var(--color-foreground); text-decoration: none; }
.cat-card__title a:hover { color: var(--color-link); text-decoration: underline; }
.cat-card__count { font-size: var(--text-sm); color: var(--color-foreground-muted); white-space: nowrap; }
.cat-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cat-card__more { margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.chip--sm { min-height: 44px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

.plus-info { margin: 0 0 var(--space-6); font-size: var(--text-sm); }
.plus-info__summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-foreground); list-style: none; border-radius: var(--radius-md); }
.plus-info__summary::-webkit-details-marker { display: none; }
.plus-info__summary:hover { background: var(--color-surface-hover); }
.plus-info__icon { width: 18px; height: 18px; color: var(--color-plus); flex: 0 0 auto; }
.plus-info__chevron { width: 16px; height: 16px; color: var(--color-foreground-muted); transition: transform var(--duration-fast) var(--ease-out); }
.plus-info[open] .plus-info__chevron { transform: rotate(180deg); }
.plus-info__text { margin: var(--space-2) 0 0; padding: var(--promo-padding-y) var(--promo-padding-x); background: var(--promo-bg); border: 1px solid var(--promo-border); border-radius: var(--promo-radius); line-height: var(--leading-relaxed); color: var(--color-foreground); }
.plus-info__text a { font-weight: var(--weight-semibold); }

/* "Vad betyder Plus?" på mörk yta (katalogens Utvalda-sektion använder .section--dark). */
.section--dark .plus-info__summary { color: var(--color-on-dark); }
.section--dark .plus-info__summary:hover { background: var(--color-surface-on-dark); }
.section--dark .plus-info__icon { color: var(--color-on-dark-link); }
.section--dark .plus-info__chevron { color: var(--color-on-dark-muted); }

/* Liggande Plus-kort i 2 kol — lokal variation, endast katalogsidan (body-klass) */
body.page-allaforetag { background: var(--color-surface-tint); }
body.page-allaforetag .hn-companies__paid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }

@media (min-width: 64rem) {
  body.page-allaforetag .hn-companies__paid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sidmallar: villkors- + innehållssida — lokala layoutvarianter (docs/templates/page-villkor.md, page-content.md). */
.page-villkor { background: var(--color-surface); }
.page-villkor .prose { margin-inline: auto; }
.page-content { background: var(--color-surface); }
.page-content__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Sekundärknapp + länkrad i prosa (katalogens SEO-sektion) */
.btn--secondary { background: var(--color-surface); color: var(--color-foreground); border: 1px solid var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-hover); }
.prose__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }

/* ============================================================
   Tjänsteindex (/tjanster/) — A–Ö-lista: tjänst + antal företag.
   Yt-rytm (variant B): blå bas + navy-200-band + vit lista.
   Basen ägs av DS-token --color-surface-tint.
   ============================================================ */
body.post-type-archive-service { background: var(--color-surface-tint); }

.srv-list { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }

@media (min-width: 40rem) { .srv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }

@media (min-width: 64rem) { .srv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Tjänsteindex: SEO-sektionen i full containerbredd + fullbreddsknappar på mobil. */
.service-index-seo .prose { max-width: none; }
.service-index-seo .prose__links { flex-direction: column; align-items: stretch; }
.service-index-seo .prose__links .btn { width: 100%; }

@media (min-width: 40rem) {
  .service-index-seo .prose__links { flex-direction: row; align-items: center; }
  .service-index-seo .prose__links .btn { width: auto; }
}

.srv-item { border-bottom: 1px solid var(--color-border); }
.srv-item a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-3) var(--space-2); color: var(--color-foreground); text-decoration: none; font-weight: var(--weight-semibold); border-radius: var(--radius-sm); }
.srv-item a:hover { color: var(--color-link); background: var(--color-surface-hover); }
.srv-item__count { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-foreground-muted); white-space: nowrap; }

/* ============================================================
   Artikel (single.php) — redaktionellt innehåll + sticky rail.
   Biljettlänkar som pill = klasskontrakt (docs/PRESERVE.md).
   ============================================================ */
.article__media { margin: 0 0 var(--space-6); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); }

.article__media img { width: 100%; height: auto; aspect-ratio: var(--card-media-aspect); object-fit: cover; }

.article__foot { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.article__foot dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground-muted); }
.article__foot dd { margin: 0; }

/* Biljettlänkar i artikeln → pill (inline-undantag WCAG 2.5.8).
   Klassen sätts av hejnykoping_add_ticket_class() på the_content – ingen URL-styling. */
.prose .ticket { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-subtle); color: var(--color-foreground); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }

.prose .ticket:hover { background: var(--color-surface-hover); color: var(--color-foreground); }

/* Blänkare: företagsguiden */
.guide-promo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-8); padding: var(--promo-padding-y) var(--promo-padding-x); background: var(--promo-bg); border: 1px solid var(--promo-border); border-radius: var(--promo-radius); }

@media (min-width: 40rem) { .guide-promo { flex-direction: row; align-items: center; justify-content: space-between; } }

.guide-promo__text { margin: 0; font-weight: var(--weight-semibold); }

/* Rail: annons (medium rectangle) + lokala företag (mini-kort) */
.ad-slot--medium-rectangle { max-width: var(--ad-slot-medium-rectangle-w); min-height: var(--ad-slot-medium-rectangle-h); margin-inline: auto; }

.rail-block { display: flex; flex-direction: column; gap: var(--space-3); }
.rail-block__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; }
.rail-block__more { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.company-mini { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-3); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); color: var(--color-foreground); text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-out); }

.company-mini:hover { box-shadow: var(--card-shadow-hover); }

.company-mini__logo { flex: 0 0 auto; width: var(--logo-slot-sm); height: var(--logo-slot-sm); display: flex; align-items: center; justify-content: center; padding: var(--space-1); background: var(--logo-slot-bg); border: 1px solid var(--logo-slot-border); border-radius: var(--logo-slot-radius); overflow: hidden; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-foreground-muted); }

.company-mini__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

.company-mini__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.company-mini__badge { flex: 0 0 auto; margin-inline-start: auto; padding: var(--space-1) var(--space-2); border-radius: var(--badge-radius); background: var(--badge-plus-bg); color: var(--badge-plus-text); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* Bloggrail: nivåsignal på det kompakta kortet (A+ fade vänster→höger). */
.company-mini.is-plus { border-color: var(--color-plus-border); background: linear-gradient(90deg, var(--color-plus-soft) 0%, var(--color-surface) 75%); }
.company-mini.is-premium { border-color: var(--color-premium-border); background: linear-gradient(90deg, var(--color-premium-soft) 0%, var(--color-surface) 75%); }
.company-mini.is-plus .company-mini__logo { background: var(--color-plus-soft); }
.company-mini.is-premium .company-mini__logo { background: var(--color-premium-soft); }
.company-mini.is-plus .company-mini__badge { background: var(--badge-plus-bg); color: var(--badge-plus-text); }
.company-mini.is-premium .company-mini__badge { background: var(--badge-premium-bg); color: var(--badge-premium-text); }
.company-mini:not(.is-plus, .is-premium) .company-mini__logo img { filter: grayscale(1); }

/* Artikeln: innehållet först på mobil (railen efter) — lokal variation via body-klass */
body.single-post .rail-layout__aside { order: 0; }

/* Sökresultat = DS components-search.css. */

/* Sök v2: kort + vy-växlare + tjänsterail. Tema-tillägg till DS-komponenten
   (scoped klasser, --segmented-* tokens som .billing-switch). Se docs/templates/search.md
   och docs/DS-FLAGS.md (post-rollout). */

/* Grupprubrikrad: titel vänster, vy-växlare höger (wrap på smal skärm). */
.search-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.search-group__head .search-group__title { margin-bottom: 0; }

/* Vy-växlare: länkar (no-JS fungerar), samma ytor som segmented control. */
.search-viewtoggle {
	display: none;
	gap: var(--space-1);
	padding: var(--segmented-padding);
	background: var(--segmented-bg);
	border: 1px solid var(--segmented-border);
	border-radius: var(--segmented-radius);
}

/* Mobil: ingen vyväxlare – korten renderas alltid. */
@media (min-width: 40rem) {
  .search-viewtoggle { display: inline-flex; }
}

.search-viewtoggle__item {
	display: inline-flex;
	align-items: center;
	min-height: var(--segmented-item-min-height);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--segmented-item-color);
	text-decoration: none;
}

.search-viewtoggle__item:hover { background: var(--segmented-item-hover); }

.search-viewtoggle__item.is-active {
	background: var(--segmented-item-active-bg);
	color: var(--segmented-item-active-text);
}

.search-viewtoggle__item:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Kortlistan behöver andningsutrymme mot grupprubriken. */
.search-group .hn-companies { margin-top: var(--space-4); }

/* Notis i fallback-läget (snippet saknas): "Visar X av Y företag". */
.search-group__note {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
	color: var(--color-foreground-meta);
}

/* ============================================================
   Contact Form 7 — matchar DS:s formulär (forms.md)
   ============================================================ */
.wpcf7 { max-width: var(--prose-max); }
.wpcf7 p { margin: 0 0 var(--space-4); }
.wpcf7 label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-foreground); }

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit, .wpcf7-acceptance, .wpcf7-radio, .wpcf7-checkbox, [type="radio"], [type="checkbox"]) { display: block; width: 100%; min-height: var(--input-height); margin-top: var(--space-2); padding: var(--input-padding-y) var(--input-padding-x); border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-text); font: inherit; }

.wpcf7 textarea.wpcf7-form-control { min-height: 8rem; resize: vertical; }

.wpcf7 .wpcf7-form-control:focus { outline: none; border-color: var(--input-border-hover); box-shadow: var(--input-focus-ring); }

.wpcf7 .wpcf7-form-control::placeholder { color: var(--input-placeholder); }

.wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.wpcf7 .wpcf7-radio .wpcf7-list-item { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: var(--weight-regular); }

/* Godkännande (acceptance): checkbox + text på samma rad. */
.wpcf7 .wpcf7-acceptance { display: inline; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.wpcf7 .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-primary); }

.wpcf7 .wpcf7-submit { width: 100%; min-height: 44px; padding: var(--space-3) var(--space-5); border: 0; border-radius: var(--btn-primary-radius); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.wpcf7 .wpcf7-submit:hover { background: var(--color-primary-hover); }

@media (min-width: 40rem) { .wpcf7 .wpcf7-submit { width: auto; } }

.wpcf7 .wpcf7-response-output { margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.wpcf7 form.sent .wpcf7-response-output { background: var(--color-success-soft); border-color: var(--color-success); }
.wpcf7 form.invalid .wpcf7-response-output { background: var(--color-danger-soft); border-color: var(--color-danger); }

.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-danger); }

.wpcf7-spinner { display: inline-block; margin-inline-start: var(--space-2); }

/* Live-pris i orderformuläret */
.wpcf7 .form-price { margin: var(--space-4) 0; padding: var(--space-4) var(--space-5); background: var(--color-surface-subtle); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-weight: var(--weight-semibold); color: var(--color-foreground); }

.wpcf7 .form-price:empty { display: none; }

/* Summering i orderformuläret (nivå + fakturering + besparing). */
.form-price__line { display: block; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-foreground-muted); }
.form-price__total { display: block; margin-top: var(--space-1); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-foreground); }
.form-price__save { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-success-strong); }

/* ============================================================
   Medlemskap (/medlemskap/) — DS: member-grid/member-card (marketing.md)
   + table-wrap/table--zebra (data-display.md) + CSS-only faktureringstoggle.
   Se docs/templates/membership.md.
   ============================================================ */
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--grid-gap); align-items: stretch; }

.member-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--member-card-bg); color: var(--color-foreground); border: 1px solid var(--member-card-border); border-radius: var(--member-card-radius); }
.member-card--featured { border-color: var(--member-card-featured-border); box-shadow: var(--member-card-featured-shadow); }

/* Färg per nivå — följer nivåns badge (Fri = neutral, Plus = marin, Premium = orange). */
.member-card--free { border-top: 4px solid var(--color-free); }
.member-card--plus { border-top: 4px solid var(--color-plus); background: linear-gradient(180deg, var(--color-plus-soft) 0, var(--card-bg) 45%); }
.member-card--premium { border-top: 4px solid var(--color-premium); background: linear-gradient(180deg, var(--color-premium-soft) 0, var(--card-bg) 45%); }

.member-card > .badge { align-self: flex-start; }

/* Pris + nota + knapp: gruppen "sticky" i kortets botten, med marginal till texten ovanför. */
.member-card__footer { display: grid; grid-template-rows: auto auto auto auto; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.member-card__footer .btn { margin-top: var(--space-2); }

.member-card__price { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-extrabold); line-height: 1; }
.member-card__price span { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-foreground-muted); }
.member-card--plus .member-card__price { color: var(--color-plus); }
.member-card--premium .member-card__price { color: var(--color-premium); }
.member-card__lead { font-size: var(--text-sm); color: var(--color-foreground-muted); margin: 0; }
.member-card__features { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--text-base); }

/* Punktlista: liten prick i nivåns färg framför varje punkt. */
.member-card__features li { display: flex; gap: var(--space-2); align-items: flex-start; }
.member-card__features li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 0.5em; border-radius: var(--radius-full); background: var(--color-foreground-muted); }
.member-card--free .member-card__features li::before { background: var(--color-free); }
.member-card--plus .member-card__features li::before { background: var(--color-plus); }
.member-card--premium .member-card__features li::before { background: var(--color-premium); }

.member-card__note { margin: 0; min-height: calc(1.6em * 2); font-size: var(--text-xs); color: var(--color-foreground-meta); }
.member-card__note:empty { visibility: hidden; }
.member-card__save { display: inline-flex; align-items: center; justify-self: start; min-height: 1.8rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-success-soft); color: var(--color-success-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.member-card__save:empty { visibility: hidden; }

.badge--free { background: var(--badge-free-bg); color: var(--badge-free-text); }

/* Faktureringstoggle — radios + syskon (ingen JS) */
.billing-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.billing-switch { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-8); padding: var(--segmented-padding); background: var(--segmented-bg); border: 1px solid var(--segmented-border); border-radius: var(--segmented-radius); }

.billing-switch label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--segmented-item-min-height); padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--segmented-item-color); cursor: pointer; }
.billing-switch label:hover { background: var(--segmented-item-hover); }
.billing-switch label span { font-size: var(--text-xs); font-weight: var(--weight-regular); }

#billing-annual:checked ~ .billing-switch label[for="billing-annual"],
#billing-monthly:checked ~ .billing-switch label[for="billing-monthly"] { background: var(--segmented-item-active-bg); color: var(--segmented-item-active-text); }

#billing-annual:focus-visible ~ .billing-switch label[for="billing-annual"],
#billing-monthly:focus-visible ~ .billing-switch label[for="billing-monthly"] { outline: none; box-shadow: var(--shadow-focus); }

.price--monthly,
.note--monthly { display: none; }

#billing-monthly:checked ~ .member-grid .has-monthly .price--annual,
#billing-monthly:checked ~ .member-grid .has-monthly .note--annual,
#billing-monthly:checked ~ .member-grid .has-monthly .member-card__save { visibility: hidden; }

#billing-monthly:checked ~ .member-grid .has-monthly .price--monthly,
#billing-monthly:checked ~ .member-grid .has-monthly .note--monthly { display: block; }

/* Tabell (DS: table-wrap/table--zebra) */
.table-wrap { overflow-x: auto; border: 1px solid var(--table-border); border-radius: var(--radius-lg); }

.table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: var(--text-base); }
.table caption { padding: var(--space-3) var(--table-cell-padding-x); text-align: left; color: var(--table-caption-text); }

.table th,
.table td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); text-align: left; vertical-align: top; border-bottom: 1px solid var(--table-border); }
.table th { background: var(--table-header-bg); color: var(--table-header-text); font-weight: var(--weight-bold); }
.table tbody tr:hover { background: var(--table-row-hover); }
.table tbody tr:last-child td { border-bottom: none; }
.table--zebra tbody tr:nth-child(even) { background: var(--table-zebra); }

.table .yes { color: var(--color-plus); font-weight: var(--weight-bold); }
.table .no { color: var(--color-foreground-muted); }

/* Pitch-kort */
.practice { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }

@media (min-width: 48rem) { .practice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.practice li { padding: var(--space-5); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); font-size: var(--text-sm); color: var(--color-foreground-muted); }
.practice strong { display: block; margin-bottom: var(--space-1); color: var(--color-foreground); font-size: var(--text-base); }

/* "Så blir du medlem" — tydliga numrerade steg (stora siffror i accentfärg). */
.practice--steps { counter-reset: step; gap: var(--space-5); }
.practice--steps li { counter-increment: step; padding: var(--space-6) var(--space-5); background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--card-shadow); font-size: var(--text-base); }
.practice--steps li::before { content: counter(step); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-3); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1; }
.practice--steps strong { margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }

/* Hero-CTA = DS .page-hero__actions (public-patterns.css). */

/* Jämförelsetabell: lika breda nivåkolumner, bredare etikettkolumn */
.table--compare { table-layout: fixed; }

.table--compare .table__col-label { width: 34%; }

/* Ljus panel-sektion (bryter av mot sidbakgrunden) */
.section--panel { background: var(--color-surface); }

/* Formulärkolumn — rubrik + formulär i samma smala kolumn */
.form-col { max-width: var(--prose-max); }

/* Tipsa om företag: centrerad enkel formulärkolumn. */
.tipsa-page .form-col { margin-inline: auto; }

/* Mörk sektion + tabell = DS public-patterns.css. */

/* Sektionslead = DS public-patterns.css. Tema-tillägg nedan. */
.section__lead--spaced { margin-top: var(--space-6); }
.section__footnote { margin-top: var(--space-5); font-size: var(--text-sm); }
.section--dark .section__footnote a { color: var(--color-on-dark-link); }
.section--dark .section__footnote a:hover { color: var(--color-on-dark-link-hover); }

/* ============================================================
   "Företag du tittat på tidigare" — kompakta företagskort.
   Global sektion (footer.php), fylls av recently-viewed.js.
   Kompakt variant av .company-card (DS: .card--company-compact).
   ============================================================ */
.recent-block { padding-block: var(--space-10); background: var(--color-surface-subtle); border-top: 1px solid var(--color-border); }
.recent-block__title { font-size: var(--text-lg); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-foreground-muted); margin: 0 0 var(--space-4); }
.recent-block__list { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

@media (min-width: 640px) {
  .recent-block__list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

.recent-card {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px; padding: var(--space-3);
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: var(--color-foreground); text-decoration: none;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.recent-card:hover { box-shadow: var(--card-shadow-hover); }

.recent-card__logo {
  flex: 0 0 auto; width: var(--logo-slot-sm); height: var(--logo-slot-sm);
  display: flex; align-items: center; justify-content: center; padding: var(--space-1); overflow: hidden;
  background: var(--logo-slot-bg); border: 1px solid var(--logo-slot-border); border-radius: var(--logo-slot-radius);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-foreground-muted);
}
.recent-card__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.recent-card__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }