/*
Theme Name: VaxHub Sustainable AR2025
Description: VaxHub Template
Version: 4.9.5
Author: Michele D'Agnano
Template: brooklyn
*/

/* ========================= TYPOGRAPHY / MISC ========================= */
.hero {
    height: 60%;
    min-height: 60%;
    position: relative;
    overflow: hidden;
    text-align: center;
}

h1, h2, h4 {
  font-family: 'acumin-pro-condensed';
  font-weight: 700;
}
h3 {
  font-family: 'acumin-pro-condensed';
  font-weight: 600;
}

#header-section #navigation.ut-horizontal-navigation a {
  font-family: 'acumin-pro-condensed';
  font-size: 18px !important;
  font-weight: 700 !important;
}

#primary .section-title,
#ut-custom-hero .section-title,
#ut-custom-contact-section .section-title {
  font-family: 'acumin-pro-condensed';
  font-weight: 700;
}

#ut-sitebody .ut-horizontal-navigation ul.sub-menu li:last-child { padding-bottom: 20px; }
#ut-sitebody .ut-horizontal-navigation ul.sub-menu li:first-child { padding-top: 20px; }

a.next-portfolio-details, a.prev-portfolio-details { display: none; }

.lg-sub-html {
  color: #eee;
  font-size: 14px !important;
  padding: 10px 40px;
  line-height: 22px !important;
}

.bklyn-sidenav-scroll {
  height: 100%;
  padding: 100px calc(19%) 32px 19% !important;
  overflow-x: hidden;
  width: calc(100% + 17px);
  z-index: 100;
}

@media (max-width: 1024px) {
  .ut-mobile-menu a:hover { background: rgba(255, 255, 255, 1);
	}
}

@media (max-width: 767px) {
  .site-logo .logo {
    font-size: 23px !important;
    line-height: 1.1;
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }
}


/* Base styling for the search inside the menu */
.menu-item-search .search-form {
    display: block;
    padding: 10px 15px;
}

.menu-item-search .search-field {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
}

/* Optional: tweak the icon if your search form uses one */
.menu-item-search .fa-search {
    margin-right: 6px;
}

/* Hide search menu item on larger screens (desktop) */
@media (min-width: 993px) {
    .menu-item-search {
        display: none !important;
    }
}

/* Ensure it’s visible in the burger / mobile menu */
@media (max-width: 992px) {
    .menu-item-search {
        display: block !important;
    }
}

input {
	
	color: #fff !important;

}




/* ====================== ACCESSIBLE FOCUS (GREEN) ====================== */
/* Universal focus style (white halo + green ring). */
:where(a,button,input,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"])):not([disabled]):focus,
:where(a,button,input,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"])):not([disabled]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1AE50A !important;
  position: relative; z-index: 2;
}

/* Links also underline on focus for clarity */
a:focus, a:focus-visible { text-decoration: underline !important; }

/* Inputs: slightly tighter ring */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
button:focus, button:focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1AE50A !important;
}

/* Header nav often sits on dark background — ensure high contrast */
.site-header :is(a,button):focus,
.site-header :is(a,button):focus-visible {
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1AE50A !important;
}

/* Prevent clipping when containers use overflow:hidden */
:where(*)[style*="overflow:hidden"] :where(a,button,[role="button"],[role="link"],[tabindex]):focus,
:where(*)[style*="overflow:hidden"] :where(a,button,[role="button"],[role="link"],[tabindex]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1AE50A !important;
}

/* =========================== GLOBAL VARS ============================ */
/* Header height (used by mobile nav). Adjust if your sticky header height changes. */
:root { --site-header-height: 72px; }

/* ============================== SKIP LINK =========================== */
/* HTML (after wp_body_open):
   <a class="skip-link" href="#main-content">Skip to main content</a>
*/

/* Hidden until focused; compact; never full-width */
html body .skip-link {
  position: fixed;
  z-index: 2147483647 !important; /* above everything */
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;

  /* hidden off-screen until focus */
  left: -9999px !important;
  top: auto !important;

  padding: .625rem .9rem;
  background: #fff;
  color: #000;
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.15);
  text-decoration: none;
  line-height: 1.2;

  /* neutralize any visually-hidden utilities */
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* Top-center reveal on focus (with safe-area/admin-bar offsets) */
html body .skip-link:focus,
html body .skip-link:focus-visible {
  left: 50% !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  transform: translateX(-50%); /* center horizontally */
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1AE50A;
}
body.admin-bar .skip-link:focus,
body.admin-bar .skip-link:focus-visible {
  top: calc(env(safe-area-inset-top, 0px) + 44px) !important; /* below WP admin bar */
}

