/* ==========================================================================
	Project: Kraken Promos Plugin
	File: public.css
	Purpose: base + layout + components + utilities.
	Author: Christopher Satterthwaite  |  Updated: 2026-01-29  |  Version: 1.0.0
========================================================================== */

/* TOC
[00] Root
[01] Base
[02] Layout
	[02.0] Inner Wrapper Styles
    [02.1] Header Styles
    [02.2] Layout Styles
    [02.3] Promos List Styles
        [02.3.a] Justified Layout Styles
        [02.3.b] Masonry Layout Styles
        [02.3.c] Grid Layout Styles
	[02.4] Footer
[03] Components
    [03.1] Archive Title Styles
    [03.2] Archive Description Styles
    [03.3] Category Navigation Styles
    [03.4] Promo Card Styles
        [03.4.a] Media Card Styles
        [03.4.b] Card Content Styles
        [03.4.c] Content Reveal Styles
        [03.4.d] Content Moving Styles
        [03.4.d] Content Overlay Styles
    [03.5] Sub Heading Styles
    [03.6] Heading Styles
    [03.7] Schedule Styles
    [03.8] Content Styles
    [03.9] Permalink Styles
    [03.10] Back Button Styles
    [03.11] Single Page Image Styles
    [03.12] Post Navigation Styles 
    [03.13] Share Bar Styles
    [03.14] Pagination Styles
[04] Utilities
    [04.1] Screen Reader 
*/

/* ================= [00] Root ================= */
/* Generated in the css.php */

/* ================= [01] Base ================= */
/* Generated in the css.php */

/* ================= [02] Layout ================= */
/* -- [02.0] Inner Wrapper Styles -- */
.kp-promo__inner {
	padding: var(--kp-promo-inner-padding);
}

