/**
 * Max Mega Menu — Baker Construction
 * Custom styling for the primary navigation bar and mega menu panels.
 *
 * Scope: rules are namespaced to #main-nav / #mega-menu-wrap-primary-navigation
 * so they can't leak into other menus (footer, mobile slide-out, etc.).
 *
 * Palette: orange #f38511 / #f48f24 · blue eyebrow #4A8BA4 · hover bg #f7f7f7
 */

/* =========================================================================
   1. Top bar layout — keep the primary nav + search on a single row (desktop)
   -------------------------------------------------------------------------
   MMM outputs a flat <ul>; without help it wraps to two rows because the
   theme's .navbar-nav utility list stretches to fill the flex row. We size
   the search list to its content and let the menu take the remaining space.

   Breakpoint matches the active MMM theme (responsive_breakpoint: 992px in
   lib/custom/mega-menu-theme.php) — the horizontal menu shows at >=993px; below
   that MMM swaps to its mobile toggle, so these desktop rules don't apply.
   ========================================================================= */
@media (min-width: 993px) {
  #main-nav .nav-links {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  /* Menu sizes to its content and never wraps to a second row */
  #mega-menu-wrap-primary-navigation {
    flex: 0 1 auto;
    min-width: 0;
  }
  #mega-menu-primary-navigation.mega-menu {
    white-space: nowrap;
  }

  /* Spacing between top-level nav items (MMM has no margin setting; padding
     would widen the hover underline, so we use margin between items instead) */
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation.mega-menu > li.mega-menu-item + li.mega-menu-item {
    margin-left: 16px !important;
  }

  /* Search utility: content width only, pinned to the far right */
  #main-nav .nav-links > ul.navbar-nav {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 0 0 1.5rem !important;
  }
}

/* =========================================================================
   2. Mega panel alignment — anchor panels to the header container's left
   -------------------------------------------------------------------------
   By default MMM positions each mega panel absolutely relative to the <li>
   that triggers it, so the panel opens under that item (e.g. ~558px in).
   We instead make the header .container-fluid the positioning context: every
   ancestor between it and the panel is set to `position: static`, so the
   absolutely-positioned panel resolves against the container. The panel then
   spans the full container width and its content starts at the container's
   left edge, matching the client design.

   !important is used deliberately — MMM regenerates its style.css (note the
   ?ver= cache-buster) with high-specificity, ID-doubled selectors, so we
   guard these positioning rules against specificity drift.

   Scoped to MMM's desktop range (>=993px) so the mobile accordion (<=992px)
   is left entirely to MMM.
   ========================================================================= */
@media (min-width: 993px) {
  #main-nav .container-fluid {
    position: relative !important;
  }

  /* Neutralize positioning on every ancestor between container and panel */
  #main-nav .nav-links,
  #mega-menu-wrap-primary-navigation,
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation.mega-menu,
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item.mega-menu-megamenu {
    position: static !important;
  }

  /* Panel resolves against .container-fluid and aligns to its content box.
     top:100% pins it to the container's bottom edge. Required because MMM sets
     the panel's `top` to the *menu item* height (~49px); once we re-anchor to
     the taller .container-fluid, that stale value would float the panel ~9px up
     into the nav bar on hover. 100% keeps it flush at the bar's bottom. */
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu {
    top: 100% !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
  }
}

/* =========================================================================
   3. Card widgets (baker-mm-*) — content dropped into the mega panels
   -------------------------------------------------------------------------
   Scoped to the primary-navigation wrap. Markup comes from the widgets in
   lib/custom/mega-menu-widgets.php.
   ========================================================================= */

/* Card containers reset any inherited MMM panel-link styling */
#mega-menu-wrap-primary-navigation .baker-mm-card,
#mega-menu-wrap-primary-navigation .baker-mm-image-card,
#mega-menu-wrap-primary-navigation .baker-mm-feature {
  display: block;
  color: inherit;
  text-decoration: none;
}
#mega-menu-wrap-primary-navigation a.baker-mm-card,
#mega-menu-wrap-primary-navigation a.baker-mm-image-card {
  text-decoration: none;
}

