/* ============================================================
 * Animated header — fixed, never hidden, shrinks on scroll
 * ============================================================ */

/* ----------------------------------------------------------------
 * Top-bar language switcher (ensoul lang-toggle)
 * - stessa misura delle voci sito della barra top (xs = 12px) e
 *   niente underline di default (rock la disegna come border-bottom
 *   sul link, non come text-decoration)
 * - allineamento verticale: la colonna del toggle si stira all'altezza
 *   della riga (dettata dal py-xs delle voci sito) e centra il link —
 *   neutralizzato il vecchio hack `md:pt-xxs` del markup
 * - hover: stessa underline animata dei link della barra top
 * ---------------------------------------------------------------- */
.animated-header .ensoul-lang-toggle {
  font-size: var(--text-paragraph-xs, 12px);
}
.animated-header .ensoul-lang-toggle-link {
  font-size: var(--text-paragraph-xs, 12px);
  line-height: 1.5;
  border-bottom: none;
  padding-bottom: 0;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s ease;
}
.animated-header .ensoul-lang-toggle-link:hover {
  background-size: 100% 1px;
}
.animated-header .ensoul-column-wrapper:has(.ensoul-lang-toggle) {
  align-self: stretch;
  padding-top: 0 !important;
}
.animated-header .ensoul-column-wrapper:has(.ensoul-lang-toggle) > .column {
  height: 100%;
  justify-content: center;
}

header.wp-block-template-part:has(.animated-header) {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* No transition on the <header> itself — the size change comes from the
   * inner row + logo being transitioned individually. */
}

/* WP Admin bar offset */
.admin-bar header.wp-block-template-part:has(.animated-header) {
  top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar header.wp-block-template-part:has(.animated-header) {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}

/* Body offset for fixed header (+ sub-navs) */
body {
  padding-top: var(--header-height, 0px);
}

/* ----------------------------------------------------------------
 * Compact mode (html.is-scrolled, set by JS AFTER sub-nav has hidden)
 * Header shrinks ONLY from the bottom — top edge stays anchored.
 * Logo shrinks proportionally via max-height (width:auto keeps ratio).
 * ---------------------------------------------------------------- */
header.wp-block-template-part .animated-header .wp-block-ensoul-image img {
  max-height: 65px;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important; /* override object-cover from block */
  transition: max-height 0.3s ease-in-out;
}
html.is-scrolled
  header.wp-block-template-part
  .animated-header
  .wp-block-ensoul-image
  img {
  max-height: 38px;
}

/* Reduce ONLY bottom padding on the row containing logo + nav (top stays
 * the same — header shrinks from the bottom only, no vertical jump). */
header.wp-block-template-part
  .animated-header
  .ensoul-columns-section:last-child
  .ensoul-columns-block {
  transition: padding-bottom 0.3s ease-in-out;
}
html.is-scrolled
  header.wp-block-template-part
  .animated-header
  .ensoul-columns-section:last-child
  .ensoul-columns-block {
  padding-bottom: 4px !important;
}

/* ----------------------------------------------------------------
 * Sub-nav bar — STATIC, in flow under the hero image
 * Rendered via [coima_subnav] shortcode in the page template.
 * ---------------------------------------------------------------- */
.sub-nav-bar {
  position: relative;
  background: #ffffff;
  border-bottom: 1px solid var(--color-neutral-200, #d8d8d8);
  /* Break out of any parent max-width (same technique as north .w-screen) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Sub-nav inner — constrained to content width, links LEFT-aligned */
.sub-nav-bar nav {
  max-width: var(--wp--style--global--content-size, 1400px);
  margin: 0 auto;
  font-size: 14px;
  padding: 0 24px;
}
.sub-nav-bar .wp-block-navigation__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 12px 0;
  margin: 0;
  list-style: none;
}
.sub-nav-bar .wp-block-navigation-item {
  margin: 0;
}
.sub-nav-bar .wp-block-navigation-item__content {
  color: var(--color-neutral-700, #3b3b3b);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}
.sub-nav-bar .wp-block-navigation-item__content:hover {
  color: var(--color-primary-500, #8e9090);
}
.sub-nav-bar .wp-block-navigation-item__content.is-active,
.sub-nav-bar .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--color-primary-500, #8e9090);
  border-bottom-color: var(--color-primary-500, #8e9090);
  font-weight: 600;
}

/* Sub-nav level 2 — slightly different background tone (like coima.com) */
.sub-nav-bar--level-2 {
  background: var(--color-neutral-50, #fafafa);
}

/* Mobile: scroll horizontally */
@media (max-width: 767px) {
  .sub-nav-bar nav {
    padding: 0 16px;
  }
  .sub-nav-bar .wp-block-navigation__container {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 0;
  }
  .sub-nav-bar .wp-block-navigation__container::-webkit-scrollbar {
    display: none;
  }
  .sub-nav-bar .wp-block-navigation-item {
    flex: 0 0 auto;
  }
}