/* Design layer for maleeksperten.dk (child theme newsmag-child of Newsmag Pro). Loaded after the parent and child CSS.
   "Tighten, do not redesign": same fonts, brand yellow/green, layout and markup; only contrast, spacing, borders,
   buttons, the hero height and focus visibility change. Rules are scoped under #content, #masthead, #colophon or
   .site so they win over the parent theme's class chains without !important and never touch plugins, the admin bar
   or the customizer. */

/* ---- Tokens ---- */
:root {
  --md-yellow: #f9cd28;        /* brand yellow: bars, badges, ribbon, submit buttons (backgrounds only) */
  --md-ink: #333;              /* the site's text colour; also the text colour ON yellow and green (8.3:1 / 6.4:1) */
  --md-ink-soft: #6b6b6b;      /* secondary text (dates, meta), 5.3:1 on white */
  --md-gold-text: #866a03;     /* the brand yellow darkened only as far as needed for text on white/#f4f4f4 (>= 4.5:1) */
  --md-green: #61ce70;         /* brand green of the product and Elementor buttons */
  --md-green-hover: #53bd62;   /* the child theme's existing hover green */
  --md-line: #e1e1e1;          /* the parent theme's own hairline colour */
  --md-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  --md-radius: 4px;            /* the radius the child theme already uses on buttons */
  --md-space-1: 8px;
  --md-space-2: 16px;
  --md-space-3: 24px;
  --md-space-4: 40px;
}

/* ---- Focus: the parent only draws a thin dotted outline, which is invisible on the yellow and photo areas ---- */
.site a:focus-visible,
.site button:focus-visible,
.site input:focus-visible,
.site textarea:focus-visible {
  outline: 3px solid var(--md-ink);
  outline-offset: 2px;
}
/* On photos a dark outline disappears, so cards use the brand yellow inside the photo edge */
.site .newsmag-image a:focus-visible,
.site .banner-content a:focus-visible {
  outline-color: var(--md-yellow);
  outline-offset: -3px;
}

/* ---- Main menu: hover/active/focus turned the text yellow on white (1.5:1) ---- */
#site-navigation .nav-menu > li.active > a,
#site-navigation .nav-menu > li:hover > a,
#site-navigation .nav-menu > li:focus > a,
#site-navigation .nav-menu > li > a:focus,
#site-navigation .nav-menu > li:focus-within > a {
  color: var(--md-gold-text);
}

/* ---- Breadcrumbs: yellow link and separator on white ---- */
#content .newsmag-breadcrumbs a,
#content .newsmag-breadcrumbs a span,
#content .newsmag-breadcrumbs .newsmag-breadcrumb-sep {
  color: var(--md-gold-text);
}
#content .newsmag-breadcrumbs a:hover { text-decoration: underline; }

/* ---- Section title bars ("Seneste artikler", "Gulv", ...): white on yellow was 1.5:1 ---- */
#content .newsmag_builder h2 a,
#content .newsmag_builder h2 span {
  color: var(--md-ink);
}

/* ---- Category badges on photos and in lists: white on yellow was 1.5:1; hover keeps a readable pair ---- */
#content .newsmag-image .newsmag-post-box-a-category a,
#content .newsmag-image .newsmag-post-box-category a,
#content .newsmag-post-layout-category a {
  color: var(--md-ink);
}
#content .newsmag-image .newsmag-post-box-a-category,
#content .newsmag-image .newsmag-post-box-category,
#content .newsmag-post-layout-category {
  border-radius: 2px;
  letter-spacing: .03em;
}
#content .newsmag-image .newsmag-post-box-a-category:hover a,
#content .newsmag-image .newsmag-post-box-category:hover a,
#content .newsmag-post-layout-category:hover a {
  color: #fff;
}

