/* ==================================================================
   Laddningsboxar — "instrument" identity.

   The subject is electrical measurement: consumer units, breakers,
   current, and the green ring that tells you a charger is live. The
   site's promise is dated, verifiable numbers. So: a deep violet
   ground, numbers set as instrument data rather than prose, and a
   single green used only where something is measured or verified.

   THE VIOLET SPINE. Sections are wrapped by the theme in full-bleed
   .et-band--* groups, and the page uses them as a rhythm that means
   something rather than as decoration:

     violet   hero + disclosure   "here is the verdict, and how we earn"
     paper    prose, picks, faq   "here is the reasoning"  (long reads)
     violet   toplist, method     "here is what to buy and how we judged"
     violet   footer

   Violet is therefore the colour of a decision, paper the colour of an
   explanation. Green appears only against violet, and only on a value
   that was measured or checked.

   Tokens are redeclared at :root:root because the engine injects the
   knob stylesheet AFTER site overrides; equal specificity would lose.
================================================================== */

:root:root {
  --lb-ink:          #14102B;   /* near-black violet, body text      */
  --lb-voltage:      #241647;   /* brand violet, primary surfaces    */
  --lb-voltage-lift: #3B2570;   /* lifted violet, gradients + hover  */
  --lb-voltage-deep: #180E33;   /* floor of the gradient, footer     */
  --lb-paper:        #F5F3FA;   /* violet-tinted page ground         */
  --lb-card:         #FFFFFF;
  --lb-live:         #02BA7B;   /* old-site green: measured / live   */
  --lb-live-lift:    #04D68D;
  --lb-live-deep:    #018257;
  --lb-rule:         #E4E0F0;

  /* type on violet */
  --lb-on-violet:      #EDE9F7;
  --lb-on-violet-dim:  #BDB2DC;

  --wp--preset--color--base:         var(--lb-paper);
  --wp--preset--color--surface:      var(--lb-card);
  --wp--preset--color--contrast:     var(--lb-ink);
  --wp--preset--color--primary:      var(--lb-voltage);
  --wp--preset--color--primary-soft: var(--lb-voltage-lift);
  --wp--preset--color--accent:       var(--lb-live);
  --wp--preset--color--line:         var(--lb-rule);
  --wp--preset--color--muted:        #6B6484;
}

body { background: var(--lb-paper); }

/* Sticky masthead would otherwise cover anchor targets from the
   picks-summary jump links. */
[id] { scroll-margin-top: 5.5rem; }

/* ------------------------------------------------------------------
   Masthead: kill the condense oscillation and reclaim vertical space.
   The template toggles .is-condensed at scrollY > 72 with no
   hysteresis — condensing shortens the header, content shifts up,
   scrollY falls back under the threshold, and it flips repeatedly.
   Pinning both states to one geometry removes the loop.
------------------------------------------------------------------- */
.et-masthead__utility { display: none !important; }
.et-masthead__main,
.et-masthead.is-condensed .et-masthead__main {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  transition: none !important;
}
.et-wordmark,
.et-masthead.is-condensed .et-wordmark {
  font-size: 1.2rem !important;
  transition: none !important;
}
.et-masthead, .et-masthead.is-condensed { transition: none !important; }

.et-masthead {
  background: color-mix(in srgb, var(--lb-paper) 92%, transparent) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--lb-rule) !important;
}
.et-progress__bar { background: linear-gradient(90deg, var(--lb-voltage), var(--lb-live)) !important; }

/* Header CTA: solid violet, the one button in the chrome. */
.et-masthead__cta {
  background: var(--lb-voltage) !important;
  border-color: var(--lb-voltage) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.et-masthead__cta:hover { background: var(--lb-voltage-lift) !important; border-color: var(--lb-voltage-lift) !important; }

/* ==================================================================
   THE VIOLET BANDS
   Full-bleed groups the theme already emits. Styling the band rather
   than its inner block means edge-to-edge colour with no breakout
   hacks and no risk of horizontal overflow.
================================================================== */
.et-band--hero,
.et-band--disclosure,
.et-band--deals,
.et-band--method {
  background:
    radial-gradient(120% 140% at 15% 0%, var(--lb-voltage-lift) 0%, transparent 60%),
    linear-gradient(168deg, var(--lb-voltage) 0%, var(--lb-voltage-deep) 100%) !important;
  color: var(--lb-on-violet) !important;
}

/* Hero and disclosure are one continuous block: strip the seam. */
.et-band--hero    { padding-bottom: 1.6rem !important; }
.et-band--disclosure { padding-top: 0 !important; }

/* A hairline of green at the top edge of each *separate* violet zone —
   the same green as the ring on a live charger. The disclosure is not
   a separate zone (it continues the hero), so it does not get one. */
.et-band--deals,
.et-band--method { position: relative; }
.et-band--deals::before,
.et-band--method::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lb-live), transparent);
}

