/*
 * Site shell primitives (roadmap.md Phase 1) — top nav for now.
 * Scoped under .site-nav so it wins on selector specificity over the Bootstrap 3 CDN
 * defaults without needing !important (shell.css loads after the Bootstrap <link>).
 * Mobile: Bootstrap's existing navbar-collapse (inline expand/collapse, no overlay) is
 * kept as-is — just restyled. Desktop switch point is 992px to match the existing
 * hidden-md hidden-lg toggle-button classes already in base.html, not the reference
 * implementation's own 1200px tier — this component's JS/CSS breakpoints have to agree.
 */

.site-nav {
  background: var(--off-white);
  border-bottom: var(--border-width) solid var(--green-grey);
  min-height: 0;
  padding-top: 0;
}

.site-nav .navbar-toggle {
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  margin: var(--space-3) var(--space-4) var(--space-3) 0;
}

.site-nav .navbar-toggle .icon-bar {
  background-color: var(--black);
}

.site-nav .navbar-toggle:hover,
.site-nav .navbar-toggle:focus {
  background-color: var(--green-hover);
}

.site-nav .navbar-collapse {
  background: var(--off-white);
  border-top: var(--border-width) solid var(--green-grey-low-light);
  box-shadow: none;
}

.site-nav .nav-top,
.site-nav .nav-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav .nav-top > .nav-item > a,
.site-nav .nav-sub > .nav-item > a {
  display: block;
  height: auto !important;
  font-family: var(--font-family-base);
  color: var(--black);
  background-color: transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.site-nav .nav-top > .nav-item > a {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--green-grey-low-light);
}

/* First channel link — the one right after .nav-brand — gets a matching hairline on its
   left, so the logo and the channel list read as visually separated (border-right
   already separates it from the second item; this adds the missing left edge). */
.site-nav .nav-top > .nav-item:first-child > a {
  border-left: var(--border-width) solid var(--green-grey-low-light);
}

.site-nav .nav-sub > .nav-item > a {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-copy);
  color: var(--black-70);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--green-grey-low-light);
}

.site-nav .nav-top > .nav-item > a:hover,
.site-nav .nav-sub > .nav-item > a:hover {
  background-color: var(--green-hover);
  color: var(--black);
}

.site-nav .nav-top > .nav-item > a.active {
  background-color: transparent;
  color: var(--black);
  border-bottom-color: var(--black);
}

.site-nav .nav-sub > .nav-item > a.active {
  background-color: transparent;
  color: var(--black);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 992px) {
  .site-nav .navbar-collapse {
    border-top: none;
  }

  .site-nav .nav-top,
  .site-nav .nav-sub {
    display: flex;
    flex-wrap: wrap;
  }

  .site-nav .nav-top > .nav-item > a,
  .site-nav .nav-sub > .nav-item > a {
    border-bottom: none;
    border-right: var(--border-width) solid var(--green-grey-low-light);
  }

  .site-nav .nav-top > .nav-item > a.active {
    border-bottom: 2px solid var(--black);
  }

  /* Edge to edge: cancel .navbar-collapse's 15px side padding, restore it inside. */
  .site-nav .nav-sub {
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
    border-top: var(--border-width) solid var(--green-grey-low-light);
  }

  /* A line under every wrapped row (the link border is cleared above on desktop);
     -1px lets the last row share the nav's own bottom border instead of doubling. */
  .site-nav .nav-sub > .nav-item {
    border-bottom: var(--border-width) solid var(--green-grey-low-light);
    margin-bottom: -1px;
  }
}

/* Language switcher — now lives only in the nav (was previously duplicated in the
   footer and in the navegacio_laterals.html floating side tabs; both removed). */

.site-nav .nav-lang #languages {
  float: none;
  margin: 0;
  padding: 0;
  display: flex;
  border: var(--border-width) solid var(--green-grey);
  width: fit-content;
}

.site-nav .nav-lang #languages button {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--green-grey);
  background-color: transparent;
  border: none;
  border-right: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  box-shadow: none;
}

.site-nav .nav-lang #languages button:last-child {
  border-right: none;
}

.site-nav .nav-lang #languages button:hover {
  background-color: var(--green-hover);
  color: var(--black);
}

.site-nav .nav-lang #languages button.active {
  color: var(--black);
}

@media (min-width: 992px) {
  .site-nav .nav-top-row {
    display: flex;
    align-items: center;
  }

  .site-nav .nav-lang {
    padding: 0 var(--space-4);
    margin-left: auto;
  }
}

/* Brand — first element in .nav-top-row (mobile: stacks above the channel list inside
   the collapse; desktop: flex, flush left, with .nav-lang's margin-left:auto above
   pushing everything else to the right of it). Always the red ("Vermell") logo variant,
   since the nav's background is fixed off-white — unlike the old header spot, which
   swapped to a white ("Blanc") variant on obra/film/autor/project detail pages for
   contrast against a dark backdrop image. That per-page white-variant override
   (`{% block logohamaca %}` in those four templates) has no equivalent here and is now
   dead code, left in place rather than touched across four templates in this pass. */

.site-nav .nav-brand {
  display: block;
  padding: var(--space-2);
}

.site-nav .nav-brand img {
  display: block;
  width: 200px;
  height: auto;
}