/* ---- Cards ---- */
/* Title lines were 17px high for a 16px font (cramped when the title wraps) and the gap under the card was 45px */
#content .newsmag_builder .newsmag-post-box-a { margin-bottom: 32px; }
#content .newsmag_builder .newsmag-post-box-a.thumbnail-layout h3 { margin-top: 14px; margin-bottom: 6px; line-height: 1.35; }
/* The date line inherited the body's 18px and was bigger than the 16px title; secondary text is 14px and 5.3:1 */
#content .newsmag_builder .newsmag-post-box-a .meta,
#content .newsmag_builder .newsmag-post-box-a .meta a,
#content .newsmag_builder .newsmag-blog-post-layout-b .newsmag-title .meta,
#content .newsmag_builder .newsmag-blog-post-layout-b .newsmag-title .meta a,
#content .newsmag-blog-post-layout .newsmag-title,
#content .newsmag-blog-post-layout .newsmag-title .newsmag-comments-link {
  font-size: 14px;
  line-height: 1.5;
  color: var(--md-ink-soft);
}
/* Title link hover was yellow on white; use the darkened brand colour and an underline instead */
#content .newsmag-blog-post-layout .newsmag-title h3 > a:hover,
#content .newsmag-blog-post-layout .newsmag-title h3 > a:focus,
#content .newsmag_builder .newsmag-post-box-a h3 > a:hover,
#content .newsmag_builder .newsmag-post-box-a h3 > a:focus,
#content .newsmag_builder .newsmag-blog-post-layout-b .newsmag-title h3 > a:hover,
#content .newsmag-blog-post-layout .newsmag-title .newsmag-comments-link:hover,
#content .newsmag_builder .newsmag-post-box-a .meta a:hover,
#content .newsmag_builder .newsmag-post-box-a .meta a:focus,
#content .widget_recent_entries ul li a:hover,
#content .widget_recent_entries ul li a:focus {
  color: var(--md-gold-text);
  text-decoration: underline;
}
/* Archive rows: calmer spacing between the post rows */
#content .newsmag-archive-page .newsmag-blog-post-layout { margin-bottom: var(--md-space-3); padding-bottom: var(--md-space-3); }

/* ---- Photo banners on the front page: a real scrim behind the text so it stays readable on light photos ---- */
#content .newsmag_builder .newsmag-blog-post-layout-banner .banner-content {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 25px 20px;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
#content .newsmag_builder .newsmag-blog-post-layout-banner .banner-content .meta { margin-bottom: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---- Sidebar widget titles: yellow text on white was 1.5:1; ink text with the brand yellow as underline ---- */
#content .widget_recent_entries > h3 {
  color: var(--md-ink);
  padding-bottom: var(--md-space-1);
  border-bottom: 3px solid var(--md-yellow);
  margin-bottom: var(--md-space-3);
}
#content .widget_recent_entries ul li { margin-bottom: var(--md-space-2); padding-bottom: var(--md-space-2); }

/* ---- Article hero: 455px tall for a one-line title; keep the photo, shorten it ---- */
@media (min-width: 701px) {
  #content .newsmag-custom-header.newsmag-custom-header-single-post { height: 320px; }
}
/* style.css forces 250px below 701px with !important */
@media (max-width: 700px) {
  #content .newsmag-custom-header.newsmag-custom-header-single-post { height: 210px !important; }
}
/* Parallax (fixed background) stutters on touch devices and tablets */
@media (max-width: 991px) {
  #content .newsmag-custom-header.newsmag-custom-header-single-post { background-attachment: scroll; }
}
/* A long title gets a comfortable line height and stays centred instead of running edge to edge */
#content .newsmag-custom-header h1 { line-height: 1.2; }
#content .newsmag-custom-header-single-post h1 { max-width: 26ch; margin-left: auto; margin-right: auto; }

/* ---- Article text ---- */
/* Date under the hero: #9a9a9a was 2.8:1 */
#content .newsmag-article-post .newsmag-date { color: var(--md-ink-soft); margin-bottom: var(--md-space-2); }
#content .newsmag-post-meta > ul > li { color: var(--md-ink-soft); }
/* Elementor's kit gives text-editor widgets grey Roboto (#7a7a7a, 4.3:1) while the rest of the article is Lato #333 */
#content .entry-content .elementor-widget-text-editor {
  color: var(--md-ink);
  font-family: "Lato", sans-serif;
}
/* The editor's empty paragraph blocks (only HTML comments) add a gap between every list item */
#content .entry-content .elementor-widget-text-editor p:empty { display: none; }
#content .entry-content .elementor-widget-text-editor ul { margin-bottom: var(--md-space-1); }

