/*
Theme Name: Tara Najd Ahmadi
Theme URI: https://www.najdahmadi.com/
Author: Mehran Bolhasani
Author URI: https://www.bolhasani.com/
Description: This theme was intentionally left blank. There are times when all you need is the WordPress dashboard and an blank frontend. You might be using the WordPress REST API as a backend for a mobile App or you might be a minimalism obsessed hipster. This is your theme.
Version: 3.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: featured-images, custom-background, theme-options, translation-ready
Text Domain: intentionally-blank
Requires at least: 4.6
Tested up to: 6.6
Requires PHP: 7.4
*/

:root {
    --turquoise: #27BCDF;
    --purple: #660EA7;
    --black: #000;
    --white: #fff;

    --transition-linear: linear(0, 0.012 0.9%, 0.049 2%, 0.409 9.3%, 0.513 11.9%, 0.606 14.7%, 0.691 17.9%, 0.762 21.3%, 0.82 25%, 0.868 29.1%, 0.907 33.6%, 0.937 38.7%, 0.976 51.3%, 0.994 68.8%, 1);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

html {
    font-size: 16px;
}

body {
    /* font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1, 'dlig' 1, 'zero' 1, 'ss01' 1, 'ss02' 1, 'ss03' 1;  */
    font-family: arial-nova, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
    background-color: var(--white);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    min-height: 100vh;
}

::selection {
    background-color: var(--black);
    color: var(--white);
}

a {
    &:hover,
    &:focus {
        text-decoration: none;
        color: var(--turquoise);
    }

    &:not([class^="anim-"]) {
        transition: all 0.3s var(--transition-linear);
    }
}


/* General Styles */
.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.vazir {
    font-family: "Vazirmatn", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.skip-link.screen-reader-text,
.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: -9999px;
}




.site {
    min-height: 100vh;
    width: 100vw;
    display: grid;
    justify-items: center;
    align-items: start;
}

.home .site {
    max-height: 100vh;
    align-items: center;
}

body:not(.home) .site {
    min-height: auto;
}

.site-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

body:not(.home) .site-inner {
    width: calc(100vw - 100px);
    height: fit-content;
    position: relative;
    margin: 50px 0;
}

.home .site-main {
    height: 100%;
    position: relative;
}




/* Header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    position: relative;
    gap: 2rem;
}

.home .site-header {
    padding: 3rem;
    color: var(--white);
    
    *::before,
    *::after{
        color: var(--white) !important;
    }
}

.site-title {
    font-size: 2rem;
    letter-spacing: -1px;
    font-weight: 400;
}

.site-branding h6 {
    margin: -8px 0 0;
    text-align: right;
    word-spacing: -1px;
    font-weight: 400;
    font-size: 1rem;
    color: rgb(0 0 0 / 54%);
}

.home .site-branding h6 {
    color: var(--white);
}

.main-navigation ul.primary-menu {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: flex-end;
    font-size: 1.1rem;
    letter-spacing: 0;
    font-weight: 400;
}

.main-navigation ul.primary-menu li {
    position: relative;

    &.current-menu-item {
        &::after {
            content: '';
            position: absolute;
            width: calc(100% + 20px);
            height: calc(100% + 5px);
            background-color: var(--turquoise);
            z-index: -1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        > a {
            color: var(--white);
        }
    }
}

.main-navigation ul.primary-menu li:not(:first-child)::before {
    content: '|';
    margin: 0;
    color: var(--black);
    font-weight: 400;
    position: absolute;
    left: -15px;
}

button.menu-toggle {
    display: none;
}

/* ---------- Mobile Menu ---------- */

/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hamburger-lines {
    width: 24px;
    height: 18px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-lines .line {
    width: 100%;
    height: 2px;
    background-color: var(--black);
    transition: all 0.3s ease;
    transform-origin: center;
}

.menu-text {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--black);
    letter-spacing: -0.5px;
}

/* Hamburger Animation States */
.mobile-menu-toggle.active .line {
    background-color: var(--white);
}
.mobile-menu-toggle.active .line-1 {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active .line-2 {
    opacity: 0;
}

.mobile-menu-toggle.active .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu-toggle.active .menu-text {
    color: var(--white);
}

/* Mobile Menu Drawer */
.mobile-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 67vh; /* 2/3 of viewport */
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
}

.mobile-menu-drawer.active {
    pointer-events: all;
    opacity: 1;
}

.mobile-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    opacity: 0.95;
}

