/* style.css */

/*
  Theme: Práce s emocemi a seberegulací pro specialisty v ČR
  Design System: Modern
  Trend: Asymmetrical Balance
  Color Scheme: Tetradic
  Animation Style: Elastic Animations
  Fonts: Oswald (headings), Nunito (body)
  Framework: Tailwind CSS (complementary styles)
*/

/* CSS Variables (defined in HTML, re-stated here for clarity if this file were standalone)
:root {
    --color-primary: #2C3E50;
    --color-secondary: #1ABC9C;
    --color-accent1: #E74C3C;
    --color-accent2: #F1C40F;
    --color-neutral-light: #ECF0F1;
    --color-neutral-dark: #34495E;
    --color-text-on-dark: #FFFFFF;
    --color-text-on-light: #34495E;
}
*/

/* Base & Typography Enhancements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Links */
a {
    color: var(--color-secondary);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--color-accent1); /* Or a darker shade of secondary */
}

/* Enhanced Global Button Styles (complementing HTML inline styles) */
.btn, button, input[type="submit"], input[type="button"] {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                background-color 0.3s ease, 
                box-shadow 0.3s ease;
    will-change: transform; /* Performance hint for animations */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(-1px) scale(1.01);
}

/* Form Element Styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
    font-family: 'Nunito', sans-serif;
    padding: 0.75rem 1rem; /* Tailwind p-3 px-4 */
    border: 1px solid #D1D5DB; /* Tailwind border-gray-300 */
    border-radius: 0.375rem; /* Tailwind rounded-md */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--color-neutral-dark);
    background-color: #FFFFFF;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.3); /* Focus ring with secondary color */
}

textarea {
    min-height: 120px;
    resize: vertical;
}

label {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    display: block;
}

/* Card Enhancements (complementing HTML inline styles) */
.card {
    /* display: flex; flex-direction: column; align-items: center; -- ALREADY IN HTML INLINE STYLE */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
                box-shadow 0.3s ease-in-out;
}
.card:hover {
    transform: translateY(-8px) scale(1.02); /* Enhanced elastic hover */
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 16px -8px rgba(0, 0, 0, 0.1);
}

.card-image { /* Container for image */
    /* width: 100%; height: 200px; overflow: hidden; -- ALREADY IN HTML INLINE STYLE */
    /* STROGO: fixed height and object-fit: cover for image are in HTML inline */
}
.card-image img {
    transition: transform 0.5s ease;
}
.card:hover .card-image img {
    transform: scale(1.05); /* Subtle zoom on image hover */
}

.card-title {
    /* font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.5rem; text-align: left; -- ALREADY IN HTML INLINE STYLE */
}
.card-description {
    /* font-size: 1rem; color: var(--color-neutral-dark); line-height: 1.6; margin-bottom: 1rem; -- ALREADY IN HTML INLINE STYLE */
}
.card-price {
    /* font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 1rem; -- ALREADY IN HTML INLINE STYLE */
}

/* Section Specific Styling */

/* Hero Section */
#hero {
    /* background-size: cover; background-repeat: no-repeat; background-position: center; -- from parallax-bg */
    /* text-on-image-overlay for dark overlay is in HTML */
    /* Hero text is WHITE as per HTML style attribute */
}
#hero h1 {
    /* color: #FFFFFF; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); -- ALREADY IN HTML */
}
#hero p {
     /* color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); -- ALREADY IN HTML */
}


/* Instructors Section */
#instructors .card-image { /* Specifically for instructor circular images */
    /* width: 10rem; height: 10rem; -- Tailwind w-40 h-40 */
    /* border-radius: 9999px; -- Tailwind rounded-full */
    /* border: 4px solid var(--color-secondary); -- in HTML */
    margin-left: auto;
    margin-right: auto;
}

/* Our Process Section */
#process .grid > div { /* Styling for the process steps */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#process .grid > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Tailwind shadow-xl */
}
#process .text-5xl { /* The step number */
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
}

/* Media/Gallery Section */
#media .image-container:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}
#media .image-container img {
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* External Resources Section */
#resources .grid > div { /* Styling for resource link cards */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
#resources .grid > div:hover {
    background-color: #f8f9fa; /* Lighter shade for hover */
    transform: translateY(-3px);
}
#resources h3 a:hover {
    text-decoration: underline;
    color: var(--color-accent1);
}

/* Contact Section */
#contact .bg-white { /* The form container card */
    /* backdrop-filter: blur(5px); Slightly subtle glass effect if desired, test performance */
    /* background-color: rgba(255, 255, 255, 0.9); */
}

