/* Design layer for morefews.dk. Loaded after the theme CSS. Tightens spacing, contrast, cards, buttons and badges; fonts, brand colours and layout are unchanged. */

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

  /* Site colours (from the theme: --c1 blue, --succes green, #0b2d39 ink, #868D92 grey, #1b98ba links) */
  --d-ink: #0b2d39;                 /* text and dark surfaces (theme body colour) */
  --d-ink-soft: #656c70;            /* secondary text: theme grey #868D92 darkened to 4.7:1 on #f2f2f2 (5.4:1 on white) */
  --d-line: rgba(11, 45, 57, .12);  /* hairlines */
  --d-line-strong: rgba(11, 45, 57, .28);
  --d-shadow: 0 .2rem 1.2rem rgba(11, 45, 57, .07);
  --d-blue: #009CFF;                /* brand blue for fills (never for small text on white) */
  --d-blue-aa: #0070b8;             /* brand blue darkened to 4.6:1 on #f2f2f2: text on white or light grey, and behind white text */
  --d-link: #157590;                /* theme link #1b98ba darkened to 4.6:1 on #f2f2f2 (5.5:1 on white) */
  --d-link-hover: #0e5a6f;
  --d-green: #20CC82;               /* brand green for button fills */
  --d-green-hover: #2fe395;
  --d-green-aa: #158555;            /* brand green darkened to 4.6:1 on white: green text */
  --d-coral: #db3143;               /* theme heart colour #e04f5f darkened for white text (4.6:1) */
  --d-on-accent: #0b2d39;           /* text on the green fill (7:1) */
}

/* ---- Global: focus ---- */
/* The theme removes button outlines (outline:0 !important), so keyboard users saw no focus */
#wrapper a:focus-visible, #wrapper .c-btn:focus-visible, #wrapper .mobil-hamburger:focus-visible, a.scrollup:focus-visible {
  outline: .3rem solid var(--d-blue-aa) !important;
  outline-offset: .2rem;
  border-radius: .4rem;
}
#ms-fod a:focus-visible { outline: .3rem solid #fff !important; outline-offset: .2rem; border-radius: .4rem; }

/* ---- Header on narrow screens ---- */
/* Below 992px the desktop menu is squeezed next to the logo (360px tall at phone width, two ragged rows on tablets); put it under the logo, wrapping */
@media (max-width: 991px) {
  #masthead .head .row { flex-wrap: wrap; justify-content: center; }
  #masthead .head .logo { flex: 0 0 100%; max-width: 100%; text-align: center; padding-block: var(--space-1) 0 !important; }
  #masthead .head .logo img { margin-inline: auto; }
  #masthead .head .mainmenu { flex: 0 0 100%; max-width: 100%; }
  #masthead .head .wrapper-menu { justify-content: center !important; }
  #masthead .head .ms_menu { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0 0 var(--space-1); }
  #masthead .head .ms_menu > li > a { padding: .8rem 1.1rem; font-size: 1.6rem; }
}

/* ---- Secondary text, blue and green text: AA on white and light grey ---- */
/* Footer copyright is also .color-grey but sits on near-black, so only content inside <main> is darkened */
main .color-grey, main .gave-ide .gTxt { color: var(--d-ink-soft); }
main .color-ms, main .bread p a { color: var(--d-blue-aa); }
main .bread p, main .bread p .breadcrumb_last { color: var(--d-ink-soft); }
main .bread p a:hover { color: var(--d-ink); }
main .stockStatus.in-stock, main .c-suc { color: var(--d-green-aa); }

/* ---- Links in running text: darker brand teal with a quiet underline ---- */
main .tekst a:not(.c-btn):not(.fi-xd),
main .write a:not(.c-btn):not(.fi-xd),
main .gTxt a:not(.c-btn):not(.fi-xd) {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main .tekst a:not(.c-btn):not(.fi-xd):hover,
main .write a:not(.c-btn):not(.fi-xd):hover,
main .gTxt a:not(.c-btn):not(.fi-xd):hover { color: var(--d-link-hover); }

/* ---- Buttons: brand green fill with dark text (white on green was 2.1:1) ---- */
#wrapper .c-btn, #wrapper a.c-btn {
  color: var(--d-on-accent);
  font-weight: 700;
  line-height: 1.3;
  padding: 1.1rem 2rem;
}
#wrapper .c-btn.round { border-radius: .8rem !important; }
#wrapper .c-btn:hover, #wrapper a.c-btn:hover { color: var(--d-on-accent); }
/* Ghost button: readable grey text, a border that shows on white */
#wrapper .c-btn.to, #wrapper a.c-btn.to { color: var(--d-ink-soft); border-color: var(--d-line-strong); background: #fff; }
#wrapper .c-btn.to:hover, #wrapper a.c-btn.to:hover { color: var(--d-blue-aa); border-color: var(--d-blue-aa); background: #fff; }

