/* Design layer for tildenlille.dk (theme "tildenlille"). Loaded after the theme CSS. Tighten, do not redesign:
   same fonts, brand colours and layout; readable contrast, calmer edges, tighter spacing, visible focus.
   Colour tokens are the only per-site part. Everything is scoped to #wrapper or to a class that exists in the theme. */

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

  /* Brand colours from the theme (--black, --c1, --c2, --c3) */
  --d-ink: #32355d;             /* text, footer background */
  --d-ink-deep: #2c2f55;        /* text on the pink bar / circle and on the orange badge (4.8:1 or better) */
  --d-teal: #65c4bc;            /* buttons, badges (with dark text) */
  --d-pink: #ff6f96;            /* top bar, hero circle */
  --d-yellow: #fbb335;          /* welcome box, main buttons */
  --d-yellow-soft: #ffd863;     /* theme hover colour of the buttons */
  --d-tint: #d1e9ed;            /* quiet button on category cards */

  /* Darkened only as far as needed for 4.5:1 (3:1 for graphics) */
  --d-link: #0f7896;            /* theme link blue #1b98ba was 3.4:1 on white */
  --d-link-hover: #0a5a72;
  --d-teal-text: #277d76;       /* breadcrumbs and active menu item; #65c4bc was 2.1:1 */
  --d-pink-text: #b02c55;       /* small pink sub-titles on the pastel page background */
  --d-pink-ui: #e2486f;         /* hamburger bars, 3:1 on white */
  --d-muted: #6a6a6a;           /* theme grey #868686 was 3.6:1 */
  --d-success-text: #0c7a50;    /* in-stock; #2fe395 was 1.7:1 */

  --d-line: rgba(50, 53, 93, .12);
  --d-shadow: 0 .4rem 1.6rem rgba(50, 53, 93, .10);
}

/* ---- Top note bar ---- */
/* Dark text on the pink bar was 4.4:1 and the inline white read-more was 2.6:1 */
aside.toptop-head,
aside.toptop-head p,
aside.toptop-head strong,
aside.toptop-head a,
aside.toptop-head a span,
aside.toptop-head a strong { color: var(--d-ink-deep) !important; }
aside.toptop-head a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 680px) {
  /* The sticky bar wrapped to two lines and covered 64px of a phone screen */
  aside.toptop-head.f-4 { font-size: 1.15rem !important; }
  aside.toptop-head p { line-height: 1.35; }
  aside.toptop-head .col-sm-12 { padding-inline: var(--d-space-1); }
}

/* ---- Focus ---- */
/* The theme has no focus ring, only a colour change on hover/focus */
#wrapper a:focus-visible,
#wrapper button:focus-visible,
#wrapper input:focus-visible,
#wrapper select:focus-visible,
#wrapper textarea:focus-visible,
#wrapper [tabindex]:focus-visible {
  outline: .3rem solid var(--d-ink);
  outline-offset: .2rem;
}
/* Dark footer needs a light ring */
#wrapper footer a:focus-visible { outline-color: #fff; }
/* The invisible full-card link on the hero boxes: draw the ring inside the box */
#wrapper a.fixed:focus-visible { outline-offset: -.6rem; }
#wrapper a.scrollup:focus-visible { outline-color: var(--d-ink); outline-offset: .3rem; }

/* ---- Header and menu ---- */
/* Hamburger bars: pink on white was 2.6:1 */
#wrapper .hamburger span::before,
#wrapper .hamburger span::after,
#wrapper .cross span { background-color: var(--d-pink-ui); }
/* Hover/active menu colour teal on white was 2.1:1 (desktop menu is on white) */
@media (min-width: 881px) {
  #wrapper .primary_menu .parent-menu-item .parent-menu-element:hover,
  #wrapper .primary_menu .parent-menu-item.active .parent-menu-element { color: var(--d-teal-text); }
}
/* Below 881px the menu is a pink panel: navy on pink was 4.4:1 */
@media (max-width: 880px) {
  #wrapper .menuelements .parent-menu-element,
  #wrapper .primary_menu .parent-menu-item .parent-menu-element:hover,
  #wrapper .primary_menu .parent-menu-item.active .parent-menu-element { color: var(--d-ink-deep); }
}

/* ---- Contrast of theme utility classes ---- */
/* Grey helper text (dates, author, PriceRunner disclosure) was 3.6:1 */
#wrapper .color-grey { color: var(--d-muted); }
/* Stock status text was 1.7:1; the green tick disc stays in the brand green */
#wrapper .stockStatus.in-stock { color: var(--d-success-text); }

