:root{
  --ftl-blue: #056fbe;
  --ftl-hover: #2f2f2f;
  --ftl-pink: #ffb3d9;
  --ftl-white: #ffffff;
  --ftl-red: #e11b22;
}

/* Wrapper */
#ftl-nav-toggle-wrap{
  display: inline-flex;
  align-items: center;
}

/* Button */
#ftl-nav-toggle-btn.ftl-burger{
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--ftl-blue) !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  transition: background 180ms ease !important;
  -webkit-tap-highlight-color: transparent;
}

#ftl-nav-toggle-btn.ftl-burger:hover{
  background: var(--ftl-hover) !important;
}

/* hamburger lines */
#ftl-nav-toggle-btn.ftl-burger::before{
  content: "" !important;
  width: 26px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--ftl-white) !important;
  box-shadow: 0 -8px 0 var(--ftl-white), 0 8px 0 var(--ftl-white) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;
}

#ftl-nav-toggle-btn.ftl-burger::after{
  content: "" !important;
  position: absolute !important;
  width: 26px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition: transform 220ms ease, background 220ms ease !important;
}

/* Active button (X state) */
#ftl-nav-toggle-btn.ftl-burger.is-active{
  background: var(--ftl-pink) !important;
}
#ftl-nav-toggle-btn.ftl-burger.is-active:hover{
  background: var(--ftl-pink) !important;
}

#ftl-nav-toggle-btn.ftl-burger.is-active::before{
  background: var(--ftl-red) !important;
  box-shadow: none !important;
  transform: rotate(45deg) !important;
}
#ftl-nav-toggle-btn.ftl-burger.is-active::after{
  background: var(--ftl-red) !important;
  transform: rotate(-45deg) !important;
}

/* Click safety if any spans exist */
#ftl-nav-toggle-wrap .ftl-line{
  pointer-events: none !important;
}

/* OUTER: stable hide/show */
#ftl-mobile-menu{
  display: none;
}

#ftl-mobile-menu.is-open{
  display: block;
}

/* INNER: animates */
#ftl-mobile-menu-inner{
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

/* When outer is open, inner animates in */
#ftl-mobile-menu.is-open #ftl-mobile-menu-inner{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FT MOBILE ACCORDION MENU — FULL CLEAN CSS (FINAL)
   Scope: add class "ft-mobile-menu-accordion" to the container

   Includes:
   - Slim, uniform row height for ALL items
   - Even spacing between items
   - No “double borders” (top-level uses inset stroke; level 2+ no stroke)
   - Hover stroke = solid white (top-level)
   - Closed icon = white + ; Open icon = pink X
   - Strong hierarchy: level 2 vs level 3 is VERY distinct (darker + indent + smaller)
   - Parent items toggle (JS). Leaf links navigate.
   - Link-click indication: :active feedback + :visited styling for leaf links
   ============================================================ */

/* ---------- Reset / bullets ---------- */
.ft-mobile-menu-accordion ul.menu,
.ft-mobile-menu-accordion ul.menu li,
.ft-mobile-menu-accordion .menu,
.ft-mobile-menu-accordion .menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom:10px !important;
}

/* ---------- Container padding ---------- */
.ft-mobile-menu-accordion {
  padding: 14px 16px 22px;
}

/* ---------- Even spacing between rows ---------- */
.ft-mobile-menu-accordion li.menu-item {
  margin: 14px 0 !important;
}

/* ---------- Row base (ALL levels, uniform sizing) ---------- */
.ft-mobile-menu-accordion li.menu-item > a,
.ft-mobile-menu-accordion li.menu-item > span {
  font-family: "Roboto Condensed", Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;

  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100% !important;
  box-sizing: border-box;

  min-height: 52px;              /* uniform height */
  padding: 10px 14px !important; /* uniform padding */

  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.05) !important;

  /* Top-level “stroke” without double-borders */
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.52);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: background .15s ease, transform .12s ease, box-shadow .15s ease, color .15s ease, opacity .15s ease;
}

/* Hover (top-level stroke becomes pure white) */
.ft-mobile-menu-accordion li.menu-item > a:hover,
.ft-mobile-menu-accordion li.menu-item > span:hover {
  background: rgba(255,255,255,.09) !important;
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff !important;
}

/* Tap/press feedback (helps user feel they clicked a link) */
.ft-mobile-menu-accordion li.menu-item > a:active,
.ft-mobile-menu-accordion li.menu-item > span:active {
  transform: scale(.99);
  background: rgba(255,255,255,.14) !important;
}

