/* Custom styles – Baby Sleep Site (WordPress theme) */

/* Fallback: brand theme colors (in case Tailwind config loads after DOM) */
.bg-brand-primary { background-color: #2D5253; }
.bg-brand-heroBg { background-color: #fbf5f2; }
.bg-brand-bg { background-color: #fbf5f2; }
.bg-brand-sand { background-color: #FAFAFA; }
.bg-brand-sageBtn { background-color: #a4c4b9; }
.bg-brand-heroBtn { background-color: #f2d2c7; }
.bg-brand-secondary { background-color: #dfb3a7; }
.bg-brand-sage { background-color: #E0F2F1; }
.text-brand-primary { color: #2D5253; }
.text-brand-headline { color: #2b565a; }
.text-brand-coral { color: #e08c79; }
.text-brand-secondary { color: #dfb3a7; }
.text-brand-light { color: #FFFFFF; }
.text-brand-light\/60 { color: rgba(255, 255, 255, 0.6); }
.text-brand-light\/80 { color: rgba(255, 255, 255, 0.8); }
.text-brand-light\/40 { color: rgba(255, 255, 255, 0.4); }
.border-brand-secondary\/30 { border-color: rgba(223, 179, 167, 0.3); }
.border-brand-secondary\/10 { border-color: rgba(223, 179, 167, 0.1); }
.border-brand-secondary { border-color: #dfb3a7; }
.border-\[#a4c4b9\] { border-color: #a4c4b9; }
.bg-brand-secondary\/10 { background-color: rgba(223, 179, 167, 0.1); }
.bg-brand-sage\/20 { background-color: rgba(224, 242, 241, 0.2); }
.bg-brand-primary\/90 { background-color: rgba(45, 82, 83, 0.9); }
.bg-brand-secondary\/40 { background-color: rgba(223, 179, 167, 0.4); }
.bg-brand-secondary\/70 { background-color: rgba(223, 179, 167, 0.7); }
.hover\:bg-brand-secondary:hover { background-color: #dfb3a7; }
.hover\:text-brand-primary:hover { color: #2D5253; }
.placeholder-brand-light\/30::placeholder { color: rgba(255, 255, 255, 0.3); }
.focus\:border-brand-secondary:focus { border-color: #dfb3a7; }

/* Dreamy theme: brand pink, darkPink, black (so they render when CDN misses them) */
.bg-brand-pink { background-color: #eab3a7; }
.bg-brand-pink\/5 { background-color: rgba(234, 179, 167, 0.05); }
.bg-brand-pink\/10 { background-color: rgba(234, 179, 167, 0.1); }
.bg-brand-pink\/20 { background-color: rgba(234, 179, 167, 0.2); }
.text-brand-pink { color: #eab3a7; }
.text-brand-darkPink { color: #c99485; }
.text-brand-darkPink\/30 { color: rgba(201, 148, 133, 0.3); }
.text-brand-darkPink\/50 { color: rgba(201, 148, 133, 0.5); }
.text-brand-black { color: #000000; }
.text-brand-black\/60 { color: rgba(0, 0, 0, 0.6); }
.text-brand-black\/70 { color: rgba(0, 0, 0, 0.7); }
.border-brand-pink { border-color: #eab3a7; }
.border-brand-pink\/10 { border-color: rgba(234, 179, 167, 0.1); }
.border-brand-pink\/30 { border-color: rgba(234, 179, 167, 0.3); }
.border-brand-sage { border-color: #E0F2F1; }
.group:hover .group-hover\:bg-brand-pink { background-color: #eab3a7; }
.group:hover .group-hover\:bg-brand-sage { background-color: #E0F2F1; }
.group:hover .group-hover\:text-white { color: #fff; }
.hover\:text-brand-darkPink:hover { color: #c99485; }

/* Dreamy template uses a different sage (matches index-dreamy.html) */
.page-template-page-dreamy-php .bg-brand-sage { background-color: #9ba995; }
.page-template-page-dreamy-php .bg-brand-sage\/10 { background-color: rgba(155, 169, 149, 0.1); }
.page-template-page-dreamy-php .bg-brand-sage\/20 { background-color: rgba(155, 169, 149, 0.2); }
.page-template-page-dreamy-php .border-brand-sage { border-color: #9ba995; }
.page-template-page-dreamy-php .group:hover .group-hover\:bg-brand-sage { background-color: #9ba995; }
.page-template-page-dreamy-php .text-brand-sage { color: #9ba995; }
.page-template-page-dreamy-php .hover\:text-brand-sage:hover { color: #9ba995; }
/* Dreamy body background matches index-dreamy.html (soft off-white) */
.page-template-page-dreamy-php.bg-brand-bg { background-color: #fcfafc; }

/* Global typography: Noto Sans Hebrew everywhere */
body,
body.font-sans,
.font-sans,
.font-serif {
    font-family: 'Noto Sans Hebrew', 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

body {
    font-size: 1rem;
}

#navbar {
    box-shadow: 0 8px 20px rgb(0 0 0 / 4%);
}

.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem;
}

p {
    line-height: 1.5;
}

#mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
}

#mobile-menu.open {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #f3f4f6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Heebo', sans-serif;
}

.hero-speckles {
    background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.8) 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, rgba(255,255,255,0.6) 1px, transparent 1px);
    background-size: 120px 100px, 140px 120px, 100px 140px, 160px 90px;
}

@media (max-width: 575px) {
    #hero-image {
        width: auto;
        height: 650px;
    }
}

.about-shape-2 {
    position: absolute;
    width: 200px;
    height: 240px;
    border-radius: 50%;
    background: rgba(224, 242, 241, 0.4);
    top: 20%;
    left: 3%;
    pointer-events: none;
}
.about-overlay {
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 100%;
    height: 100%;
    background: #f7e7e3;
    pointer-events: none;
    border-radius: 10px;
}

.about-image-circle {
    position: absolute;
    top: -40px;
    left: -60px;
    right: auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(164, 196, 185, 0.3);
    pointer-events: none;
}

.about-image-wrap {
    overflow: visible;
}

.services-rotate-scroll {
    transform-origin: center center;
    transition: transform 0.08s ease-out;
}

.testimonials-pattern-bg {
    background-color: #fffaf7;
    background-image: radial-gradient(#f2e0d9, transparent);
    background-repeat: no-repeat;
    background-size: 260% 260%;
    background-position: center top;
}

@media (max-width: 767px) {
    .testimonials-slider {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .testimonials-slider::-webkit-scrollbar {
        display: none;
    }
}
.testimonial-dot.active {
    background: #a4c4b9;
    transform: scale(1.2);
}

.approach-bg {
    position: relative;
    background-image: url("../images/hero-baby.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.approach-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease-out;
}
.faq-answer.open {
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.35s ease-in;
}
.faq-answer > * {
    min-height: 0;
    overflow: hidden;
}
.faq-answer p {
    padding: 0;
    transition: padding 0.35s ease-out;
}
.faq-answer.open p {
    padding: 0rem 2rem 1.5rem;
    transition: padding 0.35s ease-in;
}

.faq-item:has(.faq-answer.open) {
    box-shadow: 0 10px 20px rgb(0 0 0 / 6%);
    border-color: #e08c79;
}

.faq-item:hover {
    box-shadow: none;
    border-color: #e08c79;
}

@media (max-width: 1023px) {
    #services .services-content {
        position: relative;
        margin-top: -100px;
        background-color: #ffffff;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        padding: 2.25rem 1.75rem 2.25rem;
        z-index: 2;
    }
}

@media (min-width: 1024px) {
    #services {
        overflow: visible;
    }

    #services #services-illustration {
        position: sticky;
        top: 0;
    }
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Keep Dreamy approach background fixed: never transform the section itself */
.page-template-page-dreamy-php #approach.reveal,
.page-template-page-dreamy-php #approach.in-view {
    transform: none !important;
}

/* Hero text: small delay before fade in */
#hero-text {
    opacity: 0;
    transform: translateY(24px);
}
#hero-text.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out 0.45s, transform 0.6s ease-out 0.45s;
}

/* Stagger for testimonial cards */
#testimonials .testimonial-card.reveal {
    transition-delay: 0.05s;
}
#testimonials .testimonial-card.reveal:nth-child(2) {
    transition-delay: 0.15s;
}
#testimonials .testimonial-card.reveal:nth-child(3) {
    transition-delay: 0.25s;
}

/* Testimonials text 10% smaller */
#testimonials .testimonial-card {
    font-size: 90%;
}

/* Stagger for FAQ items */
#faq .faq-item.reveal:nth-child(1) { transition-delay: 0.05s; }
#faq .faq-item.reveal:nth-child(2) { transition-delay: 0.1s; }
#faq .faq-item.reveal:nth-child(3) { transition-delay: 0.15s; }
#faq .faq-item.reveal:nth-child(4) { transition-delay: 0.2s; }
#faq .faq-item.reveal:nth-child(5) { transition-delay: 0.25s; }
#faq .faq-item.reveal:nth-child(6) { transition-delay: 0.3s; }

/* Generic two-column stagger: second column slightly later */
.section-two-col .section-col.reveal:nth-child(1) { transition-delay: 0.0s; }
.section-two-col .section-col.reveal:nth-child(2) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.in-view {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Contact Form 7 – layout and style in #contact */
/* Wrap 50% fields in <div class="field-half">[field]</div>; full-width fields stay unwrapped or use <div class="field-full"> */
#contact .contact-form-wrap {
    max-width: 100%;
}
#contact .wpcf7 {
    margin: 0;
    font-family: 'Noto Sans Hebrew', 'Rubik', 'Heebo', system-ui, sans-serif;
}
#contact .wpcf7-form label,
#contact .wpcf7-form-control,
#contact .wpcf7-submit,
#contact .wpcf7-response-output,
#contact .wpcf7-not-valid-tip {
    font-family: 'Noto Sans Hebrew', 'Rubik', 'Heebo', system-ui, sans-serif;
}
#contact .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
    margin: 0;
}
#contact .wpcf7-form > .field-half {
    grid-column: span 1;
}
#contact .wpcf7-form > p,
#contact .wpcf7-form > .field-full {
    grid-column: 1 / -1;
}
@media (max-width: 479px) {
    #contact .wpcf7-form {
        grid-template-columns: 1fr;
    }
    #contact .wpcf7-form > .field-half {
        grid-column: 1 / -1;
    }
}
#contact .wpcf7-form p {
    margin: 0;
}
#contact .wpcf7-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #dfb3a7;
    margin-bottom: 0.5rem;
}
#contact .wpcf7-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-family: 'Noto Sans Hebrew', 'Rubik', 'Heebo', system-ui, sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}
#contact .wpcf7-form-control:hover,
#contact .wpcf7-form-control:focus {
    border-color: #dfb3a7;
}
#contact .wpcf7-form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}
#contact .wpcf7-email {
    text-align: right;
}
#contact .wpcf7-textarea {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
    resize: none;
    overflow-y: auto;
}
#contact .wpcf7-submit {
    display: inline-block;
    width: auto;
    min-width: 0;
    background-color: #dfb3a7;
    color: #2D5253;
    padding: 1rem 3rem;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 1rem;
}
#contact .wpcf7-submit:hover {
    background-color: #fff;
}
#contact .wpcf7-form > p:last-child,
#contact .wpcf7-form > .field-submit {
    grid-column: 1 / -1;
    text-align: center;
    position: relative;
}

/* CF7 loader: center absolute over submit row */
#contact .wpcf7-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
#contact .wpcf7-not-valid {
    border-color: #e08c79 !important;
}
#contact .wpcf7-not-valid-tip {
    font-size: 0.875rem;
    color: #e08c79;
    margin-top: 0.25rem;
}
#contact .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    color: #fff;
    font-size: 0.9375rem;
}
#contact .wpcf7-mail-sent-ok {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}
#contact .wpcf7-validation-errors,
#contact .wpcf7-mail-sent-ng {
    border-color: #e08c79;
    background: rgba(224, 140, 121, 0.1);
}

/* CF7 on Dreamy template: white card, black text, underline inputs, dreamy submit */
.page-template-page-dreamy-php #contact .contact-form-wrap {
    max-width: 100%;
}
.page-template-page-dreamy-php #contact .wpcf7-form label {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.page-template-page-dreamy-php #contact .wpcf7-form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #000;
    padding: 0.5rem 0 0.5rem 0;
    font-size: 1.125rem;
    outline: none;
    transition: border-color 0.2s ease;
}
.page-template-page-dreamy-php #contact .wpcf7-form-control:hover,
.page-template-page-dreamy-php #contact .wpcf7-form-control:focus {
    border-color: #000;
}
.page-template-page-dreamy-php #contact .wpcf7-form-control::placeholder {
    color: rgba(0, 0, 0, 0.4);
}
.page-template-page-dreamy-php #contact .wpcf7-email {
    text-align: right;
}
.page-template-page-dreamy-php #contact .wpcf7-textarea {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
    resize: none;
}
.page-template-page-dreamy-php #contact .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    background-color: #000;
    color: #fff;
    padding: 1.25rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
}
.page-template-page-dreamy-php #contact .wpcf7-submit:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}
.page-template-page-dreamy-php #contact .wpcf7-form > p:last-child,
.page-template-page-dreamy-php #contact .wpcf7-form > .field-submit {
    text-align: center;
}
.page-template-page-dreamy-php #contact .wpcf7-not-valid {
    border-color: #c99485 !important;
}
.page-template-page-dreamy-php #contact .wpcf7-not-valid-tip {
    color: #c99485;
}
.page-template-page-dreamy-php #contact .wpcf7-response-output {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    color: #000;
    background: rgba(0, 0, 0, 0.04);
}
.page-template-page-dreamy-php #contact .wpcf7-mail-sent-ok {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.04);
}
.page-template-page-dreamy-php #contact .wpcf7-validation-errors,
.page-template-page-dreamy-php #contact .wpcf7-mail-sent-ng {
    border-color: #c99485;
    background: rgba(201, 148, 133, 0.1);
    color: #000;
}