/*
 * Navbar desktop layout (global-templates/navbar-collapse-bootstrap5.php +
 * global-templates/navbar-branding.php).
 *
 * The markup, the "fixed + scrolled" header behaviour and the hamburger
 * open/close logic already work and are handled by jQuery living in
 * js/Legacy_child-theme.js / js/Legacy_new-child-theme.js (DO NOT touch those
 * files, see .claude/context/project-context.md). What is genuinely missing is
 * a *desktop* layout: every rule that touches #main-menu in
 * css/Legacy_new-child-theme.css (~lines 47325-47481) styles it exclusively as
 * an off-canvas full-height panel (.menu-wrapper is "position: fixed; right:
 * -100vw" sliding to "right: 0" on ".show"), even at >=1200px where it is just
 * a narrower off-canvas panel. There is no rule anywhere that lays the nav
 * links out inline in the header row, which is what the mock
 * (mocks/matteria_hero_section.png) shows on desktop.
 *
 * This file only touches the >=992px (lg) breakpoint - the same one already
 * used across the codebase (hero.css, customers.css ribbon logos). Below
 * 992px nothing changes: the off-canvas hamburger panel keeps working exactly
 * as it does today.
 *
 * These selectors intentionally mirror, chain-for-chain, the ones in
 * Legacy_new-child-theme.css so that - loaded after 'child-understrap-styles'
 * via matteria_custom_components_assets() - they win by source order at equal
 * specificity, the same technique documented in hero.css. Where the legacy
 * off-canvas rules use "!important" (the dropdown-menu position/transform
 * lock), matching "!important" declarations are the only way to win that
 * specific property back for desktop; this is a deliberate, scoped exception
 * to the project's "avoid !important" rule, not a shortcut.
 */

/* Header row: logo on the left, nav/off-canvas trigger on the right, at every
   breakpoint. Legacy_new-child-theme.css already sets this same
   display:flex/justify-content on .header-wrapper (line ~47279) - restated
   here so the row layout is owned by our own component file rather than
   relying on the legacy bundle for it. */
.main-nav .header-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Same reasoning as hero.css: Bootstrap's stock .container caps at 1320px
     (>=1400px). Edge padding itself comes from the shared ".container-edge"
     class (css/components/_layout.css, applied on this element's markup) -
     this just drops the max-width cap so padding is the only width bound. */
  max-width: 100%;
}

/* Logo visibility bug (pre-existing, not caused by this file): on
   .page-template-home-page, before any scroll, Legacy_new-child-theme.css
   hides BOTH logo images - "body.page-template-home-page .custom-logo-link
   .green { display: none !important; }" (line ~47240) with no matching
   default for ".dark" (which is "display: none" by default, only becoming
   visible under ".scrolled", line ~47268). Result: an empty top-left corner
   until the user scrolls. There is no white logo asset (only logo_black.png
   / Ebony Clay and logo_green.png / Jonquil, see img/), so the mock's white
   "matteria_" wordmark is produced here with a CSS filter (brightness(0)
   invert(1) turns opaque pixels white, transparent stays transparent) on the
   existing dark asset, rather than adding a new image file.

   On the home page the nav background only ever alternates between
   transparent (over the hero) and solid dark (.nav-dark, past the hero - see
   below), never white, so the logo stays white throughout - no need to
   revert the filter on ".scrolled" like a white-background page would. */
.page-template-home-page .main-nav .header-wrapper .custom-logo-link .dark {
  display: block !important;
  filter: brightness(0) invert(1);
}

/* Sentinel (page-templates/home-page.php, right after #hero-header) used by
   js/components/navbar.js to detect "scrolled past the hero" via
   IntersectionObserver. Zero footprint so it doesn't affect the hero/ribbon
   peek spacing tuned in hero.css/customers.css. */
#hero-sentinel {
  height: 0;
  pointer-events: none;
}

/* The inherited ".scrolled" class (jQuery, scrollTop > 80px, see
   js/Legacy_new-child-theme.js) fires far too early for a hero this tall -
   still deep inside the transparent hero - and would otherwise force a white
   background (Legacy_new-child-theme.css, ".main-nav.scrolled") and dark
   nav-link/logo colors meant for a white background. On the home page we
   drive the solid-background state exclusively off the sentinel/
   IntersectionObserver instead (".nav-dark", set by navbar.js), so ".scrolled"
   is neutralized here and nav text/logo stay white throughout - both the
   transparent hero and the solid-dark past-hero state need white content. */
