/* style.css */

:root {
    /* Fonts */
    --font-primary: 'Oswald', sans-serif;
    --font-secondary: 'Nunito', sans-serif;

    /* Bright Color Palette */
    --color-primary: #007BFF;
    /* Vibrant Blue */
    --color-primary-dark: #0056b3;
    --color-primary-light: #60a5fa;
    /* Lighter blue for accents/links */

    --color-secondary: #28a745;
    /* Bright Green */
    --color-secondary-dark: #1e7e34;

    --color-accent: #FFC107;
    /* Warm Yellow */
    --color-accent-dark: #d39e00;
    --color-danger: #dc3545;
    /* For elements like 'read more' on red cards */

    --color-text-light: #FFFFFF;
    --color-text-dark: #343a40;
    /* Dark gray for body text */
    --color-text-headings: #222222;
    /* Even darker for headings */
    --color-text-muted: #6c757d;
    /* Muted gray for less important text */

    --color-background-body: #f8f9fa;
    /* Very light gray for page background */
    --color-background-section-alt: #f1f3f5;
    /* Slightly different for alternating sections like gray-100 */
    --color-background-card: #FFFFFF;
    --color-background-dark-overlay: rgba(0, 0, 0, 0.5);
    /* For hero and image overlays */
    --color-background-footer: #212529;
    /* Dark footer background */

    /* Biomorphic & Modern Design System */
    --border-radius-soft: 15px;
    --border-radius-biomorphic-card: 30px 50px 30px 80px / 50px 30px 80px 30px;
    --border-radius-biomorphic-alt: 60px 20px 70px 40px / 30px 70px 25px 80px;
    --border-radius-button: 9999px;
    /* Pill shape */

    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 12px 30px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Spacing (matches Tailwind's scale where 1rem = 16px, 4 units = 1rem) */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
}

/* Base Styles */
body {
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
    background-color: var(--color-background-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* Prevent horizontal scroll from AOS or biomorphic shapes */
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-oswald {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text-headings);
    line-height: 1.3;
    /* Tailwind handles margins, e.g., mb-4, mb-6 */
}

/* Specific heading styles if needed beyond Tailwind */
h1 {
    font-size: 2.75rem;
}

/* Approx text-5xl */
h2 {
    font-size: 2.25rem;
}

/* Approx text-4xl */
h3 {
    font-size: 1.75rem;
}

/* Approx text-3xl */
h4 {
    font-size: 1.25rem;
}

/* Approx text-xl */

.prose {
    /* Customizing Tailwind Prose */
    font-family: var(--font-secondary);
    color: var(--color-text-dark);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: var(--font-primary);
    color: var(--color-primary);
}

.prose strong {
    color: var(--color-text-headings);
}

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

.prose a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.prose ul>li::before {
    background-color: var(--color-primary-light);
}

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

a:hover {
    color: var(--color-primary);
    /* text-decoration: underline; Let Tailwind handle this, e.g., hover:underline */
}

/* Header / Navbar (Tailwind has fixed, sticky, shadow) */
header.sticky {
    /* Additional custom styles for header if needed */
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium);
}

/* Hero Section */
#hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-image is set inline with linear-gradient for overlay */
}

#hero h1,
#hero p {
    color: var(--color-text-light) !important;
    /* Ensuring white text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    /* Readability on various backgrounds */
}

/* General Section Styling */
section {
    padding-top: var(--spacing-16);
    /* Default 4rem, can be adjusted with Tailwind py- classes */
    padding-bottom: var(--spacing-16);
}

/* Global Button Styles */
.btn,
button,
input[type='submit'],
input[type='button'] {
    display: inline-block;
    font-family: var(--font-oswald);
    font-size: 1rem;
    font-weight: 500;
    padding: var(--spacing-3) var(--spacing-6);
    /* 12px 24px */
    border-radius: var(--border-radius-button);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid transparent;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-soft);
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight on mobile */
}

.btn:hover,
button:hover,
input[type='submit']:hover,
input[type='button']:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--shadow-medium);
}

.btn:active,
button:active,
input[type='submit']:active,
input[type='button']:active {
    transform: translateY(0) scale(1);
    box-shadow: var(--shadow-soft);
}

.btn:focus,
button:focus,
input[type='submit']:focus,
input[type='button']:focus {
    outline: none;
    box-shadow: var(--shadow-soft), 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.4);
    /* Assuming --color-primary-rgb is set if not using Tailwind focus rings */
}

