/* ==========================================================================
   Project: GijinkakunTheme
   File: public.css
   Purpose: Normalize + base + layout + components + utilities + animations
   Author: Christopher Satterthwaite  |  Updated: 2025-10-01  |  Version: 1.0.0
========================================================================== */

/* TOC
[00] Root
[01] Normalize
[02] Base
    [02.1] HTML
    [02.2] Body
[03] Layout
    [03.1] Site Wrapper
    [03.2] Site Header
    [03.3] Site Main
    [03.4] Site Footer
[04] Components
    [04.1] Progress Bar
    [04.2] Skip Link
    [04.3] Navigation
        [04.3.a] Mobile Navigation Modifier
        [04.3.b] Primary Navigation Modifier
        [04.3.c] Primary Navigation Modifier
    [04.4] Logo
        [04.4.a] Logo Large Modifier
        [04.4.b] Logo Small Modifier
    [04.5] Entry
    [04.6] Fancy Heading
    [04.7] Archive List 
    [04.8] Post
        [04.8.b] Post Media 
        [04.8.c] Post Title
        [04.8.c] Post Title 
        [04.8.d] Post Meta 
        [04.8.e] Post Author
        [04.8.f] Post Date
        [04.8.g] Read time 
        [04.8.h] Excerpt
        [04.8.i] Read More
        [04.8.j] Post Teaser Modifier
        [04.8.k] Post Single Modifier
    [04.9] Social Media Bar
    [04.10] Share Bar
    [04.11] Pagination
    [04.12] Post Navigation
    [04.13] Tagline
    [04.14] Legal
    [04.15] No Content
[05] Utilities
    [05.1] Screen Reader
[06] Animations
    [06.1] Remove Animations
    [06.2] Slide in Left Animation
    [06.3] Slide in Right Animation
    [06.4] Progress Animation
    [06.5] Navigation Animation
*/

/* ================= [00] Root ================= */
:root {
    /* —— Preset Fonts —— */
    --font-primary: var(--wp--preset--font-family--work-sans, 'Work Sans', sans-serif);
    --font-secondary: var(--wp--preset--font-family--francois-one, 'Francois One', sans-serif);

    /* —— Global —— */
    --global-background-color: var(--wp--preset--color--color-06);
    --global-width: var(--wp--style--global--content-size);
    --global-padding: 0 clamp(2rem, 4vw, 4rem) clamp(2rem, 13vw, 3rem) clamp(2rem, 4vw, 4rem);
    --global-accessability-color: #136ef8;
    --global-chevron-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m8 10l4 4l4-4'/%3E%3C/svg%3E");

    /* —— Progress Bar —— */
    --progress-bar-color: var(--wp--preset--color--color-01);

    /* —— Header —— */
    --header-width: var(--global-width);
    --header-padding: clamp(2rem, 15vw, 6rem) clamp(2rem, 4vw, 4rem) 0 clamp(2rem, 4vw, 4rem);

    /* —— Navigation —— */
    --navigation-font-color: var(--wp--preset--color--color-07);
    --navigation-font-hover-color: var(--wp--preset--color--color-01);
    --navigation-font-focus-color: var(--global-accessability-color);
    --sub-navigation-background-color: var(--wp--preset--color--color-05);
    --sub-navigation-font-color: var(--wp--preset--color--color-07);
    --sub-navigation-font-hover-color: var(--wp--preset--color--color-01);
    --sub-navigation-font-focus-color: var(--global-accessability-color);
    --mobile-nav-background-color: var(--wp--preset--color--color-05);

    /* —— Main —— */
    --main-width: var(--global-width);
    --main-padding: var(--gijinkakun-content-padding, var(--global-padding));

    /* —— Footer —— */
    --footer-width: var(--global-width);
    --footer-padding: var(--gijinkakun-content-padding, var(--global-padding));
    --tagline-font-color: var(--wp--preset--color--color-07);
    --copyright-link-color: var(--wp--preset--color--color-07);
    --copyright-link-hover-color: var(--wp--preset--color--color-01);
    --copyright-link-focus-color: var(--global-accessability-color);

    /* —— Posts —— */
    --post-background-color: var(--wp--preset--color--color-05);
    --post-title-color: var(--wp--preset--color--color-07);
    --post-meta-color: var(--wp--preset--color--color-07);
    --author-font-color: var(--wp--preset--color--color-07);
    --author-font-hover-color: var(--wp--preset--color--color-01);
    --author-font-focus-color: var(--global-accessability-color);
    --pagination-link-color: var(--wp--preset--color--color-07);
    --pagination-link-background-color: var(--wp--preset--color--color-06);
    --pagination-link-hover-color: var(--wp--preset--color--color-06);
    --pagination-link-hover-background-color: var(--wp--preset--color--color-07);
    --pagination-link-active-color: var(--wp--preset--color--color-06);
    --pagination-link-active-background-color: var(--wp--preset--color--color-07);
    --pagination-link-focus-color: var(--global-accessability-color);
    --pagination-link-disabled-color: var(--wp--preset--color--color-04);

    /* —— Social Media—— */
    --social-media-link-color: var(--wp--preset--color--color-07);
    --social-media-link-hover-color: var(--wp--preset--color--color-01);
    --social-media-link-focus-color: var(--global-accessability-color);
}