/* ---- Links inside text ---- */
/* Blue links were 3.4:1, the visited blue 3:1, and colour alone did not set them apart from the text */
#wrapper .write a:not(.btn):not(.ms-btn),
#wrapper .write a:not(.btn):not(.ms-btn):visited,
#wrapper .author-info a,
#wrapper .author-info a:visited {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
#wrapper .write a:not(.btn):not(.ms-btn):hover,
#wrapper .author-info a:hover { color: var(--d-link-hover); }
/* The dealer link in the price line already has its own navy underline */
#wrapper .write .pricetag a:not(.btn):not(.ms-btn),
#wrapper .write .pricetag a:not(.btn):not(.ms-btn):visited { color: var(--d-ink); text-decoration: none; }
#wrapper .write .pricetag a:not(.btn):not(.ms-btn):hover { color: var(--d-link-hover); }

/* ---- Buttons and badges ---- */
/* White on teal was 2.1:1; navy on the same teal is 5.6:1. The theme's hover turned the text invisible on the quiet button */
#wrapper .ms-btn:not(.to):not(.tre):not(.bg-success) {
  color: var(--d-ink);
  border-color: var(--d-teal);   /* min.css resets border-color to currentColor after setting it, so the border followed the text colour */
  border-radius: var(--d-radius-sm);
}
#wrapper .ms-btn:not(.to):not(.tre):not(.bg-success):hover {
  color: var(--d-ink);
  border-color: var(--d-yellow-soft);
}
#wrapper .ms-btn.to {
  color: var(--d-ink);
  background: var(--d-tint);
  border-color: var(--d-tint);
  border-radius: var(--d-radius-sm);
  font-size: 1.2rem;
  letter-spacing: .08em;
  padding: .9rem 1.6rem;
}
#wrapper .ms-btn.to:hover,
#wrapper .ms-btn.to:focus-visible { color: var(--d-ink); background: var(--d-teal); border-color: var(--d-teal); }
/* Affiliate buttons: same navy text, one radius */
#wrapper .btn { border-radius: var(--d-radius-sm); }
/* Count badge on cards ("+ 54 gaveideer") and the orange product label */
#wrapper .cta-small {
  margin: var(--d-space-1);
  padding: .4rem 1rem;
  border-radius: var(--d-radius-sm);
  font-size: 1.2rem !important;
  line-height: 1.5;
}
#wrapper .cta-small.bg { color: var(--d-ink); }
#wrapper .cta-small.bg-gradiant { color: var(--d-ink-deep); }
/* Round-to-top button: white chevron on teal was 2.1:1 */
#wrapper a.scrollup.ms-color { color: var(--d-ink) !important; }

/* ---- Cards: shadows and hairlines ---- */
/* One soft shadow instead of the 27px glow, and one radius on hero boxes, article card and images */
#wrapper .shadow { box-shadow: var(--d-shadow) !important; border-radius: var(--d-radius); }
#wrapper .rounded { border-radius: var(--d-radius-sm) !important; }
#wrapper .cta-round { border-radius: 50% !important; }

/* ---- Front page ---- */
/* Text on the pink circle was 2.6:1 (white) */
#wrapper .cta-round,
#wrapper .cta-round.color-white,
#wrapper .cta-round h2 { color: var(--d-ink-deep); }
/* Pink kicker on the hero photo and pink sub-titles on the cards (about 2.6:1 on the pastel background) */
#wrapper main#forside h2 span,
#wrapper article.content h5 span { color: var(--d-pink-text); }
#wrapper article.content h5 span { font-size: 1.3rem; line-height: 1.3; }
/* White text on the yellow welcome box was 1.8:1; navy is 6.4:1. Text also gets a little wider and less airy */
#wrapper .bg3.shadow { color: var(--d-ink); }
#wrapper .bg3.shadow .tekst p { line-height: 1.7; }
@media (min-width: 576px) {
  #wrapper .bg3.shadow > .col-sm-8 { flex: 0 0 86%; max-width: 86%; }
}
/* Hero boxes take less of a phone screen */
@media (max-width: 767px) {
  #wrapper main#forside .height400 { min-height: 30rem; }
  #wrapper .bg3.shadow.height500 { min-height: 0; }
}
/* On phones the card grid started right under the second hero box */
@media (max-width: 575px) {
  #wrapper main#forside > section:first-child { padding-bottom: var(--d-space-3); }
}

