/**
 * Feature: menu-bar
 * Safe to remove if: feature/module no longer used
 *
 * Tokens available:
 * - See assets/css/tokens.css (var(--lfd-color-accent), etc.)
 *
 * Recommended scope class:
 * - Add "lfd-menu-bar" to the module/section/row in your builder and scope under it.
 */

:root{
  /* Tunables to match the reference precisely */
  --nav-breakpoint: 1024px;              /* switch between inline nav and hamburger */
  --header-h: 89px;                      /* header height */
  --header-padding-x: 20px;              /* left/right padding inside header */
  --header-padding-x-lg: 24px;
  --brand-weight: 700;
  --link-weight: 600;
  --text: #0a0a0a;
  --text-dim: #3a3a3a;
  --white: #ffffff;
  --black: #000000;
  --sky: #23356B;                        /* brand accent (adjust to match reference) */
  --border: rgba(0,0,0,0.08);
  --shadow: 0 1px 0 rgba(0,0,0,0.06);

  /* Motion */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 400ms;
  /* Ease similar to modern product sites (tweak to match reference) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Mobile menu slide distance */
  --menu-translate-y: -100%;
  --menu-backdrop: rgba(0,0,0,0.4);

  /* Hamburger sizes */
  --burger-w: 24px;
  --burger-h: 16px;
  --burger-stroke: 2px;
  --burger-gap: 7px;

  /* Focus and border radius utilities */
  --focus-offset: 2px;
  --focus-width: 2px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;

  /* Performance and accessibility */
  --scroll-threshold: 2px;
  --throttle-limit: 16;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast: 120ms;
    --dur: 160ms;
    --dur-slow: 200ms;
    --menu-translate-y: -12px; /* shorter travel */
  }
  * {
    scroll-behavior: auto !important;
    animation-duration: var(--dur) !important;
    transition-duration: var(--dur) !important;
  }
}

html {
  scrollbar-gutter: stable;
}
html,
body.has-lf-header-menu {
  height: 100%;
}

/* Focus utility class */
/*.focus-ring:focus-visible {
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}*/

/* Sticky header */
.site-header{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  will-change: background-color, color, transform, box-shadow;
  background: transparent;

/*  background: linear-gradient(
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);*/

  color: #fff;
  transition:
    background-color var(--dur) var(--ease-in-out),
    color var(--dur) var(--ease-in-out),
    box-shadow var(--dur) var(--ease-in-out),
    border-color var(--dur) var(--ease-in-out);
  border-bottom: 1px solid transparent;
}
/* When scrolled or menu-open, header goes solid with subtle border */
.site-header.is-solid{
  background: var(--white);
  color: var(--text);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow);
}

.header-inner{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-padding-x);
  gap: 16px;
}
@media (min-width: 600px){
  .header-inner{ padding: 0 var(--header-padding-x-lg); }
}

/* Brand */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: currentColor;
  font-weight: var(--brand-weight);
  letter-spacing: -0.01em;
  font-size: 18px;
  line-height: 1;
  padding: 8px 6px;
  border-radius: var(--border-radius-md);
  transition: color var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out);
}
/*.brand:focus-visible{
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}*/
.brand-logo{
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: var(--border-radius-sm);
  background: currentColor; /* simple block as a placeholder logo; color tracks header text */
  transform: translateZ(0);
  transition: filter var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out);
}
.brand:hover .brand-logo{
  filter: brightness(1.08);
}

/* Inline desktop nav */
.nav-inline{
  display: none;
  align-items: center;
  gap: 22px;
}
.nav-inline a{
  text-decoration: none;
  color: currentColor;
  font-weight: var(--link-weight);
  font-size: 15px;
  letter-spacing: 0;
  padding: 10px 6px;
  border-radius: var(--border-radius-md);
  transition: background-color var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out);
}
.nav-inline a:hover{
  color: var(--sky);
  background: rgba(0,0,0,0.03);
}
/*.nav-inline a:focus-visible{
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}*/

/* Hamburger button (mobile/tablet) */
.menu-toggle{
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: currentColor;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out);
}
.menu-toggle:hover{
  background: rgba(255,255,255,0.08);
}
.site-header.is-solid .menu-toggle:hover{
  background: rgba(0,0,0,0.06);
}
/*.menu-toggle:focus-visible{
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}*/

/* --- Start Hamburger Lines Fix --- */
.menu-toggle .lines {
  position: relative;
  display: block;
  width: var(--burger-w);
  height: var(--burger-h);
}

.menu-toggle .lines span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--burger-stroke);
  background: currentColor;
  border-radius: 2px;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) var(--ease-in-out),
    background-color var(--dur-fast) var(--ease-in-out);
}

/* Position each line in the default "hamburger" state */
.menu-toggle .lines span:nth-child(1) {
  top: 0;
}

.menu-toggle .lines span:nth-child(2) {
  top: var(--burger-gap);
}

.menu-toggle .lines span:nth-child(3) {
  bottom: 0;
}

/* Animate lines to "X" when the menu is open */
.site-header.menu-open .menu-toggle .lines span:nth-child(1) {
  transform: translateY(var(--burger-gap)) rotate(45deg);
}

