/*
  PerlaČistoty - Online Obchod s Práčkami
  style.css
  Design: Neomorphism, Dynamic Color Transitions, Triadic Colors, 3D Effects
  Fonts: Poppins (Headings), Work Sans (Body)
  Framework: Tailwind CSS (Complementary Styles)
*/

/* -------------------------------------------------------------------------- */
/*                               CSS Variables                                */
/* -------------------------------------------------------------------------- */
:root {
    /* Color Palette (Triadic - based on HTML styles) */
    --clr-primary: #A0D2DB;      /* Light Sky Blue */
    --clr-accent1: #DBA0A0;      /* Soft Pink/Red */
    --clr-accent2: #DBD3A0;      /* Pale Yellow/Beige */

    /* Neomorphism Base & Text */
    --clr-bg: #f0f3f8;
    --clr-text-dark: #333333;
    --clr-text-very-dark: #222222; /* For strong headings */
    --clr-text-light: #FFFFFF;
    --clr-text-muted: #555e68; /* For less prominent text */

    /* Neomorphism Shadows */
    --shadow-light-strong: #ffffff;
    --shadow-dark-strong: #d1d9e6;
    --shadow-light-soft: rgba(255, 255, 255, 0.7);
    --shadow-dark-soft: rgba(209, 217, 230, 0.7);

    /* Gradients */
    --gradient-dynamic: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-accent1) 50%, var(--clr-accent2) 100%);
    --gradient-dynamic-hover: linear-gradient(135deg, var(--clr-accent2) 0%, var(--clr-primary) 50%, var(--clr-accent1) 100%);
    --gradient-overlay-dark: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);

    /* Fonts */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Work Sans', sans-serif;

    /* Transitions & Durations */
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.4s ease-in-out;
    --transition-slow: all 0.6s ease-in-out;

    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 15px;
    --radius-large: 20px;
}

/* -------------------------------------------------------------------------- */
/*                               Global Styles                                */
/* -------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    background-color: var(--clr-bg);
    color: var(--clr-text-dark);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--clr-text-very-dark);
    margin-bottom: 0.75em;
    line-height: 1.3;
    font-weight: 600; /* Default weight for Poppins */
}

h1 { font-size: 2.8rem; } /* Tailwind: ~text-5xl */
h2 { font-size: 2.2rem; } /* Tailwind: ~text-4xl */
h3 { font-size: 1.7rem; } /* Tailwind: ~text-3xl */
h4 { font-size: 1.4rem; } /* Tailwind: ~text-2xl */

p {
    margin-bottom: 1.25em;
    color: var(--clr-text-muted);
}

a {
    color: var(--clr-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--clr-accent1);
    text-decoration: underline;
}

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

/* Base Neomorphic Styles (complementing Tailwind) */
.neomorphic-outset { /* This class is already in HTML with Tailwind */
    background: var(--clr-bg);
    border-radius: var(--radius-large);
    box-shadow: 8px 8px 16px var(--shadow-dark-strong), -8px -8px 16px var(--shadow-light-strong);
    transition: var(--transition-medium);
}

.neomorphic-inset { /* This class is already in HTML with Tailwind */
    background: var(--clr-bg);
    border-radius: var(--radius-medium); /* Slightly different for inputs */
    box-shadow: inset 6px 6px 12px var(--shadow-dark-strong), inset -6px -6px 12px var(--shadow-light-strong);
    transition: var(--transition-medium);
    border: none !important; /* Ensure Tailwind borders are overridden */
}

/* -------------------------------------------------------------------------- */
/*                                  Layout                                    */
/* -------------------------------------------------------------------------- */
.container { /* Already in HTML via Tailwind's `container mx-auto px-6` */
    /* Tailwind handles this */
}

#page-container { /* Already in HTML */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-wrap { /* Already in HTML */
    flex-grow: 1;
}

/* Specific page padding for terms and privacy */
main#content-wrap.page-terms,
main#content-wrap.page-privacy {
    padding-top: 100px; /* Adjust if header height changes */
}

