:root {
    /* Colours */
    --primary-cream: #fcf8ec;
    --primary-green: #447158;
    --primary-orange: #e86748;

    /* Fonts */
    --default-h-font: "bd-supper", Sans-Serif;
    --default-h-weight: 700;
    --default-h-style: normal;

    --default-font: "zalderdash", Sans-Serif;
    --default-font-weight: 400;
    --default-font-style: normal;

    /* Spacing */
    --default-pad-tb: 5.5%;
    --default-pad-lr: 3.7%;

    /* Explosive Starburst Polygon Path (16 points) */
    --burst-path: polygon(
        50% 35%, 58% 22%, 62% 38%, 76% 28%, 70% 45%, 
        88% 50%, 72% 57%, 80% 72%, 64% 65%, 55% 82%, 
        48% 66%, 32% 75%, 38% 58%, 20% 50%, 35% 42%, 26% 28%
    );

    /* Full Square Polygon Path (16 points matching exact vertex sequence) */
    --square-path: polygon(
        0% 0%, 50% 0%, 100% 0%, 100% 25%, 100% 50%, 
        100% 75%, 100% 100%, 75% 100%, 50% 100%, 25% 100%, 
        0% 100%, 0% 75%, 0% 50%, 0% 25%, 0% 0%, 0% 0%
    );
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow: hidden;
}

body {
    min-height: 100dvh;
    width: 100%;
    background: var(--primary-cream);
    cursor: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--default-h-font);
    font-weight: var(--default-h-weight);
    font-style: var(--default-h-style);
    color: var(--primary-green);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

p,
li,
ul,
a,
span {
    font-family: var(--default-font);
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    line-height: 1;
    margin: 0;
}

.cursorObserver,
.custom-cursor-pointer {
    position: fixed;
    width: 3em;
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 9999999;
}

/* HORIZONTAL SETUP */
.horizontal-scroll-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* Base style for individual ACF sections */
.horizontal-panel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 100vw;
    min-width: 60vw;
    height: 100vh;
    padding: var(--default-pad-lr);
    box-sizing: border-box;
}

.horizontal-panel .wrap {
    width: 100%;
    max-width: 1805px;
}

/* HEADER */
header {
    position: absolute;
    display: flex;
    justify-content: center;
    padding: 0 var(--default-pad-lr);
    width: 100%;
    z-index: 999;
}

header .innerHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1805px;
}

header a.custom-logo-link {
    width: 200px;
    transform: translateY(40px);
}

header .nav ul {
    display: flex;
    flex-direction: row;
    gap: .5em;
}

header .nav ul li {
    background-color: var(--primary-orange);
    border: 5px solid var(--primary-cream);
    border-radius: 15px;
    transition: .2s ease-in-out;
    cursor: none;
}

header .nav ul li:hover {
    background-color: var(--primary-green);
    filter: drop-shadow(0 0 0.15rem #00000022);
    cursor: none;
}

header .nav ul li a {
    padding: 10px 15px;
    font-family: var(--default-h-font);
    font-weight: var(--default-h-weight);
    font-style: var(--default-h-style);
    font-size: 22px;
    color: var(--primary-cream);
    text-transform: uppercase;
    cursor: none;
}

.page {
    margin: 0 !important;
}

.relative {
    position: relative;
}

/* PAGE SPECIFICS */
/* PAGE 1 */
.page h1 {
    font-size: 17rem;
    text-align: center;
    line-height: .8;
}

.page h2 {
    font-size: 17rem;
    text-align: center;
    line-height: .8;
}

.horizontal-panel:nth-child(2) .page {
    width: 80vw;
}

.horizontal-panel:nth-child(2) .page img.bottle_bg {
    position: absolute;
    height: 100vh;
    top: 0;
    left: 43%;
    transform: scale(0.9);
}

.horizontal-panel:nth-child(2) .page img.shot_bg {
    position: absolute;
    height: 35vh;
    bottom: 3em;
    left: 35.5%;
    transform: scale(1);
}

.horizontal-panel:nth-child(2) .page img.bottle_flag {
    position: absolute;
    width: 230px;
    top: 0;
    left: 45%;
    transform: scale(0.9);
}

.vol {
    top: calc(53vh - 50px);
    right: 6%;
    transform: scale(1.4) rotate(22deg);
    z-index: 99
}

.relish {
    top: calc(53vh - 50px);
    left: 6%;
    transform: scale(1.4);
    z-index: 99
}

/* END PAGE 1 */

.orange {
    color: var(--primary-orange);
}

.cream {
    color: var(--primary-cream);
}

.center {
    text-align: center;
}

.s-l {
    font-size: 3rem;
}

.horizontal-panel#3 {
    padding: 0; 
}

