/*
Theme Name: Pride Parenting 2025
Theme URI: https://prideparenting.co.uk/
Author: George Beresford Design
Author URI: https://georgeberesford.co.uk/
Description: A bespoke WordPress theme for Pride Parenting.
Version: 28.08.2025.v4
*/

@import url('/wp-content/themes/pride-parenting-2025/assets/css/reset.css');
@import url('/wp-content/themes/pride-parenting-2025/assets/css/bootstrap-utilities.min.css');
@import url('/wp-content/themes/pride-parenting-2025/assets/css/bootstrap-grid.min.css');

:root {
    --font-size: 16px;

    --base-font-family: 'sofia-pro-variable', sans-serif;
    --base-font-weight: 'wght' 400;
    --bold-font-weight: 'wght' 700;
    --base-font-slant: 'slnt' 0;
    --ital-font-slant: 'slnt' 3;
    --base-line-height: 1.5em;

    --header-font-family: 'sofia-pro-variable', sans-serif;
    --header-font-weight: 'wght' 700;
    --header-font-slant: 'slnt' 0;
    --header-line-height: 1.3em;

    --padding: 2rem;
    --header-padding: 1rem;
    --input-padding: 1em;

    --logo-height: 3.5rem;

    --radius-sm:    3px;
    --radius:       5px;
    --radius-lg:    8px;

    --animation-duration: 0.25s;
    --transition:       all 0.3s ease-out;
    --transition-fast:  all 0.15s ease-out;

    --transition-background: opacity 0.15s ease-out, transform 0.15s ease-out, filter 0.15s linear;

    --primary:          #cf4780;
    --primary-hover:    oklch(from var(--primary) calc(l * 0.9) c h);
    --primary-active:   oklch(from var(--primary) calc(l * 0.8) c h);
    --primary-text:     oklch(from var(--primary) calc(l * 10) calc(c * 0.1) h);

    --secondary:        #469986;
    --secondary-hover:  oklch(from var(--secondary) calc(l * 0.9) c h);
    --secondary-active: oklch(from var(--secondary) calc(l * 0.8) c h);
    --secondary-text:   oklch(from var(--secondary) calc(l * 10) calc(c * 0.1) h);

    --background:       oklch(from var(--secondary) calc(l * 2) calc(c * 0.15) h);
    --background-alt:   oklch(from var(--background) calc(l * 0.94) c h);
    --surface:          oklch(from var(--secondary) calc(l * 5) calc(c * 0.1) h);
    --text:             oklch(from var(--primary) calc(l * 0.4) calc(c * 0.25) h);
    --text-muted:       oklch(from var(--text) calc(l * 2) calc(c * 0.7) h);
    --border:           oklch(from var(--text) calc(l * 3.5) calc(c * 0.1) h);

    --inverse:          var(--text);
    --inverse-hover:    oklch(from var(--inverse) calc(l * 1.3) c h);
    --inverse-active:   oklch(from var(--inverse) calc(l * 1.6) c h);
    --inverse-text:     oklch(from var(--inverse) calc(l * 9) calc(c * 0.1) h);

    --shadow:           0 0 1.5rem oklch(from var(--text) calc(l * 0.1) calc(c * 0.1) h / 0.15);
    --shadow-dk:        0 0 3rem oklch(from var(--text) calc(l * 0.1) calc(c * 0.1) h / 0.3);

}
body.dark {
    --background:       oklch(from var(--secondary) calc(l * 0.45) calc(c * 0.3) h);
    --background-alt:   oklch(from var(--background) calc(l * 1.1) c h);
    --surface:          oklch(from var(--secondary) calc(l * 0.65) calc(c * 0.5) h);
    --text:             oklch(from var(--primary) calc(l * 8) calc(c * 0.1) h);
    --text-muted:       oklch(from var(--text) calc(l * 0.9) calc(c * 0.5) h);
    --border:           oklch(from var(--background) calc(l * 2) calc(c * 1.5) h);
    
    --primary-hover:    oklch(from var(--primary) calc(l * 1.1) c h);
    --primary-active:   oklch(from var(--primary) calc(l * 1.2) c h);

    --secondary-hover:  oklch(from var(--secondary) calc(l * 1.1) c h);
    --secondary-active: oklch(from var(--secondary) calc(l * 1.2) c h);

    --inverse:          var(--text);
    --inverse-hover:    oklch(from var(--inverse) calc(l * 0.9) c h);
    --inverse-active:   oklch(from var(--inverse) calc(l * 0.8) c h);
    --inverse-text:     oklch(from var(--inverse) calc(l * 0.1) calc(c * 0.1) h);

    .background {
        & img, & video {
            opacity: 0.75 !important;
        }
    }
}


/** BANNERS **/
.banner-container {
    width: 100%;
    position: fixed;
    bottom: var(--header-padding);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;

    & .banner {
        padding: var(--padding);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);

        & .row {
            align-items: end;
            justify-content: center;
        }
    }

    &:focus-within {
        & .banner {
            box-shadow: var(--shadow-dk);
        }
    }
}


/** DOCUMENT SETUP **/
html, body {
    font-size: var(--font-size);

    
    font-family: var(--base-font-family);
    font-variation-settings: var(--base-font-weight), var(--base-font-slant);
    line-height: var(--base-line-height);

    background: var(--background);
    color: var(--text);

    text-wrap: pretty;
}
html {
    height: 100%;
    & body {
        min-height: 100%;
    }
}

/** CONTAINERS & ROWS **/
.container,
.container-fluid {
    padding-left: var(--padding);
    padding-right: var(--padding);
    & > .row {
    margin-left: calc(var(--padding) * -0.5);
    margin-right: calc(var(--padding) * -0.5);
    width: calc(100% + (var(--padding) * 1));
        & > .col,
        & > [class*="col-"] {
            padding-left: calc(var(--padding) * 0.5);
            padding-right: calc(var(--padding) * 0.5);
        }
    }

    & > .row.gutter-large {
    margin-left: calc(var(--padding) * -1);
    margin-right: calc(var(--padding) * -1);
    width: calc(100% + (var(--padding) * 2));
        & > .col,
        & > [class*="col-"] {
            padding-left: calc(var(--padding) * 1);
            padding-right: calc(var(--padding) * 1);
        }
    }
}

.row + .row {
    margin-top: var(--padding);
}


/** REVEAL LOGO ANIMATION **/
svg {
    display: block;
    width: 100%;
    height: 100%;
}
#logo-reveal-animation {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
#p1-45deg { stroke: var(--primary); }
#p2-45deg { stroke: var(--secondary); }

