/*
Theme Name: Puzzle Theme
Theme URI: https://example.invalid/puzzle-theme
Author: Puzzle Project
Description: A warm, playful block theme for printable puzzles and activities.
Version: 0.2.8
Requires at least: 6.8
Requires PHP: 8.1
Text Domain: puzzle-theme
*/

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.pzl-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}.pzl-signup-form{margin-block:1.5rem}.pzl-signup-form input[type=email]{max-width:28rem}.pzl-signup-success{color:#176b3a}.pzl-signup-error{color:#9b1c1c}

.pzl-signup-form input[type=email],
.pzl-signup-form input[type=text] {
    border-radius: 999px;
    border: 2px solid var(--wp--preset--color--mist);
    padding: 0.6rem 1.1rem;
}

.pzl-signup-form button,
.pzl-signup-form input[type=submit] {
    border-radius: 999px;
    border: none;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    font-weight: 800;
    font-family: var(--wp--preset--font-family--heading);
    padding: 0.65rem 1.5rem;
    box-shadow: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    cursor: pointer;
}

.pzl-signup-form button:hover,
.pzl-signup-form input[type=submit]:hover {
    background: var(--wp--preset--color--primary-dark);
}

.pzt-site-footer .pzl-signup-form input[type=email],
.pzt-site-footer .pzl-signup-form input[type=text] {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: var(--wp--preset--color--white);
}

:where(.wp-site-blocks) {
    min-height: 100vh;
}

:where(a) {
    text-underline-offset: 0.15em;
    transition: color 0.15s ease;
}

:where(h1, h2, h3, h4, h5, h6) a {
    text-decoration: none;
}

:where(.wp-block-button__link, .wp-element-button) {
    min-height: 2.75rem;
    box-shadow: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

:where(.wp-block-button__link, .wp-element-button):hover {
    opacity: 0.9;
}

:where(.wp-block-button__link, .wp-element-button):active {
    opacity: 0.8;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    border-width: 2px;
    box-shadow: none;
}

:where(input, select, textarea) {
    max-width: 100%;
}

.wp-site-blocks {
    overflow-x: clip;
}

.pzt-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pzt-reveal.pzt-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Header ---------- */

.pzt-site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(253, 250, 245, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid var(--wp--preset--color--mist);
}

.pzt-site-header .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
}

.pzt-site-header .wp-block-navigation {
    --wp--custom--nav-gap: 0.25rem;
}

.pzt-site-header .wp-block-navigation-item > a,
.pzt-site-header .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.pzt-site-header .wp-block-navigation-item > a:hover {
    background: var(--wp--preset--color--mist);
    color: var(--wp--preset--color--primary);
}

.pzt-site-header > .wp-block-search,
.wp-block-template-part > .wp-block-search {
    margin-left: auto;
    max-width: 32rem;
}

.pzt-site-header .wp-block-search__input {
    border-radius: 999px !important;
    border: 2px solid var(--wp--preset--color--mist) !important;
}

.pzt-site-header .wp-block-search__button {
    border-radius: 999px !important;
}

/* ---------- Hero ---------- */

.pzt-hero {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--wp--preset--color--mist);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
    isolation: isolate;
}

.pzt-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(16rem, 40vw);
    height: min(16rem, 40vw);
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    top: -6rem;
    right: -5rem;
    transform: translateY(calc(var(--pzt-parallax-y, 0) * 1px));
}

.pzt-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(9rem, 22vw);
    height: min(9rem, 22vw);
    border-radius: 50%;
    background: var(--wp--preset--color--secondary);
    bottom: -3rem;
    right: 4rem;
    transform: translateY(calc(var(--pzt-parallax-y, 0) * -1.2px));
}

.pzt-hero[data-pzt-parallax] {
    will-change: transform;
}

.pzt-hero > * {
    position: relative;
    z-index: 1;
}

.pzt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white) !important;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}

.pzt-hero h1 {
    text-wrap: balance;
}

