/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1. ROOT VARIABLES
2. BASE STYLES
   - Body & Typography
   - Links
   - Utility Classes
3. NEOMORPHISM CORE STYLES
   - Convex (Extruded)
   - Concave (Inset)
   - Buttons
   - Inputs
   - Switch
4. LAYOUT
   - Main Container
5. HEADER & NAVIGATION
   - Fixed Header
   - Logo & Navigation Links
   - Mobile Menu
6. HERO SECTION
7. CARD STYLES (Generic for Services, Events, Testimonials, Links)
   - Card Base
   - Card Image
   - Card Content
8. SPECIFIC SECTION STYLING
   - About Us
   - Services (Accordion)
   - Testimonials (Carousel & Toggle)
   - Events Calendar
   - Events (Detailed Articles)
   - Sustainability
   - Useful Links
   - Contact Form
9. FOOTER
10. ANIMATIONS & TRANSITIONS
    - Scroll Animations (FadeIn, ZoomIn, SlideIn)
    - Hover Effects
11. UI COMPONENTS
    - Accordion
    - Carousel Controls
    - Modal (Placeholder for potential future use)
12. SPECIFIC PAGE STYLES
    - success.html
    - privacy.html & terms.html
13. RESPONSIVE ADJUSTMENTS (Mainly handled by Tailwind, but some tweaks might be needed)

-------------------------------------------------------------------*/

/* 1. ROOT VARIABLES */
:root {
    --color-background: #e0e5ec; /* Light monochrome base */
    --color-surface: #e0e5ec;
    --color-shadow-light: #ffffff;
    --color-shadow-dark: #bec3c9;
    --color-text-primary: #333333; /* Dark gray for body */
    --color-text-secondary: #555555;
    --color-text-headings: #222222; /* Darker for titles */
    --color-accent: #3b82f6; /* Blue for interactive elements */
    --color-accent-dark: #2563eb;
    --color-white: #ffffff;
    --color-black: #000000;

    --font-primary: 'IBM Plex Sans', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    --shadow-convex: 8px 8px 16px var(--color-shadow-dark), -8px -8px 16px var(--color-shadow-light);
    --shadow-concave: inset 8px 8px 16px var(--color-shadow-dark), inset -8px -8px 16px var(--color-shadow-light);
    --shadow-button: 5px 5px 10px var(--color-shadow-dark), -5px -5px 10px var(--color-shadow-light);
    --shadow-button-hover: inset 3px 3px 7px var(--color-shadow-dark), inset -3px -3px 7px var(--color-shadow-light);
    --shadow-input: inset 4px 4px 8px var(--color-shadow-dark), inset -4px -4px 8px var(--color-shadow-light);

    --border-radius-soft: 20px;
    --border-radius-medium: 12px;
    --border-radius-small: 8px;

    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* 2. BASE STYLES */
body {
    background-color: var(--color-background);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    line-height: 1.7; /* Improved readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-text-headings);
    line-height: 1.3;
    margin-bottom: 0.75em; /* Tailwind uses ems for margins on headings */
}

.font-heading { /* Tailwind class, ensure font */
    font-family: var(--font-secondary) !important;
}

p {
    margin-bottom: 1rem; /* Tailwind default */
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

a:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

/* Utility Classes */
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.hover-lift {
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 12px 12px 24px var(--color-shadow-dark), -12px -12px 24px var(--color-shadow-light);
}

.truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. NEOMORPHISM CORE STYLES */
.neo-выпуклый {
    background: var(--color-surface);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-convex);
    padding: 1.5rem; /* Default padding, can be overridden by Tailwind */
}

.neo-вогнутый {
    background: var(--color-surface);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-concave);
    padding: 1.5rem;
}

.neo-выпуклый_inner { /* variation of convex often used for containers */
    background: var(--color-surface);
    border-radius: var(--border-radius-soft);
    box-shadow: 6px 6px 12px var(--color-shadow-dark), -6px -6px 12px var(--color-shadow-light);
}


/* Global Button Styles */
.neo-button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    background: var(--color-surface);
    border-radius: var(--border-radius-medium);
    padding: 0.75rem 1.5rem; /* 12px 24px */
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-accent);
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: all var(--transition-speed) var(--transition-timing);
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.neo-button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    box-shadow: var(--shadow-button-hover);
    color: var(--color-accent-dark);
    /* transform: translateY(-2px); /* Subtle lift */
}
.neo-button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    box-shadow: var(--shadow-concave); /* Pressed effect */
    transform: translateY(1px);
}

/* Specific button variants can be added if needed, e.g., primary button */
.neo-button.bg-blue-600 { /* Tailwind class override for primary action */
    color: var(--color-white) !important;
}
.neo-button.bg-blue-600:hover {
    color: var(--color-white) !important; /* Ensure text color remains white on hover */
}