#logo-reveal-animation #p1-45deg,
#logo-reveal-animation #p2-45deg {
    stroke-dashoffset: 830;
    stroke-dasharray: 830;
}
#logo-reveal-animation #p1-45deg {
    animation: p1-dashoffset var(--animation-duration) ease-in-out forwards;
}
#logo-reveal-animation #p2-45deg {
    animation: p2-dashoffset var(--animation-duration) ease-in-out forwards;
    animation-delay: 50ms;
}
@keyframes p1-dashoffset {
    0% {
        stroke-width: 0px;
        stroke-dashoffset: 830;
    }
    10% {
        stroke-width: 64px;
    }
    100% {
        stroke-width: 64px;
        stroke-dashoffset: 0;
    }
}
@keyframes p2-dashoffset {
    0% {
        stroke-width: 0px;
        stroke-dashoffset: 830;
    }
    10% {
        stroke-width: 64px;
    }
    100% {
        stroke-width: 64px;
        stroke-dashoffset: 0;
    }
}


/** SEQUENTIAL ANIMATION **/
section {
    animation-timeline: view();
    animation-name: section;
    animation-duration: 1ms; /* Required in Firefox */

    &.split-content {
        & .background-left {
            animation-timeline: view();
            animation-name: imageEnterRight;
            animation-duration: 1ms;
        }
        & .background-right {
            animation-timeline: view();
            animation-name: imageEnterLeft;
            animation-duration: 1ms; /* Required in Firefox */
        }

        & .col-12:first-child:not(.empty) {
            animation-timeline: view();
            animation-name: textEnterLeft;
            animation-duration: 1ms; /* Required in Firefox */
        }
        & .col-12:last-child:not(.empty) {
            animation-timeline: view();
            animation-name: textEnterRight;
            animation-duration: 1ms; /* Required in Firefox */
        }
    }
}

/* keyframes remain the same */
@keyframes section {
    0% {
        opacity: 0.5;
        /* transform: translateY(3rem); */
    }
    50% {
        opacity: 1;
        /* transform: translateY(0); */
    }
    100% {
        opacity: 0.5;
        /* transform: translateY(-3rem); */
    }
}

@keyframes imageEnterRight {
    0% {
        left: -5rem;
    }
    45% {
        left: 0;
    }
}
@keyframes imageEnterLeft {
    0% {
        right: -5rem;
    }
    45% {
        right: 0;
    }
}

@keyframes textEnterRight {
    0% {
        opacity: 0;
        transform: translateX(-5rem);
    }
    45% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes textEnterLeft {
    0% {
        opacity: 0;
        transform: translateX(5rem);
    }
    45% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Respect reduced motion preferences: show content immediately without animation */
@media (prefers-reduced-motion: reduce) {
    section > .container {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/** TYPOGRAPHY SETTINGS **/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--header-font-family);
    font-variation-settings: var(--header-font-weight), var(--header-font-slant);
    line-height: var(--header-line-height);
    font-weight: bold;
    text-wrap: balance;

    margin-bottom: 1.5rem;
    margin-top: 3rem;
    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        margin-bottom: 0;
    }
}
h1, .h1 { font-size: 2.5em; }
h2, .h2 { font-size: 2em; }
h3, .h3 { font-size: 1.75em; }
h4, .h4 { font-size: 1.5em; }
h5, .h5 { font-size: 1.4em; }
h6, .h6, p.lead { font-size: 1.25em; }
@media (max-width: 991px) or (max-height: 800px) {
    :root { --font-size: 17px; }

    h1, .h1 { font-size: 2.3em; }
    h2, .h2 { font-size: 1.8em; }
    h3, .h3 { font-size: 1.4em; }
    h4, .h4 { font-size: 1.3em; }
    h5, .h5 { font-size: 1.2em; }
    h6, .h6, p.lead { font-size: 1.15em; }
}
@media (max-width: 767px) or (max-height: 600px) {
    :root { --font-size: 16px; }

    h1, .h1 { font-size: 2em; }
    h2, .h2 { font-size: 1.5em; }
    h3, .h3 { font-size: 1.3em; }
    h4, .h4 { font-size: 1.2em; }
    h5, .h5 { font-size: 1.1em; }
    h6, .h6, p.lead { font-size: 1.1em; }
}

.text-muted {
    color: var(--text-muted) !important;
}

p, ul, ol, li, blockquote, cite, figcaption, .wp-block {
    font-size: 1rem;
    line-height: var(--base-line-height);

    margin-bottom: 1rem;

    &:last-child {
        margin-bottom: 0;
    }
}

.has-text-align-center {
    text-align: center !important;
}
.has-text-align-left {
    text-align: left !important;
}
.has-text-align-right {
    text-align: right !important;
}
.has-text-align-justify {
    text-align: justify !important;
}

.wp-block-image {
    width: 100%;
    height: auto;
    & > img {
        width: 100%;
        height: auto;

        border-radius: var(--radius-sm);
    }
}
.background .wp-block-image {
    & > img {
        border-radius: unset !important;
    }
}

b, strong {
    font-variation-settings: var(--bold-font-weight), var(--base-font-slant) !important;
    font-weight: bold;
    & i, & em {
        font-variation-settings: var(--bold-font-weight), var(--ital-font-slant) !important;
        font-style: italic;
    }
}
i, em {
    font-variation-settings: var(--base-font-weight), var(--ital-font-slant) !important;
    font-style: italic;
    & b, & strong {
        font-variation-settings: var(--bold-font-weight), var(--ital-font-slant) !important;
        font-weight: bold;
    }
}

a, button {
    color: var(--primary);
    text-decoration: none;
    border: none;
    background: none;

    transition: var(--transition-fast);

    &:not(.btn) {
        &:hover, &:focus-within {
            color: var(--primary-hover);
            text-decoration: underline;
            text-decoration-color: var(--primary-hover);
            text-underline-offset: 0.3em;
            text-decoration-thickness: 0.1em;
            stroke: var(--primary-hover);
        }
        &:active, &.active {
            color: var(--primary-active);
            text-decoration: underline;
            text-decoration-color: var(--primary-active);
            text-underline-offset: 0.25em;
            text-decoration-thickness: 0.2em;
            stroke: var(--primary-active);
        }
    }

    &.current_page_item,
    &.current_page_ancestor,
    &.current_page_parent,
    &.current-menu-item,
    &.current-menu-ancestor,
    &.current-menu-parent {
        &:not(.btn) {
            text-decoration: underline;
            text-decoration-color: var(--primary);
            text-underline-offset: 0.25em;
            text-decoration-thickness: 0.2em;

            &:hover, &:focus-within {
                text-decoration-color: var(--primary-hover);
                stroke: var(--primary-hover);
            }
            &:active, &.active {
                text-decoration-color: var(--primary-active);
                stroke: var(--primary-active);
            }

        }
    }
}


/** TABLES **/
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 2rem;
    background: var(--background);
    color: var(--text);

    & th,
    & td {
        padding: 0.75rem 1rem;
        text-align: left;
        vertical-align: center;
        font-size: 1rem;
        line-height: var(--base-line-height);
    }

    & th {
        font-family: var(--header-font-family);
        font-variation-settings: var(--header-font-weight), var(--header-font-slant);
        font-weight: bold;
        background: var(--background);
        color: var(--text);
        border-bottom: 2px solid var(--border);
    }

    & tbody tr {
        & td {
            border-top: 1px solid var(--border);
        }
    }

    &.table-striped tbody tr:nth-child(odd) {
        background: var(--surface);
    }

    &.table-bordered {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;

        & th,
        & td {
            border-right: 1px solid var(--border);
        }
        & th:last-child,
        & td:last-child {
            border-right: none;
        }
    }

    &.has-fixed-layout {
        table-layout: fixed;
        word-break: break-word;
    }
}


