/* ==========================================================================
   site-nav.css — the shared EDC header: desktop mega-menu + mobile drawer.
   Added 2026-09-09.

   WHAT THIS REPLACES
   ------------------
   The previous header showed its nine links only at >=1280px (Tailwind `xl`),
   so iPad portrait AND iPad landscape both got the hamburger and never saw a
   dropdown at all. The dropdowns themselves were CSS `:hover` only, hung off an
   <a href="#" onclick="return false">, so they were unreachable by keyboard and
   by touch. The hamburger was a <label> + hidden checkbox with the JS also
   writing style.display, i.e. two competing sources of one boolean.

   WHAT THIS DOES INSTEAD
   ----------------------
   Full nav from 1024px up, drawer below it. Panels open on hover (fine pointer
   only), on :focus-within (so keyboard alone works with JS off), and on click
   via site-nav.js. Triggers are real <button>s.

   BREAKPOINT
   ----------
   1024px, deliberately, not 768px. Nine top-level links plus the brand mark
   measure ~890px of content; at 768px they would either overflow or shrink to
   unreadable type. Tablet portrait gets the drawer, tablet landscape gets the
   full nav.

   TOKENS
   ------
   Nothing new is invented here. Navy #16213e / #0a1930, gold #d4a84b, the
   16px radius and the cubic-bezier(0.22,1,0.36,1) easing all already exist
   elsewhere in this tree.

   REDUCED MOTION
   --------------
   Not handled here. assets/css/motion-guard.css is linked after this file on
   every page and already collapses every transition to 0.01ms. Duplicating the
   guard here would only give it a second place to drift out of sync.

   RE-USE
   ------
   Every selector is namespaced `.edc-nav*`. The London service landing pages
   carry a different six-item `.navbar`; a later task can point that markup at
   these same classes without touching site-nav.js.
   ========================================================================== */

.edc-nav {
  --edc-nav-navy: #16213e;
  --edc-nav-navy-deep: #0a1930;
  --edc-nav-gold: #d4a84b;
  --edc-nav-gold-soft: rgba(212, 168, 75, 0.12);
  --edc-nav-ink: #374151;
  --edc-nav-ink-dim: #9ca3af;
  --edc-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --edc-nav-radius: 16px;
  --edc-nav-shift: 0px;

  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #fff;
  /* The border lives on the element, transparent until scrolled, so the header
     never changes height and nothing below it can jump. */
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--edc-nav-ease),
              border-color 240ms var(--edc-nav-ease),
              box-shadow 240ms var(--edc-nav-ease);
}