/* ---- Cards (front page top grid, category archives) ---- */
/* One hairline and one soft shadow instead of the bare 16px shadow, rounded like the other boxes */
main article.content a.single_post {
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
main article.content a.single_post:hover { border-color: var(--d-line-strong); box-shadow: 0 .4rem 1.8rem rgba(11, 45, 57, .12); }
/* Same crop for every card image; a card without an image simply has no picture area */
main article.content .single_post img.ms-img { display: block; width: 100%; aspect-ratio: 478 / 412; object-fit: cover; }
main article.content .single_post img.ms-img[src=""] { display: none; }
main article.content:has(img.ms-img[src=""]) a.single_post { align-self: flex-start; }
/* Titles are 2.6rem in a 297px card and wrap to four or five lines; 2rem with an even inner padding */
main article.content .single_post .post-content { margin-top: 0 !important; padding-block: var(--space-2) var(--space-1); }
main article.content .single_post h4.f-2 { font-size: 2rem !important; line-height: 1.25; margin: 0 0 var(--space-1) !important; }
main article.content a.single_post:hover h4 { color: var(--d-blue-aa); }

/* ---- Front page: the long gift idea list ---- */
/* The "Gaveideer samlet et sted" block: brand blue darkened for white text (2.9:1 before) */
main#forside .bg { background: var(--d-blue-aa); }
/* Peach links on blue were 2:1 (the editor sets the colour inline, hence !important); white with an underline stays clear of the text colour */
main#forside .bg .tekst a:not(.c-btn), main#forside .bg .tekst [style*="color"] { color: #fff !important; }
main#forside .bg .tekst a:not(.c-btn):hover { text-decoration-thickness: 2px; }
/* Gift idea boxes: same hairline and radius as the cards, and less air between them */
main#forside .gave-ide { border: 1px solid var(--d-line); border-radius: var(--card-radius); margin-bottom: var(--space-2) !important; }
main#forside .gave-ide h3.f-1 { font-size: 2.4rem !important; font-weight: 600; line-height: 1.2; margin-bottom: .4rem !important; }
main#forside .gave-ide .row > .col-md-9 > p.color-ms { font-weight: 600; margin-bottom: var(--space-1) !important; }
main#forside .gave-ide .tekst p { line-height: 1.7; }
/* The empty grey band above the footer is 128px of padding around an empty text block */
main#forside > section.bg-grey { padding-block: var(--space-2) !important; }
/* The theme pulls .gave-ide 32px outside the page below 770px, which makes the whole front page 16px too wide */
@media (max-width: 769px) {
  main#forside .gave-ide { margin-inline: 0; width: auto; }
}

/* ---- Article page ---- */
/* Title: 4rem over two or three lines is a lot; keep it at most 3.4rem with a tighter line height */
main#post .sub-header-tekst h1.f-0 { font-size: clamp(2.6rem, 3.2vw, 3.4rem) !important; line-height: 1.2; }
main#post .bread p { font-size: 1.4rem; }
/* The white article box: the same shadow and radius as the other boxes */
main#post .push-up { box-shadow: var(--d-shadow); border-radius: var(--card-radius); }

/* Top list rows: hairline, spacing between rows, calmer hover */
main#post .bestproducts-row .bestproducts {
  border: 1px solid var(--d-line);
  border-radius: 1.2rem !important;
  box-shadow: var(--d-shadow);
  margin-bottom: var(--space-1) !important;
}
main#post .bestproducts-row .bestproducts:hover { border-color: var(--d-green); box-shadow: 0 .4rem 1.6rem rgba(11, 45, 57, .12) !important; }
/* White digits on the yellow disc were about 1.6:1 */
main#post .bestproducts .num, main#post .bestproducts .num span { color: var(--d-ink); font-size: 1.3rem; }
/* recommendation: the 3rem heart could not hold its label and spilled over the price; make it a pill on the row's top edge */
main#post .bestproducts .winner__ {
  background: var(--d-coral);
  width: auto; height: auto;
  top: 0; left: auto; right: var(--space-2);
  transform: translateY(-50%);
  padding: .3rem 1rem;
  border-radius: 99px;
  color: #fff;
  font-size: 1.1rem !important;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
}
main#post .bestproducts .winner__ span { color: #fff; }
/* The green gradient keeps its look; the label gets dark text (white was 2.1:1) */
main#post .bestproducts .dealer-btn {
  color: var(--d-on-accent);
  font-weight: 700;
  border-radius: .8rem;
  box-shadow: 0 .4rem 1rem -.4rem rgba(32, 204, 130, .55);
}

/* Product detail cards: one shadow (was a 27px one) and the same hairline and radius */
main#post .gave-ide .gInner {
  border: 1px solid var(--d-line);
  border-radius: var(--card-radius);
  box-shadow: var(--d-shadow) !important;
  margin-bottom: var(--space-3);
  padding: var(--space-2) 0;
}
main#post .gave-ide .gTxt p { line-height: 1.7; }
main#post .gave-ide .pricetag { font-size: 1.3rem; letter-spacing: .02em; }
main#post .gave-ide i.f-5 { font-size: 1.3rem !important; }