/* ============================================================
   SITE HEADER — Benqu's three bands (markup: header.php):
     .topbar   dark navy: date chip + headline ticker
     .brandbar the logo / site title, the burger below 1024px and
               the social icons at the far right
     .navbar   from 1024px up a white sticky bar; below that the
               same element becomes an off-canvas drawer, driven by
               assets/js/nav-drawer.js
   The shared .socials rules live in base.css (the footer uses
   them too).
   ============================================================ */

.site-header {
    font-family: var(--font-body);
}

/* ------------------------------------------------------------
   Band 1 — top bar
   ------------------------------------------------------------ */
.topbar {
    background: var(--c-topbar-bg);
    color: var(--c-topbar-ink);
}

.topbar__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 10px clamp(20px, 4vw, 56px);
    display: flex;
    align-items: center;
    gap: 20px;
}

.topbar__date {
    flex: 0 0 auto;
    margin: 0;
}

/* Benqu's chip shape again — one square corner, three round. */
.topbar__date span {
    display: inline-block;
    padding: 9px 15px;
    border-radius: var(--radius-badge);
    background: var(--c-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Language switcher (inc/language-switcher.php)
   ------------------------------------------------------------
   Two-letter codes at the far right of the top bar. The current
   language is a <span>, not a link, and wears the date chip's
   shape so the two ends of the bar match.
   ------------------------------------------------------------ */
.lang-switch {
    flex: 0 0 auto;
    margin-left: auto;
}

.lang-switch__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lang-switch__item {
    display: inline-block;
    padding: 7px 11px;
    border-radius: var(--radius-badge);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--c-topbar-ink-soft);
    text-decoration: none;
}

a.lang-switch__item:hover,
a.lang-switch__item:focus-visible {
    color: var(--c-lime);
}

.lang-switch__item.is-current {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ------------------------------------------------------------
   Headline ticker
   ------------------------------------------------------------
   header.php prints the same list twice. Each copy is translated
   by -100% of ITS OWN width, so copy 2 lands exactly where copy 1
   started and the loop has no seam. The two copies must therefore
   stay identical in width — hence the matching padding-right,
   which also keeps the gap across the seam equal to the gap
   between items inside a copy.
   ------------------------------------------------------------ */
.ticker {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ticker__label {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c-topbar-ink);
    white-space: nowrap;
}

.ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    overflow: hidden;
    /* Headlines fade out at the right edge instead of being sliced. */
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent);
}

.ticker__list {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0 40px 0 0;
    list-style: none;
    animation: ib-ticker 45s linear infinite;
}

.ticker__viewport:hover .ticker__list,
.ticker__viewport:focus-within .ticker__list {
    animation-play-state: paused;
}

.ticker__list a {
    color: #fff;
    font-size: 0.88rem;
    text-decoration: none;
    white-space: nowrap;
}

.ticker__list a:hover {
    color: var(--c-lime);
}

@keyframes ib-ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* ------------------------------------------------------------
   Band 2 — brand (+ the drawer burger below 1024px)
   ------------------------------------------------------------ */
.brandbar__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px clamp(20px, 4vw, 56px);
    display: flex;
    align-items: center;
    gap: 18px;
}

.brandbar__logo img {
    display: block;
    width: auto;
    height: 48px;
}

/* Two lines out of one setting — see insidebulgaria_site_name_parts().
   The link is the grid, not the <p>, so the whole lockup is one target
   and the two lines cannot drift apart on hover. */
.brandbar__title {
    margin: 0;
    line-height: 1.15;
}

.brandbar__title a {
    display: inline-grid;
    gap: 3px;
    color: var(--c-ink);
    text-decoration: none;
}

.brandbar__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.1;
}

/* The body face, not the display one: at this size the condensed
   display face reads as a cramped second title rather than as a line
   under a name. Letter-spacing does the rest of the separating. */
.brandbar__sub {
    font-family: var(--font-body);
    font-size: clamp(0.72rem, 1.1vw, 0.84rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--c-ink-faint);
    transition: color 0.18s ease;
}

.brandbar__title a:hover {
    color: var(--c-accent);
}

.brandbar__title a:hover .brandbar__sub {
    color: var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
    .brandbar__sub {
        transition: none;
    }
}

/* The site's own profiles, pushed to the far end of the band.
   Only printed when at least one is filled in (header.php). */
.socials--brand {
    margin-left: auto;
}

.socials--brand .socials__label {
    color: var(--c-ink-faint);
}

.socials--brand .socials__list a {
    color: var(--c-ink-soft);
}

.socials--brand .socials__list a:hover,
.socials--brand .socials__list a:focus-visible {
    color: var(--c-accent);
}

.socials--brand .socials__list svg {
    width: 20px;
    height: 20px;
}

/* On a phone the burger and the name need the room; the icons
   stay, the words go. */
@media (max-width: 767px) {
    .socials--brand .socials__label {
        display: none;
    }

    .socials--brand .socials__list {
        gap: 12px;
    }

    .socials--brand .socials__list svg {
        width: 18px;
        height: 18px;
    }
}

/* Benqu's bordered burger box. Hidden at desktop, where the bar
   itself is on screen; switched on in the drawer media query. */
