/* ================================================================
   Faran Chemicals (Pvt) Ltd — Custom Stylesheet
   Supplements Tailwind CDN with project-specific overrides
   ================================================================ */
/* Fix contrast on section label divs — WCAG AA compliance */
/* Self-hosted Barlow fonts — eliminates Google Fonts CDN dependency */
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/Barlow-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/Barlow-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow';
    src: url('/fonts/Barlow-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Barlow Condensed';
    src: url('/fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
.section-label {
    color: #8B6914;
}
:root {
    --navy: #002147;
    --navy-light: #003366;
    --navy-dark: #001530;
    --accent: #C8A84B;
    --accent-light: #D4B96A;
    --accent-dark: #A8882B;
    --steel: #4A5568;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

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

/* ── Selection highlight ───────────────────────────────────────── */
::selection { background: var(--accent); color: var(--navy); }

/* ── Focus outline ─────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Back to top button ────────────────────────────────────────── */
#backToTop {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--navy);
    color: var(--accent);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0, 33, 71, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
}
#backToTop.visible {
    opacity: 1;
    transform: translateY(0);
}
#backToTop:hover {
    background: var(--accent);
    color: var(--navy);
}

/* ── Page transition ───────────────────────────────────────────── */
body {
    animation: pageLoad 0.4s ease forwards;
}
@keyframes pageLoad {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Hero parallax-like depth on overlay ──────────────────────── */
.hero-overlay {
    background: linear-gradient(135deg, rgba(0,33,71,0.95) 0%, rgba(0,33,71,0.7) 100%);
}

/* ── Product card image zoom ───────────────────────────────────── */
.product-img-wrap { overflow: hidden; }
.product-img-wrap img {
    transition: transform 0.4s ease;
}
.product-img-wrap:hover img {
    transform: scale(1.05);
}

/* ── Section reveal animation ──────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stat counter pulse ────────────────────────────────────────── */
@keyframes countPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.stat-counter.animate {
    animation: countPulse 0.4s ease;
}

/* ── Print styles ──────────────────────────────────────────────── */
@media print {
    nav, footer, #backToTop, .toast { display: none !important; }
    body { background: white; color: black; }
}
/* Utility for multi-line text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}