/* Design layer for paa-afbetaling.dk. Loaded after the theme CSS ("tighten, do not redesign").
   Brand colours are the theme's own (--c1 navy, --c2 pale grey, --c3 pale blue, --c4 blue, --c5 star yellow);
   the tokens below only hold the darkened variants needed for WCAG AA plus a spacing scale. */

/* ---- Tokens ---- */
:root {
  --b-space-1: .8rem;
  --b-space-2: 1.6rem;
  --b-space-3: 2.4rem;
  --b-space-4: 4rem;
  --b-radius: .8rem;
  --b-radius-lg: 1.2rem;

  --b-line: rgba(36, 82, 118, .12);              /* hairline from --c1 */
  --b-shadow: 0 .2rem 1rem rgba(36, 82, 118, .08);
  --b-shadow-hover: 0 .4rem 1.6rem rgba(36, 82, 118, .16);

  --b-hero: #07375c;                             /* solid form of the theme's --trans-dark hero overlay */
  --b-link: #157792;                             /* theme link #1b98ba darkened to 4.6:1 on the pale page greys */
  --b-link-on-tint: #136c85;                     /* same hue, 4.6:1 on --c3 (FAQ boxes) */
  --b-muted: #6e6e6e;                            /* theme --gray #808080 darkened to 4.6:1 on --c2 */
  --b-cta: #23699e;                              /* the theme's own hover blue: white on it is 5.9:1 (white on --c4 is 4.0:1) */
  --b-cta-hover: var(--c1);
  --b-green: #007f60;                            /* speech bubble #00cc99 darkened for light text (4.6:1) */
  --b-green-text: #19723f;                       /* editor green #27ae60 darkened to 4.6:1 on --c3 */
  --b-widget-green: #008752;                     /* Pricerunner widget button #009e60 darkened for white text (4.6:1) */
  --b-widget-grey: #6d7588;                      /* widget price-drop grey #747d90 darkened to 4.6:1 */
  --b-on-dark-hover: #76cdea;                    /* footer hover #59c2e6 lightened to 4.6:1 on --c1 */
}

/* ---- Global: focus visibility (theme removes outlines on inputs and .c-btn) ---- */
#wrapper a:focus-visible,
#wrapper button:focus-visible,
#wrapper label.c-btn:focus-within,
#wrapper .accrodion-title:focus-visible,
#wrapper .ms input:focus-visible,
#wrapper .ms textarea:focus-visible {
  outline: .3rem solid var(--c4);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* The whole retailer card is one absolutely positioned link, so its outline sits on the card edge */
#wrapper .row-forhandler > a.fixed:focus-visible,
#wrapper .block-forhandler > a.fixed:focus-visible,
#wrapper .selected-forhandler > a.fixed:focus-visible { outline-offset: -.3rem; border-radius: var(--b-radius); }

/* ---- Text links: AA colour instead of #1b98ba / visited #2D9CDB (3.4:1 on white) ---- */
#wrapper .tekst a:not(.c-btn):not(.button-link),
#wrapper .tekst a:not(.c-btn):not(.button-link):visited { color: var(--b-link); }
#wrapper .tekst p a:not(.c-btn):not(.button-link) { text-decoration: underline; text-decoration-thickness: .1rem; text-underline-offset: .2em; }
#wrapper .tekst a:not(.c-btn):not(.button-link):hover,
#wrapper .tekst a:not(.c-btn):not(.button-link):focus { color: var(--c1); }
#wrapper .accrodion-txt .tekst a:not(.c-btn),
#wrapper .accrodion-txt .tekst a:not(.c-btn):visited { color: var(--b-link-on-tint); }

/* ---- Muted text ---- */
#wrapper .color-grey, #wrapper a.color-grey { color: var(--b-muted); }

/* ---- Top notice bar: link colour is set inline by the editor (#27ae60, 2.2:1 on --c3) ---- */
.toptop-head a span[style] { color: var(--b-green-text) !important; }
.toptop-head a { text-decoration: underline; text-underline-offset: .2em; }