/* -- [02.1] Header Styles -- */
.kp-promo__header {
  max-width: var(--kp-header-max-width);
  margin: 0 auto;

  .kp-promo__header-inner {
    max-width: var(--kp-header-inner-max-width);
    padding: var(--kp-header-inner-padding);
  }

  &.kp-promo__header--archive {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  &.kp-promo__header--single {
    max-width: var(--kp-header-single-max-width);

    .kp-promo__header-inner {
        max-width: var(--kp-header-single-inner-max-width);
        padding: var(--kp-header-single-inner-padding);
    }
  }
}

/* -- [02.2] Layout Styles -- */
.kp-promo__layout-inner {
    max-width: var(--kp-layout-inner-max-width);
    margin: 0 auto;
    padding: var(--kp-layout-inner-padding);

    &.kp-promo__layout-inner--single {
        max-width: var(--kp-layout-single-inner-max-width);
        padding: var(--kp-layout-single-inner-padding);
    }
}

.wp-block-kraken-promos-promo.alignfull .kp-promo__layout-inner,
.wp-block-kraken-promos-promo.alignfull .kp-promo__content,
.wp-block-kraken-promos-promo.alignfull .kp-promo__content-inner {
    width: 100%;
    max-width: none;
}

/* -- [02.3] Promos List Styles -- */
.kp-promos__list {
    --kp-promos-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--kp-promos-gap);


    .kp-promo__item {
        position: relative;
        z-index: 80;
    }

    .kp-promo__item.kp-promo__item--active {
        z-index: 90;
    }

    &.kp-promos__list--filterable {
        .kp-promo__item {
            transition: opacity 0.2s ease, transform 0.2s ease;
            will-change: opacity, transform;
        }

        .kp-promo__item.kp-promo__item--filtered {
            opacity: 0;
            transform: scale(0.96);
            pointer-events: none;
        }

        .kp-promo__item.kp-promo__item--filtered-hidden {
            display: none;
        }

        .kp-promo__item.kp-promo__item--paged-hidden {
            display: none;
        }
    }

    /* -- [02.3.a] Justified Layout Styles-- */
    &.kp-promos__list--justified {
        position: relative;
        display: block;
        --kp-promos-gap: 0.5rem;
        --kp-justified-row-height: 300px;
        --kp-justified-row-tolerance: 0.25;
        opacity: 0;
        visibility: hidden;
        min-height: var(--kp-justified-row-height, 300px);
        transition: opacity 0.2s ease-in-out;

        &.kp-justified-ready {
            opacity: 1;
            visibility: visible;
        }

        &.kp-layout-ready {
            opacity: 1;
            visibility: visible;
        }

        .kp-promo-card {
            display: block;
        }

        .kp-promo-card__media {
            width: 100%;
        }

        .kp-promo-card__media-link {
            display: block;
            width: 100%;
        }

        .kp-promo-card__image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 991.98px) {
            display: flex;
            flex-wrap: wrap;
            --kp-promos-gap: 1rem;
            gap: var(--kp-promos-gap);
            opacity: 1;
            visibility: visible;
            min-height: 0;
            --kp-card-ratio: 4 / 3;

            > .kp-promo__item {
                flex: 0 0 100%;
                max-width: 100%;
                position: relative;
            }
        }
    }

    /* -- [02.3.b] Masonry Layout Styles -- */
    &.kp-promos__list--masonry {
        display: block;
        position: relative;
        gap: 0;
        --kp-masonry-columns: 1;
        --kp-card-ratio: auto;
        opacity: 0;
        visibility: hidden;
        min-height: 300px;
        transition: opacity 0.2s ease-in-out;

        > .kp-promo__item {
            display: block;
            width: 100%;
            
            @media (min-width: 992px) {
                margin: 0 0 var(--kp-promos-gap);
            }
        }

        &.kp-masonry-ready {
            opacity: 1;
            visibility: visible;
        }

        &.kp-layout-ready {
            opacity: 1;
            visibility: visible;
        }

        &.kp-masonry-ready > .kp-promo__item {
            margin: 0;
        }

        .kp-promo-card {
            height: auto;
        }

        .kp-promo-card__media-link {
            display: block;
            width: 100%;
            height: auto;
            overflow: hidden;
            aspect-ratio: auto;
        }

        .kp-promo-card__image {
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        @media (max-width: 991.98px) {
            display: flex;
            flex-wrap: wrap;
            --kp-promos-gap: 1rem;
            gap: var(--kp-promos-gap);
            opacity: 1;
            visibility: visible;
            min-height: 0;
            --kp-card-ratio: 4 / 3;

            > .kp-promo__item {
                flex: 0 0 100%;
                max-width: 100%;
                position: relative;
            }

            .kp-promo-card__media-link {
                aspect-ratio: var(--kp-card-ratio);
            }
        }

        @media (min-width: 992px) {
            --kp-masonry-columns: 2;
        }

        @media (min-width: 1440px) {
            --kp-masonry-columns: 3;
        }
    }

    /* -- [02.3.c] Grid Layout Styles -- */
    &.kp-job__list--grid > .kp-promo__item {
        flex: 0 0 calc((100% - (var(--kp-promos-gap) * 2)) / 3);
        max-width: calc((100% - (var(--kp-promos-gap) * 2)) / 3);
    }

    &.kp-promos__list--grid-02 > .kp-promo__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    &.kp-promos__list--grid-03 > .kp-promo__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    &.kp-promos__list--grid-04 > .kp-promo__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    &.kp-promos__list--grid-05 > .kp-promo__item {
        flex: 0 0 100%;
        max-width: 100%;
    }

    &.kp-promos__list--grid {
        .kp-promo-card__media {
            width: 100%;
            overflow: hidden;
            /* --kp-card-ratio is set inline for grid cards. */
            aspect-ratio: var(--kp-card-ratio, 1 / 1);
        }

        .kp-promo-card__media-link {
            display: block;
            width: 100%;
            height: 100%;
        }

        .kp-promo-card__image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    @media (min-width: 992px) {
        &.kp-promos__list--grid-02 > .kp-promo__item {
            flex: 0 0 calc((100% - var(--kp-promos-gap)) / 2);
            max-width: calc((100% - var(--kp-promos-gap)) / 2);
        }

        &.kp-promos__list--grid-03 > .kp-promo__item {
            flex: 0 0 calc((100% - var(--kp-promos-gap)) / 2);
            max-width: calc((100% - var(--kp-promos-gap)) / 2);
        }

        &.kp-promos__list--grid-04 > .kp-promo__item {
            flex: 0 0 calc((100% - var(--kp-promos-gap)) / 2);
            max-width: calc((100% - var(--kp-promos-gap)) / 2);
        }

        &.kp-promos__list--grid-05 > .kp-promo__item {
            flex: 0 0 calc((100% - var(--kp-promos-gap)) / 2);
            max-width: calc((100% - var(--kp-promos-gap)) / 2);
        }
    }

    @media (min-width: 1200px) {
        &.kp-promos__list--grid-03 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 2)) / 3);
            max-width: calc((100% - (var(--kp-promos-gap) * 2)) / 3);
        }

        &.kp-promos__list--grid-04 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 2)) / 3);
            max-width: calc((100% - (var(--kp-promos-gap) * 2)) / 3);
        }

        &.kp-promos__list--grid-05 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 2)) / 3);
            max-width: calc((100% - (var(--kp-promos-gap) * 2)) / 3);
        }
    }

    @media (min-width: 1400px) {
        &.kp-promos__list--grid-04 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 3)) / 4);
            max-width: calc((100% - (var(--kp-promos-gap) * 3)) / 4);
        }
    }

    @media (min-width: 1440px) {
        &.kp-promos__list--grid-04 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 3)) / 4);
            max-width: calc((100% - (var(--kp-promos-gap) * 3)) / 4);
        }

        &.kp-promos__list--grid-05 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 3)) / 4);
            max-width: calc((100% - (var(--kp-promos-gap) * 3)) / 4);
        }
    }

    @media (min-width: 1920px) {
        &.kp-promos__list--grid-05 > .kp-promo__item {
            flex: 0 0 calc((100% - (var(--kp-promos-gap) * 4)) / 5);
            max-width: calc((100% - (var(--kp-promos-gap) * 4)) / 5);
        }
    }
}