.nav-toggle {
    display: none;
    place-items: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 5px;
    color: var(--c-ink);
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.nav-toggle__bars {
    display: grid;
    gap: 4px;
    width: 20px;
}

.nav-toggle__bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* Only ever painted behind an open drawer — the rule that shows it
   lives in the drawer media query, so it can never appear at desktop. */
.nav-overlay {
    display: none;
}

/* ------------------------------------------------------------
   Band 3 — navigation
   ------------------------------------------------------------ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.navbar__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Drawer-only header row. */
.navbar__head {
    display: none;
}

.site-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.site-nav .menu {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav .menu a {
    display: block;
    padding: 16px 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav .menu > li > a {
    margin-right: clamp(18px, 2.2vw, 40px);
}

.site-nav .menu a:hover,
.site-nav .current-menu-item > a {
    color: var(--c-accent);
}

.site-nav .menu-item-has-children > a::after {
    content: "\203A";
    margin-left: 6px;
    color: var(--c-ink-faint);
}

/* Desktop: inline bar with real hover/focus dropdowns. The row wraps
   rather than overflowing — Bulgarian category names are long enough
   that a nowrap bar would push a horizontal scrollbar onto the whole
   page, and clipping it with overflow:auto would cut off the
   dropdowns. */
@media (min-width: 1024px) {
    .site-nav .menu {
        flex-wrap: wrap;
    }

    .site-nav .menu > li {
        position: relative;
    }

    .site-nav .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        display: none;
        min-width: 230px;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-md);
        box-shadow: 0 20px 40px -24px var(--c-shadow);
    }

    .site-nav .menu > li:hover > .sub-menu,
    .site-nav .menu > li:focus-within > .sub-menu {
        display: block;
    }

    .site-nav .sub-menu a {
        padding: 9px 18px;
        font-size: 0.94rem;
    }
}

/* ------------------------------------------------------------
   Tablet & mobile — the bar becomes an off-canvas drawer
   ------------------------------------------------------------
   Closed state is visibility:hidden, not just an off-screen
   transform: that keeps the links out of the tab order while the
   drawer is shut, without needing JS to toggle inert. The
   visibility flip is delayed by the slide duration so the panel
   stays paintable on the way out.
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
    .nav-toggle {
        display: grid;
    }

    body.ib-nav-open {
        overflow: hidden;
    }

    body.ib-nav-open .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(10, 18, 51, 0.55);
    }

    .navbar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: min(320px, 86vw);
        border: 0;
        border-right: 1px solid var(--c-border);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0s linear 0.28s;
    }

    .navbar.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.28s ease, visibility 0s;
    }

    .navbar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 20px;
    }

    .navbar__head {
        order: -2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--c-border);
    }

    .navbar__head-title {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-ink-faint);
    }

    .nav-close {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--c-border);
        border-radius: 5px;
        color: var(--c-ink);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav-close:hover {
        border-color: var(--c-accent);
        color: var(--c-accent);
    }

    .site-nav .menu {
        flex-direction: column;
        align-items: stretch;
    }

    .site-nav .menu a {
        padding: 13px 0;
        white-space: normal;
    }

    .site-nav .menu > li > a {
        margin-right: 0;
    }

    .site-nav .menu > li + li > a {
        border-top: 1px solid var(--c-border);
    }

    .site-nav .sub-menu {
        margin: 0 0 0 4px;
        padding: 0;
        list-style: none;
        border-left: 2px solid var(--c-border);
    }

    .site-nav .sub-menu a {
        padding: 10px 0 10px 14px;
        font-size: 0.94rem;
        font-weight: 600;
        color: var(--c-ink-soft);
    }

    .site-nav .menu-item-has-children > a::after {
        content: none;
    }

    /* Search above the links inside the drawer (.navbar__head is -2). */
    .search-form {
        order: -1;
        width: 100%;
        margin-bottom: 18px;
    }

    .search-form input[type="search"] {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ------------------------------------------------------------
   Search
   ------------------------------------------------------------ */
.search-form {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 4px 0 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 5px;
}

.search-form:focus-within {
    border-color: var(--c-accent);
}

.search-form input[type="search"] {
    width: clamp(120px, 18vw, 220px);
    border: 0;
    background: transparent;
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.search-form input[type="search"]:focus {
    outline: none;
}

.search-form button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--c-ink-faint);
    cursor: pointer;
}

.search-form button:hover {
    color: var(--c-accent);
}

.search-form svg {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------
   Search — busy state (assets/js/search-submit.js)
   ------------------------------------------------------------
   The field fades out rather than being removed, so the box keeps
   its width and nothing shifts; the spinner is laid over it. The
   input is never `disabled` — that would drop the query from the
   submitted data.
   ------------------------------------------------------------ */
.search-form__loading {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    right: 44px;
    display: none;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--c-ink-faint);
    white-space: nowrap;
    overflow: hidden;
}

.search-form.is-submitting .search-form__loading {
    display: flex;
}

.search-form.is-submitting input[type="search"] {
    opacity: 0;
}

.search-form.is-submitting button {
    opacity: 0.4;
    cursor: default;
}

.search-form__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--c-border-strong);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: ib-spin 0.7s linear infinite;
}

@keyframes ib-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------
   Narrow screens — let the top bar wrap instead of overflowing
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .topbar__inner {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ticker {
        flex: 1 0 100%;
        order: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No auto-scroll: show one copy of the headlines and let the
       reader pan the row by hand. */
    .ticker__list {
        animation: none;
    }

    .ticker__list[aria-hidden="true"] {
        display: none;
    }

    .ticker__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .navbar {
        transition: none;
    }

    /* No spin; the "Търсене…" label carries the message on its own. */
    .search-form__spinner {
        animation: none;
        border-top-color: var(--c-border-strong);
    }
}