/* ================= [01] Normalize ================= */
*,
::before,
::after {
    box-sizing: border-box;
}

html {
    font-family:
        system-ui,
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji';
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
}

body {
    margin: 0;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        'Liberation Mono',
        Menlo,
        monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    border-color: currentcolor;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

legend {
    padding: 0;
}

progress {
    vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[type='search'] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

/* ================= [02] HTML / Body ================= */
/* -- [02.1] HTML -- */
html {
    font-size: clamp(16px, 1rem + 0.5vw, 18px);
    line-height: 27px;
}

/* -- [02.2] Body -- */
body {
    background: radial-gradient(circle,rgba(68, 58, 74, 1) 0%, rgba(16, 12, 20, 1) 88%);
}

/* ================= [03] Layout ================= */
/* -- [03.1] Site Wrapper -- */
.site-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* -- [03.2] Site Header -- */
.site-header {
    container-type: inline-size; 
    container-name: header;
    z-index: 300;

    .site-header__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: var(--header-width);
        margin: 0 auto;
        padding: var(--header-padding);
    }
}

/* -- [03.3] Site Main -- */
.site-main {
    container-type: inline-size; 
    container-name: main;
    z-index: 200;

    .site-main__inner {
        max-width: var(--main-width);
        margin: 0 auto 2rem auto;
        padding: var(--main-padding);
    }

    &:after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 54px;
        background-image: url('https://www.ekmarketing.ca/wp-content/uploads/2025/11/rose.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 auto;
    }
}

/* -- [03.4] Site Footer -- */
.site-footer {
    container-type: inline-size; 
    container-name: footer;
    z-index: 200;

    .site-footer__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: var(--footer-width);
        margin: 0 auto;
        padding: var(--footer-padding);
    }
}

/* ================= [04] Components ================= */
/* -- [04.1] Progress Bar -- */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    height: 5px;
    background-color: var(--progress-bar-color);
    animation: progress linear;
    animation-timeline: scroll();
    animation-duration: 1ms;
}

/* -- [04.2] Skip Link -- */
.site-skip {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999;

    .site-skip__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-skip__link {
        position: fixed;
        top: 50px;
        left: 20px;
        z-index: 999999;
        opacity: 0;
        min-width: 200px;
        padding: 1rem 1.5rem;
        background-color: #ffffff;
        color: #222222;
        border: 3px solid #136ef8;
        border-radius: 50px;
        outline: #136ef8 solid 0px;
        direction: ltr;
        font-size: 1rem;
        text-align: center;
        text-decoration: none;
        transition: top 0.22s ease 0s;
        pointer-events: none;

        &:focus {
            top: 20px;
            opacity: 1;
            pointer-events: auto;
        }
    }
}

