@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600;700&family=Roboto+Condensed:wght@300;400&family=Philosopher:wght@400;700&display=swap');

/* ============================================================
   FOTOAWARD — modern header & navigation
   New file. Loaded after site.css; overrides nothing outside
   the .fw-header block, so the rest of the site is untouched.
   Fonts: Commissioner (menu), Roboto Condensed (submenu text),
   Philosopher (gallery section titles) — imported above.
   ============================================================ */

:root {
    --fw-ink: #1a1a1a;
    --fw-muted: #7a7a72;
    --fw-line: #e7e5e0;
    --fw-gold: #c9a227;
    --fw-bg: #ffffff;
    --fw-bg-soft: #faf9f6;
    --fw-topbar-h: 5.5rem; /* full header 5.5rem − menu 1.8rem; tune if the frozen menu is not flush */
}

.fw-header {
    /* top bar is NOT sticky: it scrolls up out of view, exactly like the live site */
    background: var(--fw-bg);
    border-bottom: 1px solid var(--fw-line);
}

/* only the menu bar pins to the top on scroll */
.fw-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--fw-bg);
    border-bottom: 1px solid var(--fw-line);
}

/* FreezeTopPanel (fixedMenu = true): the whole top panel is frozen at the top,
   backend-driven exactly like the site's with-fixed-top / content-with-fixed-top sections.
   The content wrapper gets .content-with-fixed-top (from site.css) to clear it. */
.fw-header.fw-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.fw-nav.fw-fixed {
    position: fixed;
    top: var(--fw-topbar-h);
    left: 0;
    right: 0;
    z-index: 1030;
}

/* ---------- top bar: logo · login · page title · sponsor ---------- */

.fw-topbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
    padding: 0.8rem 1.25rem 0.05rem;
}

.fw-logo {
    flex: 1 1 0;
    min-width: 0;
}

    .fw-logo img {
        height: 44px;
        position: relative;
        top: 5.6px;
        left: -2px;
        image-rendering: -webkit-optimize-contrast;
    }

.fw-sponsor {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.fw-pagetitle {
    flex: 0 1 auto;
    text-align: center;
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.45;
    color: #12305b;
    text-shadow: 0 1px 0 #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.18);
    white-space: break-spaces;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0 0.75rem;
}

    .fw-pagetitle::before,
    .fw-pagetitle::after {
        content: "";
        width: 44px;
        height: 1px;
        background: var(--fw-gold);
        flex: none;
    }

/* drop the flanking dashes once space gets tight, so the title never hits the sponsor */
@media (max-width: 1300px) {
    .fw-pagetitle::before,
    .fw-pagetitle::after {
        display: none;
    }
}

.fw-sponsor img {
    height: 70px;
    zoom: 110%;
    image-rendering: -webkit-optimize-contrast;
}

/* ---------- burger (mobile only) ---------- */

.fw-burger {
    display: none !important;
    background: none;
    border: 0;
    padding: 0.4rem;
    margin-left: 0.5rem;
    cursor: pointer;
}

    .fw-burger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--fw-ink);
        margin: 5px 0;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .fw-burger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .fw-burger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .fw-burger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ---------- nav ---------- */

.fw-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    row-gap: 0;
    gap: 0;
    margin: 0 auto;
    padding: 0 0.75rem;
}

.fw-nav li {
    position: relative;
}

/* ---------- top-level links (Bootstrap .nav-link, restyled) ---------- */
.fw-nav .nav-link {
    font-family: 'Commissioner', sans-serif;
    font-size: clamp(0.66rem, 0.47vw + 0.4rem, 0.88rem);
    font-weight: 400;
    letter-spacing: clamp(0.3px, 0.14vw - 0.9px, 1.2px);
    text-transform: uppercase;
    color: var(--fw-ink);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem clamp(0.3rem, 0.7vw - 0.1rem, 0.8rem);
    position: relative;
    white-space: nowrap;
}

    .fw-nav .nav-link:hover,
    .fw-nav .nav-link:focus {
        color: var(--fw-ink);
        text-decoration: none;
    }

    .fw-nav .nav-link .fa-globe {
        color: #38a1db;
    }

    /* red dropdown caret — restyle Bootstrap's OWN .dropdown-toggle::after */
    .fw-nav .nav-link.dropdown-toggle::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 0.08rem;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid #cc3333;
        border-bottom: 0;
        vertical-align: middle;
        transform: translateY(1px);
        transition: transform 0.18s ease;
    }

    .fw-nav .nav-link.dropdown-toggle[aria-expanded="true"]::after {
        transform: translateY(1px) rotate(180deg);
    }

    /* gold underline that grows on hover — on ::before so ::after stays the caret */
    .fw-nav .nav-link::before {
        content: "";
        position: absolute;
        left: clamp(0.3rem, 0.7vw - 0.1rem, 0.8rem);
        bottom: 0.1rem;
        height: 1.25px;
        width: 0;
        background: var(--fw-gold);
        transition: width 0.18s ease;
        pointer-events: none;
    }

    .fw-nav .nav-link:hover::before,
    .fw-nav .nav-link[aria-expanded="true"]::before {
        width: calc(100% - 2 * clamp(0.3rem, 0.7vw - 0.1rem, 0.8rem));
    }

    .fw-nav .nav-link.active {
        font-weight: 500;
    }

        .fw-nav .nav-link.active::before {
            width: calc(100% - 2 * clamp(0.3rem, 0.7vw - 0.1rem, 0.8rem));
            height: 0.5px;
            background: #2e2e2a;
        }