/** BUTTONS **/
.btn {
    display: inline-block;
    &.btn-sm { font-size: 0.8em;}
    &.btn-lg { font-size: 1.2em;}
}
.btn {
    padding: calc(var(--input-padding) * 0.5) calc(var(--input-padding) * 1);
    border: 2px solid black;
    border-radius: var(--radius);

    font-family: var(--header-font-family);
    font-variation-settings: var(--header-font-weight), var(--header-font-slant);
    font-weight: bold;

    text-transform: uppercase;

    box-shadow: var(--shadow);
    transition: var(--transition-fast);

    &.btn-pill {
        padding: calc(var(--input-padding) * 0.5) calc(var(--input-padding) * 1.5);
        border-radius: 99rem;
    }
    &.btn-link {
        display: inline;
        padding: 0;
        background: unset;
        border: unset;
        box-shadow: unset;
    }
    &.disabled, &[disabled] {
        opacity: 0.5;
        pointer-events: none;
        filter: grayscale(75%);
    }
}
.btn-default {
    background: var(--inverse);
    border-color: var(--inverse);
    color: var(--inverse-text);
    stroke: var(--inverse-text);

    &:hover, &:focus-within { background: var(--inverse-hover); border-color: var(--inverse-hover); }
    &:active, &.active { background: var(--inverse-active); border-color: var(--inverse-active); }
}
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
    stroke: var(--primary-text);

    &:hover, &:focus-within { background: var(--primary-hover); border-color: var(--primary-hover); }
    &:active, &.active { background: var(--primary-active); border-color: var(--primary-active); }
}
.btn-secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--secondary-text);
    stroke: var(--secondary-text);

    &:hover, &:focus-within { background: var(--secondary-hover); border-color: var(--secondary-hover); }
    &:active, &.active { background: var(--secondary-active); border-color: var(--secondary-active); }
}
.btn-inverse {
    background: var(--background);
    border-color: var(--background);
    color: var(--text);
    stroke: var(--text);

    /** TO IMPLEMENT **/
    /* &:hover, &:focus-within { background: var(--background-hover); border-color: var(--background-hover); }
    &:active, &.active { background: var(--background-active); border-color: var(--background-active); } */
}


/** BADGES **/
.badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    border-radius: var(--radius);
    font-size: 0.875em;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    background: var(--inverse-text);
    color: var(--text);
}


/** DYMO-STYLE HEADINGS **/
.dymo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    row-gap: 1px;
    column-gap: 0;

    transform: translateX(0.5em);
    transform: translateX(2cqh);

    margin-top: 4px !important;
    margin-bottom: 0 !important;

    & > span {
        line-height: 1.5em;
        display: block;
        background: var(--primary);
        color: var(--primary-text);

        padding: 0em 0.25em;
        margin-left: -0.25em;

        padding: 0cqh 1cqh;
        margin-left: -1cqh;

        position: relative;

        &::before, &::after {
            content: '';
            background: inherit;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            display: block;
            width: 100%;
            height: 100%;
        }
        &::before {
            left: -0.25em;
            left: -1cqh;
        }
        &::after {
            left: 0.25em;
            left: 1cqh;
        }
    }

    &.dymo-secondary {
        & > span {
            background: var(--secondary);
            color: var(--secondary-text);

            &::before, &::after {
                background: inherit;
            }
        }
    }
    &.dymo-default {
        & > span {
            background: var(--surface);
            color: var(--inverse);

            &::before, &::after {
                background: inherit;
            }
        }
    }
    &.dymo-inverse {
        & > span {
            background: var(--inverse);
            color: var(--surface);

            &::before, &::after {
                background: inherit;
            }
        }
    }
}
.text-center .dymo {
    justify-content: center !important;
    align-items: center !important;
    transform: unset !important;
}


/** HEADER **/
header {
    isolation: isolate;
    position: static;
    z-index: 999 !important;
    background: var(--surface);
    padding: calc(var(--header-padding) * 1) 0;

    & a.logo {
        display: block;
        height: var(--logo-height);
        max-height: var(--logo-height);

        & svg {
            width: 100%;
            height: 100%;
            max-height: var(--logo-height);
        }
    }
}
nav#main-menu {
    isolation: isolate !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 998 !important;

    padding: calc(var(--header-padding) * 1) 0;
    background: var(--secondary);
    color: var(--background);
    box-shadow: var(--shadow);
}
@media screen and (min-width: 601px) {
    body.logged-in.admin-bar header,
    body.logged-in.admin-bar nav#main-menu {
        top: 32px !important;
    }
}
@media screen and (max-width: 782px) and (min-width: 601px) {
    body.logged-in.admin-bar header,
    body.logged-in.admin-bar nav#main-menu {
        top: 46px !important;
    }
}
@media screen and (max-width: 782px) {
    html #wpadminbar {
        overflow: clip !important;
    }
}


