/*
Theme Name:    McCullough Digital
Theme URI:     https://mccullough.digital/
Author:        McCullough Digital
Author URI:    https://mccullough.digital/
Description:   Custom theme scaffold with fixed header, mobile menu, and simple template hierarchy.
Version:       1.2.45
License:       GNU General Public License v2 or later
License URI:   http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   mccullough-digital
*/

/* --- Variables --- */
/* stylelint-disable custom-property-pattern -- WordPress preset aliases retain core naming */

:root {
    --logo-size-header: clamp(56px, 6vw, 72px);
    --logo-size-footer: clamp(96px, 14vw, 140px);
    --header-padding-top: clamp(8px, 2.6vw, 18px);
    --header-padding-bottom: clamp(10px, 1.6vw, 16px);
    --header-padding-inline: clamp(28px, 6vw, 72px);
    --nav-item-gap: clamp(0.8rem, 1.6vw, 1.6rem);
    --header-height: calc(var(--logo-size-header) + var(--header-padding-top) + var(--header-padding-bottom));
    --mcd-header-offset: var(--header-height);
    --mcd-admin-bar-offset: 0px;
    --mcd-effective-header-offset: calc(var(--mcd-header-offset, var(--header-height)) + var(--mcd-admin-bar-offset, 0px));
    --mcd-header-visibility: 1;
    --mcd-content-top-offset: var(--mcd-effective-header-offset);
    --space-inline-container: clamp(24px, 4vw, 64px);
    --space-inline-container-wide: clamp(32px, 5vw, 80px);
    --space-section-sm: clamp(32px, 4vw, 48px);
    --space-section-md: clamp(48px, 6vw, 72px);
    --space-section-lg: clamp(72px, 9vw, 120px);
    /* Neon noir palette */
    --neon-cyan: var(--wp--preset--color--neon-cyan, #00e5ff);
    --neon-magenta: var(--wp--preset--color--neon-magenta, #ff00e0);
    --deep-purple: var(--wp--preset--color--deep-purple, #6e2afb);
    --neon-amber: var(--wp--preset--color--neon-amber, #ff6b00);
    --neon-violet: #8a6bff;
    --charcoal-bg: #1a1a22;
    --background-dark: var(--wp--preset--color--background-dark, #040816);
    --surface-dark: var(--wp--preset--color--surface-dark, #0a1226);
    --surface-darker: #060d1c;
    --surface-border: var(--wp--preset--color--surface-border, #1e2536);
    --surface-overlay: rgba(8, 14, 32, 0.82);
    --surface-glass: linear-gradient(160deg, rgba(6, 14, 36, 0.88), rgba(12, 18, 42, 0.92));
    --text-primary: var(--wp--preset--color--text-primary, #eaf2ff);
    --text-secondary: var(--wp--preset--color--text-secondary, #c5d8f2);
    --text-tertiary: var(--wp--preset--color--text-tertiary, #9dacd6);
    --text-muted: #7f8cb8;
    --text-contrast: #0b0c10;
    /* Disable global text outline/shadow (keeps component-specific glows). */
    --mcd-text-outline-shadow: none;
    --mcd-text-outline-shadow-strong: none;
    --font-hero: 'Caveat', 'Segoe Script', cursive;
    --font-display: 'Manrope', 'Segoe UI', helvetica, arial, sans-serif;
    --font-body: 'Manrope', 'Segoe UI', helvetica, arial, sans-serif;
    --font-ui: var(--font-display);
    --bg-noise-opacity: 0.08;
    --bg-grid-opacity: 0.03;
    --bg-vignette:
        radial-gradient(120% 120% at 50% 0%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%),
        radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
    --gradient-neon-night:
        radial-gradient(circle at 16% 10%, rgba(255, 116, 228, 0.16), transparent 60%),
        radial-gradient(circle at 84% 12%, rgba(79, 240, 255, 0.18), transparent 66%),
        radial-gradient(circle at 86% 84%, rgba(255, 107, 0, 0.24), transparent 72%),
        linear-gradient(190deg, rgba(6, 10, 28, 1) 0%, rgba(4, 8, 22, 1) 52%, rgba(3, 6, 18, 1) 100%);
    --gradient-neon-dusk:
        radial-gradient(140% 120% at 18% 12%, rgba(79, 240, 255, 0.2), transparent 68%),
        radial-gradient(110% 120% at 82% 18%, rgba(255, 116, 228, 0.18), transparent 74%),
        radial-gradient(130% 110% at 78% 80%, rgba(255, 107, 0, 0.18), transparent 76%),
        linear-gradient(175deg, rgba(10, 18, 44, 0.94), rgba(4, 8, 22, 0.9));
    --gradient-neon-light:
        radial-gradient(120% 130% at 20% 18%, rgba(79, 240, 255, 0.16), transparent 74%),
        radial-gradient(130% 140% at 78% 12%, rgba(255, 116, 228, 0.14), transparent 76%),
        radial-gradient(135% 140% at 48% 86%, rgba(255, 107, 0, 0.18), transparent 78%),
        linear-gradient(180deg, #f7faff 0%, #eaf2ff 100%);
    --gradient-panel: linear-gradient(150deg, rgba(6, 14, 36, 0.78), rgba(15, 20, 44, 0.92));
    --gradient-cta: linear-gradient(135deg,
            var(--neon-cyan) 0%,
            var(--neon-magenta) 52%,
            var(--neon-amber) 100%);
    --panel-border: 1px solid rgba(79, 240, 255, 0.3);
    --panel-shadow: 0 28px 80px rgba(3, 10, 32, 0.55);
    --glow-cyan-soft: 0 0 32px rgba(79, 240, 255, 0.28);
    --glow-magenta-soft: 0 0 32px rgba(255, 116, 228, 0.28);
    --glow-cyan-strong: 0 32px 64px rgba(79, 240, 255, 0.28);
    --mcd-h1-glow:
        0 0 8px rgba(255, 255, 255, 0.2),
        0 0 16px rgba(255, 255, 255, 0.1);
    --mcd-hero-title-glow: var(--mcd-h1-glow);
    --btn-scale-hover: 1.02;
    --btn-height-sm: 2.25rem;
    --btn-height-md: 2.75rem;
    --btn-height-lg: 3.25rem;
    --page-background:
        var(--bg-vignette), linear-gradient(180deg, #2a2a35 0%, #1a1a22 60%, #0f0f17 100%);

    /* Z-indexes */
    --z-index-default: 1;
    --z-index-background: 0;
    --z-index-content: 2;
    --z-index-header: 1000;
    --z-index-modal: 1001;
    --focus-ring-color: var(--neon-cyan);
    --focus-ring-offset: 3px;
    --focus-ring-shadow: 0 0 0 3px rgba(79, 240, 255, 0.35);
    /* Footer glass blur strength */
    --mcd-footer-blur: 18px;
    /* Type scale */
    --heading-1: clamp(2.5rem, 5vw, calc(56 / 18 * 1rem));
    --heading-2: clamp(2rem, 4vw, calc(44 / 18 * 1rem));
    --heading-3: clamp(1.6rem, 3.2vw, calc(32 / 18 * 1rem));
    --heading-4: clamp(1.25rem, 2.4vw, calc(24 / 18 * 1rem));
    --heading-5: clamp(1.08rem, 2vw, calc(20 / 18 * 1rem));
    --heading-6: 1rem;
}

/* stylelint-enable custom-property-pattern */

body.is-longform,
body.has-longform-typography {
    --font-body: 'Nunito', 'Manrope', 'Segoe UI', helvetica, arial, sans-serif;
}

/* --- Base reset --- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(16px, 1vw + 14px, 18px);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

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

    /* Soften or disable decorative header animations */

    #masthead.site-header {
        transition: none !important;
    }

    #masthead.site-header::before,
    #masthead.site-header::after {
        transition: none !important;
    }

    #masthead.site-header::after {
        animation: none !important;
    }

    .site-header__backdrop .stars,
    .site-header__backdrop .stars2,
    .site-header__backdrop .stars3 {
        animation: none !important;
        opacity: 0.12;
        /* calmer backdrop for reduced motion */
        transform: none !important;
    }

    /* Avoid motion-y hover shifts */

    .card__media,
    .card__media::after {
        transition: none !important;
    }

    .card:hover,
    .post-card:hover {
        transform: none !important;
        box-shadow: none;
    }
}

/* Avoid transition jitter while resizing desktop windows */
body.mcd-is-resizing *,
body.mcd-is-resizing *::before,
body.mcd-is-resizing *::after {
    transition: none !important;
    animation: none !important;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    background: var(--page-background);
    background-color: var(--background-dark);
    color: var(--text-primary);
    text-shadow: var(--mcd-text-outline-shadow);
}

/* Avoid outlining form control text (can get fuzzy at small sizes). */
body :where(input, textarea, select, option) {
    text-shadow: none;
}

/* Improve legibility for light text on busy backgrounds (text-shadow is not inherited). */
body :where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    dt,
    dd,
    blockquote,
    figcaption,
    a,
    span,
    strong,
    em,
    small,
    label,
    button) {
    text-shadow: var(--mcd-text-outline-shadow);
}

/* Hero H1 glow across site (override outline shadow). */
body .hero h1,
body .hero__headline,
body .blog-hero__title,
body .case-hero__title,
body .mcd-contact__hero-title,
body .mcd-portrait-hero__title,
body #mdl-services h1 {
    text-shadow: var(--mcd-hero-title-glow);
}

/* Slightly stronger outline for glass-card headlines. */
body :where(.mcd-home__packages-title) {
    text-shadow: var(--mcd-text-outline-shadow-strong);
}

/* Soft white glow for H1s sitewide (no black outline). */
body h1 {
    text-shadow: var(--mcd-h1-glow);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-index-background);
    background:
        repeating-linear-gradient(90deg,
            rgba(0, 229, 255, 0.25) 0,
            rgba(255, 0, 224, 0.22) 12px,
            rgba(255, 107, 0, 0.2) 24px,
            transparent 36px,
            transparent 48px),
        repeating-linear-gradient(0deg,
            rgba(0, 229, 255, 0.25) 0,
            rgba(255, 0, 224, 0.22) 12px,
            rgba(255, 107, 0, 0.2) 24px,
            transparent 36px,
            transparent 48px);
    /* animation removed: grid pulse deprecated for stability */
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-index-background);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.5"/></svg>');
    mix-blend-mode: soft-light;
    opacity: var(--bg-noise-opacity);
}

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-rendering: optimizelegibility;
}

h1 {
    font-size: var(--heading-1);
}

h2 {
    font-size: var(--heading-2);
}

h3 {
    font-size: var(--heading-3);
}

h4 {
    font-size: var(--heading-4);
}

h5 {
    font-size: var(--heading-5);
}

h6 {
    font-size: var(--heading-6);
}

.handwritten-accent {
    font-family: var(--font-hero);
    font-weight: 600;
    letter-spacing: 0.02em;
    display: inline-block;
}

body.admin-bar {
    --mcd-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --mcd-admin-bar-offset: 46px;
    }
}

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

/* Ensure content doesn't hide behind fixed header */

main.site-content {
    padding-top: var(--mcd-content-top-offset,
            var(--mcd-effective-header-offset,
                calc(var(--mcd-header-offset, var(--header-height)) + var(--mcd-admin-bar-offset, 0px))));
}

/* Backdrop blur stacking: keep header above; remove CTA z-index barrier */

body.mcd-backdrop-experiment .site-content,
body.mcd-backdrop-experiment main,
body.mcd-backdrop-experiment footer {
    z-index: auto !important;
}

body.blog main:not(.site-content),
body.archive main:not(.site-content) {
    padding-top: var(--mcd-content-top-offset,
            var(--mcd-effective-header-offset,
                calc(var(--mcd-header-offset, var(--header-height)) + var(--mcd-admin-bar-offset, 0px))));
}

body.blog main.blog-page,
body.archive main.blog-page {
    padding-top: 0;
    margin-top: 0;
}

body.home {
    --mcd-content-top-offset: var(--mcd-admin-bar-offset, 0px);
}

body.home:not(.no-header-offset) .site-content {
    padding-top: 0;
}

/* Ensure the template-part wrapper paints above main content */

header.wp-block-template-part {
    position: relative;
    z-index: 10001;
}

/* Home only: prevent the template-part wrapper from creating its own line box */

body.home header.wp-block-template-part {
    display: contents;
}

/* Home only: remove the block gap between the header template-part wrapper and main */

body.home .wp-site-blocks>header.wp-block-template-part {
    margin-bottom: 0;
}

body.home .wp-site-blocks>main {
    margin-top: -28.8px;
    position: relative;
    top: 0;
    /* cancel residual gap from block spacing stack without leaving footer gap */
}

/* Home only: zero out any theme/global block gap */

body.home .wp-site-blocks {
    /* stylelint-disable-next-line custom-property-pattern -- WP core emits this variable name */
    --wp--style--block-gap: 0 !important;
    display: block;
    line-height: 0;
    /* collapse whitespace text nodes between children */
}

/* Home only: force WP block gap reset between immediate children */

body.home .wp-site-blocks>*+* {
    margin-block-start: 0 !important;
}

body.home .wp-site-blocks>* {
    line-height: normal;
}

/* Align header/hero with admin bar so there's no extra theme gap */

html.wp-toolbar {
    margin-top: 0 !important;
}

body.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

body.mcd-header-hidden {
    --mcd-content-top-offset: var(--mcd-admin-bar-offset, 0px);
    --mcd-header-visibility: 0;
}

.section {
    padding-block: var(--space-section-md);
}

.container {
    width: min(1200px, 92vw);
    margin-inline: auto;
    padding-inline: var(--space-inline-container);
    padding-block: var(--space-section-md);
}

.container--align-wide {
    max-width: min(1400px, 95vw);
}

.container--align-full {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-inline-container-wide);
    padding-right: var(--space-inline-container-wide);
}

/* ==============================================================
# Site Header & Navigation
============================================================== */
@keyframes subtle-glow {
    0% {
        text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    }

    50% {
        text-shadow: 0 0 14px rgba(0, 229, 255, 1);
    }

    100% {
        text-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
    }
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes shake-zoom {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-5deg);
    }

    30% {
        transform: rotate(5deg);
    }

    45% {
        transform: rotate(-3deg);
    }

    60% {
        transform: rotate(3deg);
    }

    75% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes nav-pulse {
    0% {
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
    }

    50% {
        text-shadow: 0 0 18px rgba(0, 229, 255, 0.9);
    }

    100% {
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
    }
}

@keyframes grid-drift {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform: translate3d(50px, 50px, 0) rotate(360deg);
    }
}