/* -- [02.4] Footer Styles -- */
.kp-promo__footer {
    max-width: var(--kp-footer-max-width);
    margin: 0 auto;
    padding: var(--kp-footer-padding);

    &.kp-promo__footer--single {
        max-width: var(--kp-footer-single-max-width);
        padding: var(--kp-footer-single-padding);
    }
}

/* ================= [03] Components ================= */
/* -- [03.1] Archive Title Styles -- */
.kp-promo__archive-title {
	margin: var(--kp-archive-heading-margin);
	padding: var(--kp-archive-heading-padding);
	color: var(--kp-archive-heading-font-color);
	font-family: var(--kp-archive-heading-font-family);
	font-size: var(--kp-archive-heading-font-size);
	font-weight: var(--kp-archive-heading-font-weight);
	line-height: var(--kp-archive-heading-line-height);
}

/* -- [03.2] Archive Description Styles -- */
.kp-archive__description {
	color: var(--kp-archive-description-font-color);
	font-family: var(--kp-archive-description-font-family);
	font-size: var(--kp-archive-description-font-size);
	font-weight: var(--kp-archive-description-font-weight);
	line-height: var(--kp-archive-description-line-height);
}

/* -- [03.3] Category Navigation Styles -- */
.kp-promos-category-nav {
    margin: 3rem auto 0 auto;

    .kp-promos-category-nav__list {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;

        .kp-promos-category-nav__link {
            color: var(--kp-navigation-font-color);
            font-size: 1.2rem;
            text-decoration: none;

            &:hover {
                color: var(--kp-navigation-hover-font-color);
            }

            &.kp-promos-category-nav__link--current {
                color: var(--kp-navigation-active-font-color);
            }
        }
    }
}

