/*
 * Fyringsvakta site header.
 *
 * Restyles the GeneratePress header (nav-float-right, inline mobile toggle)
 * and the elements added by includes/header.php. Every selector is scoped to
 * body.few-header, which is only present while the header module is active,
 * so disabling the module restores the GeneratePress Customizer styling.
 *
 * The mobile breakpoint matches GeneratePress's own (max-width: 768px).
 */

.few-header {
    --few-h-bg: #17181a;
    --few-h-panel: #1c1b19;
    --few-h-text: #ecebe6;
    --few-h-muted: #8a8d8a;
    --few-h-soft: #c4c2ba;
    --few-h-line: #2c2d29;
    --few-h-accent: #6f7f5f;
    --few-h-focus: #ecebe6;
    --few-h-gutter: clamp(20px, 3.2vw, 48px);
}

/* Header bar */

.few-header .site-header {
    background-color: var(--few-h-bg);
    color: var(--few-h-text);
    border-bottom: 1px solid var(--few-h-line);
    font-family: "Space Grotesk", sans-serif;
}

.few-header .site-header .inside-header {
    align-items: center;
    max-width: 1360px;
    padding: 14px var(--few-h-gutter);
}

.few-header .site-header .site-logo {
    flex-shrink: 0;
    margin: 0;
    line-height: 0;
}

.few-header .site-header .header-image {
    display: block;
    width: auto;
    height: 70px;
}

/* The header widget area is not part of this design (empty on the live site). */
.few-header .site-header .header-widget {
    display: none;
}

/* Tagline: sits on the baseline of the logo's wordmark. */

.few-header .few-tagline {
    align-self: flex-end;
    margin: 0 0 3px 28px;
    color: var(--few-h-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Homepage copy of the tagline under the header (mobile only, see below). */
.few-header .few-tagline-mobile {
    display: none;
}

/* Primary navigation */

.few-header .main-navigation,
.few-header .main-navigation ul ul {
    background-color: transparent;
}

.few-header #site-navigation {
    margin-left: auto;
}

.few-header .main-navigation .main-nav ul li a {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
    color: var(--few-h-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 64px;
    letter-spacing: 0.01em;
    text-transform: none;
}

.few-header .main-navigation .main-nav > ul > li > a {
    height: 64px;
}

.few-header .main-navigation .main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    height: 2px;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.few-header .main-navigation .main-nav ul li.menu-item-has-children > a {
    padding-right: 0;
}

.few-header .main-navigation .main-nav > ul > li.menu-item-has-children > a::after {
    right: 34px;
}

.few-header .main-navigation .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
    padding-left: 6px;
    padding-right: 12px;
    color: var(--few-h-muted);
    font-size: 13px;
}

.few-header .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.few-header .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.few-header .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.few-header .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background-color: transparent;
    color: #fff;
}

.few-header .main-navigation .main-nav > ul > li:hover > a::after,
.few-header .main-navigation .main-nav > ul > li.sfHover > a::after {
    background-color: var(--few-h-line);
}

.few-header .main-navigation .main-nav > ul > li[class*="current-menu-"] > a::after {
    background-color: var(--few-h-accent);
}

/* Dropdowns */

.few-header .main-navigation ul ul {
    width: 250px;
    padding: 8px 0;
    background-color: var(--few-h-panel);
    border: 1px solid var(--few-h-line);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.few-header .main-navigation .main-nav ul ul li a {
    padding: 11px 20px;
    color: var(--few-h-soft);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
}

.few-header .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.few-header .main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.few-header .main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a,
.few-header .main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    background-color: rgba(236, 235, 230, 0.05);
    color: var(--few-h-text);
}

/* The Menu Cart plugin's own menu item is replaced by the copy in the menu bar. */
.few-header .main-navigation .main-nav .wpmenucartli {
    display: none;
}

/* Menu bar items: language switcher and cart */

.few-header .main-navigation .menu-bar-items {
    align-items: center;
    gap: 8px;
    margin-left: 24px;
    color: var(--few-h-text);
    line-height: 1;
}

.few-header .main-navigation .menu-bar-item:hover > a,
.few-header .main-navigation .menu-bar-item.sfHover > a {
    background: none;
    color: #fff;
}

.few-header .few-lang__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.few-header .main-navigation .few-lang__item {
    float: none;
    display: flex;
}

.few-header .main-navigation .few-lang .few-lang__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 44px;
    padding: 0 4px;
    color: var(--few-h-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
}