.edc-nav.edc-nav-scrolled {
  background-color: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(10, 25, 48, 0.08);
  box-shadow: 0 6px 24px rgba(10, 25, 48, 0.07);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .edc-nav.edc-nav-scrolled {
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
}

/* Above the scrim, so the burger stays lit and clickable — and visibly becomes
   an X — while the drawer is open. Below the drawer itself. */
.edc-nav-inner {
  position: relative;
  z-index: 195;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.edc-nav-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  text-decoration: none;
}

.edc-nav-brand img {
  height: 48px;
  max-height: 60px;
  width: auto;
}

/* Ten of these pages use a text wordmark instead of the image mark, and it
   measures 324px at its authored size against the image's 48px. Nine links
   plus a 324px wordmark do not fit 1024px, and at 375px it runs into the
   burger — both were measured, not guessed, and both overflowed. The mark is
   not replaced or re-cut: it is the same wordmark, set smaller at the widths
   where the full size will not fit. Pages using the image mark are untouched
   by these rules. */
.edc-nav-brand > a {
  white-space: nowrap;
}

.edc-nav-brand .text-lg { font-size: 0.86em; }

/* 1024-1279 is the tightest row on the site: wordmark, nine links, and on the
   two market-entry pages the language switch as well. At 1.15rem the wordmark
   still ran 28px into "Home" there — no page overflow, just a collision, which
   is why it needs measuring rather than eyeballing. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .edc-nav-brand > a { font-size: 1.05rem; }
}

/* Below the breakpoint the links are gone, so the wordmark can breathe again;
   it only has to clear the language switch and the burger. */
@media (max-width: 1023.98px) {
  .edc-nav-brand > a { font-size: 1.25rem; }
}

@media (max-width: 420px) {
  .edc-nav-brand > a { font-size: 1rem; }
}

/* --- shared focus treatment: visible, and never dependent on hover --------- */
.edc-nav a:focus-visible,
.edc-nav button:focus-visible {
  outline: 2px solid var(--edc-nav-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Desktop / tablet-landscape bar (>=1024px)
   ========================================================================== */

.edc-nav-desktop {
  display: none;
}

.edc-nav-burger {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .edc-nav-desktop {
    display: flex;
    align-items: center;
    flex-shrink: 0;          /* nine links never squash to fit the brand */
    gap: clamp(14px, 1.7vw, 26px);
  }

  .edc-nav-burger {
    display: none;
  }
}

.edc-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: clamp(0.86rem, 0.92vw, 0.95rem);
  line-height: 1.2;
  color: var(--edc-nav-ink);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color 200ms var(--edc-nav-ease);
}

/* The underline is a pseudo-element so hovering never moves the text and so
   nine links cannot reflow the bar. */
.edc-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: var(--edc-nav-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--edc-nav-ease);
}

@media (hover: hover) and (pointer: fine) {
  .edc-nav-link:hover {
    color: #b8922e;
  }
  .edc-nav-link:hover::after {
    transform: scaleX(1);
  }
}

.edc-nav-link:focus-visible::after,
.edc-nav-item[data-open="true"] .edc-nav-link::after {
  transform: scaleX(1);
}

/* "Resources" is a real link to /playbooks/index.html and always was, so it
   cannot become a button. The label keeps its destination and a separate
   chevron button next to it opens the panel. "Our Products" has never had a
   destination (it was href="#" with onclick="return false"), so there the whole
   label is the button. Both render identically. */
.edc-nav-labelgroup {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.edc-nav-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 34px;
  padding: 0 3px;
  background: none;
  border: 0;
  color: var(--edc-nav-ink);
  cursor: pointer;
  font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .edc-nav-item:hover .edc-nav-trigger { color: #b8922e; }
}

.edc-nav-chevron {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  transition: transform 260ms var(--edc-nav-ease);
}

/* The tightest row on the site: 1024px, wordmark brand, nine links and — on
   the two market-entry pages — the Turkce/English switch as well. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .edc-nav-desktop { gap: 9px; }
  .edc-nav-link { font-size: 0.84rem; }
}

/* The language switch carries its own 1.25rem left margin from
   market-entry.css, written when it sat in a plain flex row. This row already
   has a gap, so that margin is now double spacing — and on those two pages at
   1024px it was the 20px that pushed the switch into the last nav link. The
   rule there is untouched; it is simply not needed inside this header. */
.edc-nav .me-lang {
  margin-left: 0;
}

/* ==========================================================================
   Mega-menu panel
   ========================================================================== */

.edc-nav-item {
  position: relative;
}

.edc-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  /* --edc-nav-shift is written by site-nav.js when a panel would otherwise
     run past the viewport edge at 1024px. Default 0. */
  transform: translateX(calc(-50% + var(--edc-nav-shift))) translateY(8px);
  width: min(720px, calc(100vw - 32px));
  background: var(--edc-nav-navy);
  border: 1px solid rgba(212, 168, 75, 0.18);
  border-radius: var(--edc-nav-radius);
  box-shadow: 0 24px 60px rgba(10, 25, 48, 0.35);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;
  transition: opacity 220ms var(--edc-nav-ease),
              transform 220ms var(--edc-nav-ease),
              visibility 0s linear 220ms;
}

/* A generous invisible bridge so the pointer can travel from the trigger to the
   panel across the 10px gap without the panel closing underneath it. */
.edc-nav-panel::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.edc-nav-panel-open,
.edc-nav-item[data-open="true"] > .edc-nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--edc-nav-shift))) translateY(0);
  transition: opacity 220ms var(--edc-nav-ease),
              transform 220ms var(--edc-nav-ease),
              visibility 0s linear 0s;
}

.edc-nav-item[data-open="true"] .edc-nav-chevron {
  transform: rotate(180deg);
}

/* Hover opening, fine pointers only, with a short intent delay so the panel
   does not flash open when the pointer merely crosses the trigger. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .edc-nav-item:hover > .edc-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(calc(-50% + var(--edc-nav-shift))) translateY(0);
    transition: opacity 220ms var(--edc-nav-ease) 120ms,
                transform 220ms var(--edc-nav-ease) 120ms,
                visibility 0s linear 120ms;
  }
  .edc-nav-item:hover .edc-nav-chevron {
    transform: rotate(180deg);
  }
}

/* Keyboard-only opening. This rule is what makes the panels usable with
   JavaScript disabled, so it must not be folded into the JS-driven state. */
