/*
Theme Name: Sol Purpose
Theme URI: https://solpurposechiropractic.com/
Author: Sol Purpose Chiropractic
Description: A bright, editorial block theme for Sol Purpose Chiropractic.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sol-purpose
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, accessibility-ready
*/

:root {
    --sp-shadow-soft: 0 18px 50px rgba(75, 46, 30, 0.1);
    --sp-border: rgba(75, 46, 30, 0.16);
}

html {
    scroll-behavior: smooth;
}

body {
    text-wrap: pretty;
}

a,
button,
input,
textarea,
select,
summary {
    outline-offset: 4px;
}

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid var(--wp--preset--color--sunset-orange);
}

.sp-site-header {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid var(--sp-border);
    background: color-mix(in srgb, var(--wp--preset--color--warm-ivory) 94%, transparent);
    backdrop-filter: blur(14px);
}

.sp-site-header .wp-block-site-logo img {
    height: auto;
    max-height: 64px;
    width: auto;
}

.sp-site-header .wp-block-navigation__container {
    row-gap: 0.6rem;
}

.sp-site-header .wp-block-navigation-item__content {
    text-underline-offset: 0.35em;
}

.sp-site-header .wp-block-navigation__submenu-container {
    min-width: 16rem !important;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow-soft);
}

.sp-header-cta .wp-block-button__link {
    white-space: nowrap;
}

.sp-hero {
    min-height: calc(100svh - 106px) !important;
    isolation: isolate;
}

.sp-hero .has-display-font-size {
    font-size: 5rem !important;
}

.sp-hero::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(36, 33, 31, 0.9) 0%, rgba(36, 33, 31, 0.62) 52%, rgba(36, 33, 31, 0.16) 100%),
        linear-gradient(0deg, rgba(36, 33, 31, 0.3), transparent 45%);
    content: "";
}

.sp-hero > .wp-block-cover__inner-container {
    z-index: 1;
}

.sp-hero > .wp-block-cover__inner-container > .wp-block-group {
    max-width: 880px !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    --wp--style--global--content-size: 880px;
}

.sp-kicker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sp-kicker::before {
    width: 2.75rem;
    height: 2px;
    background: var(--wp--preset--color--golden-sun);
    content: "";
}

.sp-purpose-gradient {
    color: var(--wp--preset--color--golden-sun);
    background: var(--wp--preset--gradient--purpose);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sp-section-rule {
    position: relative;
}

.sp-section-rule::before {
    position: absolute;
    top: 0;
    left: max(1.25rem, calc((100% - var(--wp--style--global--wide-size)) / 2));
    width: min(8rem, 24vw);
    height: 3px;
    background: var(--wp--preset--gradient--purpose);
    content: "";
}

.sp-editorial-card {
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    background: var(--wp--preset--color--paper);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.sp-editorial-card:hover,
.sp-editorial-card:focus-within {
    border-color: var(--wp--preset--color--golden-sun);
    box-shadow: var(--sp-shadow-soft);
    transform: translateY(-5px);
}

.sp-editorial-card .wp-block-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.sp-number {
    font-family: var(--wp--preset--font-family--display);
    font-size: 5.5rem;
    line-height: 0.85;
    color: var(--wp--preset--color--golden-sun);
}

.sp-process-step {
    border-top: 1px solid var(--sp-border);
}

.sp-team-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
}

.sp-location-band {
    background:
        linear-gradient(rgba(248, 243, 235, 0.94), rgba(248, 243, 235, 0.94)),
        radial-gradient(circle at 20% 20%, rgba(245, 166, 35, 0.18), transparent 38%);
}

.sp-icon-disc {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 50%;
    background: var(--wp--preset--color--bright-highlight);
    color: var(--wp--preset--color--dark-espresso);
    font-size: 1.25rem;
    font-weight: 700;
}

.sp-reveal {
    animation: sp-reveal 600ms both;
    animation-timeline: view();
    animation-range: entry 10% cover 28%;
}

@keyframes sp-reveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-back-to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 50;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: var(--wp--preset--color--dark-espresso);
    color: var(--wp--preset--color--warm-ivory);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.75rem);
    transition: opacity 160ms ease, transform 160ms ease;
}

.sp-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .sp-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .sp-site-header .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box;
        width: 100vw !important;
        height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 1.5rem;
        background: var(--wp--preset--color--warm-ivory);
        color: var(--wp--preset--color--dark-espresso);
    }

    .sp-site-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    .sp-site-header .wp-block-navigation__responsive-dialog,
    .sp-site-header .wp-block-navigation__responsive-container-content,
    .sp-site-header .wp-block-navigation__container {
        box-sizing: border-box;
        width: 100% !important;
    }

    .sp-site-header .wp-block-navigation__responsive-container-content,
    .sp-site-header .wp-block-navigation__container {
        align-items: stretch !important;
    }

    .sp-site-header .wp-block-navigation__container {
        flex-direction: column !important;
        gap: 0.45rem !important;
    }

    .sp-site-header .wp-block-navigation__responsive-container-content {
        padding-top: 3.5rem !important;
    }

    .sp-site-header .wp-block-navigation-item {
        width: 100%;
    }

    .sp-site-header .wp-block-navigation-item__content {
        box-sizing: border-box;
        width: 100%;
        padding: 0.45rem 0;
    }

    .sp-site-header .wp-block-navigation__submenu-container {
        position: static !important;
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.25rem 0 0.5rem 1rem !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .sp-site-header .wp-block-navigation__responsive-container-close {
        position: absolute;
        top: 0;
        right: 0;
    }

    .sp-header-cta {
        display: none !important;
    }

    .sp-hero::after {
        background: linear-gradient(90deg, rgba(36, 33, 31, 0.88), rgba(36, 33, 31, 0.5));
    }

    .sp-hero {
        min-height: calc(100svh - 98px) !important;
    }

    .sp-hero > .wp-block-cover__inner-container > .wp-block-group {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .sp-hero .has-large-font-size {
        font-size: 1.1rem !important;
        line-height: 1.45;
    }

    .has-display-font-size {
        font-size: 3.5rem !important;
    }

    .sp-hero .has-display-font-size {
        font-size: 3.25rem !important;
    }

    .sp-number {
        font-size: 4.25rem;
    }
}

@media (max-width: 600px) {
    .sp-site-header .wp-block-site-logo img {
        max-width: 145px;
    }

    .sp-hero {
        min-height: calc(100svh - 90px) !important;
    }

    .sp-hero > .wp-block-cover__inner-container > .wp-block-group {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .sp-hero .has-display-font-size {
        font-size: 2.5rem !important;
    }

    .sp-hero .has-large-font-size {
        font-size: 1.15rem !important;
        line-height: 1.45;
    }

    .sp-hero .wp-block-buttons {
        gap: 0.75rem;
    }

    .sp-number {
        font-size: 3.25rem;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}