/*
Theme Name: Nick Reid
Author: Nick Reid
Author URI: https://nickreid.me
Description: Theme for Nick Reid's personal portfolio website. A child theme for Twenty Twenty-Four.
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nickreid
Template: twentytwentyfour
*/


.post-password-form {
    border: 1px solid var(--wp--preset--color--portfolio-border-light);
    border-radius: var(--wp--custom--border-radius--medium);
    max-width: 320px !important;
    margin-top: var(--wp--preset--spacing--large) !important;
    margin-bottom: var(--wp--preset--spacing--2-x-large) !important;
    display: block;
    padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium-large);
    box-shadow: var(--wp--custom--shadows--form);
}

.post-password-form label {
    font-weight: 700;
    width: 100%;
    display: block;

}

.post-password-form input:is([type="button"], [type="submit"], [type="reset"]) {
    width: 100%;
    background: var(--wp--preset--color--portfolio-dark);
    font-size: 18px;
    border: none;
    border-radius: var(--wp--custom--border-radius--small);
    color: var(--wp--preset--color--portfolio-white);
    padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
    font-weight: 700;
} 

.post-password-form input:is([type="password"]) {
    border: 2px solid var(--wp--preset--color--portfolio-border-medium);
    border-radius: var(--wp--custom--border-radius--small);
    width: calc(100% - 20px);
    padding: var(--wp--preset--spacing--2-x-small) var(--wp--preset--spacing--x-small);
    display: block;
    height: var(--wp--preset--spacing--medium);
    margin-bottom: var(--wp--preset--spacing--small);
    font-size: 18px;
    margin-top: var(--wp--preset--spacing--x-small);
}

/* Responsive: Remove max-width on mobile */
@media (max-width: 768px) {
    .post-password-form {
        max-width: none !important;
    }
}

/* Hide post meta when password form is displayed */
body:has(.post-password-form) .nickreid-post-meta {
    display: none;
}

/* Base Font Size: Set 1rem = 18px for editorial impact */
html {
    font-size: 18px;
}

/* Typography: Prevent orphan words in headings */
h1, h2, h3, h4, h5, h6,
.wp-block-heading, p {
    text-wrap: balance;
}

.wp-block-navigation-item {
    margin-bottom: 0;
}

/* Typography: Use Gelasio for emphasis */
em,
i,
.italic {
    font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--wp--preset--color--contrast);

}

b, strong {
    color: var(--wp--preset--color--contrast);
}

/* Typography: List item indentation */
.wp-block-list,
ul,
ol {
    padding-left: 2em;
}

.wp-block-list li,
ul li,
ol li {
    margin-bottom: 0.5em;
}