.horizontal-panel#3 {
    position: relative;
    max-width: none;
}

/* SECTION 3 */

.horizontal-panel#3 {
    padding: 0;
    position: relative;
    width: 400vw;
    min-width: 400vw;
    height: 100vh;
    flex: 0 0 400vw;
    background: var(--primary-cream);
}

/*
 * This is the viewport that visually remains in place
 * while section #3 moves horizontally.
 */
.scroll__inner {
    position: sticky;
    left: 0;
    top: 0;

    width: 100vw;
    height: 100vh;

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


}


/* BACKGROUND CIRCLE */
div.circle_bg {
    position: absolute;
    left: 15vw;
    top: 50%;
    transform: translateY(-50%) scale(1.2);
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    background: var(--primary-green);
    z-index: 1;
    pointer-events: none;
}

.textCircle {
    position: absolute;
    font-family: var(--default-h-font);
    z-index: 5;
    width: 79vw;
    aspect-ratio: 1;
    transform: rotate(324deg);
    pointer-events: none;
    will-change: transform;
}

.textCircle.alt {
    transform: rotate(143deg);
}

/* SECTION 4 */
img.storeBadges {
    width: 250px;
    position: absolute;
    transition: all .2s ease-in-out;
    z-index: 10;
}

img.storeBadges:hover {
    transform: scale(1.15);
}

.gti {
    bottom: 0;
    left: 18px
}

.amazon {
    right: 60px;
    top: 70px;
}

.pp {
    top: calc(50vh - 50px);
    left: -3%;
    transform: scale(1.4);
    z-index: 99
}

/* CARD AREA */
.items-container {
    position: relative;
    width: 480px;
    height: 60vh;
    z-index: 10;
}


.card-track-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    margin-top: -50px;
}

.card-track-wheel .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 90px);
    background: var(--primary-cream);
    box-shadow: 0 15px 5px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    will-change: transform;
    transform-origin: center center;
}

.card-1 {
    z-index: 5;
}

.card-2 {
    z-index: 4;
}

.card-3 {
    z-index: 3;
}

.card-4 {
    z-index: 2;
}

.card-5 {
    z-index: 1;
}

.card-4 img {
    width: 70%;
    margin: auto;
}


/* CARD CONTENT */
.card-track-wheel .item .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    text-align: center;
    padding: 2.5em;
    font-size: 1.43em;
    color: var(--primary-green);
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.card-track-wheel .item .content-wrapper .number {
    color: var(--primary-orange);
    font-family: var(--default-h-font);
    font-size: .8em;
    margin-top: auto;
}

/* Contact Background */
.horizontal-panel#6 {
    position: relative;
    overflow: hidden;
}

.horizontal-panel#6 .wrap {
    position: relative;
    z-index: 5;
}

.contactBomb {
    width: 28em;
    position: absolute;
    right: 13em;
    bottom: 5em;
}

.contactBackground {
    background: var(--primary-orange);
    position: absolute;
    top: 0;
    right: 0;
    width: 63vw;
    height: 100vh;
    z-index: -1;
}

.contactCircle {
    position: absolute;
    left: -24vw;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 100vh;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary-orange);
    pointer-events: none;
}

/* Site Footer */
footer {
    pointer-events: none !important;
}

.site-footer {
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    padding: 0 var(--default-pad-lr);
    width: 100%;
    z-index: 999;
}

