/*
Theme Name: Pixel Jar 2026
Theme URI: https://www.pixeljar.com
Description: Pixel Jar's site theme. A child theme of Ollie.
Author: Pixel Jar
Author URI: https://www.pixeljar.com
Template: ollie
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixel-jar-2026
*/

/* Navy surfaces that don't set their own colors get white text and links. */
.has-main-background-color:not(.has-text-color),
.has-navy-deep-background-color:not(.has-text-color) {
    color: var(--wp--preset--color--base);
}

.has-main-background-color:not(.has-link-color) a:where(:not(.wp-element-button)),
.has-navy-deep-background-color:not(.has-link-color) a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--base);
}

.has-main-background-color:not(.has-link-color) a:where(:not(.wp-element-button)):hover,
.has-navy-deep-background-color:not(.has-link-color) a:where(:not(.wp-element-button)):hover {
    color: var(--wp--preset--color--main-accent);
}

/* Light cards nested inside navy get their normal colors back. */
:is(.has-main-background-color, .has-navy-deep-background-color) :is(.has-base-background-color, .has-tertiary-background-color, .has-primary-accent-background-color, .has-primary-alt-accent-background-color):not(.has-text-color) {
    color: var(--wp--preset--color--secondary);
}

:is(.has-main-background-color, .has-navy-deep-background-color) :is(.has-base-background-color, .has-tertiary-background-color, .has-primary-accent-background-color, .has-primary-alt-accent-background-color):not(.has-link-color) a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--primary-alt);
}

/* On navy surfaces the teal focus ring is too dark, so switch it to white. */
.has-main-background-color :focus-visible,
.has-navy-deep-background-color :focus-visible {
    outline-color: var(--wp--preset--color--base);
}

/* The default navy hover would disappear on navy surfaces. */
.has-main-background-color .wp-element-button:hover,
.has-navy-deep-background-color .wp-element-button:hover {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--main);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--teal-bright);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.5em;
}

.pj-footer-links {
    list-style: none;
}

.pj-call-button .wp-block-button__link {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
    white-space: nowrap;
}

.pj-call-label-short {
    display: none;
}

/* Below 900px the full label crowds the inline menu, so switch to the short one. */
@media (max-width: 899px) {
    /* Swap labels with display so the accessible name always matches the visible label (WCAG 2.5.3). */
    .pj-call-label-full {
        display: none;
    }

    .pj-call-label-short {
        display: inline;
    }

    .pj-call-button .wp-block-button__link {
        font-size: var(--wp--preset--font-size--x-small);
        padding: 0.6em 0.9em;
    }
}

/* Keep the header menu collapsed through tablet widths so it never wraps (core expands it at 600px). */
@media (min-width: 600px) and (max-width: 899px) {
    header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

@media (max-width: 600px) {
    .pj-logo img {
        width: 120px !important;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Long pasted URLs in older posts would otherwise push phones into sideways scrolling. */
.wp-block-post-content {
    overflow-wrap: break-word;
}

/* Hover and focus transitions stay at 150ms (spec 3.6); the reduced-motion block above turns them off. */
.wp-element-button,
.wp-block-button__link {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}