/* Design layer for haandvaerkeroversigt.dk (theme "ekspertoversigt"). Loaded after the theme CSS.
   Tighten, do not redesign: fonts, brand colours and layout structure stay as the theme has them.
   The theme root is 10px (1rem = 10px). */

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

  /* Site colours: the theme's own palette (--c1..--c5), no new colours */
  --d-ink: #1A351B;             /* theme --c1: text and dark surfaces */
  --d-ink-soft: #4E514E;        /* theme --gray-dark: secondary text (8:1 on white) */
  --d-line: rgba(26, 53, 27, .14);
  --d-shadow: 0 .2rem 1.2rem rgba(26, 53, 27, .08);
  --d-tint: #E1F2DE;            /* theme --c2: light green panels */
  --d-sage: #B4CEB1;            /* theme --c3: sage sections */
  --d-green: #46BA45;           /* theme --c4: buttons */
  --d-green-hover: #82d688;     /* theme --c5 */
  --d-on-green: #1A351B;        /* dark text on the brand green: 5.1:1 (white on it is only 2.5:1) */
  --d-link: #17748e;            /* theme link colour, 5:1 on white and on the light green panels */
  --d-link-hover: #0f5a6f;      /* darker than the theme's #1b98ba hover (3.5:1) */
  --d-focus: #1A351B;           /* focus ring on light surfaces */
  --d-focus-dark: #82d688;      /* focus ring on the dark green surfaces */
}

/* ---- Global: focus (the theme sets outline: 0 on every link) ---- */
#masthead a:focus-visible, main a:focus-visible, main .btn:focus-visible, main [tabindex]:focus-visible, .scrollup:focus-visible {
  outline: .3rem solid var(--d-focus);
  outline-offset: .2rem;
  border-radius: .4rem;
}
/* On the dark green surfaces the light ring is the visible one */
#footer a:focus-visible, main .ad-block.bg a:focus-visible, .menuelements .submenu a:focus-visible {
  outline: .3rem solid var(--d-focus-dark);
  outline-offset: .2rem;
  border-radius: .4rem;
}

/* ---- Shadows: one soft shadow instead of the heavy 24px one ---- */
main .shadow, main .top-cta, main .ad-block.shadow { box-shadow: var(--d-shadow); }

/* ---- Buttons: dark text on the brand green (white on it fails contrast) ---- */
main .product-button, main a.btn.bg4, main .btn.bg-succes {
  color: var(--d-on-green) !important;
  font-weight: 700;
}
main .product-button strong { font-weight: 700; }
main .product-button {
  border-radius: .6rem;
  box-shadow: 0 .2rem 0 rgba(26, 53, 27, .25);
  margin-block: var(--space-1);
  padding: 1rem 2.4rem;
  max-width: 100%;
  white-space: normal;
}
main .product-button:active { box-shadow: none; transform: translateY(.2rem); }
main a.btn.bg4:hover, main .product-button:hover { background: var(--d-green-hover); color: var(--d-on-green) !important; }
/* Long button labels wrapped past the viewport on phones (46px overflow on /min-radiator-larmer/) */
main .write a.btn { white-space: normal; max-width: 100%; text-align: center; }
main .ad-block .btn .icon { color: var(--d-on-green); }
main a.btn.bg4 { border-radius: .6rem; }

/* ---- Meta and grey text ---- */
main .color-grey, main .write .ad-block p.color-grey { color: var(--d-ink-soft); }
/* Theme text is 10px in the card labels and dates; 12px is the readable minimum */
main .f-6 { font-size: 1.2rem; }
main .subheader .auhtor p { line-height: 1.5; }

/* ---- Links: underlined in running text so they do not rely on colour alone ---- */
main .write.txt p a:not(.btn):not(.product-button), main .write.txt li a:not(.black), main .subheader .auhtor a {
  color: var(--d-link);
  text-decoration: underline;
  text-decoration-thickness: .1rem;
  text-underline-offset: .2rem;
}
main .write.txt p a:not(.btn):not(.product-button):hover, main .write.txt li a:not(.black):hover, main .subheader .auhtor a:hover { color: var(--d-link-hover); }

