/* External styles moved from inline <style> in index.html */
body {
    font-family: 'Public Sans', sans-serif;
}

/* Smooth scrolling for in-page anchors */
html {
    scroll-behavior: smooth;
}

/* Mix-blend-mode for the logo to appear background-less without editing source file */
.logo-blend {
    mix-blend-mode: multiply;
}
.dark .logo-blend {
    mix-blend-mode: screen;
    filter: brightness(1.2);
}

/* Header tweaks: ensure a bit more vertical space and keep logo centered */
.site-nav { min-height: 6rem; }

/* Header logo: single authoritative rule (uses !important to avoid conflicts). */
.site-nav img.logo-blend.header-logo {
    height: 4.5rem !important;      /* ~10% smaller than previous 5.5rem */
    max-height: 4.5rem !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .site-nav img.logo-blend.header-logo {
        height: 3.6rem !important;   /* proportional mobile size */
        max-height: 3.6rem !important;
    }
}

/* Footer logo minor hover animation and header logo hover */
.header-logo, .footer-logo {
    transition: transform .28s var(--motion-ease), filter .28s var(--motion-ease);
    will-change: transform;
}
.header-logo:hover, .footer-logo:hover {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}

/* Motion / transitions */
:root{
    --motion-fast: 160ms;
    --motion-medium: 320ms;
    --motion-ease: cubic-bezier(.2,.9,.2,1);
}

/* Buttons and interactive elements */
a.bg-primary, button, .btn, .lang-toggle {
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

a.bg-primary:hover, button:hover, .lang-toggle:hover {
    transform: translateY(-3px) scale(1.02);
}

/* Ensure lang-toggle always has a transform transition even if Tailwind utilities override it */
button.lang-toggle, .lang-toggle {
    transition-property: transform, box-shadow, background-color, opacity !important;
    transition-duration: var(--motion-fast) !important;
    transition-timing-function: var(--motion-ease) !important;
    will-change: transform;
}

button.lang-toggle:hover, .lang-toggle:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

/* Service cards subtle elevation + image scale */
.service-card { transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(2,6,23,0.12); }
.service-card-img { transition: transform .8s var(--motion-ease); will-change: transform; }
.service-card:hover .service-card-img { transform: scale(1.06); }

/* Language change animation helper */
.lang-anim { transition: opacity .28s var(--motion-ease), transform .28s var(--motion-ease); }
.lang-fade-out .lang-anim { opacity: 0; transform: translateY(6px); }
.lang-fade-in .lang-anim { opacity: 1; transform: none; }

/* Language flags small styling */
.flag { display:inline-block; line-height:1; font-size:1rem; margin-right:0.35rem; }
.flag-img { width:1.25rem; height:auto; margin-right:0.35rem; vertical-align:middle; display:inline-block; }

/* Small utility for smoother text color transitions */
h1, h2, h3, h4, p, a { transition: color var(--motion-fast) var(--motion-ease); }

/* Raster logo extracted from original (form) - smaller on desktop, responsive on mobile */
.form-logo-image { width: 50%; max-width: 200px; height: auto; display:block; margin: 0.5rem auto 0; transition: transform .22s var(--motion-ease); }
.form-logo-image:hover { transform: translateY(-3px) scale(1.01); }

@media (max-width: 640px) {
    .form-logo-image { width: 85%; max-width: 280px; }
}

/* Mobile hero spacing and horizontal-gap fix
   - Add extra top/bottom padding so text isn't flush to edges on small screens
   - Reduce the heavy min-height used on larger screens so content fits better
   - Prevent accidental horizontal overflow that can create a small right-side gap
*/
@media (max-width: 640px) {
    .site-hero { padding-top: 5.75rem; padding-bottom: 3rem; }
    /* Tailwind's generated class name for min-h-[60vh] is escaped in CSS as below */
    .site-hero .min-h-\[60vh\] { min-height: 55vh; }
    html, body { overflow-x: hidden; }
}