/* Valvet — sajtens ram.
 *
 * Läsarna är jägare med ny licens, folk som ska låsa in kontanter och guld, och
 * äldre läsare som vill ha ordning på sin förvaring. De ska känna att de står
 * framför ett riktigt skåp: sidhuvud och sidfot är gjutna i mörkt vapenstål med
 * en mässingsfog, som dörrkanten på ett kassaskåp. Märket är en kombinationsratt.
 * Innehållet däremellan är ljust och lugnt med större text, så att det går att
 * läsa utan glasögon.
 *
 * Färgfördelning: stål för ramen och Vårt val-plåten, mässing bara som fog och
 * markering, signalrött bara på köpknappar.
 */

:root {
  --vg-steel: #1b2127;
  --vg-steel-2: #262e35;
  --vg-steel-line: #36404a;
  --vg-steel-text: #eceef0;
  --vg-steel-muted: #a9b1b8;
  --vg-brass: #c29a5b;
  --vg-brass-ink: #8a6a36;  /* mässing som går att läsa på ljust papper */
  --vg-seam: 3px;
  --vg-dial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c29a5b'%3E%3Ccircle cx='16' cy='16' r='14.5' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='8.5' stroke-width='1.5'/%3E%3Cpath d='M16 1.5v3.5M16 27v3.5M1.5 16H5M27 16h3.5M5.7 5.7l2 2M24.3 24.3l2 2M26.3 5.7l-2 2M7.7 24.3l-2 2' stroke-width='1.5'/%3E%3Cpath d='M16 16V9.5' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23c29a5b' stroke='none'/%3E%3C/svg%3E");
}

/* ======================================================================
 * Sidhuvud
 * ====================================================================== */
html body .sg-masthead {
  background: var(--vg-steel);
  color: var(--vg-steel-text);
  border-block-end: var(--vg-seam) solid var(--vg-brass);
}

html body .sg-masthead .sg-masthead__main {
  padding-block: 0.875rem;
  background: transparent;
}

html body .sg-masthead.vg-compact .sg-masthead__main {
  padding-block: 0.5rem;
}

html body .sg-masthead .sg-wordmark a {
  color: var(--vg-steel-text);
  text-decoration: none;
}

/* Kombinationsratten framför namnet. */
html body .sg-masthead .sg-wordmark a::before,
.vg-footer .vg-footer__wordmark a::before {
  content: "";
  display: inline-block;
  inline-size: 1.1em;
  block-size: 1.1em;
  margin-inline-end: 0.4em;
  vertical-align: -0.2em;
  background: var(--vg-dial) center / contain no-repeat;
}

/* Skrivbordsmenyn: vanlig skrift i läsbar storlek, inga spärrade versaler. */
html body .sg-masthead .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  gap: 0.25rem 1.375rem;
}

html body .sg-masthead .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
  padding-block: 0.5rem;
  color: var(--vg-steel-text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 2px;
}

html body .sg-masthead .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--vg-brass);
}

/* Om oss och Så jämför vi står lite för sig — de handlar om oss, inte om skåp. */
html body .sg-masthead .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:nth-last-child(2) {
  margin-inline-start: 0.75rem;
  padding-inline-start: 1.375rem;
  border-inline-start: 1px solid var(--vg-steel-line);
}

html body .sg-masthead .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item:nth-last-child(-n + 2) .wp-block-navigation-item__content {
  color: var(--vg-steel-muted);
}

/* Menyknappen. WordPress byter till knapp först under 600 px; åtta länkar får
 * inte plats på en rad förrän runt 1150 px, så vi byter redan under 72rem. */
html body .sg-nav .wp-block-navigation__responsive-container-open {
  display: none;
}

@media (max-width: 72rem) {
  html body .sg-nav .wp-block-navigation__responsive-container-open {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    margin-inline-end: -12px;
    color: var(--vg-steel-text);
  }

  html body .sg-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  html body .sg-nav .wp-block-navigation__responsive-container-open svg {
    inline-size: 28px;
    block-size: 28px;
  }
}

