/* Fortified — header (cream main row + dark dropdowns + side panel + mobile drawer).
   Values sampled from live fortified.com.sg. */

.fortified-header {
  background: var(--ft-color-cream);
  position: relative;
  z-index: var(--ft-z-header);
}

.fortified-header-main > .fortified-container {
  /* Live Tint row is a full-width 25%/50%/25% three-column layout with fixed
     55px side padding + 20px vertical (total header height ~115px). The 50%
     centre column makes the menu centre on the page centre regardless of the
     logo width — a plain flex layout would push the menu off-centre. */
  display: grid;
  grid-template-columns: 25% 50% 25%;
  align-items: center;
  max-width: none;
  padding: 20px 55px;
  /* Tint's header is 115px tall (75px content band + 20px padding each side).
     box-sizing is border-box, so set min-height to the full 115px. */
  min-height: 115px;
}

/* Tint's 25% logo column carries a 15px inner gutter — logo sits at x=70 (55+15). */
.fortified-logo { display: flex; align-items: center; padding-left: 15px; }
/* Make the WP custom-logo anchor a flex/block box so the wrapper keeps its
   height across engines (WebKit collapses an inline <a> around a block <img>). */
.fortified-logo a,
.fortified-logo .custom-logo-link { display: inline-flex; }
.fortified-logo img,
.fortified-logo .custom-logo {
  max-height: 42px;
  width: auto;
}

/* Primary menu — centre column of the header grid */
.fortified-primary-menu { min-width: 0; }
.fortified-primary-menu .fortified-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.fortified-primary-menu .fortified-menu > li > a {
  display: block;
  padding: 15.3px;
  font-family: var(--ft-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 25.5px;
  color: var(--ft-color-ink);
  position: relative;
  transition: color 0.2s ease;
}
.fortified-primary-menu .fortified-menu > li > a:hover {
  color: var(--ft-color-ink);
}
.fortified-primary-menu .fortified-menu > li.current-menu-item > a,
.fortified-primary-menu .fortified-menu > li.current-menu-parent > a,
.fortified-primary-menu .fortified-menu > li.current-menu-ancestor > a {
  color: var(--ft-color-ink);
}

/* Underline bar — dark (#171616), inset by the link's 15.3px padding so it spans
   the text width. Revealed left-to-right via clip-path (not transform: scaleX,
   which anti-aliases the 2px line mid-animation and makes it look thicker).
   clip-path only clips geometry, so the height stays a crisp 2px throughout. */
.fortified-primary-menu .fortified-menu > li > a::after {
  content: "";
  position: absolute;
  left: 15.3px;
  right: 15.3px;
  bottom: 10px;
  height: 3px;
  background: var(--ft-color-ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fortified-primary-menu .fortified-menu > li > a:hover::after,
.fortified-primary-menu .fortified-menu > li > a:focus-visible::after,
.fortified-primary-menu .fortified-menu > li.current-menu-item > a::after,
.fortified-primary-menu .fortified-menu > li.current-menu-parent > a::after,
.fortified-primary-menu .fortified-menu > li.current-menu-ancestor > a::after {
  clip-path: inset(0 0 0 0);
}

/* Dropdowns — dark theme to match live */
.fortified-primary-menu .fortified-menu li { position: relative; }
.fortified-primary-menu .fortified-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ft-color-dark);
  list-style: none;
  margin: 0;
  padding: 14px 0;
  box-shadow: var(--ft-shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  width: 210px;
  min-width: 210px;
}
.fortified-primary-menu .fortified-menu li:hover > .sub-menu,
.fortified-primary-menu .fortified-menu li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.fortified-primary-menu .fortified-menu .sub-menu li { display: block; }
.fortified-primary-menu .fortified-menu .sub-menu a {
  display: block;
  padding: 9.1px 22.4px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: var(--ft-color-on-dark);
  white-space: normal;
}
.fortified-primary-menu .fortified-menu .sub-menu a:hover {
  color: var(--ft-color-on-dark-strong);
}
.fortified-primary-menu .fortified-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Header icons cluster (search/panel/burger) */
.fortified-header-icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-right: 15px;
}
.fortified-header-icons button {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ft-color-ink-soft);
  transition: color 0.2s ease;
}
.fortified-header-icons button:hover { color: var(--ft-color-red); }
.fortified-panel-toggle { color: var(--ft-color-ink); }

