/* core/_navbar.html — divintech.es navbar: logo left, uppercase sections
   spread across a white bar with a blue bottom border, mail + language +
   account icons on the right, and a 3px bar under the active section.

   Mobile-first: below 62rem a hamburger toggle (navbar.js) reveals a stacked
   menu with 44px+ touch targets and visible icon labels.

   Stays in view while scrolling, on screens tall enough for it (at 400% zoom
   or on a phone held sideways it would cover a third of the screen).
   --navbar-offset is its height then: what else sticks (backoffice sidebar
   and table header) goes below it, and scroll-padding keeps the focused
   element from hiding under it (WCAG 2.4.11). */

:root {
  --navbar-offset: 0px;
}

.navbar {
  position: relative;
  border-bottom: 1px solid var(--color-main);
  background: var(--color-bg);
}

@media (min-height: 30rem) {
  :root {
    --navbar-offset: calc(5rem + 1px);
  }

  html {
    scroll-padding-top: calc(var(--navbar-offset) + 0.5rem);
  }

  .navbar {
    position: sticky;
    top: 0;
    z-index: 100;
  }
}

/* The open phone menu scrolls on its own instead of running off the screen. */
@media (min-height: 30rem) and (max-width: 61.99rem) {
  .navbar[data-open] .navbar__menu {
    max-height: calc(100dvh - var(--navbar-offset));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-height: 30rem) and (min-width: 62rem) {
  :root {
    --navbar-offset: calc(7rem + 1px);
  }
}

.navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  max-width: 90rem;
  margin-inline: auto;
  padding: 0.75rem var(--space-3);
}

.navbar__brand {
  display: inline-flex;
  border-radius: var(--radius);
}

.navbar__brand img {
  display: block;
  width: auto;
  height: 3.5rem;
}

/* --- Hamburger toggle (mobile only) --- */
.navbar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-size);
  height: var(--tap-size);
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.navbar__toggle-icon,
.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.navbar__toggle-icon {
  position: relative;
}

.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.15s ease, top 0.15s ease;
}

.navbar__toggle-icon::before {
  top: -6px;
}

