/* =============================================================
   Legacy Header & Navigation
   Visual design ported from liminalarc-legacy theme.
   No block-theme markup or plugins required.
   ============================================================= */


*, *::before, *::after { box-sizing: border-box; }

/* ----- Header Bar ----- */
.la-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  z-index: 2000;
  background: transparent;
  /* both sides mirror .la-container: clamp formula + centering offset when viewport > 1500px */
  padding: 0 calc(clamp(1.5rem, 9.9vw, 9rem) + max(0px, 50vw - 750px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
}

/* ----- Logo ----- */
/* Use .la-header .la-logo for higher specificity than about-us.css's bare .la-logo rule */
.la-header .la-logo {
  width: 180px;
  height: auto; /* override about-us.css's height: 53px which offsets centering */
  flex-shrink: 0;
  z-index: 9999;
  overflow: visible;
}
.la-header .la-logo a { display: block; }
.la-header .la-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- Desktop Nav Items ----- */
.la-desktop-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.la-desktop-nav > li {
  margin: 0 25px;
  height: 100%;
  display: flex;
  align-items: center;
}
.la-desktop-nav > li:last-child { margin-right: 0; }
.la-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  cursor: pointer;
}
.la-nav-link a,
.la-nav-link > span {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  display: block;
}
.la-nav-link a:hover { color: #6ce0b5; }
.la-nav-trigger:hover .la-nav-link > span { color: #6ce0b5; }
.la-nav-trigger:hover .la-dropdown-arrow { background-color: #6ce0b5; }

.la-dropdown-arrow {
  display: inline-block;
  width: 8px;
  height: 6px;
  background-color: #ffffff;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><polyline points='1,2 6,7 11,2' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><polyline points='1,2 6,7 11,2' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* ----- Dropdown Panels ----- */
/* Positioned as siblings to .la-header inside .site-wrapper (position:relative) */
.la-dropdown-panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 130px;
  z-index: 1999;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.la-dropdown-panel.is-visible { display: block; }

/* Invisible bridge: lets the mouse move from the nav item to the dropdown */
.la-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
}

.la-dropdown-inner {
  margin: 40px calc(clamp(1.5rem, 9.9vw, 9rem) + max(0px, 50vw - 750px));
  padding-bottom: 10px;
}

/* ----- What We Do Grid ----- */
.la-facade-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 30px;
  column-gap: clamp(30px, 4vw, 60px);
}
.la-facade-grid::after { display: none; }
.la-facade-item.col-left  { grid-column: 1 / 5; }
.la-facade-item.col-right { grid-column: 5 / 9; }
.la-practices-col {
  grid-column: 9 / 13;
  grid-row: 1 / 5;
  border-left: 2px solid #e3e7e9;
  padding-left: 30px;
}

.la-facade-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.la-facade-item-header {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: nowrap;
}
.la-facade-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.la-facade-icon.hover-icon { display: none; }
.la-facade-item:hover .la-facade-icon.default-icon { display: none; }
.la-facade-item:hover .la-facade-icon.hover-icon   { display: block; }

.la-facade-item h4 {
  margin: 0;
  font-family: leo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #062935;
}
.la-facade-item h4 a {
  color: inherit;
  text-decoration: none;
}
/* Stretch the link's clickable area over the whole item (icon, title, description) */
.la-facade-item h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.la-facade-item:hover h4 a { color: #259271; }
.la-facade-item p {
  margin: 0;
  font-family: leo, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #666666;
  font-style: italic;
}

/* Practices column */
.la-practices-col > h4 {
  font-family: brandon-grotesque, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #333333;
  margin: 0 0 16px;
}
.la-practice-link {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: leo, sans-serif;
  font-size: 16px;
  color: #146e8c;
  text-decoration: none;
  line-height: 2.85;
}
.la-practice-link img {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.la-practice-link:hover {
  color: #259271;
  font-weight: bold;
  text-decoration: none;
}
.la-practice-link:hover img {
  opacity: 1;
}

/* ----- About Us Grid ----- */
.la-about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 30px;
  column-gap: clamp(30px, 4vw, 60px);
}
.la-about-grid::after { display: none; }
.la-about-item { display: flex; flex-direction: column; gap: 10px; position: relative; cursor: pointer; }
.la-about-item:nth-child(1) { grid-column: 1 / 5; }
.la-about-item:nth-child(2) { grid-column: 5 / 9; }
.la-about-item:nth-child(3) { grid-column: 1 / 5; }
.la-connect-col {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  border-left: 2px solid #e3e7e9;
  padding-left: 30px;
}

.la-about-item-header {
  display: flex;
  align-items: center;
  gap: 13px;
}
.la-about-icon {
  /* 15px (vs the facade icons' 16px) because several About glyphs are drawn
     edge-to-edge in their viewBox, so they read slightly larger in the same
     box; the 1px trim brings them in line with the What We Do set. */
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: block;
}
.la-about-icon.hover-icon { display: none; }
.la-about-item:hover .la-about-icon.default-icon { display: none; }
.la-about-item:hover .la-about-icon.hover-icon   { display: block; }

.la-about-item h4 {
  margin: 0;
  font-family: leo, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #062935;
}
.la-about-item h4 a { color: inherit; text-decoration: none; }
/* Stretch the link's clickable area over the whole item (icon, title, description) */
.la-about-item h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.la-about-item:hover h4 a { color: #259271; }
.la-about-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #666666;
  font-style: italic;
}

.la-connect-col > h4 {
  font-family: brandon-grotesque, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #333333;
  margin: 0 0 16px;
}
/* Placement mirrors the footer social row: centered, evenly spaced, modestly sized */
.la-connect-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}
/* Styling matches the Practices icons: brand teal, faded, solid on hover */
.la-connect-social a img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.4;
  filter: brightness(0) saturate(100%) invert(16%) sepia(46%) saturate(3656%) hue-rotate(175deg) brightness(93%) contrast(89%);
  transition: opacity 0.2s ease;
}
/* YouTube glyph sits smaller within its canvas; nudge it up to match the others */
.la-connect-social a img[alt="YouTube"] {
  width: 20px;
  height: 20px;
}
.la-connect-social a:hover img {
  opacity: 1;
}

/* ----- Mobile Hamburger Bar ----- */
.la-mobile-bar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2001;
  height: 80px;
  /* Match .la-container padding so the logo aligns to the grid. The mobile bar
     shows <=1100px: container is 6.5vw/6rem (992-1100), 6vw/3rem (<=991, set below). */
  padding: 0 clamp(1.5rem, 6.5vw, 6rem);
  align-items: center;
  justify-content: space-between;
}
.la-mobile-logo img {
  height: 35px;
  width: auto;
  display: block;
}
.la-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}
.la-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* ----- Mobile Overlay ----- */
.la-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0e4d64;
  overflow-y: auto;
  flex-direction: column;
}
.la-mobile-overlay li { list-style: none; }
.la-mobile-overlay.is-open { display: flex; }
body.la-mobile-open { overflow: hidden; }