/* @keyframes mcd-grid-pulse removed */

#masthead.site-header {
    padding: max(0px, calc(var(--header-padding-top) - 20px)) 0 var(--header-padding-bottom);
    position: fixed;
    top: var(--mcd-admin-bar-offset, 0);
    left: 0;
    right: 0;
    width: 100%;
    /* lift header above all content and overlays */
    z-index: 10002;
    background: rgba(6, 10, 28, 0.82);
    border-bottom: 1px solid rgba(79, 240, 255, 0.22);
    box-shadow: 0 16px 42px rgba(3, 8, 26, 0.6);
    backdrop-filter: saturate(185%) blur(14px);
    transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease,
        border-bottom-color 0.35s ease,
        background 0.35s ease;
}
body:not(.mcd-ambient-ready) #masthead.site-header {
    backdrop-filter: none;
}

/* Home-only: swap body pseudo background for a real DOM backdrop layer
   so backdrop-filtered sections can sample it reliably. Controlled by
   a guard class added on the front page only. */

body.mcd-backdrop-experiment::before,
body.mcd-backdrop-experiment::after {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
}

/* Dedicated backdrop element lives directly under <header> on the front page */

body.mcd-backdrop-experiment .site-backdrop {
    position: fixed;
    inset: 0;
    /* Ensure the backdrop sits behind all content */
    z-index: -1;
    pointer-events: none;
    /* Base charcoal backdrop (matches original global background) */
    background: var(--page-background);
}

