/* ===================================================
   🔠 FONT-FACE DECLARATIONS (Bootstrap + FontAwesome)
   Acestea definesc fonturile iconografice folosite global.
   =================================================== */

@font-face {
    font-family: "bootstrap-icons";
    src: url("../vendor/bootstrap-icons/fonts/bootstrap-icons.woff2?e348531") format("woff2"),
         url("../vendor/bootstrap-icons/fonts/bootstrap-icons.woff?e348531") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    src: url("../vendor/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"),
         url("../vendor/fontawesome/webfonts/fa-brands-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}



/* ===================================================
   🧩 TAB NAVIGATION OPTIMIZATIONS
   Ajustează dimensiunea, comportamentul scrollului și aspectul taburilor.
   =================================================== */

/* 🔹 Tab buttons mai compacte + icon alignment */
.nav-tabs.small-tabs .nav-link {
    padding: 0.3rem 0.6rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

/* 🔹 Wrapper pentru taburi – permite scroll orizontal */
.nav-tabs-wrapper {
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    height: 3rem;
    display: flex;
    align-items: center;
}

/* 🔹 Ascunde scrollbar pe mobil */
.nav-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

/* 🔹 Forțează taburile pe un singur rând */
.nav-tabs {
    flex-wrap: nowrap !important;
}

/* 🔹 Setează fiecare tab să ocupe strict dimensiunea necesară */
.nav-tabs .nav-item {
    flex: 0 0 auto;
}

/* 🔹 Ajustează înălțimea și padding-ul taburilor */
.nav-tabs .nav-link {
    white-space: nowrap;
    line-height: 1.2;
    padding: 0.5rem 1rem;
}



/* ===================================================
   🔹 SITENAME (Text Logo) - ⚡ FLASH MESSAGES & NAVBAR FIXES
   Stil rafinat, potrivit pentru identitatea unui partid.
   Setări pentru mesaje de sistem și pentru poziționarea navbarului.
   =================================================== */

/* ========================= FIX: dropdown user ========================= */
@media (min-width: 1200px) {
  /* 🔹 Dropdownuri desktop - stilizare generală */
  .navmenu .dropdown > .dropdown-menu-custom {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .navmenu .dropdown > .dropdown-menu-custom li a {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    color: var(--nav-dropdown-color);
    transition: background 0.3s;
  }

  .navmenu .dropdown > .dropdown-menu-custom li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--nav-dropdown-hover-color);
  }

  /* 🔹 Dropdownurile din dreapta - nu ies din ecran */
  .navmenu > ul > li:last-child .dropdown-menu-custom,
  .navmenu > ul > li:nth-last-child(2) .dropdown-menu-custom {
    left: auto !important;
    right: 0 !important;
    transform-origin: top right;
  }
}




/* ===================================================
   🖼️ Logo Navbar Hover Effect
   =================================================== */
.header .logo img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.header .logo img:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.header .logo .sitename {
  font-size: 24px;                  /* mai mic, echilibrat vizual */
  font-weight: 400;                 /* nu foarte gros, dar ferm */
  margin: 0;
  line-height: 1.1;
  color: #ffffff;                   /* alb curat pe fundalul închis */
  font-family: "Merriweather", "Georgia", serif;
  letter-spacing: 0.5px;            /* mai subtilă */
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: inline-block;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.header .logo .sitename:hover {
  color: #1acc8d;                   /* verde accent Bootslander */
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* 🔹 Efect pe scroll – contrast ușor ajustat */
.scrolled .header .logo .sitename {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ===================================================
   📱 Responsive adjustments
   =================================================== */

/* Laptopuri mici / tablete mari */
@media (max-width: 992px) {
  .header .logo .sitename {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.4px;
  }
}

/* Tablete / telefoane mari */
@media (max-width: 768px) {
  .header .logo .sitename {
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Telefoane medii și mici */
@media (max-width: 576px) {
  .header .logo .sitename {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: none;
  }
}

/* Telefoane foarte mici (<400px) */
@media (max-width: 400px) {
  .header .logo .sitename {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
  }
}


/* 🔹 Mesajele flash (alerts) - se pare ca este in plus si nu modifica nimic - de sters
.important-messages {
    margin-top: 0 !important;
    padding-top: 0.5rem;
}*/

/* 🔹 Fix pentru navbar sub bara informativă */
#header {
    top: 64px;
    transition: top 0.3s ease;
}

/* 🔹 Când bara informativă e ascunsă, navbarul urcă sus */
.header-no-topbar #header {
    top: 0;
}



/* ===================================================
   🌈 HORIZONTAL SOLID COLOR DIVIDERS
   Linii decorative pline, în culorile originale Bootstrap,
   pentru separarea vizuală între secțiuni sau carduri.
   =================================================== */

/* --- Left-start solid horizontal rules --- */
.hr-start-green {
  height: 2px;
  background: linear-gradient(to right, #198754, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-start-blue {
  height: 2px;
  background: linear-gradient(to right, #0d6efd, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-start-red {
  height: 2px;
  background: linear-gradient(to right, #dc3545, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-start-orange {
  height: 2px;
  background: linear-gradient(to right, #fd7e14, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-start-purple {
  height: 2px;
  background: linear-gradient(to right, #6f42c1, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-start-gray {
  height: 2px;
  background: linear-gradient(to right, #6c757d, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

/* --- Centrally solid horizontal rules --- */
.hr-center-green {
  height: 2px;
  background: linear-gradient(to right, transparent, #198754, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-center-blue {
  height: 2px;
  background: linear-gradient(to right, transparent, #0d6efd, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-center-red {
  height: 2px;
  background: linear-gradient(to right, transparent, #dc3545, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-center-orange {
  height: 2px;
  background: linear-gradient(to right, transparent, #fd7e14, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-center-purple {
  height: 2px;
  background: linear-gradient(to right, transparent, #6f42c1, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-center-gray {
  height: 2px;
  background: linear-gradient(to right, transparent, #6c757d, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

/* --- Right-end solid horizontal rules --- */
.hr-end-green {
  height: 2px;
  background: linear-gradient(to left, #198754, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-end-blue {
  height: 2px;
  background: linear-gradient(to left, #0d6efd, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-end-red {
  height: 2px;
  background: linear-gradient(to left, #dc3545, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-end-orange {
  height: 2px;
  background: linear-gradient(to left, #fd7e14, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-end-purple {
  height: 2px;
  background: linear-gradient(to left, #6f42c1, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}

.hr-end-gray {
  height: 2px;
  background: linear-gradient(to left, #6c757d, transparent);
  margin: 1rem 0;
  border-radius: 2px;
}




/* ===================================================
   🎨 HEADING COLOR UTILITIES – LIGHT VARIANTS
   Paletă coerentă de culori vii și lizibile pentru titluri.
   =================================================== */

/* Albastru luminos – primar, modern, curat */
h1.h-blue, h2.h-blue, h3.h-blue, h4.h-blue, h5.h-blue, h6.h-blue {
  color: #2d2bff !important; /* Albastru deschis vibrant */
}

/* Verde proaspăt – pentru secțiuni pozitive, rezultate, ecologie */
h1.h-green, h2.h-green, h3.h-green, h4.h-green, h5.h-green, h6.h-green {
  color: #28c76f !important; /* Verde smarald luminos */
}

/* Portocaliu energic – pentru inițiativă, dinamism, acțiune */
h1.h-orange, h2.h-orange, h3.h-orange, h4.h-orange, h5.h-orange, h6.h-orange {
  color: #ff8c1a !important; /* Portocaliu cald și vizibil */
}

/* Roșu luminos – pentru acțiuni, pasiune, avertizări subtile */
h1.h-red, h2.h-red, h3.h-red, h4.h-red, h5.h-red, h6.h-red {
  color: #ff4d4d !important; /* Roșu clar, ușor pastel */
}

/* Violet deschis – pentru valori, tradiție, spiritualitate */
h1.h-purple, h2.h-purple, h3.h-purple, h4.h-purple, h5.h-purple, h6.h-purple {
  color: #9a5dff !important; /* Violet luminos, elegant */
}

/* Turcoaz deschis – pentru tehnologie, inovație, viitor */
h1.h-cyan, h2.h-cyan, h3.h-cyan, h4.h-cyan, h5.h-cyan, h6.h-cyan {
  color: #2ad9d9 !important; /* Cyan strălucitor, clar */
}

/* Gri rafinat – pentru subtitluri, ton neutru */
h1.h-gray, h2.h-gray, h3.h-gray, h4.h-gray, h5.h-gray, h6.h-gray {
  color: #8d99ae !important; /* Gri-albastru rafinat, lizibil */
}

/* Auriu luminos – pentru elemente patriotice sau simbolice */
h1.h-gold, h2.h-gold, h3.h-gold, h4.h-gold, h5.h-gold, h6.h-gold {
  color: #ffcc33 !important; /* Auriu curat, ușor pastel */
}

/* Alb pur – pentru texte pe fundal întunecat */
h1.h-white, h2.h-white, h3.h-white, h4.h-white, h5.h-white, h6.h-white {
  color: #ffffff !important; /* Alb curat */
}





/* ===================================================
   📬 NEWSLETTER FORM STYLES
   Stiluri pentru formularele de abonare din footer.
   =================================================== */

.footer .newsletter-form input[type="submit"].small-btn {
    padding: 6px 14px; /* mai mic decât default */
    font-size: 14px;
}

/* 🔹 Fix pentru multiple inputuri (email + nume) în același rând */
.footer .newsletter-form input[type="text"],
.footer .newsletter-form input[type="email"] {
    border: 0;
    padding: 10px;
    width: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* 🔹 Placeholder mai vizibil pe fundal închis */
.footer .newsletter-form input[type="text"]::placeholder,
.footer .newsletter-form input[type="email"]::placeholder {
    color: #ddd;
}




/* ===================================================
   🟩 OFFCANVAS BUTTON STYLES
   Stiluri personalizate pentru butonul de deschidere offcanvas.
   =================================================== */

.btn-offcanvas {
    background-color: #198754; /* verde Bootstrap (success) */
    color: #fff;
    transition: all 0.3s ease;
}

.btn-offcanvas:hover {
    background-color: #0d6efd; /* albastru Bootstrap (primary) */
    color: #fff;
}




/* ===================================================
   🎯 HERO-HOME TEXT ADJUSTMENTS
   Dimensiuni ușor reduse față de valorile originale din main.css,
   + două media suplimentare pentru telefoane mici.
   =================================================== */

/* Desktop și ecrane mari */
.hero h1 {
  font-size: 46px;       /* -2px față de 48px original */
  line-height: 54px;     /* -2px față de 56px original */
}

.hero p {
  font-size: 21px;       /* -1px față de 22px original */
  line-height: 28px;     /* mai armonios cu titlul */
}

/* 🔹 Media existentă (max-width: 640px) – doar ușor ajustată */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 27px;
    line-height: 34px;
  }

  .hero p {
    font-size: 17px;
    line-height: 24px;
  }
}

/* 🔹 Nou: telefoane mici (max-width: 480px) */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .hero p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* 🔹 Nou: telefoane foarte mici (max-width: 360px) */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 22px;
    line-height: 28px;
  }

  .hero p {
    font-size: 15px;
    line-height: 20px;
  }
}




/* ===================================================
   🌊 HERO-PAGES (Compact Internal Page Header)
   Versiune mai joasă + gradient subtil + valuri animate.
   =================================================== */

/* ===================================================
   🖼️ HERO-IMG (Logo decorativ în secțiunea principală)
   =================================================== */
.hero-img img {
  max-width: 384px;     /* desktop și monitoare mari */
  height: auto;
  display: inline-block;
}

/* Laptopuri și tablete mari */
@media (max-width: 1200px) {
  .hero-img img {
    max-width: 320px;
  }
}

/* Tablete medii */
@media (max-width: 992px) {
  .hero-img img {
    max-width: 280px;
  }
}

/* Tablete mici / telefoane mari */
@media (max-width: 768px) {
  .hero-img img {
    max-width: 220px;
  }
}

/* Telefoane medii */
@media (max-width: 576px) {
  .hero-img img {
    max-width: 180px;
  }
}

/* Telefoane mici (<400px) */
@media (max-width: 400px) {
  .hero-img img {
    max-width: 150px;
  }
}

.hero-pages {
  position: relative;
  background: linear-gradient(180deg, #06004a 0%, #0b066a 100%);
  color: #fff;
  padding: 60px 0 30px 0; /* mai mic decât hero principal */
  text-align: center;
  overflow: hidden;
}

.hero-pages h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-pages p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

/* ===== Breadcrumbs (compact + integrate) ===== */
.hero-pages .breadcrumbs {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  z-index: 2;
  position: relative;
  font-size: 0.75rem;
}

/* ===== Breadcrumb fix pentru titluri lungi ===== */
.hero-pages .breadcrumbs ol {
  justify-content: flex-start;
  padding-left: 0 !important;  /* elimină indentarea implicită */
  margin-left: 0 !important;   /* asigură alinierea perfectă la container */
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-pages .breadcrumbs li {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-pages .breadcrumbs li.current {
  display: inline-block;
  max-width: 75%; /* limitează titlul lung */
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.hero-pages .breadcrumbs a {
  color: var(--accent-color, #00d17a);
  text-decoration: none;
}

.hero-pages .breadcrumbs .current {
  color: #fff;
}

@media (max-width: 768px) {
  .hero-pages .breadcrumbs li.current {
    max-width: 100%;
  }
}


/* ===== Waves under hero-pages ===== */
.hero-pages-waves {
  display: block;
  width: 100%;
  height: 45px; /* mai scurte decât hero principal */
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  line-height: 0;
  margin-bottom: -2px; /* elimină bara întunecată */
}

.hero-pages-waves .wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color, #fff);
  opacity: 0.6;
}

.hero-pages-waves .wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color, #fff);
  opacity: 0.4;
}

.hero-pages-waves .wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color, #fff);
}

/* ===== Wave animation (same as hero original) ===== */
@keyframes move-forever1 {
  0% { transform: translate(85px, 0%); }
  100% { transform: translate(-90px, 0%); }
}
@keyframes move-forever2 {
  0% { transform: translate(-90px, 0%); }
  100% { transform: translate(85px, 0%); }
}
@keyframes move-forever3 {
  0% { transform: translate(-90px, 0%); }
  100% { transform: translate(85px, 0%); }
}

/* Tablete mari și până la laptopuri mici */
@media (max-width: 992px) {
  .hero-pages h1 {
    font-size: 1.6rem !important;
    line-height: 1.2;
  }
}

/* Tablete și telefoane mari */
@media (max-width: 768px) {
  .hero-pages {
    padding: 40px 0 20px 0;
  }
  .hero-pages h1 {
    font-size: 1.3rem !important;
    line-height: 1.15;
  }
  .hero-pages p {
    font-size: 0.95rem;
  }
}

/* Telefoane medii */
@media (max-width: 576px) {
  .hero-pages h1 {
    font-size: 1.1rem !important;
    line-height: 1.1;
  }
}

/* Telefoane mici */
@media (max-width: 400px) {
  .hero-pages h1 {
    font-size: 1rem !important;
    line-height: 1.05;
  }
}