.la-mobile-menu-items {
  list-style: none;
  margin: 120px 0 0 !important;
  padding: 0 !important;
}
.la-mobile-menu-items > li {
  border-bottom: 1px solid rgba(227, 219, 219, 0.2);
}
.la-mobile-menu-items > li:first-child {
  border-top: 1px solid rgba(227, 219, 219, 0.2) !important;
}
.la-mobile-menu-items::before {
  content: '' !important;
  display: block !important;
  height: 6px !important;
  background: rgba(227, 219, 219, 0.2) !important;
  width: 100% !important;
}
@media (max-width: 768px) {
  .la-mobile-menu-items::before { height: 4px !important; }
}
.la-mobile-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 9.9vw, 9rem);
  height: 50px;
  margin: 10px 0;
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.la-mobile-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.la-mobile-chevron.rotated { transform: rotate(180deg); }

/* Mobile submenu */
.la-mobile-submenu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  max-height: 0;
  padding: 0 clamp(1.5rem, 9.9vw, 9rem);
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.la-mobile-submenu.is-open {
  max-height: 1400px;
  padding: 20px clamp(1.5rem, 9.9vw, 9rem);
}

.la-mobile-sub-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
}
.la-mobile-sub-item img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.la-mobile-sub-item a {
  font-family: leo, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: #062935;
  text-decoration: none;
}
.la-mobile-practices-list {
  display: flex;
  flex-direction: column;
}
.la-mobile-practices-label {
  padding-top: 40px;
  margin-bottom: 8px;
  font-family: brandon-grotesque, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666666;
}
.la-mobile-practice-link {
  display: block;
  font-family: leo, sans-serif;
  font-size: 16px;
  color: #146e8c;
  text-decoration: none;
  line-height: 1;
  margin: 20px 0;
}