.page-template-home-page .main-nav.scrolled {
  background-color: transparent;
}

.page-template-home-page .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
.page-template-home-page .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
  color: #ffffff;
}

/* Solid dark background once the user has scrolled past the hero (sentinel
   out of view above the viewport - see navbar.js). Source order after the
   ".scrolled" neutralizer above so it wins when both classes are present
   (equal specificity, ".nav-dark" declared later). */
.page-template-home-page .main-nav.nav-dark {
  background-color: var(--color-dark);

}
.navbar-toggler-light {
  filter: brightness(0) invert(1);
}

/* Off-canvas mobile panel (below 992px, see Legacy_new-child-theme.css
   ~line 47324: ".menu-wrapper" is "width: 100vw; position: fixed").
   "#main-menu" there carries a legacy "margin-right: -20px", meant to pull
   the list under its own reserved scrollbar gutter ("overflow-y: scroll")
   so the gutter doesn't eat into the visible 20px left margin. On touch
   devices scrollbars overlay with zero reserved width, so that -20px just
   pulls the whole list flush against the screen's right edge instead -
   links/dropdown items lose all breathing room on the right. Neutralized
   below 992px only; the >=992px rules further down replace this off-canvas
   panel with the inline desktop menu entirely. */
@media screen and (max-width: 991.98px) {
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu {
    margin-right: 0;
    padding-right: 20px;
  }

  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu {
    padding-right: 20px;
  }

  /* Safety net: if the menu list (its own "max-height: 70vh" scroll) plus
     the hero banner below (see .navbar-hero-banner) plus the footer add up
     to more than the panel's fixed "height: 100vh" on a short phone, the
     overflow would otherwise be genuinely unreachable (a fixed-position
     panel with visible overflow isn't scrollable by any other element).
     Letting the whole panel scroll keeps everything reachable. */
  .main-nav .header-wrapper .menu-wrapper {
    overflow-y: auto;
  }
}