.site-footer .innerFooter {
    display: flex;
    justify-content: space-between;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1805px;
}

.innerFooter .canon {
    width: 150px;
    height: auto;
    display: block;
    overflow: visible;
    padding: 10px;
}

.innerFooter .icon {
    width: 160px;
}

.wheel {
    transform-origin: -3% -12%;
}

/* Fixed Fullscreen Modal Stage */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Background Backdrop Tint */
.modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
}

/* Modal Wrapper holding Close Button + Form Card */
.modal-wrapper {
    position: relative;
    width: 90vw;
    max-width: 600px;
    padding: 2em;
    z-index: 2;
}

/* Floating Close Button */
.close-modal,
.close-modal-cocktails {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    background-image: url('https://picklypetes.com/wp-content/uploads/2026/08/SHAPE.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    color: #fcf8ec;
    font-size: 2.5rem;
    font-family: var(--default-font);
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    line-height: 1;
    cursor: pointer;
    padding: .5em;
    line-height: 0.8;
    aspect-ratio: 1;
    z-index: 10;
    transition: transform 0.2s ease;
}

.close-modal:hover,
.close-modal-cocktails:hover {
    transform: scale(1.15) rotate(2deg);
}

/* Close Button Positioning */
.close-modal.form {
    top: 5px;
    left: 5px;
}

.close-modal-cocktails.cocktails {
    top: 1em;
    right: 0em;
}

/* The Form Card background container receiving the clip-path animation */
.form-card {
    background-color: #447158;
    border-radius: 2em;
    border: .6em solid #fcf8ec;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    clip-path: var(--burst-path);
    will-change: clip-path;
}

/* Form Content Styling */
.form-inner {
    color: #fcf8ec;
}

.form-inner h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 4rem;
}

.form-inner input,
.form-inner textarea {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    font-size: 1.2em;
    border-radius: 0;
    border: 0px;
    background: var(--primary-cream);
    color: #fcf8ec;
    box-sizing: border-box;
}

.form-inner textarea {
    max-height: 150px;
}

.form-inner input::placeholder,
.form-inner textarea::placeholder {
    font-family: var(--default-font);
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    color: var(--primary-green);
}

.form-inner input[type="submit"] {
    background-color: var(--primary-orange);
    color: var(--primary-cream);
    font-family: var(--default-h-font);
    font-weight: var(--default-h-weight);
    font-style: var(--default-h-style);
    font-size: 1.5em;
    text-transform: uppercase;
    padding: 0.4em;
    border: 5px solid #fcf8ec;
    border-radius: .5em;
    cursor: pointer;
    width: fit-content;
}

/* Contact Form Error Message */
.form-inner .wpcf7-response-output {
    font-family: var(--default-font);
    font-weight: var(--default-font-weight);
    font-style: var(--default-font-style);
    color: red;
    background: #fcf8ec38;
    margin: 0 !important;
    border: 0 !important;
    border-radius: .5em;
    padding: 0.5em 0.8em !important;
}

/* --- Cocktails Section (Global / Shared) --- */
.cocktail-bg-image {
    position: absolute;
    z-index: -1;
    top: 0.7em;
    inset: 0;
    width: 100%;
    transform: scale(1.6);
}

.splide__slide:nth-child(1) .cocktail-bg-image,
.splide__slide:nth-child(3) .cocktail-bg-image {
    transform: scale(1) !important;
    top: .5em;
}

.splide__slide:nth-child(2) .cocktail-bg-image {
    transform: scale(1.15) !important;
    top: -3em;
}

/* Base Card & Image Handling */
.cocktail-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    width: 100%;
    transition: transform 0.3s ease;
}

.cocktail-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.cocktail-card h3 {
    font-size: 3rem;
}