/* Tap/hover feedback on mobile menu items — matches the desktop hover colors.
   :active gives feedback on touch where :hover doesn't fire reliably. */
.la-mobile-item-link { transition: color .15s ease; }
.la-mobile-item-link:hover,
.la-mobile-item-link:active { color: #6ce0b5; }
.la-mobile-sub-item a,
.la-mobile-practice-link { transition: color .15s ease; }
.la-mobile-sub-item a:hover,
.la-mobile-sub-item a:active,
.la-mobile-practice-link:hover,
.la-mobile-practice-link:active { color: #259271; }

/* Mobile social links shown at the bottom of the overlay */
.la-mobile-social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px clamp(1.5rem, 9.9vw, 9rem);
}
.la-mobile-social a img {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

/* ----- Site wrapper — no top padding; header is transparent and overlays content ----- */
.site-wrapper { padding-top: 0; }

/* ----- Hero: push content and background image below the transparent header ----- */
#hero {
  padding-top: calc(5rem + 130px);
  min-height: calc(min(50vw + 80px, 670px) + 130px);
  max-height: calc(670px + 130px);
}
#hero::before { background-position-y: calc((min(50vw + 80px, 670px) - var(--hero-image-h)) / 2 - 1.5rem + 130px); }
#fa-hero { padding-top: calc(5.5rem + 130px); }
#pa-hero { padding-top: calc(5.5rem + 130px); }
/* The facade hero artwork uses `background-size: auto 100%` against the padding
   box, so the nav-clearance padding above scales it up versus the modern site
   (which has no overlay-header padding). Subtract the clearance so the mountain
   renders at the same visual height as modern. Scoped >=768px so the <=767px
   mobile rule in styles.css is left untouched. */
@media (min-width: 1101px) {
  #fa-hero { background-size: auto calc(100% - 130px); }
}
@media (min-width: 891px) and (max-width: 1100px) {
  #fa-hero { background-size: auto calc(100% - 80px); }
}
/* Tech Modernization: nudge the mountain right in the mid range where the
   composed image sits a touch too far left. */
@media (min-width: 891px) and (max-width: 1444px) {
  #fa-hero[data-slug=technology-modernization] { background-position: right -150px bottom; }
}
@media (max-width: 1100px) {
  #hero {
    padding-top: calc(5rem + 80px);
    min-height: calc(min(50vw + 80px, 670px) + 80px);
    /* Let the hero grow with content at <=1100px so stacked service offerings
       aren't clipped by overflow:hidden (the doc has no max-height here). */
    max-height: none;
  }
  #hero::before { background-position-y: calc((min(50vw + 80px, 670px) - var(--hero-image-h)) / 2 - 1.5rem + 80px); }
  #fa-hero { padding-top: calc(5.5rem + 80px); }
  #pa-hero { padding-top: calc(5.5rem + 80px); }
}
/* At <=991px the hero swaps to the full-bleed photo (per the hero handoff doc),
   which is meant to fill behind the transparent header — the ::after scrim's
   solid-navy top hides the nav->hero seam. The desktop nav-clearance Y-offset
   above pushes that photo down, leaving an uneven navy bar; reset it so the
   photo fills (background-position 60% 65% per the doc). */
