/**
 * Header Figma Styles
 * Basado en el diseno de Figma - Menudos Corazones
 * Figma node: 974-21429
 */

/* ==================================
   HEADER PRINCIPAL
   ================================== */

.site-header-figma {
  background-color: var(--wp--preset--color--white);
  height: 80px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  /* background: #fff; */
  height: 80px;
  z-index: 1001;
}

.site-header-figma .theme-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 8px 64px;
}

/* ==================================
   LOGO
   ================================== */

.header-logo {
  flex-shrink: 0;
}

.site-logo {
  width: 179px;
  height: 56px;
  object-fit: contain;
}

.site-logo-text {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 24px;
  font-weight: 700;
  color: var(--wp--preset--color--text-dark);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.site-logo-text:hover {
  opacity: 0.8;
}

/* ==================================
   NAVEGACION PRINCIPAL
   ================================== */

.header-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.21;
  color: var(--wp--preset--color--text-gray);
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-link:hover {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* Custom links vacíos (solo para abrir megamenu, no navegables) */
.nav-link[href="#"],
.nav-link[href=""],
.nav-link[href="javascript:void(0)"] {
  cursor: default;
}

/* Nav link active state */
.nav-link.is-active {
  color: var(--wp--preset--color--primary);
  background-color: rgba(232, 29, 99, 0.08);
}

.nav-link.is-active:hover {
  color: var(--wp--preset--color--primary);
  background-color: rgba(232, 29, 99, 0.12);
}

/* ==================================
   HEADER ACTIONS (Dona Button)
   ================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Boton Dona Ahora - Estilo Primario */
.donate-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 8px 16px;
  background-color: var(--wp--preset--color--primary);
  border-radius: 24px;
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.21;
  color: var(--wp--preset--color--white);
  text-decoration: none;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.donate-button:hover {
  background-color: var(--wp--preset--color--primary-hover);
  color: var(--wp--preset--color--white);
}

/* ==================================
   MOBILE MENU TOGGLE
   ================================== */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--wp--preset--color--text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ==================================
   ICON BUTTONS (Search, User)
   Figma: Secondary, Only Icon, 40x40
   ================================== */

.header-icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 24px;
  border: 1px solid var(--wp--preset--color--secondary);
  background: none;
  color: var(--wp--preset--color--text-dark);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  padding: 0;
}

.header-icon-button:hover {
  background-color: var(--wp--preset--color--light-gray);
  border-color: var(--wp--preset--color--text-dark);
  color: var(--wp--preset--color--text-dark);
}

.header-icon-button svg {
  flex-shrink: 0;
}

/* ==================================
   NAV CARET (dropdown indicator)
   Figma: 16x16, #787878
   ================================== */

.nav-caret {
  width: 16px;
  height: 16px;
  color: var(--wp--preset--color--secondary);
  margin-left: 4px;
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-link:hover .nav-caret,
.nav-link.is-active .nav-caret,
.nav-item.current-menu-item > .nav-link .nav-caret,
.nav-item.current-menu-ancestor > .nav-link .nav-caret,
.nav-item.has-dropdown:hover > .nav-link .nav-caret,
.nav-item.has-mega-menu:hover > .nav-link .nav-caret {
  color: var(--wp--preset--color--primary);
}

.nav-item.has-dropdown:hover > .nav-link .nav-caret,
.nav-item.has-mega-menu:hover > .nav-link .nav-caret {
  transform: rotate(180deg);
}

/* ==================================
   MEGA MENU (full-width dropdown)
   Figma nodes: 477-17404, 508-12109,
   508-12182, 508-13566
   ================================== */

/* Allow mega menu to span full header width */
.nav-item.has-mega-menu {
  position: static;
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--wp--preset--color--white);
  border-top: 1px solid #F4F4F4;
  box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.12);
  padding: 24px 0;
  z-index: 1002;

  /* Animación tipo Stripe - estado inicial (oculto) */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.25s;
  pointer-events: none;
}

.mega-menu-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  padding: 0;
}

/* Desktop hover (manejado por JS para mejor UX) */
.nav-item.has-mega-menu.mega-menu-open > .mega-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fallback hover si JS no está disponible */
.nav-item.has-mega-menu:hover > .mega-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header */
.mega-menu-header {
  padding: 0 0 0 8px;
  margin-bottom: 24px;
}

.mega-menu-title {
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.21;
  color: var(--wp--preset--color--text-dark);
  margin: 0;
}

/* Content row */
.mega-menu-content {
  display: flex;
  gap: 64px;
  align-items: stretch;
}

/* Link columns */
.mega-menu-column {
  flex: 1;
  min-width: 0;
}