.neo-input, textarea.neo-input {
    background: var(--color-surface);
    border-radius: var(--border-radius-small);
    padding: 0.75rem 1rem; /* 12px 16px */
    box-shadow: var(--shadow-input);
    border: 1px solid transparent; /* Prevents layout shift on focus */
    width: 100%;
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    transition: box-shadow var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing);
}

.neo-input:focus, textarea.neo-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: inset 2px 2px 4px var(--color-shadow-dark), 
                inset -2px -2px 4px var(--color-shadow-light),
                0 0 0 2px var(--color-accent); /* Focus ring */
}
.neo-input::placeholder, textarea.neo-input::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

/* Neomorphic Switch */
.neo-switch-label {
    width: 44px; /* w-11 */
    height: 24px; /* h-6 */
    position: relative;
    display: inline-block;
}
.neo-switch { /* sr-only input */ }

.neo-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-surface);
    border-radius: 34px; /* rounded-full */
    box-shadow: var(--shadow-concave);
    transition: var(--transition-speed) var(--transition-timing);
}

.neo-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px; /* h-4.5 */
    width: 18px; /* w-4.5 */
    left: 3px;
    bottom: 3px;
    background-color: var(--color-white);
    border-radius: 50%;
    box-shadow: 2px 2px 4px var(--color-shadow-dark), -1px -1px 2px var(--color-shadow-light);
    transition: var(--transition-speed) var(--transition-timing);
}

.neo-switch:checked + .neo-switch-label .neo-switch-slider {
    background-color: var(--color-accent);
    box-shadow: inset 3px 3px 5px color-mix(in srgb, var(--color-accent) 80%, black), 
                inset -3px -3px 5px color-mix(in srgb, var(--color-accent) 80%, white);
}

.neo-switch:checked + .neo-switch-label .neo-switch-slider::before {
    transform: translateX(20px); /* (44 - 6 - 18) */
    background-color: var(--color-white);
    box-shadow: 1px 1px 2px var(--color-shadow-dark), -2px -2px 4px var(--color-shadow-light);
}


/* 4. LAYOUT */
.main-container {
    max-width: 100%; /* Full width allowing content containers inside */
}

/* Tailwind's 'container' class handles max-width and centering for content */
.container {
    /* Tailwind handles this:
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; (sm:px-6 lg:px-8)
    padding-right: 1rem;
    */
}

.section-title {
    font-family: var(--font-secondary);
    font-weight: 900;
    font-size: 2.25rem; /* approx text-4xl */
    line-height: 2.5rem;
    color: var(--color-text-headings);
    text-align: center;
    margin-bottom: 2.5rem; /* Increased margin */
}
@media (min-width: 768px) {
    .section-title {
        font-size: 2.75rem; /* approx text-5xl */
        line-height: 1;
    }
}


/* 5. HEADER & NAVIGATION */
header {
    /* sticky top-0 z-50 neo-выпуклый shadow-lg defined by Tailwind and inline */
    transition: background-color var(--transition-speed) var(--transition-timing);
}

header.scrolled { /* Example for JS to add class on scroll */
    background-color: color-mix(in srgb, var(--color-surface) 95%, var(--color-shadow-dark)); /* Slightly darker */
}

header .neo-button { /* Nav buttons */
    padding: 0.6rem 1rem;
    font-size: 0.875rem; /* text-sm */
    color: var(--color-text-primary);
}
header .neo-button:hover {
    color: var(--color-accent);
}

header .group:hover .group-hover\:opacity-100 { /* Dropdown visibility */
    opacity: 1;
    visibility: visible;
}
header .group .opacity-0 {
    visibility: hidden;
}

#mobile-menu {
    /* hidden by default, JS toggles */
    border-top: 1px solid var(--color-shadow-dark);
}
#mobile-menu .neo-button {
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}
#mobile-menu .neo-button:hover {
    color: var(--color-accent);
}

/* 6. HERO SECTION */
#hero {
    /* parallax-bg and background-image defined inline */
    position: relative;
    color: var(--color-white); /* Ensured by HTML, just for reference */
}

#hero::before { /* Overlay for text readability - already in HTML inline */
    /* content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1; */
}

#hero > div { /* The container with text */
    position: relative;
    z-index: 2;
}