/* Success page centering */
main#content-wrap.page-success {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 100px - 100px); /* 100vh - header height - footer height (approx) */
    /* Or if #page-container is already flex, just ensure main flex-grows and centers its child */
}
.success-page-content-wrapper { /* Wrap content on success.html in this if needed */
    /* Add styles for the actual content box if it's not handled by .neomorphic-outset */
}


/* -------------------------------------------------------------------------- */
/*                             Header & Navigation                            */
/* -------------------------------------------------------------------------- */
header { /* Tailwind handles sticky, bg, shadow */
    /* Neomorphic outset is applied via class in HTML */
    z-index: 50; /* Ensure it's above other content */
}

header nav a {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-small);
}
header nav a:hover, header nav a.active {
    color: var(--clr-accent1);
    background-color: rgba(209, 217, 230, 0.2); /* Soft neomorphic press effect */
}

#mobile-menu { /* Tailwind handles display toggle */
    /* Styles for open mobile menu if needed beyond Tailwind */
    border-top: 1px solid var(--shadow-dark-soft);
}
#mobile-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
}


/* -------------------------------------------------------------------------- */
/*                               Hero Section                                 */
/* -------------------------------------------------------------------------- */
#hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--clr-text-light); /* Enforce white text */
    /* padding is handled by Tailwind */
}

/* Overlay is handled by .hero-text-overlay::before in HTML style block */
/* Ensuring text readability */
#hero .hero-content h1,
#hero .hero-content p {
    color: var(--clr-text-light) !important; /* Ensure white text */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* Stronger shadow for readability */
    position: relative;
    z-index: 2;
}


/* -------------------------------------------------------------------------- */
/*                              Global Buttons                                */
/* -------------------------------------------------------------------------- */
.btn, button, input[type="submit"], .neomorphic-button {
    display: inline-block;
    padding: 0.9rem 2rem; /* Consistent padding */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    border-radius: var(--radius-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    outline: none;
    /* Neomorphic Outset Base */
    background: var(--clr-bg);
    color: var(--clr-text-very-dark);
    box-shadow: 5px 5px 10px var(--shadow-dark-strong), -5px -5px 10px var(--shadow-light-strong);
}

.btn:hover, button:hover, input[type="submit"]:hover, .neomorphic-button:hover {
    box-shadow: 3px 3px 6px var(--shadow-dark-strong), -3px -3px 6px var(--shadow-light-strong);
    transform: translateY(1px); /* Slight press effect */
}

.btn:active, button:active, input[type="submit"]:active, .neomorphic-button:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark-strong), inset -3px -3px 6px var(--shadow-light-strong);
    transform: translateY(2px);
    color: var(--clr-primary);
}

/* Dynamic Gradient Button Style (applied via .dynamic-gradient-bg in HTML) */
.dynamic-gradient-bg {
    background-image: var(--gradient-dynamic);
    background-size: 200% 200%;
    color: var(--clr-text-light) !important; /* Ensure contrast on gradient */
    animation: gradientShiftAnim 8s ease infinite;
}

@keyframes gradientShiftAnim {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.dynamic-gradient-bg:hover {
    background-image: var(--gradient-dynamic-hover);
    animation: none; /* Pause animation on hover or apply different gradient */
    background-position: right center; /* Or specific position */
}

/* 'Read More' Link Style */
.read-more-link {
    font-weight: 600;
    color: var(--clr-accent1);
    position: relative;
    padding-right: 1.5em; /* Space for arrow */
}

.read-more-link::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: var(--transition-fast);
}

.read-more-link:hover::after {
    transform: translateY(-50%) translateX(5px);
    color: var(--clr-primary);
}

/* -------------------------------------------------------------------------- */
/*                                    Cards                                   */
/* -------------------------------------------------------------------------- */
.card { /* Base card styles, .neomorphic-outset is added in HTML */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center image container and content block */
    text-align: center; /* Center text within card-content */
    padding: 1.5rem; /* Tailwind: p-6 */
    transition: var(--transition-medium);
    overflow: hidden; /* For 3D effects and image zoom */
}