/* Remove focus rings (per your preference; avoids clipping) */
.ft-mobile-menu-accordion a:focus,
.ft-mobile-menu-accordion span:focus,
.ft-mobile-menu-accordion a:focus-visible,
.ft-mobile-menu-accordion span:focus-visible,
.ft-mobile-menu-accordion .menu-item > a:focus,
.ft-mobile-menu-accordion .menu-item > span:focus,
.ft-mobile-menu-accordion .menu-item > a:focus-visible,
.ft-mobile-menu-accordion .menu-item > span:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Re-apply inset stroke after focus reset */
.ft-mobile-menu-accordion li.menu-item > a,
.ft-mobile-menu-accordion li.menu-item > span {
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.52);
}

/* Label (JS injects .ft-menu-label) */
.ft-mobile-menu-accordion .ft-menu-label {
  flex: 1 1 auto;
  min-width: 0;

  font-size: 16px;
  line-height: 1.1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: inherit !important;
}

/* ---------- Link clicked indication (leaf links) ---------- */
/* Only leaf items actually navigate; show a "visited" cue */
.ft-mobile-menu-accordion li.menu-item:not(.menu-item--expanded) > a:visited {
  opacity: .85 !important; /* subtle “yep you’ve been here” */
}

/* And underline on tap to confirm “this is a link” */
.ft-mobile-menu-accordion li.menu-item:not(.menu-item--expanded) > a:active .ft-menu-label {
  text-decoration: underline !important;
  text-underline-offset: 5px;
}

/* Current page states (Drupal often adds these) */
.ft-mobile-menu-accordion .menu-item > a.is-active,
.ft-mobile-menu-accordion .menu-item > a.is-active-trail,
.ft-mobile-menu-accordion .menu-item > a[aria-current="page"] {
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.86);
}

/* ---------- Icons: CLOSED + (white), OPEN X (pink) ---------- */
.ft-mobile-menu-accordion .ft-menu-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  border: 0 !important;
  background: transparent !important;
  position: relative;
  opacity: .98;
}

/* Only show icon for items with children */
.ft-mobile-menu-accordion li.menu-item:not(.menu-item--expanded) > a .ft-menu-icon,
.ft-mobile-menu-accordion li.menu-item:not(.menu-item--expanded) > span .ft-menu-icon {
  display: none !important;
}

/* CLOSED: plus (white) */
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > a .ft-menu-icon::before,
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > span .ft-menu-icon::before,
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > a .ft-menu-icon::after,
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > span .ft-menu-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  border-radius: 3px;
}
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > a .ft-menu-icon::before,
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > span .ft-menu-icon::before {
  width: 14px;
  height: 2px;
}
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > a .ft-menu-icon::after,
.ft-mobile-menu-accordion li.menu-item--expanded:not(.is-open) > span .ft-menu-icon::after {
  width: 2px;
  height: 14px;
}

/* OPEN: pink X */
.ft-mobile-menu-accordion li.menu-item.is-open > a .ft-menu-icon::before,
.ft-mobile-menu-accordion li.menu-item.is-open > span .ft-menu-icon::before,
.ft-mobile-menu-accordion li.menu-item.is-open > a .ft-menu-icon::after,
.ft-mobile-menu-accordion li.menu-item.is-open > span .ft-menu-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #f4a6c8;
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ft-mobile-menu-accordion li.menu-item.is-open > a .ft-menu-icon::after,
.ft-mobile-menu-accordion li.menu-item.is-open > span .ft-menu-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Pre-JS safety: hide sub ULs until wrapped ---------- */
.ft-mobile-menu-accordion li.menu-item--expanded > ul.menu {
  display: none !important;
}

/* Panel wrapper (JS creates). No margin so row spacing stays even. */
.ft-mobile-menu-accordion .ft-submenu-panel {
  display: none;
  overflow: hidden;
  height: 0;
  margin: 0 !important;
  transition: height 260ms ease;
}

/* Once wrapped */
.ft-mobile-menu-accordion li.menu-item--expanded > .ft-submenu-panel {
  display: block;
}

/* Space inside open panel only (not between top-level items) */
.ft-mobile-menu-accordion .ft-submenu-panel > ul.menu {
  display: block !important;
  padding-top: 14px !important;
}

/* ============================================================
   STRONG HIERARCHY OVERRIDES (Level 2 vs Level 3 very distinct)
   ============================================================ */

/* Level 2 ONLY: direct children of first panel (NO stroke) */
.ft-mobile-menu-accordion .ft-submenu-panel > ul.menu > li.menu-item > a,
.ft-mobile-menu-accordion .ft-submenu-panel > ul.menu > li.menu-item > span {
  box-shadow: none !important;
  background: rgba(0,0,0,.14) !important;
  padding-left: 16px !important;
}