.mobile-menu-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 60px 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

.mobile-menu-header {
    margin-bottom: 40px;
}

.mobile-site-branding {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
}

.mobile-site-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1.2;
}

.mobile-site-title a {
    color: var(--white);
    text-decoration: none;
}

.mobile-site-subtitle {
    margin: -10px 0 0;
    text-align: right;
    word-spacing: -1px;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--white);
}

/* Mobile Menu Navigation */
.mobile-menu-nav {
    flex: 1;
    display: flex;
    align-items: center;
}

.mobile-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
}

.mobile-primary-menu li {
    opacity: 0;
    transform: translateY(30px);
}

.mobile-primary-menu li a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1.3;
    display: block;
    padding: 8px 0;
    transition: all 0.3s ease;
    position: relative;
}

.mobile-primary-menu li a:hover,
.mobile-primary-menu li a:focus {
    color: var(--turquoise);
    transform: translateX(10px);
}

.mobile-primary-menu li.current-menu-item a {
    color: var(--turquoise);
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .desktop-menu {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
}

@media (max-width: 768px) {
    .mobile-menu-content {
        padding: 20px;
    }

    .home .mobile-menu-content {
        padding: 30px;
    }
    
    .mobile-site-title {
        font-size: 1.5rem;
    }
    
    .hamburger-container {
        gap: 8px;
    }
    
    .menu-text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .mobile-menu-content {
        padding: 20px;
    }

    .home .mobile-menu-content {
        padding: 30px;
    }
    
    .mobile-site-title {
        font-size: 1.5rem;
    }
    
    .mobile-primary-menu {
        gap: 20px;
    }
}
    








/* Front Page */
.home .site-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.home .site-title {
    color: var(--white);

    a {
        color: var(--white);

        &:active {
            color: var(--white)
        }

        &:visited {
            color: var(--white)
        }
    }
}

.front-page-image {
        width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;

    > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}










/* ---------- Post Type Archive ----------  */
.post-type-archive .site-content {
    margin: 10vh 0;

    .site-main {
        gap: 2rem;

        nav.posts-navigation {
            font-size: 1.7rem;
            letter-spacing: -1px;
            font-weight: 400;

            .nav-links {
                gap: 1rem;
            }

            .nav-divider {
                height: 1px;
                width: 100px;
                background-color: var(--black);
            }
        }
    }

    .page-title {
        font-size: 4rem;
        letter-spacing: -4px;
    }

    .posts-wrapper {
        gap: 50px;
        display: grid;
        grid-template: auto / 1fr 1fr;

        .article-link {
            padding: 0;
            position: relative;
            min-height: 65px;
            transition: all 0.3s var(--transition-linear);
            display: flex;
            align-items: center;

            /* Desktop hover effects only */
            @media (min-width: 1024px) {
                &:hover,
                &:focus {
                    color: var(--turquoise);
                }
            }

        }
        
        article {
            display: flex;
            align-items: flex-end;
            gap: 1rem;

            .post-thumbnail {
                width: 400px;
                height: 400px;
                position: relative;
                overflow: hidden;
                transition: all 0.7s var(--transition-linear) 0.3s;
                aspect-ratio: 1 / 1;
                flex: 1 1;
                min-width: 400px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }

            .post-event-before-title {
                width: 30px;
                height: 100%;
                display: grid;
                place-items: center;

                span {
                    width: 100%;
                    height: 2px;
                    display: block;
                    background: var(--black);
                }
            }

            h2.entry-title {
                font-size: 1.1rem;
                letter-spacing: 0;
            }

            .post-meta {
                display: flex;
                gap: 1rem;
                align-items: center;
                letter-spacing: -0.4px;
                opacity: 0.5;
                font-weight: 500;
            }
        }
    }
}

/* +++++ Breadcrumbs +++++  */

.breadcrumbs {
    font-size: 1.2rem;
    color: var(--black);
    letter-spacing: 0;

    * {
        color: rgb(0 0 0 / 50%) !important;

        &::after {
            opacity: 0.5;
        }
    }
}

.breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;

    &:not(.breadcrumb-current) {
        opacity: 0.4;
    }
}

