@tailwind base;
@tailwind components;
@tailwind utilities;

/* Neue Montreal Regular */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-Regular.otf') format('opentype');
    font-weight: 400; /* Corespunde greutății 'normal' */
    font-style: normal;
    font-display: swap;
}

/* Neue Montreal Italic */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-Italic.otf') format('opentype');
    font-weight: 400; /* Corespunde greutății 'normal' */
    font-style: italic;
    font-display: swap;
}

/* Neue Montreal Light */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-Light.otf') format('opentype');
    font-weight: 300; /* Greutate 'light' */
    font-style: normal;
    font-display: swap;
}

/* Neue Montreal Light Italic */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Neue Montreal Medium */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-Medium.otf') format('opentype');
    font-weight: 500; /* Greutate 'medium' */
    font-style: normal;
    font-display: swap;
}

/* Neue Montreal Medium Italic */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Neue Montreal Bold */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-Bold.otf') format('opentype');
    font-weight: 700; /* Greutate 'bold' */
    font-style: normal;
    font-display: swap;
}

/* Neue Montreal Bold Italic */
@font-face {
    font-family: 'Neue Montreal';
    src: url('../fonts/NeueMontreal-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'Neue Montreal', sans-serif;
}

.nav-link-desktop {
    @apply no-underline font-bold text-text text-sm transition-all duration-200 px-4 py-2 rounded-md hover:bg-green;
}

.nav-link-mobile {
    @apply no-underline text-red-900 text-text-muted font-medium text-base px-10 py-3 rounded-lg transition-all duration-200 hover:bg-gray-100 hover:text-text;
}

.btn-primary {
    @apply bg-green text-text font-bold border-none rounded-lg text-sm cursor-pointer no-underline transition-all duration-200 uppercase tracking-wide hover:bg-gradient-to-br hover:from-lime-500 hover:to-lime-600 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-lime-500/30;
}

.hero-section {
    @apply h-auto flex flex-col justify-center items-center text-center px-5 pt-24;
}

.container {
    @apply max-w-7xl mx-auto px-5;
}

.hero-title {
    @apply text-7xl text-text mb-4 font-bold;
}

.hero-paragraph {
    @apply text-2xl text-text-muted leading-relaxed text-center pt-5;
}

.hero-sub-paragraph {
    @apply text-lg text-text-muted max-w-2xl leading-relaxed pt-5;
}

.h2 {
    @apply text-5xl font-medium text-center pt-10;
}

.body {
    @apply h-auto flex flex-col justify-center items-center text-center px-5 pt-24;
}


.logos {
    @apply pt-[60px] bg-white whitespace-nowrap relative;
}

@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-right {
        align-items: flex-start;
        width: 100%;
    }

    .social-icons {
        justify-content: flex-start;
    }

    .footer-nav {
        flex-direction: column;
        gap: 10px;
    }

    .separator {
        display: none;
    }
}

.logos-slide {
    display: flex;
    animation: slide 20s linear infinite;
    gap: 40px;
}

.logo-ticker-image {
    height: 50px;
    width: 250px;
    flex-shrink: 0;
    object-fit: cover;
    margin-right: 40px; /* Folosim margin în loc de gap pentru control mai precis */
}

.logo-ticker-image:last-child {
    margin-right: 0; /* Eliminăm margin-ul de la ultima imagine */
}

.card-title {
    @apply text-2xl font-semibold text-text mb-4 text-left;
}

.card-subtitle {
    @apply font-semibold text-left;
}

.footer-green-text {
    @apply text-lg font-normal text-green;
}

.footer-line-between {
    @apply text-white font-bold;
}

.toc-content {
    @apply block py-2 px-3 text-sm text-gray-700 hover:bg-gray-100 rounded transition-colors font-semibold;
}

.toc-content:hover {
    @apply bg-green;
}

.card-image {
    @apply w-12 h-12 rounded-lg transform flex items-center justify-center bg-green items-center;
}

.grid-card {
    @apply bg-white rounded-2xl p-6 flex flex-col items-center text-center relative;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Calculăm exact: 8 imagini * (120px + 40px margin) = 1280px */
        transform: translateX(-1280px);
    }
}

.ticker-animation {
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.main-heading {
    @apply text-xl md:text-xl lg:text-5xl font-semibold text-text mb-8 leading-tight;
}

/* Varianta cu elipsă pentru text foarte lung */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Owl Carousel Logo Styles */
.owl-carousel .owl-item img {
    height: auto;
    width: auto;
    object-fit: cover;
    max-height: 100px;
    max-width: 200px; /* Optional: limit maximum width */
}

/* Ensure the carousel container has proper spacing */
.owl-carousel {
    padding: 20px 0;
}

.newsletter-submit-button {
    background: #D9FC67 !important;
    color: #222 !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 0.5rem !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    padding: 0.75rem 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    letter-spacing: 0.08em !important;
    transition: 
        background 0.2s,
        box-shadow 0.2s,
        transform 0.2s !important;
    box-shadow: 0 2px 8px 0 rgba(163, 230, 53, 0.15) !important;
}

.newsletter-submit-button:hover,
.newsletter-submit-button:focus {
    background: linear-gradient(90deg, #bef264 0%, #65a30d 100%) !important;
    box-shadow: 0 4px 16px 0 rgba(163, 230, 53, 0.25) !important;
    transform: translateY(-2px) scale(1.03) !important;
    color: #222 !important;
    text-decoration: none !important;
}

.newsletter-form .field-label {
    /* stiluri pentru label */
    color: #161616 !important;
    font-weight: bold !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}
.newsletter-form .wpforms-field-label,
.newsletter-form .wpforms-field-sublabel,
.newsletter-form .wpforms-required-label {
    color: white !important;
}

/* Checkbox label and title in newsletter form should be white */
.newsletter-form .wpforms-field-checkbox label,
.newsletter-form input[type='checkbox'] + label,
.newsletter-form .wpforms-field-checkbox .wpforms-field-label {
    color: white !important;
}

.newsletter-form div.wpforms-container-full:not(:empty) {
    margin: 0 !important;
}

/* Repoziționează asteriscul (*) pentru câmpurile de tip checkbox din formular */
.newsletter-form .wpforms-field-checkbox .wpforms-required-label {
    position: relative; /* Permite repoziționarea elementului */
    top: 33px;  
    left: 390px;        /* Coboară asteriscul. Modifică această valoare (ex: 28px, 30px) pentru alinierea perfectă. */
    display: inline-block; /* Asigură aplicarea corectă a transformărilor */
}

/* Clase pentru JavaScript */

.lang-en .newsletter-form .wpforms-field-checkbox .wpforms-required-label {
    left: 220px; 
}