/* Menu Above Hero - Horizontal (desktop overlay) */
/* Requires .site-header.menu-above-hero.is-horizontal */

@media (min-width: 1281px) {
  /* Hide old top bar on homepage only (kept on other pages) */
  body.home .site-header.menu-above-hero.is-horizontal .top-bar { display: none !important; }
  .site-header.menu-above-hero.is-horizontal .main-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* right aligned */
  }

  /* Hide toggle on desktop for horizontal */
  .site-header.menu-above-hero.is-horizontal .menu-toggle {
    display: none !important;
  }

  .site-header.menu-above-hero.is-horizontal #primary-menu {
    display: inline-flex;
    gap: var(--spacing-xl);
    padding: var(--spacing-sm) var(--spacing-lg);
    margin-right: var(--spacing-lg);
    background: rgba(var(--color-primary-rgb), 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    margin-left: auto;
    margin-right: auto;
  }

  .site-header.menu-above-hero.is-horizontal #primary-menu > li { list-style: none; }

  .site-header.menu-above-hero.is-horizontal #primary-menu a {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
  }

  .site-header.menu-above-hero.is-horizontal #primary-menu a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
  }

  /* Child overlay icon toolbar (vertical, right side of hero) */
  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar {
    position: fixed; /* overlay on hero */
    top: 50%;
    right: clamp(12px, 2vw, 24px);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 1000;
  }

  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar .overlay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), background var(--transition-fast);
  }

  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar .overlay-icon:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.9);
  }

  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar img {
    width: var(--fab-size-desktop);
    height: var(--fab-size-desktop);
    display: block;
  }
}

/* Hide toolbar on tablets/phones */
@media (max-width: 1280px) {
  .overlay-icon-toolbar { display: none !important; }
}



/* Optional alignment modifiers (desktop) */
@media (min-width: 1281px) {
  /* Left aligned */
  .site-header.menu-above-hero.is-horizontal.menu-align-left .main-navigation {
    justify-content: flex-start;
  }
  .site-header.menu-above-hero.is-horizontal.menu-align-left #primary-menu {
    margin-left: var(--spacing-lg);
    margin-right: 0;
  }

  /* Center aligned */
  .site-header.menu-above-hero.is-horizontal.menu-align-center .main-navigation {
    justify-content: center;
  }
  .site-header.menu-above-hero.is-horizontal.menu-align-center #primary-menu {
    margin-left: auto;
    margin-right: auto;
  }

  /* Right aligned (explicit class, default is already right) */
  .site-header.menu-above-hero.is-horizontal.menu-align-right .main-navigation {
    justify-content: flex-end;
  }
  .site-header.menu-above-hero.is-horizontal.menu-align-right #primary-menu {
    margin-right: var(--spacing-lg);
    margin-left: 0;
  }


  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar {
    top: var(--fab-top-desktop);
    transform: none;
    right: calc((100vw - 95vw) / 2 + var(--spacing-xl)); /* matches .split-container (95vw) */
    gap: var(--spacing-lg);
  }
  
  .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar { gap: var(--spacing-xs); }

}

/* Below 1281px, base CSS manages the mobile fallback */
@media (max-width: 1280px) {
  /* Hide the vertical toolbar on mobile (already done above, keep for clarity) */
  .overlay-icon-toolbar { display: none !important; }

  /* Mobile FAB: slightly smaller, always visible when JS adds it */
  .overlay-icon-fab {
    position: fixed;
    right: var(--fab-right-mobile);
    bottom: var(--fab-bottom-mobile);
    width: var(--fab-size-mobile);
    height: var(--fab-size-mobile);
    border-radius: 50%;
    border: none;
    background: #fff url('../images/icons/icons-contatcs.webp') center/var(--fab-bg-scale-mobile) no-repeat;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15);
    z-index: 1100;
  }

  /* Mobile modal: wider panel, 2 columns, larger touch targets */
  .overlay-icon-modal { display: none; }
  .overlay-icon-modal.is-open { display: block; }
  .overlay-icon-modal .overlay-icon-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; }
  .overlay-icon-modal .overlay-icon-modal__panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--fab-bottom-mobile) + var(--fab-size-mobile) + var(--backtotop-gap-mobile)); /* sit above FAB */
    max-height: min(70vh, 620px);
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 18px 48px rgba(0,0,0,0.32);
    padding: var(--spacing-lg);
    z-index: 1300;
    overflow: auto;
  }
  .overlay-icon-modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .overlay-icon-modal__close:focus {  }
  .overlay-icon-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
  .overlay-icon-modal__grid .overlay-icon { display: flex; align-items: center; justify-content: center; }
  .overlay-icon-modal__grid .overlay-icon img { width: 96px; height: 96px; }
}

/* Desktop: collapsed state + FAB + Modal */
@media (min-width: 1281px) {
  /* Hide vertical toolbar when collapsed */
  body.toolbar-collapsed .site-header.menu-above-hero.is-horizontal .overlay-icon-toolbar { display: none; }

  /* Floating Action Button (FAB) */
  .overlay-icon-fab {
    position: fixed;
    right: var(--fab-right-desktop);
    bottom: var(--fab-bottom-desktop);
    width: var(--fab-size-desktop);
    height: var(--fab-size-desktop);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff url('../images/icons/icons-contatcs.webp') center/var(--fab-bg-scale-desktop) no-repeat; /* give the icon breathing room */
    box-shadow: 0 10px 24px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.15);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    z-index: 1100;
    display: none; /* default hidden; shown when collapsed */
  }
  body.toolbar-collapsed .overlay-icon-fab { display: inline-block; }
  .overlay-icon-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,0.24), 0 10px 10px rgba(0,0,0,0.19); }

  /* Modal */
  .overlay-icon-modal { display: none; }
  .overlay-icon-modal.is-open { display: block; }
  .overlay-icon-modal .overlay-icon-modal__backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200;
  }
  .overlay-icon-modal .overlay-icon-modal__panel {
    position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(150px, 10vh, 220px);
    width: min(720px, 92vw);
    max-height: min(70vh, 680px);
    background: #fff; border-radius: var(--radius-xl);
    box-shadow: 0 18px 48px rgba(0,0,0,0.32);
    padding: var(--spacing-lg);
    z-index: 1300;
    overflow: auto;
  }
  .overlay-icon-modal__close {
    position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: none; background: transparent; font-size: 28px; line-height: 1; cursor: pointer;
  }
  .overlay-icon-modal__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl);
  }
  .overlay-icon-modal__grid .overlay-icon { display: flex; align-items: center; justify-content: center; }
  .overlay-icon-modal__grid .overlay-icon img { width: 128px; height: 128px; }
}

/* Prevent background scroll when modal open */
html.no-scroll, html.no-scroll body { overflow: hidden; }

@media (min-width: 1281px) and (max-width: 1920px) {

.site-header.menu-above-hero.is-horizontal #primary-menu a {
  color: var(--color-white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-header.menu-above-hero.is-horizontal #primary-menu {
  display: inline-flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  margin-right: var(--spacing-lg);
  background: rgba(var(--color-primary-rgb), 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  margin-left: auto;
  margin-right: auto;
}

.site-header.menu-above-hero.is-horizontal #primary-menu > li { list-style: none; }


.site-header.menu-above-hero.is-horizontal #primary-menu a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
}


}