/* Footer */
footer a.hover\:text-secondary:hover { /* Tailwind specific hover override if needed */
    color: var(--color-secondary) !important; /* Example, usually Tailwind handles this */
}
footer .text-sm a { /* Social media links and other footer links */
    display: inline-block;
    padding: 0.25rem 0;
    position: relative;
}
footer .text-sm a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--color-secondary);
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
footer .text-sm a:hover::after {
    width: 100%;
    left: 0;
    background-color: var(--color-secondary);
}

/* Specific Page Styles */

/* success.html */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: var(--color-neutral-light);
}
.success-page-container h1 {
    color: var(--color-primary);
    font-size: 3rem; /* Tailwind text-5xl */
    margin-bottom: 1rem;
}
.success-page-container p {
    color: var(--color-neutral-dark);
    font-size: 1.25rem; /* Tailwind text-xl */
    margin-bottom: 2rem;
    max-width: 600px;
}
.success-page-container .btn {
    margin-top: 1rem;
}

/* privacy.html, terms.html */
.static-page-content {
    padding-top: 120px; /* Adjust if header height changes (current h-20 = 80px) */
    padding-bottom: 60px;
    min-height: calc(100vh - 180px); /* Adjust based on header and footer heights */
}
.static-page-content h1, .static-page-content h2, .static-page-content h3 {
    text-align: left; /* Override default centered headings for content pages */
    color: var(--color-primary);
}
.static-page-content h1 {
    font-size: 2.5rem; /* Tailwind text-4xl */
    margin-bottom: 1.5rem;
}
.static-page-content h2 {
    font-size: 1.875rem; /* Tailwind text-3xl */
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.static-page-content h3 {
    font-size: 1.5rem; /* Tailwind text-2xl */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.static-page-content p, .static-page-content ul, .static-page-content ol {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-dark);
}
.static-page-content ul, .static-page-content ol {
    margin-left: 1.5rem;
}
.static-page-content li {
    margin-bottom: 0.5rem;
}
.static-page-content a {
    text-decoration: underline;
}
.static-page-content a:hover {
    color: var(--color-accent1);
}


/* Animations for Scroll (initial states for JS libraries like GSAP) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Parallax Background (defined in HTML, ensure it's covered) */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Text on image overlay (defined in HTML, ensure it's covered) */
.text-on-image-overlay::before {
    /* 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; */
}
.text-on-image-overlay > * {
    /* position: relative; z-index: 2; */
}


/* Asymmetrical Balance elements (example - can be more complex) */
/* Could involve using ::before/::after for decorative shapes or offset grid layouts */
/* Example: A section with an image offset from text */
.asymmetric-layout-item {
    /* For use with CSS Grid or specific positioning */
}

/* "Читать далее" or "Read More" style links */
.read-more-link {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: var(--color-accent1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.read-more-link:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    text-decoration: none; /* Remove default underline if any */
}
.read-more-link::after {
    content: ' \2192'; /* Right arrow */
    display: inline-block;
    margin-left: 0.3em;
    transition: transform 0.3s ease;
}
.read-more-link:hover::after {
    transform: translateX(3px);
}


/* Ensure sufficient contrast for accessibility */
/* This is generally handled by the color choices, but good to keep in mind */
/* Example: If a light accent color is used for text on a light background */
/* .low-contrast-text { text-shadow: 0 0 5px rgba(0,0,0,0.2); } */


/* Responsive adjustments not covered by Tailwind or for fine-tuning */
@media (max-width: 768px) {
    .section-heading {
        font-size: 2rem; /* Adjust for smaller screens */
    }
    #hero h1 {
        font-size: 3rem; /* Adjust hero title for smaller screens */
    }
    #hero p {
        font-size: 1.125rem; /* Adjust hero subtitle */
    }
    .static-page-content {
        padding-top: 100px; 
    }
}

@media (max-width: 480px) {
    .section-heading {
        font-size: 1.75rem;
    }
     #hero h1 {
        font-size: 2.25rem;
    }
    #hero p {
        font-size: 1rem;
    }
}

/* Cookie Popup from HTML - Ensure styles here don't conflict if user moves it */
#cookie-popup {
    /* Styles are inline in HTML, this is a placeholder if moved */
}
#cookie-popup p a {
    color: var(--color-secondary) !important; /* Ensure link color is visible on dark bg */
}
#accept-cookie {
    /* Styles are inline in HTML */
}