/* -- [04.3] Navigation -- */
.site-navigation__wrapper {
    &.site-navigation__wrapper--mobile {
        @container header (min-width: 600px) {
            display: none;
        }

        .site-navigation__inner {
            display: flex;
            justify-content: flex-end;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem;
            background-color: var(--global-background-color);
            z-index: 500;
        }
    }

    &.site-navigation__wrapper--primary {
        position: fixed;
        top: 20px;
        padding: 0 1rem;
        animation: navigation;
        animation-fill-mode: both;
        animation-direction: normal;
        animation-timeline: scroll();
        animation-duration: 1ms;
        animation-range: 0px 100vh;
        display: none;
        z-index: 500;

        @container header (min-width: 600px) {
            display: block;
        }
    }

    .site-navigation {
        z-index: 400;

        .site-navigation__list {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            margin: 0;
            padding: 0;
            list-style: none;

            @container (min-width: 600px) {
                & {
                    flex-direction: row;
                    gap: 0.3rem;
                }
            }

            :where(.menu-item) {
                position: relative;
                margin: 0;
                padding: 0;

                a {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                    padding: 0.9rem 0.9rem;
                    background-color: transparent;
                    color: var(--navigation-font-color);
                    border-radius: 0.5rem;
                    font-family: var(--font-primary);
                    font-optical-sizing: auto;
                    font-size: 1rem;
                    font-weight: 700;
                    line-height: 1.2;
                    letter-spacing: 2px;
                    text-decoration: none;
                    transition: color 100ms ease-out, background-color 100ms ease-out;

                    @container (min-width: 600px) {
                        & {
                            justify-content: flex-start;
                        }
                    }

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

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

                    &[aria-expanded="true"]+.sub-menu {
                        visibility: visible;
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                &.menu-item-has-children {
                    >a::after {
                        content: "";
                        inline-size: 16px;
                        block-size: 16px;
                        margin-left: .2rem;
                        background-color: currentColor;
                        -webkit-mask-image: var(--global-chevron-svg);
                        mask-image: var(--global-chevron-svg);
                        -webkit-mask-repeat: no-repeat;
                        mask-repeat: no-repeat;
                        -webkit-mask-size: 100% 100%;
                        mask-size: 100% 100%;
                        text-align: center;
                        transform-origin: center;
                        transform: rotate(0deg);
                        transition: transform 100ms ease;
                    }

                    >a[aria-expanded="true"]::after {
                        transform: rotate(180deg);
                    }
                }

                &.current-menu-item a {
                    color: var(--navigation-font-hover-color);
                }

                &.current_page_parent a {
                    color: var(--navigation-font-hover-color);
                }

                .sub-menu {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    z-index: 900;
                    visibility: hidden;
                    opacity: 0;
                    width: 220px;
                    margin: 0;
                    padding: 0;
                    background-color: var(--sub-navigation-background-color);
                    border-bottom-right-radius: 0.3rem;
                    border-bottom-left-radius: 0.3rem;
                    list-style: none;
                    transform: translateY(-10px);
                    box-shadow: rgba(50, 50, 93, 0.25) 0 8px 15px -2px, rgba(0, 0, 0, 0.3) 0 5px 8px -2px;
                    transition: opacity 0.3s ease, transform 0.3s ease;

                    :where(.menu-item) {
                        position: relative;
                        margin: 0;
                        padding: 0;

                        a {
                            position: relative;
                            display: flex;
                            align-items: center;
                            margin: 0;
                            padding: 0.5rem 0.8rem;
                            background-color: transparent;
                            color: var(--navigation-font-color);
                            font-family: var(--font-primary);
                            font-optical-sizing: auto;
                            font-size: 0.8rem;
                            font-weight: 700;
                            line-height: 1.2;
                            letter-spacing: 2px;
                            text-decoration: none;
                            transition: color 100ms ease-out, background-color 100ms ease-out;

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

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

                            &[aria-expanded="true"]+.sub-menu {
                                visibility: visible;
                                opacity: 1;
                                transform: translateY(0);
                            }
                        }

                        &.menu-item-has-children {
                            >a::after {
                                position: absolute;
                                top: auto;
                                right: 0;
                                transform: rotate(-90deg);
                            }

                            >a[aria-expanded="true"]::after {
                                transform: rotate(180deg);
                            }
                        }
                    }

                    .sub-menu {
                        top: 0;
                        left: 100%;
                        opacity: 1;
                        visibility: hidden;
                    }
                }
            }
        }

        /* -- [04.3.a] Mobile Navigation Modifier -- */
        &.site-navigation--mobile {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--mobile-nav-background-color);
            padding: 1rem;
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform: translateY(-100em);
            opacity: 0;
            pointer-events: none;
            z-index: 200;

            &.is-active {
                transform: translateY(72px);
                opacity: 1;
                pointer-events: auto;
            }
        }

        /* -- [04.3.b] Primary Navigation Modifier -- */
        &.site-navigation--primary {
            .site-navigation__list {
                :where(.menu-item) a {
                    font-size: clamp(0.9rem, 0.78rem + 0.2vw, 1.2rem);
                    font-weight: 400;
                }
            }
        }

        /* -- [04.3.c] Footer Navigation Modifier -- */
        &.site-navigation--footer {
            .site-navigation__list {
                :where(.menu-item) a {
                    padding: 0.5rem 0.5rem;
                    font-size: 0.7rem;
                    font-weight: 400;
                }
            }
        }
    }

    .site-navigation__toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 36px;
        height: 36px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 999;
        padding: 0;

        .site-navigation__toggle-bar {
            width: 24px;
            height: 2px;
            background: #ffffff;
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform-origin: center;
        }

        &[aria-expanded="true"] {
            .site-navigation__toggle-bar:nth-child(1) {
                transform: translateY(8px) rotate(45deg);
            }

            .site-navigation__toggle-bar:nth-child(2) {
                opacity: 0;
            }

            .site-navigation__toggle-bar:nth-child(3) {
                transform: translateY(-8px) rotate(-45deg);
            }
        }
    }
}