.pzt-hero h1 .pzt-mark {
    background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
    padding: 0 0.15em;
    border-radius: 0.2em;
}

.pzt-hero__stats {
    gap: 2.5rem;
    margin-top: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--40);
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

.pzt-hero__stat-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    opacity: 0.55;
}

.pzt-hero__stat-number {
    margin: 0.1rem 0 0;
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--wp--preset--color--primary-dark);
}

.pzt-hero__proof {
    color: var(--wp--preset--color--ink);
    opacity: 0.75;
    margin-top: var(--wp--preset--spacing--40);
    font-weight: 700;
}

.pzt-draft-preview-notice {
    box-sizing: border-box;
    max-width: var(--wp--style--global--wide-size);
    margin: 1rem auto;
    padding: 0.75rem 1rem;
    border-left: 0.25rem solid var(--wp--preset--color--secondary);
    background: var(--wp--preset--color--mist);
    font-size: 0.875rem;
    border-radius: 0.5rem;
}

/* ---------- Audience showcase sections ---------- */

.pzt-audience-section {
    box-sizing: border-box;
    max-width: var(--wp--style--global--wide-size);
    margin: var(--wp--preset--spacing--70) auto 0;
    padding-inline: 1rem;
}

.pzt-audience-section__title {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: var(--wp--preset--font-size--x-large);
    margin: 0 0 1.5rem;
}

.pzt-audience-section__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.pzt-audience-section__grid > .pzt-printable-card {
    flex: 1 1 calc(33.333% - 0.84rem);
    min-width: 0;
}

@media (max-width: 1024px) {
    .pzt-audience-section__grid > .pzt-printable-card {
        flex: 1 1 calc(50% - 0.65rem);
    }
}

@media (max-width: 640px) {
    .pzt-audience-section__grid > .pzt-printable-card {
        flex: 1 1 100%;
    }
}

/* ---------- Printable cards ---------- */

.pzt-printable-card {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--white);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
    border-radius: 1rem;
    padding: 1rem 1rem 1.5rem;
    box-shadow: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pzt-printable-card:hover {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--primary);
    box-shadow: 0 8px 20px rgba(45, 52, 54, 0.08);
}

.pzt-printable-card .pzt-card-media,
.pzt-printable-card .wp-block-post-featured-image {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--wp--preset--color--mist);
    border-radius: 1.1rem;
    overflow: hidden;
    margin: 0 0 1rem;
}

.pzt-audience-section__grid .pzt-card-media,
.pzt-audience-section__grid .wp-block-post-featured-image {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}

.pzt-printable-card .pzt-card-media img,
.pzt-printable-card .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pzt-printable-card:hover .pzt-card-media img,
.pzt-printable-card:hover .wp-block-post-featured-image img {
    transform: scale(1.06);
}

.pzt-printable-card .pzt-card-title,
.pzt-printable-card .wp-block-post-title {
    margin: 0 0 0.5rem;
    font-size: var(--wp--preset--font-size--medium);
}

.pzt-printable-card .pzt-card-title a,
.pzt-printable-card .wp-block-post-title a {
    color: var(--wp--preset--color--ink);
}

.pzt-printable-card .pzt-card-excerpt,
.pzt-printable-card .wp-block-post-excerpt {
    margin: 0 0 0.75rem;
    opacity: 0.8;
}

.pzt-printable-card .pzt-card-link,
.pzt-printable-card .wp-block-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.75rem;
    font-weight: 800;
    color: var(--wp--preset--color--primary-dark) !important;
}

.pzt-printable-card .pzt-card-link::after,
.pzt-printable-card .wp-block-read-more::after {
    content: "\2192";
    transition: transform 0.18s ease;
}

.pzt-printable-card .pzt-card-link:hover::after,
.pzt-printable-card .wp-block-read-more:hover::after {
    transform: translateX(3px);
}

/* Metadata pills */