/* Den öppna mobilmenyn får samma stålfog överst som sidhuvudet. */
html body .sg-nav .is-menu-open .wp-block-navigation__responsive-dialog::before {
  border-block-end: var(--vg-seam) solid var(--vg-brass);
}

/* ======================================================================
 * Brödtext — lite större för läsare som inte vill zooma
 * ====================================================================== */
@media (min-width: 48rem) {
  .sg-band--prose :is(p, li),
  .sg-band--brief :is(p, li),
  .vg-faq :is(p, li) {
    font-size: 1.125rem;
    line-height: 1.65;
  }
}

/* Upplysningen om annonslänkar: liten och i linje med rubriken, inte flytande. */
.entry-content > .smedja-disclosure {
  max-inline-size: var(--vg-hero);
  margin-block: 1.25rem 0;
  color: var(--wp--preset--color--muted);
  font-size: 0.8125rem;
}

/* ======================================================================
 * Vårt val-plåten — som typskylten på en skåpdörr
 * ====================================================================== */
.vg-afflink .vg-afflink__note,
.vg-afflink .vg-afflink__action {
  border-color: var(--vg-steel);
  background: var(--vg-steel);
  color: var(--vg-steel-text);
}

.vg-afflink .vg-afflink__note {
  border-block-start: var(--vg-seam) solid var(--vg-brass);
}

.vg-afflink .vg-afflink__note strong {
  color: #fff;
}

.vg-afflink .vg-afflink__note a {
  color: #fff;
}

@media (min-width: 48rem) {
  .vg-afflink .vg-afflink__action {
    border-block-start: var(--vg-seam) solid var(--vg-brass);
  }
}

.vg-afflink .vg-btn:focus-visible {
  outline-color: var(--vg-brass);
}

/* ======================================================================
 * Produktlistan: rangen i mässing på skrivbord
 * ====================================================================== */
@media (min-width: 48rem) {
  .vg-toplist__rank {
    color: var(--vg-brass-ink);
    font-family: var(--wp--preset--font-family--display);
    font-weight: 600;
    opacity: 1;
  }
}

/* Ett kort utan produktbild ska inte klämmas in i bildkolumnen. */
.vg-toplist__item:not(:has(.vg-toplist__media)) .vg-toplist__body {
  grid-column: 2 / -1;
}

@media (max-width: 48rem) {
  .vg-toplist__item:not(:has(.vg-toplist__media)) .vg-toplist__body > *,
  .vg-toplist__item:not(:has(.vg-toplist__media)) > .vg-toplist__rank {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .vg-toplist__item:not(:has(.vg-toplist__media)) > .vg-toplist__rank {
    margin-block-end: 0.5rem;
  }
}

/* ======================================================================
 * Läs vidare-korten utan bild: luft mellan raderna
 * ====================================================================== */
.sg-topic__grid {
  row-gap: 2.5rem;
}

.sg-topic__grid .sg-story:not(:has(.sg-story__img)) {
  padding-block-start: 1rem;
  border-block-start: 2px solid var(--vg-steel);
}

/* ======================================================================
 * Innehållsförteckning
 * ====================================================================== */
.vg-toc {
  box-sizing: border-box;
  max-inline-size: var(--vg-measure);
  margin-block: 2.5rem;
  border: 1px solid var(--wp--preset--color--line);
  border-block-start: var(--vg-seam) solid var(--vg-steel);
  background: var(--wp--preset--color--surface);
}

.vg-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 3.25rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
}

.vg-toc summary::-webkit-details-marker {
  display: none;
}