/* -- [04.4] Logo -- */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
    container-type: inline-size;

    .logo__image {
        width: 100%;
        max-width: 250px;
        height: auto;
        object-fit: cover;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    &:hover {
        .logo__image {
            transform: scale(1.05);
            filter: brightness(1.1);
        }
    }

    /* -- [04.4.a] Logo Large Modifier -- */
    &.logo--large {
        margin: 1rem 0;
        border: 2px solid #776b75;
        border-radius: 100%;
        max-width: 250px;
        .logo__image {
            
            max-width: 100%;
        }

        @container (min-width: 600px) {
            & {
                max-width: 300px;
            }
        }
    }

    /* -- [04.4.b] Logo Small Modifier -- */
    &.logo--small {
        .logo__image {
            width: 110px;
            height: auto;
        }
    }
}

/* -- [04.5] Entry -- */
.entry {
    .entry__description {
        text-align: center;
    }
}

/* -- [04.6] Fancy Heading -- */
.fancy-heading {
    margin-bottom: 5rem;

    .fancy-heading__tag {
        display: block;
        margin-bottom: 0.5rem;
        font-family: var(--font-primary);
        font-optical-sizing: auto;
        font-style: normal;
        font-size: clamp(1rem, 0.86rem + 0.3vw, 1.5rem);
        font-weight: 500;
        letter-spacing: 2px;
        line-height: 1;
    }

    .fancy-heading__main {
        display: block;
        font-family: var(--font-secondary);
        font-optical-sizing: auto;
        font-style: normal;
        font-size: clamp(2.2rem, 1.6rem + 3.2vw, 2.5rem);
        font-weight: 800;
        letter-spacing: 2px;
        line-height: 1.2;
    }

    .fancy-heading__sub {
        display: block;
        margin-top: 0.5rem;
        font-family: var(--font-primary);
        font-optical-sizing: auto;
        font-style: normal;
        font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.3rem);
        font-weight:600;
        letter-spacing: 2px;
        line-height: 1;
    }
}