/* Shared: blue subtitle eyebrow */
#mega-menu-wrap-primary-navigation .baker-mm-card__subtitle,
#mega-menu-wrap-primary-navigation .baker-mm-image-card__subtitle,
#mega-menu-wrap-primary-navigation .baker-mm-feature__subtitle {
  display: block;
  margin-bottom: 0.35rem;
  color: #4a8ba4;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Shared: orange chevron CTA */
#mega-menu-wrap-primary-navigation .baker-mm-card__cta,
#mega-menu-wrap-primary-navigation .baker-mm-image-card__cta,
#mega-menu-wrap-primary-navigation .baker-mm-feature__cta {
  display: inline-block;
  margin-top: 0.75rem;
  color: #f48f24;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__cta::before,
#mega-menu-wrap-primary-navigation .baker-mm-image-card__cta::before,
#mega-menu-wrap-primary-navigation .baker-mm-feature__cta::before {
  content: "\203A"; /* › */
  margin-right: 0.4em;
  font-weight: 700;
}
/* CTAs ("Read More" / "Learn More") do not underline on hover — the card's
   shadow/zoom is the affordance. */

/* Card hover affordances (only when the card is a link) */
#mega-menu-wrap-primary-navigation .baker-mm-card {
  transition: box-shadow 0.2s ease;
}
#mega-menu-wrap-primary-navigation a.baker-mm-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__img {
  transition: transform 0.35s ease;
}
#mega-menu-wrap-primary-navigation a.baker-mm-image-card:hover .baker-mm-image-card__img {
  transform: scale(1.05);
}

/* --- 3a. Baker Card (image-top content card) --- */
#mega-menu-wrap-primary-navigation .baker-mm-card {
  height: 100%;
  background: #fff;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__media {
  overflow: hidden;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__content {
  padding: 1rem 1.15rem 1.25rem;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__title {
  margin: 0 0 0.4rem;
  color: #111;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__body {
  color: #444;
  font-size: 0.85rem;
  line-height: 1.45;
}
#mega-menu-wrap-primary-navigation .baker-mm-card__body p {
  margin: 0;
  font-size: 0.85rem;
}

/* --- 3b. Baker Image Card (background photo + overlay) --- */
#mega-menu-wrap-primary-navigation .baker-mm-image-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  height: 100%;
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__subtitle {
  color: rgba(255, 255, 255, 0.85);
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__title {
  display: block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}
#mega-menu-wrap-primary-navigation .baker-mm-image-card__cta {
  margin-top: 0.5rem;
}

/* --- 3c. Baker Feature Block (heading + copy + CTA, optional side image) --- */
#mega-menu-wrap-primary-navigation .baker-mm-feature--has-img {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature--img-left {
  flex-direction: row-reverse;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__content {
  flex: 1 1 0;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__media {
  flex: 0 0 42%;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__title {
  margin: 0 0 0.6rem;
  color: #f48f24;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__text {
  color: #333;
  font-size: 0.85rem;
  line-height: 1.5;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__text p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature__text p:last-child {
  margin-bottom: 0;
}

/* White-background variant (What We Do): white card. Content is padded; the side
   image bleeds to the card's edges (stretch + no gap). Toggled by the widget's
   "White background" checkbox -> .baker-mm-feature--white. */
#mega-menu-wrap-primary-navigation .baker-mm-feature--white {
  background: #fff;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature--white.baker-mm-feature--has-img {
  align-items: stretch;
  gap: 0;
}
#mega-menu-wrap-primary-navigation .baker-mm-feature--white .baker-mm-feature__content {
  padding: 1.75rem;
}

/* --- 3d. Baker Title (heading widget) --- */
/* The heading itself uses `mega-block-title`, so it inherits the theme's panel
   header styling automatically. The optional link inherits that orange colour. */
#mega-menu-wrap-primary-navigation .baker-mm-title a {
  color: inherit !important;
  text-decoration: none;
}