@media (min-width: 1024px) {
  .edc-nav-item:focus-within > .edc-nav-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(calc(-50% + var(--edc-nav-shift))) translateY(0);
    transition: opacity 220ms var(--edc-nav-ease),
                transform 220ms var(--edc-nav-ease),
                visibility 0s linear 0s;
  }
  .edc-nav-item:focus-within .edc-nav-chevron {
    transform: rotate(180deg);
  }
}

/* A panel explicitly dismissed with Escape must stay shut even though focus is
   still inside the item, so this overrides every opening rule above. */
.edc-nav-item[data-open="false"][data-dismissed="true"] > .edc-nav-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.edc-nav-panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.edc-nav-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color 180ms var(--edc-nav-ease),
              border-color 180ms var(--edc-nav-ease);
}

.edc-nav-panel-item:hover,
.edc-nav-panel-item:focus-visible,
.edc-nav-panel-item.edc-nav-panel-item-active {
  background: rgba(212, 168, 75, 0.07);
  border-left-color: var(--edc-nav-gold);
}

.edc-nav-panel-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--edc-nav-gold-soft);
  color: var(--edc-nav-gold);
  font-size: 12px;
  margin-top: 1px;
}

.edc-nav-panel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.edc-nav-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #f3f4f6;
  line-height: 1.3;
}

.edc-nav-panel-item:hover .edc-nav-panel-title,
.edc-nav-panel-item.edc-nav-panel-item-active .edc-nav-panel-title {
  color: var(--edc-nav-gold);
}

.edc-nav-panel-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--edc-nav-ink-dim);
}

/* --- the preview column --------------------------------------------------- */

.edc-nav-panel-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--edc-nav-navy-deep);
  border: 1px solid rgba(212, 168, 75, 0.1);
  /* Stretches to the list's height. Left top-aligned it left a tall empty
     block of panel below it, which read as a rendering fault rather than
     as space. */
  align-self: stretch;
}

.edc-nav-preview-frame {
  position: relative;
  /* Fixed ratio, so the box occupies its final size before any image has
     loaded and swapping images can never shift the panel. */
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0d1a2f;
}

.edc-nav-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 220ms var(--edc-nav-ease);
}

.edc-nav-preview-img.edc-nav-preview-ready {
  opacity: 1;
}

.edc-nav-preview-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--edc-nav-ink-dim);
  min-height: 14px;
}

/* ==========================================================================
   Hamburger button (<1024px)
   ========================================================================== */

.edc-nav-burger {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--edc-nav-ink);
}

.edc-burger-box {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.edc-burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms var(--edc-nav-ease),
              opacity 160ms var(--edc-nav-ease);
}

.edc-burger-line:nth-child(1) { top: 0; }
.edc-burger-line:nth-child(2) { top: 7px; }
.edc-burger-line:nth-child(3) { top: 14px; }

.edc-nav-burger[aria-expanded="true"] .edc-burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.edc-nav-burger[aria-expanded="true"] .edc-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.edc-nav-burger[aria-expanded="true"] .edc-burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile / tablet-portrait drawer
   ========================================================================== */

.edc-nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(10, 25, 48, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--edc-nav-ease),
              visibility 0s linear 240ms;
}

.edc-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 86vw;
  max-width: 380px;
  background: var(--edc-nav-navy);
  border-left: 1px solid rgba(212, 168, 75, 0.16);
  box-shadow: -24px 0 60px rgba(10, 25, 48, 0.4);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  transition: transform 280ms var(--edc-nav-ease),
              visibility 0s linear 280ms;
}

/* The header is a stacking context (sticky + z-index), so the drawer's own
   z-index only ranks it INSIDE that context. At z-index 100 the whole header
   sits under the promo banner (z-index 101), which then paints across the top
   of the open drawer and swallowed taps on its close button — caught in
   testing at 375px. While the drawer is open the header is lifted clear of the
   banner and of the back-to-top button (9990); the chat iframe (9999) is left
   above it, because that is a panel the visitor opened deliberately. */
.edc-nav.edc-nav-open {
  z-index: 9995;
}

/* The drawer is modal. The floating widgets would otherwise sit on top of the
   scrim looking like part of it. Hidden only while it is open; nothing about
   how they behave otherwise is touched. */
