/* Shared responsive fixes, loaded after the theme CSS on every site.
 * Generated into /assets/css/fixes.css by scripts/restructure.mjs.
 */

/* Long German compounds in headings (e.g. the legal
 * "Verbraucherstreitbeilegung/Universalschlichtungsstelle") have no break
 * opportunity and run past the right edge on anything below ~1020px.
 * Hyphenate where the language allows it, break only if a word still cannot
 * fit on a line of its own. */
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Body copy also lives in narrow columns (e.g. the three-column list on
 * site-a's references page), where a single long word can run past the edge at
 * tablet widths. Re-wrap only when a word really cannot fit. */
p,
li,
a,
td,
th,
blockquote {
    overflow-wrap: break-word;
}

@media (max-width: 767px) {
    /* The theme sets 37.4px below 960px. A word like "Qualifizierungsmatrix®"
     * is ~410px at that size and does not fit a 320–390px screen, so scale the
     * top heading with the viewport until the desktop size takes over. The
     * same applies to long compounds in h2/h3; a slightly smaller size lets
     * them break at natural points (slashes) instead of mid-word. */
    h1 {
        font-size: clamp(23px, 8vw, 37.4px);
    }

    h2 {
        font-size: clamp(21px, 6.5vw, 28.9px);
    }

    h3 {
        font-size: clamp(19px, 5.8vw, 24px);
    }

    /* Paragraphs the CMS set to justify get huge word gaps in a narrow column
     * (a three-word first line stretched across the full width). Left-align. */
    [style*="text-align: justify"],
    [style*="text-align:justify"],
    .uk-text-justify {
        text-align: start !important;
    }
}

/* Desktop submenu disclosure: scripts/restructure.mjs keeps the parent link as
 * a normal link (it navigates to the overview page) and adds a separate caret
 * button that opens the submenu, so mouse, touch and keyboard all have an
 * explicit target. UIkit keeps aria-expanded in sync. */
.uk-navbar-nav > li.uk-parent-split {
    position: relative;
}

.uk-navbar-nav > li.uk-parent-split > a {
    padding-right: 34px;
}

.uk-navbar-nav > li > .uk-parent-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    z-index: 2;
}

.uk-parent-toggle-icon {
    flex: none;
    pointer-events: none;
    transition: transform .2s ease-in-out;
}

.uk-parent-toggle[aria-expanded="true"] .uk-parent-toggle-icon {
    transform: rotate(180deg);
}

.uk-parent-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -6px;
}


/* Site-specific fixes, loaded after the theme CSS.
 * Kept outside the generated theme stylesheet so a re-crawl cannot lose them.
 * Applied by scripts/restructure.mjs -> /assets/css/fixes.css
 */

/* The logo's intrinsic size is 1417px. With the menu collapsed into a
 * hamburger there is nothing squeezing it down, so give it a navbar-sized
 * width instead of letting it fill the whole bar. */
.tm-header-mobile .uk-logo img {
    width: 200px;
    max-width: 70vw;
    height: auto;
}

/* Below 1100px the desktop menu (655px) plus the logo no longer fit, which used
 * to squeeze the logo down to a few pixels. Use the hamburger header until
 * there is room for both. */
@media (max-width: 1099px) {
    .tm-header.uk-visible\@m {
        display: none !important;
    }

    .tm-header-mobile.uk-hidden\@m {
        display: block !important;
    }
}

/* Desktop submenu caret: the label navigates to the overview page, the caret
 * opens the submenu. Match the theme's nav-link and open-state colours. */
.uk-navbar-nav > li > .uk-parent-toggle {
    color: #1a1f23;
}

.uk-navbar-nav > li:hover > .uk-parent-toggle,
.uk-navbar-nav > li > .uk-parent-toggle[aria-expanded="true"] {
    color: #c7d214;
}

.uk-navbar-nav > li.uk-parent-split:has(> .uk-parent-toggle[aria-expanded="true"]) > a {
    color: #c7d214;
}

.uk-navbar-nav > li.uk-parent-split:has(> .uk-parent-toggle[aria-expanded="true"]) > a::before {
    left: 0;
    right: 0;
    background-color: #c7d214;
    opacity: 1;
}