/* ==============================================
Adhere Studio LLC - Main Stylesheet
==============================================
*/

/* ----------------------------------------------
Root Variables & Global Settings
----------------------------------------------
- Defines color palette and font families for consistency.
- Sets up the custom cursor behavior.
*/
:root {
    /* Primary palette */
    --charcoal: #212529;            /* primary text for light mode */
    --off-white: #F8F9FA;          /* primary light background / text for dark mode */
    --bold-teal: #20c997;          /* brand accent */

    /* Dark mode surfaces */
    --dark-bg: #0b0b0b;            /* page background in dark mode (not pure black) */
    --dark-card: #111315;          /* card / panel background in dark mode */

    /* Accessible semantic tokens */
    --text-muted: #6B7280;         /* muted text for light mode */
    --text-muted-dark: #D1D5DB;    /* muted text for dark mode */

    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Lato', sans-serif;
}

/* Compatibility utilities for legacy class names used in templates */
/* Apply global fonts and basic text/background utilities so pages that use
   classes like `text-charcoal` or `font-poppins` render correctly even when
   Tailwind or other builds are not present. */
body {
    font-family: var(--font-secondary);
    color: var(--charcoal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-primary);
}
.font-poppins { font-family: var(--font-primary); }
.font-lato { font-family: var(--font-secondary); }
.text-charcoal { color: var(--charcoal) !important; }
.text-off-white { color: var(--off-white) !important; }
.text-bold-teal { color: var(--bold-teal) !important; }
.bg-dark-bg { background-color: var(--dark-bg) !important; }
.bg-off-white { background-color: var(--off-white) !important; }
.dark .text-charcoal { color: var(--off-white) !important; }
.dark .text-off-white { color: var(--off-white) !important; }

/* Catch mixed utility-like classes (e.g. hover:text-bold-teal, dark:hover:text-bold-teal)
   some templates include these tokens literally; use attribute selectors to handle them */
a[class*="hover:text-bold-teal"]:hover,
a[class*="dark:hover:text-bold-teal"]:hover {
    color: var(--bold-teal) !important;
}