/* Ensure main content focus target & offset under sticky header */
#main-content { scroll-margin-top: var(--site-header-height, 80px); }
#main-content:focus { outline: 3px solid #1AE50A; outline-offset: .2rem; }

/* ====================== MOBILE MENU / 400% REFLOW ===================== */

/* Make the off-canvas panel a true, independent scroll container */
#ut-mobile-nav {
  position: fixed;
  top: var(--site-header-height);
  right: 0;
  left: 0;
  background: #0e0e0e;
  color: #fff;
  isolation: isolate;
  height: calc(100dvh - var(--site-header-height));
  max-height: calc(100dvh - var(--site-header-height));
  overflow-y: auto;                 /* panel scrolls, not the page */
  -webkit-overflow-scrolling: touch;
  z-index: 9999;
  will-change: transform;
}

/* Inner lists behave naturally */
#ut-mobile-nav .ut-mobile-menu,
#ut-mobile-nav .ut-mobile-menu > ul,
#ut-mobile-nav ul.sub-menu {
  max-height: none;
  overflow: visible;
}

/* Keep focused items clear of the sticky header when scrolled into view */
#ut-mobile-nav a:focus,
#ut-mobile-nav a:focus-visible,
#ut-mobile-nav button:focus,
#ut-mobile-nav button:focus-visible {
  scroll-margin-top: 16px;
}

#ut-mobile-nav a { color: #fff; }
#ut-mobile-nav .current-menu-item > a,
#ut-mobile-nav a:focus,
#ut-mobile-nav a:hover {
  color: #1AE50A;
}

/* Don’t let page wrappers clip the panel */
#ut-sitebody, #header-section, .wrapper, .header { overflow: visible !important; }

/* Allow body lock when menu open (if you add .menu-open via JS) */
html.menu-open, body.menu-open { overflow: hidden; }

/* Reduced motion: avoid smooth-scroll lag at high zoom */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Extra Brooklyn aliases seen in variants */
.ut-mobile-menu-panel,
.ut-mobile-menu-container,
#ut-mobile-navigation {
  max-height: 100dvh;
  overflow-y: auto;
}

/* ----------------- MOBILE MENU HOOKS ----------------- */
#ut-mobile-nav[hidden]{ display: none; }
#ut-mobile-toggle:focus-visible{ outline: 3px solid #1AE50A; outline-offset: 3px; }

/* ----------------- LOGO AT DESKTOP 400% ZOOM ----------------- */
/* Shrink text logo at desktop 400% zoom (≈320–500px CSS width), not phones */
@media (max-width: 500px) and (hover: hover) and (pointer: fine) {
  /* wrappers */
  #header-section .site-logo-wrap,
  #header-section .site-logo,
  #header-section .ut-site-logo,
  #header-section .custom-logo-link {
    max-height: none !important;
  }
  /* text link */
  #header-section .site-logo-wrap a,
  #header-section .site-logo a,
  #header-section .ut-site-logo a,
  #header-section .custom-logo-link {
    display: inline-block;
    font-size: 18px !important;  /* adjust 16–20px to taste */
    line-height: 1.1 !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    word-break: break-word;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ===================== Text logo: tidy focus halo ===================== */
/* Make the halo wrap the whole logo block and remove per-line underlines */
#header-section .site-logo-wrap a:focus,
#header-section .site-logo-wrap a:focus-visible,
#header-section .site-logo a:focus,
#header-section .site-logo a:focus-visible,
#header-section .ut-site-logo a:focus,
#header-section .ut-site-logo a:focus-visible,
#header-section .custom-logo-link:focus,
#header-section .custom-logo-link:focus-visible,
#header-section a.logo:focus,
#header-section a.logo:focus-visible {
  display: inline-block;                     /* one box around both lines */
  text-decoration: none !important;          /* cancel global underline */
  padding: .2rem .45rem;                     /* breathing room for halo */
  border-radius: .4rem;
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1AE50A !important;
}