/* ---- Buttons ---- */
/* White text on --c4 is 4.0:1, so the button hover and the sidebar CTA use the theme's darker blue */
#wrapper .c-btn:not(.reverse):hover,
#wrapper a.c-btn:not(.reverse):hover { background: var(--b-cta); border-color: var(--b-cta); color: var(--white); }
#wrapper .selected-forhandler .go-to { background: var(--b-cta); }
#wrapper .selected-forhandler:hover .go-to { background: var(--b-cta-hover); }
#wrapper .selected-forhandler .go-to { border-radius: var(--b-radius); }
/* Row CTA: bolder label and a hover with enough contrast (was --c2 on --c4, 3.8:1) */
#wrapper .row-forhandler .pricelabel { font-weight: 700; padding: .7rem 1.6rem; }
#wrapper .row-forhandler:hover .pricelabel { background: var(--b-cta); color: var(--white); }
/* Filter chips in the hero: even gaps */
#wrapper .filter-list .c-btn.reverse { margin-bottom: var(--b-space-1) !important; }

/* ---- Retailer cards: hairline instead of shadow-only, one radius, calmer hover ---- */
#wrapper .row-forhandler,
#wrapper .selected-forhandler,
#wrapper .block-forhandler { border-radius: var(--b-radius-lg) !important; }
#wrapper .row-forhandler { border: 1px solid var(--b-line); box-shadow: var(--b-shadow); }
#wrapper .row-forhandler:hover { box-shadow: var(--b-shadow-hover); border-color: rgba(46, 133, 200, .45); }
/* Sort header labels: --gray on --c2 was 3.5:1 and 12px */
#wrapper .row-forhandler-title.color-grey { color: var(--b-muted); font-size: 1.3rem; padding-bottom: var(--b-space-1); white-space: nowrap; }
#wrapper .row-forhandler-title .picker { color: var(--b-muted); }
#wrapper .row-forhandler-title .picker.selected { color: var(--c1); }
/* Slider scale labels of the price calculator are grey 10px text at 2.5:1 */
#wrapper .irs-grid-text { color: var(--b-muted); font-size: 1rem; }
/* The comparison rows sit tighter in the list */
#wrapper #content-overview .row-forhandler { margin-bottom: var(--b-space-1) !important; }

/* Price slider bubble: white on #428bca is 3.6:1 */
#wrapper .irs-from, #wrapper .irs-to, #wrapper .irs-single { background: var(--b-cta); }
/* Pricerunner widget (third party, colour is inline so !important): button label white on #009e60 is 3.5:1, price-drop grey is 4.1:1 */
#wrapper .pr-widget-app .product-action .button-link span { background-color: var(--b-widget-green) !important; }
#wrapper .pr-widget-app .product-price-pricedrop { color: var(--b-widget-grey); }

/* ---- Speech bubble above the video (light text on #00cc99 was 1.9:1) ---- */
#wrapper span.speechbubble { background: var(--b-green); color: var(--white); }
#wrapper span.speechbubble:after { border-color: var(--b-green) transparent transparent var(--b-green); }

/* ---- Hero fallback colour: the photo and overlay are siblings of the text, so give the section the overlay's solid colour ---- */
.home #pager > section:first-child,
#pager > section.subheader { background-color: var(--b-hero); }

/* ---- Home hero: shorter and calmer ---- */
.home .hero-txt { margin-top: 9rem; margin-bottom: var(--b-space-2); }
.home .hero-txt.container { padding-top: var(--b-space-2) !important; padding-bottom: var(--b-space-2) !important; }
.home .hero-txt h1.f-0 { font-size: 5rem; line-height: 1.2; margin-bottom: var(--b-space-2); }
.home .hero-txt .f-3 { max-width: 60ch; line-height: 1.6; }
.home .hero-txt .c-btn.mb-3 { margin-bottom: var(--b-space-1) !important; }
.home .hero-txt .col-auto { padding-left: .6rem; padding-right: .6rem; }
.home .hero-txt .row.mb-5 { margin-bottom: 0 !important; }
/* The rating row inherits black for its (visually clipped) schema text; the hero is dark */
.home .hero-txt .star-rating { color: var(--white); }
@media (max-width: 767px) {
  .home .hero-txt { margin-top: 2rem; }
  .home .hero-txt h1.f-0 { font-size: 3.4rem; }
}

