/* ──────────────────────────────────────────────
   Mobile menu overlay (shared across all pages).
   Uses the design tokens defined in each page's :root
   (--ink, --canvas, --green, --fd, --fb, --muted).
   ────────────────────────────────────────────── */

/* hamburger becomes a real button without changing its look */
.oel-ham {
  background: none;
  border: none;
  cursor: pointer;
}
.oel-ham span { transition: transform .3s ease, opacity .2s ease; }

.oel-mmenu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink, #0F1110);
  color: var(--canvas, #F5F4F0);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
.oel-mmenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.oel-menu-open { overflow: hidden; }

/* Sit below the WP admin bar when an admin is logged in, so the close
   button stays reachable. Logged-out visitors get the full-height overlay. */
.admin-bar .oel-mmenu { top: 46px; }
@media screen and (min-width: 783px) {
  .admin-bar .oel-mmenu { top: 32px; }
}

.oel-mmenu-top {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid rgba(245, 244, 240, .1);
  flex-shrink: 0;
}
.oel-mclose {
  background: none;
  border: none;
  color: var(--canvas, #F5F4F0);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--fb, sans-serif);
  font-weight: 300;
  padding: 4px 6px;
}

.oel-mmenu-links {
  list-style: none;
  margin: 0;
  padding: 36px 28px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.oel-mmenu-links li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.oel-mmenu.open .oel-mmenu-links li { opacity: 1; transform: translateY(0); }
.oel-mmenu.open .oel-mmenu-links li:nth-child(1) { transition-delay: .10s; }
.oel-mmenu.open .oel-mmenu-links li:nth-child(2) { transition-delay: .16s; }
.oel-mmenu.open .oel-mmenu-links li:nth-child(3) { transition-delay: .22s; }
.oel-mmenu.open .oel-mmenu-links li:nth-child(4) { transition-delay: .28s; }
.oel-mmenu.open .oel-mmenu-links li:nth-child(5) { transition-delay: .34s; }
.oel-mmenu.open .oel-mmenu-links li:nth-child(6) { transition-delay: .40s; }

.oel-mmenu-links a {
  display: block;
  font-family: var(--fd, "Cormorant Garamond", Georgia, serif);
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--canvas, #F5F4F0);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245, 244, 240, .08);
  transition: color .2s ease;
}
.oel-mmenu-links a:hover,
.oel-mmenu-links a.active,
.oel-mmenu-links .current-menu-item > a,
.oel-mmenu-links .current_page_item > a { color: var(--green, #ABE83D); }
.oel-mmenu-links a.active,
.oel-mmenu-links .current-menu-item > a { font-style: italic; }
/* WP menu items render as <li> with extra classes; keep them inline in the row */
.oel-mmenu-links li { list-style: none; }

.oel-mmenu-cta {
  display: block;
  margin: 12px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--green, #ABE83D);
  color: var(--ink, #0F1110);
  text-align: center;
  padding: 16px 20px;
  border-radius: 3px;
  font-family: var(--fb, sans-serif);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease .42s, transform .45s ease .42s, background .15s ease;
}
.oel-mmenu.open .oel-mmenu-cta { opacity: 1; transform: translateY(0); }

/* Safety: the overlay only matters on mobile; never show it on desktop. */
@media (min-width: 901px) {
  .oel-mmenu { display: none; }
}

/* The header CTA is an <a> styled as a button (border-bottom = its underline).
   Kill the default link underline so sub-pages don't show a double underline. */
.d-nav-cta { text-decoration: none; }

/* Footer LinkedIn icon. Desktop: grouped with the copyright on the right.
   Mobile: paired with the logo on the left. Muted to match footer text. */
.oel-foot-li { display: inline-flex; align-items: center; line-height: 0; color: #0A66C2; transition: color .15s ease, transform .15s ease; }
.oel-foot-li:hover { color: #2a8af0; transform: translateY(-1px); }
.oel-foot-li .oel-li-ico { display: block; }
.d-foot-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.m-foot-brand { display: flex; align-items: center; gap: 12px; }

/* Sticky header on desktop too (the mobile .m-nav is already sticky). Modals
   (.pm z-index:10000) and the mobile menu overlay (9999) stay above it. */
.d-nav { position: sticky; top: 0; z-index: 100; }