/* =========================================================
   Uxelio Header
   Desktop  (1024px and up): logo + menu left, dark/light + search right
   Tablet / Mobile (below 1024px): hamburger + logo left, dark/light + search right
   Everything is scoped to .uxelio-header / .uxelio-drawer
   ========================================================= */

/* ---------- Colours (light = default) ---------- */
.uxelio-header,
.uxelio-drawer {
  --ux-bg: #ffffff;
  --ux-fg: #111111;
  --ux-muted: #5b6068;
  --ux-line: #e6e8ec;
  --ux-hover: #241478;          /* navy from the logo */
  --ux-pill: #dfe2e7;
  --ux-knob: #ffffff;
  --ux-knob-fg: #f59e0b;
  --ux-field: #f4f5f7;
}

/* ---------- Colours (dark) ---------- */
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-header,
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-drawer {
  --ux-bg: #111214;
  --ux-fg: #f3f4f6;
  --ux-muted: #a3a9b2;
  --ux-line: #25282d;
  --ux-hover: #00b9d6;          /* cyan from the logo */
  --ux-pill: #3a3d44;
  --ux-knob: #1c1e22;
  --ux-knob-fg: #cfd6ff;
  --ux-field: #1b1d21;
}

.uxelio-header *,
.uxelio-header *::before,
.uxelio-header *::after,
.uxelio-drawer *,
.uxelio-drawer *::before,
.uxelio-drawer *::after { box-sizing: border-box; }

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

/* ---------- Bar ---------- */
.uxelio-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: var(--ux-bg);
  color: var(--ux-fg);
  border-bottom: 1px solid var(--ux-line);
  font-family: inherit;
}
body.admin-bar .uxelio-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .uxelio-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .uxelio-header { top: 0; } }

/* Same width as the 3-post hero: max 1172px with 16px side padding = 1140px content */
.uxelio-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1172px;
  height: 64px;
  margin: 0 auto;
  padding: 0 16px;
}
.uxelio-header__left,
.uxelio-header__right {
  display: flex;
  align-items: center;
  min-width: 0;
}
.uxelio-header__left { gap: 28px; flex: 1 1 auto; }
.uxelio-header__right { gap: 10px; flex: 0 0 auto; }

/* ---------- Logo (light + dark versions) ---------- */
.uxelio-header .uxelio-logo,
.uxelio-drawer .uxelio-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.uxelio-header .uxelio-logo img,
.uxelio-drawer .uxelio-logo img {
  display: block;
  width: auto;
  height: 34px;
  max-width: none;
  margin: 0;
}
.uxelio-logo__dark { display: none !important; }
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-logo__light { display: none !important; }
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-logo__dark { display: block !important; }