/** FOOTER **/
footer {
    padding: calc(var(--padding) * 2) 0;

    & p {
        font-size: .85rem;
        color: var(--text-muted);
    }

    li {
        margin-bottom: .25rem;
        font-size: .875rem;
        > a {
            display: block;
        }
        & ul {
            list-style: none;
            margin: 0;
            padding: .25rem 0 0 .75rem;
        }
    }

    & a.logo {
        display: block;
        height: var(--logo-height);
        max-height: var(--logo-height);
        margin-bottom: 1rem;
        & svg {
            width: 100%;
            height: 100%;
            max-height: var(--logo-height);
        }
    }

    & .social-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;

        align-items: start;
        justify-content: start;
        
        list-style-type: none;
        padding: 1rem 0;
        margin: 0;

        & a {
            display: block;
            padding: unset;
            color: var(--text);
            opacity: .75;
            & icon {
                width: 1.1rem;
                height: 1.1rem;
            }
            & icon svg * {
                fill: var(--text);
            }

            &:hover, &:focus-within {
                opacity: 1;
            }
        }
    }
}
.credit {
    font-size: .8em;
    color: oklch(from var(--text-muted) l c h / 0.75);
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
    align-items: center;
    gap: 0.5em;

    & a {
        display: flex;
        flex-direction: row;
        gap: 0.4em;
        text-decoration: none;
        align-items: anchor-center;
        align-items: center;
        opacity: 1;
        color: var(--text-muted) !important;

        & icon {
            width: 1.25em;
            height: 1.25em;
            margin: 0;
            display: block;
            float: none;

            & svg * {
                stroke: var(--text-muted);
                stroke-width: 1.25;
            }
        }
    }
}


/** ICONS & SVGs **/
svg {
    & #primary      { fill: var(--primary); }
    & #secondary    { fill: var(--secondary); }
    & #text         { fill: var(--text); }
}
/** ICONS **/
icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: var(--primary);
    stroke: inherit;

    &.icon-left {
        float: left;
        margin: 0 0.5em 0 0;
    }
    &.icon-right {
        float: right;
        margin: 0 0 0 0.5em;
    }

    & svg {
        width: 100%;
        height: 100%;
        fill: inherit;
        stroke: inherit;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;

        & path {
            stroke-width: 2;
            fill: inherit;
            stroke: inherit;
            stroke-linecap: inherit;
            stroke-linejoin: inherit;
            vector-effect: inherit;
        }
    }

    &.icon-filled {
        & svg {
            & path, & polyline {
                stroke: none;
                fill: var(--primary);
            }
        }
    }
}



/** HAMBURGER MENU **/
[data-role="hamburger-menu"] {
    display: block;
    float: right;
    font-size: calc(0.5 * var(--logo-height));
    width: var(--logo-height);
    height: var(--logo-height);
    padding: calc(0.25 * var(--logo-height));

    stroke: var(--text);
    stroke-width: 2;
    fill: none;
}
[data-role="hamburger-menu"] icon {
    position: relative;
    width: 1em;
    height: 1em;
}
[data-role="hamburger-menu"] icon svg {
    position: absolute;
}
[data-role="hamburger-menu"] icon svg path {
    will-change: d;
    transition: var(--transition-fast);
}
/* Hamburger icon animation fallback for iOS/Safari (no CSS d property support) */
[data-action="open"] icon svg path,
[data-action="close"] icon svg path {
    transform-origin: 50% 50%;
}
[data-action="open"] icon svg path:nth-child(1) { transform: rotate(0deg) translateY(0); opacity: 1; }
[data-action="open"] icon svg path:nth-child(2) { opacity: 1; }
[data-action="open"] icon svg path:nth-child(3) { transform: rotate(0deg) translateY(0); opacity: 1; }

[data-action="open"]:hover icon svg path:nth-child(1) { transform: rotate(0deg) translateY(-5%) scaleX(0.8); }
[data-action="open"]:hover icon svg path:nth-child(2) { opacity: 1; }
[data-action="open"]:hover icon svg path:nth-child(3) { transform: rotate(0deg) translateY(5%) scaleX(0.8); }

[data-action="close"] icon svg path:nth-child(1) { transform: rotate(45deg) translateY(28.5%) scaleX(1.2); }
[data-action="close"] icon svg path:nth-child(2) { opacity: 0; }
[data-action="close"] icon svg path:nth-child(3) { transform: rotate(-45deg) translateY(-28.5%) scaleX(1.2); }

[data-action="close"]:hover icon svg path:nth-child(1) { transform: rotate(45deg) translateY(28.5%) scaleX(1); }
[data-action="close"]:hover icon svg path:nth-child(2) { opacity: 0; }
[data-action="close"]:hover icon svg path:nth-child(3) { transform: rotate(-45deg) translateY(-28.5%) scaleX(1); }

/* Original d property for browsers that support it */
@supports (d: path('M0,0')) {
    [data-action="open"] icon svg path:nth-child(1) { d: path('M4,12 24,12 44,12'); transform: none; }
    [data-action="open"] icon svg path:nth-child(2) { d: path('M4,24 24,24 44,24'); opacity: 1; }
    [data-action="open"] icon svg path:nth-child(3) { d: path('M4,36 24,36 44,36'); transform: none; }

    [data-action="open"]:hover icon svg path:nth-child(1) { d: path('M4,10 24,10 44,10'); transform: none; }
    [data-action="open"]:hover icon svg path:nth-child(2) { d: path('M8,24 24,24 40,24'); opacity: 1; }
    [data-action="open"]:hover icon svg path:nth-child(3) { d: path('M4,38 24,38 44,38'); transform: none; }

    [data-action="close"] icon svg path:nth-child(1) { d: path('M4,4 24,24 44,4'); transform: none; }
    [data-action="close"] icon svg path:nth-child(2) { d: path('M24,24 24,24 24,24'); opacity: 0;}
    [data-action="close"] icon svg path:nth-child(3) { d: path('M4,44 24,24 44,44'); transform: none; }

    [data-action="close"]:hover icon svg path:nth-child(1) { d: path('M8,8 24,24 40,8'); transform: none; }
    [data-action="close"]:hover icon svg path:nth-child(2) { d: path('M24,24 24,24 24,24'); opacity: 0;}
    [data-action="close"]:hover icon svg path:nth-child(3) { d: path('M8,40 24,24 40,40'); transform: none; }
}




