/* ===================================================
   🔠 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;
}




/* ===================================================
   🌈 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 */
}




/* ===================================================
   🟩 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;
}




/* ======================================================
   ✅ NAVBAR - Dropdownuri deschise pe CLICK (desktop + mobil)
   ====================================================== */

/* --- Desktop --- */
@media (min-width: 1200px) {

  /* Dezactivăm hover */
  .navmenu .dropdown:hover > ul {
    opacity: 0 !important;
    top: 130% !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Click activează dropdownul */
  .navmenu .dropdown.dropdown-active > ul {
    opacity: 1 !important;
    top: 100% !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: all 0.3s ease-in-out;
  }

  /* Efect vizual la săgeată */
  .navmenu .dropdown.dropdown-active > a i {
    transform: rotate(180deg);
    transition: 0.3s;
  }
}

/* --- Mobile --- */
@media (max-width: 1199px) {
  /* Asigurăm afișarea submeniului */
  .navmenu .dropdown.dropdown-active > ul {
    display: block !important;
    transition: all 0.4s ease-in-out;
  }

  /* Efect de rotație săgeată */
  .navmenu .dropdown.dropdown-active > a i {
    transform: rotate(180deg);
  }

  /* Permitem click pe întreg linkul (nu doar pe săgeată) */
  .navmenu .dropdown > a {
    cursor: pointer;
  }

  /* Prevenim blocarea clickului */
  .navmenu .dropdown > a span,
  .navmenu .dropdown > a i {
    pointer-events: none;
  }

  /* Submeniurile secundare (dropdown în dropdown) */
  .navmenu .dropdown .dropdown.dropdown-active > ul {
    display: block !important;
    margin-left: 10px;
    border-left: 2px solid rgba(0,0,0,0.05);
  }
}

/* ======================================================
   ✅ NAVBAR - Corectare aliniere iconuri + text
   ====================================================== */

/* Toate linkurile din meniu: icon + text împreună, nu separate */
.navmenu a,
.navmenu .dropdown ul a {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: left !important;
}

/* Iconurile mai aproape de text */
.navmenu a i {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Dropdownurile pe mobil - fără padding excesiv */
@media (max-width: 1199px) {
  .navmenu .dropdown ul a {
    padding: 8px 16px !important;
  }
}

/* Doar săgeata (ultima icoană din <a>) se rotește */
.navmenu .dropdown.dropdown-active > a i.toggle-dropdown {
  transform: rotate(180deg);
  transition: 0.3s;
}

/* Prevenim rotația altor iconuri din link */
.navmenu .dropdown > a i:not(.toggle-dropdown) {
  transform: none !important;
}




/* ======================================================
   ✅ TOP INFO BAR - Modern, responsiv & ZenBlog-friendly
   ====================================================== */

.top-info-bar {
  background: #0C1E3B;
  color: #FFD25A;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-info-bar .container {
  max-width: 1320px;
}

.top-info-bar a {
  color: #FFD25A;
  text-decoration: none;
  transition: color 0.3s ease;
}

.top-info-bar a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 🔸 Subbar (mesaje dinamice) */
.top-info-bar .info-subbar {
  background: color-mix(in srgb, #0C1E3B 90%, black 10%);
}

.top-info-bar .info-subbar span,
.top-info-bar .info-subbar a {
  font-size: 0.85rem;
  color: #FFF;
}

/* 🔸 Mică animație pentru iconuri */
.top-info-bar .date-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 🔸 Responsive tweaks */
@media (max-width: 768px) {
  .top-info-bar {
    font-size: 0.8rem;
    text-align: center;
  }
  .top-info-bar .container {
    flex-direction: column !important;
    gap: 4px;
  }
  .top-info-bar .info-subbar {
    text-align: center;
  }
}

.top-info-bar {
  animation: fadeInTop 0.6s ease forwards;
}
@keyframes fadeInTop {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}