/* -- [04.7] Archive List -- */
.archive__list,
.project_archive__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@container main (min-width: 600px) {
    .archive__list>.archive__item:first-of-type .post--teaser {
        animation: none !important;
    }

    .archive__list>.archive__item:nth-of-type(odd) .post--teaser,
    .archive__list>.archive__item:nth-of-type(even) .post--teaser {
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
    }

    .archive__list>.archive__item:nth-of-type(odd) .post--teaser {
        animation-name: slide-in-left;
    }

    .archive__list>.archive__item:nth-of-type(even) .post--teaser {
        animation-name: slide-in-right;
    }
}

.project_archive__list {
    .post__link {
        .post__title {
            margin: 1rem 0 0.5rem 0;
        }
    }
}

/* -- [04.7] ResumeList -- */
.resume__card {
    padding: 1rem;
    background-color: var(--post-background-color);
    background-image: var(--global-textured-background);
    background-size: 100px 100px;
    border-radius: 0.475rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: box-shadow 0.5s, transform 0.8s;

    &:hover {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 4px 6px -2px;
    }
}

@container main (min-width: 600px) {
    /* Disable animation on first card */
    .resume__list .resume__card:first-of-type {
        animation: none !important;
    }

    /* Alternate animations */
    .resume__list .resume__card:nth-of-type(odd) {
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
        animation-name: slide-in-left;
    }

    .resume__list .resume__card:nth-of-type(even) {
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
        animation-name: slide-in-right;
    }
}


/* -- [04.8] Post -- */
.post {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* -- [04.8.b] Post Media -- */
.post__media {
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    background-color: #030201;

    .post__media-inner {
        width: 100%;
        height: 100%;
    }

    .post__image {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1);
        filter: brightness(1);
        transition: transform 0.4s ease, filter 0.4s ease;
        aspect-ratio: attr(width) / attr(height)
    }
}

/* -- [04.8.c] Post Title -- */
.post__link {
    text-decoration: none;

    .post__title {
        margin: 0 0 0.5rem 0;
        color: var(--post-title-color);
        font-family: var(--font-primary);
        font-size: clamp(1rem, 2.8vw, 1.2rem);
        line-height: 1.5;
    }
}

/* -- [04.8.d] Post Meta -- */
.post__meta {
    display: block;
    margin: 1rem 0;

    @container main (min-width: 600px) {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
    }
}

/* -- [04.8.e] Post Author -- */
.post__meta-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--author-font-color);
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    font-weight: 500;
    text-decoration: none;
    

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

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

    .post__author-gravatar {
        border-radius: 100%;
    }
}

/* -- [04.8.f] Post Date -- */
.post__meta-date {
    display: block;

    .post__date {
        &.post__date--published {
            color: var(--post-meta-color);
            font-size: clamp(0.9rem, 2.8vw, 1rem);
            font-weight: 500;
        }

        &.post__date--updated {
            display: none;
        }
    }
}

/* -- [04.8.g] Read time -- */
.post__meta_read-time {
    display: block;

    .post__read-time {
        color: var(--post-meta-color);
        font-size: clamp(0.9rem, 2.8vw, 1rem);
        font-weight: 500;
    }
}

.post__meta-sep {
    display: none;

    @container main (min-width: 600px) {
        display: block;
    }
}

/* -- [04.8.h] Excerpt -- */
.post__excerpt {
    .post__excerpt-text {
        margin: 0 0 1rem 0;
        font-size: clamp(0.8rem, 2.8vw, 0.9rem);
    }
}