/** NAV **/
nav {
    & ul {
        display: flex;
        align-items: start;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        list-style-type: none;
        margin: 0;
        padding: 0;

        gap: 0.5rem 2rem;

        & li {
            padding: 0;
            margin: 0;

            width: max-content;

            & > a,
            & > button {
                padding: unset;
                color: var(--background) !important;
                
                -webkit-appearance: none;
                appearance: none;

                stroke: var(--background-alt);
                stroke-width: 3;
                fill: none;
            }
        }
        & li.dropdown {
            position: relative;
        }
        & .dropdown-toggle {
            display: flex !important;
            font-style: normal !important;
            
            align-items: center;
            justify-items: center;

            & .caret {
                margin-top: 4px;

                margin-left: 0.35rem !important;

                width: .65rem;
                height: .65rem;

                transition: var(--transition-fast);
                transform: rotateX(0deg);
            }
            &.active {
                & .caret {
                    transform: rotateX(180deg);
                }
            }
        }
        
    }
    & ul.dropdown-menu {
        visibility: hidden;
        display: none;
        position: absolute;
        top: 100%;
        padding: var(--header-padding);
        background: var(--primary);
        border-radius: var(--radius);
        box-shadow: var(--shadow-dk);

        transform: translateY(1rem);

        &.open {
            visibility: visible;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            max-height: calc(100vh - var(--logo-height) * 2 - var(--header-padding) * 4);

            overflow: auto;

            &::before {
                content: '';
                position: absolute;
                top: -0.5rem;
                left: 1rem;
                width: 0;
                height: 0;
                border-left: 0.5rem solid transparent;
                border-right: 0.5rem solid transparent;
                border-bottom: 0.5rem solid var(--surface);
            }
        }

        
    }
}
@media(max-width: 991px) {
    nav#main-menu {
        padding: calc(var(--header-padding) * 0) 0;
    }
    nav ul li.btn {
        display: block;
        width: 100%;
        & > a {
            display: block;
            width: 100%;
            text-align: center;
        }
    }
    nav#hamburger-menu {
        margin-bottom: calc(var(--header-padding) * -1);
        padding: calc(var(--header-padding) * 2) 0;

        max-height: calc(100svh - var(--logo-height) * 2);
        overflow: auto;

        &:not(.open) {
            display: none;
            padding: calc(var(--header-padding) * 0) 0;

        }
        &.open {
            display: block;
            padding: calc(var(--header-padding) * 2) 0;

            & > ul {
                flex-direction: column !important;
            }

        }
        & ul {
            
            & li {
                width: 100%;
            }
        }
    }
    nav {
        & ul {
            flex-direction: column;
            gap: 1rem;
            & li {
                &:not(.btn) > a,
                &:not(.btn) > button {
                    padding: 0;
                }
            }
        }
        & ul.dropdown-menu {
            visibility: hidden;
            display: none;
            position: static;
            top: unset;
            padding: 0 0 var(--header-padding) var(--header-padding);
            border-radius: unset;
            box-shadow: unset;

            &.open {
                visibility: visible;
                max-height: unset !important;

                &::before {
                    content: none;
                }
            }
        }
    }
}

/** SOCIAL MENU NAV **/
nav#social-menu {
    position: relative;
    z-index: 997;

    height: calc(var(--padding) * 1);

    padding: calc( 0.5 * var(--header-padding)) 0;

    width: 100%;

    background: var(--text);
    color: var(--background);

    & ul {
        align-items: end;
        justify-content: end;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    & a {
        display: block;
        padding: unset;
        color: var(--secondary-text);
        text-decoration-color: var(--background);
        & icon {
            width: 1.1rem;
            height: 1.1rem;
        }
        & icon svg * {
            fill: var(--secondary-text);
        }
    }
}
@media(max-width: 991px) {
    nav#social-menu {
        & ul {
            flex-direction: row;
            gap: 1rem;
        }
    }   
}


/** PAGINATION **/
ul.pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    & > .prev {
        align-self: flex-start;
    }
    & > .next {
        align-self: flex-end;
    }
    & > li {
        margin: 0 !important;

        & > ul.page-numbers {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;

            & > li {
                margin: 0 !important;
            }
        }
    }
    
}



/** SECTIONS **/
section {
    position: relative;
    padding: calc(var(--padding) * 2) 0;
    background: inherit;
    
    --social-nav-height: calc(var(--padding) * 1.5);
    --header-height: calc(var(--header-padding) * 2 + var(--logo-height));
    --main-nav-height: calc(var(--header-height) + var(--social-nav-height));
    
    & .waypoint {
        position: relative;
        top: calc(-1 * var(--header-height));
    }

    &.hero {
        isolation: isolate;

        z-index: 0;
        padding: calc(var(--padding) * 3) 0;
        height: calc(100svh - var(--main-nav-height)) !important;

        &.h-75 {
            padding: calc(var(--padding) * 2) 0;
            height: calc(75svh - var(--main-nav-height)) !important;
        }
        &.h-50 {
            padding: calc(var(--padding) * 2) 0;
            height: calc(50svh - var(--main-nav-height)) !important;
        }
    }

    &:nth-of-type(even) {
        background: var(--background);
    }
    &:nth-of-type(odd) {
        background: var(--background-alt);
    }

    &.call-to-action:nth-of-type(even) {
        background: var(--primary);
        color: var(--primary-text);
    }
    &.call-to-action:nth-of-type(odd) {
        background: var(--secondary);
        color: var(--secondary-text);
    }

    &#key-topics {
        padding-top: 0 !important;
        background: none;
        & > .container {
            margin-top: calc(-1 * var(--padding));
        }
    }

    &.split-content {
        padding: 0 !important;
        & > .container > .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        & > .container > .row > [class^="col-"] {
            padding: calc(var(--padding) * 2) 0;
            align-content: center;
            justify-content: center;
        }
        & .wp-block-image img {
            width: 100%;
            height: 100%;
        }
    }
}
@media(max-width: 991px) {
    section.split-content {
        padding: 0 !important;
        & > .container > .row {
            margin-left: calc(var(--padding) * -0.5) !important;
            margin-right: calc(var(--padding) * -0.5) !important;
            width: calc(100% + (var(--padding) * 1));
        }
        & > .container > .row > [class^="col-"] {
            height: 100% !important;
            min-height: max-content !important;
            padding: calc(var(--padding) * 2) 0;
            padding-left: calc(var(--padding) * 0.5) !important;
            padding-right: calc(var(--padding) * 0.5) !important;
        }
    }
}

figure {
    & > figcaption {
        pointer-events: all !important;
        z-index: 999;
        font-size: 0.8rem;
        position: absolute;
        bottom: 0;
        padding: 0.25rem 0.5rem;
        color: var(--inverse-text);
        background: transparent;
        opacity: 0.5;
        cursor: help !important;

        &:hover, &:focus-within {
            opacity: 0.75;
        }
    }
}


.background {
    isolation: isolate;
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    background: black;

    top: 0; right: 0; bottom: 0; left: 0;

    transition: var(--transition-background);

    & * {
        margin: unset;
    }
    & figure {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
    }
    & img, & video {
        object-fit: cover;
        object-position: center 40%;
        width: 100%;
        height: 100%;
        opacity: .9;
    }
}



