/* ADDED FOR TERRE HAUTE FIREPLACE BY MS 05272026 — Strategy A header replacement
 *
 * Self-contained header styling. All colors pulled from the theme's existing
 * CSS custom properties via computed-style probing of the live LAHB header:
 *
 *   Primary orange (CTA, active link, hover):   #fd8b50  (--theme-primary-color)
 *   Body text / default nav link:               #4d4d4d  (--theme-body-font-color)
 *   Background:                                 #ffffff
 *   Header height (desktop, matches existing):  110px    (--header-height)
 *
 * Breakpoints match the LAHB original:
 *   >= 1024px  desktop  — logo | nav | CTA
 *   <  1024px  tablet/mobile — logo | hamburger ; nav slides in ; CTA hidden
 */

/* ---------- Base (mobile-first nothing; desktop layout is the default) ---------- */

.fireplace-header {
    background: transparent;
    position: relative;
    z-index: 100;
}

/* No max-width: matches LAHB's saved full_container:true so the menu has
 * enough horizontal room at 1440px+ to avoid wrapping on longer items
 * (FIREPLACES & ACCESSORIES, OUTDOOR FIREPLACES). Horizontal padding only.
 * Inner height 120px and 25px gutters match the live reference exactly.
 */
.fireplace-header__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.fireplace-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.fireplace-header__logo img {
    display: block;
    max-height: 47px;
    width: auto;
}

/* Nav --- desktop default.
 * Auto-size to menu content (flex: 0 1 auto) so the inner row's
 * justify-content: space-between centers the nav between logo and CTA,
 * matching LAHB's saved 2-6-2 layout (logo left, nav center, CTA right).
 */
.fireplace-header__nav {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
}

.fireplace-header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

.fireplace-header__menu .menu-item > a {
    display: inline-block;
    padding: 0 12px;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #4d4d4d;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-bottom-color 150ms ease;
}

.fireplace-header__menu .menu-item > a:hover,
.fireplace-header__menu .menu-item > a:focus-visible {
    color: #fd8b50;
}

.fireplace-header__menu .current-menu-item > a,
.fireplace-header__menu .current_page_item > a,
.fireplace-header__menu .current-menu-ancestor > a {
    color: #fd8b50;
    border-bottom-color: #fd8b50;
}

/* CTA --- desktop default */
.fireplace-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    background: #fd8b50;
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    transition: background 150ms ease, transform 150ms ease;
}

.fireplace-cta:hover,
.fireplace-cta:focus-visible {
    background: #e57440;
    color: #ffffff;
    text-decoration: none;
}

.fireplace-cta:focus-visible {
    outline: 2px solid #fd8b50;
    outline-offset: 3px;
}

/* Hamburger --- hidden on desktop */
.fireplace-header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.fireplace-header__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #211e1c;
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}

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

.fireplace-header__toggle[aria-expanded="true"] .fireplace-header__toggle-bar:nth-child(2) {
    opacity: 0;
}

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

.fireplace-header__toggle:focus-visible {
    outline: 2px solid #fd8b50;
    outline-offset: 2px;
}

/* ---------- Tablet + Mobile (< 1024px) ---------- */

@media (max-width: 1023px) {

    .fireplace-header__inner {
        height: 80px;
        padding: 0 20px;
    }

    .fireplace-header__logo img {
        max-height: 50px;
    }

    /* Show hamburger */
    .fireplace-header__toggle {
        display: inline-flex;
        order: 3;
    }

    /* Hide CTA on tablet/mobile to match original behavior */
    .fireplace-cta {
        display: none;
    }

    /* Nav becomes a drawer */
    .fireplace-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 250ms ease, visibility 0s linear 250ms;
        justify-content: stretch;
    }

    .fireplace-header__nav.is-open {
        max-height: calc(100vh - 80px);
        visibility: visible;
        transition: max-height 250ms ease, visibility 0s linear 0s;
    }

    .fireplace-header__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .fireplace-header__menu .menu-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .fireplace-header__menu .menu-item:last-child {
        border-bottom: 0;
    }

    .fireplace-header__menu .menu-item > a {
        display: block;
        padding: 16px 20px;
        border-bottom: 0;
    }

    .fireplace-header__menu .current-menu-item > a,
    .fireplace-header__menu .current_page_item > a {
        border-bottom: 0;
        background: rgba(253, 139, 80, 0.08);
    }

    /* Lock body scroll while drawer open */
    body.fireplace-nav-open {
        overflow: hidden;
    }
}

/* ---------- Print ---------- */

@media print {
    .fireplace-cta,
    .fireplace-header__toggle {
        display: none !important;
    }

    .fireplace-header {
        border-bottom: 1px solid #000;
    }
}