/* Custom styles for Try Global */

/* ─── Font ─── */
body, button, input, select, textarea {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* ─── Transparent / Scrolled Header ─── */
#siteHeader {
    transition: background 0.35s ease, box-shadow 0.35s ease;
    background: transparent;
}
#siteHeader.scrolled {
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

/* Logo: white when transparent, normal when scrolled */
#siteHeader:not(.scrolled) #headerLogo {
    filter: brightness(0) invert(1);
}

/* Nav links */
#siteHeader .header-nav-link {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.875rem;
}
#siteHeader:not(.scrolled) .header-nav-link {
    color: rgba(255,255,255,0.92);
}
#siteHeader:not(.scrolled) .header-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
#siteHeader.scrolled .header-nav-link {
    color: #374151;
}
#siteHeader.scrolled .header-nav-link:hover {
    color: #2563eb;
    background: #f9fafb;
}
#siteHeader:not(.scrolled) .header-nav-link .nav-arrow { opacity: 0.6; }
#siteHeader.scrolled .header-nav-link .nav-arrow { opacity: 0.5; }

/* Dropdown caret color */
#siteHeader:not(.scrolled) .nav-active-indicator { color: rgba(255,255,255,0.88); font-weight: 600; }
#siteHeader.scrolled .nav-active-indicator { color: #2563eb; font-weight: 600; }

/* CTA button */
#siteHeader:not(.scrolled) .header-cta {
    background: #ffffff;
    border: 1px solid transparent;
    color: #1e40af;
    font-weight: 600;
}
#siteHeader:not(.scrolled) .header-cta:hover {
    background: #f0f7ff;
}
#siteHeader.scrolled .header-cta {
    background: #2563eb;
    border: 1px solid transparent;
    color: white;
    font-weight: 600;
}
#siteHeader.scrolled .header-cta:hover {
    background: #1d4ed8;
}

/* Mobile hamburger button */
#siteHeader:not(.scrolled) #mobileMenuBtn {
    color: white;
}
#siteHeader.scrolled #mobileMenuBtn {
    color: #374151;
}
#siteHeader:not(.scrolled) #mobileMenuBtn:hover { background: rgba(255,255,255,0.15); }
#siteHeader.scrolled #mobileMenuBtn:hover { background: #f3f4f6; }

/* Mobile menu panel always white */
#mobileMenu {
    background: white;
    border-top: 1px solid #f3f4f6;
}

/* Line clamp utility */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Active nav */
.nav-link.active { color: #2563eb; font-weight: 600; }

/* Submenu hover */
.submenu { z-index: 100; }
.submenu::-webkit-scrollbar { width: 4px; }
.submenu::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Mobile accordion */
.mobile-accordion.open .accordion-content { display: block; }
.mobile-accordion.open .accordion-arrow { transform: rotate(180deg); }

/* Color swatch active */
.color-swatch.active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Product card hover lift */
.group:hover { transform: translateY(-2px); }

/* Prose styles */
.prose p { margin-bottom: 1rem; }
.prose h2 { margin-top: 2rem; margin-bottom: 1rem; }

/* Table responsive */
.overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Print styles */
@media print {
    header, footer, .no-print { display: none !important; }
    .max-w-7xl { max-width: 100% !important; }
}