/**
 * CDIS WordPress Theme - Custom CSS
 * Ported from app/globals.css
 * Handles: keyframes, scroll animations, scrollbar, overrides
 */

/* =========================================================================
   BASE STYLES
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #111216;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* =========================================================================
   SCROLL TARGETS — offset for fixed navbar
   ========================================================================= */

#about, #services, #safesigned, #contact,
[id^="service-"] {
    scroll-margin-top: 5rem;
}

@media (max-width: 767px) {
    #about, #services, #safesigned, #contact,
    [id^="service-"] {
        scroll-margin-top: 4rem;
    }
}

/* =========================================================================
   KEYFRAMES
   ========================================================================= */

/* Hero gradient orb floating */
@keyframes gradient-shift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes gradient-shift-reverse {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 30px) scale(0.9); }
    66% { transform: translate(20px, -20px) scale(1.1); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Scroll indicator bounce */
@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* SafeSigned signature draw */
@keyframes draw-loop {
    0%   { stroke-dashoffset: 400; }   /* hidden */
    35%  { stroke-dashoffset: 0; }     /* fully drawn */
    55%  { stroke-dashoffset: 0; }     /* hold visible */
    90%  { stroke-dashoffset: 400; }   /* erase back */
    100% { stroke-dashoffset: 400; }   /* pause before restart */
}

/* =========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================= */

.animate-gradient-shift {
    animation: gradient-shift 8s ease-in-out infinite;
}

.animate-gradient-shift-reverse {
    animation: gradient-shift-reverse 10s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}

.animate-scroll-bounce {
    animation: scroll-bounce 2s ease-in-out infinite;
}

.animate-draw {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: draw-loop 6s ease-in-out infinite;
}

/* =========================================================================
   SCROLL ANIMATION SYSTEM (replaces Framer Motion whileInView)
   ========================================================================= */

.scroll-animate {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.from-up {
    transform: translateY(40px);
}

.scroll-animate.from-down {
    transform: translateY(-40px);
}

.scroll-animate.from-left {
    transform: translateX(40px);
}

.scroll-animate.from-right {
    transform: translateX(-40px);
}

.scroll-animate.scroll-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Staggered delays */
.delay-100 { transition-delay: 0.1s; }
.delay-150 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-450 { transition-delay: 0.45s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* =========================================================================
   HERO ENTRANCE ANIMATIONS (replaces Framer Motion initial/animate)
   ========================================================================= */

.hero-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-animate.hero-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   HERO — push below fixed navbar
   ========================================================================= */

#hero {
    margin-top: 4rem;
}
@media (min-width: 768px) {
    #hero { margin-top: 5rem; }
}

/* =========================================================================
   SAFESIGNED MOBILE SLIDER
   ========================================================================= */

.safesigned-slider {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.safesigned-slider::-webkit-scrollbar {
    display: none;
}
.safesigned-slider > * {
    scroll-snap-align: center;
}

.safesigned-dot {
    cursor: pointer;
    border: none;
    padding: 0;
}
.safesigned-dot.active {
    background-color: #e8860c;
    transform: scale(1.3);
}

/* =========================================================================
   QUADRANT CARDS (replaces Framer Motion whileHover)
   ========================================================================= */

.quadrant-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quadrant-card:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
   NAVBAR
   ========================================================================= */

.navbar-scrolled {
    background-color: rgba(17, 18, 22, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* =========================================================================
   MOBILE MENU
   ========================================================================= */

.mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================================================
   CUSTOM SCROLLBAR
   ========================================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #111216;
}

::-webkit-scrollbar-thumb {
    background: #272A33;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #272A33 #111216;
}

/* =========================================================================
   FORM FOCUS STATES
   ========================================================================= */

.cdis-form-input:focus {
    outline: none;
    border-color: #d70042;
}

.cdis-field-error {
    color: #f87171;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* =========================================================================
   NAV LINK UNDERLINE EFFECT
   ========================================================================= */

.nav-link-underline {
    position: relative;
}

.nav-link-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #d70042;
    transition: width 0.3s ease;
}

.nav-link-underline:hover::after {
    width: 100%;
}

/* =========================================================================
   LIGHT MODE OVERRIDES
   Tailwind CDN injects styles dynamically via JS — its <style> tag can
   appear after theme.css in the DOM.  !important guarantees our overrides
   always win regardless of source order or Tailwind cascade behaviour.
   ========================================================================= */

/* --- Section backgrounds --- */
html.light-mode .bg-dark {
    background-color: #ffffff !important;
}

html.light-mode .bg-dark-mid {
    background-color: #f3f4f6 !important;
}

/* --- Primary text --- */
html.light-mode .text-white {
    color: #111216 !important;
}

/* --- Text with opacity (nav links, secondary text) --- */
html.light-mode .text-white\/80 {
    color: rgba(17, 18, 22, 0.8) !important;
}

html.light-mode .text-white\/70 {
    color: rgba(17, 18, 22, 0.7) !important;
}

html.light-mode .text-white\/60 {
    color: rgba(17, 18, 22, 0.6) !important;
}

html.light-mode .text-white\/50 {
    color: rgba(17, 18, 22, 0.5) !important;
}

html.light-mode .text-white\/30 {
    color: rgba(17, 18, 22, 0.3) !important;
}

/* --- Gray text --- */
html.light-mode .text-gray-400 {
    color: #4b5563 !important;
}

html.light-mode .text-gray-300 {
    color: #374151 !important;
}

html.light-mode .text-grey-mid {
    color: #4b5563 !important;
}

/* --- Borders --- */
html.light-mode .border-dark-light {
    border-color: #e5e7eb !important;
}

html.light-mode .border-white {
    border-color: #111216 !important;
}

html.light-mode .border-white\/30 {
    border-color: rgba(17, 18, 22, 0.3) !important;
}

/* --- Navbar in light mode — dark text on white bg --- */
html.light-mode #cdis-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
html.light-mode #cdis-navbar .text-white,
html.light-mode #cdis-navbar .nav-link-underline,
html.light-mode #cdis-navbar .theme-toggle-btn {
    color: #111216 !important;
}
html.light-mode #cdis-navbar .bg-brand-red.text-white {
    color: #ffffff !important;
}
html.light-mode #cdis-navbar .text-white\/60 {
    color: rgba(17, 18, 22, 0.5) !important;
}
html.light-mode #cdis-navbar .nav-link-underline:hover {
    color: #d70042 !important;
}