.card:hover {
    transform: translateY(-5px) scale(1.01); /* Subtle lift */
    /* More pronounced shadow on hover if desired */
    /* box-shadow: 10px 10px 20px var(--shadow-dark-strong), -10px -10px 20px var(--shadow-light-strong); */
}

.card-image {
    width: 100%;
    max-width: 350px; /* Control image width within centered card */
    height: 200px; /* Fixed height for image containers */
    border-radius: var(--radius-medium);
    overflow: hidden; /* Crucial for image object-fit and border-radius */
    margin-bottom: 1.5rem; /* Space between image and content */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--shadow-dark-soft); /* Placeholder bg for images */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers container without distortion */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth zoom */
}

.card:hover .card-image img {
    transform: scale(1.1); /* Zoom effect on card hover */
}

.card-content {
    width: 100%; /* Ensure content block takes full available width */
}

.card-content h3 {
    margin-top: 0; /* Remove default top margin if image is present */
    font-size: 1.4rem; /* Tailwind: text-xl/2xl */
    color: var(--clr-text-very-dark);
}

.card-content p {
    font-size: 0.95rem; /* Tailwind: text-base */
    color: var(--clr-text-muted);
}

/* Specific card types (if needed for variations) */
.customer-avatar-card .card-image { /* For customer story avatars */
    width: 80px; /* Smaller for avatars */
    height: 80px;
    border-radius: 50%; /* Circular avatars */
    margin-right: 1rem; /* If side-by-side with text, else margin-bottom if above */
    margin-bottom: 0.5rem; /* Small space if avatar is above name */
}
/* In the HTML, avatar images are within a flex container with text.
   The `.card-image` class in HTML is a wrapper `div` or the `img` itself.
   The HTML uses `w-16 h-16 rounded-full mr-4 object-cover` for avatars. This CSS can be a fallback.
*/

/* Card 3D Effect */
.card-3d {
    transform-style: preserve-3d;
}
.card-3d:hover {
    transform: perspective(1000px) rotateY(3deg) rotateX(1deg) translateY(-5px) scale(1.02);
}


/* -------------------------------------------------------------------------- */
/*                               Form Elements                                */
/* -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    /* .neomorphic-inset is applied in HTML using Tailwind */
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    color: var(--clr-text-dark);
    background-color: var(--clr-bg); /* Ensure it matches */
    width: 100%;
    border-radius: var(--radius-medium); /* Match .neomorphic-inset */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none;
    /* Subtle glow or change in inset shadow for focus */
    box-shadow: inset 4px 4px 8px var(--shadow-dark-strong),
                inset -4px -4px 8px var(--shadow-light-strong),
                0 0 0 2px var(--clr-primary); /* Focus ring */
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--clr-text-very-dark);
}

/* -------------------------------------------------------------------------- */
/*                                  Switches                                  */
/* -------------------------------------------------------------------------- */
/* The HTML uses Tailwind classes for the switch, which is a good approach.
   This CSS can provide fallback or enhance it if needed.
   The current HTML structure for the switch:
    <div class="relative">
        <input type="checkbox" id="eco-mode-toggle" class="sr-only peer">
        <div class="w-10 h-4 bg-gray-300 rounded-full shadow-inner peer-checked:bg-green-400 neomorphic-inset"></div>
        <div class="absolute left-0 -top-1 w-6 h-6 bg-white rounded-full shadow transition-transform duration-300 ease-in-out peer-checked:translate-x-full neomorphic-outset"></div>
    </div>
   This is well-styled with Tailwind and neomorphic classes already.
*/


/* -------------------------------------------------------------------------- */
/*                              Section Specific                              */
/* -------------------------------------------------------------------------- */
/* Section Titles */
.section-title { /* Styles from HTML are good, this is for consistency */
    text-align: center;
    font-size: 2.5rem; /* Tailwind: text-4xl */
    margin-bottom: 2rem; /* Tailwind: mb-8 */
    color: var(--clr-text-very-dark);
    font-weight: 700;
}
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem; /* Tailwind: text-3xl */
    }
}

