/*
 * Site specific fixes for bdp_template 7.0.0-alpha1 (www.sachsen.pfadfinden.de)
 */

/* meta bar at the top: show all entries side by side (v7 stacks them, only the first one is visible) */
@media (width >= 48rem) {
    header > div:first-child > div:first-child > ul {
        display: flex;
    }
}

/* news list: hover effect for the teaser cards
   (bdp_template marks the card as hover group "n-link" but ships no styles for it) */
[id^="news-container-"] .article:hover h3,
[id^="news-container-"] .article:focus-within h3 {
    color: var(--color-kluft);
}
@media (prefers-color-scheme: dark) {
    [id^="news-container-"] .article:hover h3,
    [id^="news-container-"] .article:focus-within h3 {
        color: var(--color-yellow-light);
    }
}

/* links in rich text: same hover colours as all other links of bdp_template (v7 only underlines them) */
.richtext a:hover,
.news-text-wrap a:hover {
    color: var(--color-kluft);
    text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
    .richtext a:hover,
    .news-text-wrap a:hover {
        color: var(--color-yellow-light);
    }
}

/* tables in rich text (e.g. the dictionary "Deutsch-Sächsisch"): v7 ships no table styles */
.richtext table,
.news-text-wrap table {
    border-collapse: collapse;
    margin-top: 1rem;
}
.richtext :is(td, th),
.news-text-wrap :is(td, th) {
    padding: 0.4rem 1.5rem 0.4rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.richtext :is(td, th):last-child,
.news-text-wrap :is(td, th):last-child {
    padding-right: 0;
}
.richtext th,
.news-text-wrap th {
    font-weight: 700;
}

/* links in rich text are underlined permanently, otherwise they look like normal text */
.richtext a,
.news-text-wrap a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* footer: separator line above the link block, so it is clear where the page content ends */
.sachsen-footer-links > div {
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    padding-top: 3rem;
}

/* space between the header area (yellow block / slider) and the page content, v7 has none */
main > section.content__header + section {
    padding-top: 2rem;
}
@media (width >= 64rem) {
    main > section.content__header + section {
        padding-top: 3rem;
    }
}

/* coloured blocks (layout yellow / blue / red) keep their colour in dark mode:
   bdp_template turns them black/grey, but the colours carry meaning (e.g. the age groups) */
@media (prefers-color-scheme: dark) {
    .bg-yellow-500.dark\:bg-black {
        background-color: var(--color-yellow-500);
        color: var(--color-blue-500);
    }
    .bg-blue-500.dark\:bg-black {
        background-color: var(--color-blue-500);
        color: var(--color-yellow-500);
    }
    .bg-red-500:is(.dark\:bg-black, .dark\:bg-kohte) {
        background-color: var(--color-red-500);
        color: var(--color-white);
    }
}

/* media2click placeholder (YouTube consent box) has a fixed light background: keep its text dark in dark mode */
.media2click-placeholder {
    color: var(--color-kluft);
}

/* colour scheme switcher in the footer */
.sachsen-scheme-button {
    cursor: pointer;
    text-decoration: none;
}
.sachsen-scheme-button[aria-pressed="true"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
}

/* Termine: linked entries (calendar entry with URL) are underlined, like links in running text */
.sachsen-event-link {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}