/* --- Navbar scrolled (light mode) --- */
html.light-mode .navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* --- Mobile menu --- */
html.light-mode #mobile-menu {
    background-color: #ffffff !important;
}
html.light-mode #mobile-menu .text-white:not(.bg-brand-red) {
    color: #111216 !important;
}
html.light-mode #mobile-menu .bg-brand-red.text-white {
    color: #ffffff !important;
}
html.light-mode #mobile-menu .hover\:text-brand-red:hover {
    color: #d70042 !important;
}

/* --- Hero CTA outline button hover --- */
html.light-mode .hover\:bg-white:hover {
    background-color: #111216 !important;
}

html.light-mode .hover\:text-dark:hover {
    color: #ffffff !important;
}

/* --- Hero network SVG pattern --- */
html.light-mode section > svg.absolute circle {
    fill: #111216 !important;
}

html.light-mode section > svg.absolute line {
    stroke: #111216 !important;
}

/* --- Gradient orbs (more subtle in light mode) --- */
html.light-mode .bg-brand-red\/20 {
    background-color: rgba(215, 0, 66, 0.12) !important;
}

html.light-mode .bg-accent-blue\/15 {
    background-color: rgba(59, 130, 246, 0.10) !important;
}

html.light-mode .bg-accent-purple\/10 {
    background-color: rgba(139, 92, 246, 0.08) !important;
}

/* --- Scroll indicator --- */
html.light-mode .bg-white\/50 {
    background-color: rgba(17, 18, 22, 0.5) !important;
}

