/* ==========================================================
   support.endavomedia.com — header styles
   Matched to the www.endavomedia.com header: black bar,
   cyan buttons, uppercase Lato navigation, white dropdowns
   attached to the bottom edge of the header.
   ========================================================== */

:root {
  --bg:            #000000;
  --text:          #ffffff;
  --accent:        #2cd7f3;   /* cyan: Login, Free Trial, underline, hover */
  --accent-hover:  #5be3f8;
  --font:          "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --top-h:         73px;
  --main-h:        76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: 1920px;         /* centers the header on very wide screens */
  margin: 0 auto;
  padding: 0 16px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #000; padding: 8px 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

/* ---------- Header shell ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--bg);
}

/* ---------- Top bar ---------- */

.top-bar {
  height: var(--top-h);
  font-size: 17px;
}
.top-bar__inner {
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 5px;
}

.social { display: flex; align-items: center; gap: 29px; height: 28px; }
.social a { display: block; width: 20px; height: 20px; color: var(--text); transition: color .2s; }
.social a:hover { color: var(--accent); }
.social svg { width: 100%; height: 100%; fill: currentColor; }

.utility { display: flex; align-items: center; gap: 27px; height: 35px; }
.utility a { text-transform: uppercase; color: var(--text); transition: color .2s; }
.utility a:hover { color: var(--accent); }

.utility .login { margin-left: -13px; }
.utility .login a {
  display: flex;
  align-items: center;
  height: 35px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff;
  transition: background .2s;
}
.utility .login a:hover { background: var(--accent-hover); color: #fff; }

/* ---------- Main bar ---------- */

.main-bar { height: var(--main-h); }
.main-bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img { height: 43px; width: auto; }

/* ---------- Primary navigation (desktop) ---------- */

.primary-nav { height: 100%; }

.menu {
  height: 100%;
  display: flex;
  align-items: stretch;      /* each item spans the full bar so dropdowns attach to the header's bottom edge */
  gap: 28px;
}

.menu > li { position: relative; display: flex; align-items: center; }

.menu > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
  transition: text-decoration-color .2s;
}
.menu > li:hover > a,
.menu > li:focus-within > a { text-decoration-color: var(--accent); }

/* Dropdown: white panel directly under the header */
.sub {
  position: absolute;
  top: 100%;
  left: -15px;
  width: 360px;
  padding: 30px 39px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.has-sub:hover > .sub,
.has-sub:focus-within > .sub {
  opacity: 1;
  visibility: visible;
}
.sub a {
  display: block;
  padding: 9px 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #000;
  transition: color .15s;
}
.sub a:hover { color: #0aa9c4; }

/* "Free Trial" button */
.menu > .cta > a {
  height: auto;
  padding: 9px 27px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  transition: background .2s;
}
.menu > .cta:hover > a,
.menu > .cta:focus-within > a { background: var(--accent-hover); color: #fff; }

/* ---------- Hamburger ---------- */

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.menu-toggle__bar {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--text);
  transition: transform .25s, opacity .2s, top .25s;
}
.menu-toggle__bar:nth-child(1) { top: 14px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 28px; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- Main content area (to be filled later) ---------- */

.site-main {
  min-height: 100vh;
  padding-top: calc(var(--top-h) + var(--main-h) + 40px);
}

/* ---------- Medium desktops: scale the type down ---------- */

@media (max-width: 1599px) {
  :root { --top-h: 60px; --main-h: 70px; }
  .top-bar { font-size: 16px; }
  .top-bar__inner { padding-top: 5px; }
  .social { gap: 24px; }
  .logo img { height: 36px; }
  .menu { gap: 22px; }
  .menu > li > a, .sub a { font-size: 16px; }
  .sub { width: 300px; padding: 24px 30px; }
  .menu > .cta > a { padding: 9px 22px; }
}

/* ---------- Tablet / mobile ---------- */

@media (max-width: 1199px) {
  :root { --top-h: 50px; --main-h: 76px; }

  .container { padding: 0 20px; }
  .top-bar { font-size: 14px; }
  .top-bar__inner { padding-top: 8px; }
  .social a { width: 18px; height: 18px; }
  .utility { gap: 20px; height: 34px; }
  .utility .login { margin-left: -6px; }
  .utility .login a { height: 34px; padding: 0 14px; }
  .logo img { height: 32px; }

  .menu-toggle { display: block; }

  .primary-nav {
    position: fixed;
    top: calc(var(--top-h) + var(--main-h));
    left: 0; right: 0; bottom: 0;
    height: auto;
    overflow-y: auto;
    background: var(--bg);
    padding: 10px 20px 40px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s, visibility .3s;
  }
  .primary-nav.is-open { transform: translateX(0); visibility: visible; }

  .menu { height: auto; flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { display: block; }
  .menu > li > a {
    height: auto;
    padding: 16px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
  }

  .sub {
    position: static;
    display: none;
    width: auto;
    padding: 4px 0 8px 16px;
    background: transparent;
    opacity: 1;
    visibility: visible;
  }
  .has-sub.is-open > .sub { display: block; }
  .sub a { padding: 10px 0; font-size: 16px; color: #fff; }
  .sub a:hover { color: var(--accent); }

  .menu > .cta { margin: 20px 0 0; }
  .menu > .cta > a { justify-content: center; border-bottom: 0; padding: 14px 22px; }
}

@media (max-width: 520px) {
  .utility { gap: 14px; }
  .top-bar { font-size: 12px; }
  .social { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}