/* Ensure any inner spans/strongs in the logo don't re-add underlines */
#header-section .site-logo-wrap a:focus *,
#header-section .site-logo-wrap a:focus-visible *,
#header-section .site-logo a:focus *,
#header-section .site-logo a:focus-visible *,
#header-section .ut-site-logo a:focus *,
#header-section .ut-site-logo a:focus-visible *,
#header-section .custom-logo-link:focus *,
#header-section .custom-logo-link:focus-visible *,
#header-section a.logo:focus *,
#header-section a.logo:focus-visible * {
  text-decoration: none !important;
  box-shadow: none !important; /* prevent any child element from drawing its own ring */
}

/* ====================== BURGER → X (NO MARKUP CHANGES) ====================== */
/* Target your existing toggle button. If your button has a different id/class,
   change #ut-mobile-toggle below to match your markup. */
#ut-mobile-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Large tap target */
  width: 44px;
  height: 44px;

  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;

  /* Hamburger sizing */
  --burger-w: 24px;   /* line width  */
  --burger-h: 2px;    /* line height */
  --burger-gap: 7px;  /* distance from center to top/bottom line */

  /* Middle line drawn as a centered background stripe */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: var(--burger-w) var(--burger-h);
  background-position: 50% 50%;
}

/* Focus ring already globally defined — ensure it applies cleanly here */
#ut-mobile-toggle:focus-visible { outline: none; }

/* Top & bottom lines (pseudo-elements); middle is the background stripe */
#ut-mobile-toggle::before,
#ut-mobile-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--burger-w);
  height: var(--burger-h);
  background: currentColor;
  border-radius: 2px;
  transform: translateX(-50%);
  transition:
    transform 200ms ease,
    top 200ms ease,
    opacity 200ms ease,
    background-size 200ms ease;
}
#ut-mobile-toggle::before { top: calc(50% - var(--burger-gap)); }  /* top line   */
#ut-mobile-toggle::after  { top: calc(50% + var(--burger-gap)); }  /* bottom line */

/* ----------------------- OPEN STATE (X) ----------------------- */
/* We accept either a JS-applied .is-active or aria-expanded="true".
   Use whichever your JS toggles — both are supported here. */
#ut-mobile-toggle.is-active,
#ut-mobile-toggle[aria-expanded="true"] {
  /* hide middle stripe by shrinking its background size */
  background-size: 0 var(--burger-h);
}

#ut-mobile-toggle.is-active::before,
#ut-mobile-toggle[aria-expanded="true"]::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
#ut-mobile-toggle.is-active::after,
#ut-mobile-toggle[aria-expanded="true"]::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Reduced motion: disable the transitions */
@media (prefers-reduced-motion: reduce) {
  #ut-mobile-toggle::before,
  #ut-mobile-toggle::after {
    transition: none;
  }
}

/* ----------------------- MOBILE NAV OPEN HOOK ----------------------- */
/* Your nav is hidden by default via [hidden]; JS can either remove [hidden]
   or add .is-open. This ensures it shows even if theme CSS tries to hide it. */
#ut-mobile-nav.is-open { display: block !important; }

/* If you add a body/menu-open class in JS, keep page scroll locked (you already defined this). */
/* html.menu-open, body.menu-open { overflow: hidden; } */

/* IMPORTANT: Do NOT reposition the Skip link on menu open. Your existing Skip
   link styles keep it fixed top-center on focus; leaving them untouched avoids
   the regression you saw before. */