/* Level 2 label slightly smaller */
.ft-mobile-menu-accordion .ft-submenu-panel > ul.menu > li.menu-item .ft-menu-label {
  font-size: 15px !important;
  opacity: .95;
}

/* Level 3 ONLY: children of a submenu inside a submenu (VERY darker) */
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > a,
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > span {
  box-shadow: none !important;
  background: rgba(0,0,0,.32) !important;
  padding-left: 24px !important;
}

/* Level 3 label smaller + tighter */
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item .ft-menu-label {
  font-size: 14px !important;
  letter-spacing: .03em !important;
  opacity: .92;
}

/* Level 3 hover */
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > a:hover,
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > span:hover {
  box-shadow: none !important;
  background: rgba(0,0,0,.40) !important;
  color: #ffffff !important;
}

/* Level 4+ (optional safety): even darker */
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > a,
.ft-mobile-menu-accordion .ft-submenu-panel .ft-submenu-panel .ft-submenu-panel > ul.menu > li.menu-item > span {
  box-shadow: none !important;
  background: rgba(0,0,0,.44) !important;
  padding-left: 28px !important;
}


/* ============================================================
   FT MENU SEARCH — FULL WIDTH, CLEAN (no double lines/borders)
   Goal:
   - Single full-width pill like the menu items above
   - Input background = 100% (solid/filled), no outlines/strokes
   - Icon button sits inside the same pill on the right
   - Less vertical padding above/below
   ============================================================ */

/* tighten spacing around search block */
.ft-menu-search{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* hide title if present */
.ft-menu-search h2{
  display: none !important;
}

/* full-width single row */
.ft-menu-search form#search-block-form{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;                 /* no gap -> one unified control */
  width: 100% !important;
}

/* remove default wrapper spacing */
.ft-menu-search form#search-block-form .form-item,
.ft-menu-search form#search-block-form .js-form-item,
.ft-menu-search form#search-block-form .form-actions,
.ft-menu-search form#search-block-form #edit-actions{
  margin: 0 !important;
  padding: 0 !important;
}

/* form-item grows */
.ft-menu-search form#search-block-form .form-item,
.ft-menu-search form#search-block-form .js-form-item{
  flex: 1 1 auto !important;
}

/* actions stays fixed */
.ft-menu-search form#search-block-form .form-actions,
.ft-menu-search form#search-block-form #edit-actions{
  flex: 0 0 auto !important;
  width: auto !important;
}

/* INPUT: filled background, NO border/outline/box-shadow */
.ft-menu-search form#search-block-form #edit-keys{
  width: 100% !important;
  box-sizing: border-box !important;

  height: 52px !important;
  padding: 10px 56px 10px 14px !important; /* room for icon on right */

  border: 0 !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.14) !important; /* filled */
  color: #fff !important;

  box-shadow: none !important;
  outline: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* placeholder */
.ft-menu-search form#search-block-form #edit-keys::placeholder{
  color: rgba(255,255,255,.85) !important;
    font-family: "Roboto Condensed", Roboto, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Put the submit INSIDE the input visually */
.ft-menu-search form#search-block-form #edit-actions{
  position: relative !important;
  margin-left: -52px !important;  /* overlay on the right end of input */
}

/* SUBMIT: icon only, no border, no extra stroke */
.ft-menu-search form#search-block-form #edit-submit{
  width: 52px !important;
  height: 52px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: transparent !important;
  box-shadow: none !important;

  /* hide any text */
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;

  cursor: pointer !important;

  /* magnifier icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M20 20l-4.2-4.2' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;

  transition: transform .12s ease, opacity .12s ease !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* hover/active feedback (subtle) */
.ft-menu-search form#search-block-form #edit-submit:hover{
  opacity: .9 !important;
}

.ft-menu-search form#search-block-form #edit-submit:active{
  transform: scale(.98) !important;
}

/* optional: focus state stays clean (no rings), but slightly brighter fill */
.ft-menu-search form#search-block-form #edit-keys:focus{
  background: rgba(255,255,255,.18) !important;
}
.search-block-form {
	padding: 0px !important;
}

/* Bottom shadow for the blue mobile menu panel */
.ft-mobile-menu-panel{
  z-index: 999 !important;
  overflow: visible !important; /* prevents clipping */
}


.ft-mobile-menu-accordion{
  overflow: visible !important;
}
/* Clean, brand-tinted shadow (won't look dirty on white) */
.ft-mobile-menu-accordion {
  box-shadow:
    0 2px 0 rgba(255,255,255,.08),              /* tiny highlight edge */
    0 14px 26px rgba(18, 72, 135, .22),         /* brand-blue depth */
    0 6px 10px rgba(0, 0, 0, .06)               /* subtle neutral lift */
    !important;
}