/* Roofy Investments Zambia — site stylesheet
 * Direction: international-gray minimalism (Linear / Notion / Stripe register).
 * Body sits on zinc-50, text on zinc-800; single zinc-900 accent for CTAs.
 * Type family: Inter (Latin) + Noto Sans SC (Chinese fallback).
 * Locked rules: see project memory `project_roofy_brief.md` (2026-05-14 pivot). */

html,
body {
    background: #F8FAFC;
    color: #334155;
    font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Moderate display scale. Hero max ~3rem (48px), then proportional steps down. */
.display-xl {
    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(1.875rem, 4vw, 3rem);
    color: #0B1F3A;
}

.display-lg {
    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.15;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    color: #0B1F3A;
}

.display-md {
    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    color: #0B1F3A;
}

.eyebrow {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .75rem;
    color: #C2870A;
}

/* Two-mode navbar: 'hero' = transparent over a dark hero image (light text),
 * 'solid' = solid white bg + slate text + subtle bottom border (default).
 * The scroll watcher in roofy-core.js toggles data-mode on home. */

#site-nav { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }

#site-nav[data-mode="hero"] {
    background: transparent;
    border-bottom: 1px solid transparent;
}
#site-nav[data-mode="hero"] .nav-wordmark { color: #FFFFFF; }
#site-nav[data-mode="hero"] .nav-link { color: rgba(241, 245, 249, 0.85); }
#site-nav[data-mode="hero"] .nav-link:hover,
#site-nav[data-mode="hero"] .nav-link.is-active { color: #F5B301; }
#site-nav[data-mode="hero"] .nav-lang { color: rgba(241, 245, 249, 0.85); }
#site-nav[data-mode="hero"] .nav-lang:hover { color: #F5B301; background: rgba(255, 255, 255, 0.08); }
#site-nav[data-mode="hero"] .nav-mobile-toggle { color: #FFFFFF; }

#site-nav[data-mode="solid"] {
    background: #0B1F3A;
    border-bottom: 1px solid #0B1F3A;
    box-shadow: 0 10px 24px rgba(11, 31, 58, 0.2);
}
#site-nav[data-mode="solid"] .nav-wordmark { color: #FFFFFF; }
#site-nav[data-mode="solid"] .nav-link { color: rgba(226, 232, 240, 0.85); }
#site-nav[data-mode="solid"] .nav-link:hover,
#site-nav[data-mode="solid"] .nav-link.is-active { color: #F5B301; }
#site-nav[data-mode="solid"] .nav-lang { color: rgba(226, 232, 240, 0.85); }
#site-nav[data-mode="solid"] .nav-lang:hover { color: #F5B301; background: rgba(255, 255, 255, 0.08); }
#site-nav[data-mode="solid"] .nav-mobile-toggle { color: #FFFFFF; }

p {
    font-size: 0.9375rem;
    line-height: 1.65;
}

.reveal-mask {
    overflow: hidden;
}

.reveal-line {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}

/* When a reveal-line is ALSO a flex row (buttons, meta strips, breadcrumbs),
 * keep flex so its gap/justify work — the base inline-block above would
 * otherwise win the cascade over Tailwind's .flex and collapse the gaps. */
.reveal-line.flex { display: flex; }
.reveal-line.inline-flex { display: inline-flex; }



    to { transform: translateX(-100%); }
}

.img-zoom > img {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.img-zoom:hover > img {
    transform: scale(1.03);
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Article body — paragraphs in news detail page. Generous line-height and
 * room between paragraphs, so long reads stay comfortable. */
.prose-article p {
    font-size: 1rem;
    line-height: 1.75;
    color: #334155;
    margin-bottom: 1.25rem;
}
.prose-article p:last-child { margin-bottom: 0; }
.prose-article p:first-of-type {
    font-size: 1.0625rem;
    color: #1E293B;
}

#whatsapp-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 60;
}

#whatsapp-fab a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .25);
    transition: transform .25s ease, box-shadow .25s ease;
}

#whatsapp-fab a:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .35);
}

#cookie-banner {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 6rem;
    max-width: 32rem;
    z-index: 55;
    transform: translateY(120%);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

#cookie-banner.is-visible {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 5px;
    border: 2px solid #F8FAFC;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

::selection {
    background: #F5B301;
    color: #0B1F3A;
}

/* Unified card hover feel: non-linear easing for shadow + a 1px lift.
   Applies to every card already carrying Tailwind's transition-shadow. */
.transition-shadow {
    transition: box-shadow .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1) !important;
}
.transition-shadow:hover {
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .transition-shadow:hover { transform: none; }
}

/* ───────────────── Design system layer (2026-06-12) ─────────────────
   Editorial-estate language: display serif headings, drafting-paper grid
   texture, square eyebrow anchors with auto section indexes, brand stripe. */

/* Drafting-paper grid texture. Light tinted sections and dark imageless
   sections both carry a faint survey grid — real-estate drawing-board cue. */
#root section.bg-slate-50 {
    background-image:
        linear-gradient(rgba(2, 6, 23, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 6, 23, 0.04) 1px, transparent 1px);
    background-size: 112px 112px;
}
#root section.bg-slate-900,
footer.bg-slate-950 {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 112px 112px;
}

/* Brand stripe along the very top of the viewport. */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C2870A, #F5B301 35%, #FBC22E 50%, #F5B301 65%, #C2870A);
    z-index: 60;
    pointer-events: none;
}

/* Eyebrow: square amber anchor + auto-numbered section index. */
.roofy-eyebrow { display: inline-flex; align-items: center; gap: .65em; }
.roofy-eyebrow::before {
    content: '';
    width: .5em; height: .5em;
    background: currentColor;
    flex: none;
}
#root main > section { counter-increment: roofysec; }
#root main > section .roofy-eyebrow::after {
    content: "/ " counter(roofysec, decimal-leading-zero);
    margin-left: .35em;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(148, 163, 184, .65);
}

::selection { background: rgba(245, 179, 1, .28); color: inherit; }

/* LED product cards: collapsible "full specs" disclosure */
details.led-specs > summary { list-style: none; }
details.led-specs > summary::-webkit-details-marker { display: none; }
details.led-specs[open] .led-chev { transform: rotate(180deg); }