/* ----------------------------------------------
Legacy/Tailwind-like utility fallbacks for contrast
These map commonly-used utility tokens (text-gray-600, bg-gray-100, etc.)
to explicit colors so pages remain legible even when Tailwind runtime isn't available.
----------------------------------------------*/
.text-gray-50 { color: #F9FAFB; }
.text-gray-100 { color: #F3F4F6; }
.text-gray-200 { color: #E5E7EB; }
.text-gray-300 { color: #D1D5DB; }
.text-gray-400 { color: #9CA3AF; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1F2937; }
.text-gray-900 { color: #111827; }

.dark .text-gray-50 { color: #F9FAFB; }
.dark .text-gray-100 { color: #F3F4F6; }
.dark .text-gray-200 { color: #E5E7EB; }
.dark .text-gray-300 { color: #D1D5DB; }
.dark .text-gray-400 { color: #9CA3AF; }
.dark .text-gray-500 { color: #6B7280; }
.dark .text-gray-600 { color: var(--text-muted-dark); }
.dark .text-gray-700 { color: #9CA3AF; }
.dark .text-gray-800 { color: #6B7280; }
.dark .text-gray-900 { color: #374151; }

/* Background utilities */
.bg-white { background-color: #ffffff !important; }
.bg-off-white { background-color: var(--off-white) !important; }
.bg-gray-50 { background-color: #F9FAFB !important; }
.bg-gray-100 { background-color: #F3F4F6 !important; }
.bg-gray-200 { background-color: #E5E7EB !important; }
.bg-gray-300 { background-color: #D1D5DB !important; }
.bg-gray-700 { background-color: #374151 !important; }

/* Common missing utilities used throughout templates */
.bg-charcoal { background-color: var(--charcoal) !important; }
.bg-black { background-color: #000000 !important; }
.text-white { color: #ffffff !important; }
.text-offwhite { color: var(--off-white) !important; }

.dark .text-white { color: #ffffff !important; }
.dark .text-offwhite { color: var(--off-white) !important; }
.bg-darkbg { background-color: var(--dark-bg) !important; }
.dark .bg-darkbg { background-color: var(--dark-bg) !important; }

/* Standardize CTA / Schedule button appearance when authors forget to apply full classes */
.open-modal-btn {
    display: inline-block;
    background-color: var(--charcoal);
    color: #ffffff !important;
    font-family: var(--font-primary);
    font-weight: 600;
    padding: 0.5rem 1.25rem; /* py-2 px-5 */
    border-radius: 9999px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease, transform 120ms ease;
}
.dark .open-modal-btn { background-color: var(--off-white); color: var(--charcoal) !important; }
.open-modal-btn:hover { background-color: #4b5563; }
.dark .open-modal-btn:hover { background-color: #e5e7eb; }
.open-modal-btn:focus { outline: 3px solid rgba(32,201,151,0.16); outline-offset: 2px; }

/* Hide kits page links site-wide (temporary) */
a[href="kits.html"],
.kits-link,
#mobile-menu a[href="kits.html"] {
    display: none !important;
}

/* Navbar link defaults to ensure contrast in both modes */
nav a { color: var(--charcoal); }
.dark nav a { color: var(--text-muted-dark); }
.dark nav a:hover, nav a:hover { color: var(--bold-teal); }

/* Ensure submenu links meet contrast in dark mode */
.nav-submenu a { color: var(--charcoal); }
.dark .nav-submenu a { color: var(--text-muted-dark); }
.nav-submenu a:hover { background-color: rgba(32,201,151,0.06); }

/* Kits submenu item: temporarily hide the link site-wide while retaining markup
   so it can be re-enabled later without changing templates. Keep original
   styles here (commented) for easy restoration if needed. */
.nav-submenu a.kits-link {
    display: none !important;
}

/* Hide mobile variant as well */
#mobile-menu a[href="kits.html"] {
    display: none !important;
}

/*
Original styles (archived):
.nav-submenu a.kits-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    background-color: var(--bold-teal) !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 0.5rem;
    box-shadow: 0 6px 14px rgba(32,201,151,0.14);
    text-decoration: none;
}
#mobile-menu a[href="kits.html"] {
    display: block;
    background-color: var(--bold-teal) !important;
    color: #ffffff !important;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25;
    text-decoration: none;
}
#mobile-menu a[href="kits.html"]:hover,
.nav-submenu a.kits-link:hover { filter: brightness(0.95); }
*/

/* Dark-mode fix: utility class bg-gray-50 is used with dark:bg-dark-card in templates
   but our legacy utilities didn't map the dark state; ensure the gray-50 surface
   flips to a dark card in dark mode so roll-open (details) blocks remain legible. */
.dark .bg-gray-50 { background-color: var(--dark-card) !important; }
.dark .bg-gray-100 { background-color: #111827 !important; }

/* Improve contrast and spacing for accordion / roll-open items (details + summary)
   so they are readable in both light and dark themes. */
details { background-color: var(--off-white); color: var(--charcoal); }
.dark details { background-color: var(--dark-card); color: var(--off-white); }
details summary { cursor: pointer; padding: 0.25rem 0; font-weight: 600; }
details[open] { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
details .p-4 { padding: 1rem; }

.dark .bg-white { background-color: #0b0b0b !important; }
.dark .bg-off-white { background-color: var(--dark-card) !important; }

/* Hover background helper used by many pages */
.hover\:bg-gray-100:hover { background-color: #F3F4F6 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #111827 !important; }

/* Ensure base typography is legible */
body, p, li, dd, dt {
    color: var(--charcoal);
    line-height: 1.7;
    font-size: 1rem;
}
.dark body, .dark p, .dark li, .dark dd, .dark dt { color: var(--off-white); }

/* Stronger heading contrast */
h1,h2,h3,h4 { color: var(--charcoal); line-height: 1.15; }
.dark h1,h2,h3,h4 { color: var(--off-white); }

/* ----------------------------------------------
   Form controls: force dark-theme appearance and high-contrast text
   Applied globally so inputs are legible even if .dark class is missing
   ----------------------------------------------*/
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], textarea, select {
    /* Dark surface for fields */
    background-color: var(--dark-card);
    color: var(--off-white) !important; /* typed text should always be legible */
    border: 1px solid rgba(255,255,255,0.06);
    caret-color: var(--off-white);
}

/* Placeholder contrast must be readable on dark fields */
input::placeholder, textarea::placeholder {
    color: var(--text-muted-dark);
    opacity: 1; /* browsers differ; keep it explicit */
}

/* Selects and options inherit the dark surface and readable text */
select { background-color: var(--dark-card); color: var(--off-white); }
select option { background-color: var(--dark-card); color: var(--off-white); }

/* Autofill handling (Chrome) to ensure autofilled text is readable */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--dark-card) inset !important;
    -webkit-text-fill-color: var(--off-white) !important;
}

/* ----------------------------------------------
   Page-specific: Quote form should use dark-on-light fields
   Override global dark-forced inputs for #quote-form-container
   ----------------------------------------------*/
#quote-form-container input[type="text"],
#quote-form-container input[type="email"],
#quote-form-container input[type="tel"],
#quote-form-container input[type="url"],
#quote-form-container input[type="search"],
#quote-form-container input[type="password"],
#quote-form-container textarea,
#quote-form-container select {
    background-color: var(--off-white) !important; /* keep light field */
    color: var(--charcoal) !important; /* typed text should be dark */
    border: 1px solid rgba(0,0,0,0.06) !important;
    caret-color: var(--charcoal) !important;
}

#quote-form-container input::placeholder,
#quote-form-container textarea::placeholder {
    color: #6B7280 !important; /* muted gray for helper text */
    opacity: 1 !important;
}

#quote-form-container select { background-color: var(--off-white) !important; }
#quote-form-container select option { background-color: var(--off-white) !important; color: var(--charcoal) !important; }

#quote-form-container label,
#quote-form-container .help-text,
#quote-form-container .text-gray-700 {
    color: var(--off-white) !important; /* labels/helper text reverted to white */
}




/* Hides the theme switcher script from rendering */
.theme-script {
    display: none;
}

/* Only hide the native cursor when the custom cursor is active.
   This keeps the system cursor visible on pages that don't include
   a #custom-cursor element so they don't appear broken. The JS
   will add `custom-cursor-active` to the <html> element when the
   custom cursor is initialized. */
#custom-cursor { display: none; }
html.custom-cursor-active, html.custom-cursor-active body, html.custom-cursor-active a, html.custom-cursor-active button, html.custom-cursor-active input, html.custom-cursor-active select, html.custom-cursor-active textarea {
    cursor: none;
}

/* ----------------------------------------------
Custom Cursor Styles
----------------------------------------------
- Creates a circular cursor that follows the mouse.
- Provides a visual 'grow' effect on hover over interactive elements.
*/
#custom-cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* revert to filled circle so mix-blend-mode: difference produces the inverted look */
    background-color: #ffffff;
    border: 2px solid rgba(255,255,255,0.08);
    mix-blend-mode: difference; /* keeps interactive inversion with background */
    pointer-events: none; /* Allows clicking through the cursor */
    transform: translate(-50%, -50%);
    transition: width 150ms ease, height 150ms ease;
    /* sit above most site elements but below the close button */
    z-index: 100004;
}

#custom-cursor.grow {
    width: 48px;
    height: 48px;
    box-shadow: 0 0 18px rgba(32,201,151,0.12);
}

/* ----------------------------------------------
Buttons
----------------------------------------------
- Reusable classes for primary, secondary, and navigation buttons.
*/
.btn-primary {
    display: inline-block;
    background-color: var(--bold-teal);
    color: var(--charcoal);
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1.125rem; /* text-lg */
    transition: background-color 300ms, color 300ms;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.dark .btn-primary {
    color: var(--charcoal); /* Keeps text dark for contrast on teal */
}

.btn-primary:hover {
    background-color: #14b8a6; /* A slightly darker teal */
    color: white;
}

.dark .btn-primary:hover {
    color: white;
}

.btn-secondary {
    display: inline-block;
    background-color: var(--charcoal);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.75rem 2rem;
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 1.125rem; /* text-lg */
    transition: background-color 300ms, color 300ms;
}

.dark .btn-secondary {
    background-color: var(--off-white);
    color: var(--charcoal);
}

.btn-secondary:hover {
    background-color: #4b5563; /* A slightly lighter charcoal */
}

.dark .btn-secondary:hover {
    background-color: #e5e7eb; /* A slightly darker off-white */
}

.btn-nav {
    display: inline-block;
    background-color: var(--charcoal);
    color: white;
    font-family: var(--font-primary);
    font-weight: 600; /* semibold */
    padding: 0.5rem 1.25rem; /* py-2 px-5 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    transition: background-color 300ms, color 300ms;
}

.dark .btn-nav {
    background-color: var(--off-white);
    color: var(--charcoal);
}

.btn-nav:hover {
    background-color: #4b5563;
}

.dark .btn-nav:hover {
    background-color: #e5e7eb;
}

/* Hover/focus styles for Calendly modal trigger buttons */
.open-modal-btn {
    /* inherit base button styles via existing btn-* classes */
    text-decoration: none;
}
.open-modal-btn:hover, .open-modal-btn:focus {
    outline: none;
    box-shadow: 0 6px 18px rgba(32, 201, 151, 0.18);
    transform: translateY(-2px);
}


/* ----------------------------------------------
Component Styles
----------------------------------------------
- Defines styles for reusable components like navigation, cards, etc.
*/

/* Glassmorphism effect for the navigation bar on scroll */
.glassmorphism {
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glassmorphism {
    background: rgba(17, 17, 17, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient for page headers on interior pages */
.page-header-gradient {
    background-image: linear-gradient(135deg, #e9fbf8 0%, #f8f9fa 100%);
}

.dark .page-header-gradient {
    background-image: linear-gradient(135deg, #111827 0%, #000000 100%);
}

/* Adds a small 'bridge' to prevent the services submenu from disappearing too quickly */
.group:hover .nav-submenu {
    padding-top: 1rem;
}

/* ----------------------------------------------
Homepage Specific Styles
----------------------------------------------
*/

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-section video {
    filter: blur(0px);
    transform: scale(1.00);
}

/* Service & Blog Card Hover Effects */
.service-card:hover, .blog-card:hover {
    transform: translateY(-0.5rem);
}

.blog-card-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Image Gallery Hover Effect */
.group img {
    transition: transform 0.3s ease;
}

.group:hover img {
    transform: scale(1.05);
}


/* ----------------------------------------------
Portfolio Page Specific Styles
----------------------------------------------
*/

/* Style for the active filter button */
.filter-btn.is-checked {
    background-color: var(--bold-teal);
    color: white !important;
}

/* ----------------------------------------------
Modal (Calendly) Styles
----------------------------------------------
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 99990;
    padding: 1.5rem;
}
.modal-overlay.active {
    display: flex;
}
.modal-content {
    width: 100%;
    max-width: 980px;
    background: white;
    border-radius: 0.75rem;
    /* allow the close button to sit outside the rounded corner without being clipped */
    overflow: visible;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.dark .modal-content { background: #0b0b0b; }
.modal-content iframe {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    /* keep rounded corners even when modal-content overflow is visible */
    border-radius: 0.75rem;
}
.modal-close-btn {
    position: absolute;
    /* place the button visually outside the rounded corner */
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    background: var(--charcoal);
    color: white;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* high z-index to ensure the close button is visible above modal and third-party widgets */
    z-index: 100005;
}
.modal-close-btn svg { width: 1rem; height: 1rem; }

/* Ensure mobile menu and button sit above non-active overlays and accept pointer events */
#mobile-menu-button, #mobile-menu {
    position: relative;
    /* push well above other overlays to ensure taps reach the controls across the site */
    z-index: 2147483646 !important;
    /* On touch devices ensure taps are delivered and default gestures don't interfere */
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
}

/* Make decorative particle canvases and generated trail canvases non-interactive so they don't
   intercept touch/click events intended for UI controls (applies broadly across pages). */
#particles-js, #particles-js canvas, .trail-canvas, canvas.trail-canvas {
    pointer-events: none !important;
}

/* Ensure modal overlays only intercept pointer events when active. Use !important to
   override inline styles from third-party widgets that may force pointer-events. */
.modal-overlay { pointer-events: none !important; }
.modal-overlay.active { pointer-events: auto !important; }

/* Create a stacking context for the site header container and center wrapper so
    the mobile menu and nav are guaranteed above chat/calendly overlays on small screens. */
header#nav-bar, .max-w-6xl.mx-auto {
     position: relative;
     z-index: 2147483647 !important; /* one less than max signed 32-bit int to be safe */
}

/* Only apply the above aggressive stacking on smaller viewports so desktop layering
    is unaffected by this emergency fix. Adjust breakpoint as needed. */
@media (min-width: 992px) {
  header#nav-bar, .max-w-6xl.mx-auto { z-index: 40 !important; }
}

/* When mobile menu is hidden, ensure it doesn't block pointer events from underlying elements */
#mobile-menu.hidden { pointer-events: none; }

/* Some pages used .modal-overlay with pointer-events even when hidden; make hidden overlays non-interactive */
.modal-overlay { pointer-events: none; }
.modal-overlay.active { pointer-events: auto; }

/* Animated mobile menu: default hidden via transform/opacity; when body.mobile-open or data-open=true it slides/fades in */
#mobile-menu {
    transition: transform 300ms cubic-bezier(.2,.9,.28,1), opacity 220ms ease, visibility 300ms ease;
    transform-origin: top center;
    transform: translateY(-10px) scaleY(0.98);
    opacity: 0;
    visibility: hidden;
}

/* When menu is visible (we set data-open='true' for animation) */
#mobile-menu[data-open='true'] {
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Make sure Tailwind's `hidden` (display:none) doesn't keep the menu invisible when JS opens it.
     Apply only on small screens to avoid affecting desktop nav. */
@media (max-width: 991px) {
    #mobile-menu[data-open='true'],
    body.mobile-open #mobile-menu,
    #mobile-menu:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) scaleY(1) !important;
        pointer-events: auto !important;
    }

    /* Defensive: if JS toggles a `show` class instead of data-open, handle it too */
    #mobile-menu.show, #mobile-menu.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) scaleY(1) !important;
        pointer-events: auto !important;
    }
}

/* When body has mobile-open state but JS hasn't toggled data-open yet, ensure menu is visible for transition start */
body.mobile-open #mobile-menu {
    /* keep class-based visibility if JS is not available */
    transform: translateY(0) scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Slight elevation and shadow for open mobile menu */
#mobile-menu[data-open='true'], body.mobile-open #mobile-menu {
    box-shadow: 0 20px 40px rgba(2,6,23,0.2);
}


/* Transitions for grid items when filtering */
.grid-item {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.grid-item img {
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05);
}

/* Lightbox styles for viewing images */
#lightbox-overlay {
    transition: opacity 300ms ease-in-out;
}

#lightbox-overlay img {
    transition: transform 300ms ease-in-out;
}


/* ----------------------------------------------
Fleet Page Specific Styles
----------------------------------------------
*/

/* Carousel container styles */
.carousel-container {
    position: relative;
    width: 100%;
    height: 400px; /* Fixed height for consistency */
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.carousel-slide {
    display: none; /* Hide slides by default */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures whole image is visible */
}

.carousel-slide.active {
    display: block; /* Show the active slide */
}

/* Carousel navigation dots */
.carousel-dots {
    text-align: center;
    padding-top: 1rem;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.dot.active, .dot:hover {
    background-color: var(--bold-teal);
}

/* ----------------------------------------------
Team Section (About Page)
----------------------------------------------
*/
.team-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.team-card.active .team-card-details {
    /* The max-height is set by JS */
    will-change: max-height;
}

.team-card .expand-icon {
    transition: transform 0.3s ease-in-out;
}

.team-card.active .expand-icon {
    transform: rotate(45deg);
}

/* ----------------------------------------------
FAQ Section
----------------------------------------------
*/
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease-out;
}
.faq-question svg {
    transition: transform 300ms ease-out;
    flex-shrink: 0;
}
.faq-item.open .faq-question svg {
    transform: rotate(180deg);
}

/* ----------------------------------------------
Contact Form
----------------------------------------------
*/
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #f3f4f6; /* gray-100 */
    border: 1px solid transparent;
    transition: border-color 300ms, box-shadow 300ms;
}
.dark .form-input {
    background-color: #1f2937; /* gray-800 */
}
.form-input:focus {
    outline: none;
    border-color: var(--bold-teal);
    box-shadow: 0 0 0 2px rgba(32, 201, 151, 0.3);
}

/* ----------------------------------------------
Modal Styles (Calendly Popup)
----------------------------------------------
*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    /* keep overlay below the custom cursor but above page content when active */
    z-index: 100000;
    opacity: 0;
    /* when hidden, ensure it doesn't intercept pointer events so custom cursor continues to function */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: 90%;
    height: 80%;
    max-width: 1000px;
    background: white;
    border-radius: 1rem;
    /* allow close button to escape rounded corner */
    overflow: visible;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1rem;
}

.modal-close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 36px;
    height: 36px;
    background: var(--charcoal);
    color: white;
    border-radius: 50%;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100001;
}