/* ---- Section labels (reading and city-search labels): wrap cleanly on phones ---- */
main .header-class span { display: inline; padding: .4rem .8rem; line-height: 1.7; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- Article text ---- */
main .write.txt { line-height: 1.75; }
main .write.txt > p { margin-bottom: var(--space-2); }
main .write.txt > h2 { margin: var(--space-4) 0 var(--space-2); line-height: 1.25; }
/* Theme has h2 and h3 at the same 2.6rem; give h3 its own step */
main .write.txt > h3 { margin: var(--space-3) 0 var(--space-1); font-size: 2.1rem; line-height: 1.3; }
main .write.txt > h2:first-child, main .write.txt > h3:first-child { margin-top: 0; }
@media (max-width: 680px) { main .write.txt > h3 { font-size: 1.9rem; } }
/* The theme's 400% drop cap hangs 1.6rem above the text and collides with the hero box on phones */
main .write.txt > p:first-of-type::first-letter { font-size: 300%; line-height: .85; margin-top: .3rem; padding-right: .6rem; }
/* /opgaver/ uses a one-letter <p> before each list; the drop cap made the "A" overlap its list, so pages whose first <p> is followed by a list get no drop cap */
main#page .write.txt > p:first-of-type:has(+ ul)::first-letter { font-size: inherit; line-height: inherit; float: none; margin: 0; padding: 0; font-weight: inherit; }
main .write.txt img { border-radius: var(--d-radius); }

/* Lists: hanging indent so wrapped lines align under the text, not under the arrow */
main .write.txt > ul, main .write.txt > ol { margin: 0 0 var(--space-3); }
main .write.txt ul li, main .write.txt ol li { position: relative; padding-left: 3.2rem; margin-bottom: .6rem; }
main .write.txt ul li::before, main .write.txt ol li::before { position: absolute; left: 0; top: 0; margin: 0; width: auto; }
main .write.txt ul.none li { padding-left: 0; }

/* Blockquote: theme has white text on the sage green (1.7:1) */
main .write.txt blockquote { color: var(--d-ink); border-radius: var(--d-radius); }

/* Floated article images stack on phones instead of squeezing the text column */
@media (max-width: 575px) {
  main .write.txt img.alignright, main .write.txt img.alignleft { float: none; display: block; margin: 0 auto var(--space-2); }
}

/* ---- Article hero (green box) and page hero ---- */
main .subheader h1 { line-height: 1.15; text-wrap: balance; }
main .subheader picture img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; border-radius: var(--d-radius); }
/* Page hero: 22rem of top padding and 6.4rem below left about 15rem of empty green */
main .subheader-txt.pt-max { padding-top: 15rem; }
main .subheader-txt .container { padding-bottom: var(--space-4) !important; }
main .subheader-txt h1 { line-height: 1.15; text-wrap: balance; margin-bottom: 0; }
@media (max-width: 767px) { main .subheader-txt.pt-max { padding-top: 12.5rem; } main .subheader-txt .container { padding-bottom: var(--space-3) !important; } }

/* ---- Call-to-action box and ad banners inside articles ---- */
main .top-cta { width: 100%; margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--d-radius); }
main .top-cta h3 { font-size: 2.2rem; margin-bottom: var(--space-1); }
main .top-cta p { margin-bottom: var(--space-1); }
@media (max-width: 575px) { main .top-cta { padding: var(--space-2); } }
main .ad-block { border-radius: var(--d-radius) !important; }
/* Utility classes give the boxed banner 6.4rem margins and a 92% width */
main .write .ad-block.my-6 { margin-block: var(--space-3) !important; flex: 0 0 100%; max-width: 100%; }
main .write section.ad-block { margin-block: var(--space-3) !important; }

/* Phone: the stacked banner (heading, logo, photo) was about 480px tall */
@media (max-width: 767px) {
  main .ad-block .logo img { width: 6.4rem; margin-block: 0 var(--space-1); }
  main .ad-block .img-full img { height: 17rem !important; }
}