@media (max-width: 991px) {
  #hero::before { background-position-y: 65%; }
}

/* ----- Responsive breakpoint 1100px (matches hero/workshop switch) ----- */
@media (max-width: 1100px) {
  .la-desktop-nav,
  .la-dropdown-panel,
  .la-header .la-logo { display: none !important; }
  .la-mobile-bar      { display: flex; }
  /* Collapse desktop header padding so it doesn't show below the mobile bar */
  .la-header { padding-top: 0; padding-bottom: 0; height: 80px; }
  /* No top padding; header overlays content on mobile too */
  .site-wrapper { padding-top: 0; }
  /* Match header background to the overlay when the mobile menu is open */
  body.la-mobile-open .la-header { background: #0e4d64; }
  /* Lower header and mobile bar under overlay content when the menu is scrolled */
  body.la-menu-scrolled .la-header,
  body.la-menu-scrolled .la-mobile-bar { z-index: 1; }
  /* Overlay: always rendered at mobile but off-screen left; slide in on open */
  .la-mobile-overlay {
    display: flex;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .la-mobile-overlay.is-open {
    transform: translateX(0);
  }
}
@media (min-width: 1101px) {
  .la-mobile-bar     { display: none !important; }
  .la-mobile-overlay { display: none !important; }
}

/* ----- Keep header + mobile bar aligned to the .la-container grid -----
   .la-container narrows its padding at these breakpoints; the header/bar must
   follow so the logo and nav stay within the content grid. */
@media (min-width: 1101px) and (max-width: 1199px) {
  .la-header {
    padding-left: clamp(1.5rem, 6.5vw, 6rem);
    padding-right: clamp(1.5rem, 6.5vw, 6rem);
  }
}
@media (max-width: 991px) {
  .la-mobile-bar {
    padding-left: clamp(1.25rem, 6vw, 3rem);
    padding-right: clamp(1.25rem, 6vw, 3rem);
  }
}

/* ----- No underline on link hover, anywhere -----
   Bootstrap's reboot re-adds an underline on :hover; the design never wants it.
   Intentional underlines (e.g. .notification-link .underline) are unaffected. */
a:hover,
a:focus {
  text-decoration: none;
}

/* ----- Content-template pages (privacy policy, terms, etc.) -----
   These have a light background and no dark hero, so the transparent header
   leaves the white nav invisible. Give the header a solid navy bar (homepage
   hero color) and offset the content below the absolute header. */
.page-template-template-content-php .la-header,
.page-template-template-content-php .la-mobile-bar,
body.single-jobs .la-header,
body.single-jobs .la-mobile-bar {
  background: #062935;
}
.page-template-template-content-php .site-wrapper,
body.single-jobs .site-wrapper { padding-top: 130px; }
@media (max-width: 1100px) {
  .page-template-template-content-php .site-wrapper,
  body.single-jobs .site-wrapper { padding-top: 80px; }
}
/* Individual job pages: title sits on the page background (no band), aligned to the
   narrow content column and sized down; rebrand body copy; space before the job-board box. */
body.single-jobs .content-heading {
  background: transparent;
  width: 92%;
  max-width: 600px;
  margin: 0 auto;
  padding: 60px 0 40px;
}
body.single-jobs .content-heading h1 {
  max-width: none;
  margin: 0;
  color: #062935;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
}
body.single-jobs .main-article .blog-layout {
  font-family: leo, sans-serif;
  color: #4a6670;
  font-size: 17px;
  line-height: 1.7;
}
/* Breathing room between the copy and the (white) job-board embed */
body.single-jobs .eoe.the-content { margin-bottom: 2.5rem; }
body.single-jobs .main-article { padding-bottom: 3rem; }