#hero h1 {
    color: var(--color-white);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Enhance readability */
}
#hero p {
    color: var(--color-white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Parallax Effect (basic) */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* 7. CARD STYLES (Generic for Services, Events, Testimonials, Links) */
.card { /* Base card class usually combined with .neo-выпуклый */
    display: flex;
    flex-direction: column;
    /* align-items: center; /* This can make text left-align look off if not full width */
    height: 100%; /* For equal height in grids */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card .card-image { /* Container for image */
    width: 100%;
    /* height: 200px; /* Example fixed height, adjust as needed or use aspect ratio */
    /* For images within .card-image directly */
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; /* Top corners rounded */
    overflow: hidden;
    margin-bottom: 1rem; /* Space between image and content */
    display: flex; /* For centering the image if it's smaller than container */
    align-items: center;
    justify-content: center;
}
.card .card-image img {
    width: 100%;
    height: 100%; /* Make image fill the container */
    object-fit: cover; /* Cover the area, cropping if necessary */
    display: block;
}

.card .card-content {
    padding: 0 0.5rem 0.5rem; /* Adjust padding if card itself has padding */
    flex-grow: 1; /* Allows content to fill space for equal height cards */
    display: flex;
    flex-direction: column;
}
.card .card-content h3 {
    font-size: 1.25rem; /* text-xl */
    color: var(--color-text-headings);
    margin-bottom: 0.5rem;
}
.card .card-content p {
    font-size: 0.875rem; /* text-sm */
    color: var(--color-text-secondary);
    flex-grow: 1; /* Pushes action buttons to bottom if any */
}
.card .card-content a.text-blue-500 { /* Read more style */
    color: var(--color-accent);
    font-weight: 600;
    margin-top: auto; /* Pushes to bottom */
    padding-top: 0.5rem;
}
.card .card-content a.text-blue-500:hover {
    color: var(--color-accent-dark);
}

/* Asymmetrical image-text layout within cards if needed */
.card.card-horizontal {
    flex-direction: row;
}
.card.card-horizontal .card-image {
    width: 40%; /* Example */
    height: auto;
    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
}
.card.card-horizontal .card-content {
    width: 60%;
    padding-left: 1.5rem;
}


/* 8. SPECIFIC SECTION STYLING */

/* About Us */
#about img {
    /* Handled by Tailwind and inline styles for radius/shadow */
}

/* Services */
/* Accordion handled by UI Components section */
#services .card .card-image {
    height: 180px; /* Specific height for service card images */
}

/* Testimonials */
#testimonials {
    /* parallax-bg, text-white, text-shadow handled by inline and utility */
}
#testimonials .card { /* Testimonial item */
    background: var(--color-surface); /* Override parallax background for card */
    margin: 1rem; /* Space for carousel items */
}
#testimonials .card p {
    color: var(--color-text-primary);
}
#testimonials .card p.font-semibold {
    color: var(--color-text-headings);
}

.testimonial-carousel .carousel-prev,
.testimonial-carousel .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    padding: 0.5rem 0.8rem; /* Smaller buttons */
}
.testimonial-carousel .carousel-prev { left: -10px; }
.testimonial-carousel .carousel-next { right: -10px; }
@media (max-width: 640px) {
    .testimonial-carousel .carousel-prev { left: 0px; }
    .testimonial-carousel .carousel-next { right: 0px; }
}


/* Events Calendar */
#events-calendar .neo-выпуклый h3 { /* Card titles */
    color: var(--color-accent);
}

/* Events (Detailed Articles) */
#events article.md\:flex { /* Ensure proper alignment */
    /* Using neo-выпуклый_inner for slightly less prominent shadow */
}
#events article .image-container img {
    /* Styling for images within event articles */
}
#events article .neo-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
}

/* Sustainability */
#sustainability img {
    /* Styling for sustainability section image */
}

/* Useful Links */
#useful-links .card {
    min-height: 150px; /* Ensure cards have some base height */
}
#useful-links .card h3 a {
    color: var(--color-accent); /* Make sure link in title is styled */
}
#useful-links .card h3 a:hover {
    text-decoration: underline;
}

/* Contact Form */
#contact .neo-выпуклый { /* Form container */
    /* padding already applied by neo-выпуклый */
}
#contact form label {
    font-weight: 500;
    color: var(--color-text-primary);
}
#contact form .neo-button[type="submit"] {
    padding: 0.85rem 1.5rem; /* Larger submit button */
    font-size: 1.125rem;
    width: 100%;
    color: var(--color-white); /* Assuming it has bg-blue-600 */
}
#contact form .neo-button[type="submit"]:hover {
    color: var(--color-white);
}

/* 9. FOOTER */
footer {
    /* bg-slate-800 text-slate-300 py-12 by Tailwind */
}
footer h3 {
    color: var(--color-white);
}
footer p, footer ul li a {
    color: #cbd5e1; /* Lighter slate for footer text */
    font-size: 0.875rem; /* text-sm */
}
footer ul li a:hover {
    color: var(--color-accent); /* Blue accent on hover */
    text-decoration: none;
}
footer .border-t {
    border-color: #475569; /* slate-700 */
}
footer .text-sm p { /* Copyright text */
    color: #94a3b8; /* slate-400 */
}