/* -- [04.8.i] Read More -- */
.post__readmore {
    color: var(--author-font-color);
    font-size: clamp(0.8rem, 2.8vw, 0.9rem);
    font-weight: 500;
    text-decoration: none;

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

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

/* -- [04.8.j] Post Teaser Modifier -- */
.post--teaser {
    padding: 1rem;
    background-color: var(--post-background-color);
    background-image: var(--global-textured-background);
    background-size: 100px 100px;
    border-radius: 0.475rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    transition: box-shadow 0.5s, transform 0.8s;

    &:hover {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 4px 6px -2px;

        .post__image {
            transform: scale(1.05);
            filter: brightness(1.15);
        }

        ;
    }
}

/* -- [04.8.k] Post Single Modifier -- */
.post--single {
    .post__media {
        padding: 1rem;
        background-color: var(--post-background-color);
        background-image: var(--global-textured-background);
        background-size: 100px 100px;
        border-radius: 0.375rem;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

        .post__image {
            border-radius: 0.375rem;
        }
    }

    .post__meta {
        margin: 2rem 0 1.5rem 0;
    }
}

/* -- [04.9] Social Media Bar -- */
.social-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 2rem 0;

    .social-bar__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 500px;
    }

    .social-bar__title {
        margin: 0 0 0.5rem 0;
        padding: 0;
        text-align: center;
        font-size: clamp(1.5rem, 0.86rem + 0.3vw, 2rem);
    }

    .social-bar__content {
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: clamp(0.9rem, 0.86rem + 0.3vw, 0.9rem);
    }

    .social-bar__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 1rem;
    }

    .social-bar__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 9999px;
        text-decoration: none;

        .social-bar__icon {
            color: var(--social-media-link-color);
            transition: color 100ms ease-out;
        }

        &:is(:hover, :focus) {
            .social-bar__icon {
                color: var(--social-media-link-hover-color);
            }
        }

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

/* -- [04.10] Share Bar -- */
.share-bar {
    margin: 2rem 0;

    .share-bar__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 0.5rem;
    }

    .share-bar__item {
        position: relative;
    }

    .share-bar__label {
        font-family: var(--font-secondary);
        font-optical-sizing: auto;
        font-style: normal;
        font-size: clamp(0.9rem, 1.6rem + 3.2vw, 1rem);
        letter-spacing: 2px;
    }

    .share-bar__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background-color: transparent;
        border: none;
        border-radius: 9999px;
        text-decoration: none;
        cursor: pointer;

        .share-bar__icon {
            color: var(--social-media-link-color);
            transition: color 100ms ease-out;
        }

        &:is(:hover, :focus) {
            .share-bar__icon {
                color: var(--social-media-link-hover-color);
            }
        }

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

.share-notice {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #222;
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.share-notice.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.share-notice::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #222 transparent transparent transparent;
}

