/* Design layer for pegebogen.dk ("tighten, do not redesign"). Loaded after the theme CSS; brand colours, fonts and layout are the theme's own. */

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

  /* Site colours: the theme's own palette, only darkened where text needs 4.5:1 */
  --d-ink: #1B1A23;              /* theme --black: text, and text on the accent colours */
  --d-purple: #6F69AC;           /* theme --c1: buttons, badges, rank borders (white on it 4.9:1) */
  --d-purple-dark: #5D5896;      /* the theme's own purple hover colour */
  --d-purple-text: #6A64A6;      /* --c1 nudged so purple text passes 4.5:1 on the cream footer (#FAF1E6) */
  --d-pink: #FD6F96;             /* theme --c4: stays for shapes and underlines, too light for text */
  --d-pink-text: #AC4B66;        /* --c4 mixed 32% toward black: pink text at 4.7:1 on cream, 5.3:1 on white */
  --d-pink-text-hover: #8B3D53;  /* hover for pink text */
  --d-mint: #95DAC1;             /* theme --c2 */
  --d-cream: #FAF1E6;            /* theme --gray */
  --d-page: #FDFAF6;             /* theme --gray-light */
  --d-win-tint: #FFF6D3;         /* --c3 yellow diluted, background of the recommended row */
  --d-line: rgba(27, 26, 35, .12);
  --d-shadow: 0 .2rem 1.2rem rgba(27, 26, 35, .06);
}

/* ---- Global: links, focus, header, footer ---- */
/* The theme removes every focus outline (a { outline: 0 }); give keyboard users a visible ring */
main a:focus-visible, header#masthead a:focus-visible, footer#footer a:focus-visible,
main .btn:focus-visible, main .toc_button:focus-visible, main button:focus-visible {
  outline: .3rem solid var(--d-purple-dark);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* Whole-card overlay links have no box of their own, so the ring sits just inside the card */
main a.fixed:focus-visible { outline-offset: -.3rem; border-radius: 0; }
/* Theme hover colour #1b98ba is only 3.6:1 on white */
main a:not(.btn):not(.black):not(.white):not(.fixed):hover, footer#footer a:hover { color: var(--d-pink-text-hover); }

/* Hovered and active menu items were mint on cream (1.5:1); keep them purple and show the state with a mint underline */
header#masthead .primary_menu .parent-menu-item:hover .parent-menu-element,
header#masthead .primary_menu .parent-menu-item.active .parent-menu-element {
  color: var(--d-purple-dark);
  text-decoration: underline;
  text-decoration-color: var(--d-mint);
  text-decoration-thickness: .3rem;
  text-underline-offset: .6rem;
}
/* Mega-menu headings and card labels were mint/pink on purple (3.0:1 and 1.3:1); white passes (4.9:1) */
header#masthead .submenu .c2, header#masthead .submenu .info { color: #fff; }
header#masthead .submenu-inner a:hover, header#masthead .submenu-inner a:focus-visible { color: #fff; text-decoration: underline; }
header#masthead .submenu a:focus-visible { outline-color: #fff; }

/* The opened mobile menu is a fixed 295px panel with no background, so links were printed over the logo and the page */
@media (max-width: 880px) {
  header#masthead nav.primary_menu.menuelements { background: var(--d-page); padding: var(--space-4) var(--space-2) var(--space-2); }
}

/* Footer: pink and purple text on cream failed AA (2.4:1 and 4.4:1); links get a taller tap target */
footer#footer { padding-block: var(--space-4) !important; }
footer#footer > .container > .border-top.border-bottom { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; border-color: var(--d-line) !important; }
footer#footer p.c1 { color: var(--d-purple-text); margin-bottom: var(--space-1); }
footer#footer a.d-block { color: var(--d-pink-text); padding-block: .3rem; }
footer#footer .c4, footer#footer .c4 p { color: var(--d-pink-text); }
/* White chevron on the pink scroll-up blob was 2.4:1 */
span.scrollup { color: var(--d-ink); }

/* ---- Post cards: category label, date, buttons ---- */
/* Category links were pink 10.5px caps (2.6:1); now AA pink at 12px */
main .block-content .mini-md, main .block-news .mini-md, main span.info.c4 { font-size: 1.2rem; letter-spacing: .04em; }
main .block-content .mini-md a, main .block-news .mini-md a, main span.info.c4 { color: var(--d-pink-text); }
main .block-content .mini-md a:hover, main .block-news .mini-md a:hover { color: var(--d-pink-text-hover); }
main .block-content .mini-md .c1 { color: var(--d-purple-text); }
/* The read-more pill was 10.5px */
main .block-split .btn { font-size: 1.3rem; padding: .5rem 1.6rem; }
/* Sidebar titles were 13px bold, forced with !important */
main .seneste .block-split h4, main .sidebar .block-split h4 { font-size: 1.4rem !important; line-height: 1.3; }

