@import "../../../styles/mixins";

$class: ".gov-header";

#{$class} {
    & {
        background-color: var(--component-nav-background);
    }

    // The header keeps its mobile layout (hamburger, stacked navigation) one
    // breakpoint further than the rest of the design system: up to `lg` instead
    // of `md`, because a first-level navigation row does not reliably fit into a
    // tablet width. The global `.gov-mobile-only` / `.gov-desktop-only`
    // utilities still flip at `md` — they are shared with the page templates
    // (pagination, table of contents, sidebars), so they are deliberately left
    // alone and only re-scoped here. Without this, the language and theme
    // controls would disappear between `md` and `lg`: their mobile copies live
    // in the navigation and the desktop `__action` bar is not rendered yet.
    @include mq($from: md, $until: lg) {
        li.gov-mobile-only {
            display: list-item !important;
        }
        .gov-desktop-only {
            display: none !important;
        }
    }

    &__content {
        @include flex($direction: column, $gap: var(--templates-margin-m));
        padding: var(--templates-margin-l);
    }
    &__navigation {
        position: relative;
        z-index: 10;
        padding: var(--templates-margin-s) 0;
        border-top: 1px solid var(--border-primary);
    }
    &__logo {
        color: var(--icon-on-subtle);
        @include typography("body-m");
        text-decoration: none;
    }
    &__action {
        display: none;
    }
    &__search-bar {
        display: none !important;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--component-nav-background);
        > * {
            width: 100%;
            padding: var(--templates-margin-l) 0;
        }
    }
    // Rozměrová řada loga (brandmanuál JVS): minimální výška loga je 55 px,
    // pro záhlaví webu se předepisuje 64 px na desktopu a 56 px na mobilu.
    // Na desktopovou velikost přepínáme od `lg`, spolu s rozvržením hlavičky.
    // Výšku vynucujeme v CSS, protože atributy vloženého <svg> nejsou pod
    // naší kontrolou; width: auto drží poměr z viewBoxu (324×413).
    .gov-logo {
        color: var(--icon-on-subtle);
        width: auto;
        height: rem-calc(56);
    }

    @include mq($from: lg) {
        .gov-logo {
            height: rem-calc(64);
        }

        &__content {
            @include flex($direction: row, $justify: space-between, $align: center);
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: 0 var(--templates-margin-l);
        }
        &__divider {
            padding: var(--templates-margin-m) 0;
            border-bottom: 1px solid var(--component-nav-separator);
        }
        &__navigation {
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: var(--templates-margin-s) var(--templates-margin-l);
            border: none;
        }
        &__logo {
            @include typography("body-l");
        }
        &__action {
            display: flex;
        }
        &__search-bar {
            .gov-search {
                width: rem-calc(500);
            }
        }
        &__mobile {
            display: none;
        }
    }

    // VARIANTS
    &--small {
        #{$class}__content {
            position: relative;
            z-index: 10;
            padding: 0;
            gap: 0;
            > #{$class}__navigation {
                position: static;
            }
        }
        #{$class}__left {
            padding: var(--templates-margin-l);
        }

        @include mq($from: lg) {
            padding: var(--templates-margin-m) 0;
            #{$class}__content {
                padding: 0 var(--templates-margin-l);
                gap: var(--templates-margin-l);
            }
            #{$class}__left {
                padding: 0;
            }
            #{$class}__navigation {
                max-width: none;
                margin: 0 auto 0 0;
                padding-left: 0;
                padding-right: 0;
            }
        }
    }
}