/* ============================================================
 * USE Theme — header.css
 * Three layouts: app, classic, centered. Plus mobile drawer.
 * Uses --use-* tokens; falls back to neutral defaults.
 * ============================================================ */

@layer components {

.use-header {
  --uh-bg:      var(--use-color-bg, #ffffff);
  --uh-fg:      var(--use-color-text, #0f172a);
  --uh-link:    var(--uh-fg);
  --uh-muted:   var(--use-color-muted, #64748b);
  --uh-border:  rgba(15, 23, 42, .08);
  --uh-accent:  var(--use-color-primary, #2563eb);
  --uh-shadow:  0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.04);
  --uh-h:       64px;

  position: relative; z-index: 50;
  background: var(--uh-bg); color: var(--uh-fg);
  border-bottom: 1px solid var(--uh-border);
  transition: background .2s ease, box-shadow .2s ease, padding .2s ease;
}

.use-header.is-sticky { position: sticky; top: 0; }

/* Default sticky-on-scroll: solid-ish backdrop derived from --uh-bg. */
.use-header.is-sticky[data-use-scrolled] {
  box-shadow: var(--uh-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--uh-bg) 92%, transparent);
}

/* Transparent (0%) — fully see-through, no scroll repaint. */
.use-header.is-transparent,
.use-header.is-transparent.is-sticky[data-use-scrolled] {
  background: transparent !important;
  border-bottom-color: transparent;
}
.use-header.is-transparent.is-sticky[data-use-scrolled] {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
}

/* Glass (50%) — semi-transparent with strong blur. Inline style supplies
   the actual color-mix() background; we only ensure the blur is present. */
.use-header.is-glass {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(15, 23, 42, .06);
}

/* Translucent (80%) — softer blur, almost solid. */
.use-header.is-translucent {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.use-header.is-shrink[data-use-scrolled] {
  --uh-h: 56px;
}

.use-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--uh-h);
  width: 100%; max-width: var(--use-container-max, 1280px);
  margin-inline: auto;
  padding: .5rem var(--use-container-px, 1rem);
}

.use-header__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit; font-weight: 700;
  letter-spacing: -.01em;
}
.use-header__title { font-size: 1.05rem; }
.use-header__logo { max-height: 36px; width: auto; }

.use-header__nav {
  flex: 1; display: flex; justify-content: flex-start;
  margin-left: 1.5rem;
}
.use-header__menu {
  display: flex; gap: .25rem; padding: 0; margin: 0; list-style: none;
  flex-wrap: wrap;
}
.use-header__menu li { list-style: none; }
.use-header__menu a {
  display: inline-flex; align-items: center;
  padding: .5rem .8rem; border-radius: 8px;
  text-decoration: none; color: var(--uh-link);
  font-size: .92rem;
  font-weight: var(--uh-link-weight, 500);
  font-style: var(--uh-link-style, normal);
  transition: background .15s ease, color .15s ease, text-decoration-color .15s ease;
}
.use-header__menu a:hover,
.use-header__menu .current-menu-item > a {
  background: rgba(15, 23, 42, .06);
  color: var(--uh-accent);
}

/* ── Desktop dropdowns ───────────────────────────────────────────────
 * Los items con hijos esconden su <ul.sub-menu> y lo revelan al hover
 * o focus-within. Chevron animado en el padre para indicar que hay más.
 * Mobile (≤800px) sobreescribe esto para usar accordion en el drawer.
 */
.use-header__menu .menu-item-has-children {
  position: relative;
}
.use-header__menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: .35rem;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transform: translateY(1px);
  transition: transform .2s ease, opacity .2s ease;
}
.use-header__menu .menu-item-has-children:hover > a::after,
.use-header__menu .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg) translateY(-1px);
  opacity: 1;
}
.use-header__menu .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--use-color-surface, #fff);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 50;
}
.use-header__menu .menu-item-has-children:hover > .sub-menu,
.use-header__menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s;
}
.use-header__menu .sub-menu li { list-style: none; }
.use-header__menu .sub-menu a {
  display: block;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .88rem;
  white-space: nowrap;
}
/* Si el dropdown está cerca del borde derecho, se ancla por la derecha. */
.use-header__menu .menu-item-has-children:last-child > .sub-menu,
.use-header__menu .menu-item-has-children.is-edge-right > .sub-menu {
  left: auto;
  right: 0;
}
/* Sub-sub-menus (nivel 3): aparecen al lado derecho del item padre. */
.use-header__menu .sub-menu .menu-item-has-children > .sub-menu {
  top: -.4rem;
  left: 100%;
  margin-left: .25rem;
  transform: translateX(6px);
}
.use-header__menu .sub-menu .menu-item-has-children:hover > .sub-menu,
.use-header__menu .sub-menu .menu-item-has-children:focus-within > .sub-menu {
  transform: translateX(0);
}

