/* ------------------------------------------------------------------ *
 * Dovkillia ta Zdorovia — custom theme overrides
 * Upload via: Admin → Settings → Website → Appearance →
 *             Theme → "Additional CSS" (file upload)
 * ------------------------------------------------------------------ */

/* Page header logo: cap at 2/3 of the central column width,
   centered horizontally within that column. */
.pkp_site_name .is_img,
.pkp_site_name .is_img a {
    display: block;
    width: 50.0%;
    max-width: 50.0%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.pkp_site_name .is_img img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;   /* removes the 2.143rem / 80px cap */
    margin: 0 auto;
}

/* On mobile the theme absolutely-positions .pkp_site_name with left:2.857rem
   to make room for the burger menu — that pushes the image into the corner.
   Reset to a normal block element. */
.pkp_site_name {
    position: static;
    left: auto;
    right: auto;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
    white-space: normal;
}

/* The burger button is then placed below the logo on mobile. */
@media (max-width: 991px) {
    .pkp_site_name_wrapper { height: auto; }
    .pkp_site_nav_toggle  { position: relative; }
}

/* Drop the extra top padding the theme adds when a logo is present. */
.has_site_logo .pkp_head_wrapper { padding-top: 0; }
@media (min-width: 992px) {
    .pkp_head_wrapper { padding-top: 0; }
}

/* Footer: match the header logo background (#FCBA63). */
.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content {
    background-color: #FCBA63;
}

/* ------------------------------------------------------------------ *
 * Primary navigation bar — recolor the top (currently black) strip
 * to match the open dropdown panel from the screenshot:
 *   - panel background: white
 *   - link label color: theme teal (#1E6091)
 *   - hovered / open-submenu row: medium teal-blue (#4A89A8) + white
 * ------------------------------------------------------------------ */
:root {
    --dovkil-nav-bg: #ffffff;
    --dovkil-nav-fg: #1E6091;
    --dovkil-nav-hover-bg: #4A89A8;
    --dovkil-nav-hover-fg: #ffffff;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary,
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
    background-color: var(--dovkil-nav-bg) !important;
    background-image: none !important;
}

/* Center the primary menu items within the central column. */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    text-align: center !important;
}

