/**
 * ==================================================
 * HEADER
 * ==================================================
 * Theme: Aicher Teeladen
 *
 * Header and topbar styles.
 *
 * This file contains the complete styling for the
 * website header, including:
 *
 * - Topbar
 * - Topbar Icons
 * - Header
 * - Logo
 * - Navigation
 * - Search
 * - Responsive Header
 * ==================================================
 */

/**
 * ==================================================
 * TOPBAR
 * ==================================================
 * Upper information bar
 * Displays service information and customer actions.
 * ==================================================
 */

.topbar {

    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--text-light);

    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;

    padding: 10px 2rem;

}

.topbar .wp-block-group {

    gap: 1.5rem;

}

.topbar svg {

    width: 16px;

    height: 16px;

    color: var(--wp--preset--color--text-light);

    stroke: currentColor;

    flex-shrink: 0;

}

.topbar a {

    color: inherit;
    text-decoration: none;

}

.topbar a:hover {

    color: var(--wp--preset--color--accent);
    transition: color .2s ease;

}

/**
 * ==================================================
 * TOPBAR ICONS
 * ==================================================
 */

.topbar-item {

    display: flex;
    align-items: center;
    gap: .5rem;

}

.topbar-item::before {

    content: "";

    display: inline-block;

    width: 16px;
    height: 16px;

    flex-shrink: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}

.topbar-item.leaf::before {

    background-image: url("../svg/leaf-white.svg");

}

.topbar-item.truck::before {

    background-image: url("../svg/truck-white.svg");

}

.topbar-item.user::before {

    background-image: url("../svg/user-white.svg");

}

.topbar-item.cart::before {

    background-image: url("../svg/cart.svg");

}


/**
 * ==================================================
 * HEADER
 * ==================================================
 * Main site header
 * Contains logo, navigation and search.
 * ==================================================
 */

.header {

    background-color: var(--wp--preset--color--background);
    border-bottom: 1px solid rgba(0,0,0,.08);

}

.header__container {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 3rem;

    min-height: 110px;

    padding-block: .75rem;

}

.header__branding {

    flex: 0 0 auto;

}

.header__navigation {

    flex: 1 1 auto;
    margin-left: 2rem;

}

.header__search {

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

}
.wp-block-navigation {
    gap: 2rem;
}

/**
 * ==================================================
 * LOGO
 * ==================================================
 */

.header__branding .wp-block-site-logo {

    margin: 0;

}

.header__branding .wp-block-site-logo img {

    display: block;

    width: 100%;
    height: auto;

}

/**
 * ==================================================
 * SEARCH
 * ==================================================
 */

.header__search {

    flex: 0 0 auto;

    width: 240px;

}

.header__search .wp-block-search {

    margin: 0;

}

.header__search .wp-block-search__label {

    display: none;

}

.header__search .wp-block-search__inside-wrapper {

    display: flex;
    align-items: center;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    overflow: hidden;

    background: #fff;

}

.header__search .wp-block-search__input {

    border: 0;

    padding: 0 .9rem;

    height: 42px;

    font-size: .95rem;

    outline: none;

}

.header__search .wp-block-search__button {

    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    border: 0;

    background: transparent;

    color: var(--wp--preset--color--text);

    transition: color .2s ease;

}

.header__search .wp-block-search__button:hover {

    color: var(--wp--preset--color--primary);

}

.header__search .wp-block-search__button svg {

    width: 18px;
    height: 18px;

}

/* ==================================================
   Responsive Topbar
 * ==================================================
 */

@media (max-width: 660px) {

    .topbar .is-nowrap {
        flex-wrap: wrap;
    }

}

/* ==================================================
   Responsive Header
 * ==================================================
 */

@media (max-width: 1063px) {

    /* Logo */

    .header__branding .wp-block-site-logo img {
        width: 170px;
    }

    /* Navigation */

    .wp-block-navigation {
        gap: 1rem;
    }

    /* Search */

    .header__search {
        width: 180px;
    }
}

   /* ==================================================
   Mobile Header
================================================== */

@media (max-width: 905px) {

    /* Header Container */

    .header__container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.5rem;
    }

    /* Logo */

    .header__branding {
        flex: 0 0 auto;
    }

    /* Navigation */

    .header__navigation {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
    }

    /* Search */

    .header__search {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 0.5rem;
    }

    .header__search .wp-block-search,
    .header__search .wp-block-search__inside-wrapper {
        width: 100%;
    }

    .hero .wp-block-cover__inner-container {
        justify-content: center;
        padding: 0 2rem;
    }

    .hero__content {
        margin: 0 auto;
        text-align: center;
    }

    .hero__eyebrow {
        text-align: center;
    }

    .hero__title {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero .wp-block-buttons {
        justify-content: center;
    }

    .hero__eyebrow,
    .hero__title,
    .hero__text {

        text-shadow: 0 2px 8px rgba(255, 255, 255, .7);

    }

}