/* Type on violet */
.et-band--hero :is(h1,h2,h3,h4,p,li,span,a,strong,em),
.et-band--deals :is(h1,h2,h3,h4,p,li,span,strong,em),
.et-band--method :is(h1,h2,h3,h4,p,li,span,strong,em) { color: inherit; }

.et-band--hero .et-eyebrow,
.et-band--deals .et-eyebrow,
.et-band--method .et-eyebrow,
.et-band--disclosure .et-eyebrow { color: var(--lb-live) !important; }

.et-band--hero .et-review-hero__title,
.et-band--hero .et-page-hero__title,
.et-band--deals .et-section-title,
.et-band--method .et-section-title { color: #FFFFFF !important; }

.et-band--hero .et-review-hero__dek,
.et-band--hero .et-page-hero__dek,
.et-band--deals .et-section-dek,
.et-band--method .et-section-dek { color: var(--lb-on-violet-dim) !important; }

/* Byline stays quiet — it is there for provenance, not for display. */
.et-band--hero .et-byline,
.et-band--hero .et-byline a { color: var(--lb-on-violet-dim) !important; opacity: 0.85; }

.et-band--hero .et-trustline { color: var(--lb-on-violet-dim) !important; }

/* Hero image: crop to a consistent landscape so square sources do not
   tower over the fold. Product cut-outs are PNG and must not be
   cropped — they get a white plate and contain. */
.et-review-hero__media img,
.et-page-hero__media img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 45%;
  width: 100%;
  border-radius: var(--et-r-lg, 12px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 18px 40px rgb(8 4 24 / 38%);
}
.et-review-hero__media img[src$=".png"],
.et-page-hero__media img[src$=".png"] {
  object-fit: contain;
  background: #FFFFFF;
  padding: 1.5rem;
}

/* ------------------------------------------------------------------
   Toplist rows read as instrument readouts on the dark band.
------------------------------------------------------------------- */
.et-deals { background: transparent !important; }
.et-deal { border-color: rgb(255 255 255 / 14%) !important; }
.et-deal__name { color: #fff !important; font-weight: 600; }
.et-deal__spec { color: var(--lb-on-violet-dim) !important; }
.et-deal__now {
  color: var(--lb-live) !important;
  font-family: var(--et-sans);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.et-band--deals .smedja-aff,
.et-band--deals .et-buy,
.wp-block-post-content .et-band--deals a.smedja-aff,
.wp-block-post-content .et-band--deals a.et-buy {
  background: var(--lb-live) !important;
  border-color: var(--lb-live) !important;
  color: #06281C !important;
  font-weight: 700;
}
.et-band--deals .smedja-aff:hover,
.et-band--deals .et-buy:hover { background: var(--lb-live-lift) !important; border-color: var(--lb-live-lift) !important; }

/* Method block: the numbers are the point. */
.et-methodology { background: transparent !important; }
.et-methodology .et-stat__value,
.et-stat__value {
  font-family: var(--et-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.et-band--method .et-stat__value { color: var(--lb-live) !important; }
.et-band--method .et-stat__label { color: var(--lb-on-violet-dim) !important; }

/* ------------------------------------------------------------------
   Disclosure — centred, quiet, closing the violet opening block.
------------------------------------------------------------------- */
.et-disclosure {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  color: var(--lb-on-violet-dim) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.et-band--disclosure .et-disclosure a { color: #fff; text-decoration-color: var(--lb-live); }
/* The methodology variant lives on a violet band too but reads as body copy. */
.et-disclosure--method { text-align: left; }

/* ------------------------------------------------------------------
   The quick button — one tap from the top of the page to the toplist,
   which is the shortest route to a tracked link. It sits on the violet
   band, so it takes the green: the same colour every buy button uses,
   which is what the button is a shortcut to.
------------------------------------------------------------------- */
.et-band--disclosure { text-align: center; }
.et-jump-cta,
.et-band--disclosure a.et-jump-cta,
.wp-block-post-content .et-band--disclosure a.et-jump-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem auto 0;
  padding: 0.7rem 1.4rem;
  background: var(--lb-live);
  border: 1px solid var(--lb-live);
  color: #06281C;
  font-family: var(--et-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgb(2 186 123 / 22%);
  transition: background 140ms ease, transform 140ms ease;
}
.et-band--disclosure a.et-jump-cta:hover,
.wp-block-post-content .et-band--disclosure a.et-jump-cta:hover {
  background: var(--lb-live-lift);
  border-color: var(--lb-live-lift);
  color: #06281C;
  transform: translateY(-1px);
}
.et-jump-cta span[aria-hidden] { transition: transform 140ms ease; }
.et-jump-cta:hover span[aria-hidden] { transform: translateY(2px); }

/* The toplist is a scroll target now, so never show a focus ring on the
   band itself after the programmatic focus that follows the jump. */
.et-band--deals:focus { outline: none; }

/* ==================================================================
   THE PAPER ZONE — long-form reading
================================================================== */

/* Summary card: the scannable TL;DR, lifted off the paper and capped
   with the brand violet so it reads as a control panel. */
.et-summary {
  background: var(--lb-card);
  border: 1px solid var(--lb-rule);
  border-top: 3px solid var(--lb-voltage);
  border-radius: var(--et-r-lg, 12px);
  box-shadow: 0 1px 2px rgb(20 16 43 / 5%), 0 14px 34px rgb(20 16 43 / 7%);
}
/* One label ran past the 9.5rem column and clipped. Give the column
   room for ~16 characters so a longer chip cannot clip again. */
.et-summary__link { grid-template-columns: 10rem minmax(0, 1fr) auto; }
.et-summary__link .et-chip { background: var(--lb-voltage); }
.et-summary__row:first-child .et-chip { background: var(--lb-live); color: #06281C; }
.et-summary__cta { color: var(--lb-voltage); font-weight: 650; }

/* Pick cards */
.et-pick, .et-card, .et-story, .et-compare {
  background: var(--lb-card);
  border: 1px solid var(--lb-rule);
  border-radius: var(--et-r-lg, 12px);
}
.et-pick {
  box-shadow: 0 1px 2px rgb(20 16 43 / 4%), 0 8px 24px rgb(20 16 43 / 5%);
}

/* Rank is already stated by the chip ("Vårt val"), so no rail: there is
   no class that identifies the first pick, and :first-of-type matches
   by element type — it selected the hero band, not a pick. */
.et-chip { background: var(--lb-voltage); color: #fff; }
.et-chip--pick { background: var(--lb-voltage); color: #fff; }
/* The template pairs --alt with dark text for its own light chip. Ours
   is violet, so the text has to come with it or it reads violet on
   violet at about 1.5:1. */
.et-pick--alt .et-chip--pick { background: var(--lb-voltage-lift); color: #fff; }

/* Numbers as data */
.et-pick__price, .et-score__num, .et-compare td, .et-deal__was { font-variant-numeric: tabular-nums; }
.et-pick__price {
  font-family: var(--et-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lb-voltage);
}
.et-score, .et-score__num { color: var(--lb-live-deep) !important; font-family: var(--et-sans); font-weight: 700; }
.et-flag { background: var(--lb-live) !important; color: #06281C !important; font-weight: 700; }

/* Buttons on paper. Classed selectors are repeated under
   .wp-block-post-content so they win inside the entry content. */
.smedja-aff, .et-buy, .et-jump-cta,
.wp-block-post-content a.smedja-aff,
.wp-block-post-content a.et-buy,
.wp-block-post-content a.et-jump-cta {
  background: var(--lb-voltage);
  border: 1px solid var(--lb-voltage);
  color: #fff;
  border-radius: 999px;
  font-weight: 650;
}
.smedja-aff:hover, .et-buy:hover, .et-jump-cta:hover,
.wp-block-post-content a.smedja-aff:hover,
.wp-block-post-content a.et-buy:hover,
.wp-block-post-content a.et-jump-cta:hover {
  background: var(--lb-voltage-lift); border-color: var(--lb-voltage-lift);
}

/* The secondary action stays an outline, so a card does not offer two
   buttons of identical weight. */
.et-buy--ghost,
.wp-block-post-content a.et-buy--ghost {
  background: transparent;
  color: var(--lb-voltage);
  border: 1px solid var(--lb-rule);
}
.et-buy--ghost:hover,
.wp-block-post-content a.et-buy--ghost:hover {
  background: color-mix(in srgb, var(--lb-voltage) 6%, transparent);
  border-color: var(--lb-voltage);
  color: var(--lb-voltage);
}

/* Comparison table */
.et-compare thead th { background: var(--lb-voltage) !important; color: #fff !important; }
.et-compare tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--lb-voltage) 3%, transparent); }
.et-compare .is-winner { box-shadow: inset 3px 0 0 var(--lb-live); }

/* FAQ: violet markers, hairline rows. */
.et-faq details { border-color: var(--lb-rule); }
.et-faq summary { color: var(--lb-ink); }
.et-faq summary::marker, .et-faq summary::-webkit-details-marker { color: var(--lb-voltage); }
.et-faq__q, .et-faq summary { font-weight: 600; }
.et-faq details[open] summary { color: var(--lb-voltage); }

/* Eyebrows on paper carry the violet. */
.et-band--prose .et-eyebrow,
.et-band--summary .et-eyebrow,
.et-band--faq .et-eyebrow,
.et-band--compare .et-eyebrow,
.et-band--author .et-eyebrow { color: var(--lb-voltage) !important; }

/* Links inside prose pick up the brand violet — but ONLY unclassed
   ones. `.wp-block-post-content a` is (0,1,1) and out-specifies a bare
   `.et-buy` (0,1,0), which painted every CTA violet on violet and
   erased its label. Same trap for summary rows and story cards. */
.et-prose a:not([class]),
.wp-block-post-content a:not([class]) { color: var(--lb-voltage); text-underline-offset: 0.18em; }
.et-prose a:not([class]):hover,
.wp-block-post-content a:not([class]):hover { color: var(--lb-voltage-lift); }

/* Byline on paper: present for schema, quiet for readers. */
.et-byline { font-size: 0.75rem; color: var(--wp--preset--color--muted); opacity: 0.8; }
.et-byline a { color: inherit; text-decoration: none; }
.et-byline a:hover { text-decoration: underline; }
.et-byline strong, .et-byline b { font-weight: 500; color: inherit; }

/* Trustline: the green tick is the "verified" signal. */
.et-trustline span:first-child,
.et-trustline__mark { background: var(--lb-live) !important; color: #06281C !important; }

/* ==================================================================
   FOOTER — the page closes on the brand.
================================================================== */
.et-footer {
  background: linear-gradient(168deg, var(--lb-voltage) 0%, var(--lb-voltage-deep) 100%) !important;
  color: var(--lb-on-violet) !important;
  border-top: 2px solid var(--lb-live);
}
.et-footer :is(p, li, span, h2, h3, h4) { color: inherit; }
.et-footer a { color: var(--lb-on-violet) !important; }
.et-footer a:hover { color: #fff !important; }
.et-footer__wordmark, .et-footer__wordmark a { color: #fff !important; }
.et-footer__note, .et-footer__legal { color: var(--lb-on-violet-dim) !important; }

/* ------------------------------------------------------------------
   Accessibility floor.
------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--lb-live);
  outline-offset: 2px;
  border-radius: 4px;
}
.et-band--hero :focus-visible,
.et-band--deals :focus-visible,
.et-footer :focus-visible { outline-color: var(--lb-live-lift); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------------
   Disclosure, de-duplicated.
   smedja-monetization.php injects a disclosure at the top of every
   page. A page that also carries its own `disclosure` section then
   shows two, and the injected one — left aligned, on paper, above the
   hero — breaks the violet opening.

   Hide the injected copy only where a sectioned one exists, so a page
   without a section still discloses. Never the other way round.
------------------------------------------------------------------- */
/* monetization.disclosure is now false in site.config.json, so the
   injected banner is gone at source and every page carries its own
   `disclosure` section instead. The rule stays only as a belt-and-
   braces guard if the flag is ever flipped back on. */
.entry-content:has(.et-band--disclosure) > .smedja-disclosure { display: none; }

/* The first band meets the masthead. A sliver of paper above a violet
   hero reads as a rendering fault rather than as spacing, and every
   band carries generous padding of its own already. */
.et-main { margin-top: 0 !important; }
.entry-content > [class*="et-band--"]:first-child { margin-top: 0 !important; }

/* The method list sets its tick marks in the brand violet, which went
   invisible once the band underneath became violet too. */
.et-band--method .et-method-points li::before,
.et-band--deals .et-method-points li::before { color: var(--lb-live) !important; }

/* Violet bands own their spacing through padding. Leaving the theme
   margins on put a strip of paper between two adjacent violet zones,
   which read as a seam; the green hairline is the divider. */
.et-band--hero,
.et-band--disclosure,
.et-band--deals,
.et-band--method { margin-top: 0 !important; margin-bottom: 0 !important; }

/* On a phone the jump CTA goes full width, and it inherits
   box-sizing: content-box — so width:100% plus its own padding and
   border pushed it ~22px past the viewport and the whole page scrolled
   sideways. */
.smedja-aff, .et-buy, .et-jump-cta,
.wp-block-post-content a.smedja-aff,
.wp-block-post-content a.et-buy,
.wp-block-post-content a.et-jump-cta {
  box-sizing: border-box;
  max-width: 100%;
}