/* --- Desktop Grid Layout (When Splide is Destroyed) --- */
@media (min-width: 768px) {
    .cocktails-slider ul.splide__list {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-around;
    }

    .cocktails-slider ul li.splide__slide {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.33% !important;
        flex-shrink: 0;
    }

    .cocktails-slider .splide__track {
        overflow: visible !important;
    }

    .cocktails-slider .splide__controls {
        display: none;
    }

    .cocktail-card.active,
    .splide__slide:nth-child(2) .cocktail-card {
        transform: scale(1.1);
    }

    .splide__slide:nth-child(2) .cocktail-card h3 {
        font-size: 4.3em;
    }

    .cocktail-card h3 {
        white-space: nowrap;
    }

    .cocktail-card img {
        max-height: 50vh;
    }
}

@media (max-width: 1024px) {
    /* Unlock page scrolling on mobile/tablet */
    html,
    body {
        overflow: auto !important;
        overflow-x: hidden !important;
    }

    .horizontal-scroll-container {
        display: flex;
        flex-direction: column !important;
        width: 100vw !important;
        height: auto !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: none !important;
    }

    .horizontal-panel {
        width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        flex: 0 0 auto !important;
    }

    .horizontal-panel#3 {
        width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        flex: 0 0 auto !important;
    }

    /* SECTION SPECIFIC */
    /* Section 2 */
    .KOABD-heading {
        font-size: 9em !important;
        position: absolute;
        z-index: -1;
        top: auto;
        bottom: auto;
    }

    .horizontal-panel:nth-child(2) .page {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    img.storeBadges {
        max-width: 30% !important;
    }

    img.storeBadges .vol {
        position: absolute;
        bottom: 0 !important;
    }

    /* SECTION 4 */
    .horizontal-panel:nth-child(4) .page .cocktail-card img {
        max-width: 100%;
        height: 90vw;
        object-fit: contain;
    }

    .horizontal-panel:nth-child(4) .page .splide__controls {
        width: 100%
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__controls {
        display: block;
        margin-top: 20px;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__arrows {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        position: static;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__arrow {
        position: static;
        transform: none;
        background: transparent;
        border: 1px solid #000;
        border-radius: 50%;
        width: 3em;
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 3em;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__arrow {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__arrow:active {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__pagination {
        position: static;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__pagination__page {
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        border: none;
        padding: 0;
        opacity: 1;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .horizontal-panel:nth-child(4) .cocktails-slider .splide__pagination__page.is-active {
        background: #000;
        transform: scale(1.2);
    }

    /* SECTION 5 */
    .horizontal-panel:nth-child(4),
    .horizontal-panel:nth-child(5) {
        height: fit-content !important;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .horizontal-panel:nth-child(5) .page h1 {
        font-size: 4em;
    }

    .horizontal-panel:nth-child(5) .page .amazon {
        min-width: 12em !important;
        top: -10em;
        right: -5em
    }

    .horizontal-panel:nth-child(5) .page .gti {
        min-width: 12em !important;
        bottom: -9em;
        left: -2.8em;
    }

    /* SECTION 6 (CONTACT) */
    .horizontal-panel:nth-child(6) {
        height: fit-content !important;
        flex-direction: column;
        margin-top: 10em;
    }

    .horizontal-panel:nth-child(6) h2 {
        font-size: 6em !important;
    }

    .horizontal-panel:nth-child(6) .contactBackground {
        background: var(--primary-orange);
        width: 100vw;
        height: 100vh;
        z-index: -1;
    }

    .horizontal-panel:nth-child(6) .contactCircle {
        position: absolute;
        left: -25vw;
        top: 0%;
        transform: translateY(-50%);
        width: 150vw;
        height: auto !important;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--primary-orange);
        pointer-events: none;
    }

    .horizontal-panel:nth-child(6) .contactBomb {
        width: 28em;
        position: absolute;
        right: 0em;
        bottom: 0em;
    }

    .horizontal-panel:nth-child(6) .modal-wrapper {
        max-width: 100%;
        width: 90%;
    }

    .horizontal-panel:nth-child(6) .modal-wrapper .form-inner h2 {
        font-size: 1.7em;
    }
}

/* Cocktail Modal Overlay & Wrapper Styling */
.cocktail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent backdrop */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal Content Box matched to your layout pattern */
.cocktail-modal-content {
    max-width: 35vw;
    aspect-ratio: 1;
    width: 90%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0em;
    box-sizing: border-box;
    background-image: url('https://picklypetes.com/wp-content/uploads/2026/10/MODAL_BG.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cocktail-modal-content .modal-body {
    max-width: 75%;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

/* Modal Inner Form/Body Title Styling */
.cocktail-modal-content .modal-body h2 {
    font-size: 5em;
    color: var(--primary-cream);
    margin-top: 0;
}

.cocktail-modal-content .modal-body p {
    text-align: center;
    color: var(--primary-cream);
    font-size: 2.2em;
}

/* Dividers */
.divider {
    max-width: 10em;
}

.divider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
}

.horizontal-panel:nth-child(1) .divider:nth-child(2) {
    margin-top: -5em;
}

.horizontal-panel:nth-child(4) .divider.left {
    position: absolute;
    top: 14em;
    left: -68px;
}

@media screen and (max-width: 767px) {
    .cocktail-modal-content {
        width: 95vw;
        max-width: 100vw;
    }

    #modalTitle {
        font-size: 3em !important;
    }

    #modalDescription {
        font-size: 1.3em;
    }
}

/*  */
@media screen and (max-width: 767px) {
    .page h2 {
        font-size: 4em !important;
    }

    .s-l {
        font-size: 2rem;
    }
}

/* MOBILE HEADER */
@media screen and (max-width: 767px) {
    .header {
        position: relative;
        background: red;
    }
}

@media screen and (max-width: 767px) {
    .bottle_flag,
    .bottle_bg,
    .shot_bg {
        display: none !important;
    }

    .products_mobile {
        width: 80%;
    }
}

@media screen and (min-width: 767px) {
    .products_mobile {
        display: none;
    }
}


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

.menu-toggle {
    display: none;
}

@media screen and (max-width: 767px) {

    .site-header,
    .innerHeader,
    .nav,
    #site-navigation {
        position: relative;
    }

    /* Hamburger button */
    #site-navigation .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;

        position: fixed;
        top: 18px;
        right: 20px;
        z-index: 1002;

        width: 48px;
        height: 48px;
        padding: 12px;

        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .menu-toggle .hamburger-line {
        display: block;
        width: 25px;
        height: 2px;
        flex: 0 0 2px;
        border-radius: 2px;
        background: currentColor;

        transition:
            transform 0.3s ease,
            opacity 0.2s ease;
    }

    /* Hamburger transforms into an X */
    #site-navigation.is-open .hamburger-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #site-navigation.is-open .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    #site-navigation.is-open .hamburger-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Full-screen menu panel, revealed from the top */
    #site-navigation #primary-menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;

        position: fixed;
        inset: 0;
        z-index: 1001;

        width: 100%;
        height: 80vh;
        height: 80dvh;
        box-sizing: border-box;
        margin: 0;
        padding: 90px 24px 40px;
        overflow-y: auto;

        list-style: none;
        text-align: center;

        background: var(--primary-green, #fff);
        color: var(--primary-cream, #222);

        /* Closed state */
        clip-path: inset(0 0 100% 0 round 0 0 50% 50%);
        visibility: hidden;
        pointer-events: none;

        transition:
            clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1),
            visibility 0s linear 0.55s;
    }

    /* Open state */
    #site-navigation.is-open #primary-menu {
        clip-path: inset(0 0 0 0 round 0 0 28px 28px);
        visibility: visible;
        pointer-events: auto;

        transition:
            clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1),
            visibility 0s;
    }

    /* Menu items */
    #site-navigation #primary-menu > li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #site-navigation #primary-menu > li > a {
        display: inline-block;
        padding: 8px 12px;
        color: inherit;
        text-decoration: none;
    }

    /* Preserve the theme's current link styling where possible */
    #site-navigation #primary-menu > li > a:hover,
    #site-navigation #primary-menu > li.current-menu-item > a {
        color: inherit;
    }

    /* Prevent background scrolling while the menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }
}

/* Respect reduced-motion preferences */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #site-navigation #primary-menu,
    .menu-toggle .hamburger-line {
        transition: none;
    }
}