/* Adapting Tailwind's blue button to our theme */
.bg-blue-600.text-white {
    background-color: var(--color-primary) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-primary) !important;
}

.bg-blue-600.text-white:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.bg-white.text-blue-600 {
    /* For CTA button on Hero */
    color: var(--color-primary) !important;
}

.bg-white.text-blue-600:hover {
    background-color: #e9ecef !important;
    /* Lighter gray on hover */
}


/* Card Styles */
.card {
    background-color: var(--color-background-card);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    transition: var(--transition-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    /* Center inline/inline-block content within card */
    height: 100%;
    /* Make cards in a grid equal height by default */
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-strong);
}

.card-image {
    /* Wrapper for the image */
    width: 100%;
    /* Fixed height for image containers is handled by Tailwind (e.g., h-48) */
    /* height: 200px; /* Default fixed height if not using Tailwind */
    overflow: hidden;
    margin-bottom: var(--spacing-4);
    /* Consistent margin */
    display: flex;
    /* Center img tag if it's smaller than container */
    justify-content: center;
    align-items: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    /* Fill the Tailwind-defined height (e.g. h-48) */
    object-fit: cover;
    transition: var(--transition-slow);
    margin-left: auto;
    /* Center the image if its width is constrained */
    margin-right: auto;
}

.card-content {
    padding: var(--spacing-4) var(--spacing-6);
    /* Consistent padding */
    flex-grow: 1;
    /* Allows content to take available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center content horizontally */
    justify-content: space-between;
    /* Pushes "read more" to bottom if card is tall */
}

.card-content h3 {
    font-size: 1.35rem;
    /* ~21px */
    color: var(--color-primary);
    margin-top: 0;
    /* Remove default top margin from h3 if any */
}

.card-content p {
    font-size: 0.9rem;
    /* ~14.5px */
    color: var(--color-text-muted);
    flex-grow: 1;
    /* Allows paragraph to take up space before link */
}

/* "Read more" / "Read article" links */
.card-content a[href="contacts.html"] {
    /* More specific selector for these links */
    font-family: var(--font-oswald);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    margin-top: var(--spacing-4);
    /* Space above link */
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--border-radius-button);
    transition: var(--transition-medium);
    display: inline-block;
    /* To apply padding and hover effects correctly */
}

/* Color specific "Read more" links */
.card-content a.text-blue-600 {
    color: var(--color-primary) !important;
}

.card-content a.text-blue-600:hover {
    background-color: var(--color-primary-light);
    color: var(--color-text-light) !important;
    text-decoration: none;
}

.card-content a.text-green-600 {
    color: var(--color-secondary) !important;
}

.card-content a.text-green-600:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light) !important;
    text-decoration: none;
}

.card-content a.text-red-600 {
    color: var(--color-danger) !important;
}

/* Assuming a red color for some news/blog tags */
.card-content a.text-red-600:hover {
    background-color: var(--color-danger);
    color: var(--color-text-light) !important;
    text-decoration: none;
}


/* Biomorphic Element Styles from HTML */
.biomorphic-card {
    border-radius: var(--border-radius-biomorphic-card);
}

.biomorphic-card-alt {
    border-radius: var(--border-radius-biomorphic-alt);
}

.biomorphic-image img {
    border-radius: 40px 10px 40px 10px / 10px 40px 10px 40px;
}

.biomorphic-image-alt img {
    border-radius: 10px 60px 20px 50px / 60px 10px 50px 20px;
}

.biomorphic-section {
    border-radius: 80px 30px 100px 50px / 40px 90px 60px 120px;
    overflow: hidden;
}

.biomorphic-content-area {
    border-radius: var(--border-radius-soft);
}

.biomorphic-map {
    border-radius: 50px 20px 50px 20px / 20px 50px 20px 50px;
    overflow: hidden;
}

.biomorphic-card-large {
    border-radius: 40px 60px 40px 90px / 60px 40px 90px 40px;
}

/* Form Styles (complementing Tailwind) */
input[type='text'],
input[type='email'],
textarea {
    font-family: var(--font-secondary);
    border-radius: var(--border-radius-soft);
    transition: var(--transition-medium);
    /* Tailwind handles padding, border, focus:ring-blue-500, focus:border-blue-500 */
}

input[type='text']:focus,
input[type='email']:focus,
textarea:focus {
    /* Tailwind's focus utilities are good, this is for fallback or enhancement */
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 0, 123, 255), 0.25);
}