/* Link styling modifiers from admin (case). */
.use-header.is-link-uppercase .use-header__menu a {
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
}

.use-header__actions {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: auto;
}
.use-header__icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent; border: 0; border-radius: 50%;
  color: inherit; cursor: pointer;
  transition: background .15s ease;
}
.use-header__icon-btn:hover { background: rgba(15, 23, 42, .07); }

.use-header__cta {
  display: inline-flex; align-items: center;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--uh-accent); color: #fff;
  font-weight: 600; font-size: .88rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.use-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--uh-accent) 30%, transparent);
}

/* Hamburger */
.use-header__hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 0; border-radius: 50%;
  cursor: pointer; color: inherit;
}
.use-header__hamburger:hover { background: rgba(15, 23, 42, .07); }
.use-hamburger {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 20px;
}
.use-hamburger span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}

/* LAYOUTS */
.use-header--classic .use-header__nav { justify-content: flex-end; margin-left: 0; }
.use-header--classic .use-header__actions { margin-left: 1rem; }

/* Centered: balanced menu around the logo.
   Grid lays out: [hamburger] [left nav] [brand] [right nav] [actions]
   On wider viewports the brand is dead-centered; left and right navs flex
   towards the brand, keeping balance even with odd item counts. */
.use-header__inner--centered {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.use-header__inner--centered .use-header__hamburger { grid-column: 1; }
.use-header__inner--centered .use-header__nav--left {
  grid-column: 2; justify-content: flex-end; margin-left: 0;
}
.use-header__inner--centered .use-header__brand {
  grid-column: 3; justify-content: center;
  font-size: 1.15rem; letter-spacing: -.015em;
}
.use-header__inner--centered .use-header__nav--right {
  grid-column: 4; justify-content: flex-start; margin-left: 0;
}
.use-header__inner--centered .use-header__actions { grid-column: 5; }
.use-header__inner--centered .use-header__nav--left .use-header__menu,
.use-header__inner--centered .use-header__nav--right .use-header__menu {
  flex-wrap: nowrap;
}
.use-header__inner--centered .use-header__nav--left .use-header__menu {
  justify-content: flex-end;
}
/* Empty nav slots collapse silently */
.use-header__inner--centered .use-header__nav:empty,
.use-header__inner--centered .use-header__nav .use-header__menu:empty { display: none; }

/* Overlay: header floats over the first section without taking space */
.use-header.is-overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom-color: transparent;
}
.use-header.is-overlay.is-sticky[data-use-scrolled] {
  position: fixed;
}

/* Entry animation (one-shot, overridden by reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .use-header[data-use-anim="slide"] { animation: use-header-slide .35s ease both; }
  .use-header[data-use-anim="fade"]  { animation: use-header-fade  .4s  ease both; }
}
@keyframes use-header-slide {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes use-header-fade {
  from { opacity: 0; } to { opacity: 1; }
}

/* Search reveal */
.use-header__search {
  border-top: 1px solid var(--uh-border);
  padding: .85rem var(--use-container-px, 1rem);
  background: var(--uh-bg);
}
.use-header__search form {
  display: flex; gap: .5rem; max-width: 640px; margin: 0 auto;
}
.use-header__search input[type="search"] {
  flex: 1; padding: .55rem .85rem; border-radius: 999px;
  border: 1px solid var(--uh-border); background: #fff;
  font: inherit;
}
.use-header__search input[type="search"]:focus {
  outline: 0; border-color: var(--uh-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uh-accent) 20%, transparent);
}
.use-header__search button {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--uh-accent); color: #fff; border: 0; cursor: pointer;
}

