/* Design layer for datalife.dk, loaded after the theme CSS. Same approach as the techii.dk layer: it only overrides existing selectors and tokens. */

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

  /* Site colours (from the theme's own palette) */
  --d-ink: #1d062f;             /* text and dark surfaces */
  --d-ink-soft: #54456a;        /* secondary text */
  --d-line: rgba(29, 6, 47, .12);
  --d-shadow: 0 .2rem 1.2rem rgba(29, 6, 47, .07);
  --d-tint: #f5faf9;            /* quiet panels */
  --d-winner-tint: #eef8f5;     /* winner row background */
  --d-brand: #6a6fb3;           /* labels, rank disc, winner bar (white text on it is 4.6:1) */
  --d-cta: #6bfbce;             /* buttons, with ink text */
  --d-cta-hover: #29b985;
  --d-link: #4a4fa0;            /* links on white, about 7:1 (the theme's #00a2e0 is 2.9:1) */
  --d-link-hover: var(--d-ink);
  --d-link-on-dark: #6bfbce;    /* links on the ink colour */
  --d-focus: var(--d-ink);
}

/* ---- Global ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: .3rem solid var(--d-focus); outline-offset: .2rem; border-radius: .4rem; }
header :focus-visible, footer :focus-visible { outline-color: var(--d-link-on-dark); }
/* Footer column headings: the brand purple is 4.0:1 on the ink colour, a lighter tint of it passes */
footer p.c1 { color: #a9ace0; }

/* The fixed "Huskeseddel" bar spans the whole width and swallowed clicks on the content under it, and its button sat in the middle of the
   screen over the overview table. Only the button takes clicks now, and it sits in the bottom-left corner (the to-top button is bottom-right). */
.mob-navi-wrap { pointer-events: none; justify-content: flex-start !important; padding-left: var(--space-2); }
.mob-navi-wrap > * { pointer-events: auto; }
.nav-btn-mob.mee- {
  padding: 1.1rem 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  background-color: var(--d-brand);
  box-shadow: 0 .4rem 1.4rem rgba(29, 6, 47, .25);
}
.nav-btn-mob.mee-:hover, .nav-btn-mob.mee-:focus { background-color: var(--d-link); box-shadow: 0 .4rem 1.4rem rgba(29, 6, 47, .3); animation: none; }

/* ---- Article hero ---- */
main.post-post .sub-hea > .z6 { margin-bottom: 0 !important; padding-block: var(--space-4) !important; }
main.post-post .sub-hea h1.f-u { line-height: 1.15; margin-bottom: var(--space-2) !important; }
main.post-post .sub-hea p.f-3 {
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.6;
  max-width: 72ch;
  margin-inline: auto;
}
main.post-post .sub-hea .auhtor { padding-top: var(--space-2) !important; }
main.post-post .sub-hea a { color: var(--d-link); }
main.post-post .write.txt { padding-top: var(--space-4); }
@media (max-width: 575px) {
  main.post-post .sub-hea > .z6 { padding-block: var(--space-3) !important; }
  main.post-post .sub-hea h1.f-u { font-size: 3rem; }
  main.post-post .sub-hea p.f-3 { font-size: 1.6rem; }
  main.post-post .write.txt { padding-top: var(--space-3); }
}

/* ---- Body text ---- */
main.post-post .write > p { line-height: 1.7; }
main.post-post .write > h2 { margin-top: var(--space-4) !important; line-height: 1.2; }
main.post-post .write > h3 { margin-top: var(--space-3) !important; line-height: 1.25; }
main.post-post .write > h2:first-child, main.post-post .write > h3:first-child { margin-top: 0 !important; }

/* Links in a dark brand blue instead of the light cyan */
main.post-post .write p a:not([class*="btn"]),
main.post-post .write li a,
main.post-post .write td a,
main.post-post .pricetag a,
main.post-post .highlights .rou-nd a,
main.post-post aside.sidebar .pricetag a {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main.post-post .write p a:not([class*="btn"]):hover,
main.post-post .write li a:hover,
main.post-post .write td a:hover,
main.post-post .pricetag a:hover { color: var(--d-link-hover); }
main.post-post .testvinder .pricetag a { color: var(--d-link-on-dark); }
main.post-post .testvinder .pricetag a:hover { color: #fff; }

/* Tables: hairline rows so the columns can be read */
main.post-post .write table { width: 100%; border-collapse: collapse; font-size: 1.5rem; line-height: 1.45; }
main.post-post .write table th, main.post-post .write table td { padding: .8rem 1rem; border-bottom: 1px solid var(--d-line); vertical-align: top; text-align: left; }
main.post-post .write table tr:first-child th, main.post-post .write table tr:first-child td { border-bottom-color: color-mix(in srgb, var(--d-ink) 30%, transparent); }
@media (max-width: 575px) {
  main.post-post .write table { font-size: 1.3rem; }
  main.post-post .write table th, main.post-post .write table td { padding: .6rem .4rem; }
}

/* Empty disclaimer frame (design.js marks it) */
#disclaimer.is-empty { display: none; }

/* ---- Overview table: one card, hairline rows ---- */
main.post-post .bestproducts-wrap {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow);
  padding: var(--space-2) 0 var(--space-1);
  overflow: hidden;
}
main.post-post .bestproducts-wrap .heaDer { margin-bottom: var(--space-2); }
main.post-post .bestproducts-wrap .heaDer::before { color: var(--d-brand); font-size: 1.1rem; letter-spacing: .08em; font-weight: 700; }
main.post-post .bestproducts-wrap ul.bestproducts-row { margin: 0 !important; padding: 0; border-top: 1px solid var(--d-line); }
main.post-post .bestproducts-wrap li.bestproducts,
main.post-post .bestproducts-wrap li.bestproducts:first-of-type {
  position: relative;
  left: auto; right: auto; width: auto;
  margin: 0 !important;
  padding: 1.2rem var(--space-2);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--d-line);
  border-radius: 0;
  box-shadow: none !important;
  flex-wrap: nowrap;
  transition: background-color .15s;
}
main.post-post .bestproducts-wrap li.bestproducts:last-child { border-bottom: 0; }
main.post-post .bestproducts-wrap li.bestproducts:hover { background: var(--d-tint); box-shadow: none !important; }
main.post-post .bestproducts-wrap li.bestproducts:first-of-type { background: var(--d-winner-tint); box-shadow: inset .4rem 0 0 var(--d-brand) !important; }
main.post-post .bestproducts-wrap .descR .overflow-txt { font-size: 1.5rem; line-height: 1.3; }
main.post-post .bestproducts-wrap .moRinfO { flex-wrap: wrap; align-items: center; gap: .2rem 1rem; margin-top: .2rem; color: var(--d-ink-soft); font-size: 1.3rem; }
main.post-post .bestproducts-wrap .moRinfO > * { margin: 0 !important; }
main.post-post .bestproducts-wrap .cta {
  background: #e9eaf6; color: #3d4190; border: 0 !important;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .2rem .8rem; border-radius: 99px;
}
main.post-post .bestproducts-wrap .price { font-size: 1.7rem; text-align: right; }
main.post-post .bestproducts-wrap i { color: var(--d-ink-soft); padding-top: var(--space-1); }

/* Rank discs: brand disc for the top 3 instead of the red starburst */
main.post-post li.bestproducts .num { width: 3.2rem; height: 3.2rem; border-radius: 50%; font-size: 1.4rem; color: var(--d-ink-soft); }
main.post-post li.bestproducts .num.lbb { background: var(--d-brand) !important; color: #fff; }

/* Dealer button: white with a hairline, the brand colour on hover */
main.post-post .bestproducts-wrap .dealer-btn {
  width: 100%; justify-content: space-between; white-space: nowrap;
  background: #fff; color: var(--d-ink);
  border: 1px solid var(--d-line) !important; border-radius: .8rem !important;
  padding: .6rem 1.2rem !important; font-size: 1.3rem !important;
}
main.post-post .bestproducts-wrap li.bestproducts:hover .dealer-btn { border-color: var(--d-brand) !important; }

/* "Vi anbefaler" on the first row: a small brand pill with a star */
main.post-post .bestproducts-wrap .promotionLine { top: 0 !important; transform: translateY(-50%); right: var(--space-2); left: auto !important; }
main.post-post .bestproducts-wrap .winner__ {
  position: relative;
  background: var(--d-brand) !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: .3rem 1rem .3rem 2.4rem !important;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  box-shadow: 0 .2rem .6rem rgba(29, 6, 47, .2);
}
main.post-post .bestproducts-wrap .winner__ span { color: #fff !important; }
main.post-post .bestproducts-wrap .winner__::before,
main.post-post .testvinder .shape::after {
  content: "";
  position: absolute; top: 50%; left: .9rem; width: 1.1rem; height: 1.1rem; transform: translateY(-50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Below 768px the theme hides the dealer button (and below 576px the price), so the row shows a chevron: the whole row is the link */
@media (max-width: 767px) {
  main.post-post .bestproducts-wrap li.bestproducts { padding: 1.2rem 1.2rem 1.2rem var(--space-1); }
  main.post-post .bestproducts-wrap li.bestproducts::after { content: "\203A"; order: 99; flex: none; margin-left: auto; padding-left: .4rem; font-size: 2.6rem; line-height: 1; color: var(--d-brand); }
  main.post-post .bestproducts-wrap .promotionLine { right: var(--space-1); }
}
@media (max-width: 575px) {
  main.post-post li.bestproducts .num { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; }
  main.post-post .bestproducts-wrap .descR .overflow-txt { font-size: 1.4rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  main.post-post .bestproducts-wrap .moRinfO { font-size: 1.2rem; gap: 0 .8rem; }
}

/* ---- Winner card (older articles): calm border and a pill badge instead of the rotated disc ---- */
main.post-post .testvinder {
  border: 0;
  box-shadow: 0 .4rem 2rem rgba(29, 6, 47, .18) !important;
  background-image: none !important;
}
main.post-post .testvinder .shape {
  width: auto; height: auto;
  top: var(--space-2); right: var(--space-2);
  padding: .5rem 1.2rem .5rem 2.8rem;
  border-radius: 99px;
  background: var(--d-cta);
  color: var(--d-ink);
  font-size: 1.2rem !important; line-height: 1.3; letter-spacing: .02em;
  box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .25);
}
main.post-post .testvinder .shape::after { left: 1rem; width: 1.2rem; height: 1.2rem; }
main.post-post .testvinder .colImg { background: #fff; }
main.post-post .testvinder .btn { background: var(--d-cta); background-image: none; color: var(--d-ink); border-radius: .8rem; font-weight: 700; }
main.post-post .testvinder .btn:hover { background: var(--d-cta-hover); color: var(--d-ink); }

/* ---- Product sections ---- */
main.post-post .test-row.bord-bot-spec { border-bottom: 1px solid var(--d-line) !important; margin-bottom: var(--space-4) !important; }
main.post-post .test-row .note { color: var(--d-ink-soft); font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
main.post-post .test-row h3.titLe { line-height: 1.2; }
main.post-post .test-row .pricetag { margin: .4rem 0 var(--space-2) !important; color: var(--d-ink-soft); line-height: 1.4; }

/* "Vi fremhæver" box: one hairline card instead of the 5px frame with an offset shadow that covered the price line above it */
main.post-post .txt .highlights {
  border: 1px solid var(--d-line);
  border-top: .4rem solid var(--d-brand);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow) !important;
  background: #fff;
}
main.post-post .highlights p.hLTl { font-family: var(--fw); font-weight: 700; font-size: 1.8rem; margin-bottom: var(--space-1) !important; }
main.post-post .highlights ul li { font-size: 1.5rem; line-height: 1.5; }
main.post-post .highlights .rou-nd { box-shadow: none !important; background: var(--d-tint); border-radius: .8rem; font-size: 1.3rem; line-height: 1.5; color: var(--d-ink-soft); }
main.post-post .highlights a.btn,
main.post-post .pr-row .btn {
  background: var(--d-cta);
  background-image: none;
  color: var(--d-ink);
  border-radius: .8rem;
  font-weight: 700;
  transition: background-color .15s;
}
main.post-post .highlights a.btn { padding-block: 1rem; font-size: 1.4rem; }
main.post-post .highlights a.btn:hover,
main.post-post .pr-row-wrap:hover .btn { background: var(--d-cta-hover); color: var(--d-ink); }
main.post-post .highlights i { color: var(--d-ink-soft); }
@media (max-width: 767px) { main.post-post .txt .highlights { margin-inline: 0 !important; } }
/* "Bedst til prisen" / "Budget valg": a pill on the box edge instead of the rotated disc that stuck out over the heading */
main.post-post .highlights .bbl {
  width: auto; height: auto;
  top: 0; right: var(--space-2);
  transform: translateY(-50%);
  padding: .5rem 1.2rem;
  border-radius: 99px;
  background: var(--d-cta);
  color: var(--d-ink);
  white-space: nowrap;
  line-height: 1.2;
  letter-spacing: .03em;
  box-shadow: 0 .2rem .6rem rgba(29, 6, 47, .18);
}

/* "Produktet kan også købes her": hairline rows instead of floating shadows */
main.post-post .pr-tabel { border-top: 1px solid var(--d-line); padding-top: var(--space-3); margin-top: var(--space-2); }
main.post-post .pr-tabel .tbTitLe { font-size: 1.9rem; }
main.post-post .pr-tabel i { color: var(--d-ink-soft); margin-bottom: var(--space-2); }
main.post-post .pr-row {
  box-shadow: none !important;
  border: 1px solid var(--d-line);
  border-radius: .8rem !important;
  background: #fff;
  transition: border-color .15s, background-color .15s;
}
main.post-post .pr-row-wrap:hover .pr-row { border-color: var(--d-brand); background: var(--d-tint); }
main.post-post .pr-row .btn.p__r { border-radius: .8rem; }