/* Ensure header stays on top of hero/content */
/* Masked neon grid (from assets/cta.css) */

body.mcd-backdrop-experiment .site-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Neon gradient painted once, cut into a grid via masks */
    background-image:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0) 45%,
            rgba(255, 255, 255, 0.35) 50%,
            rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, var(--neon-cyan), var(--neon-amber), var(--neon-magenta));
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed mask image */
    -webkit-mask-image:
        repeating-linear-gradient(0deg,
            transparent 0 calc(clamp(42px, 5vw, 64px) - 2px),
            #fff calc(clamp(42px, 5vw, 64px) - 2px) clamp(42px, 5vw, 64px)),
        repeating-linear-gradient(90deg,
            transparent 0 calc(clamp(42px, 5vw, 64px) - 2px),
            #fff calc(clamp(42px, 5vw, 64px) - 2px) clamp(42px, 5vw, 64px));
    mask-image:
        repeating-linear-gradient(0deg,
            transparent 0 calc(clamp(42px, 5vw, 64px) - 2px),
            #fff calc(clamp(42px, 5vw, 64px) - 2px) clamp(42px, 5vw, 64px)),
        repeating-linear-gradient(90deg,
            transparent 0 calc(clamp(42px, 5vw, 64px) - 2px),
            #fff calc(clamp(42px, 5vw, 64px) - 2px) clamp(42px, 5vw, 64px));
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefixed mask composite */
    -webkit-mask-composite: source-over;
    mask-composite: add;
    background-size:
        300% 300%,
        auto;
    background-position:
        0% 0%,
        0% 0%;
    animation: mcd-grid-sweep 20s linear infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 0.6s ease;
    /* Phase shift mask to reduce banding through blur */
    mask-position:
        0 0.5px,
        0 0.5px;
}
body.mcd-backdrop-experiment:not(.mcd-ambient-ready) .site-backdrop::before {
    content: none;
}
body.mcd-backdrop-experiment.mcd-ambient-ready .site-backdrop::before {
    animation-play-state: running;
    opacity: 0.28;
    will-change: background-position;
}

/* Grid pulse permanently removed */

/* Centerpiece kitty image (real element for faster LCP) */

body.mcd-backdrop-experiment .site-backdrop::after {
    content: none;
}

body.mcd-backdrop-experiment .site-backdrop__kitty {
    position: absolute;
    inset: 0;
    --mcd-kitty-offset-y: -15px;
    pointer-events: none;
    display: block;
}

body.mcd-backdrop-experiment .site-backdrop__kitty img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(94vmin, 1200px);
    height: auto;
    /* Match previous background-position: center calc(50% - offset) */
    transform: translate(-50%, calc(-50% - var(--mcd-kitty-offset-y)));
    opacity: 1;
    filter: brightness(0.6);
}
body.mcd-backdrop-experiment.mcd-ambient-ready .site-backdrop__kitty img {
    filter: brightness(0.6) drop-shadow(0 26px 60px rgba(0, 0, 0, 0.75));
}

/* Desktop-only effects */
@media (min-width: 769px) {
    #masthead.site-header {
        overflow: hidden;
        /* Hides the pseudo-element when it's outside */
    }
    body.mcd-ambient-ready #masthead.site-header {
        backdrop-filter: saturate(190%) blur(18px);
        /* Slightly stronger glass on desktop */
    }
}

