/* ITM Header Replace - Full CSS
   Ruta: /wp-content/plugins/itm-header-replace/assets/css/itm-replace.css
   Contiene: estilos de header, menú, submenus, hero fullscreen, ticker de noticias,
   reglas móviles y seguridad para ocultar UI móvil si está deshabilitada por JS.
*/

/* ---------- Reset / Utilities ---------- */
.itm-replace-header, .itm-replace-header * { box-sizing: border-box; }

/* ---------- Header base ---------- */
.itm-replace-header {
  width: 100%;
  background: #ffffff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(6,35,44,0.06);
  z-index: 140000;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
}

/* ---------- Container / Layout ---------- */
.itm-header-inner {
  max-width: none !important;
  width: auto !important;
  margin: 0 auto;
  padding: 12px 80px; /* lateral padding aumentado (ajusta si necesario) */
  display:flex;
  flex-direction:column;
  gap:10px;
}

.itm-header-top {
  display:flex;
  align-items:center;
  gap:18px;
}

/* ---------- Logo ---------- */
.itm-logo { display:flex; align-items:center; min-width:220px; }
.itm-logo img { max-height:64px; height:auto; display:block; }

/* ---------- Header right (news + CTA) ---------- */
.itm-header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }

.itm-news {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:#29454f;
}
.itm-news-label { color:#0b5567; font-weight:700; margin-right:6px; }

/* CTA button */
.itm-cta .itm-btn {
  display:inline-block;
  background: linear-gradient(90deg,#0e84b8,#0b6ea0);
  color:#fff;
  padding:9px 14px;
  border-radius:8px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(3,88,120,0.12);
  transition:transform .12s ease;
}
.itm-cta .itm-btn:hover { transform:translateY(-2px); }

/* ---------- Nav area ---------- */
.itm-header-nav-area {
  margin-top: 0;
  background: linear-gradient(180deg, rgba(1,43,72,0.96) 0%, rgba(1,43,72,0.86) 100%);
  padding:8px 18px;
  position:relative;
  border-radius:2px;
  overflow: visible;
  z-index: 140001;
}

/* ---------- Menu list (desktop) ---------- */
.itm-replace-menu {
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:center;
  align-items:center;
}
.itm-replace-menu > li { position:relative; z-index: 140002; }

/* Menu links - white typography */
.itm-replace-menu a {
  color: #ffffff !important;       /* texto blanco */
  text-decoration:none;
  font-weight:700;
  padding:8px 6px;
  display:inline-block;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.02em;
  transition: color .14s ease, transform .08s ease, background .14s ease;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 1;
}

/* Hover / active */
.itm-replace-menu a:hover,
.itm-replace-menu li.current-menu-item > a {
  background: linear-gradient(90deg,#2ea7df,#0e84b8);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Slidebar indicator (desktop) */
#itmhr-slidebar {
  height: 3px;
  background: linear-gradient(90deg,#2ea7df,#0e84b8);
  border-radius:3px;
  position:absolute;
  bottom: 6px;
  transition: left .18s ease, width .18s ease;
  will-change: left, width;
  pointer-events:none;
  z-index: 140003;
}

/* ---------- Submenus (dark background, white text) ---------- */
/* reset bullets */
.itm-replace-menu li ul,
.itm-replace-menu li ul ul {
  list-style:none !important;
  margin:0 !important;
  padding:8px 0 !important;
}

/* default: centered fallback using left:50% + translate */
.itm-replace-menu li ul {
  display:block !important;
  visibility:hidden !important;
  opacity:0 !important;
  transform: translate(-50%, 6px) !important; /* centered fallback */
  transition: opacity .12s ease, transform .12s ease, visibility .01s linear .01s;
  position:absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform-origin: top center;
  min-width:220px !important;
  background: linear-gradient(180deg,#0b3b4b,#06323b) !important; /* oscuro */
  color: #ffffff !important;
  box-shadow:0 18px 40px rgba(4,20,30,0.18) !important;
  border-radius:8px !important;
  z-index:350000 !important;
  pointer-events:none !important;
}

/* If JS positions submenu, remove transform to use pixel left */
.itm-replace-menu li ul[data-positioned="true"] { transform: none !important; }

/* submenu items */
.itm-replace-menu li ul li { padding:6px 0 !important; margin:0 !important; }
.itm-replace-menu li ul a {
  color:#ffffff !important;
  text-transform:none;
  font-weight:600;
  display:block;
  padding:8px 18px;
}

/* submenu hover focus */
.itm-replace-menu li ul a:hover,
.itm-replace-menu li ul a:focus {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
}

/* JS visibility class */
.itm-replace-menu li.show-sub > ul {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, 0) !important; /* fallback */
  pointer-events: auto !important;
}

/* hover fallback */
@media (hover: hover) and (pointer: fine) {
  .itm-replace-menu li:hover > ul, .itm-replace-menu li:focus-within > ul {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translate(-50%, 0) !important;
    pointer-events: auto !important;
  }
}

/* overflow alignment helpers (added by JS if needed) */
.itm-replace-menu li ul.itm-align-left { left: 0 !important; transform: none !important; }
.itm-replace-menu li ul.itm-align-right { right: 0 !important; left: auto !important; transform: none !important; }

/* ---------- Accessibility focus ---------- */
.itm-replace-menu a:focus { outline: 3px solid rgba(47,127,160,0.12); outline-offset:3px; }

/* ---------- Shrink behavior (on scroll) ---------- */
.itm-scrolled .itm-replace-header { padding-top:6px !important; padding-bottom:6px !important; box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.itm-scrolled .itm-logo img { max-height:48px; }

/* ---------- HERO full-bleed class (used by JS) ---------- */
.itm-hero-fullscreen {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: none !important;
  display:block !important;
  overflow:hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  padding: 0 !important;
  min-height: calc(100vh - var(--itm-header-offset, 0px)) !important;
  height: calc(100vh - var(--itm-header-offset, 0px)) !important;
}
.itm-hero-fullscreen img, .itm-hero-fullscreen video { width:100% !important; height:100% !important; object-fit:cover !important; }

/* ---------- NEWS TICKER (rotator) ---------- */
/* container inside header */
.itm-news-ticker-wrapper {
  display:inline-block;
  vertical-align:middle;
  overflow:hidden;
  height: 20px; /* one-line height - adjust if needed */
  line-height: 20px;
  max-width: 520px;
}
.itm-news-ticker {
  display:block;
  transform: translateY(0);
  transition: transform 400ms ease;
}
.itm-news-item {
  height: 20px;
  display:flex;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
}
.itm-news-link {
  color:#0b4a5b;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
  padding:0 6px;
}
.itm-news-link:hover { text-decoration:underline; color:#08333b; }
.itm-news-link:focus { outline: 2px solid rgba(14,132,184,0.18); outline-offset:2px; }

/* responsive ticker sizes */
@media (max-width: 900px) {
  .itm-news-ticker-wrapper { max-width: 220px; height: 22px; line-height:22px; }
  .itm-news-item { height:22px; }
}

/* ---------- Mobile rules (menu becomes stacked) ---------- */
@media (max-width:900px){
  .itm-header-inner { padding:12px 18px; }
  .itm-header-top { flex-wrap:wrap; gap:10px; }
  .itm-header-right { margin-left:0; width:100%; justify-content:flex-end; }
  .itm-header-nav-area { padding:8px 12px; }
  .itm-replace-menu { flex-direction:column; gap:6px; align-items:flex-start; padding-left:8px; }
  .itm-replace-menu a { color: #ffffff !important; }
  .itm-replace-menu li ul {
    position:relative !important;
    top:0 !important;
    left:0 !important;
    transform:none !important;
    box-shadow:none !important;
    min-width:100% !important;
    width:100% !important;
    padding-left:12px !important;
    display:none !important;
    visibility: visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    background: linear-gradient(180deg,#0b3b4b,#06323b) !important;
  }
  .itm-replace-menu li.itm-open > ul { display:block !important; }
  .itm-replace-menu li > a + .itm-sub-toggle { display:inline-block; }
  #itmhr-slidebar { display:none; }
}

/* ---------- Mobile overlay menu styles (defined but by default hidden) ---------- */
.itm-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.itm-mobile-overlay .itm-mobile-menu-clone {
  width: 92%;
  max-width: 420px;
  background: linear-gradient(180deg,#0b3b4b,#06323b);
  color: #fff;
  margin: 28px auto;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.itm-mobile-overlay .itm-mobile-menu-clone .itm-replace-menu { flex-direction: column; gap: 6px; padding: 0; }
.itm-mobile-overlay .itm-mobile-menu-clone .itm-replace-menu a {
  display:block;
  padding: 14px 12px;
  font-size: 16px;
  color: #fff !important;
  background: transparent;
  border-radius: 6px;
  font-weight: 700;
}
.itm-mobile-toggle {
  background: transparent;
  border: 0;
  font-size: 20px;
  padding: 8px 10px;
  cursor: pointer;
  color: #06323b;
  border-radius: 6px;
  box-shadow: none;
}
@media (max-width: 899px){
  .itm-mobile-toggle { position: absolute; right: 18px; top: 12px; z-index: 140010; }
  .itm-header-inner { padding: 12px 48px; } /* leave room for hamburger */
  .itm-mobile-overlay .itm-mobile-menu-clone .itm-replace-menu li ul { position: relative !important; background: transparent !important; box-shadow: none !important; padding-left: 12px !important; display: none !important; }
  .itm-mobile-overlay .itm-mobile-menu-clone .itm-replace-menu li.itm-open > ul { display:block !important; }
}

/* ---------- Small helpers ---------- */
.itm-sub-toggle { margin-left:8px; background:transparent; border:0; font-size:14px; cursor:pointer; color:inherit; }
.itm-sub-toggle .itm-caret { pointer-events:none; }

/* ---------- Force hide mobile UI by default (safety) ---------- */
/* These selectors ensure the mobile toggle/overlay/clone stay hidden unless JS explicitly enables them. */
#itm-mobile-toggle,
.itm-mobile-overlay,
.itm-mobile-menu-clone {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* explicit override safety */
html.itm-mobile-open .itm-mobile-overlay { display: none !important; visibility: hidden !important; }

/* ---------- End of file ---------- */