/** CARDS **/
a.card-link {
    text-decoration: none !important;
    color: var(--text);
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    margin-bottom: 2rem;

    & .btn-link {
        color: var(--primary);
    }

    & .card-header .background {
        filter: brightness(0.7);
    }

    &:hover, &:focus-within {
        color: var(--text);

        & .card-header .background {
            filter: brightness(0.85);
            transform: scale(1.1);
        }

        & .dymo > span {
            background: var(--primary-hover);
            color: var(--primary-text);
        }
        & .dymo-secondary > span {
            background: var(--secondary-hover);
            color: var(--secondary-text);
        }

        & .btn-link {
            color: var(--primary-hover);
            text-decoration: underline;
            text-decoration-color: var(--primary-hover);
            text-underline-offset: 0.3em;
            text-decoration-thickness: 0.1em;
        }
    }
    &:active, &.active {
        color: var(--text);

        & .dymo > span {
            background: var(--primary-active);
            color: var(--primary-text);
        }
        & .dymo-secondary > span {
            background: var(--secondary-active);
            color: var(--secondary-text);
        }

        & .btn-link {
            color: var(--primary-active);
            text-decoration: underline;
            text-decoration-color: var(--primary-active);
            text-underline-offset: 0.25em;
            text-decoration-thickness: 0.2em;
        }
    }
}

.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: clip;
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    margin-bottom: 2rem;

    & .card-header {
        flex: 0;
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: flex-end;
        
        width: 100%;
        height: 75% !important;
        max-height: 75% !important;

        position: relative;
        overflow: clip;

        padding: var(--padding);

        aspect-ratio: 4 / 3;
        @supports not (aspect-ratio: 4 / 3) {
            &::before {
                float: left;
                padding-top: 75%;
                content: "";
            }
        }

        & .background {
            z-index: 0 !important;
            position: absolute;
            & img, & video {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
        > div:not(.background) {
            position: relative;
            z-index: 1 !important;
        }
        & > img {
            display: block;
            width: calc(100% - var(--padding) * 2);
            height: calc(100% - var(--padding) * 2);
            object-fit: contain;
            position: absolute;
        }
    }
    & .card-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0 !important;
        & > .card-body {
            flex: 0 0 50% !important;
            padding: var(--padding);

            & .row {
                display: block !important;
            }
        }
        & > .card-footer {
            flex: 0;
            padding: 0 var(--padding) var(--padding) var(--padding);
        }
    }
}
@media(max-width: 991px) {
    .col, .col-12 {
        a.card-link, .card {
            height: auto !important;
        }
        & > a.card-link {
            margin-bottom: 2rem;
            & > .card,
            & > .d-flex {
                margin-bottom: 0 !important;
            }
        }
        &:last-child {
            & > a.card-link {
                margin-bottom: 0;
                & > .card,
                & > .d-flex {
                    margin-bottom: 0 !important;
                }
            }
        }
    }
}


.card.card-magazine {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    display: block;
    margin: 0;

    & .front-cover {
        display: block;
        position: relative;
        /* isolation: isolate; */
        aspect-ratio: 210 / 297;
        width: 100%;
        height: auto;
        border-radius: 3px;
        box-shadow: var(--shadow);
        background: var(--surface);

        & > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
            border-radius: inherit;
        }

        &::before, &::after {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            display: block;
            width: 100%;
            height: 100%;
            aspect-ratio: 210 / 297;
            border-radius: 3px;
            background: var(--surface);
            box-shadow: var(--shadow);

            transition: var(--transition-fast);
        }
        &::before   { rotate: -2deg; }
        &::after    { rotate: 2deg; }
    }
    & .card-content {
        display: flex;
        flex-direction: column;
        gap: 2rem !important;
        align-content: center;
        justify-content: center;
        padding-bottom: 1rem !important;
    }
    & .card-content,
    & .card-body,
    & .card-footer {
        padding: 0;
    }
}
a.card-link {
    &:hover, &:focus-within {
        & .card.card-magazine .front-cover::before,
        & .card.card-magazine .front-cover::after {
            background: var(--surface-hover);
        }
        & .card.card-magazine .front-cover::before   { rotate: -6deg; }
        & .card.card-magazine .front-cover::after    { rotate: 6deg; }
    }
}
.card-link-disabled {
    position: relative;
    cursor: not-allowed;
    & .front-cover-container {
        position: relative;
        transition: var(--transition-fast);
        &::before {
            content: 'COMING SOON';
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            rotate: -10deg;
            z-index: 9;
            display: block;
            width: 100%;
            text-align: center;
            background: var(--primary);
            pointer-events: none;
            line-height: 0;
            padding: 0.5rem 1rem;
            color: var(--primary-text);
            font-family: var(--header-font-family);
            font-variation-settings: var(--header-font-weight), var(--header-font-slant);
            line-height: var(--header-line-height);
            transition: var(--transition-fast);
            border-radius: 5px;
        }
    }
    &:hover, &:focus-within {
        & .front-cover-container {
            &::before {
                opacity: 1;
                scale: 1.1;
                rotate: -15deg;
            }
        }
    }
}