/* ---- Card grids (front page, related-posts) ---- */
#wrapper article.content.col-sm-3 .single_post { height: 100%; }
#wrapper article.content.col-sm-3 h3.f-2 { line-height: 1.2; }
/* Two columns on phones instead of one 300px-tall card per row */
@media (max-width: 575px) {
  #wrapper .row:has(> article.content.col-sm-3) { margin-inline: calc(var(--d-space-1) * -1); }
  #wrapper article.content.col-sm-3 { flex: 0 0 50%; max-width: 50%; padding-inline: var(--d-space-1); }
  #wrapper article.content.col-sm-3 h3.f-2 { font-size: 1.5rem !important; }
  #wrapper article.content.col-sm-3 h5 span { font-size: 1.15rem; }
  #wrapper article.content.col-sm-3 .cta-small { margin: .4rem; padding: .2rem .6rem; font-size: 1.05rem !important; }
  #wrapper article.content.col-sm-3 .post-content { margin-top: var(--d-space-1) !important; }
}

/* ---- Category / archive ---- */
/* Masonry columns with mixed image heights become an even grid with equal images and aligned buttons */
main#arkiv .card-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
  gap: var(--d-space-4) var(--d-space-3);
  column-count: auto;
}
main#arkiv article.card {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0 !important;
  border: 0;
  background: transparent;
}
main#arkiv article.card .single_post { display: flex; flex-direction: column; height: 100%; }
main#arkiv article.card .single_post > a.sektion { display: block; overflow: hidden; border-radius: var(--d-radius-sm); }
main#arkiv article.card img.ms-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
main#arkiv article.card .post-content { flex: 1; display: flex; flex-direction: column; margin-top: var(--d-space-2) !important; }
main#arkiv article.card h4.f-2 { font-size: 2rem !important; line-height: 1.25; margin: 0 0 var(--d-space-2) !important; }
main#arkiv article.card .post-entry { margin: auto 0 0 !important; }
@media (max-width: 767px) {
  main#arkiv .card-columns { gap: var(--d-space-3); }
}
/* On phones the first image touched the header line */
@media (max-width: 575px) {
  main#arkiv section.main-section { padding-top: var(--d-space-3); }
}

/* ---- Article page ---- */
main#pager .ms_sektion.bg-white { border-radius: var(--d-radius); box-shadow: var(--d-shadow); }
/* The header photo pushed the H1 below the fold (536px high at 1280) */
main#pager img.subheader-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--d-radius-sm);
}
@media (max-width: 680px) {
  main#pager img.subheader-img { aspect-ratio: 3 / 2; }
}
/* The H1 block is col-10 and wrapped the title early on phones */
@media (max-width: 767px) {
  main#pager header.intro-name { flex: 0 0 100%; max-width: 100%; }
}
/* Breadcrumb teal on white was 2.1:1, and both crumbs were 12px */
main#pager .breadcrumbs,
main#pager .breadcrumbs a,
main#pager .breadcrumbs .breadcrumb_cco.n1::after { color: var(--d-teal-text); }
main#pager .breadcrumbs { font-size: 1.3rem !important; }
/* Author line was 11px on phones */
main#pager .author-info { font-size: 1.4rem; line-height: 1.5; }
/* Body copy: double line height (32px) was loose */
main#pager .tekst p { line-height: 1.75; }
main#pager .intro-content { margin-block: var(--d-space-3); }
main#pager .write > p:last-child { margin-bottom: 0; }
/* Gift rows: the first row had a grey top rule and the rest none; all rules use the same hairline */
main#pager .gave-ide > .d-block { border-color: var(--d-line) !important; }
main#pager .gave-ide { margin-block: var(--d-space-3) !important; }
main#pager .gave-ide h3 { line-height: 1.25; }
main#pager .gave-ide .btn { padding-block: .7rem; font-size: 1.8rem; }
/* PriceRunner disclosure under each row */
main#pager .gave-ide .col-sm-12 .f-5 { font-size: 1.2rem !important; }
/* related-posts heading spacing */
#wrapper section.postend h5.f-1 { margin-bottom: var(--d-space-2); }

/* The trust-links footer block sits on the dark footer, but the theme's global link colour made its links dark blue on dark blue */
footer .best-trust-footer a { color: #fff; }