/* ============================================================
   NURSERY-ONE — Inner Pages Override
   Loads AFTER all shared CSS (service-page.css etc.)
   Only nursery-specific adjustments for inner pages.
   ============================================================ */


/* ============================================================
   §1  CTA SECTION — BASE FIX
   ─────────────────────────────────────────────────────────
   03-sections-home.css is not loaded in nursery template.
   We must re-declare the structural base for .cta-section
   so the overlay positions correctly.
============================================================ */
.cta-section {
    position: relative;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
}

.cta-section .cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-section .cta-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 14px;
}

.cta-section .cta-eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    border-radius: 2px;
    opacity: 0.5;
}

.cta-section .cta-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 14px;
}

.cta-section .cta-subtitle {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 36px;
}

.cta-section .cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}


/* ============================================================
   §2  SERVICE CTA — NURSERY STYLE
   ─────────────────────────────────────────────────────────
   Completely replaces the dark industrial CTA.
   Nursery design: blue gradient + yellow bar + pill buttons.
   Loads AFTER service-page.css — wins the cascade.
============================================================ */
.cta-service {
    background: linear-gradient(
        145deg,
        #0f2347 0%,
        #1b3d6e 60%,
        #1e4880 100%
    ) !important;
    border-top: 4px solid var(--mt-accent) !important;
    padding: 80px 0 !important;
}

.cta-service .cta-overlay {
    background: none !important;
}

/* Eyebrow — yellow on blue */
.cta-service .cta-eyebrow {
    color: var(--mt-accent) !important;
}

.cta-service .cta-eyebrow::after {
    background: var(--mt-accent) !important;
    opacity: 0.6 !important;
}

/* Title — white */
.cta-service .cta-title {
    color: #ffffff !important;
}

/* Subtitle — soft white */
.cta-service .cta-subtitle {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Primary button — yellow pill, dark text */
.cta-service .btn-light {
    background: var(--mt-accent) !important;
    border-color: var(--mt-accent) !important;
    color: #0f2347 !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    padding: 14px 40px !important;
    font-size: 0.92rem !important;
    box-shadow: 0 6px 28px rgba(245, 197, 24, 0.40) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cta-service .btn-light:hover {
    background: var(--mt-accent-hover, #d4a800) !important;
    border-color: var(--mt-accent-hover, #d4a800) !important;
    color: #0f2347 !important;
    box-shadow: 0 10px 36px rgba(245, 197, 24, 0.55) !important;
    transform: translateY(-2px) !important;
}

/* Secondary button — white outline pill */
.cta-service .btn-outline-light {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.50) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 14px 40px !important;
    font-size: 0.92rem !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.cta-service .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}


/* ============================================================
   §3  FOOTER — NURSERY OVERRIDES
   ─────────────────────────────────────────────────────────
   Base footer uses var(--mt-brand-primary) for the glow line
   and hover colors. In nursery that's dark blue on dark bg —
   invisible. Replace with yellow accent throughout.
============================================================ */

/* Slightly differentiate footer from CTA bottom */
.site-footer {
    background: linear-gradient(180deg, #0a1628 0%, #060e1c 100%) !important;
}

/* Top accent bar — yellow (replaces invisible blue glow) */
.site-footer::before {
    width: 200px !important;
    height: 3px !important;
    background: linear-gradient(
        to right,
        transparent,
        var(--mt-accent),
        transparent
    ) !important;
    opacity: 0.9 !important;
}

/* Link hover → yellow (readable on dark bg) */
.site-footer a:hover,
.footer-links a:hover {
    color: var(--mt-accent) !important;
}

/* Footer heading titles → add yellow left dot */
.site-footer .footer-title,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
    color: #ffffff !important;
}

/* Footer title underline → yellow */
.site-footer .footer-title::after {
    background: var(--mt-accent) !important;
}

/* Bottom copyright line */
.site-footer .footer-muted,
.site-footer .footer-bottom {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Divider line — subtle yellow tint */
.site-footer .footer-line {
    border-color: rgba(245, 197, 24, 0.15) !important;
}


/* ============================================================
   §4  SERVICE CONTENT — NURSERY ACCENT ADJUSTMENTS
============================================================ */

/* Summary left border — yellow accent */
.service-summary-block {
    border-left-color: var(--mt-accent) !important;
}

.service-summary-icon {
    background: rgba(245, 197, 24, 0.12) !important;
    border-color: rgba(245, 197, 24, 0.28) !important;
    color: var(--mt-accent-dark, #d4a800) !important;
}

/* Eyebrow in media blocks — nursery blue */
.service-media-eyebrow {
    color: var(--mt-brand-primary) !important;
}

/* Hero bottom accent line — yellow */
.service-hero::after {
    background: linear-gradient(
        90deg,
        transparent,
        var(--mt-accent) 30%,
        var(--mt-accent) 70%,
        transparent
    ) !important;
}

/* Breadcrumb links — nursery blue */
.breadcrumb-section .breadcrumb-item a {
    color: var(--mt-brand-primary) !important;
}

.breadcrumb-section .breadcrumb-item a:hover {
    color: var(--mt-brand-primary-hover) !important;
}