/* =========================================================================
   4. Column divider utility — `.right-border`
   -------------------------------------------------------------------------
   Apply the `right-border` class to a column (Mega Menu builder > the column's
   gear icon > "Enter a class") to add a vertical divider on that column's right
   edge. The column immediately after it gets matching left padding so the rule
   sits in an even gutter. For the mock's Who We Are panel, add it to the two
   link columns (Our Company, Our Culture) and leave it off the card columns.
   ========================================================================= */
/* Both the prefixed and unprefixed class are matched. MMM emits `mega-right-border` always,
   and the bare `right-border` only while the "prefix menu classes" setting is disabled — which
   it is on this site, but re-enabling it (or restoring onto a site without that tweak) would
   silently stop these rules matching. */
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.right-border,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.mega-right-border {
  position: relative;
}
/* Full-height divider drawn as an absolute line, shifted in from the column's
   right edge so it sits centered in the whitespace gutter between the two link
   columns (rather than pinned to the column boundary). Tune `right` if a panel's
   column widths differ noticeably. */
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.right-border::after,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.mega-right-border::after {
  content: "";
  /* Required. MMM's own reset carries `li.mega-menu-column:after { display: none }`, so
     without this the pseudo-element generates no box at all and the divider silently never
     renders — which is what was happening. */
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 47px;
  width: 1px;
  background: rgba(0, 0, 0, 0.45);
}
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.right-border + .mega-menu-column,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.mega-right-border + .mega-menu-column {
  padding-left: 30px;
}

/* =========================================================================
   5. Panel link hover — blue underline hugging the text (per design)
   -------------------------------------------------------------------------
   Second-level links turn blue on hover (theme: panel_second_level_font_color_hover)
   and gain a matching blue bottom border. inline-block keeps the border under the
   text rather than spanning the full column width. !important is needed because
   MMM's link rules carry very high (ID-doubled + multi-class) specificity.
   ========================================================================= */
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column a.mega-menu-link {
  display: inline-block !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column a.mega-menu-link:hover,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column a.mega-menu-link:focus {
  border-bottom-color: rgb(90, 138, 162) !important;
}

/* =========================================================================
   6. Top-level nav hover — orange underline
   -------------------------------------------------------------------------
   Same treatment as the panel links, but orange, for the main horizontal nav.
   Shows on hover/focus and while an item's mega panel is open (.mega-toggle-on).
   ========================================================================= */
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item > a.mega-menu-link {
  border-bottom: 2px solid transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  border-bottom-color: rgb(244, 143, 36) !important;
}

/* =========================================================================
   7. Card to the top — `mm-card-full`
   -------------------------------------------------------------------------
   Panels are built as a 12/12 title row + a content row below it, so an image
   card in the content row sits *below* the title. Add `mm-card-full` to the
   card's column (builder > column gear > "Enter a class") to pull it up level
   with the title and give it a min-height, so it reads as a tall card anchored
   at the top of the panel.

   This is done with a negative margin + min-height (NOT absolute positioning):
   the card stays in normal flow, so the panel always grows to contain it and it
   can never overflow. Tune `margin-top` to the title-row height (~47px for a
   single-line Baker Title) and `min-height` to taste. Only apply the class to
   panels that actually have the separate title row.
   ========================================================================= */
@media (min-width: 993px) {
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.mm-card-full {
    margin-top: -47px;
  }
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column.mm-card-full .baker-mm-image-card {
    min-height: 300px;
  }
}

/* =========================================================================
   8. Tight-desktop link sizing
   -------------------------------------------------------------------------
   Just above MMM's 992px mobile breakpoint the link columns get thin, and long
   slash-labels ("Sports/Entertainment", "Residential/Hospitality") would run
   under an adjacent full-height card. Shrink the link text in that range so the
   labels stay on one line and clear the card. `overflow-wrap` is a safety net so
   an over-long label wraps instead of overlapping at the very narrowest widths.
   The link font-size is a theme value (panel_second_level_font_size: 16px), so
   the responsive override has to live here with !important.
   ========================================================================= */
#mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column a.mega-menu-link {
  overflow-wrap: break-word;
}
@media (min-width: 993px) and (max-width: 1240px) {
  #mega-menu-wrap-primary-navigation #mega-menu-primary-navigation .mega-menu-column a.mega-menu-link {
    font-size: 0.8rem !important;
  }
}