/* ============================================
   Superior Power Washing — Custom CSS
   WordPress FSE Child Theme Overrides
   ============================================ */

/* === Smooth Scrolling === */
html {
    scroll-behavior: smooth;
}

/* === Sticky Header Shadow === */
.wp-block-group[style*="position:sticky"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* === Button Transitions === */
.wp-block-button__link {
    transition: all 0.3s ease;
    cursor: pointer;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(22, 118, 166, 0.35);
}

/* === Service Cards Hover Effect === */
.wp-block-group[class*="has-white-background-color"][style*="border-radius"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group[class*="has-white-background-color"][style*="border-radius"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* === Image Hover Zoom === */
.wp-block-image img,
.wp-block-post-featured-image img {
    transition: transform 0.4s ease;
}

.wp-block-image:hover img,
.wp-block-post-featured-image:hover img {
    transform: scale(1.03);
}

/* === Navigation Link Underline Animation === */
.wp-block-navigation .wp-block-navigation-item a {
    position: relative;
    transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: var(--wp--preset--color--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.wp-block-navigation .wp-block-navigation-item a:hover::after {
    width: 100%;
}

/* === Section Divider Gradient Lines === */
.wp-block-separator.has-primary-light-background-color {
    height: 3px;
    border: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wp--preset--color--primary) 50%,
        transparent 100%
    ) !important;
}

/* === Hero Overlay for Cover Blocks === */
.wp-block-cover {
    min-height: 500px;
}

/* === CTA Section Pulse Animation === */
@keyframes subtle-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(245, 166, 35, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(245, 166, 35, 0.5); }
}

.wp-block-button__link.has-accent-background-color {
    animation: subtle-pulse 3s ease-in-out infinite;
}

.wp-block-button__link.has-accent-background-color:hover {
    animation: none;
}

/* === Responsive Fixes === */
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Mobile header adjustments */
    .wp-block-group[style*="position:sticky"] .wp-block-paragraph[style*="font-size:0.85rem"] {
        font-size: 0.75rem !important;
    }
}

/* === Focus States for Accessibility === */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

/* === Blockquote Accent === */
.wp-block-quote {
    font-style: italic;
    border-left-color: var(--wp--preset--color--primary) !important;
    border-left-width: 4px !important;
}

/* === FAQ Accordion Style (Details/Summary) === */
details {
    border: 1px solid var(--wp--preset--color--primary-light);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

details[open] {
    border-color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--primary-light);
}

details summary {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 600;
    cursor: pointer;
    color: var(--wp--preset--color--neutral-dark);
    list-style: none;
}

details summary::before {
    content: '▸ ';
    color: var(--wp--preset--color--primary);
    transition: transform 0.3s ease;
    display: inline-block;
}

details[open] summary::before {
    content: '▾ ';
}

/* === Desktop + Mobile Header Grid (Pex Plumbing Style) === */
.spw-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
}

.sh-logo { order: 1; flex: 0 0 auto; margin: 0 !important; }
.sh-menu { order: 2; flex: 1 1 auto; justify-content: flex-end; margin: 0 !important; }
.sh-cta-wrapper { order: 3; flex: 0 0 auto; display: flex; align-items: center; }
.sh-cta { margin-left: 1.5rem !important; margin-bottom: 0 !important; }
.sh-mobile-phone-icon { display: none; }

@media (max-width: 781px) {
    /* Engage precision grid on mobile for optimal icon-logo-icon centering */
    .spw-main-header {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        justify-content: center;
        gap: 0px;
    }
    
    .sh-menu { 
        order: 1 !important; 
        grid-column: 1 !important;
        justify-self: start !important;
        justify-content: flex-start !important;
    }
    /* Force WP Hamburger menu to align left */
    .sh-menu .wp-block-navigation__responsive-container-open {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .sh-logo { 
        order: 2 !important; 
        grid-column: 2 !important;
        justify-self: center !important;
        justify-content: center !important;
    }
    
    .sh-cta-wrapper {
        order: 3 !important;
        grid-column: 3 !important;
        justify-self: end !important;
    }

    /* Hide the huge orange CTA string on mobile */
    .sh-cta { 
        display: none !important; 
    }
    
    /* Show the ultra-compact premium phone icon on mobile */
    .sh-mobile-phone-icon {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: var(--wp--preset--color--accent);
        border-radius: 50%;
        width: 42px;
        height: 42px;
        box-shadow: 0 4px 10px rgba(245, 166, 35, 0.4);
        transition: transform 0.3s ease;
    }
    /* Force Mobile Overlay Links to Left Align */
    .sh-menu .wp-block-navigation__responsive-container-content {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .sh-menu .wp-block-navigation-item {
        width: 100%;
        text-align: left;
    }
}