.coast {
    --wp--preset--color--base: #ffffff;
    --wp--preset--color--contrast: #252727;
    --wp--preset--color--brown-ochre: #7d3534;
    --wp--preset--color--burnt-ochre: #a04022;
    --wp--preset--color--charcoal: #413533;
    --wp--preset--color--orange-ochre: #db7d26;
    --wp--preset--color--red-ochre: #bc3b26;
    --wp--preset--color--sand: #dfdacb;
    --wp--preset--color--yellow-ochre: #dba725;

    /* ------------------- RESETS ------------------- */
    p {
        text-wrap: pretty;

    }

    .entry-content {
        p a {
            /* font-weight: 600; */
            box-shadow:
                inset 0 calc(-0.14em + 0.02em) 0 0 #f5f5f5,
                inset 0 -0.14em 0 0 rgba(245, 245, 245, calc(1 - 0.5)),
                inset 0 -0.14em 0 0 currentColor;
            text-decoration: none;
            text-shadow:
                0.05em 0 #f5f5f5,
                -0.05em 0 #f5f5f5,
                1.5px 0 #f5f5f5,
                -1.5px 0 #f5f5f5;

            &:hover {
                color: var(--wp--preset--color--contrast);
                text-decoration: underline var(--wp--preset--color--sand);
                text-decoration-style: wavy;
                text-underline-offset: 5px;
            }
        }
    }

    ::selection {
        background: var(--wp--preset--color--yellow-ochre);
        /* Sets the background color of the highlight to a light pink */
        color: #ffffff;
        /* Sets the color of the highlighted text to white */
    }

    input:focus-visible,
    a.kb-nav-link-content:focus-visible,
    a.kb-nav-link-content:focus,
    span:focus-visible

    /* a:focus, */
    /* span:focus,
    button:focus,
    button:focus-visible  */
        {
        outline: 10px solid var(--wp--preset--color--red-ochre);
        outline-offset: 3px;
        outline-style: dashed;
        outline-width: 10px;
    }

    /* ------------------- NAVIGATION ------------------- */
    .wp-block-kadence-navigation .kb-nav-dropdown-toggle-btn {
        width: 30px;
    }

    .wp-block-kadence-navigation-link .kb-nav-arrow-svg {
        width: 1rem;
        height: 1rem;
    }

    .rank-math-breadcrumb {
        font-size: 0.8rem;

        font-family: var(--wp--preset--font-family--helvetica-neue);
        max-width: var(--wp--style--global--content-size);
        margin: 0 auto;
        padding-left: 1.5rem;
        opacity: 1;

        p {
            margin: 0;
            padding-bottom: 0.5rem;
        }

        a {
            color: var(--wp--preset--color--contrast);
            font-weight: 500;
        }

        .last {
            color: var(--wp--preset--color--brown-ochre);
        }

        .separator {
            opacity: 0.1;
        }
    }

    /* ------------------- HOMEPAGE ------------------- */

    .entry-content {
        margin-block-start: 0;
    }

    .hero-logo {
        position: absolute;
        width: 157%;
        right: 4%;
        top: 0;
        bottom: 0;

        svg {
            margin-top: 16vh;
        }
    }

    /* ------------------- KADENCE ------------------- */
    .kadence-blocks-gallery-item img {
        border: 10px solid var(--wp--preset--color--yellow-ochre);
    }

    .kb-dynamic-list.kb-dynamic-list-style-pill li {
        border-radius: 0;
        padding: 0.2rem 0.6rem;
    }

    /* ------------------- COUNTDOWN ------------------- */

    .kb-countdown-container {
        position: absolute;
        margin: 0 auto;
        width: 100%;
        bottom: 0;

        .kb-countdown-timer {
            flex-wrap: nowrap;
            width: 100%;
        }

        /*@media screen and (max-width: 1600px) {
            scale: 100%;
            bottom: -15px;
        }

        @media screen and (max-width: 1200px) {
            bottom: -15px;
        }

        @media screen and (max-width: 1000px) {
            bottom: -13px;
        }

        @media screen and (max-width: 880px) {
            bottom: -12px;
        }

        @media screen and (max-width: 650px) {
            bottom: -14px;
            scale: 60%;
        }*/

        .kb-countdown-item {
            position: relative;
            display: flex;
            align-items: center;
            margin-right: 10px;

            &:after {
                content: "";
                width: 10px;
                height: 13px;
                margin-left: 12px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='14' viewBox='0 0 11 14' fill='none'%3E%3Cpath d='M0 12.275V0.857501C0 0.592335 0.0856666 0.383083 0.257 0.22975C0.428333 0.0765834 0.627583 0 0.85475 0C0.926417 0 1.00183 0.00933321 1.081 0.0279999C1.16017 0.0466665 1.23675 0.0765003 1.31075 0.1175L10.293 5.8575C10.4237 5.94883 10.5226 6.0525 10.5898 6.1685C10.6571 6.28433 10.6908 6.41692 10.6908 6.56625C10.6908 6.71558 10.6571 6.84817 10.5898 6.964C10.5226 7.08 10.4237 7.18367 10.293 7.275L1.31075 13.015C1.23625 13.056 1.159 13.0848 1.079 13.1015C0.999167 13.1182 0.923333 13.1265 0.8515 13.1265C0.623667 13.1265 0.424834 13.0513 0.255 12.901C0.0850003 12.7507 0 12.542 0 12.275Z' fill='%23DBA725'/%3E%3C/svg%3E");
            }

            &:last-child:after {
                display: none;
            }

            .kb-countdown-label,
            .kb-countdown-number {
                line-height: 0.6 !important;
                font-size: 88px !important;

                @media screen and (max-width: 1315px) {
                    font-size: 6.2vw !important;
                }
            }
        }
    }

    /* ------------------- SLIDER ------------------- */
    .kb-advanced-slide-inner {
        position: unset;

        h2.has-base-color {
            position: absolute;
            left: -8px;
            bottom: -5px;
            margin: 0;
        }
    }

    .splide__pagination {
        left: unset !important;
    }

    /* ------------------- ARTISTS -------------------- */
    .artist {
        h3 {
            position: absolute;
            left: -16px;
            bottom: -15px;
        }
    }

    /* ------------------- NEWS -------------------- */
    .news-filters {
        margin-left: 10px;
    }

    /* ------------------- CTA ------------------- */

    .kt-blocks-modal-link {
        svg {
            width: 0.8rem !important;
            height: 0.8rem !important;
            color: var(--wp--preset--color--red-ochre) !important;
        }
    }

    .gform-theme--foundation .gform_fields {
        --gf-form-gap-y: 10px !important;
    }

    .gform_title {
        margin: 0;
    }

    /* ------------------- ADDITIONAL UTILITY CLASSES ------------------- */

    /* Fix hover text decoration on h1 */
    .wp-block-post-title a:hover {
        text-decoration: none !important;
    }

    .w-50 {
        width: 50% !important;
    }

    .w-60 {
        width: 60% !important;
    }

    .max-w-720 {
        max-width: 720px !important;
    }


    .mw-1300 {
        max-width: 1300px !important;
    }

    .bottom-0 {
        bottom: 0;
    }

    .top-0 {
        top: 0;
    }

    /* Scrolling Text (Marquee) */

    :has(> .scrolling-text) {
        overflow-x: hidden;
    }

    .scrolling-text {
        --space: 200vw;
        white-space: nowrap;
        animation: marquee 50s infinite linear;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-100%);
        }
    }


    /* ------------------- ANIMATE IN ------------------- */

    /* only use .fadeingroup on sections and group blocks */
    .fadein,
    .fadein-group>*,
    .fadein-group-query>.kb-query-grid-wrap>*,
    .fadein-group>.kt-inside-inner-col>* {
        opacity: 0;
        transition: all 1s;
    }

    /* Don't hide elements in the editor */
    .block-editor-block-canvas .fadein,
    .editor-styles-wrapper .fadein,
    .block-editor-block-canvas .fadein-group>*,
    .editor-styles-wrapper .fadein-group>* {
        opacity: 1 !important;
    }

    /* Staggered delay for direct children of fadein-group */
    .fadein-group>*:nth-child(2),
    .fadein-group-query .kb-query-grid-wrap>*:nth-child(2),
    .fadein-group .kt-inside-inner-col>*:nth-child(2),
    .fadein:nth-child(2) {
        transition-delay: 200ms;
    }

    .fadein-group>*:nth-child(3),
    .fadein-group-query>.kb-query-grid-wrap>*:nth-child(3),
    .fadein-group .kt-inside-inner-col>*:nth-child(3),
    .fadein:nth-child(3) {
        transition-delay: 400ms;
    }

    .fadein-group>*:nth-child(4),
    .fadein-group .kt-inside-inner-col>*:nth-child(4),
    .fadein:nth-child(4) {
        transition-delay: 600ms;
    }

    .fadein-group>*:nth-child(5),
    .fadein-group .kt-inside-inner-col>*:nth-child(5),
    .fadein:nth-child(5) {
        transition-delay: 700ms;
    }

    .fadein-group>*:nth-child(6),
    .fadein-group .kt-inside-inner-col>*:nth-child(6),
    .fadein:nth-child(6) {
        transition-delay: 750ms;
    }

    .fadein-group>*:nth-child(7),
    .fadein-group .kt-inside-inner-col>*:nth-child(7),
    .fadein:nth-child(7) {
        transition-delay: 800ms;
    }

    .fadein-group>*:nth-child(8),
    .fadein-group .kt-inside-inner-col>*:nth-child(8),
    .fadein:nth-child(8) {
        transition-delay: 850ms;
    }

    .fadein-group>*:nth-child(9),
    .fadein-group .kt-inside-inner-col>*:nth-child(9),
    .fadein:nth-child(9) {
        transition-delay: 900ms;
    }

    .fadein-group>*:nth-child(10),
    .fadein-group .kt-inside-inner-col>*:nth-child(10),
    .fadein:nth-child(10) {
        transition-delay: 950ms;
    }

    .fadein-group>*:nth-child(11),
    .fadein-group .kt-inside-inner-col>*:nth-child(11),
    .fadein:nth-child(11) {
        transition-delay: 1000ms;
    }

    .fadein-group>*:nth-child(12),
    .fadein-group .kt-inside-inner-col>*:nth-child(12),
    .fadein:nth-child(12) {
        transition-delay: 1050ms;
    }

    .fadein-group>*:nth-child(13),
    .fadein-group .kt-inside-inner-col>*:nth-child(13),
    .fadein:nth-child(13) {
        transition-delay: 1100ms;
    }

    .fadein-group>*:nth-child(14),
    .fadein-group .kt-inside-inner-col>*:nth-child(14),
    .fadein:nth-child(14) {
        transition-delay: 1150ms;
    }

    .fadein-group>*:nth-child(15),
    .fadein-group .kt-inside-inner-col>*:nth-child(15),
    .fadein:nth-child(15) {
        transition-delay: 1200ms;
    }

    .fadein-group>*:nth-child(16),
    .fadein-group .kt-inside-inner-col>*:nth-child(16),
    .fadein:nth-child(16) {
        transition-delay: 1250ms;
    }

    .fadein-group>*:nth-child(17),
    .fadein-group .kt-inside-inner-col>*:nth-child(17),
    .fadein:nth-child(17) {
        transition-delay: 1300ms;
    }

    .fadein-group>*:nth-child(18),
    .fadein-group .kt-inside-inner-col>*:nth-child(18),
    .fadein:nth-child(18) {
        transition-delay: 1350ms;
    }

    .fadein-group>*:nth-child(19),
    .fadein-group .kt-inside-inner-col>*:nth-child(19),
    .fadein:nth-child(19) {
        transition-delay: 1400ms;
    }

    .fadein-group>*:nth-child(20),
    .fadein-group .kt-inside-inner-col>*:nth-child(20),
    .fadein:nth-child(20) {
        transition-delay: 1450ms;
    }

    /* Fade in when visible */
    .fadein.coast-visible,
    .fadein-group .kt-inside-inner-col.coast-visible>*,
    .fadein-group-query .kb-query-grid-wrap.coast-visible>*,
    .coast-visible>* {
        opacity: 1;
    }

    .coast-visible {
        opacity: 1;
    }

    /* ------------------- SOCIAL MEDIA PLUGIN ------------------- */

    .spf_container {
        padding: 0;
        gap: 2rem;
    }

    .spf_item {
        border: 10px solid var(--wp--preset--color--orange-ochre) !important;
    }

    /* ------------------- MODAL POPUP ------------------- */
    .coast-modal-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .coast-modal-popup.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .coast-modal-popup__overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.75);
        cursor: pointer;
    }

    .coast-modal-popup__container {
        position: relative;
        z-index: 1;
        width: 90%;
        max-width: 600px;
        max-height: 90vh;
        overflow-y: auto;
        background: var(--wp--preset--color--base, #ffffff);
        border-radius: 8px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }

    .coast-modal-popup.is-open .coast-modal-popup__container {
        transform: scale(1);
    }

    .coast-modal-popup__content {
        position: relative;
        padding: 2rem;
    }

    .coast-modal-popup__close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--wp--preset--color--contrast, #252727);
        z-index: 10;
        transition: opacity 0.2s ease;
    }

    .coast-modal-popup__close:hover {
        opacity: 0.7;
    }

    .coast-modal-popup__close svg {
        width: 24px;
        height: 24px;
    }

    .coast-modal-popup__inner {
        width: 100%;
    }

    /* Prevent body scroll when modal is open */
    body.coast-modal-open {
        overflow: hidden;
    }

    /* Editor styles */
    .coast-modal-popup-editor {
        border: 2px dashed #ccc;
        padding: 1.5rem;
        margin: 1rem 0;
        background: #f9f9f9;
    }

    .coast-modal-popup-editor__header {
        margin-bottom: 1rem;
    }

    .coast-modal-popup-editor__header h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1.2rem;
    }

    .coast-modal-popup-editor__description {
        margin: 0;
        color: #666;
        font-size: 0.9rem;
    }

    .coast-modal-popup-editor__content {
        min-height: 100px;
    }

    @media (max-width: 768px) {
        .coast-modal-popup__container {
            width: 95%;
            max-height: 95vh;
        }

        .coast-modal-popup__content {
            padding: 1.5rem;
        }

        .coast-modal-popup__close {
            top: 0.75rem;
            right: 0.75rem;
        }
    }
}