html.light-mode .bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* --- Form inputs --- */
html.light-mode .cdis-form-input {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111216 !important;
}

html.light-mode .cdis-form-input::placeholder {
    color: #9ca3af !important;
}

html.light-mode .placeholder-gray-500::placeholder {
    color: #9ca3af !important;
}

/* --- Card hover shadow (lighter in light mode) --- */
html.light-mode .quadrant-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* --- Hover states for links --- */
html.light-mode .hover\:text-white:hover {
    color: #111216 !important;
}

/* --- Custom scrollbar --- */
html.light-mode ::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
}

html.light-mode ::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
}

html.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

html.light-mode {
    scrollbar-color: #d1d5db #f3f4f6;
}

/* =========================================================================
   LIGHT MODE EXEMPTIONS
   Principles strip and brand-red buttons MUST keep white text.
   These use !important too, so they override the generic .text-white rule.
   ========================================================================= */

html.light-mode .bg-brand-red .text-white {
    color: #ffffff !important;
}

html.light-mode .bg-brand-red .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.light-mode .bg-brand-red .bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Brand-red buttons (same element has both classes) */
html.light-mode .bg-brand-red.text-white {
    color: #ffffff !important;
}

html.light-mode .hover\:bg-brand-red-dark:hover {
    color: #ffffff !important;
}