#masthead.site-header::after {
    content: '';
    position: absolute;
    inset: -14%;
    background-image:
        url('./assets/stars.svg'), url('./assets/stars2.svg'), url('./assets/stars3.svg');
    background-repeat: repeat;
    background-size:
        1600px 1600px,
        1400px 1400px,
        1800px 1800px;
    opacity: 0.48;
    mix-blend-mode: screen;
    transform: translate3d(-1%, -1%, 0) scale(0.98);
    animation: header-stars-drift 45s linear infinite;
    transition: opacity 0.4s ease;
    z-index: calc(var(--z-index-background) + 1);
    pointer-events: none;
    will-change: transform, opacity;
}
body:not(.mcd-ambient-ready) #masthead.site-header::after {
    content: none;
    opacity: 0;
    animation-play-state: paused;
}
body.mcd-ambient-ready #masthead.site-header::after {
    animation-play-state: running;
}

#masthead.site-header:hover::after,
#masthead.site-header:focus-within::after,
#masthead.site-header.has-modal-open::after {
    opacity: 0.78;
}

#masthead.site-header:hover {
    border-bottom-color: rgba(79, 240, 255, 0.48);
    box-shadow:
        0 26px 52px rgba(3, 8, 26, 0.55),
        0 0 34px rgba(79, 240, 255, 0.32),
        0 0 48px rgba(255, 116, 228, 0.18);
}

