/* Design layer for havekrogen.dk. Loaded after the theme CSS ("tighten, do not redesign").
   The product-row plugin prints its own <style id="prInFooter"> in the page footer, i.e. AFTER this file,
   so every rule that overrides it has a higher specificity (main.post-post ... / main.archive ...) or !important. */

/* ---- Tokens (all values come from the theme's own :root palette) ---- */
:root {
  --space-1: .8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 4rem;
  --card-radius: 1.6rem;

  --d-ink: #0a0a0a;             /* text and text on the mint accent (12:1 on mint) */
  --d-ink-soft: #3c414c;        /* secondary text (theme --gray-dark) */
  --d-line: rgba(10, 10, 10, .12);
  --d-shadow: 0 .2rem 1.2rem rgba(10, 10, 10, .07);
  --d-page: #f6f8f3;            /* colour of the theme's page background image */
  --d-accent: #79e0b4;          /* theme --c1: buttons, badges */
  --d-accent-hover: #6cc9a2;    /* theme --c1-- */
  --d-brand: #457863;           /* theme --c3: 5.1:1 on white, dark surfaces */
  --d-on-dark: #fff;
  --d-link: #17748e;            /* theme link colour, 5.3:1 on white */
  --d-link-hover: #0f5468;      /* darker, not lighter, on hover (theme hover #1b98ba is 3.5:1) */
  --d-alert: #fd6363;           /* theme --attention: winner border and rank discs */
  --d-danger: #a93800;          /* theme --danger */
  --d-focus: #17748e;
}

/* ---- Global: focus, selection, scroll-up ---- */
/* The theme removes every outline (a { outline: 0 }); give keyboard users a visible ring */
main a:focus-visible, .head a:focus-visible, #footer a:focus-visible,
main .btn:focus-visible, main .toc-button:focus-visible, main .accrodion-title:focus-visible {
  outline: .3rem solid var(--d-focus);
  outline-offset: .2rem;
  border-radius: .4rem;
}
#footer a:focus-visible { outline-color: var(--d-on-dark); }
/* The full-card cover links are empty and larger than the card content: ring inside the card */
main a.fixed:focus-visible { outline-offset: -.4rem; border-radius: 0; }
/* The theme's selection is white text on mint (1.6:1) */
::selection { background: var(--d-accent); color: var(--d-ink); }
/* White arrow on mint is 1.6:1 */
.scrollup { color: var(--d-ink); }
/* The menu hover colour is mint on the light page (1.6:1) */
.primary_menu .parent-menu-item .parent-menu-element:hover,
.primary_menu .parent-menu-item.active .parent-menu-element { color: var(--d-brand); }

/* ---- Buttons: dark text on mint (theme uses white or green text on mint, 1.5 to 3.2:1) ---- */
.btn.bg, a.btn.bg, .btn.gr__, .highlights .btn, .btn.p__r, .testvinder .btn {
  color: var(--d-ink);
  font-weight: 700;
}
.btn.bg, a.btn.bg { font-size: 1.4rem; padding: .8rem 2rem; background: var(--d-accent); border-color: var(--d-accent); border-radius: .8rem; }
.btn.bg:hover, a.btn.bg:hover { background: var(--d-accent-hover); border-color: var(--d-accent-hover); color: var(--d-ink); }
.testvinder .btn, .highlights .btn, .btn.p__r { background: var(--d-accent); background-image: none; }
.testvinder .btn:hover, .highlights .btn:hover, .btn.p__r:hover { background: var(--d-accent-hover); color: var(--d-ink); }
.testvinder .btn { border: 0; padding: 1rem 2rem; }
.highlights .btn { border: 0; border-radius: .8rem; padding: 1rem 1.6rem; }
/* read-more ghost button on the front page: readable size, brand outline instead of an invisible border */
.block-split .btn { font-size: 1.2rem; border: 1px solid var(--d-brand); color: var(--d-brand); border-radius: .6rem; padding: .5rem 1.4rem; }
.block-split:hover .btn { background: var(--d-accent); border-color: var(--d-accent); color: var(--d-ink); }

/* ---- Footer ---- */
/* Footer headings were mint on green (3.2:1) */
footer#footer p.c1 { color: var(--d-on-dark); letter-spacing: .04em; }
/* Hairline instead of a solid white rule under every footer link, a little air between them */
footer#footer a.white { border-bottom-color: rgba(255, 255, 255, .35); padding-block: .3rem; }
footer#footer a.white:hover { border-bottom-color: var(--d-accent); color: var(--d-accent); }
footer#footer a.logo { border-bottom: 0; }