/* ---------- dropdown panels (Bootstrap .dropdown-menu, restyled) ---------- */
.fw-nav .dropdown-menu {
    width: max-content;
    min-width: 12rem;
    max-width: min(94vw, 46rem);
    margin: 0;
    padding: 0.45rem 0.8rem;
    background: var(--fw-bg);
    border: 1px solid var(--fw-line);
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
    font-size: 1rem;
}

/* each .dropdown-item is a year row: label (<a> without href) + links (<a href>) */
.fw-nav .dropdown-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.32rem;
    padding: 0.18rem 0;
    white-space: normal;
    background: transparent;
    color: var(--fw-ink);
}

    .fw-nav .dropdown-item + .dropdown-item {
        border-top: 1px dotted var(--fw-line);
    }

    .fw-nav .dropdown-item:hover,
    .fw-nav .dropdown-item:focus,
    .fw-nav .dropdown-item:active {
        background: transparent;
        color: var(--fw-ink);
    }

    /* year label = the <a> that has no href */
    .fw-nav .dropdown-item > a:not([href]) {
        font-family: 'Commissioner', sans-serif;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        color: var(--fw-muted);
        min-width: 2.5rem;
        pointer-events: none;
    }

    /* the actual links = <a> with href */
    .fw-nav .dropdown-item > a[href] {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 300;
        font-size: 0.94rem;
        letter-spacing: 0.01em;
        color: var(--fw-ink);
        text-decoration: none;
        white-space: nowrap;
        padding: 0;
        display: inline;
    }

        .fw-nav .dropdown-item > a[href]:hover {
            color: var(--fw-gold);
            background: transparent;
        }

        /* red bullet between consecutive links */
        .fw-nav .dropdown-item > a[href] + a[href]::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #e03131;
            margin-right: 0.32rem;
            vertical-align: middle;
            transform: translateY(-2px);
        }

    .fw-nav .dropdown-item > a.ico::before {
        content: none;
    }

    .fw-nav .dropdown-item > a[href] i {
        font-size: 0.75em;
        color: #8a1f1f;
        margin-right: 0.08rem;
    }

/* single-link rows (2019/2018) are <a class="dropdown-item" href> themselves */
.fw-nav a.dropdown-item[href] {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 0.94rem;
    color: var(--fw-ink);
}

    .fw-nav a.dropdown-item[href]:hover {
        color: var(--fw-gold);
        background: transparent;
    }

/* external links (d3.ru, hoyafilters.ru) get a small arrow */
.fw-nav .fw-ext::after {
    content: "\2197";
    font-size: 0.7em;
    margin-left: 0.2em;
    color: var(--fw-muted);
}

/* ---------- keyboard focus & reduced motion ---------- */

.fw-nav .nav-link:focus-visible,
.fw-nav .dropdown-item a:focus-visible,
.fw-burger:focus-visible {
    outline: 2px solid var(--fw-gold);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fw-header * {
        transition: none !important;
    }
}

/* ============================================================
   MOBILE  (< 992px)
   ============================================================ */

@media (max-width: 1439.98px) {
    .fw-pagetitle {
        position: static;
        transform: none;
        margin-left: auto;
        text-align: right;
        max-width: none;
    }

    .fw-sponsor {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {

    .fw-topbar {
        padding: 0.6rem 1rem;
    }

    .fw-logo img {
        height: 36px;
        top: 4.6px;
    }

    .fw-pagetitle {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

        .fw-pagetitle::before, .fw-pagetitle::after {
            display: none;
        }

    .fw-sponsor img {
        height: 34px;
    }


    .fw-nav ul {
        padding: 0 0.35rem 0.15rem;
    }

    .fw-nav .nav-link {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
        padding: 0.12rem 0.35rem;
    }

    /* keep panels inside the screen; Bootstrap/Popper positions them */
    .fw-nav .dropdown-menu {
        max-width: 96vw;
        overflow-x: auto;
    }

    .fw-nav .dropdown-item > a:not([href]) {
        min-width: 2.3rem;
    }
}

/* ===== top bar — two switchable arrangements. Kicks in at <=991px so the
        title drops to its own line WELL before it can touch the logo (~918px) ===== */
@media (max-width: 991.98px) {
    /* On tablets/phones the page title drops to its own centered line (no overlap) */
    .fw-topbar {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
    }

    .fw-logo {
        order: 1;
        flex: 0 0 auto;
    }

    .fw-sponsor {
        order: 2;
        flex: 1 1 auto;
        justify-content: flex-end;
    }

    .fw-pagetitle {
        order: 3;
        flex: 1 0 100%;
        justify-content: center;
        text-align: center;
        margin: 0.25rem 0 0;
    }
}

/* ===== menu items are packed tight (justify-content:center) at all widths;
        a small column-gap keeps a consistent hair of space between them ===== */
.fw-nav ul {
    column-gap: 0.1rem;
}

/* ===== section text: drop the forced line break only under strong compression
        (phones) so "30 победителей..." flows on and saves vertical space ===== */
@media (max-width: 575.98px) {
    .sect8 .fw-brk {
        display: none;
    }
}