#masthead.site-header.hide {
    transform: translateY(-100%);
}

/* Ensure header stays on top of hero/content when experiment is active */

body.mcd-backdrop-experiment #masthead.site-header {
    z-index: 10002 !important;
    position: fixed !important;
    top: var(--mcd-admin-bar-offset, 0) !important;
    left: 0;
    right: 0;
    width: 100%;
}

/* Simplified: use header ::after starfield only */

#masthead.site-header .site-header__backdrop {
    display: none !important;
}

/* Home: move grid/noise from body pseudos into .site-backdrop to enable backdrop-filter sampling */
/* Backdrop experiment disabled: keep original global background on body pseudos */
/* .site-backdrop { display:none !important; } */

/* Header nav styles moved to assets/header-nav.css */

/* CTA styles moved to assets/cta.css */

/* Disable header gradient sweep overlay (keep blur + stars) */
@keyframes mcd-grid-sweep {
    0% {
        background-position:
            0% 0%,
            0% 0%;
    }

    100% {
        background-position:
            200% 200%,
            0% 0%;
    }
}

/* Overlap effect on desktop */
@media (min-width: 992px) {
    .case-study-feature-block:nth-child(odd) .case-study-feature-block__content {
        margin-right: -60px;
    }

    .case-study-feature-block:nth-child(even) .case-study-feature-block__content {
        margin-left: -60px;
    }
}

@media (max-width: 991px) {
    .case-study-feature-block {
        flex-direction: column !important;
        gap: 32px;
    }

    .case-study-feature-block__content {
        width: 100%;
        margin: 0 !important;
        padding: 32px;
    }
}

/* Glass Panel Utility */

.glass-panel {
    background: var(--surface-glass);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--panel-border);
    box-shadow: var(--panel-shadow);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

/* Neon Background Covers */

.bg-neon-1 {
    background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_1.png');
    background-size: cover;
    background-position: center;
}

.bg-neon-2 {
    background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_2.png');
    background-size: cover;
    background-position: center;
}

.bg-neon-3 {
    background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_3.png');
    background-size: cover;
    background-position: center;
}

/* Tighter Spacing Overrides */

.case-study-template .wp-block-group {
    margin-top: 0;
    margin-bottom: 0;
}

.case-study-panel {
    padding-top: clamp(48px, 5vw, 64px) !important;
    padding-bottom: clamp(48px, 5vw, 64px) !important;
}

/* Zig-Zag Feature Blocks Layout */

.case-study-feature-blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 8vw, 96px);
    margin-top: 48px;
    margin-bottom: 48px;
}

.case-study-feature-block {
    display: flex;
    align-items: center;
    gap: 48px;
}