/* -- [03.4] Promo Card Styles -- */
.kp-promo-card {
    position: relative;
    height: 100%;
    background-color: var(--kp-card-background-color);
    overflow: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    
    /* -- [03.4.a] Media Card Styles -- */
    .kp-promo-card__media {
        background-color: var(--kp-card-media-background-color);
        overflow: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        will-change: transform;

        .kp-promo-card__media-link {
            display: block;
           
            .kp-promo-card__image {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1);
                opacity: 1;
                transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
            }
        }
    }

    &.kp-promo-card--hover-image:hover {
        .kp-promo-card__media {
            .kp-promo-card__media-link {
                .kp-promo-card__image {
                    transform: scale(1.03);
                    opacity: 0.7;
                }
            }
        }
    }

    /* -- [03.4.b] Card Content Styles -- */
	.kp-promo-card__content {
        padding: 1.5rem 2rem 2rem 2rem;
        backface-visibility: hidden;
        transform: translateZ(0);
        will-change: transform;

        .kp-promo-card__header {
        }
        .kp-promo-card__body {
        }

        .kp-promo-card__footer {
            display: flex;
            gap: 0.5rem;
        }
	}

    /* -- [03.4.c] Content Reveal Styles -- */
    &.kp-promo-card--content-reveal {
        @media (min-width: 992px) {
            .kp-promo-card__content {
                position: absolute;
                bottom: 0;
                left: 0;
                opacity: 0;
                width: 100%;
                max-height: 100%;
                min-height: 50px;
                background-color: var(--kp-card-reveal-background-color);
                transform: translateY(100%);
                transition: 0.2s transform cubic-bezier(0.25,0.46,0.45,0.94);
                padding: var(--kp-card-reveal-padding);

                .kp-promo__sub-heading-title {
                    color: var(--kp-card-reveal-sub-heading-font-color);
                }

                .kp-promo__heading-title {
                    .kp-promo__heading-link {
                        @media (min-width: 992px) {
                            color: var(--kp-card-overlay-title-font-color);

                            &:is(:hover, :focus) {
                                color: var(--kp-card-overlay-title-font-color);
                            }
                        }
                    }
                }

                .kp-promo__schedule {
                    opacity: 0;
                    transform: translateY(10px);
                    transition-delay: calc(0.07s * 2);
                    transition-duration: 0.25s;
                    transition-property: opacity, transform;
                    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);

                    .kp-promo__start-date {
                        color: var(--kp-card-reveal-date-font-color);
                    }

                    .kp-promo__start-time {
                        color:  var(--kp-card-reveal-time-font-color);
                    }
                }

                .kp-promo__content {
                    color:  var(--kp-card-reveal-content-font-color);
                    opacity: 0;
                    transform: translateY(20px);
                    transition-delay: calc(0.07s * 2);
                    transition-duration: 0.25s;
                    transition-property: opacity, transform;
                    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94);
                }
            }

            &:hover {
                .kp-promo-card__content {
                    opacity: 1;
                    transform: translateY(0%);

                    .kp-promo__schedule {
                        opacity: 1;
                        transform: translateY(0);
                    }

                    .kp-promo__content {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }
        }
    }

    /* -- [03.4.d] Content Moving Styles -- */
    &.kp-promo-card--content-moving {
        position: relative;
        overflow: unset;

        .kp-promo-card__content {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            pointer-events: none;
            transform: translate(-6px, -6px) rotate(6deg);
            transform-origin: top left;
            transition: opacity 0.12s ease, transform 0.2s ease;
            will-change: left, top;
            z-index: 100;
            background-color: var(--kp-card-moving-background-color);
            padding: var(--kp-card-moving-padding);
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;

            @media (prefers-reduced-motion: reduce) {
                transition: none;
            }
            
            @media (max-width: 991.98px) {
                position: relative;
                left: unset;
                top: unset;
                transform: none;
                opacity: 1;
                pointer-events: auto;
                width: auto;
                max-width: 100%;
            }
        }

        &.kp-promo-card--content-follow .kp-promo-card__content {
            opacity: 1;
            transform: none;
        }
    }

    /* -- [03.4.e] Content Overlay Styles -- */
    &.kp-promo-card--content-overlay {
        .kp-promo-card__content {
            @media (prefers-reduced-motion: reduce) {
                transition: none;
            }

            @media (min-width: 992px) {
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                background-color: var(--kp-card-overlay-background-color);
                width: 100%;
                height: 100%;
                opacity: 0;
                pointer-events: none;
                transform: translateX(0%) translateY(-100.1%) translateZ(0px);
                transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
            }
        }

        .kp-promo__sub-heading-title {
            @media (min-width: 992px) {
                color: var(--kp-card-overlay-sub-heading-font-color);
            }
        }
        
        .kp-promo__heading-title {
            .kp-promo__heading-link {
                @media (min-width: 992px) {
                    color: var(--kp-card-overlay-title-font-color);

                    &:is(:hover, :focus) {
                        color: var(--kp-card-overlay-title-font-color);
                    }
                }
            }
        }

        .kp-promo__schedule {
            .kp-promo__start-date {
                @media (min-width: 992px) {
                    color: var(--kp-card-overlay-date-font-color);
                }
            }

            .kp-promo__start-time {
                @media (min-width: 992px) {
                    color: var(--kp-card-overlay-time-font-color);
                }
            }
        }

        .kp-promo__content {
            @media (min-width: 992px) {
                color: var(--kp-card-overlay-content-font-color);
            }
        }
    }
}

/* -- [03.5] Sub Heading Styles -- */
.kp-promo__sub-heading {
    margin: 0 0 0.3rem 0;

    .kp-promo__sub-heading-title {
        color: var(--kp-subheading-font-color);
        font-family: var(--kp-subheading-font-family);
        font-size: var(--kp-subheading-font-size);
        line-height: var(--kp-subheading-line-height);
        font-weight: var(--kp-subheading-font-weight);
    }

    &.kp-promo__sub-heading--single {
        .kp-promo__sub-heading-title {
            color: var(--kp-subheading-single-font-color);
            font-family: var(--kp-subheading-single-font-family);
            font-size: var(--kp-subheading-single-font-size);
            line-height: var(--kp-subheading-single-line-height);
            font-weight: var(--kp-subheading-single-font-weight);
        }
    }
}