/* Off-canvas hero-side banner ("La IA al dIA #N", home template only - see
   navbar-collapse-bootstrap5.php/global-templates/hero-side-card.php). This
   reuses the same ACF-driven markup as the desktop hero column's own card
   (".hero-side", hero.css "#hero-header .hero-side-*"), but that file's
   rules are scoped to "#hero-header" so none of it ever reached this second
   copy - it rendered as plain unstyled text/link/image. Restated here as a
   compact single-row banner (thumbnail + clamped title + CTA), not a tall
   stacked card - the off-canvas panel has no room to spare above the nav
   list + footer without forcing ".menu-wrapper" to scroll (see its
   "overflow-y: auto" safety net above). Hidden at lg (".navbar-hero-banner
   d-lg-none" in the markup) since the real desktop card already shows
   separately in the hero itself, so no need to gate this on a media query. */
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner {
  margin-top: 24px;
  padding: 0 20px;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-label {
  display: block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  padding: 10px 12px;
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-image {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 130%;
  padding: 0;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-link {
  flex: 0 0 auto;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  white-space: nowrap;
  text-decoration: underline;
}

@media screen and (min-width: 992px) {

  /* Off-canvas toggler ("hamburger" button in the header, and the "x" close
     icon rendered inside .menu-wrapper) is meaningless once the menu is a
     static inline row - the mock's desktop header shows only the logo and
     the nav links. */
  .main-nav .header-wrapper .navbar-toggler {
    display: none;
  }

  /* Undo the off-canvas panel (fixed, full height, dark background sliding in
     from the right) and let .menu-wrapper sit as a normal flex item in
     .header-wrapper's row (which already has justify-content: space-between),
     right next to the logo. */
  .main-nav .header-wrapper .menu-wrapper {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    background-color: transparent;
    color: inherit;
    transition: none;
  }

  .main-nav .header-wrapper .menu-wrapper.show {
    right: auto;
  }

  /* Decorative overlay only relevant to the off-canvas panel. */
  .main-nav .header-wrapper .menu-wrapper::after {
    content: none;
  }

  /* "Contacte" CTA + language switcher were only ever meant for the
     off-canvas panel; the mock's desktop header doesn't show them. */
  .main-nav .header-wrapper .menu-wrapper .navbar-footer {
    display: none;
  }

  /* Horizontal nav row, vertically centered against the logo. */
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  /* Compact inline nav typography (Montserrat UI text) instead of the
     off-canvas panel's large Raleway display sizes (23-33px). */
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 14px;
    color: #ffffff;
    transition: color 0.2s ease-in-out;
  }
  @media screen and (min-width: 1200px) {
    .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
    .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
      font-size: 16px;
    }
  }

  /* Links are white over the transparent/gradient hero header; once
     .main-nav.scrolled kicks in (existing scroll-based class, see
     js/Legacy_new-child-theme.js) they switch to the same dark tone already
     used for the logo swap in that state. Excludes the home page: there,
     ".scrolled" is neutralized in favour of the sentinel-driven ".nav-dark"
     (see above), and nav text stays white against both the transparent hero
     and the solid-dark past-hero background - never against white. */
  body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
  body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
    color: var(--color-dark);
  }

  /* Reset the dropdown ("Serveis", "Sobre nosaltres") from the off-canvas
     forced in-flow accordion style back to a normal small Bootstrap popover:
     override position/transform (the only way to win those two properties
     back from the legacy "!important" off-canvas lock) and restore the
     default Bootstrap dropdown chrome (white surface, border, radius) instead
     of the transparent/borderless off-canvas look. */
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 8px;
    padding: 8px 0;
    min-width: 200px;
    border: 1px solid rgba(44, 44, 68, 0.08);
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 12px 24px rgba(44, 44, 68, 0.12);
  }

  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li {
    color: var(--color-dark);
  }

  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 20px;
    color: var(--color-dark);
  }

  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li:hover .dropdown-item {
    background-color: rgba(44, 44, 68, 0.06);
    color: var(--color-dark);
  }

  /* Desktop: reveal the dropdown on hover, on top of the click-to-toggle
     behaviour Bootstrap's JS already provides via data-bs-toggle="dropdown"
     (class-wp-bootstrap-navwalker.php) - both keep working together since
     this only forces "display", it doesn't touch the ".show" class Bootstrap
     manages on click. ".dropdown" is the class the navwalker adds to any
     parent <li> that has children (line ~143). Click/tap remains the only
     trigger below this breakpoint (off-canvas mobile panel). */
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* Put #main-menu-nav (the nav) and the new desktop language switcher
     (".navbar-lang-desktop", see navbar-collapse-bootstrap5.php) inline next
     to each other without making .menu-wrapper itself flex - it also
     (conditionally, home template only) wraps ".navbar-hero-banner", a
     pre-existing block-stacked element with its own separate, unrelated
     layout that this shouldn't touch. inline-flex + vertical-align on just
     these two is enough to sit them side by side in normal flow. */
  .main-nav .header-wrapper .menu-wrapper #main-menu-nav {
    display: inline-flex;
    vertical-align: middle;
  }

  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop {
    vertical-align: middle;
    margin-left: 28px;
  }

  /* Compact desktop language switcher - a second, independent instance of
     custom_wpml_language_selector() (functions.php) from the one in
     .navbar-footer above, which stays sized for the mobile off-canvas panel
     (large Raleway type) and is hidden here. Typography matches the compact
     Montserrat nav links right next to it. */
  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a {
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
  }

  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a:hover {
    opacity: 1;
  }

  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a {
    opacity: 1;
    color: var(--color-primary);
  }

  /* "/" separator between languages, e.g. "CA / ES" - drawn between items
     rather than after each one so there's no trailing separator. */
  .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before {
    content: "/";
    margin: 0 8px;
    color: rgba(255, 255, 255, 0.4);
  }

  /* Same dark-on-white swap as the nav links (body:not(.page-template-home-page)
     .main-nav.scrolled rule above) - never applies on the home page, where
     ".scrolled" is neutralized and the header stays transparent/dark. */
  body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a {
    color: var(--color-dark);
  }

  body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before {
    color: rgba(44, 44, 68, 0.4);
  }
}