/* --- Theme toggle button --- */
.theme-toggle-btn {
    cursor: pointer;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html.light-mode .theme-toggle-btn {
    color: rgba(17, 18, 22, 0.8) !important;
}

html.light-mode .theme-toggle-btn:hover {
    color: #111216 !important;
}

/* =========================================================================
   LIGHT MODE — ABOUT SECTION CARD TREATMENT
   .about-content-card has NO base styles so dark mode is unchanged.
   ========================================================================= */

html.light-mode .section-about {
    background-color: #f0f4f8 !important;   /* tinted slate */
}

/* Card wrapper is invisible — content flows at full width like dark mode.
   Section bg #f8fafc provides the differentiation. */

/* =========================================================================
   LIGHT MODE — REDUCED VERTICAL SPACING (LOWER SECTIONS)
   ========================================================================= */

html.light-mode .section-about,
html.light-mode .section-services,
html.light-mode .section-safesigned,
html.light-mode .section-principles {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

html.light-mode .section-contact .bg-dark-mid {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

@media (min-width: 640px) {
    html.light-mode .section-about,
    html.light-mode .section-services,
    html.light-mode .section-safesigned,
    html.light-mode .section-principles {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    html.light-mode .section-contact .bg-dark-mid {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (min-width: 768px) {
    html.light-mode .section-about {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    html.light-mode .section-services,
    html.light-mode .section-safesigned,
    html.light-mode .section-principles {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    html.light-mode .section-contact .bg-dark-mid {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

html.light-mode footer > div {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* =========================================================================
   LIGHT MODE — VISUAL UPGRADE: DEPTH & RHYTHM
   Dark mode is UNAFFECTED — every rule is scoped under html.light-mode.
   ========================================================================= */

/* --- 1. Dark Footer (visual anchor — keep footer dark in light mode) --- */
html.light-mode footer.bg-dark {
    background-color: #111216 !important;
}

html.light-mode footer .text-white {
    color: #ffffff !important;
}

html.light-mode footer .text-white\/60 {
    color: rgba(255, 255, 255, 0.6) !important;
}

html.light-mode footer .text-grey-mid {
    color: #9ca3af !important;
}

html.light-mode footer .hover\:text-white:hover {
    color: #ffffff !important;
}

html.light-mode footer .border-dark-light {
    border-color: #363944 !important;
}

/* --- 2. Alternating Section Backgrounds (visual rhythm) ---
   Hero:       #ffffff  (white)
   About:      #f0f4f8  (tinted slate)
   Services:   #ffffff  (white)
   SafeSigned:  #ecedee  (own character — unchanged)
   Principles:  brand-red (unchanged)
   Contact:    #f0f4f8  (tinted slate)
   Footer:     #111216  (dark anchor)
   Pattern: white → tinted → white → gray → red → tinted → dark  */
html.light-mode .section-services {
    background-color: #ffffff !important;
}

/* Contact section is full-bleed split — no light-mode bg override needed */

/* --- 3. Service Cards — subtle bg + shadow on white section (depth) --- */
html.light-mode .section-services .quadrant-card {
    background-color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html.light-mode .section-services .quadrant-card:hover {
    background-color: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Contact section uses its own dark split layout — no light-mode form override */

/* --- 5. Hero stays pure white — contrast with About #f0f4f8 creates separation --- */

/* =========================================================================
   MOBILE RESPONSIVENESS (max-width only — desktop untouched)
   ========================================================================= */

@media (max-width: 767px) {
    /* Prevent horizontal scroll from gradient orbs */
    html, body {
        overflow-x: hidden;
    }

    /* Consistent section vertical padding on mobile */
    .section-about, .section-services, .section-safesigned, .section-principles {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Contact form column matches other sections */
    .section-contact .bg-dark-mid {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Disable hover scale on touch devices */
    .quadrant-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Reduce scroll-animate travel distance */
    .scroll-animate.from-up { transform: translateY(20px); }
    .scroll-animate.from-down { transform: translateY(-20px); }
    .scroll-animate.from-left { transform: translateX(20px); }
    .scroll-animate.from-right { transform: translateX(-20px); }

    /* Hero gradient orbs — shrink to avoid overflow */
    #hero .absolute.inset-0 > div {
        width: 12rem !important;
        height: 12rem !important;
    }

    /* Hero content — tighter spacing */
    #hero .max-w-4xl {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* SafeSigned decorative offset element — hide on mobile to prevent overflow */
    .section-safesigned .absolute.-z-10 {
        display: none;
    }

    /* Ensure touch targets are at least 44px */
    .mobile-menu a,
    .mobile-menu button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer — stack contact details vertically on mobile */
    footer .grid {
        gap: 1.5rem;
    }
}

/* Extra-small devices (< 380px) */
@media (max-width: 379px) {
    /* Even tighter section padding */
    .section-about, .section-services, .section-safesigned, .section-principles {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .section-contact .bg-dark-mid {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Principles grid — single column on very small screens */
    .bg-brand-red .grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }
}

/* =========================================================================
   CAPTCHA
   ========================================================================= */

.cdis-captcha-wrap {
    margin-top: 0.25rem;
}

/* Two-column inline layout: image+refresh | input */
.cdis-captcha-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: center;
}

/* Left side: image + refresh stacked horizontally */
.cdis-captcha-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cdis-captcha-image {
    flex: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    line-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cdis-captcha-image svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Right side: input stretches to full height */
.cdis-captcha-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.cdis-captcha-right input {
    height: 100%;
}

.cdis-captcha-refresh {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cdis-captcha-refresh:hover {
    color: #ffffff;
    border-color: #d70042;
    background: rgba(215, 0, 66, 0.1);
}

.cdis-captcha-refresh:active {
    transform: scale(0.95);
}

/* Stack on very small screens */
@media (max-width: 480px) {
    .cdis-captcha-inline {
        grid-template-columns: 1fr;
    }
}

/* Spin animation on refresh */
@keyframes captcha-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cdis-captcha-spinning svg {
    animation: captcha-spin 0.6s ease;
}

/* --- Light mode CAPTCHA overrides --- */
html.light-mode .cdis-captcha-image {
    border-color: #e5e7eb !important;
}

html.light-mode .cdis-captcha-image rect:first-child {
    fill: #ffffff !important;
}

html.light-mode .cdis-captcha-refresh {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #4b5563 !important;
}

html.light-mode .cdis-captcha-refresh:hover {
    background: rgba(215, 0, 66, 0.1) !important;
    border-color: #d70042 !important;
    color: #d70042 !important;
}