/* MOBILE */
@media (max-width: 800px) {
  .use-header__hamburger { display: inline-flex; }
  .use-header__nav { display: none; }
  .use-header__inner--centered {
    grid-template-columns: auto 1fr auto;
  }
  .use-header__inner--centered .use-header__brand { grid-column: 2; }
  .use-header__inner--centered .use-header__actions { grid-column: 3; }
  .use-header__actions .use-header__cta { display: none; }
}

/* DRAWER */
.use-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  z-index: 90;
}
.use-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.use-header-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(86vw, 320px);
  background: var(--use-color-bg, #fff); color: var(--use-color-text, #0f172a);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  z-index: 100; box-shadow: 0 12px 28px rgba(15,23,42,.15);
  display: flex; flex-direction: column;
  padding: 1rem 1.25rem 1.5rem;
}
.use-header-drawer.is-open { transform: translateX(0); }
.use-header-drawer[hidden] { display: flex; }

.use-header-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: .85rem; border-bottom: 1px solid rgba(15,23,42,.08);
  margin-bottom: .85rem;
}
.use-header-drawer__brand { font-weight: 700; text-decoration: none; color: inherit; }
.use-header-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.use-header-drawer__close:hover { background: rgba(15,23,42,.07); }

.use-header-drawer__nav { flex: 1; overflow-y: auto; }
.use-header-drawer__menu {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.use-header-drawer__menu li { list-style: none; }
.use-header-drawer__menu a {
  display: block; padding: .65rem .25rem;
  text-decoration: none; color: inherit;
  font-size: 1rem; font-weight: 500;
  border-bottom: 1px solid rgba(15,23,42,.05);
}

/* ── Drawer móvil: accordion ─────────────────────────────────────────
 * Cada item con hijos gana un botón chevron a la derecha (lo añade el
 * JS). Tap en el chevron expande/contrae el sub-menu; tap en el link
 * navega normalmente — así el padre que es también una página real
 * sigue siendo accesible.
 */
.use-header-drawer__menu .menu-item-has-children {
  position: relative;
}
.use-header-drawer__menu .menu-item-has-children > a {
  padding-right: 48px;
}
.use-header-drawer__menu .use-submenu-toggle {
  position: absolute;
  top: 2px;
  right: 0;
  width: 44px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease;
}
.use-header-drawer__menu .use-submenu-toggle:hover {
  background: rgba(15, 23, 42, .06);
}
.use-header-drawer__menu .use-submenu-toggle__chevron {
  display: inline-block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: .6;
  transition: transform .25s ease, opacity .15s ease;
}
.use-header-drawer__menu .menu-item-has-children.is-open > .use-submenu-toggle .use-submenu-toggle__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.use-header-drawer__menu .sub-menu {
  list-style: none;
  padding: 0 0 0 .75rem;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.use-header-drawer__menu .menu-item-has-children.is-open > .sub-menu {
  max-height: 2000px;
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.use-header-drawer__menu .sub-menu a { font-weight: 400; font-size: .92rem; }
.use-header-drawer__menu .sub-menu li:last-child > a { border-bottom: 0; }
.use-header-drawer__cta {
  margin-top: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1rem; border-radius: 999px;
  background: var(--use-color-primary, #2563eb); color: #fff;
  font-weight: 600; text-decoration: none;
}

}

/* Unlayered — overrides WP global `a:where()` rule that applies
   color + underline to all links. Must live outside @layer. */
.use-header a,
.use-header-drawer a {
  color: inherit;
  text-decoration: none;
}
.use-header__menu a {
  color: var(--uh-link, inherit);
  font-weight: var(--uh-link-weight, 500);
  font-style: var(--uh-link-style, normal);
}
.use-header__menu a:hover,
.use-header__menu .current-menu-item > a {
  color: var(--uh-accent, inherit);
}
.use-header__cta {
  color: #fff;
}
/* Decoration via data attribute — unlayered so it beats WP global a:where() */
[data-uh-link-deco="always"] .use-header__menu a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
[data-uh-link-deco="hover"] .use-header__menu a:hover,
[data-uh-link-deco="hover"] .use-header__menu .current-menu-item > a {
  text-decoration: underline;
  text-underline-offset: 4px;
}