.site-nav .nav-brand--mobile {
  float: left;
  padding: var(--space-2) var(--space-4);
}

.site-nav .nav-brand--mobile img {
  width: 160px;
  max-width: calc(100vw - 100px);
}

/* Open phone menu starts below the floated logo and toggle instead of flowing beside them. */
@media (max-width: 991px) {
  .site-nav .navbar-collapse {
    clear: both;
  }
}

/*
 * Footer — same reference-implementation vocabulary as the nav. Off-white to match
 * everything else built so far (nav, filter section, detail pages) rather than keeping
 * the old solid-black treatment as a deliberate dark "bookend" — flagging this as a
 * default I picked, not a confirmed decision, since the light/dark question for the
 * shell was never explicitly settled.
 */

.site-footer {
  background: var(--off-white);
  border-top: var(--border-width) solid var(--green-grey);
  color: var(--black);
  padding: var(--space-8) var(--space-6);
}

.site-footer a {
  color: inherit;
}

/* The sitemap row was previously built on Bootstrap's col-lg-offset-1/col-lg-2 grid,
   which only ever filled 9 of 12 columns — hence the lopsided, undefined-looking gap
   on the right. Flexbox with even distribution replaces that grid math entirely, and
   both rows are capped at the same centered content width used everywhere else on the
   site (--content-width-desktop, from tokens.css) instead of running full-bleed. */

.site-footer .footer-block-links,
.site-footer .footer-secondary {
  max-width: var(--content-width-desktop);
  margin-left: auto;
  margin-right: auto;
}

.site-footer .footer-block-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.site-footer .footer-block-links .footMenuLists {
  float: none;
  width: auto;
  flex: 1 1 160px;
  max-width: 220px;
  padding: 0;
  margin: 0;
}

.site-footer .footMenuSecTitl {
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.site-footer .footMenuLists > ul > li > ul > li > a {
  display: block;
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-copy);
  color: var(--black-70);
  text-decoration: none;
}

.site-footer .footMenuLists > ul > li > ul > li > a:hover {
  color: var(--hamaca-red);
}

.site-footer .social-links {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  border: none;
  padding-right: 0;
}

.site-footer .social-icon-btn,
.site-footer #Maillogo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-grow: 0;
  border: var(--border-width) solid var(--green-grey);
  transition: background-color var(--transition-fast);
}

.site-footer .social-icon-btn svg,
.site-footer #Maillogo svg {
  width: auto;
  height: 18px;
}

.site-footer .social-icon-btn:hover,
.site-footer #Maillogo:hover {
  background-color: var(--green-hover);
}

.site-footer #FBlogo path,
.site-footer #TWlogo path,
.site-footer #VMlogo path,
.site-footer #INSTAlogo path,
.site-footer #FLCKRlogo path,
.site-footer #Maillogo path {
  fill: var(--black) !important;
}

.site-footer #FBlogo:hover path,
.site-footer #TWlogo:hover path,
.site-footer #VMlogo:hover path,
.site-footer #INSTAlogo:hover path,
.site-footer #FLCKRlogo:hover path,
.site-footer #Maillogo:hover path {
  fill: var(--hamaca-red) !important;
}

/* Second footer row: social links // newsletter // session. Every interactive element
   in this row is exactly 50px tall — matching .social-icon-btn — so the row aligns on
   one consistent edge regardless of which group it's in. At desktop the three groups
   are spread across the row with space-around; below that they stack. */

.site-footer .footer-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-between;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--green-grey-low-light);
}

.site-footer .footerForm {
  padding: 0;
  margin: 0;
  flex-grow: 2;
}

.site-footer .subscription {
  text-align: left;
  margin: 0;
  margin-left: var(--spacing-6);
}

.site-footer .footer-newsletter-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  justify-content: space-between;
}

@media (min-width: 992px) {
  .site-footer .footer-secondary {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .site-footer .social-links {
    padding-right: var(--space-8);
    border-right: solid 1px var(--green-grey);
  }

  .site-footer .footer-newsletter-row {
    flex-direction: row;
    gap: var(--space-3);
  }
}


.site-footer #mce-EMAIL {
  box-sizing: border-box;
  height: 50px;
  width: 100%; 
  margin: 0;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--black);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
}

.site-footer .subscripBtn {
  box-sizing: border-box;
  height: 50px;
  margin: 0;
  padding: 0 var(--space-5);
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--black);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.site-footer .subscripBtn:hover {
  background-color: var(--green-hover);
}

.site-footer .footer-session {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: var(--space-1);
}

@media (min-width: 992px) {
  .site-footer .footer-session {
    padding-left: var(--space-8);
    border-left: solid 1px var(--green-grey); 
    flex-direction: row;
    align-items: center; 
    gap: var(--space-3);
  }
}

.site-footer .footer-meta {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--black-70);
  white-space: nowrap;
}

.site-footer .footer-session-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 50px;
  margin: 0;
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--green-grey);
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast);
}

.site-footer .footer-session-btn:hover {
  background-color: var(--green-hover);
}

/* The home-only header band that used to sit under the nav was removed. Legacy pages
   with a .top_background image used to start below it, so the top .homeSpace spacer
   keeps that height to hold the content under the image. */
body:has(.top_background) nav.site-nav + .homeSpace {
  margin-bottom: calc(18vh + 2 * var(--space-6) + var(--border-width));
}