/* ============================================
   DYNAMIC THEME STYLESHEET
   Generated from .env configuration
   ============================================ */

/* ============================================
   PAGE TRANSITIONS & ANIMATIONS
   ============================================ */

html {
    /* Smooth page load animation */
    animation: pageLoad 0.3s ease-in-out;
}

@keyframes pageLoad {
    from {
        opacity: 0.95;
    }
    to {
        opacity: 1;
    }
}

/* Selective transitions for interactive elements only */
a, button, input, textarea, select, .nav-link, .service-link, .service-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body {
    /* Ensure page is visible immediately */
    opacity: 1;
}

[x-cloak] {
    display: none !important;
}

/* Color Variables */
:root {
    --primary-color: #5d8b80;
    --primary-color-dark: #4a7a71;
    --primary-color-light: #7a9f95;
    --primary-color-rgb: 93,139,128;
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

.gradient-text {
    color: #5d8b80;
    background: linear-gradient(135deg, #5d8b80 0%, #4a7a71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-purple-blue,
.gradient-blue-cyan {
    background: linear-gradient(135deg, #5d8b80 0%, #4a7a71 100%) !important;
}

.hero-gradient-overlay {
    background: linear-gradient(135deg, rgba(93,139,128, 0.12) 0%, rgba(93,139,128, 0.1) 100%) !important;
}

/* ============================================
   NAVIGATION & LINKS
   ============================================ */

.nav-link::after {
    background: #5d8b80;
}

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

.mega-menu-trigger::after {
    background: #5d8b80;
}

.mega-menu-trigger:hover::after {
    width: 100%;
}

.service-link.font-semibold {
    color: #ffffff;
    background: #5d8b80;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border-left: none;
}

.service-link.font-semibold:hover {
    background: #4a7a71;
}

.service-category-title {
    color: #5d8b80;
}

a {
    color: #5d8b80;
}

a:hover {
    color: #4a7a71;
}

/* ============================================
   BUTTONS & CTAs
   ============================================ */

.btn-primary {
    background: #5d8b80;
    color: white;
}

.btn-primary:hover {
    background: #4a7a71;
}

/* ============================================
   SERVICE CARDS & ACCENTS
   ============================================ */

.service-card:hover {
    box-shadow: 0 12px 24px rgba(93,139,128, 0.15);
}

.service-card-border {
    background: linear-gradient(135deg, #5d8b80 0%, #4a7a71 100%);
}

/* ============================================
   FAQ & INTERACTIVE ELEMENTS
   ============================================ */

.faq-button:hover {
    background: #f8fafc;
    color: #5d8b80;
}

.faq-icon.open {
    color: #5d8b80;
}

/* ============================================
   FOCUS STATES & ACCESSIBILITY
   ============================================ */

:focus-visible {
    outline-color: #5d8b80;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid #5d8b80;
    outline-offset: 2px;
}

/* ============================================
   INPUT FIELDS & FORMS
   ============================================ */

input:focus,
textarea:focus,
select:focus {
    border-color: #5d8b80;
    box-shadow: 0 0 0 3px rgba(93,139,128, 0.15);
}

/* ============================================
   TEXT SELECTION
   ============================================ */

::selection {
    background-color: #5d8b80;
    color: white;
}

::-moz-selection {
    background-color: #5d8b80;
    color: white;
}

/* ============================================
   BADGES & TAGS
   ============================================ */

.badge,
.tag {
    background-color: #7a9f95;
    color: #4a7a71;
}

.badge.active,
.tag.active {
    background-color: #5d8b80;
    color: white;
}

/* ============================================
   LOADING & PROGRESS
   ============================================ */

.loading,
.progress {
    background-color: #5d8b80;
}

.progress-bar {
    background: linear-gradient(90deg, #5d8b80, #7a9f95);
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */

.alert-info {
    background-color: rgba(93,139,128, 0.1);
    border-left-color: #5d8b80;
    color: #4a7a71;
}

/* ============================================
   CUSTOM SCROLLBAR (WebKit browsers)
   ============================================ */

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

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

::-webkit-scrollbar-thumb {
    background: #5d8b80;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a7a71;
}

/* ============================================
   LARGE SCREEN OPTIMIZATION (2560px+)
   TV, Projections, High-Resolution Displays
   ============================================ */

@media (min-width: 2560px) {
    /* Increase container width for 4K+ displays */
    .max-w-5xl {
        max-width: 100%;
        padding: 0 120px;
    }

    .max-w-6xl {
        max-width: 100%;
        padding: 0 120px;
    }

    .max-w-7xl {
        max-width: 100%;
        padding: 0 120px;
    }

    /* Scale typography */
    h1 {
        font-size: 5.5rem; /* From 3.75rem */
        line-height: 1.1;
    }

    h2 {
        font-size: 3.5rem; /* From 2.25rem */
    }

    h3 {
        font-size: 2.5rem; /* From 1.875rem */
    }

    /* Increase padding proportionally */
    .px-6 {
        padding-left: 120px;
        padding-right: 120px;
    }

    .py-16, .py-20, .py-24, .py-32 {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .py-12 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .gap-8 {
        gap: 48px; /* From 32px */
    }

    .gap-6 {
        gap: 40px; /* From 24px */
    }

    /* Larger button/interactive elements */
    button, a[class*="cta"], .btn, [role="button"] {
        min-height: 60px;
        min-width: 60px;
        font-size: 1.25rem;
        padding: 20px 40px;
    }

    /* Increase base font size */
    body {
        font-size: 1.125rem; /* From 1rem */
        line-height: 1.75;
    }

    p, li, span {
        font-size: 1.125rem;
    }

    .text-base {
        font-size: 1.125rem;
    }

    .text-lg {
        font-size: 1.375rem; /* From 1.125rem */
    }

    .text-xl {
        font-size: 1.5rem; /* From 1.25rem */
    }

    /* Card spacing */
    .service-card {
        padding: 60px;
        gap: 40px;
    }

    .p-8 {
        padding: 80px;
    }

    /* Navigation adjustments */
    nav {
        padding: 30px 0;
    }

    .nav-link {
        min-height: 60px;
        font-size: 1.25rem;
    }

    .logo, [class*="logo"] {
        font-size: 2.5rem;
    }

    /* Hero sections */
    header {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
    }

    /* Increase touch targets for accessibility from distance */
    input, textarea, select {
        min-height: 60px;
        font-size: 1.125rem;
        padding: 15px 20px;
    }

    /* Menu spacing */
    #mobile-menu {
        max-height: 95vh;
    }

    /* Improve line spacing for readability on large screens */
    .leading-relaxed {
        line-height: 2;
    }

    .leading-tight {
        line-height: 1.35;
    }

    /* Horizontal scroll prevention */
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ============================================
   ULTRA-LARGE SCREEN OPTIMIZATION (3840px+)
   8K Displays, Very Large Projections
   ============================================ */

@media (min-width: 3840px) {
    /* Scale everything up further */
    h1 {
        font-size: 7rem;
    }

    h2 {
        font-size: 4.5rem;
    }

    body {
        font-size: 1.5rem;
        line-height: 2;
    }

    .px-6 {
        padding-left: 160px;
        padding-right: 160px;
    }

    .py-16, .py-20, .py-24, .py-32 {
        padding-top: 140px;
        padding-bottom: 140px;
    }

    button, a[class*="cta"], .btn {
        min-height: 80px;
        font-size: 1.5rem;
        padding: 25px 50px;
    }

    .service-card {
        padding: 80px;
    }
}