.pzt-printable-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.pzt-printable-metadata div {
    min-width: 0;
}

.pzt-printable-metadata dt {
    display: none;
}

.pzt-printable-metadata dd {
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--wp--preset--color--mist);
    color: var(--wp--preset--color--ink);
    opacity: 0.8;
}

.wp-block-post-template .pzt-printable-metadata div:nth-of-type(1) dd {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    opacity: 1;
    font-weight: 800;
}

/* Single-printable page uses the same metadata block but wants labels visible as a normal fact grid */
main .pzt-printable-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
    margin: 1.5rem 0;
}

main .pzt-printable-metadata dt {
    display: block;
    color: var(--wp--preset--color--primary-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

main .pzt-printable-metadata dd {
    display: block;
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp--preset--color--ink);
    margin: 0.15rem 0 0;
}

/* Cards inside a Query Loop shouldn't get the fact-grid treatment */
.wp-block-post-template .pzt-printable-metadata {
    display: flex !important;
    grid-template-columns: none !important;
    margin: 0 0 0.75rem !important;
}

.wp-block-post-template .pzt-printable-metadata dt {
    display: none !important;
}

.wp-block-post-template .pzt-printable-metadata dd {
    display: inline-flex !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
}

/* ---------- Preview gallery / related ---------- */

.pzt-preview-gallery,
.pzt-related-printables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-block: 2rem;
}

/* A single wide "inside this printable" strip gets the full width, not one grid cell. */
.pzt-preview-gallery--single {
    grid-template-columns: 1fr;
}

.pzt-preview-gallery a {
    display: block;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.pzt-preview-gallery a:hover {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--primary);
}

.pzt-preview-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.pzt-related-printables article {
    padding: 1.25rem;
    background: var(--wp--preset--color--white);
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
    border-radius: 1rem;
    box-shadow: none;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.pzt-related-printables article:hover {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--primary);
}

/* ---------- Safety note / callouts ---------- */

.pzt-safety-note {
    border-radius: 1.25rem !important;
}

/* ---------- Breadcrumbs ---------- */

.pzt-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.8;
}

.pzt-breadcrumbs li:not(:last-child)::after {
    content: "\2022";
    margin-left: 0.5rem;
    opacity: 0.5;
}

/* ---------- Section bands ---------- */

.pzt-band {
    position: relative;
}

.pzt-band--teal {
    background: color-mix(in srgb, var(--wp--preset--color--secondary) 12%, white);
}

/* ---------- Category navigation cards ---------- */

.pzt-category-card {
    display: block;
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
    box-sizing: border-box;
    background: var(--wp--preset--color--white);
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 10%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.pzt-category-card::before {
    content: "";
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--pzt-card-accent, var(--wp--preset--color--primary));
    margin-bottom: 1rem;
}

.pzt-category-card:hover {
    transform: translateY(-3px);
    border-color: var(--pzt-card-accent, var(--wp--preset--color--primary));
}

.pzt-category-card h3 {
    margin-top: 0;
}

.pzt-category-card h3 a {
    color: var(--wp--preset--color--ink);
}

/* ---------- Newsletter CTA ---------- */

.pzt-newsletter-cta {
    position: relative;
    border-radius: 1.25rem !important;
    overflow: hidden;
    background: var(--wp--preset--color--primary) !important;
}

/* ---------- Footer ---------- */

.pzt-site-footer {
    background: var(--wp--preset--color--deep) !important;
    color: var(--wp--preset--color--white);
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    margin-top: var(--wp--preset--spacing--70);
}

.pzt-site-footer :where(a) {
    color: var(--wp--preset--color--white);
    opacity: 0.85;
}

.pzt-site-footer :where(a):hover {
    opacity: 1;
    color: var(--wp--preset--color--accent);
}

.pzt-site-footer h3 {
    color: var(--wp--preset--color--accent);
    font-size: var(--wp--preset--font-size--medium);
}

.pzt-site-footer .wp-block-site-title a {
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--heading);
}

