/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: absolute;
    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;
    height: 118px;

    background: transparent;
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.header-container {
    width: calc(100% - 40px);
    height: 100%;

    margin: 0 auto;

    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    column-gap:
        clamp(20px, 3vw, 50px);

    align-items: center;
}


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

.brand-logo {
    position: relative;
    z-index: 100;

    display: flex;
    align-items: center;

    flex-shrink: 0;

    margin-left: 6px;

    transform:
        translateY(8px);
}


.brand-logo img {
    display: block;

    width:
        clamp(170px, 22vw, 350px);

    height: auto;

    filter:
        drop-shadow(3px 4px 0 rgba(59, 88, 122, 0.18));

    transform-origin: center;

    transition:
        filter 350ms ease;
}


.brand-logo:hover img,
.brand-logo:focus-visible img {
    filter:
        drop-shadow(5px 7px 0 rgba(59, 88, 122, 0.28));

    animation:
        logo-rubber-bounce
        550ms
        ease
        both;
}


/* =========================================================
   NAVIGATION
========================================================= */

.main-navigation {
    display: flex;

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

    gap:
        clamp(12px, 2vw, 32px);
}


.main-navigation a {
    position: relative;

    isolation: isolate;

    display: inline-flex;

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

    padding:
        12px
        20px;

    color: var(--blue-dark);

    font-size:
        clamp(19px, 1.55vw, 25px);

    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.025em;

    transform-origin: center;

    transition:
        transform var(--transition-fast);
}


/* =========================================================
   CARTOON HOVER PLATE
========================================================= */

.main-navigation a::before {
    content: "";

    position: absolute;

    inset:
        1px
        -7px;

    z-index: -1;

    background-color: var(--cream);

    border:
        3px solid var(--blue-dark);

    border-radius:
        9px 13px 8px 12px /
        11px 8px 13px 9px;

    box-shadow:
        5px 6px 0 var(--pink-dark);

    opacity: 0;

    transform:
        scaleX(0.15)
        scaleY(0.65)
        rotate(-2deg);

    transition:
        opacity 80ms ease,
        transform 240ms var(--cartoon-bounce),
        box-shadow var(--transition-fast);
}


.main-navigation a:hover::before,
.main-navigation a:focus-visible::before {
    opacity: 1;

    transform:
        scaleX(1)
        scaleY(1)
        rotate(-1deg);
}


.main-navigation a:hover,
.main-navigation a:focus-visible {
    animation:
        navigation-pop
        400ms
        ease
        both;
}


.main-navigation a:active {
    animation: none;

    transform:
        translate(4px, 4px)
        scale(0.94, 0.90);
}


.main-navigation a:active::before {
    box-shadow:
        1px 2px 0 var(--pink-dark);
}


/* =========================================================
   GET FOAMED BUTTON
========================================================= */

.book-now-button {
    position: relative;

    overflow: visible;

    background: transparent !important;

    color: var(--blue-dark) !important;

    border: 0 !important;

    box-shadow: none !important;
}


.book-now-button::before {
    background-color: var(--cream);

    border-radius:
        8px 12px 7px 10px /
        9px 7px 12px 8px;

    box-shadow:
        6px 7px 0 var(--pink-dark);
}


/* Decorative bubble */

.book-now-button::after {
    content: "";

    position: absolute;

    top: -5px;
    right: -9px;

    width: 11px;
    height: 11px;

    background:
        rgba(255, 255, 255, 0.22);

    border:
        2px solid var(--white);

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;
}


.book-now-button:hover::after,
.book-now-button:focus-visible::after {
    animation:
        foam-bubble-pop
        720ms
        ease-out
        both;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
    position: relative;
    z-index: 1002;

    display: none;

    width: 48px;
    height: 44px;

    padding: 7px;

    background: transparent;

    border: 0;

    cursor: pointer;
}


.menu-toggle span {
    display: block;

    width: 100%;
    height: 4px;

    margin:
        6px
        0;

    background-color: var(--white);

    box-shadow:
        0 1px 3px rgba(52, 83, 109, 0.45);

    border-radius: 20px;

    transition:
        transform 200ms ease,
        opacity 200ms ease;
}


.menu-toggle.is-active span:nth-child(1) {
    transform:
        translateY(10px)
        rotate(45deg);
}


.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}


.menu-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-10px)
        rotate(-45deg);
}