.site-header.menu-open .menu-toggle .lines span:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .menu-toggle .lines span:nth-child(3) {
  transform: translateY(calc(-1 * var(--burger-gap))) rotate(-45deg);
}
/* --- End Hamburger Lines Fix --- */


/* When menu is open, header becomes solid and uses dark text */
.site-header.menu-open{
  background: var(--white);
  color: var(--text);
  /*border-bottom-color: var(--border);*/
  border-bottom-color: transparent;
  /*box-shadow: var(--shadow);*/
  box-shadow: none;
}

/* Responsive switch: show hamburger under breakpoint; inline nav above */
@media (min-width: calc(var(--nav-breakpoint))) {
  .menu-toggle{ display: none; }
  .nav-inline{ display: inline-flex; }
}

/* Slide-down menu panel */
.menu-panel{
  position: fixed;
  inset: 0;
  z-index: 999; /* just below header z-index+? header is sticky 1000 */
  display: grid;
  grid-template-rows: auto 1fr;
  pointer-events: none; /* off when hidden */
}
.menu-panel[hidden]{
  display: none;
}
.menu-overlay{
  grid-row: 1 / -1;
  grid-column: 1;
  background: var(--menu-backdrop);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-in-out);
}
.menu-content{
  grid-row: 1;
  grid-column: 1;
  transform: translateY(var(--menu-translate-y));
  background: var(--white);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  border-bottom: 1px solid var(--border);
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-fast) var(--ease-in-out);
  opacity: 0.98;
  will-change: transform;
}
.menu-panel.is-active{
  pointer-events: auto;
}
.menu-panel.is-active .menu-overlay{
  opacity: 1;
}
.menu-panel.is-active .menu-content{
  transform: translateY(0);
  opacity: 1;
}

/* Menu content layout */
.menu-inner{
  /*padding: 0 var(--header-padding-x) 28px;*/
    padding-left: 30px;
    padding-right: 30px;
}
/*@media (min-width: 600px){
  .menu-inner{
    padding-left: var(--header-padding-x-lg);
    padding-right: var(--header-padding-x-lg);
  }
}*/

.menu-head{
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-title{
  font-size: 16px;
  font-weight: var(--brand-weight);
  letter-spacing: -0.01em;
}

.menu-nav{
  display: grid;
  gap: 8px;
  padding: 26px 0 12px;
}
.menu-nav a {
  display: block;
  text-decoration: none;
  color: var(--text);
  /*font-weight: var(--link-weight);*/
  font-size: 21px;
  padding: 14px 8px;
  /*border-radius: var(--border-radius-lg);*/
  /*transition: background-color var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out), transform var(--dur-fast) var(--ease-in-out);*/
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  color: #929194;
}
.menu-nav a:hover {
  /*background: rgba(0,0,0,0.04);*/
  /*color: var(--sky);*/
  opacity: 0.5;
}
/*.menu-nav a:focus-visible{
  outline: var(--focus-width) solid currentColor;
  outline-offset: var(--focus-offset);
}*/
.menu-foot{
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.menu-foot a{
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 6px;
  border-radius: var(--border-radius-md);
}
.menu-foot a:hover{ color: var(--text); background: rgba(0,0,0,0.04); }
/*.menu-foot a:focus-visible{ outline: var(--focus-width) solid currentColor; outline-offset: var(--focus-offset); }*/

/* Utility for visually hidden (screen reader only) */
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* No-scroll state (body) when menu is open */
body.has-lf-header-menu.no-scroll{
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* When the WP admin bar is showing */
body.admin-bar .site-header,
body.admin-bar .menu-panel {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .menu-panel {
    top: 46px;
  }
}

/* SVG logo */
.re-logo-container svg {
    height: 75px;
    width: auto;
    display: block;
}
.logo-circle-outer { fill: #C5D12E; }
.logo-circle-inner { fill: #23356B; }
.logo-text-re .glyph { fill: #fff; }
/*.logo-text-design .glyph { fill: #666; }*/
.logo-text-design .glyph {
    fill: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s linear;
}
/*.logo-text-dot-build .glyph { fill: #393d7b; }*/
.logo-text-dot-build .glyph {
    fill: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s linear;
}

header.is-solid .logo-text-design .glyph { fill: #929194; }
header.is-solid .logo-text-dot-build .glyph { fill: #23356B; }

.menu-panel {
  font-family: 'Inter',Helvetica,Arial,Lucida,sans-serif;
}



.menu-nav {
  padding: 10px 0 10px;
  display: flex;
  flex-direction: column;   /* stacked by default (mobile & tablet) */
  gap: 10px;                /* vertical spacing between links */
}

.menu-nav a {
  text-decoration: none;
  display: block;           /* make each link take full width when stacked */
  padding: 10px 0;
}

/* Desktop only (Divi: >980px) */
@media (min-width: 981px) {
  .menu-nav {
    flex-direction: row;    /* horizontal */
    gap: 30px;              /* horizontal spacing */
  }

  .menu-nav a {
    display: inline-block;  /* inline for horizontal layout */
    padding: 0;             /* remove vertical padding if desired */
  }
}