/* ---------- 404 ---------- */

.pzt-404-illustration {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 800;
    font-size: clamp(4rem, 12vw, 8rem);
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 781px) {
    .pzt-site-footer > .is-layout-grid {
        grid-template-columns: 1fr;
    }

    .pzt-site-header > .wp-block-search,
    .wp-block-template-part > .wp-block-search {
        width: 100%;
        max-width: none;
    }

    main .pzt-printable-metadata,
    .pzt-preview-gallery,
    .pzt-related-printables {
        grid-template-columns: 1fr;
    }
}

.pzt-download-choice {
    margin-block: 1.5rem;
}

.pzt-coming-soon {
    margin-block: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--wp--preset--color--ink);
    border-radius: 1rem;
    background: var(--wp--preset--color--white);
}

.pzt-coming-soon p {
    margin: 0 0 0.75rem;
}

.pzt-coming-soon__title {
    font-weight: 700;
    font-size: var(--wp--preset--font-size--large);
}

.pzt-coming-soon__free-title {
    font-weight: 700;
}

.pzt-coming-soon__free {
    margin: 0;
    padding-left: 1.25rem;
}

.pzt-coming-soon__free li + li {
    margin-top: 0.35rem;
}

.pzt-download-choice__title {
    margin: 0 0 0.75rem;
    font-weight: 700;
}

.pzt-download-choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pzt-download-choice__options .wp-element-button {
    display: inline-flex;
    flex: 1 1 14rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-decoration: none;
}

.pzt-download-choice__options .wp-element-button span {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    opacity: 0.85;
}

.pzt-download-choice__bw.wp-element-button {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink);
    border: 2px solid var(--wp--preset--color--ink);
}

.pzt-download-quota {
    margin: 0.5rem 0 0;
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.8;
}

.pzl-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.pzl-gate {
    margin-block: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--wp--preset--color--secondary);
    border-radius: 14px;
    background: var(--wp--preset--color--canvas);
    scroll-margin-top: 6rem;
}

.pzl-gate p {
    margin: 0 0 0.75rem;
}

.pzl-gate p:last-child {
    margin-bottom: 0;
}

.pzl-gate--ok {
    border-width: 3px;
    border-color: var(--wp--preset--color--secondary);
    background: #e6f7f5;
    padding: 1.5rem 1.75rem;
}

.pzl-gate--sent {
    border-width: 3px;
    border-color: var(--wp--preset--color--accent);
    background: #fff6db;
    padding: 1.5rem 1.75rem;
}

.pzl-gate__badge {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.pzl-gate--ok .pzl-gate__title,
.pzl-gate--sent .pzl-gate__title {
    font-size: var(--wp--preset--font-size--large);
    line-height: 1.2;
    text-wrap: balance;
}

.pzl-gate__list {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.pzl-gate__list li {
    margin-block: 0.5rem;
}

.pzl-gate__note {
    font-size: var(--wp--preset--font-size--small);
    opacity: 0.85;
}

.pzl-gate--error {
    border-color: var(--wp--preset--color--primary);
}

.pzl-gate__title {
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium);
}

.pzl-gate__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pzl-gate__row input[type=email] {
    flex: 1 1 14rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--wp--preset--color--mist);
    border-radius: 8px;
    font-size: 1rem;
}

.pzl-gate__consent {
    font-size: var(--wp--preset--font-size--small);
}

.pzl-gate__consent input {
    margin-right: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .pzt-reveal {
        opacity: 1;
        transform: none;
    }

    .pzt-printable-card,
    .pzt-printable-card .pzt-card-media img,
    .pzt-printable-card .wp-block-post-featured-image img,
    .pzt-preview-gallery a,
    .pzt-related-printables article,
    .pzt-category-card,
    :where(.wp-block-button__link, .wp-element-button) {
        transition: none !important;
    }

    .pzt-hero {
        background-attachment: initial !important;
    }
}