/*
 * layout.css — container, header (sticky nav, submenu, mobile menu,
 * language switch) and footer.
 *
 * Shared by every page of the site (home now, other sections in phase 2).
 */

/* ---------------------------------------------------------------------- */
/* Container                                                               */
/* ---------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}

/* Applied by header.js once the header has scrolled to the top of the
   viewport, reproducing the original mystickymenu behaviour (fixed +
   0.3s fade to 90% opacity). Position is already "sticky" above so no
   layout jump is needed. */
.site-header.is-stuck {
  opacity: 0.9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 130px;
}

.site-branding {
  /* This is the actual flex item inside .site-header__inner — it must
     not shrink, or the logo gets silently compressed below its
     declared 330px width at narrow viewports (found while verifying
     the logo's rendered width against the live site). */
  flex-shrink: 0;
}

.site-branding__link {
  display: block;
  flex-shrink: 0;
}

.site-branding__logo {
  /* Matches the live site's actual rendered header logo, verified with
     a container-scoped selector (#ast-desktop-header .custom-logo /
     #ast-mobile-header .custom-logo) and a cropped screenshot check —
     330x69 at every width (1440/1024/390), i.e. the theme's own
     330px default. An earlier measurement wrongly picked up a second,
     unrelated 100x21 logo instance that only exists inside the
     Complianz cookie-consent banner markup (document order put it
     before the real header logo). */
  width: 330px;
  height: auto;
}

/* ---------------------------------------------------------------------- */
/* Main navigation (desktop)                                               */
/* ---------------------------------------------------------------------- */

.main-nav {
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: none;
}

.menu {
  display: flex;
  align-items: center;
  list-style: none;
}

.menu > .menu-item {
  position: relative;
}

.menu-link {
  display: block;
  padding: 0 17px;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  white-space: nowrap;
}

/* Only the current page's nav item is red by default; the rest are
   near-black and turn red on hover/focus. */
.menu-item.current > .menu-link {
  color: var(--color-brand-red);
}

.menu-link:hover,
.menu-link:focus-visible {
  color: var(--color-brand-red);
}

/* Submenu (PROYECTOS > PLANOS / OBRAS) */

.menu-item--has-submenu {
  display: flex;
  align-items: center;
}

/* Visible at every width: a small chevron next to "PROYECTOS" showing
   it has a submenu. On desktop it's a plain inline indicator (the
   submenu itself opens on hover/focus); on mobile it becomes a full
   tap target — see the max-width:767px rule below. */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  color: inherit;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 17px;
  min-width: 160px;
  background: var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    visibility var(--transition-fast);
}

.menu-item--has-submenu:focus-within .submenu,
.menu-item--has-submenu.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover-to-open is a mouse-only affordance. On a touch device a tap
   leaves the element "stuck" in :hover with no pointer to move away
   and unhover it, which fought the .is-open toggle. Gate it to devices
   that actually have a hover-capable, fine pointer (a real mouse);
   touch/coarse-pointer devices rely on :focus-within and the explicit
   .submenu-toggle button (via .is-open) instead. */
@media (hover: hover) and (pointer: fine) {
  .menu-item--has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.submenu .menu-link {
  padding: 12px 17px;
  color: var(--color-text);
}

.submenu .menu-link:hover,
.submenu .menu-link:focus-visible {
  color: var(--color-brand-red);
  background: var(--color-bg-light);
}

/* Language switch (GTranslate, script mode) */

.lang-switch {
  position: relative;
  margin-left: 8px;
}

.lang-switch__current {
  display: flex;
  align-items: center;
  padding: 4px;
}

.lang-switch__flag {
  width: 24px;
  height: 24px;
  /* border-radius: 50%; */
}

.lang-switch__menu {
  position: absolute;
  top: 100%;
  right: 0;
  list-style: none;
  background: var(--color-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    visibility var(--transition-fast);
}

.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu,
.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-switch__menu a {
  display: block;
  padding: 8px;
}

/* ---------------------------------------------------------------------- */
/* Mobile navigation ( <= 767px, matches the live site's Astra breakpoint) */
/* ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* .site-header__inner keeps its 130px min-height from the desktop
     rule — the live site does not shrink the header on mobile
     (measured: 130px tall at both 390px and 1440px). */

  /* .site-branding__logo stays 330px — the live site does not shrink
     the logo on mobile either (verified: 330x69 at 390px too). This
     does mean the logo + toggle slightly overflow a 390px viewport on
     the live site itself (measured scrollWidth 417 vs clientWidth
     390); reproduced here rather than silently "fixed", since the
     instruction was to match the measured rendered size. */

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    color: var(--color-brand-red);
  }

  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    display: block;
    width: 24px;
    height: 2px;
    /* Red, matching the live site's icon (currentColor SVG) rather than
       a plain black hamburger. */
    background: currentColor;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .nav-toggle__bar {
    position: relative;
  }

  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle__bar::before {
    top: -8px;
  }

  .nav-toggle__bar::after {
    top: 8px;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    max-height: 0;
    overflow: hidden;
    /* Closed menu links were still reachable by Tab (max-height/overflow
       only clip them visually). visibility:hidden removes them from
       the tab order and accessibility tree too. Timed so it flips to
       hidden only after the collapse transition finishes, but to
       visible immediately on open — the usual visibility-transition
       trick (browsers step a visibility transition at the end when
       animating toward "hidden", and at the start when animating
       toward "visible"). */
    visibility: hidden;
    transition: max-height var(--transition-fast),
      visibility var(--transition-fast);
  }

  .main-nav.is-open {
    max-height: 90vh;
    overflow-y: auto;
    visibility: visible;
  }

  .menu {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
  }

  .menu > .menu-item {
    border-top: 1px solid var(--color-divider);
  }

  .menu > .menu-item:first-child {
    border-top: 0;
  }

  .menu-link {
    padding: 14px var(--container-padding);
  }

  .menu-item--has-submenu {
    flex-wrap: wrap;
  }

  .menu-item--has-submenu .menu-link {
    flex: 1;
  }

  .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .submenu-toggle svg {
    transition: transform var(--transition-fast);
  }

  .menu-item--has-submenu.is-open .submenu-toggle svg {
    transform: rotate(180deg);
  }

  .submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-fast);
    width: 100%;
  }

  /* No :hover/:focus-within rule here on purpose: on a touch device a
     tap leaves the element in a "stuck" :hover/:focus state (there is
     no real pointer to move away), which previously kept max-height
     forced open forever regardless of the .is-open class the toggle
     button controls — the submenu could open but never visually
     collapse again. At this width the .submenu-toggle button (driven
     by header.js) is the sole, authoritative control; hover-driven
     opening is desktop-only (see the pointer:fine rule above). */
  .menu-item--has-submenu.is-open .submenu {
    max-height: 200px;
  }

  .submenu .menu-link {
    padding-left: 34px;
  }

  .lang-switch {
    width: 100%;
    margin-left: 0;
    border-top: 1px solid var(--color-divider);
  }

  .lang-switch__current {
    padding: 14px var(--container-padding);
  }

  .lang-switch__menu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .lang-switch.is-open .lang-switch__menu {
    display: block;
  }
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.site-footer {
  background: var(--color-brand-red);
  color: var(--color-white);
  padding: 26px 0;
}

.site-footer__inner {
  text-align: center;
  font-size: 1rem;
}

/* base.css's global `p { color: var(--color-text-soft); }` rule has
   higher specificity than inheriting from .site-footer, so it was
   silently overriding the white footer text. State it explicitly. */
.site-footer p {
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-white);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: rgba(255, 255, 255, 0.8);
}