/* ==========================================================================
   Dynamic Mockups — site header
   --------------------------------------------------------------------------
   Loads on every page, so it declares its own type and colour rather than
   inheriting from body (legacy pages still set Manrope on body). Every class
   is `dm-hd-` prefixed: the legacy `.header` / `.dropdown-menu` rules in
   header_style.css cannot reach this markup, and this file cannot reach theirs.

   Position is `fixed`, matching the header it replaces — legacy templates
   already reserve that space at the top of the page, so nothing shifts. New
   `.dm` pages offset themselves with --dm-header-h.
   ========================================================================== */

.dm-hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  font-family: var(--dm-font-body);
  font-size: 16px;
  line-height: var(--dm-leading-body);
  color: var(--dm-ink);
  background: transparent;
  overflow: visible;
}

/* The blur ground, with no edge at all: the design lets the page ground meet
   the header without a rule or a shadow. */
.dm-hd-bar {
  background: rgba(244, 245, 241, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dm-hd-inner {
  position: relative;
  max-width: 1344px;
  margin: 0 auto;
  padding-inline: 48px;
  height: var(--dm-header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ---------- lockup ----------
   Gap is the brand lockup's own 0.433 of the mark height. The wordmark is set
   to the nav rather than to the mark: at 15.4px its baseline lands on the nav
   links' baseline, so no vertical nudge is needed. The mark's solid body fills
   only the lower-left of its box, so --dm-mark-lift drops that body onto the
   same baseline. */
.dm-hd-logo {
  --dm-logo-h: 20px;
  --dm-wordmark-h: 15.4px;
  --dm-mark-lift: 4.97px;

  display: flex;
  align-items: center;
  gap: calc(var(--dm-logo-h) * 0.433);
  flex: none;
}

.dm-hd-logo:hover { color: inherit; }

.dm-hd-mark {
  width: var(--dm-logo-h);
  height: var(--dm-logo-h);
  display: block;
  transform: translateY(calc(-1 * var(--dm-mark-lift)));
}

.dm-hd-wordmark {
  height: var(--dm-wordmark-h);
  width: auto;
  display: block;
}

/* ---------- nav ---------- */
.dm-hd-nav {
  display: flex;
  /* Fill the bar's height: .dm-hd-inner centres its children, so without this
     the nav is only as tall as its links and every item's hover area stops
     33px short of the bar's bottom edge. */
  align-self: stretch;
  align-items: stretch;
}

.dm-hd-list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Full-bar-height items: the hoverable area reaches the bottom edge of the bar,
   so moving the pointer down toward the panel never crosses dead space. The link
   inside stays its own size — it is centred, not stretched. */
.dm-hd-item {
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
}

.dm-hd-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--dm-neutral-900);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--dm-radius-button);
  transition: color .12s ease, background-color .12s ease;
}

.dm-hd-link:hover,
.dm-hd-link:focus-visible {
  color: var(--dm-ink);
  text-decoration: none;
}

.dm-hd-item--menu > .dm-hd-link { padding-right: 2px; }

.dm-hd-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-right: 4px;
  border: 0;
  background: transparent;
  color: var(--dm-text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  transition: transform .2s var(--dm-ease-press), color .12s ease;
}

.dm-hd-caret svg,
.dm-hd-burger svg {
  display: block;
}

.dm-hd-caret:hover { color: var(--dm-ink); }

.dm-hd-item--menu:hover .dm-hd-caret,
.dm-hd-item--menu:focus-within .dm-hd-caret,
.dm-hd-item--menu.is-open .dm-hd-caret {
  transform: rotate(180deg);
  color: var(--dm-ink);
}

/* ---------- dropdown panels ----------
   Hover and focus-within open them with no JS at all; the caret button's
   `.is-open` class is the keyboard and touch path. */
.dm-hd-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 8px;
  padding: 10px;
  min-width: 220px;
  background: var(--dm-surface-raised);
  border-radius: var(--dm-radius-card-inner);
  box-shadow: 0 4px 24px rgba(33, 34, 29, 0.14), inset 0 0 0 1px var(--dm-border-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--dm-ease-press), transform .18s var(--dm-ease-press), visibility .18s;
  /* Grace period on the way out: the delay applies to the closing transition
     only (the open state below zeroes it), so a slow or diagonal pointer does
     not lose the menu. Opening stays instant. */
  transition-delay: 250ms;
}