.case-study-feature-block:nth-child(even) {

    /* Home: move grid/noise from body pseudos into .site-backdrop to enable backdrop-filter sampling */
    /* Backdrop experiment disabled: keep original global background on body pseudos */
    /* .site-backdrop { display:none !important; } */

    /* Header nav styles moved to assets/header-nav.css */

    /* CTA styles moved to assets/cta.css */

    /* Disable header gradient sweep overlay (keep blur + stars) */
    @keyframes mcd-grid-sweep {
        0% {
            background-position:
                0% 0%,
                0% 0%;
        }

        100% {
            background-position:
                200% 200%,
                0% 0%;
        }
    }

    @media (prefers-reduced-motion: reduce) {


        /* Overlap effect on desktop */
        @media (min-width: 992px) {
            .case-study-feature-block:nth-child(odd) .case-study-feature-block__content {
                margin-right: -60px;
            }

            .case-study-feature-block:nth-child(even) .case-study-feature-block__content {
                margin-left: -60px;
            }
        }

        @media (max-width: 991px) {
            .case-study-feature-block {
                flex-direction: column !important;
                gap: 32px;
            }

            .case-study-feature-block__content {
                width: 100%;
                margin: 0 !important;
                padding: 32px;
            }
        }

        /* Glass Panel Utility */

        .glass-panel {
            background: var(--surface-glass);
            backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid var(--panel-border);
            box-shadow: var(--panel-shadow);
            border-radius: 24px;
            overflow: hidden;
            position: relative;
        }

        /* Neon Background Covers */

        .bg-neon-1 {
            background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_1.png');
            background-size: cover;
            background-position: center;
        }

        .bg-neon-2 {
            background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_2.png');
            background-size: cover;
            background-position: center;
        }

        .bg-neon-3 {
            background-image: linear-gradient(to bottom, rgba(6, 10, 28, 0.85), rgba(6, 10, 28, 0.95)), url('./assets/images/case-study/neon_noir_cover_3.png');
            background-size: cover;
            background-position: center;
        }

        /* Tighter Spacing Overrides */

        .case-study-template .wp-block-group {
            margin-top: 0;
            margin-bottom: 0;
        }

        .case-study-panel {
            padding-top: clamp(48px, 5vw, 64px) !important;
            padding-bottom: clamp(48px, 5vw, 64px) !important;
        }

        /* Zig-Zag Feature Blocks Layout */

        .case-study-feature-blocks {
            display: flex;
            flex-direction: column;
            gap: clamp(64px, 8vw, 96px);
            margin-top: 48px;
            margin-bottom: 48px;
        }

        .case-study-feature-block {
            display: flex;
            align-items: center;
            gap: 48px;
        }

        .case-study-feature-block:nth-child(even) {
            flex-direction: row-reverse;
        }

        .case-study-feature-block__content {
            flex: 1;
            z-index: 2;
            /* Glass Card Style */
            background: rgba(10, 18, 38, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 48px;
            border-radius: 24px;
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
        }

        .case-study-feature-block__media {
            flex: 1.2;
            position: relative;
            z-index: 1;
        }

        .case-study-feature-block__media img {
            border-radius: 24px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .case-study-feature-block:hover .case-study-feature-block__media img {
            transform: scale(1.02);
        }

        /* Typography adjustments for feature blocks */

        .case-study-feature-block__number {
            display: block;
            font-size: 4rem;
            font-weight: 800;
            color: transparent;
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
            line-height: 1;
            margin-bottom: 16px;
            font-family: var(--font-display);
        }

        .case-study-feature-block__tag {
            display: inline-block;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--neon-cyan);
            margin-bottom: 12px;
            font-weight: 600;
        }

        .case-study-feature-block__title {
            font-size: 2rem;
            margin-bottom: 16px;
            background: linear-gradient(90deg, #fff, #c5d8f2);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .case-study-feature-block__desc {
            font-size: 1.1rem;
            margin-bottom: 0;
        }
    }

    .case-study-feature-block__media {
        flex: 1.2;
        position: relative;
        z-index: 1;
    }

    .case-study-feature-block__media img {
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    .case-study-feature-block:hover .case-study-feature-block__media img {
        transform: scale(1.02);
    }

    /* Typography adjustments for feature blocks */

    .case-study-feature-block__number {
        display: block;
        font-size: 4rem;
        font-weight: 800;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
        line-height: 1;
        margin-bottom: 16px;
        font-family: var(--font-display);
    }

    .case-study-feature-block__tag {
        display: inline-block;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--neon-cyan);
        margin-bottom: 12px;
        font-weight: 600;
    }

    .case-study-feature-block__title {
        font-size: 2rem;
        margin-bottom: 16px;
        background: linear-gradient(90deg, #fff, #c5d8f2);
        background-clip: text;
        border-bottom-color: rgba(79, 240, 255, 0.48);
        transition: opacity 0.4s ease;
        z-index: calc(var(--z-index-background) + 1);
        pointer-events: none;
        will-change: transform, opacity;
    }

    #masthead.site-header:hover::after,
    #masthead.site-header:focus-within::after,
    #masthead.site-header.has-modal-open::after {
        opacity: 0.78;
    }

    #masthead.site-header:hover {
        border-bottom-color: rgba(79, 240, 255, 0.48);
        box-shadow:
            0 26px 52px rgba(3, 8, 26, 0.55),
            0 0 34px rgba(79, 240, 255, 0.32),
            0 0 48px rgba(255, 116, 228, 0.18);
    }

    #masthead.site-header.hide {
        transform: translateY(-100%);
    }

    /* Ensure header stays on top of hero/content when experiment is active */

    body.mcd-backdrop-experiment #masthead.site-header {
        z-index: 10002 !important;
        position: fixed !important;
        top: var(--mcd-admin-bar-offset, 0) !important;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Simplified: use header ::after starfield only */

    #masthead.site-header .site-header__backdrop {
        display: none !important;
    }
}