.breadcrumb-item:not(:last-child)::after {
    content: '';
    margin-left: 0.5rem;
    color: var(--black);
    font-weight: normal;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjEuNjYsMTMzLjY2bC03Miw3MmE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTk2LjY5LDEzNkg0MGE4LDgsMCwwLDEsMC0xNkgxOTYuNjlMMTM4LjM0LDYxLjY2YTgsOCwwLDAsMSwxMS4zMi0xMS4zMmw3Miw3MkE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NloiPjwvcGF0aD48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    width: 21px;
    height: 21px;
}

.breadcrumb-item a {
    color: var(--black);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--black);
    text-decoration: underline;
}

.breadcrumb-current {
    color: var(--black);
    font-weight: normal;
}












/* ---------- Post Type Archive ----------  */
.single .site-content {
    margin: 15vh 0;

    header.entry-header {
        gap: 0.5rem;
    }


    .entry-title {
        font-size: 2rem;
        letter-spacing: 0;
        display: flex;
        align-items: center;
        gap: 15px;

        span.farsi-title {
            transform: translateY(4px);
        }
    }

    .entry-meta .post-meta {
        display: flex;
        align-items: center;
        gap: 4rem;
        font-size: 1.4rem;
        margin: 0.5rem 0 0;
        letter-spacing: -1px;

        * {
            color: rgb(0 0 0 / 80%);
        }

        .post-meta-item {
            position: relative;

            &:not(:first-child)::before {
                content: '—';
                position: absolute;
                left: -2.6rem;
            }
        }

        a {
            border-bottom: 1px solid var(--black);

            &:hover,
            &:focus {
                color: var(--turquoise);
                border-bottom: 2px solid var(--turquoise);
            }
        }
    }

    .entry-content {
        font-size: 1.1rem;
        letter-spacing: 0;
        margin: 1rem 0 5rem;
        gap: 1rem;
        font-weight: 400;
        max-width: 1400px;
        width: 100%;
        line-height: 1.5;

        a {
            color: var(--black);
            border-bottom: 1px solid var(--black);

            &:hover,
            &:focus {
                color: var(--turquoise);
                border-bottom: 2px solid var(--turquoise);
            }
        }

        strong {
            font-weight: 700;
        }

        em {
            font-style: italic;
        }

        ul {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 0 0 3rem;
            list-style: disc;
        }

        ol {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0 0 0 3rem;
            list-style: decimal;
        }

        blockquote {
            padding: 3rem 4rem;
            background: rgb(0 0 0 / 5%);
            width: calc(100% - 100px);
            margin: 2rem auto;
            font-style: italic;
            color: rgb(0 0 0 / 80%);
            font-size: 1.4rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 30px;
                left: 0;
                width: 200px;
                height: 2px;
                background-color: var(--black);
                opacity: 1;
            }
        }

        h1 {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.4;
        }

        h2 {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.4;
        }

        h3 {
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.4;
        }

        h4 {
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            line-height: 1.4;
        }

        h5 {
            font-size: 1.2rem;
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1.4;
        }

        h6 {
            font-size: 1rem;
            font-weight: 500;
            letter-spacing: 0;
            line-height: 1.4;
        }


        .wp-caption {
            width: 100% !important;
            height: auto;
            position: relative;

            img {
                width: 100% !important;
                height: auto;
                object-fit: cover;
                object-position: center;
            }

            .wp-caption-text {
                padding: 1rem 0;
                font-size: 1.3rem;
                letter-spacing: -0.5px;
                opacity: 0.7;
            }
        }

        img {
            width: 600px !important;
            max-width: 600px;
            height: auto;
            object-fit: cover;
            object-position: center;
            aspect-ratio: 4 / 3;
        }
        
        /* For vertical images (portrait orientation), remove forced aspect ratio */
        img.wp-image-vertical,
        img.size-full[style*="height"],
        img[data-orientation="portrait"] {
            aspect-ratio: unset;
            height: auto;
            max-height: 800px; /* Optional: set a max height for very tall images */
        }
    }


    nav.post-navigation {
        font-size: 1.2rem;
        letter-spacing: 0;

        a {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .nav-subtitle {
            display: flex;
            align-items: center;
            gap: 5px;
        }
    }
}









