/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* Autonatives Search box in the header: fills whatever width the grid
   column below gives it, instead of a hardcoded pixel size. */
.navbar-section.search-center {
    display: flex;
    align-items: flex-end;
}
.navbar-section.search-center .autonatives-search {
    width: 100%;
}
.navbar-section.search-center .autonatives-search-form {
    width: 100%;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}
.navbar-section.search-center .autonatives-search,
.navbar-section.search-center .autonatives-search-form {
    margin: 0;
}
.navbar-section.search-center .autonatives-search-form input[type="search"] {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
    box-sizing: border-box;
    line-height: 1.3;
    margin: 0;
    /* Safari draws its own magnifying-glass + clear-button decoration inside
       type="search" inputs, which collides with our own padding/placeholder.
       Turning off native appearance hands full control to our own CSS. */
    -webkit-appearance: none;
    appearance: none;
}
.navbar-section.search-center .autonatives-search-form input[type="search"]::-webkit-search-decoration,
.navbar-section.search-center .autonatives-search-form input[type="search"]::-webkit-search-cancel-button,
.navbar-section.search-center .autonatives-search-form input[type="search"]::-webkit-search-results-button,
.navbar-section.search-center .autonatives-search-form input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.navbar-section.search-center .autonatives-search-form .autonatives-search-button {
    padding: 0.5rem 0.6rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Tighter nav item spacing so items fit comfortably on one row. */
.dropmenu a {
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
}
.dropmenu > ul,
.dropmenu ul.navigation {
    gap: 0.15rem;
    flex-wrap: nowrap;
}

/* Desktop header layout: logo+menu left, search centered, account controls
   right. Scoped to the same breakpoint the theme already uses for the
   desktop nav, so the mobile overlay menu is untouched. The middle column
   is a fixed range so the search box grows as large as comfortably fits
   without pushing the outer columns into wrapping. */
@media (min-width: 860px) {
    #header .navbar {
        display: grid;
        grid-template-columns: auto minmax(140px, 1fr) auto;
        align-items: end;
        gap: 0.75rem;
    }
    .navbar-left {
        grid-column: 1;
        display: flex;
        align-items: end;
        gap: 1.5rem;
        justify-self: start;
    }
    .navbar-left .dropmenu,
    .navbar-left .dropmenu > ul {
        flex-wrap: nowrap;
    }
    .navbar-section.search-center {
        grid-column: 2;
        justify-self: stretch;
    }
    .navbar-section.actions {
        grid-column: 3;
        margin-left: 0;
        justify-content: flex-end;
        justify-self: end;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Live search dropdown */
.live-search-wrap {
    position: relative;
}
.live-search-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    min-width: 320px;
    background: var(--q2-bg-raised, var(--q2-bg));
    border: 1px solid var(--q2-border, rgba(128,128,128,0.3));
    border-radius: var(--q2-radius-sm, 8px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
    padding: 0.4rem;
    z-index: 200;
    max-height: 70vh;
    overflow-y: auto;
}
.live-search-result {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--q2-radius-sm, 6px);
    text-decoration: none;
    color: inherit;
}
.live-search-result:hover,
.live-search-result:focus {
    background: color-mix(in oklab, var(--q2-accent, #8428DF) 12%, transparent);
}
.live-search-result-title {
    font-weight: 600;
    font-size: 0.9rem;
}
.live-search-result-snippet {
    font-size: 0.8rem;
    opacity: 0.75;
    line-height: 1.35;
}
.live-search-result-snippet mark {
    background: color-mix(in oklab, var(--q2-accent, #8428DF) 35%, transparent);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 0.15em;
}
.live-search-empty {
    padding: 0.6rem 0.65rem;
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0;
}
.live-search-more {
    display: block;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-top: 1px solid var(--q2-border, rgba(128,128,128,0.2));
    margin-top: 0.2rem;
    text-decoration: none;
}

/* A-Z index (az-index.html.twig) */
html {
    scroll-behavior: smooth;
}
.az-slider {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1.5rem 0 2rem;
    padding: 0.75rem;
    border: 1px solid var(--q2-border, rgba(128,128,128,0.25));
    border-radius: var(--q2-radius-sm, 8px);
    position: sticky;
    top: 0.5rem;
    background: var(--q2-bg-raised, var(--q2-bg));
    z-index: 10;
}
.az-slider-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    color: inherit;
}
a.az-slider-letter:hover,
a.az-slider-letter:focus {
    background: color-mix(in oklab, var(--q2-accent, #8428DF) 20%, transparent);
}
.az-slider-letter-disabled {
    opacity: 0.25;
    cursor: default;
}
.az-group {
    margin-top: 2rem;
    scroll-margin-top: 4.5rem;
}
.az-group h2 {
    font-size: 1.1rem;
    border-bottom: 1px solid var(--q2-border, rgba(128,128,128,0.25));
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}
.az-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.az-empty {
    opacity: 0.7;
}

/* Biome hero icon badges (Bioms page) */
.biome-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--biome-color, #8428DF) 25%, transparent);
    border: 2px solid var(--biome-color, #8428DF);
    color: var(--biome-color, #8428DF);
    font-size: 1.9rem;
    margin-bottom: 1rem;
}
.modular-hero .biome-hero-icon {
    margin-inline: auto;
}