/**
 * Layout & Spacing Utilities
 */

/* Padding */
.py-section-gap,
.py-section-80 {
    padding-top: var(--wp--preset--spacing--80) !important;
    padding-bottom: var(--wp--preset--spacing--80) !important;
}

.py-section-half {
    padding-top: var(--wp--preset--spacing--40) !important;
    padding-bottom: var(--wp--preset--spacing--40) !important;
}

.px-section-40 {
    padding-left: var(--wp--preset--spacing--40) !important;
    padding-right: var(--wp--preset--spacing--40) !important;
}

.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.pt-8 {
    padding-top: 2rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-card-large {
    padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) !important;
}

.p-12 {
    padding: 3rem !important;
}

/* Margin */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-12 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.mt-tiny {
    margin-top: 0.5rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-6 {
    margin-top: 2rem !important;
}

.mt-8 {
    margin-top: 3rem !important;
}

.mt-sections-50 {
    margin-top: var(--wp--preset--spacing--50) !important;
}

.mt-sections-40 {
    margin-top: var(--wp--preset--spacing--40) !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-6 {
    margin-bottom: 2rem !important;
}

.mb-8 {
    margin-bottom: 3rem !important;
}

.mb-sections-60 {
    margin-bottom: var(--wp--preset--spacing--60) !important;
}

.mb-sections-40 {
    margin-bottom: var(--wp--preset--spacing--40) !important;
}

/* Footer Fix */
:where(.wp-site-blocks)>footer.wp-block-template-part {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* Flex & Gap */
.gap-30 {
    gap: var(--wp--preset--spacing--30) !important;
}

.gap-40 {
    gap: var(--wp--preset--spacing--40) !important;
}

.gap-50 {
    gap: var(--wp--preset--spacing--50) !important;
}

.gap-60 {
    gap: var(--wp--preset--spacing--60) !important;
}

.gap-64 {
    gap: 4rem !important;
}

.gap-80 {
    gap: var(--wp--preset--spacing--80) !important;
}

.has-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.has-flex-center-gap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.d-block {
    display: block !important;
}

/* Widths & Heights */
.w-40 {
    flex-basis: 40% !important;
}

.w-45 {
    flex-basis: 45% !important;
}

.w-50 {
    flex-basis: 50% !important;
}

.w-55 {
    flex-basis: 55% !important;
}

.w-60 {
    flex-basis: 60% !important;
}

.max-w-40ch {
    max-width: 40ch !important;
}

.min-h-screen {
    min-height: 100vh !important;
}

/* Exception for hero-impact structure - allow natural height for centering */
body .wp-block-cover__inner-container .novamotion-hero-impact.min-h-screen {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    all: initial;
}

.min-h-50 {
    min-height: 50vh !important;
}

.min-h-hero {
    min-height: 85vh !important;
}

.min-h-100 {
    min-height: 100% !important;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* Images & Object Fit */
.aspect-square {
    aspect-ratio: 1 !important;
}

.aspect-3-4 {
    aspect-ratio: 3/4 !important;
}

.object-cover {
    object-fit: cover !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.brand-logo-small {
    width: 80px !important;
}

.brand-logo-medium {
    width: 100px !important;
}


/**
 * Typography Utilities
 */
.text-technical-small {
    font-family: var(--wp--preset--font-family--outfit) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
}

.text-technical-mono {
    font-family: var(--wp--preset--font-family--roboto-mono) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

.text-technical-xs {
    font-family: var(--wp--preset--font-family--roboto-mono) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 500 !important;
}

.text-technical-large {
    color: var(--wp--preset--color--charcoal) !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
}

/**
 * Contextual Utilities (Dark Backgrounds)
 * Use .is-dark-context on containers with dark backgrounds
 */
.is-dark-context,
.is-dark-section,
.has-charcoal-background-color,
.is-technical-card-dark,
.is-style-dark-grid {
    /* Token overrides for dark backgrounds */
    --tech-border: rgba(255, 255, 255, 0.1);
    --tech-border-light: rgba(255, 255, 255, 0.15);
    --tech-pill-bg: rgba(255, 255, 255, 0.08);
}

/* Base text behavior in dark context */
.is-dark-context,
.is-dark-section,
.has-charcoal-background-color,
.is-technical-card-dark,
.is-dark-context p,
.is-dark-section p,
.has-charcoal-background-color p,
.is-dark-context .wp-block-heading,
.is-dark-section .wp-block-heading,
.has-charcoal-background-color .wp-block-heading,
.is-dark-context .text-technical-large,
.is-dark-section .text-technical-large {
    color: var(--wp--preset--color--white) !important;
}

.is-dark-section a,
.has-charcoal-background-color a {
    color: white !important;
}

/* Technical Color Adaptation (Cosmic Blue -> Cosmic Blue Light) */
.is-dark-context .has-cosmic-blue-color,
.is-dark-section .has-cosmic-blue-color,
.has-charcoal-background-color .has-cosmic-blue-color,
.is-dark-context.has-cosmic-blue-color,
.is-dark-section.has-cosmic-blue-color {
    color: var(--wp--preset--color--cosmic-blue-light) !important;
}

/* Muted / Mono text adaptation */
.is-dark-context .has-tech-gray-color,
.is-dark-section .has-tech-gray-color,
.has-charcoal-background-color .has-tech-gray-color,
.is-dark-context .text-technical-mono,
.is-dark-section .text-technical-mono,
.has-charcoal-background-color .text-technical-mono {
    color: var(--wp--preset--color--white) !important;
    opacity: 0.6;
}

/* Border adaptation */
.is-dark-context .has-technical-border,
.is-dark-section .has-technical-border,
.has-charcoal-background-color .has-technical-border,
.is-dark-context .has-border-bottom-tech,
.is-dark-section .has-border-bottom-tech,
.has-charcoal-background-color .has-border-bottom-tech,
.is-dark-context .wp-block-separator,
.is-dark-section .wp-block-separator,
.has-charcoal-background-color .wp-block-separator {
    border-color: var(--tech-border) !important;
}

/* Pill adaptation */
.is-dark-context .is-style-technical-pill,
.is-dark-section .is-style-technical-pill,
.has-charcoal-background-color .is-style-technical-pill {
    background: var(--tech-pill-bg) !important;
    border-color: var(--tech-border-light) !important;
}

/**
 * Visual Utilities
 */
.has-glass-effect {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Borders & Radius */
.rounded-none {
    border-radius: 0 !important;
}

.rounded-0 {
    border-radius: 0px !important;
}

.rounded-blob {
    border-radius: 0 100px 100px 100px !important;
}

.has-24px-radius {
    border-radius: 24px !important;
}

.has-12px-radius {
    border-radius: 12px !important;
}

.border-radius-2em {
    border-radius: 2em !important;
}

.has-technical-border {
    border: 1px solid var(--tech-border-light);
}

.has-border-bottom-tech {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.5rem;
}

.border-top-light {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.border-bottom-light {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.border-all-light {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Filters */
.has-technical-logos img {
    filter: grayscale(1) opacity(0.6);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.has-technical-logos img:hover {
    filter: grayscale(0) opacity(1);
}

/* Separators */
.has-technical-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}


.has-technical-separator::before,
.has-technical-separator::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background: currentColor;
    opacity: 0.25;
}


.has-technical-separator span {
    padding: 0 1.5rem;
}


/* Narrative & Poster Utilities */
.pl-15 {
    padding-left: 15% !important;
}

.pr-15 {
    padding-right: 15% !important;
}

.pl-25 {
    padding-left: 25% !important;
}

.pr-25 {
    padding-right: 25% !important;
}

.pl-8-percent {
    padding-left: 8% !important;
}

.pr-10-percent {
    padding-right: 10% !important;
}

.pt-250 {
    padding-top: 250px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pb-150 {
    padding-bottom: 150px !important;
}

.p-poster {
    padding: 4rem !important;
}

.p-poster-content {
    padding: 2rem !important;
}



/* Full Width Canvas Template */
.is-page-full-canvas {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block-start: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
}


.is-page-full-canvas>.wp-block-post-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Wide Container for Inner Blocks */
.container-wide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1600px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
    box-sizing: border-box;
}

@media (max-width: 781px) {
    .container-wide {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}