/* ==========================================================================
   Elsaco - overlay responsive (aditiv). Se incarca DUPA styles.css.
   Nu modifica styles.css. Mobile-first prin max-width (desktop neschimbat).
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
img, iframe, embed, object, video { max-width: 100%; height: auto; }
#content img, .centerContent img, .theContent img { height: auto; }
table { max-width: 100%; }

/* hamburger: ascuns pe desktop */
#mobileNavToggle { display: none; }

/* ==========================================================================
   <= 1000px : containerele fixe devin fluide
   ========================================================================== */
@media (max-width: 1000px) {
  #header-area, #nav-container, #content-area, #content, #footer-area,
  #footer-container, #footer-navigation, .navTop, .banner {
    width: auto !important;
    max-width: 980px !important;
    box-sizing: border-box;
  }
  #header-area, #content-area, #footer-area {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .centerContent { width: auto !important; }

  /* banner: imaginea si textul (absolute) devin statice si fluide */
  .banner { height: auto !important; }
  .banner img { position: static !important; width: 100%; height: auto; }
  .banner p {
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important; color: #0033a0; padding: 8px 0;
  }
  .banner p span { border-left: 0; }
}

/* ==========================================================================
   <= 800px : navigatie mobila (hamburger) + coloane stivuite
   ========================================================================== */
@media (max-width: 800px) {

  /* --- bara de sus: logo + social + limba, centrate/stivuite --- */
  .navTop { height: auto !important; overflow: visible !important; text-align: center; padding: 12px 15px !important; }
  #logo { float: none !important; margin: 0 auto 10px !important; width: 200px !important; height: auto !important; }
  #logo img { margin: 0 auto; max-width: 200px; }
  .topLinks { float: none !important; width: auto !important; height: auto !important; }
  #socialLinks { float: none !important; display: inline-flex; gap: 12px; justify-content: center; padding: 0; }
  .navTop .selecteaza { float: none !important; display: inline-block; margin: 10px auto 0; }

  /* --- buton hamburger --- */
  #nav-container { height: auto !important; }
  #primary-navigation { position: relative; float: none !important; width: auto !important; }
  #mobileNavToggle {
    display: block; width: 100%; box-sizing: border-box;
    background: #0033a0; color: #fff; border: 0;
    padding: 14px 16px; font-size: 20px; line-height: 1; text-align: left; cursor: pointer;
  }

  /* meniul: ascuns implicit, vizibil cand #primary-navigation are clasa .open */
  .menu { float: none !important; height: auto !important; position: static !important; }
  .menu > ul { display: none; float: none !important; margin: 0; padding: 0; }
  #primary-navigation.open .menu > ul {
    display: block; background: #ffffff;
    box-shadow: 0 6px 10px rgba(0,0,0,0.18); border-bottom: 2px solid #0033a0;
  }

  .menu ul, .menu ul li {
    float: none !important; height: auto !important; width: auto !important; margin: 0 !important;
  }
  .menu > ul > li { border-bottom: 1px solid #e5e5e5; }

  /* item de nivel 1: dezvaluie textul din <i>, scoate sprite-ul + latimea fixa */
  .menu ul li a {
    display: block !important; width: auto !important; height: auto !important;
    background-image: none !important; padding: 12px 16px !important;
    color: #0033a0 !important; font-size: 16px; line-height: 1.3;
  }
  .menu ul li a i { display: inline !important; font-style: normal; }

  /* mega-dropdown -> lista statica de linkuri, fara blocul promo */
  .ddMenu, .ddMenu.ddm02, .ddMenu.ddm04, .ddMenu.ddm05, .ddMenu.ddm06, .ddMenu.double {
    position: static !important; width: auto !important; overflow: visible !important;
    border: 0 !important; background: #f4f4f4 !important; top: auto !important;
  }
  .ddMenu .ddMenuList, .ddMenu.double .ddMenuList {
    float: none !important; width: auto !important; background: #f4f4f4 !important;
    padding: 4px 16px 12px 30px !important;
  }
  .ddMenu.double .ddMenuList ul { float: none !important; padding: 0 !important; }
  .ddMenu .ddMenuExtra { display: none !important; }
  .ddMenu .ddMenuList ul { float: none !important; }
  .ddMenu .ddMenuList ul li a {
    background-image: none !important; padding: 6px 0 !important;
    display: block !important; font-size: 14px; color: #404040 !important;
  }
  .ddMenu .ddMenuList p, .ddMenu .ddMenuList .ddMenuText { padding: 4px 0 !important; }

  /* search in meniu */
  .sfWrapper {
    position: static !important; display: block !important; width: auto !important;
    padding: 10px 16px !important; background: #f4f4f4; box-sizing: border-box;
  }
  .sfWrapper #searchform { display: flex; gap: 6px; }
  .sfWrapper #s { flex: 1 1 auto; padding: 8px; box-sizing: border-box; }

  /* --- continut: coloanele (sidebar + content) se stivuiesc --- */
  #sidebarLeft {
    float: none !important; width: auto !important; border-right: 0 !important; margin: 0 0 10px !important;
  }
  .centerContent {
    float: none !important; width: auto !important; padding: 12px 0 24px !important; margin: 0 !important;
  }

  /* --- footer --- */
  #footer-container { padding: 15px !important; }
  #footer-navigation { width: auto !important; }
  #footer-navigation ul { padding: 0; }
  #footer-navigation ul li { float: none !important; display: block; margin: 0 0 6px; }
  .footer-extra { float: none !important; }
}

/* ==========================================================================
   HOMEPAGE (design custom: hero + carusel video + hartifooter)
   ========================================================================== */
@media (max-width: 1000px) {
  /* hero: din 380px + padding 500px dreapta (overflow) -> fluid */
  .homeContent {
    width: auto !important; height: auto !important; padding: 24px 15px !important;
    box-sizing: border-box;
  }
  .homeContent h1, .homeContent h2, .homeContent h3, .homeContent .homeTitle {
    width: auto !important; font-size: 28px !important; line-height: 1.15 !important;
  }
  .homeContent p { width: auto !important; }
  /* sectiunea de jos: din 980x200 fix -> fluida, inaltime auto */
  .homeFooter { width: auto !important; height: auto !important; border-top: 0 !important; }
}
@media (max-width: 800px) {
  /* carusel video: 4x25% -> 2x50% */
  #vlq-home-videos-container .vlq-row .vlq-column { width: 50% !important; box-sizing: border-box; }
  /* blocurile din homeFooter (fiecare <=250px, cu pini absoluti intacti) se stivuiesc centrat */
  .homeFooter > div, .pint, .projectsRo, .cda, .homePress {
    float: none !important; display: block !important; margin: 0 auto 28px !important;
  }
}
@media (max-width: 480px) {
  body { font-size: 15px; }
  .centerContent h1 { font-size: 22px; line-height: 1.2; }
  .centerContent h3 { font-size: 18px; }
  .homeContent h1, .homeContent h2, .homeContent h3, .homeContent .homeTitle { font-size: 22px !important; }
  #vlq-home-videos-container .vlq-row .vlq-column { width: 100% !important; }
}