/* Page Styles */
.page:not(.home) .site-content {
    margin: 15vh 0;

    article.single-page {
        
        .entry-title {
            font-size: 2rem;
            letter-spacing: 0;
        }

        .entry-content {
            font-size: 1.1rem;
            letter-spacing: 0;
            margin: 5rem 0;
            gap: 1rem;
            font-weight: 400;
            max-width: 1400px;
            width: 100%;
    
            a {
                color: var(--black);
                border-bottom: 1px solid var(--black);
    
                &:hover,
                &:focus {
                    color: var(--turquoise);
                    border-bottom: 2px solid var(--turquoise);
                }
            }
    
            strong {
                font-weight: 700;
            }
    
            em {
                font-style: italic;
            }
    
            ul {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 0 0 0 3rem;
                list-style: disc;
            }
    
            ol {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 0 0 0 3rem;
                list-style: decimal;
            }
    
            blockquote {
                padding: 3rem 4rem;
                background: rgb(0 0 0 / 5%);
                width: calc(100% - 100px);
                margin: 2rem auto;
                font-style: italic;
                color: rgb(0 0 0 / 80%);
                font-size: 1.9rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                position: relative;
    
                &::before {
                    content: '';
                    position: absolute;
                    top: 30px;
                    left: 0;
                    width: 200px;
                    height: 2px;
                    background-color: var(--black);
                    opacity: 1;
                }
            }
    
            h1 {
                font-size: 3.5rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }
    
            h2 {
                font-size: 2.5rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }
    
            h3 {
                font-size: 2rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }
    
            h4 {
                font-size: 1.5rem;
                font-weight: 500;
                letter-spacing: -0.5px;
                line-height: 1.4;
            }
    
            h5 {
                font-size: 1.2rem;
                font-weight: 500;
                letter-spacing: 0;
                line-height: 1.4;
            }
    
            h6 {
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: 0;
                line-height: 1.4;
            }
    
    
            .wp-caption {
                width: 100% !important;
                height: auto;
                position: relative;
    
                img {
                    width: 100% !important;
                    height: auto;
                    object-fit: cover;
                    object-position: center;
                }
    
                .wp-caption-text {
                    padding: 1rem 0;
                    font-size: 1.3rem;
                    letter-spacing: -0.5px;
                    opacity: 0.7;
                }
            }
    
            img {
                width: 100% !important;
                height: auto;
                object-fit: cover;
                object-position: center;
            }
        }  
    }
}