.few-header .main-navigation .few-lang .few-lang__link:hover {
    color: var(--few-h-text);
}

.few-header .main-navigation .few-lang .few-lang__link[aria-current] {
    color: var(--few-h-text);
    text-decoration: underline;
    text-decoration-color: var(--few-h-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.few-header .main-navigation .few-cart .wpmenucart-contents {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--few-h-text);
    line-height: 1;
}

.few-header .few-cart__icon {
    display: block;
}

.few-header .few-cart__count {
    position: absolute;
    top: 5px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--few-h-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* Keyboard focus (GeneratePress and the old Additional CSS removed it) */

.few-header .site-header a:focus-visible,
.few-header .site-header button:focus-visible,
.few-header .site-header .dropdown-menu-toggle:focus-visible {
    outline: 2px solid var(--few-h-focus);
    outline-offset: -2px;
}

/* Mid-size screens */

@media (max-width: 1180px) {
    .few-header .few-tagline {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .few-header .site-header .header-image {
        height: 60px;
    }

    .few-header .main-navigation .main-nav ul li a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 15px;
    }

    .few-header .main-navigation .main-nav > ul > li > a::after {
        left: 12px;
        right: 12px;
    }

    .few-header .main-navigation .main-nav > ul > li.menu-item-has-children > a::after {
        right: 28px;
    }

    .few-header .main-navigation .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
        padding-right: 8px;
    }

    .few-header .main-navigation .menu-bar-items {
        gap: 4px;
        margin-left: 12px;
    }
}

/* Mobile */

@media (max-width: 768px) {
    .few-header {
        --few-h-gutter: 16px;
    }

    .few-header .site-header .inside-header {
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .few-header .site-header .header-image {
        height: 50px;
    }

    .few-header .mobile-menu-control-wrapper {
        align-items: center;
        flex-wrap: nowrap;
        margin-left: auto;
    }

    .few-header .mobile-menu-control-wrapper .menu-bar-items {
        gap: 2px;
        margin-left: 0;
    }

    .few-header .mobile-menu-control-wrapper .menu-toggle,
    .few-header .mobile-menu-control-wrapper .menu-toggle:hover,
    .few-header .mobile-menu-control-wrapper .menu-toggle:focus {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin-left: 2px;
        padding: 0;
        background-color: transparent;
        color: var(--few-h-text);
        font-size: 22px;
        line-height: 1;
    }

    /* Opened menu panel, full width under the header bar. */
    .few-header #site-navigation.toggled {
        margin: 10px calc(-1 * var(--few-h-gutter)) -10px;
        flex-basis: calc(100% + 2 * var(--few-h-gutter));
        border-top: 1px solid var(--few-h-line);
        background-color: var(--few-h-bg);
    }

    .few-header .main-navigation.toggled .main-nav > ul {
        padding: 6px 0 12px;
    }

    .few-header .main-navigation.toggled .main-nav > ul > li > a {
        height: auto;
    }

    .few-header .main-navigation.toggled .main-nav ul li a {
        padding-left: var(--few-h-gutter);
        font-size: 17px;
        line-height: 52px;
    }

    .few-header .main-navigation.toggled .main-nav > ul > li > a::after {
        display: none;
    }

    .few-header .main-navigation.toggled .main-nav > ul > li[class*="current-menu-"] > a {
        box-shadow: inset 3px 0 0 var(--few-h-accent);
    }

    .few-header .main-navigation.toggled .main-nav ul li.menu-item-has-children .dropdown-menu-toggle {
        min-width: 56px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 15px;
        text-align: center;
    }

    .few-header .main-navigation.toggled ul ul {
        width: auto;
        padding: 0 0 8px;
        border: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .few-header .main-navigation.toggled .main-nav ul ul li a {
        padding: 12px 20px 12px calc(var(--few-h-gutter) + 16px);
        font-size: 16px;
        line-height: 1.4;
    }

    /*
     * Tagline on the homepage: one line in the dark gap between the header and
     * the content, aligned with the logo. The content's top margin is reduced
     * so the line adds only a little height before the products.
     */
    .few-header .few-tagline-mobile {
        display: block;
        margin: 0;
        padding: 12px var(--few-h-gutter) 0;
        color: var(--few-h-muted);
        font-family: "Space Grotesk", sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .few-header .few-tagline-mobile + .site .site-main {
        margin-top: 12px;
    }
}