/* 10. ANIMATIONS & TRANSITIONS */

/* Base for scroll animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none !important; /* Override initial transform */
}

/* Specific animations (JS adds 'is-visible' to trigger) */
.animate-on-scroll[data-animation="fadeInUp"] { transform: translateY(30px); }
.animate-on-scroll[data-animation="fadeInDown"] { transform: translateY(-30px); }
.animate-on-scroll[data-animation="fadeInLeft"] { transform: translateX(-30px); }
.animate-on-scroll[data-animation="fadeInRight"] { transform: translateX(30px); }
.animate-on-scroll[data-animation="zoomIn"] { transform: scale(0.9); }
.animate-on-scroll[data-animation="slideInUp"] { transform: translateY(50px); } /* For larger elements like articles */


/* 11. UI COMPONENTS */

/* Accordion */
.accordion-item {
    margin-bottom: 0.5rem; /* Space between accordion items */
}
.accordion-item:last-child {
    margin-bottom: 0;
}
.accordion-header {
    /* neo-button styling applied by class */
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-primary); /* Override default neo-button blue */
}
.accordion-header:hover {
    color: var(--color-accent);
}
.accordion-header svg {
    transition: transform var(--transition-speed) var(--transition-timing);
}
.accordion-header.active svg {
    transform: rotate(180deg);
}

.accordion-content {
    /* max-h-0 and overflow-hidden by Tailwind */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    background-color: var(--color-surface); /* Ensure background */
    border-bottom-left-radius: var(--border-radius-medium);
    border-bottom-right-radius: var(--border-radius-medium);
    /* box-shadow: var(--shadow-concave); /* Subtle inset for content area */
    /* padding: 0 1rem; */ /* Padding is applied to inner div by Tailwind */
}
.accordion-content.open {
    /* max-height set by JS (e.g., scrollHeight) */
    /* padding: 1rem; */
}


/* Carousel Controls (basic styling, assumes JS handles functionality) */
.carousel-item {
    /* Display handled by JS or carousel library */
    /* Example: opacity: 0; transition: opacity 0.5s; */
}
.carousel-item.active {
    /* Example: opacity: 1; */
}


/* 12. SPECIFIC PAGE STYLES */

/* success.html */
.success-page-container { /* Add this class to the body or a main wrapper on success.html */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}
.success-page-container .neo-выпуклый { /* The content box */
    max-width: 500px;
    width: 100%;
}
.success-page-container h1 {
    color: var(--color-accent);
    font-size: 2.5rem;
}

/* privacy.html & terms.html */
.privacy-page-container,
.terms-page-container { /* Add to body or main wrapper on these pages */
    padding-top: 120px; /* Space for fixed header (header h-20 ~80px + extra) */
    padding-bottom: 4rem;
}
.privacy-page-container .container, /* Assuming content is wrapped in a .container */
.terms-page-container .container {
    background-color: var(--color-white); /* Optional: give content a distinct background */
    padding: 2rem;
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-convex);
}
.privacy-page-container h1, .terms-page-container h1 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
}
.privacy-page-container h2, .terms-page-container h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--color-accent);
}


/* 13. RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.875rem; /* text-3xl */
        margin-bottom: 2rem;
    }

    .neo-выпуклый, .neo-вогнутый {
        padding: 1rem;
        /* Shadows might need to be less pronounced on mobile */
        /* box-shadow: 6px 6px 12px var(--color-shadow-dark), -6px -6px 12px var(--color-shadow-light); */
    }

    #hero h1 {
        font-size: 2.5rem; /* text-4xl or 5xl */
    }
    #hero p {
        font-size: 1.125rem; /* text-lg */
    }

    /* Adjust card image heights if needed */
    .card .card-image {
        /* height: 160px; */
    }

    #contact .neo-выпуклый {
        padding: 1.5rem;
    }
    
    .privacy-page-container,
    .terms-page-container {
        padding-top: 100px; /* Adjust if header height changes */
    }
}

@media (max-width: 640px) {
    /* Further adjustments for very small screens */
    .testimonial-carousel .carousel-prev,
    .testimonial-carousel .carousel-next {
        /* Consider hiding them or making them smaller */
    }
}

/* Cookie Consent Popup - styles are mostly inline in HTML as requested */
#cookie-consent-popup {
    /* Ensure it's above other elements */
    z-index: 9999 !important; 
}
#cookie-consent-popup a {
    color: var(--color-accent) !important; /* Make link prominent */
}
#cookie-consent-popup button {
    /* Global button styles should apply, but can be overridden here if needed */
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}
#cookie-consent-popup button:hover {
    background-color: var(--color-accent-dark) !important;
}
*{
    opacity: 1 !important;
}
html,body{
    overflow-x: hidden;
}