/* ==========================================================================
   Chrome — logo, header, primary nav, contact band, footer
   §5: header/footer backgrounds full-bleed; contents on the 1200px column.
   ========================================================================== */

/* ---- Logo (inline SVG; fills mapped from the SVG's own classes) ---- */
.logo .cls-2 { fill: var(--navy); }
.logo .cls-3 { fill: var(--teal); }
.logo .cls-4 { fill: var(--white); }
.logo .cls-5 { fill: var(--gold); }

/* Dark-background lockup: swap navy only (brief) */
.on-navy .logo .cls-2 { fill: var(--white); }

.site-logo {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}

.site-logo .logo {
  width: auto;
  height: var(--header-logo-h);
}

/* ==========================================================================
   Header — sticky at all breakpoints (overrides §5 "Not sticky"; see CLAUDE.md)
   z-index 50 sits above all content (.marco corners are z-index 1) and below
   the skip link (100). The bottom border separates it from scrolled content.
   Exception: mobile without JS. There the nav is always open inside the header
   (about 350px tall), so pinning it would cover half the screen. It stays static.
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule-header);
}

.js .site-header {
  position: sticky;
  top: 0;
}

@media (min-width: 60em) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

/* Anchor jumps (#servicios, the Aviso contents, the skip link) and focus
   scrolling land below the pinned header. Same conditions as the sticky rule. */
html.js {
  scroll-padding-top: var(--header-offset);
}

@media (min-width: 60em) {
  html {
    scroll-padding-top: var(--header-offset);
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}

/* ---- Menu toggle (mobile, JS only — ships with [hidden], JS reveals) ---- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-button);
  line-height: var(--lh-ui);
  cursor: pointer;
}

.menu-toggle[aria-expanded="true"] {
  background: var(--navy);
  color: var(--white);
}

.menu-toggle[hidden] {
  display: none;
}

/* ---- Primary nav: shared ---- */
.site-nav__list a {
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-ui);
  font-stretch: var(--stretch-ui);
  line-height: var(--lh-ui);
  text-decoration: none;
}

.site-nav__list a[aria-current="page"] {
  font-weight: var(--fw-h3);
}

/* ---- Primary nav: mobile (< 960px) ----
   No JS: nav sits below the logo as full-width rows, always visible.
   JS: nav becomes a dropdown panel under the header (6.1 "Menú"). */
@media (max-width: 59.99em) {
  /* No-JS: rows run edge to edge, breaking out of the container padding */
  .site-nav {
    flex: 0 0 calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: calc(-1 * var(--space-2));
  }

  .site-nav__list a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px; /* whole row is the target */
    padding-inline: var(--gutter);
    border-top: 1px solid var(--rule);
  }

  .site-nav__list a:hover {
    background: var(--tint-teal);
  }

  /* Current page: gold bar is decorative; weight + aria-current carry the state */
  .site-nav__list a[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--gold);
  }

  .site-nav__list a:focus-visible {
    outline-offset: calc(-1 * var(--focus-width));
  }

  /* JS-enhanced panel */
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule-header);
    opacity: 0;
    transform: translateY(-8px);
    /* Header is pinned: keep the panel's own links reachable on short screens */
    max-height: calc(100vh - var(--header-offset));
    max-height: calc(100dvh - var(--header-offset));
    overflow-y: auto;
  }

  .js .site-nav.is-visible {
    display: block;
  }

  /* Opening animates; closing is instant (class removed with display) */
  .js .site-nav.is-open {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-menu) var(--ease-out),
                transform var(--dur-menu) var(--ease-out);
  }
}

/* ---- Primary nav: desktop (≥ 960px) — flat, short labels, no dropdowns ---- */
@media (min-width: 60em) {
  .menu-toggle,
  .menu-toggle[hidden] {
    display: none;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-2) var(--space-5);
  }

  .site-nav__list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  .site-nav__list a:not(.button):hover {
    text-decoration-line: underline;
    text-decoration-color: var(--teal);
    text-decoration-thickness: var(--link-line);
    text-underline-offset: 0.35em;
  }

  /* Current page: 3px gold bar — decorative, paired with weight + aria-current (§2.1) */
  .site-nav__list a:not(.button)[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    background: var(--gold);
  }

  .site-nav__list a:not(.button)[aria-current="page"]:hover {
    text-decoration-line: none;
  }

  /* Contacto as secondary button; current page = filled */
  .site-nav__list .button[aria-current="page"] {
    background: var(--navy);
    color: var(--white);
  }
}

/* The Contacto button only looks like a button on desktop */
@media (max-width: 59.99em) {
  .site-nav__list .button {
    justify-content: flex-start;
    min-height: 56px;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: var(--navy);
    font-weight: var(--fw-ui);
    white-space: normal;
  }

  .site-nav__list .button:hover {
    background: var(--tint-teal);
    color: var(--navy);
  }

  .site-nav__list .button[aria-current="page"] {
    font-weight: var(--fw-h3);
  }
}

/* ==========================================================================
   Contact band (§3.3.6) — shared end-of-page block, full-bleed navy
   ========================================================================== */
.contact-band {
  padding-block: var(--section-pad);
}

.contact-band__inner {
  display: grid;
  gap: var(--space-6) var(--col-gap);
}

.contact-band__details {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.contact-band__details .button {
  margin-top: var(--space-2);
}

@media (min-width: 48em) {
  .contact-band__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  .contact-band__inner > h2 {
    grid-column: 1 / span 6;
  }

  .contact-band__details {
    grid-column: 7 / span 6;
  }
}

/* The correo — large mailto, gold underline inside navy areas */
.contact-email {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-strong);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration-color: var(--gold);
}

.contact-hours {
  max-width: none;
}

/* ==========================================================================
   Footer (§5) — full-bleed navy, dark lockup
   ========================================================================== */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: 1px solid var(--navy-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer__top {
  display: grid;
  gap: var(--space-6) var(--col-gap);
  padding-bottom: var(--space-7);
}

.site-footer .site-logo .logo {
  height: 72px;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-ui);
  text-decoration-line: none;
}

.site-footer__nav a:hover {
  text-decoration-line: underline;
}

/* Current page: gold underline marker (on navy, 7.1:1) + weight */
.site-footer__nav a[aria-current="page"] {
  font-weight: var(--fw-h3);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
}

.site-footer__contact {
  display: grid;
  align-content: start;
}

.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--fs-ui);
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
  text-decoration-color: var(--gold);
}

.site-footer__label {
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
}

.site-footer__contact dd + dt {
  margin-top: var(--space-4);
}

.site-footer__bottom a[aria-current="page"] {
  font-weight: var(--fw-strong);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-muted);
}

.site-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

@media (min-width: 48em) {
  .site-footer__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .site-footer__top > .site-logo {
    grid-column: 1 / -1;
  }

  .site-footer__nav {
    grid-column: 1 / span 6;
  }

  .site-footer__contact {
    grid-column: 7 / span 6;
  }
}

@media (min-width: 60em) {
  .site-footer__top > .site-logo {
    grid-column: 1 / span 3;
    align-self: start;
  }

  .site-footer__nav {
    grid-column: 4 / span 5;
  }

  .site-footer__contact {
    grid-column: 9 / span 4;
  }
}