/* ============================================================
   NAVATIC CUSTOM CSS
   Animations, Glassmorphism, Patterns & Effects
   ============================================================ */

/* ── Scroll Reveal Animations ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Glassmorphism ── */
.glass-header {
    background: rgba(0, 37, 59, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-effect {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-nav {
    background: rgba(0, 37, 59, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Precision Grid Pattern ── */
.precision-grid {
    background-image: radial-gradient(circle, #c2c7ce 0.5px, transparent 0.5px);
    background-size: 32px 32px;
    background-position: center;
}

/* ── Architectural Grid (dots) ── */
.architectural-grid {
    background-image: radial-gradient(circle, #c2c7ce 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.15;
}

/* ── Skew Accent Background ── */
.skew-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
    height: 100%;
    background: var(--surface-container-low);
    transform: skewX(-12deg) translateX(96px);
    z-index: 0;
}

/* ── Service Card Hover Effect ── */
.service-hover-card {
    transition: all 0.5s ease;
}

.service-hover-card:hover {
    background-color: var(--primary) !important;
    color: white !important;
    transform: translateY(-4px);
}

.service-hover-card:hover h3,
.service-hover-card:hover h4 {
    color: white !important;
}

.service-hover-card:hover p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.service-hover-card:hover .service-icon-wrap {
    background: var(--secondary) !important;
}

.service-hover-card:hover .service-icon {
    color: white !important;
}

.service-hover-card:hover .label-md,
.service-hover-card:hover [class*="label"] {
    color: var(--secondary-fixed) !important;
}

/* ── Ping Animation (map marker) ── */
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ── Counter Animation ── */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Fade In Up ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* ── Fade In ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Slide In Left ── */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Scale In ── */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Progress Bar Animation ── */
.progress__bar {
    animation: progressFill 1.5s ease forwards;
    width: 0;
}

@keyframes progressFill {
    to {
        width: var(--progress-width, 85%);
    }
}

/* ── Hover Effects ── */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* ── Image Grayscale Hover ── */
.img-grayscale {
    filter: grayscale(1);
    transition: filter 0.7s ease;
}

.img-grayscale:hover {
    filter: grayscale(0);
}

/* ── Button Hover Shadow ── */
.btn--secondary:hover {
    box-shadow: 0 0 20px rgba(0, 108, 78, 0.4);
}

/* ── Header Scroll State ── */
.site-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled {
    background-color: rgba(249, 249, 252, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-ambient);
}

/* ── Mobile Menu Animations ── */
.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-nav {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.mobile-nav.active {
    opacity: 1;
    visibility: visible;
}

/* ── WPForms Styling Override ── */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
    background-color: var(--surface-container) !important;
    border: none !important;
    border-bottom: 2px solid rgba(194, 199, 206, 0.15) !important;
    border-radius: 0 !important;
    padding: var(--sp-3) var(--sp-4) !important;
    font-family: var(--font-body) !important;
    transition: border-color 0.3s ease !important;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
    border-bottom-color: var(--secondary) !important;
    box-shadow: none !important;
}

.wpforms-container .wpforms-form .wpforms-field-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--outline) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-family: var(--font-body) !important;
}

.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-submit {
    background-color: var(--primary) !important;
    color: var(--on-primary) !important;
    padding: var(--sp-4) var(--sp-10) !important;
    border-radius: var(--radius-xl) !important;
    font-family: var(--font-headline) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: var(--body-md) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.wpforms-container .wpforms-form button[type="submit"]:hover {
    background-color: var(--primary-container) !important;
    box-shadow: var(--shadow-hover) !important;
}

/* ── WordPress Pagination ── */
.nav-links {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
}

.nav-links .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: var(--body-md);
    color: var(--primary);
    transition: all 0.3s ease;
}

.nav-links .page-numbers:hover {
    background: var(--surface-container-high);
}

.nav-links .page-numbers.current {
    background: var(--primary);
    color: white;
}

/* ── WordPress Admin Bar Offset ── */
body.admin-bar .site-header {
    top: 32px;
}

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

/* ── Print Styles ── */
@media print {
    .site-header,
    .site-footer,
    .mobile-nav,
    .btn,
    .cta-section {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}