.edc-nav-locked #chat-launcher,
.edc-nav-locked .chat-bubble-native,
.edc-nav-locked #back-to-top {
  display: none !important;
}

.edc-nav-open .edc-nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms var(--edc-nav-ease),
              visibility 0s linear 0s;
}

.edc-nav-open .edc-nav-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 280ms var(--edc-nav-ease),
              visibility 0s linear 0s;
}

/* A shut drawer is taken out of layout entirely.
   
   It is fixed at right:0 and pushed off-screen with translateX(100%), so its
   box runs from the right edge of the viewport to 323px past it. Nothing
   clips a fixed element — overflow-x:hidden and clip on html and on body were
   both measured and neither changes the result — so that box extends the
   document and the page scrolls sideways: 380px at 768px wide, measured live.
   
   This class is added by site-nav.js AFTER the 280ms slide has finished and
   removed a frame BEFORE the next one starts, so the animation is unaffected.
   It is never applied on the no-JS path, where the drawer is static and is
   part of the page. */
.edc-nav-drawer-parked {
  display: none;
}

/* The drawer is a fixed overlay; above the breakpoint it must not exist at all,
   or it would sit invisibly over the page and eat clicks. */
@media (min-width: 1024px) {
  .edc-nav-scrim,
  .edc-nav-drawer {
    display: none;
  }
}

.edc-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(212, 168, 75, 0.14);
}

.edc-nav-drawer-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--edc-nav-gold);
}

.edc-nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 15px;
}

.edc-nav-drawer-body {
  padding: 10px 12px 32px;
}

.edc-nav-drawer-link,
.edc-nav-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #e9ecf1;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--edc-nav-ease),
              color 180ms var(--edc-nav-ease);
}

.edc-nav-drawer-link:hover,
.edc-nav-drawer-link:active,
.edc-nav-acc-trigger:hover,
.edc-nav-acc-trigger[aria-expanded="true"] {
  background: rgba(212, 168, 75, 0.08);
  color: var(--edc-nav-gold);
}

.edc-nav-acc-chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 260ms var(--edc-nav-ease);
}

.edc-nav-acc-trigger[aria-expanded="true"] .edc-nav-acc-chevron {
  transform: rotate(180deg);
}

/* Collapsed by height rather than display:none so the open/close is animatable
   and so the links stay in the accessibility tree only when actually open. */
.edc-nav-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-left: 14px;
  border-left: 1px solid rgba(212, 168, 75, 0.24);
  transition: grid-template-rows 280ms var(--edc-nav-ease);
}

.edc-nav-acc-panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.edc-nav-acc-panel > div {
  overflow: hidden;
  min-height: 0;
}

.edc-nav-acc-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  font-size: 14px;
  color: #c8cfda;
  text-decoration: none;
  transition: color 180ms var(--edc-nav-ease);
}

.edc-nav-acc-panel a:hover,
.edc-nav-acc-panel a:active {
  color: var(--edc-nav-gold);
}

.edc-nav-acc-panel a i {
  width: 16px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--edc-nav-gold);
  opacity: 0.85;
}

/* Entrance stagger. --edc-i is set per item in the markup, so no JS is needed
   to drive it and nothing is hidden if the script never runs. */
.edc-nav-open .edc-nav-drawer-item {
  animation: edc-nav-item-in 320ms var(--edc-nav-ease) both;
  animation-delay: calc(60ms + (var(--edc-i, 0) * 26ms));
}

@keyframes edc-nav-item-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Body scroll lock while the drawer is open. */
.edc-nav-locked {
  overflow: hidden;
}

/* ==========================================================================
   No-JavaScript floor
   --------------------------------------------------------------------------
   With JS off the burger cannot toggle anything, so below 1024px the drawer is
   un-fixed and rendered inline as a plain list and the burger is hidden. Every
   link stays reachable. Above 1024px the bar and the :focus-within panels
   already work without script.
   ========================================================================== */
.edc-nav-nojs .edc-nav-burger { display: none; }

@media (max-width: 1023.98px) {
  .edc-nav-nojs .edc-nav-drawer {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    visibility: visible;
    box-shadow: none;
    border-left: 0;
    border-top: 1px solid rgba(212, 168, 75, 0.16);
  }
  .edc-nav-nojs .edc-nav-close { display: none; }
  .edc-nav-nojs .edc-nav-acc-panel { grid-template-rows: 1fr; }
}