/* -- [03.6] Heading Styles -- */
.kp-promo__heading {
    margin: 0 0 0.5rem 0;

    .kp-promo__heading-title {
        margin: 0;
        padding: 0;
        font-family: var(--kp-heading-title-font-family);
        font-size: var(--kp-heading-title-font-size);
        line-height: var(--kp-heading-title-line-height);
        font-weight: var(--kp-heading-title-font-weight);

        .kp-promo__heading-link {
            color: var(--kp-heading-title-font-color);
            text-decoration: none;
            transition: color 0.2s ease-in-out;

            &:is(:hover, :focus) {
                color: var(--kp-heading-title-hover-font-color);;
            }

            &:focus-visible {
                outline: 2px solid var(--color-accessibility);
                outline-offset: 2px;
                visibility: visible;
                opacity: 1;
            }
        }
    }

    &.kp-promo__heading--single {
          .kp-promo__heading-title {
            margin: 0;
            padding: 0;
            font-size: var(--kp-heading-title-single-font-size);
            line-height: var(--kp-heading-title-single-line-height);
            font-weight: var(--kp-heading-title-single-font-weight);
          }
    }
}

/* -- [03.7] Schedule Styles -- */
.kp-promo__schedule {
    margin: 0 0 1.5rem 0;

    &.kp-promo__schedule--single {
        margin: 0 0 0 0;

        .kp-promo__schedule-group {
            .kp-promo__start-date {
                font-family: var(--kp-date-single-font-family);
                font-size: var(--kp-date-single-font-size);
                line-height: var(--kp-date-single-line-height);
                font-weight: var(--kp-date-single-font-weight);
            }

            .kp-promo__start-time {
                font-family: var(--kp-time-single-font-family);
                font-size: var(--kp-time-single-font-size);
                line-height: var(--kp-time-single-line-height);
                font-weight: var(--kp-time-single-font-weight);
            }
        }
    }

    .kp-promo__schedule-group {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.5rem;
        row-gap: 0.3rem;
        margin-bottom: 0.5rem;

        .kp-promo__start-date {
            margin: 0;
            color: var(--kp-date-font-color);
            font-family: var(--kp-date-font-family);
            font-size: var(--kp-date-font-size);
            line-height: var(--kp-date-line-height);
            font-weight: var(--kp-date-font-weight);
        }

        .kp-promo__start-time {
            margin: 0;
            color: var(--kp-time-font-color);
            font-family: var(--kp-time-font-family);
            font-size: var(--kp-time-font-size);
            line-height: var(--kp-time-line-height);
            font-weight: var(--kp-time-font-weight);
        }

        .kp-promo__exclude-dates {
            margin: 0;
        }
    }
}

/* -- [03.8] Content Styles -- */
.kp-promo__content {
    color: var(--kp-content-font-color);
    font-family: var(--kp-content-font-family);
    font-size: var(--kp-content-font-size);
    line-height: var(--kp-content-line-height);
    font-weight: var(--kp-content-font-weight);

    &.kp-promo__content--single {
        font-family: var(--kp-content-single-font-family);
        font-size: var(--kp-content-single-font-size);
        line-height: var(--kp-content-single-line-height);
        font-weight: var(--kp-content-single-font-weight);
    }
}

/* -- [03.9] Permalink Styles -- */
.kp-promos-permalink {
    width: 100%;
    padding: 2rem 0 0 0;

	.kp-promos-permalink__link {
		padding: var(--kp-post-nav-padding);
		background-color: var(--kp-permalink-background-color);
		color: var(--kp-permalink-font-color);
		border-radius: 0.2rem;
        text-align: center;
		font-family: var(--kp-permalink-font-family);
		font-size: var(--kp-permalink-font-size);
		font-weight: var(--kp-permalink-font-weight);
		line-height: var(--kp-permalink-line-height);
		text-decoration: none;
		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

        body:not(.single-kraken-promos) & {
            display: block;
            width: 100%;
        }

		&:is(:hover, :focus) {
			background-color: var(--kp-permalink-background-hover-color);
			color: var(--kp-permalink-font-hover-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}
    }

}

/* -- [03.10] Back Button Styles -- */
.kp-promos__back {
    padding-bottom: 1.5rem;

    .kp-promos__back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        text-decoration: none;

        &::before {
            content: "";
            display: inline-block;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.414 5.586a2 2 0 0 0-2.828 0L5.171 12l6.415 6.414c.39.391.902.586 1.414.586s1.024-.195 1.414-.586a2 2 0 0 0 0-2.828L10.829 12l3.585-3.586a2 2 0 0 0 0-2.828'/%3E%3C/svg%3E");
            background-color: currentColor;
            -webkit-mask-image: var(--svg);
            mask-image: var(--svg);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
        }
    }
}

