/* ============================================
   SOLUTIA GROUP - STYLE v1.0
   ============================================ */

/* ============================================
   THEME VARIABLES
   ============================================ */

:root {
    /* Brand Colors */
    --brand-primary: #e9302a;
    --brand-secondary: #c41e19;
    
    /* Spacing & Layout */
    --section-padding: 4rem;
    --container-width: 1200px;
    
    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    
    /* Transitions */
    --transition: 0.3s ease;
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    
    --header-bg: #ffffff;
    --header-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    --card-bg: rgba(255, 255, 255, 0.9);
    --hero-bg: rgba(255, 255, 255, 0.75);
    --hero-overlay-bg: rgba(255, 255, 255, 0.96);
    --hero-card-bg: #f3f4f6;
    --hero-card-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    --card-border: rgba(0, 0, 0, 0.05);
    --card-shadow: 0 4px 20px rgba(0,0,0,0.08);
    
    --logo-filter: none;
    
    --map-filter: none;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.8);
    
    --header-bg: #000000;
    --header-shadow: 0 2px 10px rgba(255,255,255,0.05);
    
    --card-bg: rgba(0, 0, 0, 0.85);
    --hero-overlay-bg: rgba(10, 10, 10, 0.95);
    --hero-card-bg: #252525;
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 4px 20px rgba(0,0,0,0.5);
    
    --logo-filter: brightness(0) invert(1);
    
    --map-filter: grayscale(80%) invert(92%) contrast(90%);
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-primary);
    transition: background-color var(--transition), color var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--brand-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--brand-secondary);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--bg-secondary);
}

.btn-solutia {
    background-color: #a7cd30;
    color: #ffffff;
}
.btn-solutia:hover {
    background-color: #92b426;
    color: #ffffff;
}

.btn-services {
    background-color: #4275ba;
    color: #ffffff;
}
.btn-services:hover {
    background-color: #315a96;
    color: #ffffff;
}

[data-theme="dark"] .btn-outline {
    border-color: rgba(255,255,255,0.3);
    color: #ffffff;
}

[data-theme="dark"] .btn-outline:hover {
    background: rgba(255,255,255,0.1);
    border-color: #ffffff;
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    transition: background-color var(--transition), padding var(--transition);
    padding: 15px 0;
}

.header.scrolled {
    padding: 10px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto;
    /* Logo filter handled in dark mode specific if needed, but user said header bg changes */
}

/* Dark mode logo handling - only apply filter if it's the partner logos, not the main one? 
   User said "Logo není s průhledností", so main logo might not need filter if it has its own bg? 
   Wait, "Logo není s průhledností, takže hlavičku udělej v barvě pozadí loga" 
   This means the header BG matches the logo BG.
   If the logo is an image block with white bg, header is white.
   If dark mode, header is black. But does the logo change?
   User provided "solutia_group_logo.webp" and "solutia_group_logo_dark.webp" in the LS output?
   Let's check LS again. Yes.
   So I should switch the logo source based on theme or use CSS to show/hide.
*/

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
}

[data-theme="light"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: none; }

.lang-switch {
    display: flex;
    gap: 10px;
}

.lang-switch img {
    width: 24px;
    height: auto;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.lang-switch a.active img, .lang-switch a:hover img {
    opacity: 1;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px; /* Header height */
    background-image: url('../img/solutia_group_bg.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero .container {
    width: 100%;
}

.hero-overlay {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
}

.hero-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Hero Group Styles */
.hero-group h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.hero-group .group-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 0;
}

.hero-group .group-card {
    background: var(--hero-card-bg);
    padding: 25px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 
        "logo button"
        "text text";
    gap: 15px 0;
    align-items: center;
}

.hero-group .group-logo {
    grid-area: logo;
    height: 40px;
    margin-bottom: 0;
}

.hero-group .btn {
    grid-area: button;
}

.hero-group .group-desc {
    grid-area: text;
    font-size: 0.9rem;
    margin-bottom: 0;
    margin-top: 5px;
}

.hero-overlay h1 {
    color: var(--brand-primary);
}

.contact-details dt {
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 10px;
}

.contact-details dd {
    margin-bottom: 5px;
}

.contact-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 15px;
    margin-top: 20px;
}

.contact-grid span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   GROUP SECTION
   ============================================ */
.section-group {
    padding: var(--section-padding) 0;
    background: var(--bg-secondary);
}

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.group-card {
    background: var(--bg-primary);
    padding: 30px;
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.group-card:hover {
    transform: translateY(-5px);
}

.group-logo {
    height: 60px;
    width: auto;
    margin-bottom: 20px;
    transition: filter var(--transition);
}

/* Apply filter only to these logos as requested */
[data-theme="dark"] .group-logo {
    filter: var(--logo-filter);
}

.group-desc {
    flex-grow: 1;
    margin-bottom: 20px;
}

/* ============================================
   CONTACT & MAP SECTION
   ============================================ */
.section-contact {
    padding: var(--section-padding) 0;
    background: var(--bg-primary);
}

.directions {
    margin-bottom: 40px;
}

.directions h3 {
    margin-top: 20px;
    font-size: 1.1rem;
}

.transport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.transport-card {
    background: var(--bg-secondary);
    padding: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
}

.transport-card h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-primary);
}

.map-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.map-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: var(--bg-secondary);
    z-index: 2;
}

.map-placeholder p {
    margin-bottom: 20px;
}

.google-map {
    width: 100%;
    height: 100%;
    border: 0;
    filter: var(--map-filter);
}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-primary);
    border-top: 1px solid var(--card-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 9999;
}

.cookie-content {
    max-width: var(--container-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--bg-secondary);
    padding: 40px 0;
    border-top: 1px solid var(--card-border);
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.footer-center {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.footer-right {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer-links a {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .hero-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-container {
        padding: 0 15px;
    }
    
    .hero {
        padding-top: 100px;
        padding-bottom: 40px;
        min-height: auto;
    }
    
    .hero-overlay {
        margin: 0;
    }

    .hero-group .group-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "text"
            "button";
        gap: 12px 0;
        align-items: start;
    }

    .hero-group .group-logo {
        justify-self: start;
    }

    .hero-group .btn {
        justify-self: start;
    }
    
    .footer-content {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .footer-center, .footer-right {
        flex-direction: column;
        gap: 15px;
    }
    
    .footer-links a {
        margin: 0 10px;
        justify-content: center;
    }
}