.pkp_navigation_primary {
    display: inline-flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.pkp_navigation_primary > li {
    float: none !important;
    display: inline-block;
}

/* Dropdown submenus: keep them left-aligned even though the parent bar
 * is centered. Without this, `text-align: center` on the primary nav
 * cascades into the submenu items. */
.pkp_navigation_primary li ul {
    text-align: left !important;
}

.pkp_navigation_primary li li {
    display: block !important;
    text-align: left !important;
}

.pkp_navigation_primary li li a {
    text-align: left !important;
    justify-content: flex-start !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary a,
.pkp_navigation_user > li > a,
.pkp_navigation_user a {
    color: var(--dovkil-nav-fg) !important;
    background-color: transparent !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.in > a,
.pkp_navigation_primary li li a:hover,
.pkp_navigation_primary li li a:focus,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    background-color: var(--dovkil-nav-hover-bg) !important;
    color: var(--dovkil-nav-hover-fg) !important;
}

/* Mobile nav toggle (burger) — keep it visible on the new light bar. */
.pkp_site_nav_toggle {
    color: var(--dovkil-nav-fg) !important;
    background-color: transparent !important;
}

/* Search row / search toggle — same palette as the primary nav. */
.pkp_search,
.pkp_navigation_search_wrapper,
.pkp_navigation_search,
.pkp_head_wrapper .pkp_search {
    background-color: var(--dovkil-nav-bg) !important;
    background-image: none !important;
}

.pkp_search a,
.pkp_search label,
.pkp_search .search_prompt,
.pkp_navigation_search a,
.pkp_navigation_search_wrapper a,
.pkp_search_desktop_toggle,
button.pkp_search_desktop_toggle,
/* Default-theme "Search" link variants that sit outside .pkp_navigation_user */
a.search_prompt,
li.search > a,
li.search a.search_prompt,
.pkp_head_wrapper li.search > a,
.pkp_head_wrapper a.search_prompt,
.pkp_navigation_primary_row a.search_prompt,
.pkp_navigation_primary_row li.search > a {
    color: var(--dovkil-nav-fg) !important;
    background-color: transparent !important;
}

.pkp_search a:hover,
.pkp_search a:focus,
.pkp_search_desktop_toggle:hover,
.pkp_search_desktop_toggle:focus,
button.pkp_search_desktop_toggle:hover,
button.pkp_search_desktop_toggle:focus,
a.search_prompt:hover,
a.search_prompt:focus,
li.search > a:hover,
li.search > a:focus {
    background-color: var(--dovkil-nav-hover-bg) !important;
    color: var(--dovkil-nav-hover-fg) !important;
}

/* Search input + submit button inside the search dropdown. */
.pkp_search input[type="search"],
.pkp_search input[type="text"] {
    background-color: #ffffff !important;
    color: var(--dovkil-nav-fg) !important;
    border: 1px solid var(--dovkil-nav-hover-bg) !important;
}

.pkp_search button[type="submit"],
.pkp_search .submit,
.pkp_search input[type="submit"] {
    background-color: var(--dovkil-nav-hover-bg) !important;
    color: var(--dovkil-nav-hover-fg) !important;
    border-color: var(--dovkil-nav-hover-bg) !important;
}

.pkp_search button[type="submit"]:hover,
.pkp_search button[type="submit"]:focus,
.pkp_search input[type="submit"]:hover,
.pkp_search input[type="submit"]:focus {
    background-color: var(--dovkil-nav-fg) !important;
    color: var(--dovkil-nav-hover-fg) !important;
    border-color: var(--dovkil-nav-fg) !important;
}

/* ------------------------------------------------------------------ *
 * Mobile / burger view (≤ 991px): structured vertical menu.
 *
 * The desktop block above forces inline-flex + flex-wrap + centered
 * inline-block items on .pkp_navigation_primary. At narrow widths
 * that turns the burger panel into a chaotic, wrapping grid with all
 * submenus rendered inline. Here we reset that to a clean vertical
 * stack and reveal submenus only when their parent <li> is opened
 * (PKP theme toggles `.in` on tap; we also accept :focus-within as
 * a fallback). A "+" / "−" indicator is shown on parents that have
 * a submenu.
 * ------------------------------------------------------------------ */
@media (max-width: 991px) {

    /* Vertical stack for the whole primary nav. */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        text-align: left !important;
    }

    .pkp_navigation_primary {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: nowrap !important;
        text-align: left !important;
        background-color: var(--dovkil-nav-bg) !important;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_primary li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(30, 96, 145, 0.15);
    }

    .pkp_navigation_primary > li:last-child {
        border-bottom: none;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_primary li a {
        display: block !important;
        width: 100% !important;
        padding: 0.85rem 1rem !important;
        text-align: left !important;
        justify-content: flex-start !important;
        line-height: 1.3 !important;
        white-space: normal !important;
    }

    /* Hide submenus by default; show only when parent <li> is opened. */
    .pkp_navigation_primary li ul {
        display: none !important;
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background-color: rgba(30, 96, 145, 0.06) !important;
    }

    /* Open state driven by the mobile toggle JS (footer.tpl patch).
       NOTE: :focus-within is intentionally NOT used here — it would keep
       the submenu visible while the tapped <a> still has focus, which
       prevents the second tap on the "−" indicator from closing it. */
    .pkp_navigation_primary > li.in > ul,
    .pkp_navigation_primary > li.open > ul,
    .pkp_navigation_primary > li[aria-expanded="true"] > ul {
        display: block !important;
    }

    /* Indent nested links so the hierarchy is visible. */
    .pkp_navigation_primary li li a {
        padding-left: 2rem !important;
        font-size: 0.95em !important;
    }

    .pkp_navigation_primary li li li a {
        padding-left: 3rem !important;
    }

    /* "+" / "−" indicator on parents that actually have a submenu.
       Uses :has() (supported in all modern browsers as of 2024+). */
    .pkp_navigation_primary > li:has(> ul) > a {
        position: relative;
        padding-right: 2.5rem !important;
    }

    .pkp_navigation_primary > li:has(> ul) > a::after {
        content: "+";
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25em;
        line-height: 1;
        font-weight: bold;
        color: inherit;
    }

    .pkp_navigation_primary > li.in:has(> ul) > a::after,
    .pkp_navigation_primary > li.open:has(> ul) > a::after,
    .pkp_navigation_primary > li[aria-expanded="true"]:has(> ul) > a::after {
        content: "\2212"; /* true minus sign */
    }

    /* Same treatment for the user/account nav (login, language, etc.). */
    .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .pkp_navigation_user > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(30, 96, 145, 0.15);
    }

    .pkp_navigation_user > li > a {
        display: block !important;
        padding: 0.85rem 1rem !important;
        text-align: left !important;
    }
}