/* -- [03.11] Single Page Image Styles -- */
.kp-promo__media {
    margin-bottom: 2rem;

    .kp-promo__image {
        width: 100%;
        height: auto;
    }
}

/* -- [03.12] Post Navigation Styles -- */
.kp-promo__nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    margin: 0 0 3rem 0;
    
    .kp-promo__nav-item {
        display: flex;
        flex: 1 1 0;

        &.kp-promo__nav-item--prev {
            justify-content: flex-start;
        }

        &.kp-promo__nav-item--next {
            justify-content: flex-end;
            text-align: right;

            .kp-promo__nav-link {
                align-items: flex-end;
            }
        }
    }

    .kp-promo__nav-link {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: 100%;
        padding: var(--kp-post-nav-padding);
        background-color: var(--kp-post-nav-background-color);
        color: var(--kp-post-nav-font-color);
        border-radius: 0.3rem;
        font-size: var(--kp-post-nav-font-size);
        text-decoration: none;

        &:is(:hover, :focus) {
            color: var(--kp-post-nav-hover-font-color);
			background-color: var(--kp-post-nav-hover-background-color);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accessibility);
			outline-offset: 2px;
			visibility: visible;
			opacity: 1;
		}
    }
}

/* -- [03.13] Share Bar Styles -- */
.kp-promo__share {
    .kp-promo__share-list {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        list-style: none;
        margin: 0;
        padding: 0;

        .kp-promo__share-item {
            &.kp-promo__share-item--heading {
                color: var(--kp-share-heading-font-color);
                font-size: var(--kp-share-heading-font-size);
                font-weight: var(--kp-share-heading-font-weight);
            }
        }

        .kp-promo__share-link {
            display: flex;
            align-items: center;
            width: 20px;
            height: 20px;
            color: var(--kp-share-font-color);

            &:is(:hover, :focus) {
                color: var(--kp-share-hover-font-color);
            }

            &:focus-visible {
                outline: 2px solid var(--color-accessibility);
                outline-offset: 2px;
                visibility: visible;
                opacity: 1;
            }
        }
    }
}

/* -- [03.14] Pagination Styles -- */
.kp-promos-pagination  {
	display: flex;
	justify-content: center;
	align-items: center;

	.kp-promos-pagination__inner {
		display: flex;
		align-items: center;
		gap: 1.5rem;

		.kp-promos-pagination__list {
			display: flex;
			gap: 0.5rem;
			list-style: none;
			margin: 0;
			padding: 0;
		}

		.kp-promos-pagination__link {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			width: 2rem;
			height: 2rem;
			color: var(--kp-pagination-font-color);
			border-radius: 1rem;
			font-size: 1rem;
			line-height: 1;
			letter-spacing: 2px;
			text-decoration: none;
			transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;

			&:is(:hover, :focus) {
				color: var(--kp-pagination-button-font-color);
				background-color: var(--kp-pagination-button-background-color);
				border-radius: 1rem;
			}

			&:focus-visible {
				outline: 2px solid var(--color-accessibility);
				outline-offset: 2px;
				visibility: visible;
				opacity: 1;
			}

			&.kp-promos-pagination__link--disabled {
				opacity: 0.4;
				color: var( --color-dark-gray);
				cursor: not-allowed;
				pointer-events: none;

			}

			&.kp-promos-pagination__link--current  {
				color: var(--kp-pagination-button-font-color);
				background-color: var(--kp-pagination-button-background-color);
				border-radius: 1rem;
			}

			&.kp-promos-pagination__link--next,
			&.kp-promos-pagination__link--prev {
				width: auto;
				padding: 0.5rem 1rem;
			}
		}
	}
}

.kp-promos-url {
    padding: 0.75rem 0 0 0;
}

/* ================= [04] Utilities ================= */
/* -- [04.1] Screen Reader -- */
.kp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;

	&:focus,
	&:focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}

	&.focusable:not(:focus):not(:focus-within) {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	&.focusable:focus,
	&.focusable:focus-within {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
	}
}