.mega-menu-list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Lista de children (sub-items): sin padding-bottom */
.mega-menu-list--children {
  padding-bottom: 0;
}

.mega-menu-item {
  width: 100%;
}

/* Main links (bold, #4F4F4F) */
.mega-menu-link {
  display: block;
  padding: 8px;
  border-radius: 8px;
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.21;
  color: var(--wp--preset--color--text-gray);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mega-menu-link:hover {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* Enlaces vacíos en megamenu (no clicables) */
.mega-menu-link[href="#"],
.mega-menu-link[href=""],
.mega-menu-link[href="javascript:void(0)"] {
  cursor: default;
  pointer-events: none;
}

/* Secondary links (medium weight, lighter color) */
.mega-menu-link--secondary {
  font-weight: 500;
  color: var(--wp--preset--color--text-light);
}

.mega-menu-link--secondary:hover {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* Enlaces vacíos secundarios (no clicables) */
.mega-menu-link--secondary[href="#"],
.mega-menu-link--secondary[href=""],
.mega-menu-link--secondary[href="javascript:void(0)"] {
  cursor: default;
  pointer-events: none;
}

/* Category header */
.mega-menu-category-header {
  padding: 0 0 8px;
}

.mega-menu-category-title {
  display: block;
  padding: 8px;
  border-radius: 8px;
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.21;
  color: #515356;
  text-decoration: none;
}

.mega-menu-category-title--link {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mega-menu-category-title--link:hover,
.mega-menu-category-title--link:active {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* Vertical divider - REMOVED (no dividers in design) */
/* .mega-menu-divider {
  width: 2px;
  flex-shrink: 0;
  background-color: #D8D8D8;
  margin: 24px 0;
} */

/* Circular decorative image */
.mega-menu-image {
  flex-shrink: 0;
  width: 216px;
  height: 216px;
  border-radius: 150px;
  overflow: hidden;
}

.mega-menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Current menu item highlight */
.nav-item.current-menu-item > .nav-link,
.nav-item.current-menu-ancestor > .nav-link {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

.mega-menu-item.current-menu-item > .mega-menu-link {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* ==================================
   DROPDOWN SUB-MENU (simple, for Walker)
   Used by headers that use wp_nav_menu + Walker
   ================================== */

.nav-item .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--wp--preset--color--white);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 220px;
  padding: 8px 0;
  list-style: none;
  margin: 4px 0 0;
  z-index: 1002;
}

.nav-item.has-dropdown:hover > .sub-menu {
  display: block;
}

.sub-menu .nav-item {
  width: 100%;
}

.sub-menu-link {
  display: block;
  padding: 10px 16px;
  font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--text-gray);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sub-menu-link:hover {
  color: var(--wp--preset--color--primary);
  background-color: rgba(213, 0, 50, 0.08);
}

/* Enlaces vacíos en sub-menu (no clicables) */
.sub-menu-link[href="#"],
.sub-menu-link[href=""],
.sub-menu-link[href="javascript:void(0)"] {
  cursor: default;
  pointer-events: none;
}

.sub-menu .nav-item.current-menu-item > .sub-menu-link {
  color: var(--wp--preset--color--primary);
  font-weight: 500;
}

/* ==================================
   BOTONES CTA EN MENÚ MÓVIL
   (Solo visibles en responsive)
   ================================== */

.nav-donate-wrapper {
  display: none;
}

/* Botón Área privada (Secondary outlined) - sólo en menú móvil */
.nav-account-button {
  display: none;
}

/* ==================================
   RESPONSIVE
   ================================== */

/* Large Desktop */
@media (max-width: 1400px) {
  .site-header-figma .theme-container {
    padding: 8px 32px;
  }

  .mega-menu-inner {
    padding: 0 32px;
  }
}

/* Desktop */
@media (max-width: 1200px) {
  .site-header-figma .theme-container {
    padding: 8px 24px;
  }

  .nav-menu {
    gap: 8px;
  }

  .nav-link {
    font-size: 14px;
    padding: 6px;
  }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .site-header-figma {
    height: auto;
    min-height: 70px;
  }

  .site-header-figma .theme-container {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .header-logo {
    order: 1;
  }

  /* En mobile: actions contiene dona compacto + toggle */
  .header-actions {
    display: flex;
    order: 2;
    margin-left: auto;
    gap: 16px;
    align-items: center;
  }

  /* Botón Dona compacto en la barra del header mobile (X-Small: h32, p 8/16, 12px) */
  .donate-button {
    height: 32px;
    padding: 8px 16px;
    font-size: 12px;
  }

  /* Toggle hamburguesa: contenedor 32x32, icono 24x24 centrado */
  .mobile-menu-toggle {
    display: flex;
    width: 32px;
    height: 26px;
    padding: 4px;
  }

  /* Menu móvil dropdown debajo del header */
  .header-navigation {
    flex: 0 0 100%; /* Sobrescribe flex: 1, ocupa 100% del ancho */
    order: 4;
    width: 100%;
    display: none !important;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    justify-content: flex-start;
    min-height: 100dvh;
    background-color: var(--wp--preset--color--white);
    overflow-y: auto;
  }

  .header-navigation.active {
    display: block !important;
  }

  .nav-menu {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    padding: 16px 24px;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0;
    border-bottom: 1px solid #F4F4F4;
    color: var(--wp--preset--color--text-gray);
    background-color: var(--wp--preset--color--white);
  }

  .nav-link:hover {
    color: var(--wp--preset--color--primary);
    background-color: transparent;
  }

  /* Icon buttons en móvil */
  .header-icon-button {
    display: none;
  }

  /* Caret en móvil: siempre visible, rotación al abrir */
  .nav-item.has-dropdown > .nav-link,
  .nav-item.has-mega-menu > .nav-link {
    justify-content: space-between;
  }

  .nav-item.has-dropdown > .nav-link .nav-caret,
  .nav-item.has-mega-menu > .nav-link .nav-caret {
    margin-left: auto;
  }

  .nav-item.has-dropdown.active > .nav-link .nav-caret,
  .nav-item.has-mega-menu.active > .nav-link .nav-caret {
    transform: rotate(180deg);
  }

  /* Sub-menu en móvil: inline, no absoluto */
  .nav-item .sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #999999;
    min-width: 0;
    padding: 16px 24px;
    margin: 0;
    background-color: var(--wp--preset--color--white);
    display: none;
    gap: 8px;
    flex-direction: column;
  }

  .nav-item.has-dropdown.active > .sub-menu {
    display: flex;
  }

  .nav-item.has-dropdown:hover > .sub-menu {
    display: none;
  }

  .nav-item.has-dropdown.active:hover > .sub-menu {
    display: flex;
  }

  .sub-menu-link {
    padding: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-gray);
  }

  /* Mega menu en móvil: inline, sin posición absoluta */
  .mega-menu {
    position: relative; /* Necesario para el pseudo-elemento */
    box-shadow: none;
    border-top: none;
    padding: 16px 24px;
    background-color: var(--wp--preset--color--white);
    /* Desactivar animación en móvil - oculto por defecto */
    display: none;
    opacity: 1;
    transform: none;
    transition: none;
    visibility: visible;
  }

  /* Border divisor al 100% del ancho, ignorando padding lateral */
  .mega-menu::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #999999;
  }

  .nav-item.has-mega-menu:hover > .mega-menu {
    display: none;
  }

  .nav-item.has-mega-menu.active > .mega-menu {
    display: block;
    padding: 0 16px 24px;
  }

  .nav-item.has-mega-menu.active:hover > .mega-menu {
    display: block;
  }

  .mega-menu-inner {
    padding: 0;
  }

  .mega-menu-header {
    display: none; /* Ocultar título en móvil según Figma */
  }

  .mega-menu-title {
    font-size: 18px;
  }

  .mega-menu-content {
    flex-direction: column;
    gap: 8px;
  }

  .mega-menu-list {
    padding: 0;
    gap: 8px;
  }

  .mega-menu-link {
    padding: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-gray);
    border-radius: 8px;
  }

  .mega-menu-link:hover {
    background-color: rgba(213, 0, 50, 0.08);
    color: var(--wp--preset--color--primary);
  }

  .mega-menu-link--secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--text-light);
    border-radius: 8px;
  }

  .mega-menu-link--secondary:hover {
    background-color: rgba(213, 0, 50, 0.08);
    color: var(--wp--preset--color--primary);
  }

  .mega-menu-link--secondary:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.5C14 6.63261 13.9473 6.75979 13.8536 6.85355C13.7598 6.94732 13.6326 7 13.5 7C13.3674 7 13.2402 6.94732 13.1464 6.85355C13.0527 6.75979 13 6.63261 13 6.5V3.7075L8.85437 7.85375C8.76055 7.94757 8.63331 8.00028 8.50062 8.00028C8.36794 8.00028 8.2407 7.94757 8.14688 7.85375C8.05305 7.75993 8.00035 7.63268 8.00035 7.5C8.00035 7.36732 8.05305 7.24007 8.14688 7.14625L12.2925 3H9.5C9.36739 3 9.24021 2.94732 9.14645 2.85355C9.05268 2.75979 9 2.63261 9 2.5C9 2.36739 9.05268 2.24021 9.14645 2.14645C9.24021 2.05268 9.36739 2 9.5 2H13.5C13.6326 2 13.7598 2.05268 13.8536 2.14645C13.9473 2.24021 14 2.36739 14 2.5V6.5ZM11.5 8C11.3674 8 11.2402 8.05268 11.1464 8.14645C11.0527 8.24021 11 8.36739 11 8.5V13H3V5H7.5C7.63261 5 7.75979 4.94732 7.85355 4.85355C7.94732 4.75979 8 4.63261 8 4.5C8 4.36739 7.94732 4.24021 7.85355 4.14645C7.75979 4.05268 7.63261 4 7.5 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H11C11.2652 14 11.5196 13.8946 11.7071 13.7071C11.8946 13.5196 12 13.2652 12 13V8.5C12 8.36739 11.9473 8.24021 11.8536 8.14645C11.7598 8.05268 11.6326 8 11.5 8Z' fill='%23D50032'/%3E%3C/svg%3E");
  }

  /* Agregar icono de enlace externo a los links secundarios */
  .mega-menu-link--secondary::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6.5C14 6.63261 13.9473 6.75979 13.8536 6.85355C13.7598 6.94732 13.6326 7 13.5 7C13.3674 7 13.2402 6.94732 13.1464 6.85355C13.0527 6.75979 13 6.63261 13 6.5V3.7075L8.85437 7.85375C8.76055 7.94757 8.63331 8.00028 8.50062 8.00028C8.36794 8.00028 8.2407 7.94757 8.14688 7.85375C8.05305 7.75993 8.00035 7.63268 8.00035 7.5C8.00035 7.36732 8.05305 7.24007 8.14688 7.14625L12.2925 3H9.5C9.36739 3 9.24021 2.94732 9.14645 2.85355C9.05268 2.75979 9 2.63261 9 2.5C9 2.36739 9.05268 2.24021 9.14645 2.14645C9.24021 2.05268 9.36739 2 9.5 2H13.5C13.6326 2 13.7598 2.05268 13.8536 2.14645C13.9473 2.24021 14 2.36739 14 2.5V6.5ZM11.5 8C11.3674 8 11.2402 8.05268 11.1464 8.14645C11.0527 8.24021 11 8.36739 11 8.5V13H3V5H7.5C7.63261 5 7.75979 4.94732 7.85355 4.85355C7.94732 4.75979 8 4.63261 8 4.5C8 4.36739 7.94732 4.24021 7.85355 4.14645C7.75979 4.05268 7.63261 4 7.5 4H3C2.73478 4 2.48043 4.10536 2.29289 4.29289C2.10536 4.48043 2 4.73478 2 5V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H11C11.2652 14 11.5196 13.8946 11.7071 13.7071C11.8946 13.5196 12 13.2652 12 13V8.5C12 8.36739 11.9473 8.24021 11.8536 8.14645C11.7598 8.05268 11.6326 8 11.5 8Z' fill='%23787878'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .sub-menu-link {
    padding: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-gray);
    border-radius: 8px;
  }

  .sub-menu-link:hover {
    background-color: rgba(213, 0, 50, 0.08);
    color: var(--wp--preset--color--primary);
  }

  .mega-menu-category-header {
    padding: 0 8px 8px;
  }

  .mega-menu-category-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-gray);
  }

  /* Ocultar elementos decorativos en móvil */
  /* .mega-menu-divider {
    display: none;
  } */

  .mega-menu-image {
    display: none;
  }

  /* Botones CTA al pie del menú móvil (Dona + Área privada) */
  .nav-donate-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border-top: 1px solid #F4F4F4;
    margin-top: 0;
  }

  .nav-donate-button,
  .nav-account-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 40px;
    padding: 8px 16px;
    border-radius: 24px;
    font-family: 'Inter', var(--wp--preset--font-family--inter), sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.21;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    gap: 8px;
  }

  .nav-donate-button {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border: none;
  }

  .nav-donate-button:hover {
    background-color: var(--wp--preset--color--primary-hover);
    color: var(--wp--preset--color--white);
  }

  .nav-account-button {
    background: none;
    color: var(--wp--preset--color--text-dark);
    border: 1px solid var(--wp--preset--color--secondary);
  }

  .nav-account-button:hover {
    background-color: var(--wp--preset--color--light-gray);
    border-color: var(--wp--preset--color--text-dark);
    color: var(--wp--preset--color--text-dark);
  }

  .nav-account-button svg {
    flex-shrink: 0;
  }

  .mega-menu-list.mega-menu-list--children{
    padding-left: 8px;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .site-logo {
    width: 160px;
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .site-header-figma .theme-container {
    padding: 10px 12px;
  }

  .site-logo {
    width: 140px;
    height: 44px;
  }
}