/* ---- Home: retailer logo strip. Flickity cells were centred on the strip's top edge and half hidden ---- */
.home section.forhandlere { overflow: hidden; padding-block: var(--b-space-1); }
.home .forhandlere .carousel-cell.align-self-center { align-self: start !important; top: 0; }
/* Home: the decorative arrow next to the video is positioned past the viewport edge on phones */
.home main#pager { overflow-x: clip; }

/* Video block: less air above and below (the arrow drawing needs room above) */
.home #pager > section:has(.youtube) { padding-top: var(--b-space-2) !important; padding-bottom: var(--b-space-2) !important; }
.home #pager > section:has(.youtube) > .container { padding-top: var(--b-space-4) !important; padding-bottom: var(--b-space-3) !important; }
.home a.thumb-hover .overflow.rounded { border-radius: var(--b-radius-lg); }
.home a.thumb-hover .overflow.rounded img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home a.thumb-hover h3.f-2 { margin-bottom: var(--b-space-1); line-height: 1.3; }
.home a.thumb-hover:hover h3 { color: var(--c1); }

/* ---- Long SEO text: shorter measure, tighter paragraph rhythm ---- */
/* :not(.m-0) keeps the theme's margin-free notice bar and info boxes as they are */
#wrapper .tekst:not(.m-0) { line-height: 1.7; }
#wrapper .tekst:not(.m-0) p { margin-bottom: var(--b-space-2); }
#wrapper .tekst:not(.m-0) h2, #wrapper .tekst:not(.m-0) h3, #wrapper .tekst:not(.m-0) h4 { margin-top: var(--b-space-3); margin-bottom: var(--b-space-1); line-height: 1.35; }
@media (min-width: 992px) {
  .home #wrapper section .tekst { max-width: 90ch; margin-left: auto; margin-right: auto; }
}

/* ---- Category / retailer pages ---- */
/* Hero: less padding around the text */
#wrapper .subheader > .container.py-5 { padding-top: var(--b-space-3) !important; padding-bottom: var(--b-space-3) !important; }
#wrapper .subheader h1.header-class { line-height: 1.25; }
/* Below the hero the list column leaves 4 empty columns; the logo grid uses the full width */
@media (min-width: 768px) {
  #wrapper .row.this > .col-md-8:has(#retailer_row) { flex: 0 0 100%; max-width: 100%; }
  /* Only the logo grid goes full width; the video and the text below keep a readable width */
  #wrapper .row.this > .col-md-8:has(#retailer_row) > .sektion { min-width: 0; max-width: 76rem; }
  #wrapper .row.this > .col-md-4:empty, #wrapper .row.this > .col-md-4:not(:has(*)) { display: none; }
}
#wrapper #retailer_row { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--b-space-2); margin: 0; }
#wrapper #retailer_row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; }
#wrapper #retailer_row .block-forhandler { position: relative; height: 100%; margin: 0 !important; padding: 0 !important; border: 1px solid var(--b-line); box-shadow: var(--b-shadow); display: grid; place-items: center; transition: box-shadow .2s, border-color .2s; }
#wrapper #retailer_row .block-forhandler:hover { box-shadow: var(--b-shadow-hover); border-color: rgba(46, 133, 200, .45); }
#wrapper #retailer_row .block-forhandler > .col-md-12 { padding: var(--b-space-1) var(--b-space-2); }
#wrapper #retailer_row .block-forhandler .row { margin: 0; }
#wrapper #retailer_row .block-forhandler .row > [class*="col-"] { padding: 0; }
#wrapper #retailer_row .block-forhandler img { height: 7rem; width: 100%; object-fit: contain; }
@media (max-width: 767px) {
  #wrapper .subheader .col-md-8 { margin-bottom: var(--b-space-3); }
  #wrapper #retailer_row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-space-1); }
  #wrapper #retailer_row .block-forhandler img { height: 5.6rem; }
}

/* ---- FAQ accordion ---- */
#wrapper .accordion .accrodion-title h4 { line-height: 1.4; }

/* ---- Footer: hover colour on --c1 was 4.0:1 ---- */
#ms-fod .footer_menu li a:hover { color: var(--b-on-dark-hover); }