.navbar__toggle-icon::after {
  top: 6px;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon {
  background: transparent;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- Menu (mobile: stacked, full width, closed by default) --- */
.navbar__menu {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar[data-open] .navbar__menu {
  display: flex;
}

.navbar__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar__list--actions {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.navbar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap-size);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
}

.navbar__link:hover {
  background: var(--color-main-soft);
  color: var(--color-main);
}

.navbar__link:focus-visible {
  outline-offset: -3px;
}

/* Active section: colour + weight + bar, never colour alone (WCAG 1.4.1). */
.navbar__link[aria-current="page"] {
  color: var(--color-main);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--color-main);
}

.navbar__link--icon {
  letter-spacing: 0;
  text-transform: none;
}

.navbar__link--icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* --- PROYECTO dropdown (disclosure button + list of links) --- */
.navbar__disclosure {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* The chevron hangs to the right of the text (absolute) instead of taking
   part in the layout, so the label and the sub-section caption below it
   share the same centre line. */
.navbar__disclosure-label {
  position: relative;
  display: inline-block;
}

.navbar__disclosure-label .navbar__chevron {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 0.35rem;
  transform: translateY(-50%);
}

/* Current sub-section in small caps under PROYECTO (divintech.es'
   .nav-project-subtitle, but in --color-muted: its #888 fails AA). */
.navbar__subtitle {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.navbar__chevron {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.navbar__disclosure[aria-expanded="true"] .navbar__chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* A sub-section is open: highlight the parent too. */
.navbar__item:has(.navbar__sublink[aria-current="page"]) > .navbar__disclosure {
  color: var(--color-main);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--color-main);
}

.navbar__submenu {
  margin: 0;
  padding: 0 0 0.25rem 1rem;
  list-style: none;
}

.navbar__sublink {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

.navbar__sublink:hover {
  background: var(--color-main-soft);
  color: var(--color-main);
}

.navbar__sublink:focus-visible {
  outline-offset: -3px;
}

/* divintech.es underlines the active dropdown entry. */
.navbar__sublink[aria-current="page"] {
  color: var(--color-main);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* --- Language menu (flag toggle + one button per language) --- */
.navbar__lang-toggle,
.navbar__lang-option {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Beats .navbar__link--icon .icon (sized for the mail/account icons). */
.navbar__lang-toggle .icon.navbar__chevron {
  width: 1rem;
  height: 1rem;
}

.navbar__lang-toggle[aria-expanded="true"] .navbar__chevron {
  transform: rotate(180deg);
}

.navbar__lang-option {
  gap: 0.6rem;
}

/* The flag is decorative: the language's name is the option's label. A
   hairline keeps white flag edges visible on the white bar. */
.navbar__flag {
  flex: none;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--color-border);
}

/* Current language: weight + check mark, not colour alone. */
.navbar__lang-option[aria-current="true"] {
  color: var(--color-main);
  font-weight: 700;
}

.navbar__lang-check {
  margin-left: auto;
}

/* Abbreviation next to the flag (CA / EN / ES). */
.navbar__lang-code {
  min-width: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Mobile already shows the toggle's full label; desktop shows the code. */
.navbar__lang-code--toggle {
  display: none;
}

/* --- Desktop: one horizontal bar --- */
@media (min-width: 62rem) {
  .navbar__inner {
    flex-wrap: nowrap;
    min-height: 7rem;
    padding-block: 0;
  }

  .navbar__brand img {
    height: 4.5rem;
  }

  .navbar__toggle {
    display: none;
  }

  .navbar__menu,
  .navbar[data-open] .navbar__menu {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    padding: 0;
  }

  .navbar__nav {
    display: flex;
    flex: 1;
  }

  .navbar__list {
    flex-direction: row;
    align-items: stretch;
  }

  /* divintech.es spreads the sections across the bar. */
  .navbar__nav .navbar__list {
    flex: 1;
    justify-content: space-around;
  }

  .navbar__list--actions {
    margin-left: var(--space-2);
    padding-top: 0;
    border-top: 0;
  }

  .navbar__item {
    position: relative;
    display: flex;
  }

  .navbar__link {
    padding: 0 1rem;
    border-radius: 0;
  }

  .navbar__link:hover {
    background: transparent;
  }

  .navbar__link[aria-current="page"] {
    box-shadow: none;
  }

  /* The divintech.es indicator: a bar on the navbar's bottom edge, 80% of
     the item's width, under the active (and hovered) section. */
  .navbar__item::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--color-main);
    opacity: 0;
    transform: translateX(-50%);
    transition: width 0.2s ease, opacity 0.2s ease;
  }

  .navbar__item:hover::after,
  .navbar__item:has([aria-current="page"])::after {
    width: 80%;
    opacity: 1;
  }

  /* Equal room on both sides for the hanging chevron keeps the text centred
     under the active-section bar. */
  .navbar__disclosure {
    align-items: center;
    width: auto;
    padding-inline: 1.85rem;
    text-align: center;
  }

  .navbar__item:has(.navbar__sublink[aria-current="page"]) > .navbar__disclosure {
    box-shadow: none;
  }

  .navbar__submenu {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    z-index: 50;
    min-width: 15rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-main);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-bg);
    box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 0.12);
    transform: translateX(-50%);
  }

  .navbar__sublink {
    white-space: nowrap;
  }

  /* The rightmost items' menu opens towards the page, not off-screen. */
  .navbar__submenu--lang {
    right: 0;
    left: auto;
    min-width: 11rem;
    transform: none;
  }

  .navbar__lang-toggle {
    width: auto;
    gap: 0.35rem;
  }

  .navbar__lang-code--toggle {
    display: inline;
    min-width: 0;
    font-size: 0.875rem;
  }

  .navbar__link--icon {
    padding: 0 0.75rem;
  }

  .navbar__link--icon .icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Icons only on desktop (as on divintech.es); the label stays in the
     accessibility tree as the link's name. */
  .navbar__icon-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}