/**
 * Header Styles (Site Options)
 */

.block-header {
    position: fixed;
    top: 1em;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    padding: 0.1875em;
    transition: background-color 0.3s ease;
    max-width: 45em;
    backdrop-filter: blur(25px);
    height: 3.75em;
    border-radius: 0.375em;
    background-color: #03090D30;
}

.block-header.is-menu-open {
    background-color: #FFFEFD;
}

@media screen and (max-width: 1024px) {
    .block-header {
        padding: 0.5625em;
        max-width: calc(100% - 1em);
        top: .5em;
        height: 2.875em;
    }
}

.block-header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .block-header__container {
        flex-direction: row;
    }
}

.block-header__book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 1.5em;
    background-color: transparent;
    color: #FFFEFD;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-radius: 0.25em;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 100%;
    border: 1px solid #ffffff40;
}

.block-header__book-btn:hover {
    color: #000000;
    background-color: var(--color-primary);
}

.block-header.is-menu-open .block-header__book-btn {
    color: #000000;
    border: 1px solid #00000040;
}

@media screen and (max-width: 1024px) {
    .block-header__book-btn {
        padding: 0;
        border: none;
    }
}

/* Logo - light/dark versions */
.block-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 100%;
}

.block-header__logo img {
    height: 1.75em;
    width: auto;
    object-fit: contain;
}

/* One logo visible per state: light when closed, dark when .is-menu-open */
.block-header__logo img.block-header__logo-light {
    display: block;
}

.block-header__logo img.block-header__logo-dark {
    display: none;
}

.block-header.is-menu-open .block-header__logo img.block-header__logo-light {
    display: none;
}

.block-header.is-menu-open .block-header__logo img.block-header__logo-dark {
    display: block;
}

/* Fallback text logo when no image */
.block-header__logo-text {
    color: #fff;
    font-family: var(--font-secondary, serif);
    font-size: 1.5em;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.block-header.is-menu-open .block-header__logo-text {
    color: #000000;
}

@media screen and (max-width: 1024px) {
    .block-header__logo img {
        height: 1.375em;
    }
}

/* Hamburger Toggle */
.block-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125em;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 1.5em;
    z-index: 10;
}

.block-header__toggle-line {
    display: block;
    width: 2.5em;
    height: 1px;
    background-color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.block-header.is-menu-open .block-header__toggle-line {
    background-color: #000000;
}

@media screen and (max-width: 1024px) {
    .block-header__toggle {
        padding: 0;
    }
}

/* Toggle active state - X animation */
.block-header.is-menu-open .block-header__toggle-line:first-child {
    transform: translateY(6px) rotate(45deg);
}

.block-header.is-menu-open .block-header__toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.block-header.is-menu-open .block-header__toggle-line:last-child {
    transform: translateY(-6px) rotate(-45deg);
}

/* Menu Dropdown */
.block-header__menu {
    position: absolute;
    top: calc(100% + 0.375em);
    left: 0;
    right: 0;
    background-color: #FFFEFD;
    overflow: hidden;
    height: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: 0.375em;
    width: 100%;
    /* height:0 + overflow:hidden only clips the panel visually — the links
       inside stay in the tab order while the nav is aria-hidden. visibility
       takes them out of it. Gated on .is-open (not [aria-hidden]) because the
       script drops .is-open at the end of the close animation, so the links
       stay visible for the whole collapse instead of blinking out. */
    visibility: hidden;
}

/* Matches the reference theme: this class only enables interaction. Height and
   opacity belong to the header script's GSAP timeline. The class must NOT
   pre-open the panel — openMenu() adds it before the timeline first plays, so
   any height/opacity here is what the timeline records as its starting state,
   and the menu can then never animate shut. */
.block-header__menu.is-open {
    pointer-events: auto;
    visibility: visible;
}

/* No-GSAP fallback. The header script adds .is-static only when GSAP is absent
   or blocked, so the panel still reveals — without poisoning the timeline in
   the normal case.

   The nav links and social block below start at opacity:0 / translateY(20px)
   because the GSAP timeline is what brings them in. Without GSAP nothing ever
   raises them, so revealing only the panel opens an empty white box. The
   fallback has to reset the children too. */
.block-header__menu.is-open.is-static {
    height: auto;
    opacity: 1;
}

.block-header__menu.is-open.is-static .block-header__nav a,
.block-header__menu.is-open.is-static .block-header__social {
    opacity: 1;
    transform: translateY(0);
}

.block-header__menu-container {
    padding: 0.6875em;
}

@media screen and (max-width: 1024px) {
    .block-header__menu-container {
        padding: 5em 1em 2em;
    }
}

.block-header__menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

/* Close Button */
.block-header__close {
    position: absolute;
    top: 1.25em;
    right: 2.5em;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    color: var(--color-2, #03090D);
    display: none;
}

@media screen and (max-width: 1024px) {
    .block-header__close {
        right: 1em;
    }
}

/* Navigation */
.block-header__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
}

.block-header__nav li {
    overflow: hidden;
}

.block-header__nav a {
    display: block;
    text-decoration: none;
    color: var(--color-2, #03090D);
    font-size: 0.875em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25em 0;
    opacity: 0;
    transform: translateY(20px);
    transition: color 0.3s ease;
}

.block-header__nav a:hover {
    color: var(--color-3, #C17F5E);
}

/* Social Links */
.block-header__social {
    margin-top: 1em;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75em;
    flex-direction: column;
}

.block-header__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.375em;
    text-decoration: none;
    color: var(--color-2, #03090D);
    font-size: 0.875em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.block-header__social a:hover {
    color: var(--color-3, #C17F5E);
}

.block-header__social svg {
    width: 8px;
    height: 8px;
}

/* Menu dropdown image */
.block-header__menu-image {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
}

/* Logo color change when menu is open */
.block-header.is-menu-open .block-header__logo {
    color: var(--color-2, #03090D);
    z-index: 10;
}

/* Mobile Menu Adjustments */
@media screen and (max-width: 1024px) {
    .block-header__menu-container {
        min-height: calc(100vh - 5em);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 6em;
    }

    .block-header__nav {
        gap: 1em;
    }

    .block-header__nav a {
        font-size: 0.9375em;
    }
}


#wpadminbar {
    display: none;
}

html {
    margin-top: 0 !important;
}

.header-image {
    position: relative;
    overflow: hidden;
    border-radius: 0.375em;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .header-image {
        display: none;
    }
}

.header-image__text {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15.9375em;
    color: var(--color-1);
    padding: 0 2.5em;
}

.book-bar {
    position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
    background-color: var(--color-primary);
    width: 840px;
    height: 120px;
    border-radius: .275em;
    max-width: 100%;
    display: none;
}

.home .book-bar {
    display: block;
}

@media screen and (max-width: 1024px) {
    .book-bar {
        width: 225px;
        height: 265px;
        background: none;
    }
}

.header-image__mini {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}