/* Dark Mode: Color Palette Override */
body.is-style-dark,
html.is-style-dark {
    /* Base & Contrast - Inverted Zinc palette */
    --wp--preset--color--base: #09090b;
    --wp--preset--color--base-2: #18181b;
    --wp--preset--color--base-3: #27272a;
    --wp--preset--color--contrast: #fafafa;
    --wp--preset--color--contrast-2: #a1a1aa;
    --wp--preset--color--contrast-3: #71717a;
    --wp--preset--color--contrast-4: #52525b;
    --wp--preset--color--contrast-5: #3f3f46;
    --wp--preset--color--neutral: #27272a;
    --wp--preset--color--neutral-2: #d4d4d8;
    --wp--preset--color--neutral-3: #e4e4e7;
    --wp--preset--color--neutral-4: #f4f4f5;

    /* Accent Colors - Darker, muted variants for dark mode */
    --wp--preset--color--red: #dc2626;
    --wp--preset--color--red-bg: #450a0a;
    --wp--preset--color--red-text: #fca5a5;
    --wp--preset--color--orange: #ea580c;
    --wp--preset--color--orange-bg: #431407;
    --wp--preset--color--orange-text: #fdba74;
    --wp--preset--color--amber: #d97706;
    --wp--preset--color--amber-bg: #451a03;
    --wp--preset--color--amber-text: #fcd34d;
    --wp--preset--color--yellow: #ca8a04;
    --wp--preset--color--yellow-bg: #422006;
    --wp--preset--color--yellow-text: #fde047;
    --wp--preset--color--lime: #65a30d;
    --wp--preset--color--lime-bg: #1a2e05;
    --wp--preset--color--lime-text: #bef264;
    --wp--preset--color--green: #16a34a;
    --wp--preset--color--green-bg: #052e16;
    --wp--preset--color--green-text: #86efac;
    --wp--preset--color--emerald: #059669;
    --wp--preset--color--emerald-bg: #022c22;
    --wp--preset--color--emerald-text: #6ee7b7;
    --wp--preset--color--teal: #0d9488;
    --wp--preset--color--teal-bg: #042f2e;
    --wp--preset--color--teal-text: #5eead4;
    --wp--preset--color--cyan: #0891b2;
    --wp--preset--color--cyan-bg: #083344;
    --wp--preset--color--cyan-text: #67e8f9;
    --wp--preset--color--sky: #0284c7;
    --wp--preset--color--sky-bg: #082f49;
    --wp--preset--color--sky-text: #7dd3fc;
    --wp--preset--color--blue: #2563eb;
    --wp--preset--color--blue-bg: #1e3a8a;
    --wp--preset--color--blue-text: #93c5fd;
    --wp--preset--color--indigo: #4f46e5;
    --wp--preset--color--indigo-bg: #312e81;
    --wp--preset--color--indigo-text: #a5b4fc;
    --wp--preset--color--violet: #7c3aed;
    --wp--preset--color--violet-bg: #4c1d95;
    --wp--preset--color--violet-text: #c4b5fd;
    --wp--preset--color--purple: #9333ea;
    --wp--preset--color--purple-bg: #581c87;
    --wp--preset--color--purple-text: #d8b4fe;
    --wp--preset--color--fuchsia: #c026d3;
    --wp--preset--color--fuchsia-bg: #701a75;
    --wp--preset--color--fuchsia-text: #f0abfc;
    --wp--preset--color--pink: #db2777;
    --wp--preset--color--pink-bg: #831843;
    --wp--preset--color--pink-text: #f9a8d4;
    --wp--preset--color--rose: #e11d48;
    --wp--preset--color--rose-bg: #881337;
    --wp--preset--color--rose-text: #fda4af;

    /* Portfolio colors */
    --wp--preset--color--portfolio-dark: #fafafa;
    --wp--preset--color--portfolio-border-light: #3f3f46;
    --wp--preset--color--portfolio-border-medium: #52525b;
    --wp--preset--color--portfolio-white: #18181b;

    /* Gradient overrides for dark mode */
    --wp--preset--gradient--glass-pill: linear-gradient(135deg, hsla(240, 5%, 17%, 0.90) 0%, hsla(240, 5%, 18%, 0.91) 12.5%, hsla(240, 4%, 19%, 0.93) 25%, hsla(240, 5%, 21%, 0.94) 37.5%, hsla(240, 5%, 23%, 0.95) 50%, hsla(240, 5%, 21%, 0.94) 62.5%, hsla(240, 4%, 19%, 0.93) 75%, hsla(240, 5%, 18%, 0.91) 87.5%, hsla(240, 5%, 17%, 0.90) 100%);
    --wp--preset--gradient--sunset-mesh: radial-gradient(at 27% 37%, hsla(326, 65%, 28%, 1) 0px, transparent 50%), radial-gradient(at 97% 21%, hsla(24, 80%, 25%, 1) 0px, transparent 50%), radial-gradient(at 52% 99%, hsla(288, 60%, 30%, 1) 0px, transparent 50%), radial-gradient(at 10% 29%, hsla(0, 75%, 32%, 1) 0px, transparent 50%), radial-gradient(at 97% 96%, hsla(45, 70%, 28%, 1) 0px, transparent 50%), radial-gradient(at 33% 50%, hsla(328, 80%, 35%, 1) 0px, transparent 50%), radial-gradient(at 79% 53%, hsla(15, 65%, 32%, 1) 0px, transparent 50%);
    --wp--preset--gradient--ocean-mesh: radial-gradient(at 15% 25%, hsla(210, 70%, 22%, 1) 0px, transparent 50%), radial-gradient(at 80% 15%, hsla(195, 75%, 25%, 1) 0px, transparent 50%), radial-gradient(at 50% 85%, hsla(220, 65%, 28%, 1) 0px, transparent 50%), radial-gradient(at 5% 70%, hsla(200, 80%, 30%, 1) 0px, transparent 50%), radial-gradient(at 90% 90%, hsla(185, 70%, 24%, 1) 0px, transparent 50%), radial-gradient(at 40% 40%, hsla(210, 75%, 32%, 1) 0px, transparent 50%), radial-gradient(at 70% 60%, hsla(205, 68%, 26%, 1) 0px, transparent 50%);
    --wp--preset--gradient--garden-mesh: radial-gradient(at 30% 20%, hsla(120, 60%, 25%, 1) 0px, transparent 50%), radial-gradient(at 85% 35%, hsla(45, 70%, 28%, 1) 0px, transparent 50%), radial-gradient(at 45% 90%, hsla(280, 55%, 30%, 1) 0px, transparent 50%), radial-gradient(at 10% 65%, hsla(150, 65%, 26%, 1) 0px, transparent 50%), radial-gradient(at 95% 80%, hsla(340, 60%, 32%, 1) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(90, 68%, 28%, 1) 0px, transparent 50%), radial-gradient(at 75% 25%, hsla(180, 62%, 24%, 1) 0px, transparent 50%);
    --wp--preset--gradient--berry-mesh: radial-gradient(at 25% 30%, hsla(340, 70%, 28%, 1) 0px, transparent 50%), radial-gradient(at 90% 20%, hsla(280, 65%, 30%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(320, 75%, 26%, 1) 0px, transparent 50%), radial-gradient(at 15% 75%, hsla(350, 68%, 32%, 1) 0px, transparent 50%), radial-gradient(at 85% 85%, hsla(300, 72%, 28%, 1) 0px, transparent 50%), radial-gradient(at 40% 45%, hsla(330, 78%, 34%, 1) 0px, transparent 50%), radial-gradient(at 70% 55%, hsla(310, 70%, 30%, 1) 0px, transparent 50%);
    --wp--preset--gradient--citrus-mesh: radial-gradient(at 20% 25%, hsla(45, 75%, 26%, 1) 0px, transparent 50%), radial-gradient(at 85% 30%, hsla(50, 78%, 28%, 1) 0px, transparent 50%), radial-gradient(at 50% 85%, hsla(40, 72%, 24%, 1) 0px, transparent 50%), radial-gradient(at 10% 70%, hsla(55, 80%, 30%, 1) 0px, transparent 50%), radial-gradient(at 90% 80%, hsla(42, 76%, 27%, 1) 0px, transparent 50%), radial-gradient(at 45% 50%, hsla(48, 82%, 32%, 1) 0px, transparent 50%), radial-gradient(at 75% 40%, hsla(52, 74%, 28%, 1) 0px, transparent 50%);
    --wp--preset--gradient--aurora-mesh: radial-gradient(at 35% 25%, hsla(280, 65%, 28%, 1) 0px, transparent 50%), radial-gradient(at 80% 40%, hsla(180, 70%, 26%, 1) 0px, transparent 50%), radial-gradient(at 45% 75%, hsla(200, 68%, 30%, 1) 0px, transparent 50%), radial-gradient(at 15% 60%, hsla(320, 72%, 32%, 1) 0px, transparent 50%), radial-gradient(at 90% 85%, hsla(160, 66%, 24%, 1) 0px, transparent 50%), radial-gradient(at 50% 45%, hsla(240, 75%, 34%, 1) 0px, transparent 50%), radial-gradient(at 70% 65%, hsla(300, 70%, 28%, 1) 0px, transparent 50%);
    --wp--preset--gradient--peachy-mesh: radial-gradient(at 30% 30%, hsla(15, 72%, 28%, 1) 0px, transparent 50%), radial-gradient(at 85% 25%, hsla(20, 75%, 30%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(12, 70%, 26%, 1) 0px, transparent 50%), radial-gradient(at 15% 65%, hsla(18, 78%, 32%, 1) 0px, transparent 50%), radial-gradient(at 90% 75%, hsla(22, 74%, 28%, 1) 0px, transparent 50%), radial-gradient(at 45% 50%, hsla(16, 80%, 34%, 1) 0px, transparent 50%), radial-gradient(at 70% 55%, hsla(14, 76%, 30%, 1) 0px, transparent 50%);
    --wp--preset--gradient--mint-mesh: radial-gradient(at 25% 35%, hsla(150, 55%, 26%, 1) 0px, transparent 50%), radial-gradient(at 80% 30%, hsla(160, 58%, 28%, 1) 0px, transparent 50%), radial-gradient(at 50% 75%, hsla(145, 52%, 24%, 1) 0px, transparent 50%), radial-gradient(at 10% 60%, hsla(165, 60%, 30%, 1) 0px, transparent 50%), radial-gradient(at 90% 80%, hsla(155, 56%, 27%, 1) 0px, transparent 50%), radial-gradient(at 40% 50%, hsla(152, 62%, 32%, 1) 0px, transparent 50%), radial-gradient(at 75% 45%, hsla(158, 54%, 28%, 1) 0px, transparent 50%);
    --wp--preset--gradient--sky-mesh: radial-gradient(at 30% 25%, hsla(200, 65%, 26%, 1) 0px, transparent 50%), radial-gradient(at 85% 35%, hsla(210, 68%, 28%, 1) 0px, transparent 50%), radial-gradient(at 50% 80%, hsla(195, 62%, 24%, 1) 0px, transparent 50%), radial-gradient(at 15% 70%, hsla(215, 70%, 30%, 1) 0px, transparent 50%), radial-gradient(at 90% 75%, hsla(205, 66%, 27%, 1) 0px, transparent 50%), radial-gradient(at 45% 50%, hsla(208, 72%, 32%, 1) 0px, transparent 50%), radial-gradient(at 70% 60%, hsla(202, 64%, 28%, 1) 0px, transparent 50%);
    --wp--preset--gradient--lavender-mesh: radial-gradient(at 35% 30%, hsla(270, 50%, 28%, 1) 0px, transparent 50%), radial-gradient(at 80% 25%, hsla(280, 52%, 30%, 1) 0px, transparent 50%), radial-gradient(at 50% 85%, hsla(265, 48%, 26%, 1) 0px, transparent 50%), radial-gradient(at 15% 65%, hsla(285, 55%, 32%, 1) 0px, transparent 50%), radial-gradient(at 90% 80%, hsla(275, 51%, 28%, 1) 0px, transparent 50%), radial-gradient(at 40% 50%, hsla(278, 58%, 34%, 1) 0px, transparent 50%), radial-gradient(at 75% 55%, hsla(272, 49%, 30%, 1) 0px, transparent 50%);
}

/* Dark Mode: Reduce brightness of images for accessibility */
html.is-style-dark img,
html.is-style-dark video,
html.is-style-dark iframe,
body.is-style-dark img,
body.is-style-dark video,
body.is-style-dark iframe {
    filter: brightness(0.8) contrast(0.9);
}

/* Exception: Don't dim logos or UI elements */
html.is-style-dark .site-logo img,
html.is-style-dark .wp-block-site-logo img,
html.is-style-dark .custom-logo,
body.is-style-dark .site-logo img,
body.is-style-dark .wp-block-site-logo img,
body.is-style-dark .custom-logo {
    filter: none;
}

/* Dark Mode: Smooth color transitions */
body,
body *:not(.dark-mode-toggle):not(#dark-mode-lottie):not(#dark-mode-lottie *) {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                fill 0.3s ease,
                stroke 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    body,
    body *,
    .dark-mode-toggle {
        transition: none !important;
    }
}

/* Dark Mode Toggle Block */
.wp-block-nickreid-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
}

.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--wp--preset--color--contrast);

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

    padding: 0;
    margin: 0;
    position: relative;

    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dark-mode-toggle:hover {
    opacity: 0.7;
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

.dark-mode-toggle:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Lottie animation container */
#dark-mode-lottie {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

#dark-mode-lottie svg {
    width: 100%;
    height: 100%;
}

