/* ═══════════════════════════════════
   ALERT BANNER
═══════════════════════════════════ */
.alert-banner {
  background: var(--danger);
  color: #fff;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.alert-banner svg { flex-shrink: 0; }
.alert-banner a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.alert-banner a:hover { opacity: 0.9; }
.alert-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.alert-close:hover { color: #fff; }

/* ═══════════════════════════════════
   HEADER
═══════════════════════════════════ */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
}

.header-top {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
.logo-area:hover .logo-text h1 { color: var(--blue-600); }

.logo-crest {
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg, var(--blue-700), var(--blue-800));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-400);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 8px rgba(26,60,110,0.3);
  position: relative;
  overflow: hidden;
}
.logo-crest::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.logo-text h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-900);
  line-height: 1.15;
  transition: color 0.2s var(--ease);
}
.logo-text .subtitle {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 400;
  letter-spacing: 0.3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  gap: 8px;
  border: 1.5px solid transparent;
  transition: all 0.2s var(--ease);
}
.search-box:focus-within {
  border-color: var(--blue-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,168,0.1);
}
.search-box input {
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  width: 220px;
  color: var(--gray-900);
}
.search-box input::placeholder { color: var(--gray-400); }
.search-icon { color: var(--gray-400); flex-shrink: 0; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
}
.lang-btn {
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-500);
}
.lang-btn.active {
  background: var(--blue-700);
  color: #fff;
}
.lang-btn:not(.active):hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  border: none;
  background: none;
}
.hamburger:hover { background: var(--gray-100); }
.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--blue-900);
  border-radius: 2px;
  transition: 0.3s var(--ease);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
.navbar {
  background: var(--blue-900);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  list-style: none;
  height: var(--nav-h);
}

.nav-item { position: relative; }

.nav-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s var(--ease);
  gap: 6px;
  white-space: nowrap;
  position: relative;
}
.nav-item > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  background: var(--gold-400);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.nav-item > a:hover,
.nav-item:hover > a {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav-item:hover > a::after { transform: scaleX(1); }

.nav-arrow {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
  opacity: 0.8;
}

/* Focus ring on the navy bar. tokens.css draws it in --blue-500, which is only
   2.6:1 against --blue-900; --gold-400 (the hover underline) is 8.7:1. Inset,
   because the links fill the bar's full height and a ring drawn outside them
   would spill onto the header above and the page below. */
.nav-item > a:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: -2px;
}

/* Keyboard twins of the :hover rules, here and for the panels below: the same
   open state while focus is inside the item. Without them Tab skipped every
   dropdown link, because visibility: hidden takes an element out of the tab
   order. nav.js sets .is-collapsed when Escape, Enter or Space closes a panel
   whose parent still has focus. Desktop only: below 1024px responsive.css
   runs the accordion, driven by .open. */
@media (min-width: 1024px) {
  .nav-item:focus-within:not(.is-collapsed) .nav-arrow {
    transform: rotate(180deg);
    opacity: 0.8;
  }
}

/* ── Dropdown ── */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 300px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 999;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s var(--ease);

  /* Never taller than the gap between the navbar and the bottom of the screen.
     "Primaria" carries 24 entries and stands 911px tall, so it ran off every
     laptop viewport — 174px past the fold at 900px, 308px at 720px — and the
     links at the bottom could not be reached at all.

     --tch-nav-bottom is measured by nav.js, because the distance is not fixed:
     the header is sticky, so the dropdown opens 117px down the screen once the
     page has scrolled, but 163px while the alert banner is still in view (more
     with the wp-admin bar). The fallback covers the tallest of those cases, so
     the menu is still usable with JavaScript off — just conservatively short. */
  max-height: calc(100vh - var(--tch-nav-bottom, 176px) - 12px);
  max-height: calc(100dvh - var(--tch-nav-bottom, 176px) - 12px);
  overflow-y: auto;
  /* Don't hand the scroll to the page when the list reaches its end. */
  overscroll-behavior: contain;
}

/* A full-height scrollbar track against white reads as a page edge; keep it
   quiet enough to belong to the panel. */
.dropdown { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.dropdown::-webkit-scrollbar { width: 8px; }
.dropdown::-webkit-scrollbar-track { background: transparent; }
.dropdown::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border: 2px solid #fff;
  border-radius: 4px;
}
.dropdown::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
/* Set by nav.js on a dropdown that would run past the right edge of the
   screen: it opens from its item's right edge instead. */
.dropdown.dropdown--end { left: auto; right: 0; }
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 1024px) {
  .nav-item:focus-within:not(.is-collapsed) .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--gray-700);
  transition: all 0.15s var(--ease);
  gap: 10px;
}
.dropdown a:hover {
  background: var(--blue-50);
  color: var(--blue-700);
  padding-left: 24px;
}
/* The --blue-500 ring from tokens.css is 6.1:1 on the white panel, but the
   dropdown scrolls, and a scroll box clips whatever its links draw outside
   themselves — the sides of the ring were cut off. */
.dropdown a:focus-visible { outline-offset: -2px; }
.dropdown a .dd-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dropdown a .dd-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.dropdown .divider {
  height: 1px;
  background: var(--gray-100);
  margin: 6px 16px;
}

.dropdown .section-label {
  padding: 10px 20px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-400);
  letter-spacing: 0.8px;
}

.dropdown .external-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  border-radius: 3px;
  font-weight: 600;
}

/* ── Nested submenu (flyout) ── */
.dd-submenu {
  position: relative;
}
.dd-submenu > .submenu {
  position: absolute;
  top: -8px;
  left: 100%;
  background: #fff;
  min-width: 320px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: all 0.2s var(--ease);
  z-index: 1000;
}
.dd-submenu:hover > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
@media (min-width: 1024px) {
  .dd-submenu:focus-within:not(.is-collapsed) > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.dropdown a .submenu-arrow {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.footer {
  background: var(--gray-950);
  color: var(--gray-400);
  padding: 72px 32px 0;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
}

.footer h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.footer p { font-size: 14px; line-height: 1.9; }
.footer ul { list-style: none; }
.footer li { line-height: 2.2; }
.footer a {
  font-size: 14px;
  color: var(--gray-400);
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.footer a:hover { color: #fff; padding-left: 4px; }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.footer-contact-item svg { flex-shrink: 0; margin-top: 3px; color: var(--gray-600); }

.footer-bottom {
  max-width: var(--max-w);
  margin: 48px auto 0;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--gray-600);
}

.social-links { display: flex; gap: 10px; }
.social-links a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s var(--ease);
  padding: 0;
}
.social-links a:hover {
  background: var(--blue-700);
  color: #fff;
  padding-left: 0;
}