/* ---- Archive (category) pages ---- */
/* The theme's no-gutters row keeps its negative margins, so the title sat flush against the screen edge and the card list overflowed by 16px */
main.archive .archive-header { padding: var(--space-3) var(--space-2) 0; }
main.archive #element-list { margin-inline: 0; margin-block: var(--space-3) var(--space-2) !important; /* bootstrap .my-5 is !important */ }
main.archive .sektion { margin: var(--space-3) 0 var(--space-2) !important; }
main.archive .sektion > ul.row { margin-inline: 0; }
/* next-page was a 10.5px button */
main.archive .sektion .btn { font-size: 1.4rem; padding: .8rem 2.4rem; }
/* Card titles were cut off with an ellipsis; allow two lines */
main.archive #element-list .block-news h4 {
  white-space: normal; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.3;
}
@media (min-width: 768px) { main.archive #element-list .block-news h4 { min-height: 2.6em; } }
main.archive #element-list .block-news > div { border-color: var(--d-line) !important; }

/* ---- Article page ---- */
main.post-post .subheader h1 { line-height: 1.2; margin-bottom: var(--space-2); }
main.post-post .subheader > p.f-3 { line-height: 1.5; margin-bottom: var(--space-2); }
main.post-post .auhtor { border-color: var(--d-line) !important; }
main.post-post .write { font-size: 1.6rem; }
/* Body copy: 1.9 line height and 100-character lines were loose */
main.post-post .write > p, main.post-post .write > ul, main.post-post .write > ol { line-height: 1.7; max-width: 72ch; }
main.post-post .write > p { margin-bottom: var(--space-2); }
main.post-post .write > h2 { margin: var(--space-4) 0 var(--space-2); line-height: 1.25; }
main.post-post .write > h3 { margin: var(--space-3) 0 var(--space-1); line-height: 1.3; }
main.post-post .write > h2:first-child, main.post-post .write > h3:first-child { margin-top: 0; }

/* Text links: pink was 2.7:1 on white; AA pink plus an underline so they do not rely on colour alone */
main.post-post .write p a:not(.btn),
main.post-post .write li a:not(.black):not(.fi-xd):not(.btn),
main.post-post .test-row .whereTBuy a,
main.post-post .auhtor p a {
  color: var(--d-pink-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main.post-post .write p a:not(.btn):hover,
main.post-post .write li a:not(.black):not(.fi-xd):hover,
main.post-post .test-row .whereTBuy a:hover,
main.post-post .auhtor p a:hover { color: var(--d-pink-text-hover); }
main.post-post .toc_ul a.black { color: var(--d-ink); }
/* Theme blockquote is white text on yellow (1.2:1) */
main.post-post .write blockquote { color: var(--d-ink); }

/* Empty disclaimer frame: the plugin prints a bordered box even when it has no content */
main.post-post #disclaimer { border-color: var(--d-line); border-radius: var(--card-radius); }
main.post-post #disclaimer:not(:has(*)) { display: none; }

/* ---- Product overview ("Bedste ... i test"): one card, hairline dividers, one row height ---- */
main.post-post .bestproducts-wrap {
  background: var(--d-page);
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  padding: var(--space-3) var(--space-2) var(--space-2);
  margin-bottom: var(--space-3) !important;
}
main.post-post .bestproducts-wrap .heaDer { margin-bottom: var(--space-3); line-height: 1.2; }
main.post-post .bestproducts-wrap .heaDer:before { color: var(--d-purple-text); letter-spacing: .06em; margin-bottom: .4rem; }
main.post-post .bestproducts-wrap ul.bestproducts-row {
  margin: 0;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow);
}
/* The theme widens the first row past the card and floats each row as its own shadowed pill */
main.post-post .bestproducts-wrap li.bestproducts {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2);
  left: auto; right: auto; width: auto;
  margin: 0; padding: 1.2rem var(--space-2);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--d-line); border-radius: 0;
  box-shadow: none !important;
  transition: background-color .15s;
}
main.post-post .bestproducts-wrap li.bestproducts:first-child { border-radius: var(--card-radius) var(--card-radius) 0 0; background: var(--d-win-tint); box-shadow: inset .4rem 0 0 var(--d-purple) !important; }
main.post-post .bestproducts-wrap li.bestproducts:last-child { border-bottom: 0; border-radius: 0 0 var(--card-radius) var(--card-radius); }
main.post-post .bestproducts-wrap li.bestproducts:hover { background: var(--d-cream); }
main.post-post .bestproducts-wrap li.bestproducts:first-child:hover { background: var(--d-win-tint); }
/* Bootstrap column classes are replaced by fixed columns so every row lines up */
main.post-post .bestproducts-wrap li.bestproducts > div { flex: none; width: auto; max-width: none; padding: 0; margin: 0; order: 0 !important; }
main.post-post .bestproducts-wrap li.bestproducts > .descR { flex: 1 1 0; min-width: 0; }
main.post-post .bestproducts-wrap li.bestproducts > .offer { width: 16rem; }
main.post-post .bestproducts-wrap li.bestproducts > .price { width: 9rem; text-align: right; font-size: 1.8rem; }
/* Product names were cut with an ellipsis on one line; allow two */
main.post-post .bestproducts-wrap .descR .overflow-txt {
  font-size: 1.6rem; line-height: 1.3;
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
main.post-post .bestproducts-wrap .moRinfO { margin-top: .2rem; font-size: 1.4rem; line-height: 1.4; }
main.post-post .bestproducts-wrap .num { flex: none; }
/* White rank numbers on the pink star were 2.9:1 */
main.post-post .bestproducts-wrap li.bestproducts .num.lbb { color: var(--d-ink); }
/* recommendation sat in an 80px box and wrapped onto two lines */
main.post-post .bestproducts-wrap li.bestproducts .promotionLine { left: auto; right: var(--space-2); top: 0; width: auto; transform: translateY(-50%); }
main.post-post .bestproducts-wrap .promotionLine .winner__ {
  position: static; width: auto; height: auto;
  padding: .4rem 1.2rem .5rem;
  border-radius: 99px !important;
  background: var(--d-purple); color: #fff;
  font-size: 1.2rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
main.post-post .bestproducts-wrap .promotionLine .winner__ span { border-radius: 0 !important; z-index: auto; }
/* Dealer button: the 3px lilac border was heavy; hairline in the brand purple instead */
main.post-post .bestproducts-wrap .dealer-btn {
  width: 100%; justify-content: space-between; white-space: nowrap;
  border: 1px solid var(--d-purple); border-radius: .8rem;
  padding: .6rem 1.2rem; background: #fff; font-size: 1.3rem !important;
}
main.post-post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-purple-dark); box-shadow: inset 0 0 0 1px var(--d-purple-dark); }
main.post-post .bestproducts-wrap > .text-center { margin-top: var(--space-2); }
/* Rows shrink gracefully: no dealer button below 768px, so a chevron shows the row is a link */
@media (max-width: 991px) {
  main.post-post .bestproducts-wrap li.bestproducts > .offer { width: 14rem; }
  main.post-post .bestproducts-wrap li.bestproducts > .price { width: 8rem; }
}
@media (max-width: 767px) {
  main.post-post .bestproducts-wrap li.bestproducts::after { content: "\203A"; margin-left: auto; font-size: 2.4rem; line-height: 1; color: var(--d-purple-text); }
}
@media (max-width: 575px) {
  main.post-post .bestproducts-wrap { padding: var(--space-3) var(--space-1) var(--space-1); }
  main.post-post .bestproducts-wrap li.bestproducts { padding: 1.2rem var(--space-2); gap: 1.2rem; }
  main.post-post .bestproducts-wrap li.bestproducts:first-child { padding-top: var(--space-3); }
  main.post-post .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; }
}

