/* ============================================
   RFP-SOL Website Styles
   FlowMind-inspired Color System
   ============================================ */

:root {
    --color-primary: #00F5D4;
    --color-secondary: #000000;
    --color-accent: #00F5D4;
    --color-background: #000000;
    --color-surface: #0C1B26;
    --color-surface-soft: rgba(12, 27, 38, 0.92);
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #A1A1AA;
    --color-border: #1E2A35;
    --shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

/* ---- Base & Reset ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(0, 245, 212, 0.12), transparent 24%),
                linear-gradient(180deg, var(--color-background) 0%, #070f16 45%, var(--color-surface) 100%);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

::selection {
    background: var(--color-primary);
    color: var(--color-secondary);
}

body, button, input, select, textarea {
    color: var(--color-text-primary);
}

button, input, select, textarea {
    font: inherit;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.nav-active {
    color: var(--color-text-primary) !important;
}

nav {
    background: rgba(0, 0, 0, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
}

#mobile-menu {
    display: none;
}

#mobile-menu:not(.hidden) {
    display: block;
}

input, select, textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-primary);
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease, color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-bottom-color: var(--color-primary);
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-secondary);
}

select option {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.peer:checked + div {
    background-color: var(--color-text-primary);
    color: var(--color-secondary);
}

.group:hover .group-hover-scale {
    transform: scale(1.05);
}

.group:hover .group-hover-grayscale-0 {
    filter: grayscale(0);
}

.group:hover .group-hover-opacity-100 {
    opacity: 1;
}

.group:hover .group-hover-translate-y-0 {
    transform: translateY(0);
}

.page-header {
    padding-top: 8rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .page-header {
        padding-bottom: 6rem;
    }
}

nav.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

pre::-webkit-scrollbar {
    height: 6px;
}

pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
}

footer,
section,
article,
aside,
header,
nav {
    border-color: rgba(255, 255, 255, 0.08);
}

nav {
    background: rgba(0, 0, 0, 0.78);
    border-color: rgba(255, 255, 255, 0.08);
    z-index: 60;
}

img.site-logo {
    height: 3rem;
    width: auto;
}

@media (min-width: 1024px) {
    img.site-logo {
        height: 4.5rem;
    }
}

/* Ensure mobile toggle button is visible and clickable */
button[data-mobile-toggle] {
    position: relative;
    z-index: 70;
    padding: 0.5rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button[data-mobile-toggle] .iconify {
    display: inline-block;
}

/* Hide the mobile menu toggle on desktop (>= lg / 1024px).
   Overrides the forced display above so only the full nav shows on desktop. */
@media (min-width: 1024px) {
    button[data-mobile-toggle] {
        display: none !important;
    }
}

section,
article,
aside,
header,
footer {
    background: rgba(12, 27, 38, 0.88);
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

.bg-background {
    background-color: var(--color-background) !important;
}

.text-primary {
    color: var(--color-text-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

.border-surface {
    border-color: var(--color-border) !important;
}

@media print {
    .grain-overlay,
    nav,
    footer {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* ============================================
   ICMAC-inspired theme
   Default (no class) = DAY (warm cream "paper").  html.dark = night.
   Palette: paper #fbfaf4 · ink #0a0a0a · teal #214f57 · copper #b85f3f · sun #ffd84a
   Fonts: Bebas Neue (display) · Inter (body)
   ============================================ */
:root {
    --icmac-paper: #fbfaf4;
    --icmac-chalk: #f2eee2;
    --icmac-sand: #e6dac7;
    --icmac-ink: #0a0a0a;
    --icmac-muted: #5b616b;
    --icmac-teal: #214f57;
    --icmac-copper: #b85f3f;
    --icmac-sun: #ffd84a;
    --icmac-line: rgba(10, 10, 10, 0.10);
    --icmac-dark: #0b0f12;
}

/* Display typography (Bebas Neue) for big titles */
.font-display { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing: 0.02em; }
.font-condensed { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; }
.page-header h1 { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; letter-spacing: 0.015em; line-height: 0.95; }

/* Toggle icons: show the icon for the mode you'd switch TO.
   Default = day, so show the MOON (switch to night). html.dark shows the SUN. */
.theme-icon-dark { display: inline-block; } /* moon — shown in day (default) */
.theme-icon-light { display: none; }        /* sun — shown in night */
html.dark .theme-icon-dark { display: none; }
html.dark .theme-icon-light { display: inline-block; }

/* ---- DAY theme (default) — applies whenever html is NOT .dark ---- */
html:not(.dark) body {
    background: var(--icmac-paper) !important;
    color: var(--icmac-ink) !important;
}
html:not(.dark) .grain-overlay { opacity: 0.015; }
html:not(.dark) .mix-blend-overlay { mix-blend-mode: normal !important; }

/* Light content surfaces */
html:not(.dark) section,
html:not(.dark) article,
html:not(.dark) aside { background: var(--icmac-paper) !important; }
html:not(.dark) .bg-\[\#050505\] { background-color: var(--icmac-paper) !important; }
html:not(.dark) .bg-\[\#080808\] { background-color: var(--icmac-chalk) !important; }
html:not(.dark) .bg-black { background-color: var(--icmac-sand) !important; }
html:not(.dark) .bg-white\/5:hover,
html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(33, 79, 87, 0.06) !important; }

/* Light text (default, on paper) */
html:not(.dark) .text-white { color: var(--icmac-ink) !important; }
html:not(.dark) .text-neutral-300 { color: #2a2f36 !important; }
html:not(.dark) .text-neutral-400 { color: #51585f !important; }
html:not(.dark) .text-neutral-500 { color: var(--icmac-muted) !important; }
html:not(.dark) .text-neutral-600 { color: #8b9097 !important; }

/* ICMAC accent: emerald → teal/copper on the light theme */
html:not(.dark) .text-emerald-400,
html:not(.dark) .text-emerald-500 { color: var(--icmac-teal) !important; }
html:not(.dark) .bg-emerald-500 { background-color: var(--icmac-teal) !important; }
html:not(.dark) .border-emerald-400\/30 { border-color: rgba(33, 79, 87, 0.35) !important; }

/* Borders */
html:not(.dark) .border-white\/5 { border-color: var(--icmac-line) !important; }
html:not(.dark) .border-white\/10 { border-color: rgba(10, 10, 10, 0.16) !important; }

/* Inputs */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea { color: var(--icmac-ink); border-bottom-color: rgba(10, 10, 10, 0.22); }
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus { border-bottom-color: var(--icmac-teal); }
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder { color: #9a9389; }

/* Filled / inverting buttons → teal brand fill on the light theme */
html:not(.dark) .hover\:bg-white:hover { background-color: var(--icmac-teal) !important; }
html:not(.dark) .hover\:text-black:hover { color: #ffffff !important; }
html:not(.dark) ::selection { background: var(--icmac-teal); color: #fff; }

/* Keep the top NAV a dark bar in day mode (logo legibility) */
html:not(.dark) nav {
    background: rgba(11, 15, 18, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html:not(.dark) nav .text-white { color: #ffffff !important; }
html:not(.dark) nav .text-neutral-400 { color: #b9bfc5 !important; }
html:not(.dark) nav .border-white\/10 { border-color: rgba(255, 255, 255, 0.22) !important; }
html:not(.dark) nav .hover\:bg-white:hover { background-color: #ffffff !important; }
html:not(.dark) nav .hover\:text-black:hover { color: #000000 !important; }

/* Keep the FOOTER dark (ICMAC-style) with light text in day mode */
html:not(.dark) footer { background: var(--icmac-dark) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html:not(.dark) footer .text-white,
html:not(.dark) footer .text-neutral-300 { color: #e8e9ea !important; }
html:not(.dark) footer .text-neutral-400 { color: #aab0b6 !important; }
html:not(.dark) footer .text-neutral-500,
html:not(.dark) footer .text-neutral-600 { color: #7b8087 !important; }
html:not(.dark) footer .border-white\/5 { border-color: rgba(255, 255, 255, 0.08) !important; }
html:not(.dark) footer input { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.25); }

/* Keep text legible over dark image overlays (hero slider, page hero, solution cards) */
html:not(.dark) #hero-slider .text-white,
html:not(.dark) .has-hero-image .text-white,
html:not(.dark) .bg-gradient-to-t.from-black\/90 .text-white { color: #ffffff !important; }
html:not(.dark) #hero-slider .text-neutral-300,
html:not(.dark) #hero-slider .text-neutral-400,
html:not(.dark) #hero-slider .text-neutral-500,
html:not(.dark) .has-hero-image .text-neutral-400,
html:not(.dark) .bg-gradient-to-t.from-black\/90 .text-neutral-400,
html:not(.dark) .bg-gradient-to-t.from-black\/90 .text-neutral-500 { color: #d7dadd !important; }
html:not(.dark) #hero-slider .border-white\/20 { border-color: rgba(255, 255, 255, 0.4) !important; }
html:not(.dark) #hero-slider .text-emerald-500 { color: #34d399 !important; }