/* ---- FAQ accordion ---- */
main #accordion h2 { font-size: 2.2rem !important; margin-bottom: var(--space-2) !important; }
main #accordion .card { border: 1px solid var(--d-line); border-radius: var(--d-radius); }
main #accordion .accrodion-title { font-size: 1.6rem; line-height: 1.4; }
main #accordion .card-body { padding-top: var(--space-1); }
main #accordion .card-body p { line-height: 1.6; margin: 0; }

/* ---- Cards (home, archives, sliders) ---- */
main .block-news img, main .block-split img { border-radius: var(--d-radius); }
main .block-news .caption h4 { line-height: 1.3; }
/* Label sits on its own line above the title instead of squeezed in front of it */
main .block-news .caption h4 span.info { display: block; margin: 0 0 .4rem; padding: 0; top: 0; border-bottom: 0; font-size: 1.2rem; letter-spacing: .06em; color: var(--d-ink-soft); }
main .block-split .caption .txt { line-height: 1.6; }
main .block-split .caption > span a { color: var(--d-link); }
main .block-split .btn { border: 1px solid var(--d-line); border-radius: .6rem; color: var(--d-ink); padding: .6rem 1.4rem; }
/* Slider cards sit on the sage section: white titles were 1.7:1 */
main .keen-slider .caption { color: var(--d-ink); }
main .keen-slider .caption h4 { color: var(--d-ink); }

/* Big photo cards: the theme's overlay is 200px tall (100px padding) and pokes out of short cards as grey bars.
   The scrim moves onto the caption, which always covers the text. */
main .block-main { overflow: hidden; border-radius: var(--d-radius); }
main .block-main .overlay.bot { display: none; }
main .block-main .caption {
  padding: 4.8rem var(--space-3) var(--space-3) !important;
  background-image: linear-gradient(to top, rgba(9, 18, 9, .92) 0, rgba(9, 18, 9, .78) 55%, rgba(9, 18, 9, 0) 100%);
}
main .block-main .caption h2 { line-height: 1.25; margin-bottom: 0 !important; }
main .block-main .caption .cat { margin-bottom: .4rem; }
main .block-main picture img { min-height: 22rem; }
@media (max-width: 680px) {
  main .block-main .caption { padding: 4rem var(--space-2) var(--space-2) !important; }
  main .block-main .caption h2 { font-size: 2rem !important; }
  main .block-main picture img { min-height: 24rem; }
}

/* ---- Home: most-read list as compact rows so the column matches the two hero cards ---- */
@media (min-width: 768px) {
  /* .d-block carries display:block !important */
  main .seneste.side > .sticky .block-news { display: grid !important; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-2); align-items: start; margin-bottom: var(--space-3) !important; }
  main .seneste.side > .sticky .block-news > .sect { grid-column: 1; }
  main .seneste.side > .sticky .block-news .caption { grid-column: 2; padding-top: 0 !important; }
  main .seneste.side > .sticky .block-news img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
  main .seneste.side > .sticky .block-news .caption h4 { font-size: 1.6rem !important; }
}

/* ---- Sidebar link lists (article pages) ---- */
main .sidebar .block-split { margin-bottom: 0 !important; padding-block: .7rem; border-bottom: 1px solid var(--d-line); }
main .sidebar .block-split h4 { font-size: 1.5rem !important; line-height: 1.35; margin: 0; }
main .sidebar .block-split:hover h4 { color: var(--d-link); }

/* ---- Archive pages ---- */
main .archive-header { padding-block: var(--space-3) !important; }
main.archive .block-news { margin-bottom: var(--space-3) !important; }

/* ---- Section rhythm: 6.4rem bands above and below every home section is too much on phones ---- */
@media (max-width: 767px) {
  main > section.py-5, main > section.py-6 { padding-block: var(--space-4) !important; }
  main > section.pb-5, main > section.pb-6 { padding-bottom: var(--space-4) !important; }
}
main .keen-slider__slide { margin-bottom: var(--space-2) !important; }

/* ---- Footer: comfortable tap targets and a shorter top band ---- */
#footer.py-6 { padding-block: var(--space-4) !important; }
#footer > .container > .border-top { padding-top: var(--space-3) !important; padding-bottom: var(--space-4) !important; }
#footer a.overflow-txt { padding-block: .35rem; }
#footer .f-3 { margin-bottom: var(--space-1); }