/** WordPress COLUMNS BLOCK **/
.wp-block-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap !important;
    gap: var(--padding);
    margin-bottom: 2rem;

    & > .wp-block-column {
        flex: 1;
        max-width: 50%;
        width: 50%;
        align-self: center;
        justify-content: center;

        &:only-child {
            flex: 1;
            max-width: 100%;
            width: 100%;
        }

        & > :only-child,
        & > :last-child {
            margin-bottom: 0;
        }

        & .wp-block-image {
            position: relative;
        }
        & img {
            aspect-ratio: 1 / 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
@media(max-width: 991px) {
    .wp-block-columns {
        flex-direction: column;
        gap: var(--padding);
    }
    .wp-block-columns > .wp-block-column {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }
}
section.split-content {
    isolation: isolate;
    position: relative;
    overflow: clip;

    & > .container > .row > [class^="col-"] {
        aspect-ratio: 1 / 1;
        @supports not (aspect-ratio: 1 / 1) {
            &::before {
                float: left;
                padding-top: 100%;
                content: "";
            }
        }
        width: 50%;
    }

    & > .background {
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0%;
        bottom: unset;

        transform: translateY(-50%);
        z-index: 0;
        &.background-left {
            right: unset;
            left: 0;

            transform: translateX(calc(var(--padding) * -2));

            & figcaption {
                bottom: var(--padding);
                left: calc(var(--padding) * 3);
                text-align: left;
                transform-origin: bottom left;
                transform: rotate(-90deg) translateY(100%);
                max-width: 40ch;
            }
        }
        &.background-right {
            left: unset;
            right: 0;

            transform: translateX(calc(var(--padding) * 2));

            & figcaption {
                bottom: var(--padding);
                right: calc(var(--padding) * 3);
                text-align: right;
                transform-origin: bottom right;
                transform: rotate(90deg) translateY(100%);
                max-width: 40ch;
            }
        }
    }
}
@media(max-width: 991px) {
    section.split-content {
        & .background {
            position: relative;
            aspect-ratio: 2 / 1;
            width: 100%;
            height: 100%;
            @supports not (aspect-ratio: 4 / 3) {
                &::before {
                    float: left;
                    padding-top: 50%;
                    content: "";
                }
            }
        }
        & > .container > .row {
            width: 100%;
            display: block !important;
        }
        & > .container > .row > [class^='col-']:empty,
        & > .container > .row > [class^='col-'].empty {
            display: none !important;
            padding: 0 !important;
            /** Hide all empty columns **/
        }
        & > .container > .row > [class^='col-']:not(:empty),
        & > .container > .row > [class^='col-']:not(.empty) {
            order: 1;
        }
        & > .container > .row > [class^='col-'] {
            aspect-ratio: unset !important;
            width: 100%;
            height: 100%;
            flex: 0 1 0%;
        }
        & > .background {
            width: 100%;
            height: 50%;
            top: 0; right: 0; bottom: unset; left: 0;

            transform: none !important;
            
            &.background-left,
            &.background-right {
                transform: none !important;

                & figcaption {
                    bottom: calc(var(--padding));
                    left: calc(var(--padding));
                    right: unset;
                    text-align: center;
                    transform-origin: bottom center;
                    transform: none !important;
                    max-width: 100%;
                }
            }
            
        }
    }
}

/** WordPress TABLES **/
figure.wp-block-table {
    margin-bottom: 1rem;
    & table {
        width: 100%;
        border-collapse: collapse;
        & th,
        & td {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
        }
    }
}

/** WordPress PULL-QUOTE BLOCKS **/
figure.wp-block-pullquote {
    margin-bottom: 1rem;
    & blockquote {
        padding: 1rem 0;
        margin: 0;
        & p {
            font-size: 1.75rem;
            font-family: var(--header-font-family);
            line-height: var(--header-line-height);
            font-variation-settings: var(--bold-font-weight), var(--ital-font-slant);
            margin: 0;
            padding: 0;
            color: var(--primary-active);
        }

        & cite {
            display: block;
            font-size: 1rem;
            color: var(--text-muted);
            font-style: normal;
            margin-top: 0.5rem;

            &::before {
                content: '— ';
                font-variation-settings: var(--base-font-weight), var(--ital-font-slant);
            }
        }
    }
}

/** WordPress BUTTONS **/
.wp-block-buttons {
    margin-top: 2rem;
}
.wp-block-button__link,
.wp-block-buttons .wp-block-button .wp-block-button__link {
    display: inline-block;
    border: 2px solid var(--primary);
    padding: calc(var(--input-padding) * 0.5) calc(var(--input-padding) * 1.5);
    border-radius: 99rem;
    background: var(--primary);
    color: var(--primary-text);
    font-family: var(--header-font-family);
    font-variation-settings: var(--header-font-weight), var(--header-font-slant);
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: var(--shadow);
    transition: var(--transition-fast);
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    stroke: var(--primary-text);

    &:hover, &:focus-within {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: var(--primary-text);
    }
    &:active, &.active {
        background: var(--primary-active);
        border-color: var(--primary-active);
        color: var(--primary-text);
    }
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background: var(--inverse);
    border-color: var(--inverse);
    color: var(--inverse-text);
    stroke: var(--inverse-text);

    &:hover, &:focus-within {
        background: var(--inverse-hover);
        border-color: var(--inverse-hover);
        color: var(--inverse-text);
    }
    &:active, &.active {
        background: var(--inverse-active);
        border-color: var(--inverse-active);
        color: var(--inverse-text);
    }
}




/** ADVOCATE - CIRCLE MASK **/
.advocate {
    --border-width: 1rem;

    position: relative;
    display: block;
    aspect-ratio: 1 / 1;

    @supports not (aspect-ratio: 1 / 1) {
        &::before {
            float: left;
            padding-top: 100%;
            content: "";
        }
    }

    width: 100% !important;
    background: var(--primary-hover);
    border-radius: 99rem;

    margin-bottom: 0;

    & > svg {
        width: 100%;
        height: 100%;

        & .top-text {
            font-weight: bold;
            font-family: var(--header-font-family);
            font-variation-settings: var(--header-font-weight), var(--header-font-slant);
            fill: var(--inverse-text);
        }
        & .bottom-text {
            font-weight: normal;
            font-family: var(--header-font-family);
            font-variation-settings: var(--body-font-weight), var(--body-font-slant);
            fill: var(--inverse-text);
        }
    }

    & > .mask {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% - var(--border-width) * 2);
        height: calc(100% - var(--border-width) * 2);

        transform: translateX(-50%) translateY(-50%);

        border-radius: inherit;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
            border: 4px solid var(--surface);
        }
    }
    & .badge-logo {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: auto;
        height: calc(var(--border-width) * 3);

        transform: translateX(-50%) translateY(calc(1 * var(--border-width)));
        z-index: 1;

        svg {
            vector-effect: non-scaling-stroke;
        }
        #primary, #secondary {
            stroke-width: 10;
            stroke-linejoin: round;
            paint-order: stroke fill;
            stroke-miterlimit: 2;
        }
        & #primary {
            stroke: oklch(from var(--primary-active) l c h / 0.75);
            fill: var(--primary);
        }
        & #secondary {
            stroke: oklch(from var(--secondary-active) l c h / 0.75);
            fill: var(--secondary);
        }
    }
}
a {
    &:hover, &:focus-within {
        & .advocate {
            background: var(--primary-active);
        }
    }
    &:active, &.active {
        & .advocate {
            background: var(--primary-active);
        }
    }
}


