/* Global Design System */
/* Note: fonts are loaded per-page via <link> tags — each page only pulls
   the families it actually uses. Keeps the portal fast and avoids the
   6-family global payload on single-brand subpages. */

:root {
    /* Base Fonts */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;

    /* Business 1: Nomad Roasters (Coffee) - Heritage & Organic */
    --nomad-font-heading: 'Cormorant Garamond', serif;
    --nomad-font-body: 'Inter', sans-serif;
    --nomad-primary: #4A3728;
    --nomad-secondary: #C0A080;
    --nomad-bg: #F5F1ED;
    --nomad-text: #2D241E;

    /* Business 2: L'Artisan Culinary (Restaurant) - Classical & Elegant */
    --artisan-font-heading: 'Bodoni Moda', serif;
    --artisan-font-accent: 'Outfit', sans-serif;
    --artisan-font-body: 'Inter', sans-serif;
    --artisan-primary: #D4AF37;
    --artisan-bg: #0D0D0D;
    --artisan-card: #1A1A1A;
    --artisan-text: #F2F2F2;

    /* Business 3: Brainstormen Agency (Strategy) - Bold & Technical */
    --agency-font-heading: 'Syncopate', sans-serif;
    --agency-font-body: 'Space Grotesk', sans-serif;
    --agency-primary: #FF0000;
    --agency-bg: #000000;
    --agency-accent: #FFFFFF;
    --agency-text: #E0E0E0;

    /* Business 5: Lexis & Seal (Notary) - Professional & Trustworthy */
    --notary-font-heading: 'Prata', serif;
    --notary-font-body: 'Inter', sans-serif;
    --notary-primary: #0A192F;
    --notary-secondary: #C5A059;
    --notary-bg: #F9F9F9;
    --notary-text: #1A1A1A;
    --notary-accent: #334E68;

    /* Business 6: Aegis (Cybersecurity) - Technical & Secure */
    --cyber-font-heading: 'Orbitron', sans-serif;
    --cyber-font-body: 'Space Grotesk', sans-serif;
    --cyber-primary: #00F0FF;
    --cyber-secondary: #00FF41;
    --cyber-bg: #050505;
    --cyber-text: #E0E0E0;
    --cyber-accent: #1A1A1A;

    /* Business 7: Prism Modern (Gallery) - Minimalist & Curated */
    --gallery-font-heading: 'Tenor Sans', sans-serif;
    --gallery-font-body: 'Inter', sans-serif;
    --gallery-primary: #050505;
    --gallery-secondary: #C8843A;
    --gallery-bg: #FDFCF8;
    --gallery-text: #1A1A1A;

    /* Business 8: Lumina Clear (Window Cleaning) - Fresh & Crystalline */
    --lumina-font-heading: 'Outfit', sans-serif;
    --lumina-font-body: 'Inter', sans-serif;
    --lumina-primary: #00A3FF;
    --lumina-secondary: #0F172A;
    --lumina-bg: #FFFFFF;
    --lumina-accent: #E0F2FE;
    --lumina-text: #0F172A;

    /* Business 9: Purist (Elite Cleaning) - Serene & Organic */
    --purist-font-heading: 'Cormorant Garamond', serif;
    --purist-font-body: 'Inter', sans-serif;
    --purist-primary: #7D8B7E;
    --purist-secondary: #4A4A4A;
    --purist-bg: #F5F1ED;
    --purist-accent: #E8E2DA;
    --purist-text: #2D2D2D;

    /* Business 10: Silk & Steam (Elite Cleaning) - Crisp & Professional */
    --silk-primary: #3182ce;
    --silk-bg: #f8fafc;
    --silk-text: #1a202c;

    /* Business 11: AURA (AI Voice & Digital Presence) - Ethereal & Futuristic */
    --aura-font-heading: 'Syncopate', sans-serif;
    --aura-font-body: 'Space Grotesk', sans-serif;
    --aura-primary: #00F0FF;
    --aura-secondary: #9D00FF;
    --aura-bg: #050505;
    --aura-text: #E0E0E0;

    /* Business 12: Gusto Napoletano (Pizzeria) - Traditional & Fiery */
    --pizza-font-heading: 'Playfair Display', serif;
    --pizza-font-body: 'Inter', sans-serif;
    --pizza-primary: #D32F2F;
    --pizza-secondary: #388E3C;
    --pizza-bg: #050505;
    --pizza-text: #F5F5F5;
    --pizza-accent: #FBC02D;

    --transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Common Components */
.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

section {
    padding: 8rem 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInUp 1s ease forwards;
}

/* Technical Integrity: Responsiveness & Performance */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 968px) {
    section {
        padding: 5rem 0;
    }

    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 768px) {

    /* Portal Grid Stacking — minmax so tiles stay tall enough to breathe */
    .portal-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(300px, 1fr));
        height: auto;
        min-height: 100vh;
    }

    .portal-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem;
    }

    .portal-item:last-child {
        border-bottom: none;
    }

    .portal-item h2 {
        font-size: 2rem;
    }

    /* Editorial & product grids collapse */
    .grid-2,
    .editorial-grid,
    .menu-grid,
    .product-grid,
    .mosaic-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    h1 {
        font-size: 3rem !important;
    }

    h2 {
        font-size: 2.25rem !important;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Accessibility & Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Contact Form Component */
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--brand-accent, rgba(255, 255, 255, 0.02));
    padding: 4rem;
    border-radius: 40px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-form {
    display: grid;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-group label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    opacity: 0.6;
}

.form-group input,
.form-group textarea {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
    transition: var(--transition);
}

/* Dark mode overrides for form */
[style*="--brand-bg: #050505"] .form-group input,
[style*="--brand-bg: #050505"] .form-group textarea,
[style*="--brand-bg: #0D0D0D"] .form-group input,
[style*="--brand-bg: #0D0D0D"] .form-group textarea,
body[style*="--bg: var(--cyber-bg)"] .form-group input,
body[style*="--bg: var(--cyber-bg)"] .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

[style*="--brand-bg: #050505"] .form-group input:focus,
[style*="--brand-bg: #050505"] .form-group textarea:focus,
body[style*="--bg: var(--cyber-bg)"] .form-group input:focus,
body[style*="--bg: var(--cyber-bg)"] .form-group textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.form-submit {
    margin-top: 2rem;
    width: 100%;
    cursor: pointer;
}

/* Language Switcher Universal Styles */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--font-mono, 'Inter', sans-serif);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    border: 1px solid rgba(128, 128, 128, 0.2);
    width: fit-content;
    z-index: 1000;
}

.lang-btn {
    cursor: pointer;
    opacity: 0.4;
    transition: var(--transition);
}

.lang-btn.active {
    opacity: 1;
    color: var(--brand-primary, inherit);
    font-weight: 700;
}

.lang-divider {
    width: 1px;
    height: 12px;
    background: rgba(128, 128, 128, 0.2);
}

/* Page-specific overrides for switcher */
[style*="--nomad-bg"] .lang-btn.active {
    color: var(--nomad-primary);
}

[style*="--artisan-bg"] .lang-btn.active {
    color: var(--artisan-primary);
}

[style*="--cyber-bg"] .lang-btn.active {
    color: var(--cyber-primary);
}

[style*="--lumina-bg"] .lang-btn.active {
    color: var(--lumina-primary);
}

[style*="--purist-bg"] .lang-btn.active {
    color: var(--purist-primary);
}

[style*="--notary-bg"] .lang-btn.active {
    color: var(--notary-primary);
}

[style*="--gallery-bg"] .lang-btn.active {
    color: var(--gallery-secondary);
}