/* -- [04.11] Pagination -- */
.pagination {
    display: flex;
    justify-content: center;
    margin: 3rem 0;

    .pagination__nav {
        display: flex;
        align-items: center;
        gap: 1.5rem;

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

        .pagination__link {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 2rem;
            height: 2rem;
            color: var(--pagination-link-color);
            background-color: var(--pagination-link-background-color);
            border-radius: 9999px;
            font-family: var(--font-secondary);
            font-size: 1rem;
            line-height: 1.4;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            transition: color 100ms ease-out;

            &:is(:hover, :focus) {
                color: var(--pagination-link-hover-color);
                background-color: var(--pagination-link-hover-background-color);
            }

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

            &.pagination__link--disabled {
                opacity: 0.4;
                background-color: transparent;
                color: var(--pagination-link-disabled-color);
                cursor: not-allowed;
                pointer-events: none;

            }

            &.pagination__link--current {
                color: var(--pagination-link-active-color);
                background-color: var(--pagination-link-active-background-color);
            }

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

/* -- [04.12] Post Navigation -- */
.post-navigation {
    display: flex;
    justify-content: center;
    margin: 3rem 0 3rem 0;

    .post-navigation__links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .post-navigation__link {
            padding: 0.5rem 1rem;
            color: var(--pagination-link-color);
            background-color: var(--pagination-link-background-color);
            border-radius: 9999px;
            font-family: var(--font-secondary);
            font-size: 0.9rem;
            line-height: 1.4;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            transition: color 100ms ease-out;

            &:is(:hover, :focus) {
                color: var(--pagination-link-hover-color);
                background-color: var(--pagination-link-hover-background-color);
            }

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

/* -- [04.13] Tagline -- */
.tagline {
    padding: 0 0 0.8rem 0;

    .tagline__content {
        margin: 0;
        padding: 0;
        color: var(--tagline-font-color);
        font-size: clamp(0.8rem, 0.86rem + 0.3vw, 0.9rem);
        line-height: 1.2;
        font-weight: 700;
    }
}

/* -- [04.14] Legal -- */
.legal {
    padding: 0 0 0.5rem 0;

    .legal__copyright {
        color: var(--copyright-link-color);
        font-size: clamp(0.9rem, 0.86rem + 0.3vw, 0.9rem);
        line-height: 1.2;
        font-weight: 400;
        text-decoration: none;
        transition: color 100ms ease-out;

        &:is(:hover, :focus) {
            color: var(--copyright-link-hover-color);
        }

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

/* -- [04.15] No Content -- */
.no-content-found {
    padding: 1rem 1rem 2rem 1rem;
    background-color: var(--post-background-color);
    background-image: var(--global-textured-background);
    background-size: 100px 100px;
    border-radius: 0.475rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-align: center;
}

.site-map {
    .site-map__list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
}

/* -- [04.16] Contact Form 7-- */
.wpcf7 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wpcf7 form {
    padding: 2rem 1rem 2rem 1rem;
    background-color: var(--post-background-color);
    background-image: var(--global-textured-background);
    background-size: 100px 100px;
    border-radius: 0.475rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.wpcf7 form label {
  font-weight: 600;
  color: var(--wp--preset--color--color-07);
  margin-bottom: 0.3em;
  display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 0.8em 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
  transition: all 0.25s ease;
  background: #fafafa;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #7c4dff;
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.15);
  background: #fff;
  outline: none;
}

div.cf7-turnstile,
.wpcf7-form-control.wpcf7-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 0.5em;
}

.wpcf7 input[type="submit"] {
width: 100%;
  background: #ffffff;
  color: #443a4a;
  border: none;
  border-radius: 8px;
  padding: 0.9em 1.2em;
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: center;
}

.wpcf7 input[type="submit"]:hover {
  transform: translateY(-1px);
}

.wpcf7-response-output {
  text-align: center;
  padding: 0.8em;
  border-radius: 6px;
  margin-top: 1em;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  color: #2e7d32;
}

.wpcf7-response-output.wpcf7-validation-errors {
  background: #ffebee;
  border: 1px solid #e57373;
  color: #c62828;
}

/* ================= [05] Utilities ================= */
/* -- [05.1] Screen Reader -- */
.sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;

    &:focus {
        background-color: #ffffff;
        clip: auto !important;
        clip-path: none;
        color: #000000;
        display: block;
        font-size: 1em;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
    }
}

/* ================= [06] Animations ================= */
/* -- [06.0] Remove Animations -- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}


/* -- [06.2] Slide in Left Animation -- */
@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* -- [06.3] Slide in Right Animation -- */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* -- [06.4] Progress Animation -- */
@keyframes progress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

/* -- [06.5] Navigation Animation -- */
@keyframes navigation {
    from {
        background-color: var(--global-background-color);
        transform: translateY(0) scale(1);
        box-shadow: rgba(0, 0, 0, 0) 0 8px 15px -2px, rgba(0, 0, 0, 0) 0 5px 8px -2px;
        border-radius: 0.5rem;
    }

    to {
        background-color: var(--global-background-color);
        transform: translateY(-6px) scale(1.02);
        box-shadow: rgba(50, 50, 93, 0.25) 0 8px 15px -2px, rgba(0, 0, 0, 0.3) 0 5px 8px -2px;
        border-radius: 0.5rem;
    }
}

#theme-toggle {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--toggle-bg, #fff3df);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

#theme-toggle::before {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: "";
    background-image: url('../images/sun.webp');
    width: 40px;
    height: 40px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

html[data-theme="dark"] #theme-toggle {
    --toggle-bg: #222;
}

html[data-theme="dark"] #theme-toggle::before {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/moon.webp');
    width: 40px;
    height: 40px;
    transform: rotate(360deg);
}