/** SIDEBAR **/
aside {
    /** FUTURE UPDATE TO IMPROVE THIS **/

    ul.post-categories,
    ul.post-tags {
        list-style: none;
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;

        & li {
            margin: 0;
            align-items: center;
            
            & span.badge {
                width: 1.5rem;
                height: 1.5rem;
                line-height: 1 !important;
                padding: 0.25rem 0 !important;
                text-align: center;
                vertical-align: middle;
                background: oklch(from var(--primary) l c h / 0.25);
                color: var(--primary-text);
                border-radius: 99em;
                font-size: 0.875em !important;
            }

            & a {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                gap: 0.5rem;

                &:hover, &:focus-within {
                    text-decoration: none !important;
                    & span.badge {
                        background-color: oklch(from var(--primary-hover) l c h / 0.5);

                    }
                }
                &:active, &.active {
                    text-decoration: none !important;
                    & span.badge {
                        background-color: oklch(from var(--primary-active) l c h / 0.75);

                    }
                }
            }
        }
    }
}
@media(max-width: 991px) {
    aside {
        margin-top: calc(var(--padding) * 2);
        padding-top: calc(var(--padding) * 2);
        border-top: 1px solid var(--border);
    }
}


/** ALERT **/
.alert {
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);

    border: 2px solid var(--background);
}
section:nth-of-type(even) .alert {
    border-color: var(--background-alt) !important;
}


/** INPUTS & FORMS **/
form.form {
    width: 100%;
    
    & .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    & label {
        color: var(--inverse-text);
    }


    &.form-inline {
        padding: 0;
        background: transparent;
        box-shadow: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 0.5rem;

        & label {
            font-size: 0.875rem;
            color: var(--text);
        }
    }

    .row + .row {
        margin-top: calc(var(--padding) / 1.5);
    }

    &.form-card {
        padding: var(--padding);
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);

        & label {
            color: var(--text-muted) !important;
        }
    }
}

textarea {
    min-height: 3lh;
    min-height: calc(3lh + var(--input-padding)) !important;
    resize: vertical !important;
    overflow-y: visible !important;
    /* Prevent resizing below min-height in most browsers */
    height: auto;
    /* For browsers that ignore min-height, use JS or set rows="3" in HTML */
}
.form-control {
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;

    font-size: 1rem;
    line-height: var(--base-line-height);
    font-weight: normal;

    padding: calc(var(--input-padding) * 0.5) calc(var(--input-padding) * 1);
    border-radius: var(--radius);

    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);

    &.input-sm { font-size: 0.8em;}
    &.input-lg { font-size: 1.2em;}
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text) !important;
    transition: background-color 5000s ease-in-out 0s;
}
input[readonly] {
    color: currentColor;
    cursor: text;
}
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L8 8L15 1' stroke='%2319172b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: .75em auto;
    padding-right: 2.5em;
    cursor: pointer;
}
input::placeholder {
    color: oklch(from var(--text) l c h / 0.25);
    font-style: normal;
    opacity: 1; /* Ensures consistent visibility across browsers */
}


/** FORM GROUP > HAS-ERROR **/
.form-group.has-error {
    & label {
        color: var(--text);
    }
    & .form-control {
        border-color: var(--text);
        border-style: dashed !important;
        background-color: oklch(from var(--text) l c h / 0.15);
    }
    & .help-block {
        font-size: .875em;
        color: var(--text);
        font-weight: normal;
        font-style: italic;
        font-variation-settings: var(--base-font-weight), var(--ital-font-slant);
    }
}



/** FLIPBOOK **/
.flipbook-container {
    position: relative;
    & .flipbook-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;

        padding: 0.5rem;
        margin: 0 !important;

        & > icon {
            margin: 0 !important;
        }
        &.prev {
            left: var(--padding);
        }

        &.next {
            right: var(--padding);
        }
    }
}
@media(max-width: 991px) {
    .flipbook-container {
        & .flipbook-nav {
            &.prev {
                left: calc(0.5 * var(--padding));
            }
            &.next {
                right: calc(0.5 * var(--padding));
            }
        }
    }
}
#flipbook {
    position: relative;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0;
    aspect-ratio: 892 / 1262;

    @supports not (aspect-ratio: 892 / 1262) {
        &::before {
            float: left;
            padding-top: 141.5%;
            content: "";
        }
    }
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow);

    & .page {
        flex: 0 0 auto;
        aspect-ratio: 892 / 1262;

        @supports not (aspect-ratio: 892 / 1262) {
            &::before {
                float: left;
                padding-top: 141.5%;
                content: "";
            }
        }

        display: inline-block;
        scroll-snap-align: start;
        display: flex;
        align-content: center;
        justify-content: center;
    }

    & .page canvas {
        background: #FFFFFF;
        width: 100%;
        height: 100%;
    }
}

/* Show 2 pages side by side on large screens */
@media (min-width: 992px) {
    #flipbook {
        aspect-ratio: calc(892 * 2) / 1262;

        @supports not (aspect-ratio: calc(892 * 2) / 1262) {
            &::before {
                float: left;
                padding-top: 71%;
                content: "";
            }
        }

        & .page {
            width: 50%;
            max-width: 50%;
        }
    }
}

/* Show 1 page at a time on small screens */
@media (max-width: 991px) {
    #flipbook {
        aspect-ratio: 892 / 1262;

        @supports not (aspect-ratio: 892 / 1262) {
            &::before {
                float: left;
                padding-top: 141.5%;
                content: "";
            }
        }

        & .page {
            width: 100%;
            max-width: 100%;
        }
    }
}

/** LOGO LOADER ANIMATION **/
.loader {
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    background: oklch(from var(--surface) l c h / 0.9);
    

    z-index: 9999;

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

    #logo-reveal-animation {
        width: 50%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #p1-45deg { stroke: var(--primary); }
    #p2-45deg { stroke: var(--secondary); }

    #logo-reveal-animation #p1-45deg,
    #logo-reveal-animation #p2-45deg {
        stroke-dashoffset: 830;
        stroke-dasharray: 830;
    }
    #logo-reveal-animation #p1-45deg {
        animation: pride-parenting-loader var(--animation-duration) ease-in-out infinite;
    }
    #logo-reveal-animation #p2-45deg {
        animation: pride-parenting-loader var(--animation-duration) ease-in-out infinite;
        animation-delay: 50ms;
    }
}

@keyframes pride-parenting-loader {
    0% {
        stroke-width: 0px;
        stroke-dashoffset: 830;
    }
    10% {
        stroke-width: 64px;
    }
    40% {
        stroke-width: 64px;
        stroke-dashoffset: 0;
    }
    60% {
        stroke-width: 64px;
        stroke-dashoffset: 0;
    }
    90% {
        stroke-width: 64px;
    }
    100% {
        stroke-width: 0px;
        stroke-dashoffset: 830;
    }
}