/* Hover bridge across the gap between the item and the panel. Without it the
   pointer leaves the item, lands in dead space, and the menu closes before it
   arrives. Measured with a scripted slow pointer: 21px under a mega item (the
   panel hangs off .dm-hd-inner, not off the item), 8px under a list item — 16px
   covers both once the items themselves reach the bar's bottom edge. */
.dm-hd-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.dm-hd-item--menu:hover > .dm-hd-panel,
.dm-hd-item--menu:focus-within > .dm-hd-panel,
.dm-hd-item--menu.is-open > .dm-hd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}

/* Swapping menus must be instant. While the pointer is anywhere in the nav, an
   item it is NOT on drops its grace period — otherwise the panel being left
   lingers for 250ms on top of the one being opened, and since mega panels are
   the same size and both opaque, moving right-to-left shows the stale one. */
.dm-hd-list:hover .dm-hd-item--menu:not(:hover) > .dm-hd-panel {
  transition-delay: 0ms;
}

/* The mega panel spans the header container rather than its own nav item:
   centring a 1000px panel on a link that sits 300px from the left edge would
   push it off screen. The item goes `position: static` so the panel resolves
   against .dm-hd-inner, and the page gutters become the panel's edges. */
.dm-hd-item--mega { position: static; }

.dm-hd-panel--mega {
  left: 0;
  right: 0;
  width: auto;
  padding: 20px;
}

.dm-hd-mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-hd-mega li { list-style: none; }

.dm-hd-mega-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--dm-radius-card);
  text-decoration: none;
  color: var(--dm-ink);
  transition: background-color .14s ease;
}

.dm-hd-mega-item:hover,
.dm-hd-mega-item:focus-visible {
  background: var(--dm-surface-card);
  color: var(--dm-ink);
  text-decoration: none;
}

.dm-hd-mega-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--dm-radius-button);
  background: var(--dm-surface-card);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dm-hd-mega-item:hover .dm-hd-mega-icon { background: var(--dm-surface-white); }

.dm-hd-mega-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.dm-hd-mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dm-hd-mega-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dm-ink);
}

.dm-hd-mega-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dm-text-secondary);
}

/* the simple list panel (Resources) */
.dm-hd-sublist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-hd-sublist li { list-style: none; }

.dm-hd-sublist a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--dm-radius-button);
  font-size: 14px;
  font-weight: 400;
  color: var(--dm-neutral-900);
  text-decoration: none;
  transition: background-color .14s ease, color .12s ease;
}

.dm-hd-sublist a:hover,
.dm-hd-sublist a:focus-visible {
  background: var(--dm-surface-card);
  color: var(--dm-ink);
  text-decoration: none;
}

/* ---------- right-hand actions ---------- */
.dm-hd-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dm-hd-actions .dm-btn { margin-left: 8px; }

/* ---------- mobile drawer ---------- */
.dm-hd-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--dm-radius-button);
  background: transparent;
  color: var(--dm-ink);
  cursor: pointer;
}

.dm-hd-burger:hover { background: var(--dm-neutral-100); }
.dm-hd-burger-close { display: none; }
.dm-hd-burger[aria-expanded="true"] .dm-hd-burger-open { display: none; }
.dm-hd-burger[aria-expanded="true"] .dm-hd-burger-close { display: inline-flex; }