/* Specific Page Styles */
main[data-barba-namespace="success"] {
    min-height: calc(100vh - 160px);
    /* Approx header (80px) + footer (80px) height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

main[data-barba-namespace="success"] .container {
    width: 100%;
}

main[data-barba-namespace="privacy"],
main[data-barba-namespace="terms"] {
    padding-top: calc(80px + var(--spacing-8));
    /* Header height + some extra space */
    padding-bottom: var(--spacing-8);
}

main[data-barba-namespace="privacy"] .prose,
main[data-barba-namespace="terms"] .prose {
    background-color: var(--color-background-card);
    padding: var(--spacing-8);
    /* More padding for content pages */
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-medium);
    max-width: 80ch;
    /* Optimal reading line length */
}

/* Footer */
footer {
    background-color: var(--color-background-footer);
    color: #adb5bd;
    /* Tailwind's gray-400 */
}

footer h5 {
    color: var(--color-text-light);
}

footer a {
    color: #ced4da;
    /* Tailwind's gray-300 */
    transition: var(--transition-fast);
}

footer a:hover {
    color: var(--color-primary-light);
    text-decoration: none;
}

/* Footer Social Links (Text-based styling) */
footer .flex.space-x-4 a {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--border-radius-soft);
}

footer .flex.space-x-4 a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

/* Barba.js Page Transitions (from HTML) */
.barba-leave-active,
.barba-enter-active {
    transition: opacity var(--transition-slow) ease;
}

.barba-leave-to,
.barba-enter-from {
    opacity: 0;
    /* position: absolute; /* Uncomment if needed to prevent content jump */
    /* width: 100%; */
}

/* Cookie Consent Popup - Styled in HTML, can add minor tweaks here */
#cookie-consent-popup a {
    color: var(--color-primary-light);
    /* Ensure link is visible on dark bg */
    font-weight: bold;
}

#cookie-consent-popup a:hover {
    color: var(--color-text-light);
}

/* Utility: Background image with dark overlay (if not done in HTML style) */
.bg-image-overlay {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-image-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Replaces top, left, right, bottom */
    background: var(--color-background-dark-overlay);
    /* Re-using dark overlay */
    z-index: 1;
}

.bg-image-overlay>* {
    /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}

/* Parallax Effect (Simple CSS version, JS is better for complex parallax) */
.parallax-background {
    background-attachment: fixed;
    /* Note: Can have performance issues and mobile compatibility problems */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Glassmorphism Effect (Example utility class) */
.glassmorphism-effect {
    background: rgba(255, 255, 255, 0.15);
    /* Adjust transparency */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Safari */
    border-radius: var(--border-radius-soft);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Responsive Adjustments (Tailwind handles most with responsive prefixes like md:, lg:) */
@media (max-width: 768px) {

    /* md breakpoint */
    h1 {
        font-size: 2.25rem;
    }

    /* text-4xl */
    h2 {
        font-size: 1.875rem;
    }

    /* text-3xl */
    section {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
    }

    .card-content {
        padding: var(--spacing-4);
    }

    .btn,
    button,
    input[type='submit'],
    input[type='button'] {
        padding: var(--spacing-2) var(--spacing-4);
        /* Smaller padding on mobile */
        font-size: 0.9rem;
    }

    main[data-barba-namespace="privacy"],
    main[data-barba-namespace="terms"] {
        padding-top: calc(80px + var(--spacing-4));
        /* Header height + smaller extra space */
    }
}

@media (max-width: 640px) {

    /* sm breakpoint */
    h1 {
        font-size: 2rem;
    }

    /* Slightly smaller than text-4xl */
    h2 {
        font-size: 1.75rem;
    }
}

/* Ensure high contrast where Tailwind defaults might be too subtle for "Bright" theme */
.text-gray-800 {
    color: var(--color-text-headings) !important;
}

/* For main section titles */
.text-gray-700 {
    color: var(--color-text-dark) !important;
}

/* For body text */
.text-gray-600 {
    color: var(--color-text-muted) !important;
}

/* For subtitles or less important text */

/* Ensure section backgrounds are consistent if using Tailwind gray-100, etc. */
.bg-gray-50 {
    background-color: var(--color-background-body) !important;
}

.bg-gray-100 {
    background-color: var(--color-background-section-alt) !important;
}

header nav {
    flex-wrap: wrap;
}