/*
Theme Name: twwe-theme
Theme URI: 
Author: Sandra Martinez
Author URI: 
Description: A theme for The Wee Web Studio
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twwe-theme
Tags: 
*/

html {
    scroll-behavior: smooth;
}

/* Base header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(250, 250, 250, 0.95); 
    transform: translateY(0);
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

/* Hidden when scrolling down */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Visible when scrolling up */
.site-header.is-visible {
    transform: translateY(0);
}

/* Background ONLY when scrolling up */
.site-header.has-background {
    background-color: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(8px);
}

/* Navy Blue Hover for FAQ Headings */
.wp-block-accordion-heading__toggle:focus, 
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    color: var(--wp--preset--color--navy-blue) !important;
    transition: color 0.3s ease;
    text-decoration: none !important;
}

/* Vertical line connector in process steps */
/* Create the vertical line */
.process-steps {
    position: relative;
}

.process-steps::after {
    content: '';
    position: absolute;
    left: 12.5%; 
    top: 0;
    bottom: 0;
    height : calc(100% + 1.1rem); /* extend beyond column to reach next dot */
    width: 2px;
    background: var(--wp--preset--color--saffron);
    z-index: -1;
}

/* Ensure the circles sit on top of the line */
.process-steps .wp-block-column:first-child .wp-block-group {
    position: relative;
    z-index: 1;
    background: #FAFAFA;
}

/* This allows the links to sit side-by-side with gaps */
.wp-block-post-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent !important; /* Removes the blue background from the paragraph level */
    padding: 0 !important;
}

/* Ensure the links don't stretch and look like pills */
.wp-block-post-terms a {
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
    cursor: default;
}

.wp-block-post-terms__separator {
    display: none !important;
}


.service-card {
    transform: translate(0, 0);
    transition:
      box-shadow 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform   120ms cubic-bezier(0.34, 1.2, 0.64, 1),
      border-radius 150ms ease !important;
}

.service-card-arrow {
    transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}


.service-card:hover {
    box-shadow: var(--wp--preset--shadow--natural);
    border-radius: 20px;
    transform: translate(-1px, -1px);
}

.service-card:hover .service-card-arrow {
    transform: translateX(5px);
}

.service-card:active {
    box-shadow: none;
    transform: translate(3px, 3px);
    
}

@media (max-width: 768px) {

    /* Mirror the hover state when card is in view */
    .service-card.in-view {
        box-shadow: var(--wp--preset--shadow--natural);
        border-radius: 20px;
        transform: translate(-1px, -1px);
    }

    /* Arrow moves right when card is in view */
    .service-card.in-view .service-card-arrow {
        transform: translateX(5px);
    }

    /* Reset happens automatically when .in-view is removed —
       the transitions on .service-card and .service-card-arrow
       handle the smooth return to original position */
}