/* ---- Cards (front page, archives): meta text was 10px ---- */
.block-news .f-6, .block-split .f-6, .block-main .f-6 { font-size: 1.2rem; letter-spacing: .04em; }
/* The page background image (leaf, flower pot, wheelbarrow) ran through the caption text; captions get the page colour */
.block-news.block-content, main.archive .block-news { background: var(--d-page); display: flow-root; }
.block-news.block-content > .border-bottom, main.archive .block-news > .border-bottom { border-color: var(--d-line) !important; }

/* ---- Front page: keep the peeking slider slides from widening the page (scrollWidth was up to 3207px) ---- */
#flowder, #flowder_latest { overflow-x: clip; }

/* ---- Archive (category) ---- */
/* The card list is a flex item and grew to 535px on a 375px screen (144px overflow, text cut off) */
main.archive #element-list { flex: 1 1 100%; min-width: 0; }
@media (max-width: 767px) {
  /* Cards ran edge to edge with the title against the screen border */
  main.archive #element-list, main.archive .sektion > ul.row { margin-inline: 0; }
  /* Below md the cards have no column class; they only stacked because the list was too wide. One card per line */
  main.archive #element-list > article { flex: 0 0 100%; max-width: 100%; }
}
main.archive .archive-header { padding-block: var(--space-3) !important; }
main.archive .block-news img.fill { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
main.archive .block-news { margin-bottom: 0; }
main.archive .sektion.my-5 { margin-block: var(--space-3) !important; }

/* ---- Article ---- */
/* Headline: the theme's 1.4 line-height on a 5-line mobile title is loose */
main.post-post .subheader h1.f-u { line-height: 1.2; }
@media (max-width: 680px) { main.post-post .subheader h1.f-u { font-size: 2.6rem; } }
/* Body copy: 1.95 line-height is airy for long affiliate articles */
main.post-post .write > p, main.post-post .write > ul li, main.post-post .write > ol li { line-height: 1.75; }
/* Inline links: underlined, darker on hover (the theme hover is lighter and fails contrast) */
main.post-post .write p a:not(.btn):not(.black), main.post-post .write li a:not(.btn) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
main.post-post .write a:not(.btn):not(.black):hover, main.post-post .pricetag a:hover { color: var(--d-link-hover); }
main.post-post .pricetag a { color: var(--d-link); border-bottom-color: currentColor; }

/* Table of contents: one calm box */
main.post-post .toc-box { border: 1px solid var(--d-line); border-radius: var(--card-radius); background: #fff; margin-bottom: var(--space-2); }

/* FAQ accordion: hairline border, air between question and answer, and a + that turns into x when open
   (the icon glyph is already an x, so the theme's rotate(45deg) showed + when open and x when closed) */
main.post-post .accordion .card { border: 1px solid var(--d-line); border-radius: var(--card-radius) !important; background: #fff; }
main.post-post .accordion .card-body { padding: var(--space-1) 0 0; }
.accrodion-title .icon__plus:after { transform: rotate(45deg); }
.accrodion-title[aria-expanded="true"] .icon__plus:after { transform: none; }

/* Empty disclaimer frame (design.js hides it when it has no content) */
#disclaimer { border-color: var(--d-line); }
#disclaimer.is-empty { display: none; }

/* ---- "Vores anbefaling" winner card ---- */
/* The 10rem mint circle covered the image corner and text (mobile); make it a small pill on the card edge */
main.post-post .testvinder { border-color: var(--d-alert); box-shadow: var(--d-shadow) !important; margin-block: var(--space-4) var(--space-3); }
main.post-post .testvinder .shape {
  width: auto; height: auto; left: auto; right: var(--space-3); top: -1.5rem;
  padding: .7rem 1.4rem; border-radius: 99px;
  background: var(--d-accent); color: var(--d-ink);
  box-shadow: 0 .3rem 1rem rgba(10, 10, 10, .12);
  font-size: 1.3rem !important; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
/* The plugin gives the text column 4rem top padding to make room for the circle */
main.post-post .testvinder .conTnt { padding: var(--space-3) var(--space-2) !important; }
main.post-post .testvinder .colImg { padding: var(--space-2); }
@media (max-width: 767px) { main.post-post .testvinder .colImg { padding-bottom: 0; } }

/* ---- Product rows (plugin markup, also used on the sister sites) ---- */
main.post-post .bestproducts-wrap { border-radius: var(--card-radius); padding-block: var(--space-2); }
/* Gray "OVERSIGT" label was mint on near-white (1.5:1) */
main.post-post .bestproducts-wrap .heaDer:before { color: var(--d-brand); font-weight: 700; letter-spacing: .06em; }
main.post-post .bestproducts-wrap .heaDer { margin-bottom: var(--space-3); }
/* One card style for every row: same radius, hairline plus soft shadow (the plugin uses !important shadows) */
main.post-post .bestproducts-wrap li.bestproducts {
  border-radius: var(--card-radius);
  box-shadow: 0 0 0 1px var(--d-line), 0 .2rem .8rem rgba(10, 10, 10, .05) !important;
  margin-bottom: var(--space-1);
  padding-block: 1rem;
}
main.post-post .bestproducts-wrap li.bestproducts:hover { box-shadow: 0 0 0 1px var(--d-brand), 0 .4rem 1.2rem rgba(10, 10, 10, .08) !important; }
/* The first row stuck out 8px left and 16px right of its siblings; keep the alert border, align the width */
main.post-post .bestproducts-wrap li.bestproducts:first-of-type {
  left: auto; right: auto; width: auto;
  border: 0;
  box-shadow: 0 0 0 1.5px var(--d-alert), 0 .2rem .8rem rgba(10, 10, 10, .05) !important;
}
/* recommendation label: white on mint was 1.6:1 */
main.post-post .bestproducts-wrap li.bestproducts .promotionLine .winner__,
main.post-post .bestproducts-wrap li.bestproducts .promotionLine .winner__ span {
  color: var(--d-ink);
  font-weight: 700;
  border-radius: 99px !important;
  padding: .3rem 1rem .4rem;
}
main.post-post .bestproducts-wrap li.bestproducts:first-of-type .promotionLine { top: -1.1rem; right: var(--space-3); width: auto; }
/* Rank number on the red disc: white was 2.9:1 */
main.post-post li.bestproducts .num.lbb { color: var(--d-ink); }
/* Secondary row line was 11px (the plugin's later rule beats its own media query) */
main.post-post .bestproducts-wrap .bestproducts .moRinfO { font-size: 1.3rem; color: var(--d-ink-soft); }
/* Dealer button: thinner ring in the brand mint instead of a 3px neon-green border */
main.post-post .bestproducts-wrap .dealer-btn { border: 2px solid var(--d-accent-hover); color: var(--d-ink); background: #fff; }
main.post-post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-brand); }
/* Out-of-stock had no visible marker (its dot had no background) */
main.post-post .stockStatus.no-stock:before { background: var(--d-danger); }
/* Long product names pushed the name to its own line on phones; let it shrink and wrap to two lines */
main.post-post .bestproducts-wrap li.bestproducts > .descR { min-width: 0; }
@media (max-width: 575px) {
  main.post-post .bestproducts-wrap li.bestproducts { flex-wrap: nowrap; }
  main.post-post .bestproducts-wrap li.bestproducts > .descR { flex: 1 1 0; max-width: none; }
  main.post-post .bestproducts-wrap .descR .overflow-txt {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.25;
  }
}

/* ---- Detail block per product (.test-row) ---- */
main.post-post .test-row { border: 1px solid var(--d-line); box-shadow: var(--d-shadow); border-radius: var(--card-radius); margin-bottom: var(--space-4) !important; }
/* Product headings inherit the body line-height (1.95) and broke mid-word on phones */
main.post-post .test-row .titLe, main.post-post .pr-tabel .tbTitLe { line-height: 1.25; }
@media (max-width: 575px) {
  main.post-post .test-row { padding: var(--space-2); }
  main.post-post .test-row .titLe { font-size: 2.2rem; }
  main.post-post .pr-tabel .tbTitLe { font-size: 2.2rem !important; }
}
/* Chip "Bedst til prisen": 10px black text on nothing; make it a readable mint chip */
main.post-post .highlights .bbl {
  display: inline-flex !important; width: auto !important; height: auto; line-height: 1;
  background: var(--d-accent); color: var(--d-ink); border-radius: .6rem;
  font-size: 1.1rem !important; letter-spacing: .04em; padding: .5rem 1rem; margin-bottom: var(--space-1);
}
main.post-post .highlights { border-radius: var(--card-radius); box-shadow: var(--d-shadow) !important; }
/* Retailer rows: one line on wide screens (name, stock, price, button) instead of button under the text */
@media (min-width: 768px) {
  main.post-post .pr-row { flex-wrap: nowrap; align-items: center; }
  main.post-post .pr-row .naMe { width: auto; flex: 1 1 0; min-width: 0; }
  main.post-post .pr-row .priCe, main.post-post .pr-row .stoCk { width: auto; flex: 0 0 auto; }
  main.post-post .pr-row .offer-btn { width: 12rem; flex: 0 0 12rem; margin-top: 0; }
}
main.post-post .pr-row { border: 1px solid var(--d-line); box-shadow: none; border-radius: var(--card-radius); }
main.post-post .pr-row:hover { box-shadow: 0 .4rem 1.2rem rgba(10, 10, 10, .08) !important; border-color: var(--d-brand); }
main.post-post .pr-row .btn.p__r { border-radius: .8rem; padding: .6rem 1.2rem; box-shadow: none; }