.vg-toc summary::after {
  content: "";
  flex: none;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: -0.3rem;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.vg-toc[open] summary::after {
  margin-block-start: 0.3rem;
  transform: rotate(225deg);
}

.vg-toc__count {
  margin-inline-start: auto;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem;
  font-weight: 400;
}

.vg-toc ol {
  margin: 0;
  padding: 0 1.25rem 1rem;
  list-style: none;
}

.vg-toc li {
  margin: 0;
  border-block-start: 1px solid var(--wp--preset--color--line);
}

.vg-toc a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-block: 0.375rem;
  padding-inline-start: 0.875rem;
  border-inline-start: 3px solid transparent;
  color: var(--wp--preset--color--contrast);
  font-size: 1rem;
  line-height: 1.35;
  text-decoration: none;
}

.vg-toc a:hover {
  border-inline-start-color: var(--vg-brass);
  text-decoration: underline;
}

.vg-toc a.is-pick {
  font-weight: 600;
}

@media (min-width: 48rem) {
  .vg-toc ol {
    columns: 2;
    column-gap: 2rem;
  }

  .vg-toc li {
    break-inside: avoid;
  }
}

/* ======================================================================
 * Dockan — snabbknapparna som följer med nedåt
 * ====================================================================== */
.vg-dock {
  position: fixed;
  z-index: 90;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  pointer-events: none;
  transform: translateY(110%);
  transition: transform 200ms ease;
}

.vg-dock.is-shown {
  transform: none;
}

.vg-dock__bar,
.vg-dock__panel {
  pointer-events: auto;
}

.vg-dock__bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--vg-seam) solid var(--vg-brass);
  background: var(--vg-steel);
}

.vg-dock__btn {
  box-sizing: border-box;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 48px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--vg-steel-line);
  border-radius: 3px;
  background: var(--vg-steel-2);
  color: var(--vg-steel-text);
  font: 600 1rem/1.2 var(--wp--preset--font-family--body);
  text-decoration: none;
  cursor: pointer;
}

.vg-dock__btn--pick {
  border-color: var(--wp--preset--color--primary);
  background: var(--wp--preset--color--primary);
  color: #fff;
}

.vg-dock__btn:focus-visible {
  outline: 3px solid var(--vg-brass);
  outline-offset: 2px;
}

.vg-dock__btn[hidden] {
  display: none;
}

.vg-dock__btn--toc::before {
  content: "";
  inline-size: 1rem;
  block-size: 0.75rem;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 70% 2px no-repeat;
}

.vg-dock__panel {
  max-block-size: min(65vh, 32rem);
  overflow-y: auto;
  padding: 0.5rem 1rem 0.75rem;
  border-block-start: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  box-shadow: 0 -12px 32px rgb(19 20 22 / 0.18);
}

.vg-dock__panel[hidden] {
  display: none;
}

.vg-dock__panel p {
  margin: 0.5rem 0 0.25rem;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 600;
}

.vg-dock__panel ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-dock__panel li + li {
  border-block-start: 1px solid var(--wp--preset--color--line);
}

.vg-dock__panel a {
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  color: var(--wp--preset--color--contrast);
  font-size: 1.0625rem;
  text-decoration: none;
}

.vg-dock__panel a.is-current {
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}

/* Skrivbord: dockan är en liten platta i nedre högra hörnet. */
@media (min-width: 48rem) {
  .vg-dock {
    inset-inline: auto 1.5rem;
    inset-block-end: 1.5rem;
    inline-size: 22rem;
    transform: translateY(calc(100% + 2rem));
  }

  .vg-dock__bar {
    padding: 0.625rem;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 10px 30px rgb(19 20 22 / 0.25);
  }

  .vg-dock__panel {
    border: 1px solid var(--wp--preset--color--line);
    border-block-end: 0;
    border-radius: 4px 4px 0 0;
  }
}

/* ======================================================================
 * Sidfot
 * ====================================================================== */
html body .vg-footer {
  padding-block: 3.5rem 1.5rem;
  border-block-start: var(--vg-seam) solid var(--vg-brass);
  background: var(--vg-steel);
  color: var(--vg-steel-muted);
  font-size: 1rem;
}

.vg-footer .vg-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 3rem;
}