/* Footer Styles */
.site-footer {
    position: relative;
    width: 100%;
    text-align: right;
    padding: 20px;
    color: var(--black);
    font-size: 14px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

body:not(.home) .site-footer {
    padding: 0;
}


.home .site-footer {
    padding: 1rem;
    color: var(--white);
    font-size: 1.3rem;
    letter-spacing: -1px;
    position: absolute;
    bottom: 0;
    gap: 1rem;
}

.footer-dot {
    width: 2px;
    height: 2px;
    background: #fff;
}

body:not(.home) .footer-dot {
    background: var(--black);
}











/* ==========================================================================
   TaraJS Animation Initial States
   ========================================================================== */

/* 1. Fade In */
.anim-fade-in {
    opacity: 0;
}

/* 2. Slide Up */
.anim-slide-up {
    opacity: 0;
    transform: translateY(50px);
}

/* 3. Slide Down */
.anim-slide-down {
    opacity: 0;
    transform: translateY(-50px);
}

/* 4. Slide Left */
.anim-slide-left {
    opacity: 0;
    transform: translateX(50px);
}

/* 5. Slide Right */
.anim-slide-right {
    opacity: 0;
    transform: translateX(-50px);
}

/* 6. Scale In */
.anim-scale-in {
    opacity: 0;
    transform: scale(0.8);
}

/* 7. Scale Up */
.anim-scale-up {
    opacity: 0;
    transform: scale(1.1);
}

/* 8. Rotate In */
.anim-rotate-in {
    opacity: 0;
    transform: rotate(-10deg);
}

/* 9. Blur In */
.anim-blur-in {
    opacity: 0;
    filter: blur(10px);
}

/* 10. Flip In X */
.anim-flip-x {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: center;
}

/* 11. Flip In Y */
.anim-flip-y {
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: center;
}

/* 12. Skew In */
.anim-skew-in {
    opacity: 0;
    transform: skewX(-15deg);
}

/* 13. Elastic In */
.anim-elastic {
    opacity: 0;
    transform: scale(0.3);
}

/* 14. Bounce In */
.anim-bounce {
    opacity: 0;
    transform: translateY(-100px);
}

/* 15. Text Reveal (for children) */
.anim-text-reveal > * {
    opacity: 0;
    transform: translateY(20px);
}

/* Performance optimizations for all animated elements */
[class*="anim-"] {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accessibility: Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    [class*="anim-"] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   404 Error Page Styles
   ========================================================================== */

body.error404 .site {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.body.error404 .site .site-inner {
    margin: 0;
}

.error-404 {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    padding: 0;
    flex-direction: column;
    gap: 5rem;
}

.error-404 .page-title {
    font-size: 12rem;
    font-weight: 300;
    letter-spacing: -16px;
    margin: 0;
    color: var(--black);
    line-height: 1;
}

.error-404 .error-subtitle {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -2px;
    color: var(--black);
}

.error-404 .page-content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.error-404 .error-message {
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: -0.5px;
    font-weight: 300;
}

.error-404 .error-nav-links {
    display: block;
}

.error-404 .post-type-archives ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.error-404 .post-type-archives a {
    color: var(--black);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    letter-spacing: -1px;
}

.error-404 .post-type-archives a:hover {
    color: var(--turquoise);
    border-bottom-color: var(--turquoise);
}

.error-404 .button-link {
    display: inline-block;
    padding: 0;
    color: #000;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    border-bottom: 1px solid #000;
}

.error-404 .button-link strong {
    font-weight: 900;
}

.error-404 .button-link:hover {
    color: var(--turquoise);
    border-bottom-color: var(--turquoise);
}

/* Responsive 404 styles */
@media (max-width: 768px) {
    .error-404 {
        text-align: center;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        padding: 0;
        flex-direction: column;
        gap: 2rem;
    }

    .error-404 .page-content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .error-404 .page-title {
        font-size: 4rem;
        font-weight: 300;
        letter-spacing: -7px;
        margin: 0;
        color: var(--black);
        line-height: 1;
    }

    .error-404 .error-subtitle {
        font-size: 2rem;
        font-weight: 300;
        letter-spacing: -1.5px;
        color: var(--black);
    }

    .error-404 .error-message {
        font-size: 1.3rem;
    }

    .error-404 .post-type-archives ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .error-404 .post-type-archives a {
        color: var(--black);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: all 0.3s ease;
        font-size: 1.2rem;
        letter-spacing: -0.5px;
    }

    .single .site-content {
        & .entry-content {
            img {
                width: 100% !important;
                height: auto;
                object-fit: cover;
                object-position: center;
                max-width: 100vw;
                aspect-ratio: 4 / 3;
            }
        }
    }
}














/* Mobile Styles */
@media (max-width: 1024px) {
    body:not(.home) .site-inner {
        width: calc(100vw - 40px);
        height: fit-content;
        position: relative;
        margin: 20px 0;
    }

    .site-inner {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 2;
        position: relative;
        gap: 1rem;
    }

    .home .site-header {
        padding: 1rem;
        color: var(--white);

        .hamburger-lines .line {
            background-color: var(--white);
        }

        .menu-text {
            color: var(--white);
        }
    }

    .site-title {
        font-size: 1.4rem;
        letter-spacing: -1px;
        font-weight: 400;
    }

    .post-type-archive .site-content {
        margin: 10vh 0;
    }

    .breadcrumbs {
        font-size: 1.2rem;
        margin-bottom: 0;
        letter-spacing: 0;
        color: rgb(0 0 0 / 50%);

        * {
            color: rgb(0 0 0 / 50%) !important;

            &::after {
                opacity: 0.5;
            }
        }
    }
    
    .breadcrumb-list {
        gap: 0.25rem;
    }
    
    .breadcrumb-item:not(:last-child)::after {
        margin-left: 0.25rem;
    }

    .post-type-archive .site-content {
        .page-title {
            font-size: 2.4rem;
            letter-spacing: -2px;
        }
    }

    .post-type-archive .site-content {
        & .posts-wrapper {
            display: flex;
            flex-direction: column;
            gap: 50px;
            
            .article-link {
                &:not(:last-child) {
                    border-bottom: 1px solid var(--black);
                    padding-bottom: 1rem;
                }
            }


            article {
                display: flex;
                align-items: flex-start;
                gap: 1rem;
                flex-direction: column;

                h2.entry-title {
                    font-size: 1.4rem;
                    letter-spacing: -1px;
                }

                .post-thumbnail {
                    width: calc(100vw - 50px);
                    height: auto;
                    aspect-ratio: 1 / 1;
                    min-width: calc(100vw - 50px);
                }
            }
        }
    }


    .single .site-content {
        .breadcrumb-current {
            color: var(--black);
            font-weight: normal;
            display: none;
        }

        .entry-title {
            font-size: 1.4rem;
            letter-spacing: 0;
            line-height: 1.5;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 0;
        }

        .entry-meta .post-meta {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: 1.2rem;
            flex-direction: column;
            margin: 2rem 0 0;
            letter-spacing: -0.5px;

            .post-meta-item {

                &:not(:first-child)::before {
                    display: none;
                }
            }

        }

        .entry-content {
            font-size: 1.2rem;
            letter-spacing: -0.5px;
            margin: 1rem 0 5rem;
            gap: 1rem;
            font-weight: 300;
            max-width: 1400px;
            width: 100%;
        }


        .entry-content {
            blockquote {
                padding: 1rem 2rem;
                background: rgb(0 0 0 / 5%);
                width: calc(100% - 0px);
                margin: 2rem auto;
                font-style: italic;
                color: rgb(0 0 0 / 80%);
                font-size: 1.3rem;
                display: flex;
                flex-direction: column;
                gap: 1rem;
                position: relative;

                &::before {
                    top: 0;
                }
            }

            h1 {
                font-size: 2.2rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }

            h2 {
                font-size: 2rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }

            h3 {
                font-size: 1.8rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }

            h4 {
                font-size: 1.6rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }

            h5 {
                font-size: 1.4rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }

            h6 {
                font-size: 1.2rem;
                font-weight: 500;
                letter-spacing: -1px;
                line-height: 1.4;
            }
        }
    }



    .page:not(.home) .site-content {
        & article.single-page {
            .entry-title {
                font-size: 1.4rem;
                letter-spacing: 0;
                line-height: 1.3;
            }

            .entry-content {
                blockquote {
                    padding: 1rem 2rem;
                    background: rgb(0 0 0 / 5%);
                    width: calc(100% - 0px);
                    margin: 2rem auto;
                    font-style: italic;
                    color: rgb(0 0 0 / 80%);
                    font-size: 1.3rem;
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    position: relative;
    
                    &::before {
                        top: 0;
                    }
                }
    
                h1 {
                    font-size: 2.2rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
    
                h2 {
                    font-size: 2rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
    
                h3 {
                    font-size: 1.8rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
    
                h4 {
                    font-size: 1.6rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
    
                h5 {
                    font-size: 1.4rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
    
                h6 {
                    font-size: 1.2rem;
                    font-weight: 500;
                    letter-spacing: -1px;
                    line-height: 1.4;
                }
            }
        }
    }
}