/* ---- Test winner card ---- */
/* Hover colour was white on lilac (2.5:1); use the theme's darker purple (6.4:1) */
main.post-post .testvinder .btn:hover { background: var(--d-purple-dark); color: #fff; }
/* The two-line recommendation badge inherited the 1.9 body line height */
main.post-post .testvinder .shape { line-height: 1.2; text-align: center; }

/* ---- Product detail cards ("1. Produktnavn") ---- */
/* Cards were white on white with a shadow you could hardly see: one hairline border instead */
main.post-post .test-row { border: 1px solid var(--d-line); box-shadow: none; margin-bottom: var(--space-3); }
/* The highlights panel stuck out 24px to the left of its card and touched the price line above it */
main.post-post .test-row .highLights { left: 0; padding: var(--space-3); box-shadow: none; border: 1px solid var(--d-line); }
main.post-post .test-row .pricetag { flex-wrap: wrap; gap: .2rem .8rem; margin-bottom: var(--space-3); }
main.post-post .test-row .pricetag .stocK { margin-left: 0; }
@media (min-width: 576px) { main.post-post .test-row .pricetag { justify-content: center; } }
main.post-post .test-row .buyNow .titLe:after, main.post-post .test-row .highLights .titLe:after { background: var(--d-line); }
main.post-post .test-row .highLights .titLe, main.post-post .test-row .buyNow .whereTBuy, main.post-post .test-row .buyNow i { color: var(--d-purple-text) !important; }
main.post-post .pr-row { box-shadow: none; border: 1px solid var(--d-line); }
main.post-post .pr-row:hover { box-shadow: none !important; background: var(--d-page); }
/* also-available-at heading inherited the 1.9 line height, and store names were cut on one line */
main.post-post .pr-tabel .tbTitLe { line-height: 1.3; padding-top: var(--space-2); }
main.post-post .pr-row .naMe {
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-height: 1.35;
}