.fortified-header-icons .fortified-burger { display: none; }
/* When shown (mobile), stack the three bars vertically. The shared
   `.fortified-header-icons button` rule lays children in a row, so the burger
   must override flex-direction or its three spans collapse into one bar. */
.fortified-burger {
  flex-direction: column;
  color: var(--ft-color-ink);
}
.fortified-burger span {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  margin: 3px auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Full-width overlay search (matches Tint .search_modern / .search_wrap).
   Sampled from live: dark dim #1D1D1D @0.2 over the page, a dark band at top
   holding a 30px white full-width field with a thin underline + right magnifier,
   and a 34px white close ✕ at top-right. */
/* Tint search_modern overlay: a solid dark band (#1D1D1D) covering the top of
   the page (over the header), with a LARGE logo top-left, a white ✕ top-right,
   and the search field below. The page beneath the band is dimmed (backdrop). */
.fortified-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ft-z-overlay);
  visibility: hidden;
  pointer-events: none;
  /* Keep the overlay visible while it animates out, then hide. Without this the
     parent hides instantly on close and the exit transition never shows. */
  transition: visibility 0s linear 0.3s;
}
.fortified-search-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
/* Dim over the page below the dark band (Tint .search_overlay: #1D1D1D @0.2). */
.fortified-search-backdrop {
  position: absolute;
  inset: 0;
  background: #1D1D1D;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fortified-search-overlay.is-open .fortified-search-backdrop { opacity: 0.2; }
/* Solid dark band across the top (Tint .search_wrap: #1D1D1D, ~470px tall). It
   covers the cream header; the overlay carries its own large logo + ✕. */
.fortified-search-inner {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: #1D1D1D;
  min-height: 470px;
  padding: 60px 0 0;
  transform: translateY(-100%);
  /* Closed/exit easing: ease-in (departing), slightly faster than the enter. */
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1);
}
.fortified-search-overlay.is-open .fortified-search-inner {
  transform: translateY(0);
  /* Open/enter easing: ease-out (arriving), a touch longer for a smooth settle. */
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.fortified-search-inner > .fortified-container {
  position: relative;
  max-width: none;
  padding: 0 75px;
}
/* Large logo (Tint overlay logo is ~100px tall, vs 42px in the header). */
.fortified-search-logo img,
.fortified-search-logo .custom-logo {
  max-height: 100px;
  width: auto;
}
/* White ✕ top-right, aligned with the logo top (Tint .search_close: white, ~34px). */
.fortified-search-close {
  position: absolute;
  top: 0; right: 75px;
  width: 41px; height: 41px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #FFF;
  transition: color 0.2s ease;
}
.fortified-search-close:hover { color: var(--ft-color-red); }
/* Field sits below the logo (~y=223). Text at the top, underline well below it
   (tall field via padding-bottom), magnifier near the underline on the right. */
.fortified-search-form {
  position: relative;
  width: 100%;
  margin-top: 63px;
}
.fortified-search-field {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 48px 60px 0;
  font-family: var(--ft-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  color: #FFF;
  outline: none;
}
.fortified-search-field::placeholder { color: #D1D1D1; opacity: 1; }
.fortified-search-go {
  position: absolute;
  right: 0;
  bottom: 14px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #FFF;
  transition: color 0.2s ease;
}
.fortified-search-go:hover { color: var(--ft-color-red); }

/* Side panel (slide from right) */
.fortified-panel {
  position: fixed;
  inset: 0;
  z-index: var(--ft-z-overlay);
  visibility: hidden;
  pointer-events: none;
}
.fortified-panel.is-open {
  visibility: visible;
  pointer-events: auto;
}
.fortified-panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fortified-panel.is-open .fortified-panel-backdrop { opacity: 1; }
.fortified-panel-inner {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(388px, 92vw);
  background: var(--ft-color-dark);
  color: var(--ft-color-on-dark);
  padding: 32px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.fortified-panel.is-open .fortified-panel-inner { transform: translateX(0); }
.fortified-panel-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  color: var(--ft-color-on-dark-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.fortified-panel-close:hover { color: var(--ft-color-red); }

/* Mobile drawer (full-screen on mobile per live behavior) */
.fortified-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--ft-z-overlay);
  visibility: hidden;
  pointer-events: none;
  /* Stay visible through the close animation, then hide (otherwise the parent
     hides instantly and the exit transition is never seen). */
  transition: visibility 0s linear 0.32s;
}
.fortified-mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}
.fortified-mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fortified-mobile-menu.is-open .fortified-mobile-menu-backdrop { opacity: 1; }
.fortified-mobile-menu-inner {
  position: absolute;
  inset: 0;
  background: #FFF;
  color: var(--ft-color-dark-soft);
  padding: 28px 28px 32px;
  /* Panel itself doesn't scroll — only the middle list does (top bar + socials
     stay fixed). */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  opacity: 0;
  /* Closed/exit: ease-in, slightly faster (the panel is leaving). */
  transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease;
}
.fortified-mobile-menu.is-open .fortified-mobile-menu-inner {
  transform: translateY(0);
  opacity: 1;
  /* Open/enter: ease-out, a touch longer so it glides into place. */
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}

/* Top bar — logo left, "Close" label + red boxed-X right. Fixed (doesn't scroll). */
.fortified-mobile-menu-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.fortified-mobile-menu-logo img,
.fortified-mobile-menu-logo .custom-logo { height: auto; max-height: 42px; width: auto; max-width: 100%; }
.fortified-mobile-menu-close {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ft-color-dark-soft);
}
.fortified-mobile-menu-close-text { font-size: 19px; font-weight: 400; }
.fortified-mobile-menu-close-icon { display: inline-flex; }

/* Menu list — bordered rows; parent rows carry a red chevron toggle.
   This is the only scrolling region (min-height:0 lets it shrink inside the
   flex column so overflow actually triggers). */
.fortified-mobile-menu-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.fortified-mobile-menu-list,
.fortified-mobile-menu-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fortified-mobile-menu-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 0.8px solid rgba(0, 0, 0, 0.08);
}
.fortified-mobile-menu-list > li > a {
  flex: 1 1 auto;
  display: block;
  padding: 16px 0;
  color: var(--ft-color-dark-soft);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
/* Active item in red (matches live) */
.fortified-mobile-menu-list > li.current-menu-item > a,
.fortified-mobile-menu-list > li.current-menu-parent > a,
.fortified-mobile-menu-list > li.current-menu-ancestor > a {
  color: var(--ft-color-red);
}

/* Red chevron toggle (injected by JS for items with children) */
.fortified-submenu-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 48px;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ft-color-red);
}
.fortified-submenu-toggle svg { display: block; transition: transform 0.25s ease; }
.fortified-mobile-menu-list > li.is-open > .fortified-submenu-toggle svg { transform: rotate(180deg); }

/* Submenu — full-width row below, hidden until the chevron is toggled */
.fortified-mobile-menu-list > li > .sub-menu {
  flex: 0 0 100%;
  display: none;
  padding: 4px 0 12px 8px;
}
.fortified-mobile-menu-list > li.is-open > .sub-menu { display: block; }
.fortified-mobile-menu-list .sub-menu a {
  display: block;
  padding: 8px 0;
  color: var(--ft-color-dark-soft);
  font-size: 16px;
  font-weight: 400;
}
.fortified-mobile-menu-list .sub-menu a:hover { color: var(--ft-color-red); }

/* Social icons row — fixed at the bottom (doesn't scroll with the list). */
.fortified-mobile-menu-socials {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  padding-top: 24px;
}
.fortified-mobile-menu-socials a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FBE9E9;
  color: #2E2E2E;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.fortified-mobile-menu-socials a:hover {
  background: var(--ft-color-red);
  color: #FFF;
}