/* GPF · Header 5 · Oscuro editorial
   Los valores se pueden reemplazar redefiniendo las variables --gpf-h5-* en el CSS del sitio. */
.gpf-header-5 {
  --gpf-h5-bg: #14110E;
  --gpf-h5-text: #F4EFE6;
  --gpf-h5-muted: #A1968A;
  --gpf-h5-border: #2B2520;
  --gpf-h5-accent: #C9663A;
  --gpf-h5-accent-text: #14110E;
  --gpf-h5-heading-font: 'Fraunces', Georgia, serif;
  --gpf-h5-body-font: 'Karla', system-ui, sans-serif;

  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 9990;
  background: var(--gpf-h5-bg);
  border-bottom: 1px solid var(--gpf-h5-border);
  font-family: var(--gpf-h5-body-font);
}
.gpf-header-5 *, .gpf-header-5 *::before, .gpf-header-5 *::after { box-sizing: border-box; }
.gpf-header-5__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 48px;
}

/* Marca: el logo es línea oscura sobre fondo opaco; se invierte para el fondo oscuro. */
.gpf-header-5__brand { display: flex; align-items: center; gap: 11px; text-decoration: none !important; color: var(--gpf-h5-text) !important; flex-shrink: 0; }
.gpf-header-5__logo { width: 40px; height: 40px; object-fit: contain; filter: grayscale(1) invert(1); mix-blend-mode: screen; }
.gpf-header-5__name { font-family: var(--gpf-h5-heading-font); font-size: 23px; font-weight: 700; letter-spacing: .01em; line-height: 1; }

/* Menú (markup de gpf_nav_menu) */
.gpf-header-5__nav { flex: 1 1 auto; min-width: 0; }
.gpf-header-5 .gpf-responsive-menu { display: flex; justify-content: flex-start; }
.gpf-header-5 .gpf-menu { gap: 6px; }
.gpf-header-5 .gpf-menu a {
  padding: 10px 12px;
  font-size: 14.5px;
  color: var(--gpf-h5-muted);
  text-decoration: none;
  background: transparent;
  border-radius: 2px;
}
.gpf-header-5 .gpf-menu a:hover, .gpf-header-5 .gpf-menu a:focus-visible { color: var(--gpf-h5-text); background: transparent; }
.gpf-header-5 .gpf-menu .current-menu-item > a { color: var(--gpf-h5-text); font-weight: 600; background: transparent; }
.gpf-header-5 .gpf-submenu { background: var(--gpf-h5-bg); border: 1px solid var(--gpf-h5-border); box-shadow: none; }
.gpf-header-5 .gpf-submenu li a { color: var(--gpf-h5-muted); }
.gpf-header-5 .hamburger-icon .bar { background-color: var(--gpf-h5-text); }
.gpf-header-5 .submenu-toggle { color: var(--gpf-h5-text); }
.gpf-header-5 button.gpf-menu-toggle, .gpf-header-5 button.gpf-menu-toggle:hover, .gpf-header-5 button.gpf-menu-toggle:focus {
  background: transparent; border: 0; padding: 12px; min-width: 44px; min-height: 44px;
}

.gpf-header-5__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 2px;
  background: var(--gpf-h5-accent);
  color: var(--gpf-h5-accent-text) !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
}
.gpf-header-5__cta:hover { filter: brightness(1.08); }
.gpf-header-5 a:focus-visible { outline: 2px solid var(--gpf-h5-text); outline-offset: 3px; }

@media (max-width: 1024px) {
  .gpf-header-5__inner { padding: 14px 32px; }
}
/* gpf_nav_menu cambia a hamburguesa bajo 768px */
@media (max-width: 768px) {
  .gpf-header-5__inner { padding: 10px 16px; gap: 10px; position: relative; }
  .gpf-header-5__name { font-size: 19px; }
  .gpf-header-5__nav { order: 3; flex: 0 0 auto; position: static; }
  .gpf-header-5 .gpf-responsive-menu { position: static; justify-content: flex-end; }
  .gpf-header-5__cta { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .gpf-header-5 .gpf-nav-container {
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    background: var(--gpf-h5-bg);
    border-bottom: 1px solid var(--gpf-h5-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }
  .gpf-header-5 .gpf-nav-container.active { width: 100%; }
  .gpf-header-5 .gpf-menu { gap: 0; padding: 8px 0; }
  .gpf-header-5 .gpf-menu a { padding: 14px 16px; font-size: 16px; color: var(--gpf-h5-text); }
  .gpf-header-5 .gpf-submenu { background: transparent; border: 0; }
}

/* Pantallas muy angostas (320–360px): logo, botón y menú no caben con el nombre completo. */
@media (max-width: 360px) {
  .gpf-header-5__inner { padding: 10px 12px; gap: 6px; }
  .gpf-header-5__brand { flex-shrink: 1; min-width: 0; gap: 8px; }
  .gpf-header-5__name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gpf-header-5__cta { padding: 9px 12px; }
  .gpf-header-5 button.gpf-menu-toggle, .gpf-header-5 button.gpf-menu-toggle:hover, .gpf-header-5 button.gpf-menu-toggle:focus { padding: 10px; }
}