/* Override Lottie colors to match theme */
#dark-mode-lottie svg path,
#dark-mode-lottie svg circle,
#dark-mode-lottie svg line {
    stroke: var(--wp--preset--color--contrast) !important;
    fill: var(--wp--preset--color--contrast) !important;
}

/* Visually hidden class for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Ensure button meets minimum touch target size (44x44px WCAG 2.5.5) */
.dark-mode-toggle {
    min-width: 44px;
    min-height: 44px;
}

/* Navigation: Add spacing to responsive dialog */
.wp-block-navigation__responsive-container-close {
    top: var(--wp--preset--spacing--medium);
    right: var(--wp--preset--spacing--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    padding: var(--wp--preset--spacing--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-item__content {
    font-size: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .is-style-arrow-link .wp-block-navigation-item__label:after {
    opacity: 0.25;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    /* Force light colors for readability on white paper */
    html, body,
    html.is-style-dark, body.is-style-dark {
        --wp--preset--color--base: #ffffff !important;
        --wp--preset--color--base-2: #ffffff !important;
        --wp--preset--color--base-3: #ffffff !important;
        --wp--preset--color--contrast: #000000 !important;
        --wp--preset--color--contrast-2: #333333 !important;
        --wp--preset--color--contrast-3: #555555 !important;
        --wp--preset--color--contrast-4: #777777 !important;
        --wp--preset--color--contrast-5: #999999 !important;
        --wp--preset--color--neutral: #cccccc !important;
        --wp--preset--color--portfolio-dark: #000000 !important;
        --wp--preset--color--portfolio-white: #ffffff !important;
        --wp--preset--color--portfolio-border-light: #cccccc !important;
        --wp--preset--color--portfolio-border-medium: #999999 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Ensure all text is dark */
    *, *::before, *::after {
        color: #000000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transition: none !important;
    }

    /* Remove background colors and images */
    body, .wp-site-blocks,
    .wp-block-group, .wp-block-cover,
    .wp-block-columns, .wp-block-column,
    header, footer, main, section, article {
        background: transparent !important;
        background-image: none !important;
    }

    /* Restore image brightness (undo dark mode dimming) */
    img, video, iframe {
        filter: none !important;
    }

    /* Hide non-printable elements */
    .dark-mode-toggle,
    .wp-block-nickreid-dark-mode-toggle,
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Ensure links are visible and show URLs */
    a, a:visited {
        color: #000000 !important;
        text-decoration: underline !important;
    }

    /* Allow borders to print with lighter weight */
    .post-password-form {
        border-color: #cccccc !important;
    }
}