/* Fallback: if theme adds menu-open class, morph the icon too */
body.menu-open #ut-mobile-toggle {
  background-size: 0 var(--burger-h);
}
body.menu-open #ut-mobile-toggle::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open #ut-mobile-toggle::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Burger → X compatibility: support multiple toggle selectors */
#ut-mobile-toggle,
.ut-mobile-toggle,
[data-toggle="mobile-nav"],
.ut-mobile-menu-trigger,
.mobile-nav-toggle,
.ut-mm-trigger,
.ut-toggle-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;

  --burger-w: 24px; --burger-h: 2px; --burger-gap: 7px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: var(--burger-w) var(--burger-h);
  background-position: 50% 50%;
}
#ut-mobile-toggle::before, #ut-mobile-toggle::after,
.ut-mobile-toggle::before, .ut-mobile-toggle::after,
[data-toggle="mobile-nav"]::before, [data-toggle="mobile-nav"]::after,
.ut-mobile-menu-trigger::before, .ut-mobile-menu-trigger::after,
.mobile-nav-toggle::before, .mobile-nav-toggle::after,
.ut-mm-trigger::before, .ut-mm-trigger::after,
.ut-toggle-nav::before, .ut-toggle-nav::after {
  content: "";
  position: absolute; left: 50%;
  width: var(--burger-w); height: var(--burger-h);
  background: currentColor; border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 200ms ease, top 200ms ease, opacity 200ms ease;
}
#ut-mobile-toggle::before,
.ut-mobile-toggle::before,
[data-toggle="mobile-nav"]::before,
.ut-mobile-menu-trigger::before,
.mobile-nav-toggle::before,
.ut-mm-trigger::before,
.ut-toggle-nav::before { top: calc(50% - var(--burger-gap)); }
#ut-mobile-toggle::after,
.ut-mobile-toggle::after,
[data-toggle="mobile-nav"]::after,
.ut-mobile-menu-trigger::after,
.mobile-nav-toggle::after,
.ut-mm-trigger::after,
.ut-toggle-nav::after { top: calc(50% + var(--burger-gap)); }

/* Morph when .is-active OR aria-expanded=true OR body.menu-open present */
#ut-mobile-toggle.is-active,
.ut-mobile-toggle.is-active,
[data-toggle="mobile-nav"].is-active,
.ut-mobile-menu-trigger.is-active,
.mobile-nav-toggle.is-active,
.ut-mm-trigger.is-active,
.ut-toggle-nav.is-active,
#ut-mobile-toggle[aria-expanded="true"],
.ut-mobile-toggle[aria-expanded="true"],
[data-toggle="mobile-nav"][aria-expanded="true"],
.ut-mobile-menu-trigger[aria-expanded="true"],
.mobile-nav-toggle[aria-expanded="true"],
.ut-mm-trigger[aria-expanded="true"],
.ut-toggle-nav[aria-expanded="true"],
body.menu-open #ut-mobile-toggle,
body.menu-open .ut-mobile-toggle,
body.menu-open [data-toggle="mobile-nav"],
body.menu-open .ut-mobile-menu-trigger,
body.menu-open .mobile-nav-toggle,
body.menu-open .ut-mm-trigger,
body.menu-open .ut-toggle-nav {
  background-size: 0 var(--burger-h);
}
#ut-mobile-toggle.is-active::before,
.ut-mobile-toggle.is-active::before,
[data-toggle="mobile-nav"].is-active::before,
.ut-mobile-menu-trigger.is-active::before,
.mobile-nav-toggle.is-active::before,
.ut-mm-trigger.is-active::before,
.ut-toggle-nav.is-active::before,
#ut-mobile-toggle[aria-expanded="true"]::before,
.ut-mobile-toggle[aria-expanded="true"]::before,
[data-toggle="mobile-nav"][aria-expanded="true"]::before,
.ut-mobile-menu-trigger[aria-expanded="true"]::before,
.mobile-nav-toggle[aria-expanded="true"]::before,
.ut-mm-trigger[aria-expanded="true"]::before,
.ut-toggle-nav[aria-expanded="true"]::before,
body.menu-open #ut-mobile-toggle::before,
body.menu-open .ut-mobile-toggle::before,
body.menu-open [data-toggle="mobile-nav"]::before,
body.menu-open .ut-mobile-menu-trigger::before,
body.menu-open .mobile-nav-toggle::before,
body.menu-open .ut-mm-trigger::before,
body.menu-open .ut-toggle-nav::before {
  top: 50%; transform: translate(-50%, -50%) rotate(45deg);
}
#ut-mobile-toggle.is-active::after,
.ut-mobile-toggle.is-active::after,
[data-toggle="mobile-nav"].is-active::after,
.ut-mobile-menu-trigger.is-active::after,
.mobile-nav-toggle.is-active::after,
.ut-mm-trigger.is-active::after,
.ut-toggle-nav.is-active::after,
#ut-mobile-toggle[aria-expanded="true"]::after,
.ut-mobile-toggle[aria-expanded="true"]::after,
[data-toggle="mobile-nav"][aria-expanded="true"]::after,
.ut-mobile-menu-trigger[aria-expanded="true"]::after,
.mobile-nav-toggle[aria-expanded="true"]::after,
.ut-mm-trigger[aria-expanded="true"]::after,
.ut-toggle-nav[aria-expanded="true"]::after,
body.menu-open #ut-mobile-toggle::after,
body.menu-open .ut-mobile-toggle::after,
body.menu-open [data-toggle="mobile-nav"]::after,
body.menu-open .ut-mobile-menu-trigger::after,
body.menu-open .mobile-nav-toggle::after,
body.menu-open .ut-mm-trigger::after,
body.menu-open .ut-toggle-nav::after {
  top: 50%; transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  #ut-mobile-toggle::before, #ut-mobile-toggle::after,
  .ut-mobile-toggle::before, .ut-mobile-toggle::after,
  [data-toggle="mobile-nav"]::before, [data-toggle="mobile-nav"]::after,
  .ut-mobile-menu-trigger::before, .ut-mobile-menu-trigger::after,
  .mobile-nav-toggle::before, .mobile-nav-toggle::after,
  .ut-mm-trigger::before, .ut-mm-trigger::after,
  .ut-toggle-nav::before, .ut-toggle-nav::after { transition: none; }
}

