/* ── NT4Solutions — Brand: Teal #0d8080 | Accent/Orange: #f47c20 ─────────── */

/* CSS custom properties for brand colours (usable outside Tailwind) */
:root {
    --brand:        #0d8080;
    --brand-dark:   #0a6a6a;
    --brand-light:  #26a8a7;
    --accent:       #f47c20;
    --accent-dark:  #d96110;
    --accent-light: #f9b463;
}

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

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* Text selection */
::selection { background: var(--accent); color: #fff; }

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

/* Fade-in-up animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out both; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out both; }

/* Aspect ratio */
.aspect-video { aspect-ratio: 16/9; }

/* Sticky positioning helper */
.sticky { position: sticky; }

/* Form validation states */
.field-validation-error { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; display: block; }
.input-validation-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,.2); }

/* Blog / article prose */
.prose h2      { font-size: 1.5rem;   font-weight: 700; color: #0f172a; margin: 2rem 0 1rem; }
.prose h3      { font-size: 1.25rem;  font-weight: 600; color: #1e293b; margin: 1.5rem 0 .75rem; }
.prose p       { color: #475569; line-height: 1.8; margin-bottom: 1.25rem; }
.prose ul      { list-style: disc; padding-left: 1.5rem; color: #475569; margin-bottom: 1.25rem; }
.prose li      { margin-bottom: .5rem; }
.prose strong  { color: #0f172a; font-weight: 600; }
.prose a       { color: var(--brand); text-decoration: underline; }
.prose a:hover { color: var(--brand-dark); }
.prose blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
    font-style: italic;
    color: #64748b;
}

/* Logo in footer — invert to white */
footer img[alt="NT4Solutions"] {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* Nav active link — highlighted with brand underline */
.nav-link.active {
    color: var(--brand) !important;
    background: rgba(13,128,128,.06) !important;
}

/* Card hover lift */
.card-hover {
    transition: transform .3s ease, box-shadow .3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,.1);
}

/* Orange CTA button glow */
.btn-accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(244,124,32,.35);
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-accent:hover {
    background: var(--accent-dark);
    box-shadow: 0 6px 20px rgba(244,124,32,.45);
    transform: translateY(-1px);
}

/* Brand teal button */
.btn-brand {
    background: var(--brand);
    color: #fff;
    transition: background .2s ease, transform .2s ease;
}
.btn-brand:hover {
    background: var(--brand-dark);
    transform: translateY(-1px);
}

/* ── Premium button shadows ──────────────────────────────────────────────── */
.btn-orange {
    background: linear-gradient(135deg, #f47316, #f89135);
    color: #fff;
    box-shadow: 0 4px 16px rgba(244,115,22,.40);
    transition: all .2s ease;
}
.btn-orange:hover {
    background: linear-gradient(135deg, #dc5c0c, #f47316);
    box-shadow: 0 6px 24px rgba(244,115,22,.55);
    transform: translateY(-2px);
}

/* ── Active nav link highlight via JS ───────────────────────────────────── */
.nav-link.active-nav,
.mobile-nav-link.active-nav {
    color: #0d8c8c !important;
    background-color: rgba(13,140,140,.08) !important;
    font-weight: 600;
}

/* ── Header shadow when scrolled ─────────────────────────────────────────── */
#site-header.scrolled #main-nav {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* ── Hero section background overlay for depth ───────────────────────────── */
.hero-grid-overlay {
    background-image:
        linear-gradient(rgba(13,140,140,.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,140,140,.15) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── Service card brand-color icons ──────────────────────────────────────── */
.service-icon-brand { background: rgba(13,140,140,.1); color: #0d8c8c; }
.service-icon-accent { background: rgba(244,115,22,.1); color: #f47316; }