.vg-footer .vg-footer__wordmark {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.vg-footer .vg-footer__wordmark a {
  color: var(--vg-steel-text);
  text-decoration: none;
}

.vg-footer .vg-footer__blurb {
  max-inline-size: 26rem;
  margin: 0 0 1rem;
  color: var(--vg-steel-text);
  line-height: 1.6;
}

.vg-footer .vg-footer__disclosure {
  margin: 0;
  font-size: 0.875rem;
}

.vg-footer .vg-footer__title {
  margin: 0 0 0.75rem;
  padding-block-end: 0.625rem;
  border-block-end: 1px solid var(--vg-steel-line);
  color: var(--vg-steel-text);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.vg-footer .vg-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-footer .vg-footer__list li {
  margin: 0;
}

.vg-footer a {
  color: var(--vg-steel-text);
  text-decoration: none;
  text-underline-offset: 0.3em;
}

.vg-footer a:hover,
.vg-footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--vg-brass);
}

.vg-footer .vg-footer__disclosure a {
  color: var(--vg-steel-muted);
  text-decoration: underline;
}

.vg-footer .vg-footer__list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
}

.vg-footer .vg-footer__menu .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.vg-footer .vg-footer__menu .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding: 0;
  color: var(--vg-steel-muted);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.vg-footer .vg-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-block-start: 3rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--vg-steel-line);
  font-size: 0.875rem;
}

.vg-footer .vg-footer__base p {
  margin: 0;
}

.vg-footer .vg-footer__base a {
  color: var(--vg-steel-muted);
  text-decoration: underline;
}

/* Cookieinställningar flyttas in i foten av js/90-toc-dock.js. */
.vg-footer .smedja-consent__settings {
  margin: 0;
  color: var(--vg-steel-muted);
  font-size: 0.875rem;
}

@media (max-width: 64rem) {
  .vg-footer .vg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vg-footer .vg-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 48rem) {
  html body .vg-footer {
    padding-block: 2.5rem 1.5rem;
  }

  .vg-footer .vg-footer__grid {
    gap: 2rem 1.5rem;
  }

  .vg-footer .vg-footer__col:last-child {
    grid-column: 1 / -1;
  }

  .vg-footer .vg-footer__menu .wp-block-navigation__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .vg-footer .vg-footer__list a,
  .vg-footer .vg-footer__menu .wp-block-navigation-item__content {
    min-block-size: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vg-dock,
  .vg-toc summary::after {
    transition: none;
  }
}

/* Dockan ska inte ligga över den öppna mobilmenyn. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .vg-dock {
  display: none;
}

/* ======================================================================
 * Kort i Läs vidare/Börja här: hela kortet är klickbart, inte bara rubriken
 * ====================================================================== */
.sg-story {
  position: relative;
}

.sg-story__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sg-story:has(.sg-story__title a:focus-visible) {
  outline: 3px solid var(--vg-brass);
  outline-offset: 4px;
}

/* ======================================================================
 * Telefon: finputs för läsbarhet och tumme
 * ====================================================================== */
@media (max-width: 48rem) {
  /* Korten står tätt i en lista — luften på skrivbord blir hål på telefon. */
  .sg-topic__grid {
    row-gap: 0;
  }

  .sg-topic__grid .sg-story {
    padding-block: 1rem;
  }

  /* Genvägar: läsbara knappar i stället för små versalchips. */
  .sg-topicrail__chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding: 0.375rem 0.875rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Ingen text under 12,5 px; källor och bildtexter i vanlig skrift. */
  .sg-meta,
  .sg-eyebrow,
  .vg-toplist__eyebrow,
  .vg-faq__eyebrow {
    font-size: 0.78rem;
  }

  .sg-data__source,
  .sg-credit,
  .vg-toplist__source,
  .entry-content figcaption {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
  }

  .entry-content > .smedja-disclosure {
    margin-block-start: 0.75rem;
  }
}