/* Morph the burger when the mobile panel is visible (no JS needed) */
body:has(#ut-mobile-nav.is-open) #ut-mobile-toggle,
body:has(#ut-mobile-nav.is-open) .ut-mm-trigger,
body:has(#ut-mobile-nav.is-open) .mobile-nav-toggle,
body:has(#ut-mobile-nav.is-open) .ut-toggle-nav,
body:has(#ut-mobile-nav:not([hidden])) #ut-mobile-toggle,
body:has(#ut-mobile-nav:not([hidden])) .ut-mm-trigger,
body:has(#ut-mobile-nav:not([hidden])) .mobile-nav-toggle,
body:has(#ut-mobile-nav:not([hidden])) .ut-toggle-nav {
  background-size: 0 var(--burger-h);
}
body:has(#ut-mobile-nav.is-open) #ut-mobile-toggle::before,
body:has(#ut-mobile-nav.is-open) .ut-mm-trigger::before,
body:has(#ut-mobile-nav.is-open) .mobile-nav-toggle::before,
body:has(#ut-mobile-nav.is-open) .ut-toggle-nav::before,
body:has(#ut-mobile-nav:not([hidden])) #ut-mobile-toggle::before,
body:has(#ut-mobile-nav:not([hidden])) .ut-mm-trigger::before,
body:has(#ut-mobile-nav:not([hidden])) .mobile-nav-toggle::before,
body:has(#ut-mobile-nav:not([hidden])) .ut-toggle-nav::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
body:has(#ut-mobile-nav.is-open) #ut-mobile-toggle::after,
body:has(#ut-mobile-nav.is-open) .ut-mm-trigger::after,
body:has(#ut-mobile-nav.is-open) .mobile-nav-toggle::after,
body:has(#ut-mobile-nav.is-open) .ut-toggle-nav::after,
body:has(#ut-mobile-nav:not([hidden])) #ut-mobile-toggle::after,
body:has(#ut-mobile-nav:not([hidden])) .ut-mm-trigger::after,
body:has(#ut-mobile-nav:not([hidden])) .mobile-nav-toggle::after,
body:has(#ut-mobile-nav:not([hidden])) .ut-toggle-nav::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* Keep the toggle (X) above the mobile panel when open */
body.menu-open .ut-mobile-toggle-wrap,
body.menu-open #ut-mobile-toggle,
body:has(#ut-mobile-nav.is-open) .ut-mobile-toggle-wrap,
body:has(#ut-mobile-nav.is-open) #ut-mobile-toggle {
  position: relative;
  z-index: 10010;   /* higher than #ut-mobile-nav (9999) */
  pointer-events: auto;
}

/* (Optional) If your header container has lower stacking context, lift it too */
body.menu-open #header-section {
  position: relative;
  z-index: 10005;
}

@media (max-width: 1024px) {
  
  #ut-sitebody.ut-mobile-menu-open #header-section.ha-header .site-logo h1.logo a,
  #ut-sitebody.ut-mobile-menu-open #header-section.ha-header .site-logo h1.logo a:hover {
    color: rgba(111, 210, 111, 1) !important;
	    }
	  }