/* Global HTML and Body Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* Default background and text color, can be overridden by specific page classes */
    background-color: #f8fafc; /* Tailwind's slate-50 as a general default */
    color: #1e293b; /* Tailwind's slate-800 as a general default */
}

/* Styles for index.html - Landing Page */
body.landing-page {
    background-color: #f4f7f6; /* Light neutral background for index.html */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.landing-page .container {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    flex-grow: 1;
}

body.landing-page header {
    text-align: center;
    padding: 30px 0; /* Reduced padding */
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 25px; /* Reduced margin */
}

body.landing-page header h1 {
    font-size: 2.5em; /* Adjusted size */
    color: #005a87; /* Dark blue */
    margin-bottom: 0.2em;
    font-weight: 700;
}

body.landing-page header .subtitle {
    font-size: 1.1em; /* Adjusted size */
    color: #555;
    font-weight: 400;
    margin-top: 5px;
}

body.landing-page section {
    margin-bottom: 30px; /* Reduced margin */
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

body.landing-page section h2 {
    font-size: 1.6em; /* Adjusted size */
    color: #0073b1; /* Primary blue */
    margin-top: 0;
    margin-bottom: 15px; /* Reduced margin */
    padding-bottom: 8px; /* Reduced padding */
    border-bottom: 2px solid #0073b1;
    font-weight: 600;
}

body.landing-page #intro p {
    font-size: 1.05em; /* Adjusted size */
    text-align: center;
    color: #444;
    margin-bottom: 0.5em;
}
body.landing-page #intro p.croatian-intro {
    font-size: 1em;
    color: #555;
    margin-top: 0.5em;
}


body.landing-page .language-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Reduced gap */
    margin-bottom: 10px; /* Reduced margin */
}

body.landing-page .lang-button {
    display: inline-block;
    background-color: #0073b1; 
    color: #ffffff;
    padding: 10px 20px; /* Adjusted padding */
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.95em; /* Adjusted size */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.landing-page .lang-button:hover,
body.landing-page .lang-button:focus {
    background-color: #005a87; 
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

body.landing-page .note {
    text-align: center;
    font-size: 0.85em; /* Adjusted size */
    color: #666;
}

body.landing-page .project-link-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjusted minmax */
    gap: 15px; /* Reduced gap */
}

body.landing-page .card { 
    background-color: #f9f9f9; 
    padding: 20px; /* Adjusted padding */
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

body.landing-page .card h3 {
    font-size: 1.3em; /* Adjusted size */
    color: #005a87;
    margin-top: 0;
    margin-bottom: 8px; /* Reduced margin */
    font-weight: 600;
}

body.landing-page .card p {
    font-size: 0.95em; /* Adjusted size */
    color: #555;
    flex-grow: 1; 
    margin-bottom: 15px; /* Reduced margin */
}
body.landing-page .card p.croatian-text {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}


body.landing-page .project-button {
    display: inline-block;
    background-color: #28a745; 
    color: #ffffff;
    padding: 8px 18px; /* Adjusted padding */
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.95em; /* Adjusted size */
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: auto; 
}

body.landing-page .project-button:hover,
body.landing-page .project-button:focus {
    background-color: #218838; 
    transform: translateY(-2px);
}

body.landing-page footer {
    text-align: center;
    padding: 15px 0; /* Reduced padding */
    margin-top: 25px; /* Reduced margin */
    border-top: 1px solid #e0e0e0;
    font-size: 0.85em; /* Adjusted size */
    color: #666;
    background-color: #e9ecef; 
}

body.landing-page footer p {
    margin: 4px 0; /* Adjusted margin */
}

/* Styles for SPA Pages (en.html, hr.html, ru.html, nl.html) */
body.spa-page {
    background-color: #f5f5f4; /* Tailwind's stone-100 */
    color: #262626; /* Tailwind's neutral-800 */
    /* Tailwind's 'antialiased' is applied via class in HTML */
}

/* Shared link styling for SPAs, excluding specific components */
body.spa-page a:not(.btn-primary):not(.btn-secondary):not(.nav-link-item):not(.language-switcher-item) {
    color: #0ea5e9; /* Tailwind's sky-500 */
    text-decoration: none; /* Tailwind's no-underline (can be added in HTML if preferred) */
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
body.spa-page a:not(.btn-primary):not(.btn-secondary):not(.nav-link-item):not(.language-switcher-item):hover {
    color: #0284c7; /* Tailwind's sky-600 */
    text-decoration: underline; /* Tailwind's hover:underline */
}

/* Specific style for active language item in SPA language switcher */
.language-switcher-item.active-lang-page {
    background-color: #e0f2fe; /* Tailwind's sky-100 */
    color: #0369a1;       /* Tailwind's sky-700 */
    font-weight: 600;     /* Tailwind's font-semibold */
}

/* SPA Specific Component Styles that were in SPA's inline <style> or are global */
.hero-gradient { 
    background: linear-gradient(to right, #0c4a6e, #0369a1); 
}
.accordion-content { 
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.chart-container { 
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    max-height: 350px;
}
@media (min-width: 768px) { 
    .chart-container {
        height: 350px;
        max-height: 400px;
    }
}
.expertise-card-front, .expertise-card-back { 
    backface-visibility: hidden;
    transition: transform 0.6s;
    -webkit-backface-visibility: hidden; 
}
.expertise-card-back { 
    transform: rotateY(180deg);
}
.expertise-card.is-flipped .expertise-card-front { 
    transform: rotateY(180deg);
}
.expertise-card.is-flipped .expertise-card-back { 
    transform: rotateY(0deg);
}
.perspective { perspective: 1000px; } 
.preserve-3d { transform-style: preserve-3d; } 

/* Responsive adjustments for index.html (some already present, ensuring they are grouped) */
@media (max-width: 768px) {
    body.landing-page header h1 {
        font-size: 2.2em;
    }
    body.landing-page header .subtitle {
        font-size: 1em;
    }
    body.landing-page section h2 {
        font-size: 1.5em;
    }
    body.landing-page .lang-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    body.landing-page .card h3 {
        font-size: 1.3em;
    }
    body.landing-page .card p {
        font-size: 0.95em;
    }
    body.landing-page .project-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    body.landing-page .language-links {
        flex-direction: column;
        align-items: center;
    }
    body.landing-page .lang-button {
        width: 80%;
        max-width: 300px;
        text-align: center;
    }
}

/* Note: Most SPA component styles like .section-title, .card, .btn-primary etc. are applied directly 
   using Tailwind utility classes in the SPA HTML files and do not need re-definition here if Tailwind is correctly linked and used.
   This style.css primarily serves index.html and provides truly global styles or specific overrides/additions like .active-lang-page.
*/