/* Stack Design - How It Works */

.mcd-home__process--stack {
    background: radial-gradient(120% 140% at 18% 18%, #0e1d39 0%, #0a1328 36%, #130b22 78%);
    padding: var(--space-section-lg, 120px) 0;
    overflow: hidden;
    position: relative;
}

.mcd-home__process--stack .stack-container {
    /* Map Mockup Variables to Theme Variables */
    --cyan: var(--neon-cyan, #76c4ff);
    --cyan-strong: #9be5ff;
    --amber: var(--neon-amber, #ffb877);
    --pink: var(--neon-magenta, #ff74e4);
    --text: var(--text-primary, #eaf4ff);
    --muted: var(--text-muted, rgba(234, 244, 255, 0.65));
    --font: var(--font-body, "Inter", sans-serif);
    --card-bg: var(--surface-overlay, rgba(15, 23, 42, 0.85));
    --card-border: var(--panel-border, rgba(118, 196, 255, 0.15));
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 520px;
    perspective: 1200px;
    padding: 20px;
    margin: 0 auto;
    font-family: var(--font);
}

.mcd-home__process--stack .stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 32px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 40px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center bottom;
    cursor: pointer;
    /* All cards expanded by default for glass stack effect */
    overflow: visible;
    height: auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.mcd-home__process--stack .stack-card:nth-child(1) {
    top: 0px;
    z-index: 1;
    transform: scale(0.94) translateY(0);
    /* opacity removed - use background alpha for depth, enables backdrop-filter */
}

.mcd-home__process--stack .stack-card:nth-child(2) {
    top: 150px;
    z-index: 2;
    transform: scale(0.96) translateY(0);
    /* opacity removed - use background alpha for depth, enables backdrop-filter */
}

.mcd-home__process--stack .stack-card:nth-child(3) {
    top: 300px;
    z-index: 3;
    transform: scale(0.98) translateY(0);
    /* opacity removed - use background alpha for depth, enables backdrop-filter */
}

.mcd-home__process--stack .stack-card:nth-child(4) {
    top: 450px;
    z-index: 4;
    transform: scale(1) translateY(0);
    /* opacity removed - use background alpha for depth, enables backdrop-filter */
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(139, 92, 246, 0.15);
}

/* All cards show content by default (glass stack effect) */
.mcd-home__process--stack .stack-card .card-details {
    opacity: 1;
    transform: translateY(0);
}

.mcd-home__process--stack .stack-card .short-desc {
    -webkit-line-clamp: unset;
}

.mcd-home__process--stack .stack-container:hover .stack-card {
    opacity: 0.4;
}

.mcd-home__process--stack .stack-card:hover {
    z-index: 10 !important;
    opacity: 1 !important;
    height: auto;
    min-height: 280px;
    transform: scale(1.05) translateY(-40px) !important;
    background: rgba(20, 30, 55, 0.95);
    border-color: var(--cyan);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(118, 196, 255, 0.15);
}

.mcd-home__process--stack .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mcd-home__process--stack .step-num {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--cyan), var(--cyan-strong));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.mcd-home__process--stack .stack-card:hover .step-num {
    opacity: 1;
}

.mcd-home__process--stack .step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(118, 196, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--cyan);
    border: 1px solid rgba(118, 196, 255, 0.2);
}

.mcd-home__process--stack .stack-card h3 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.mcd-home__process--stack .short-desc {
    font-size: 1rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s;
}

.mcd-home__process--stack .stack-card:hover .short-desc {
    -webkit-line-clamp: unset;
    color: #fff;
}

.mcd-home__process--stack .details {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease 0.1s;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    margin-top: auto;
}

.mcd-home__process--stack .stack-card:hover .details {
    opacity: 1;
    transform: translateY(0);
}

.mcd-home__process--stack .detail-row {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.mcd-home__process--stack .detail-label {
    color: var(--cyan);
    font-weight: 600;
    min-width: 100px;
}

.mcd-home__process--stack .detail-val {
    color: var(--muted);
}

@media (max-width: 600px) {
    .mcd-home__process--stack .stack-container {
        height: 500px;
    }

    .mcd-home__process--stack .stack-card {
        padding: 20px;
    }

    .mcd-home__process--stack .step-num {
        font-size: 2rem;
    }
}

/* Mobile hero overrides (cache-bust helper) */
@media (max-width: 640px) {
    .wp-block-mccullough-digital-hero {
        min-height: auto;
    }

    .wp-block-mccullough-digital-hero .hero-content {
        max-width: 100%;
        padding-inline: clamp(12px, 6vw, 22px);
        padding-right: clamp(12px, 6vw, 22px);
        align-items: stretch;
        gap: clamp(12px, 3vh, 18px);
        text-align: left;
    }

    .wp-block-mccullough-digital-hero .hero__cta-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 12px;
        text-align: center;
    }

    .wp-block-mccullough-digital-hero .hero__cta-group>*,
    .wp-block-mccullough-digital-hero .hero__cta-button {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .wp-block-mccullough-digital-hero .mcd-glass-card {
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .wp-block-mccullough-digital-hero .mcd-glass-card::after {
        display: none;
    }
}

/* ==============================================================
# Blog Parallax
============================================================== */

/* The window that clips the image */
.mcd-parallax-window {
    overflow: hidden;
    position: relative;
    z-index: 1;
    transform: translateZ(0);
    /* force GPU layer */
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
}

/* ==============================================================
# Blog Typography & Layout (Reading Mode)
============================================================== */

/* Main Container: Constrain & Center */
body.single-post .site-content {
    padding-top: calc(var(--header-height) + 2rem) !important;
}

body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .entry-footer,
body.single-post .post-navigation {
    max-width: 740px;
    /* Golden standard for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    /* Ensure some padding on very small screens */
    padding-right: 1rem;
}

/* Back to Blog Button */
.back-to-blog {
    margin-bottom: 2rem;
}

.back-to-blog a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: var(--font-ui);
}

.back-to-blog a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: translateX(-3px);
}

/* Typography Boost */
body.single-post .entry-content p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--text-secondary);
    /* Ensure good contrast */
}

body.single-post .entry-content h2 {
    font-size: 2rem;
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

body.single-post .entry-content h3 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* Styled Blockquotes */
.entry-content blockquote {
    border-left: 4px solid var(--neon-cyan);
    margin: 3rem 0;
    padding: 1.5em 2em;
    font-style: italic;
    background: linear-gradient(90deg, rgba(118, 196, 255, 0.05) 0%, transparent 100%);
    border-radius: 0 8px 8px 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1.6;
}

.entry-content ul,
.entry-content ol {
    margin: 2rem 0;
    padding-left: 2rem;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.entry-content li {
    margin-bottom: 0.75em;
}

/* Image Handling in Narrow Column */
.entry-content figure {
    margin-bottom: 3rem;
    max-width: 100%;
}

.entry-content figure img {
    border-radius: 12px;
    box-shadow: var(--panel-shadow);
    height: auto;
    width: 100%;
    object-fit: cover;
}

/* Refined Floats for Reading Column */
.alignleft {
    float: left;
    margin-right: 2.5rem;
    margin-bottom: 1.5rem;
    max-width: 280px;
    /* Constrained for narrow column */
    width: 40%;
    clear: left;
}

.alignright {
    float: right;
    margin-left: 2.5rem;
    margin-bottom: 1.5rem;
    max-width: 280px;
    width: 40%;
    clear: right;
}

.aligncenter {
    display: block;
    margin: 3rem auto;
    clear: both;
}

/* Specific size overrides */
figure.size-medium.alignleft,
figure.size-medium.alignright {
    max-width: 280px;
    /* Enforce consistency */
}

/* Clearfix */
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Post Footer Polish */
.entry-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Very subtle divider */
    margin-top: 5rem;
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cat-links a,
.tags-links a {
    display: inline-block;
    padding: 0.5em 1.2em;
    border: 1px solid var(--surface-border);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.cat-links a:hover,
.tags-links a:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 229, 255, 0.08);
}

/* Navigation */
.post-navigation {
    margin-top: 3rem;
    border-top: none;
    padding-top: 0;
}

.single-nav {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.single-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.75rem;
    background: rgba(6, 10, 28, 0.4);
    border: 1px solid var(--neon-cyan);
    border-radius: 99px;
    color: var(--neon-cyan);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.05);
}

.single-nav__link:hover {
    background: rgba(0, 229, 255, 0.12);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.25);
    transform: translateY(-2px);
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
    border-color: rgba(0, 229, 255, 0.8);
}

.single-nav__prev::before {
    content: '←';
    margin-right: 0.5rem;
    font-size: 1.2em;
}

.single-nav__next::after {
    content: '→';
    margin-left: 0.5rem;
    font-size: 1.2em;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    body.single-post .entry-content,
    body.single-post .entry-header {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .alignleft,
    .alignright {
        float: none;
        margin: 2rem auto;
        max-width: 100%;
        width: 100%;
        display: block;
    }

    figure.size-medium.alignleft,
    figure.size-medium.alignright {
        max-width: 100%;
    }

    body.single-post .site-content {
        padding-top: calc(var(--header-height) + 1rem) !important;
    }
}