.dm-hd-drawer {
  display: none;
  position: fixed;
  top: var(--dm-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--dm-surface-page);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dm-hd.is-drawer-open .dm-hd-drawer { display: block; }

.dm-hd-drawer-inner {
  padding: 8px 24px 48px;
}

.dm-hd-drawer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-hd-drawer-item {
  list-style: none;
  border-bottom: 1px solid var(--dm-border-card);
}

.dm-hd-drawer-link,
.dm-hd-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  background: transparent;
  font-family: var(--dm-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--dm-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dm-hd-drawer-toggle svg {
  flex: none;
  color: var(--dm-text-tertiary);
  transition: transform .25s var(--dm-ease-press);
}

.dm-hd-drawer-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dm-hd-drawer-panel {
  display: none;
  padding-bottom: 8px;
}

.dm-hd-drawer-panel.is-open { display: block; }

.dm-hd-drawer-panel ul {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.dm-hd-drawer-panel li { list-style: none; }

.dm-hd-drawer-panel a {
  display: block;
  padding: 11px 12px;
  border-radius: var(--dm-radius-button);
  font-size: 15px;
  color: var(--dm-neutral-900);
  text-decoration: none;
}

.dm-hd-drawer-panel a:hover {
  background: var(--dm-surface-card);
  color: var(--dm-ink);
}

.dm-hd-drawer-cta {
  margin-top: 28px;
}

.dm-hd-drawer-cta .dm-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- motion: hides going down, returns going up, tightens after the
   top of the page ---------- */
.dm-motion .dm-hd { transition: transform 380ms var(--dm-ease-press); }
.dm-motion .dm-hd-inner { transition: height 380ms var(--dm-ease-press); }
.dm-hd.is-hidden { transform: translateY(-101%); }
.dm-hd.is-tight .dm-hd-inner { height: var(--dm-header-h-tight); }

/* never hide the header while the drawer is open */
.dm-hd.is-drawer-open.is-hidden { transform: none; }

/* ---------- dark-page variant ----------
   A page that runs dark puts `dm-dark` on its own wrapper, but the header sits
   outside that wrapper — so dm_dark_body_class() adds `dm-dark-page` to <body>
   and this keys off it. Server-rendered, so the header is never light for a
   frame before anything runs.

   It is an INK ISLAND (the pattern in dm/pricing.css): it re-declares the
   semantic tokens rather than overriding each element, which is what makes the
   mega panels, the drawer, the CTA button and the caret all follow without a
   rule each. `.dm-btn` becomes light-on-dark-text by itself, because it reads
   --dm-ink and --dm-on-ink.

   This replaces the old `body.mockup-api-dark-mode` / `body.lookbooks-dark-mode`
   hooks, which came from a localStorage colour toggle that no longer exists. */
body.dm-dark-page .dm-hd {
  --dm-ink: #F4F5F1;
  --dm-text-body: #F4F5F1;
  --dm-text-secondary: #C4C6B9;
  --dm-text-tertiary: #93948B;
  --dm-on-ink: #21221D;
  --dm-neutral-900: #FFFFFF;

  --dm-surface-page: #16170F;
  --dm-surface-card: #21221D;
  --dm-surface-raised: #21221D;
  --dm-surface-white: #2A2B25;

  --dm-border-card: #3B3C36;
  --dm-border-card-soft: #4F5049;
  --dm-border-hairline: #4F5049;
  --dm-card-inset: inset 0 0 0 1px #3B3C36;
}

body.dm-dark-page .dm-hd-bar {
  background: rgba(18, 19, 16, 0.82);
}

/* Both halves of the lockup are <img> SVGs, so `color` cannot reach them —
   they are inverted rather than swapped for a second pair of assets. */
body.dm-dark-page .dm-hd-mark,
body.dm-dark-page .dm-hd-wordmark {
  filter: invert(1) brightness(1.7);
}

/* The panel's shadow is tuned for a pale ground; on dark it needs depth, not
   a grey haze. */
body.dm-dark-page .dm-hd-panel {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 0 0 1px #3B3C36;
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .dm-hd-inner { padding-inline: 32px; gap: 20px; }
  .dm-hd-list { gap: 0; }
  .dm-hd-link { padding-inline: 8px; }
}

@media (max-width: 1100px) {
  .dm-hd-inner { padding-inline: 24px; }
  .dm-hd-nav { display: none; }
  .dm-hd-burger { display: inline-flex; }
}

@media (max-width: 720px) {
  .dm-hd-logo { --dm-logo-h: 18px; }
  .dm-hd-actions { gap: 4px; }
  .dm-hd-actions .dm-btn { margin-left: 4px; }
}

@media (max-width: 480px) {
  .dm-hd-login { display: none; }
}

/* ---------- WordPress admin bar ----------
   The admin bar is fixed at the top for logged-in users; drop the header below
   it so the lockup is not covered. */
body.admin-bar .dm-hd { top: 32px; }
body.admin-bar .dm-hd-drawer { top: calc(var(--dm-header-h) + 32px); }

@media (max-width: 782px) {
  body.admin-bar .dm-hd { top: 46px; }
  body.admin-bar .dm-hd-drawer { top: calc(var(--dm-header-h) + 46px); }
}