/* ---- Featured product box ([produkt] shortcode in functions.php) ---- */
/* The border was #f5f5f5 (invisible) plus a shadow, with 55px side padding that squeezes the text */
#content .featured-product-wrapper {
  margin: var(--md-space-3) 0;
  padding: var(--md-space-3) var(--md-space-4);
  border: 1px solid var(--md-line);
  border-radius: 6px;
  box-shadow: var(--md-shadow);
}
#content .featured-product-wrapper-right { padding-left: var(--md-space-3); padding-right: var(--md-space-4); }
#content .featured-product-wrapper-right h3 { margin-top: 0; line-height: 1.2; }
/* Ribbon "VORES ANBEFALING": white on yellow was 1.5:1 */
#content .featured-product-wrapper .testvinder {
  color: var(--md-ink);
  font-size: 12px;
  letter-spacing: .04em;
}
/* Product and Elementor buttons: white on the brand green was 2:1, ink on the same green is 6.4:1 */
#content .produkt-btn,
#content .produkt-btn:visited,
#content a.elementor-button,
#content a.elementor-button .elementor-button-text,
#content .elementor-button-wrapper .elementor-button-text {
  color: var(--md-ink);
}
#content .produkt-btn { background-color: var(--md-green); margin-top: var(--md-space-3); }
#content .produkt-btn:hover,
#content .produkt-btn:focus-visible { background-color: var(--md-green-hover); color: var(--md-ink); }
#content a.elementor-button { background-color: var(--md-green); border-radius: var(--md-radius); }
#content a.elementor-button:hover,
#content a.elementor-button:focus { background-color: var(--md-green-hover); color: var(--md-ink); }
#content a.elementor-button:hover .elementor-button-text,
#content a.elementor-button:focus .elementor-button-text { color: var(--md-ink); }
/* Discount box (countdown shortcode): white text on the green box, and the yellow button, were 2:1 and 1.5:1 */
#content .rabat-wrapper .featured-product-wrapper-right p,
#content .rabat-wrapper .featured-product-wrapper-right h3,
#content .rabat-wrapper p.rabatkode,
#content .rabat-wrapper .counter { color: var(--md-ink) !important; }
#content .rabat-wrapper .produkt-btn { color: var(--md-ink); }
@media (max-width: 700px) {
  #content .featured-product-wrapper { padding: var(--md-space-3) var(--md-space-2); }
  #content .featured-product-wrapper-left { margin-bottom: var(--md-space-2); }
  #content .featured-product-wrapper-right { padding-left: 0; padding-right: 0; }
  /* The ribbon sits in the top-right corner over the title; keep the title clear of it and the ribbon smaller */
  #content .featured-product-wrapper-right h3 { font-size: 22px; padding-right: 56px; }
  #content .featured-product-wrapper .testvinder { font-size: 11px; padding-left: 52px; padding-right: 52px; }
}

/* ---- Author box: 2px grey frame and 25px padding around a 30% photo ---- */
#content .profil-banner {
  border: 1px solid var(--md-line);
  border-radius: 6px;
  padding: var(--md-space-3);
  margin: var(--md-space-4) 0;
}

/* ---- Submit buttons (comments, contact form, search results): white on yellow was 1.5:1 ---- */
#content .comment-form .form-submit .submit,
#content .wpcf7-form input.wpcf7-submit,
#content .newsmag-search-page input[type="submit"],
#content .post-password-form input[type="submit"],
#content .error-404 input[type="submit"] {
  color: var(--md-ink);
  border-radius: var(--md-radius);
  font-weight: 700;
}
#content .comment-form .form-submit .submit:hover,
#content .wpcf7-form input.wpcf7-submit:hover,
#content .newsmag-search-page input[type="submit"]:hover,
#content .post-password-form input[type="submit"]:hover,
#content .error-404 input[type="submit"]:hover {
  color: #fff;
}

/* ---- Tag links at the end of a post: white on yellow on hover ---- */
#content .newsmag-article-post-footer .newsmag-tags a:hover { color: var(--md-ink); }

/* ---- Klarna/Pricerunner product widget (.pr-widget-app, third-party markup with inline styles) ---- */
/* Its go-to-shop button is white on #009E60 (3.5:1); the darkest step needed for 4.5:1 keeps the same green.
   !important is needed because the colour is an inline style. */
#content .pr-widget-app .clickout-button a > span { background: #008550 !important; }
/* The list is wider than a 375px screen and pushed the whole page sideways; scroll inside the widget instead */
#content .pr-widget-app { max-width: 100%; overflow-x: auto; }

/* ---- Mobile: shorter photo cards and less air between the stacked blocks ---- */
@media (max-width: 575px) {
  #content .newsmag_builder .newsmag-post-box-a .newsmag-image img { aspect-ratio: 16 / 9; object-fit: cover; }
  #content .newsmag_builder .newsmag-post-box-a { margin-bottom: var(--md-space-3); }
  #content .newsmag_builder .newsmag-blog-post-layout-banner.col-md-3 > a { height: 180px; }
}

/* The bottom-banner popup button was white on light green (about 2:1) */
.bottom-banner a.popup-btn { color: var(--md-ink) !important; } /* the theme sets this colour with !important */