/* ---------- Desktop menu ---------- */
.uxelio-nav { min-width: 0; }
.uxelio-nav .uxelio-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uxelio-nav .uxelio-menu li { position: relative; margin: 0; padding: 0; list-style: none; }
.uxelio-nav .uxelio-menu a {
  display: block;
  padding: 10px 12px;
  color: var(--ux-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.uxelio-nav .uxelio-menu a:hover,
.uxelio-nav .uxelio-menu li:focus-within > a,
.uxelio-nav .uxelio-menu .current-menu-item > a,
.uxelio-nav .uxelio-menu .current_page_item > a,
.uxelio-nav .uxelio-menu .current-menu-ancestor > a { color: var(--ux-hover); }

/* dropdown (desktop only) */
.uxelio-nav .uxelio-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: none;
  min-width: 190px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--ux-bg);
  border: 1px solid var(--ux-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.uxelio-nav .uxelio-menu li:hover > .sub-menu,
.uxelio-nav .uxelio-menu li:focus-within > .sub-menu { display: block; }
.uxelio-nav .uxelio-menu .sub-menu a { padding: 9px 16px; font-weight: 500; }

/* ---------- Buttons ---------- */
.uxelio-burger,
.uxelio-searchbtn,
.uxelio-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ux-fg);
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.uxelio-burger:hover,
.uxelio-searchbtn:hover,
.uxelio-drawer__close:hover { color: var(--ux-hover); background: transparent; }
.uxelio-burger:focus-visible,
.uxelio-searchbtn:focus-visible,
.uxelio-drawer__close:focus-visible,
.uxelio-mode:focus-visible { outline: 2px solid var(--ux-hover); outline-offset: 2px; }
.uxelio-burger { display: none; margin-left: -8px; }   /* desktop: hidden */

/* ---------- Dark / light switch ---------- */
.uxelio-mode {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ux-pill);
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s ease;
}
.uxelio-mode:hover { background: var(--ux-pill); }
.uxelio-mode__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ux-knob);
  color: var(--ux-knob-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.uxelio-mode__moon { display: none; }
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-mode__sun { display: none; }
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-mode__moon { display: block; }
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-mode__knob { transform: translateX(22px); }

/* ---------- Search panel ---------- */
.uxelio-search {
  display: none;
  background: var(--ux-bg);
  border-top: 1px solid var(--ux-line);
}
.uxelio-search.is-open { display: block; }
.uxelio-search__inner {
  width: 100%;
  max-width: 1172px;
  margin: 0 auto;
  padding: 12px 16px;
}
.uxelio-search__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
}
.uxelio-search__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ux-line);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--ux-field);
  color: var(--ux-fg);
  font-size: 16px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.uxelio-search__form input[type="search"]:focus { outline: 2px solid var(--ux-hover); outline-offset: -2px; }
.uxelio-search__form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: var(--ux-hover);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}
:is(html[data-uxelio-mode="dark"], body.dark, body.aft-dark-mode) .uxelio-search__form button { color: #04222a; }

/* ---------- Drawer (tablet + mobile menu) ---------- */
.uxelio-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .25s;
}
.uxelio-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
body.admin-bar .uxelio-drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar .uxelio-drawer { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .uxelio-drawer { top: 0; } }

.uxelio-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.uxelio-drawer.is-open .uxelio-drawer__backdrop { opacity: 1; }

.uxelio-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 320px);
  background: var(--ux-bg);
  color: var(--ux-fg);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.uxelio-drawer.is-open .uxelio-drawer__panel { transform: translateX(0); }
.uxelio-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--ux-line);
}
.uxelio-drawer .uxelio-logo img { height: 28px; }
.uxelio-drawer__nav { padding: 6px 16px 24px; }
.uxelio-drawer__nav .uxelio-menu,
.uxelio-drawer__nav .uxelio-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.uxelio-drawer__nav .uxelio-menu li { margin: 0; padding: 0; list-style: none; }
.uxelio-drawer__nav .uxelio-menu a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--ux-line);
  color: var(--ux-fg);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.uxelio-drawer__nav .uxelio-menu a:hover,
.uxelio-drawer__nav .uxelio-menu .current-menu-item > a,
.uxelio-drawer__nav .uxelio-menu .current_page_item > a { color: var(--ux-hover); }
.uxelio-drawer__nav .uxelio-menu .sub-menu { padding-left: 14px; }
.uxelio-drawer__nav .uxelio-menu .sub-menu a { font-size: 15px; font-weight: 500; }

html.uxelio-lock { overflow: hidden; }

/* ---------- TABLET + MOBILE (below 1024px) ---------- */
@media (max-width: 1023px) {
  .uxelio-header__inner { height: 56px; padding: 0 12px; }
  .uxelio-header__left { gap: 6px; }          /* logo sits right next to the hamburger */
  .uxelio-burger { display: inline-flex; }
  .uxelio-nav { display: none; }              /* menu links live in the hamburger drawer */
  .uxelio-header .uxelio-logo img { height: 28px; }
  .uxelio-search__inner { padding: 10px 12px; }
}

/* very small phones: keep everything on one line */
@media (max-width: 359px) {
  .uxelio-header .uxelio-logo img { height: 24px; }
  .uxelio-header__right { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .uxelio-drawer__panel,
  .uxelio-drawer__backdrop,
  .uxelio-mode,
  .uxelio-mode__knob { transition: none; }
}