/* Events Calendar Date Block */
#events-calendar .card-image.dynamic-gradient-bg { /* Targeting the date block in events */
    width: 100px;   /* Tailwind: w-32 or w-40 in HTML */
    height: 100px;  /* Tailwind: h-32 or h-40 in HTML */
    color: var(--clr-text-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-medium);
    padding: 0.5rem;
    text-align: center;
    /* Animation for gradient is global */
}
#events-calendar .card-image .text-4xl { font-size: 2.5rem; line-height: 1; }
#events-calendar .card-image .text-lg { font-size: 1.125rem; }


/* External Resources Links */
#external-resources .card a {
    color: var(--clr-primary);
    font-weight: 600;
}
#external-resources .card a:hover {
    color: var(--clr-accent1);
}

/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
footer { /* Tailwind bg-gray-800, text-gray-300, py-12 */
    /* .neomorphic-outset is applied in HTML for the top shadow */
}

footer h3 {
    color: var(--clr-text-light); /* Ensure white headings in footer */
    font-size: 1.3rem;
}

footer p {
    color: #cbd5e1; /* Tailwind: text-gray-400 or a bit lighter */
}

footer ul li a {
    color: #e2e8f0; /* Tailwind: text-gray-300 */
    transition: var(--transition-fast);
}

footer ul li a:hover {
    color: var(--clr-primary);
    padding-left: 5px; /* Subtle hover effect */
}

/* Footer Social Links (Text-based) */
.footer-social-link {
    color: var(--clr-primary); /* From HTML style */
    text-decoration: none;
    margin: 0 0.5rem; /* From HTML style */
    font-weight: 500;
    transition: var(--transition-fast);
}

.footer-social-link:hover {
    color: var(--clr-text-light);
    text-decoration: underline;
}

footer .border-t { /* Tailwind border-gray-700 */
    border-color: rgba(255,255,255,0.15); /* Softer border */
}


/* -------------------------------------------------------------------------- */
/*                              Helper Classes                                */
/* -------------------------------------------------------------------------- */
.text-shadow-strong {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.bg-image-cover-center {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dark-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-overlay-dark); /* Using defined gradient */
    z-index: 1;
}
/* Ensure parent is position: relative and content is z-index: 2 */


/* -------------------------------------------------------------------------- */
/*                            Accessibility & UX                              */
/* -------------------------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(var(--clr-primary-rgb, 160, 210, 219), 0.3); /* Fallback RGB for primary */
}
/* Define --clr-primary-rgb if needed, e.g. in :root { --clr-primary-rgb: 160, 210, 219; } */


/* -------------------------------------------------------------------------- */
/*                       Parallax & Glassmorphism (Conceptual)                */
/* -------------------------------------------------------------------------- */
/* True parallax usually requires JavaScript. CSS can fake it with background-attachment: fixed */
.parallax-section {
    background-attachment: fixed; /* Simple parallax effect on background images */
}

/* Glassmorphism Effect */
.glassmorphic {
    background: rgba(255, 255, 255, 0.15); /* Light, semi-transparent background */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%); /* Safari support */
    border-radius: var(--radius-medium);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Soft shadow */
}
.glassmorphic-darker { /* For use on lighter backgrounds */
    background: rgba(200, 200, 220, 0.1);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
/* Cookie consent popup could use this */
#cookie-consent-popup.glassmorphic {
    background: rgba(30, 30, 40, 0.7); /* Darker base for better text contrast */
    color: var(--clr-text-light);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#cookie-consent-popup.glassmorphic p {
    color: var(--clr-text-light) !important;
}

/* Override default Tailwind focus rings if using custom focus-visible */
*:focus {
    /* outline: none; */ /* Generally not recommended unless providing clear alternatives */
    /* box-shadow: none; */
}