@charset "UTF-8";
/* ============================================================
   DMEC Header Redesign — Sprint 3 Nav
   Figma: node 499-12166
   Issues: #54, #55, #56, #57, #58
   Refs: token fixes + account dropdown + Blocksy button overrides
   ============================================================ */
/* --- Hide existing Elementor / Blocksy header --- */
body.dmec-redesign-active [data-elementor-type=header],
body.dmec-redesign-active .elementor-location-header,
body.dmec-redesign-active .ct-header,
body.dmec-redesign-active #header {
  display: none !important;
}

/* --- Design tokens from Figma ---
   Canonical mappings per issue #106 Phase 2:
   - --dmec-text → warm-700 (#535252) per Figma navigation/utility static state
   - --dmec-blue-bg-light → primary-100 (#F2F9FF) per Figma account-pill hover
   - --dmec-blue-bright NEW → primary-500 (#508DFF) for hover-indication borders
   - --dmec-soft-hover NEW → tertiary-200 (#F9D9FA) for search-icon hover
   - --dmec-pressed-avatar NEW → tertiary-300 (#EEAEEF) for account pressed
   - --dmec-focus-ring NEW → tertiary-500 (#CB45CC) for 4px focus-visible ring */
body.dmec-redesign-active {
  --dmec-navy-dark: var(--dmec-primary-1000);
  --dmec-navy: var(--dmec-primary-900);
  --dmec-blue: var(--dmec-primary-700);
  --dmec-blue-accent: var(--dmec-primary-800);
  --dmec-blue-bright: var(--dmec-primary-500);
  --dmec-blue-border: var(--dmec-primary-600);
  --dmec-blue-highlight: var(--dmec-primary-300);
  --dmec-blue-bg-light: var(--dmec-primary-100);
  --dmec-blue-avatar: var(--dmec-primary-400);
  --dmec-soft-hover: var(--dmec-tertiary-200);
  --dmec-pressed-avatar: var(--dmec-tertiary-300);
  --dmec-focus-ring: var(--dmec-tertiary-500);
  --dmec-text: var(--dmec-neutral-warm-700);
  --dmec-text-light: var(--dmec-neutral-warm-500);
  --dmec-border: var(--dmec-neutral-warm-400);
  --dmec-card-bg: var(--dmec-neutral-cold-100);
  --dmec-white: #ffffff;
  --dmec-promo-title: var(--dmec-primary-700);
  --dmec-promo-text: var(--dmec-neutral-warm-800);
  padding-top: 0 !important;
  font-family: var(--dmec-font-family-body);
}

/* --- Shared container --- */
.dmec-header-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
  box-sizing: border-box;
}

/* --- Shell: sticky header wrapper --- */
.dmec-header-shell {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--dmec-white);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 821px) {
  .dmec-header-shell {
    font-size: 16px;
    line-height: 1.4;
  }
}
/* ==========================================================
   #54 — Utility Bar
   Figma: white bg, right-aligned, PT Sans 14/700, #535252
   ========================================================== */
.dmec-header-utility-bar {
  background: var(--dmec-white);
  border-bottom: 0 !important;
}

.dmec-header-utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.dmec-header-utility-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.dmec-utility-link,
.dmec-utility-link:visited,
.dmec-header-utility-links a,
.dmec-header-utility-links a:visited {
  color: var(--dmec-text) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: "PT Sans", sans-serif;
  line-height: 1.43;
  /* Hold space for the 2-px hover border so layout doesn't shift */
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

/* Hover: color shifts to Primary/700, indication is 2-px Primary/500 border
   (NOT text-decoration: underline) per navigation/utility canonical (165:4642) */
.dmec-utility-link:hover,
.dmec-header-utility-links a:hover {
  text-decoration: none;
  color: var(--dmec-blue) !important;
  border-bottom-color: var(--dmec-blue-bright);
}

/* Focus-visible: 4-px Tertiary/500 outline ring ONLY (Strong tier per
   Figma 165:4733). Default text color and transparent border are
   inherited; hover treatment layers in via :hover when both states
   apply concurrently. Do NOT bundle hover styling here. */
.dmec-utility-link:focus-visible,
.dmec-header-utility-links a:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Pressed/active: Tertiary/700 text + Tertiary/600 border per navigation/utility canonical */
.dmec-utility-link:active,
.dmec-header-utility-links a:active {
  color: var(--dmec-tertiary-700) !important;
  border-bottom-color: var(--dmec-tertiary-600);
  text-decoration: none;
}

/* Current page: Tertiary/700 text + border, matching the primary nav
   aria-current="page" treatment (line ~574). */
.dmec-utility-link[aria-current=page],
.dmec-header-utility-links a[aria-current=page] {
  color: var(--dmec-tertiary-700) !important;
  border-bottom-color: var(--dmec-tertiary-700);
  text-decoration: none;
}

/* Disabled: warm-500 text, no underline */
.dmec-utility-link[aria-disabled=true],
.dmec-utility-link:disabled,
.dmec-header-utility-links a[aria-disabled=true] {
  color: var(--dmec-text-light) !important;
  border-bottom-color: transparent;
  text-decoration: none;
  pointer-events: none;
  cursor: not-allowed;
}

.dmec-account-button--outline,
.dmec-account-button--outline:visited {
  color: var(--dmec-text) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-family: "PT Sans", sans-serif;
  line-height: 1.43;
}

/* Account area — anonymous: outlined Register/Login */
.dmec-account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "PT Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.32; /* Figma: UI text/small/bold */
}

.dmec-account-button--outline {
  border: 1px solid var(--dmec-blue-border);
  background: transparent;
  color: var(--dmec-text) !important;
  border-radius: 20px;
  padding: 4px 16px;
  min-height: 32px;
  /* Layout-stable hover thickness: keep border at 1px, add a 1-px inset
     shadow on hover for the canonical "2-px ring" visual without
     changing the box model. Border-width transitions are skipped to
     eliminate mid-animation layout jumps. */
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Hover: Primary/100 bg + 1-px solid Primary/500 border + 1-px inset
   Primary/500 shadow (= 2-px effective ring) per Figma navigation/
   account login Hovered Desktop (610:6023). Text stays Neutral/warm/
   700 — Figma does NOT shift text to Primary/700 on hover. */
.dmec-account-button--outline:hover {
  background: var(--dmec-primary-100);
  border-color: var(--dmec-blue-bright);
  box-shadow: inset 0 0 0 1px var(--dmec-blue-bright);
  text-decoration: none;
}

/* Focus-visible: 4px Tertiary/500 ring drawn INSIDE the outer edge per
   Figma navigation/account login Focused Desktop (610:6039) — the
   canonical ring REPLACES the 1px Primary/600 default border rather
   than sitting outside it with a gap. `outline-offset: -4px` draws
   the outline starting 4px inside the box's outer edge, so its outer
   edge sits flush at the button's outer edge. `border-color:
   transparent` hides the underlying 1px default border so only the
   ring is visible. The 1px border WIDTH stays intact to keep the box
   size and content position stable across states. */
.dmec-account-button--outline:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: -4px;
  border-color: transparent;
}

/* Pressed: 2-px effective Tertiary/600 border per Figma navigation/
   account login Pressed Desktop (610:6031). Implemented as 1px solid
   border + 1px inset shadow (same layout-stable pattern as :hover) so
   the box doesn't grow on click. Background reset to transparent in
   case :hover (Primary/100) is also active concurrently. */
.dmec-account-button--outline:active {
  background: transparent;
  border-color: var(--dmec-tertiary-600);
  box-shadow: inset 0 0 0 1px var(--dmec-tertiary-600);
}

/* Account area — logged-in: avatar + name + chevron.
   !important is needed across the board because Blocksy's default
   <button> styling sets a solid primary bg, 56px height, and
   upscaled font/line-height that win on specificity without it. */
button.dmec-account-button--account,
.dmec-account-button--account {
  border: 1px solid var(--dmec-blue-border) !important;
  background: transparent !important;
  color: var(--dmec-text) !important;
  border-radius: 20px !important;
  padding: 4px 8px 4px 4px !important;
  min-height: 32px !important;
  height: auto !important;
  font-family: "PT Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  text-transform: none !important;
  gap: 8px !important;
}

/* Hover: Primary/100 bg + 1-px Primary/500 border + 1-px inset Primary/500
   shadow (= 2-px effective ring, layout-stable) + Primary/700 text per
   Figma navigation/account canonical (530:9114) */
button.dmec-account-button--account:hover,
.dmec-account-button--account:hover {
  background: var(--dmec-blue-bg-light) !important;
  border-color: var(--dmec-blue-bright) !important;
  box-shadow: inset 0 0 0 1px var(--dmec-blue-bright) !important;
  color: var(--dmec-blue) !important;
}

/* Focus-visible: ring only. Hover bg/border/color come from :hover
   when both apply concurrently. Blocksy's button focus styling sets
   bg/box-shadow but NOT outline, so outline can drop !important. */
button.dmec-account-button--account:focus-visible,
.dmec-account-button--account:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

/* Pressed (active or aria-pressed=true / aria-expanded=true): avatar bg
   flips from Primary/400 to Tertiary/300 (#EEAEEF) per canonical */
button.dmec-account-button--account:active .dmec-account-button__avatar,
.dmec-account-button--account:active .dmec-account-button__avatar,
button.dmec-account-button--account[aria-expanded=true] .dmec-account-button__avatar,
.dmec-account-button--account[aria-expanded=true] .dmec-account-button__avatar {
  background: var(--dmec-pressed-avatar) !important;
  color: var(--dmec-tertiary-700) !important;
}

/* Inner spans also need !important protection against Blocksy's
   default button-label rules. */
.dmec-account-button--account .dmec-account-button__label,
.dmec-account-button--account .dmec-account-button__avatar {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.dmec-account-button--account .dmec-account-button__avatar {
  font-size: 12px !important; /* Figma: Caption/medium/bold */
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.dmec-account-button__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--dmec-blue-avatar); /* Primary/400 #81c6ff */
  color: #2b2b2b; /* Neutral/warm/900 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.32;
}

.dmec-account-button__label {
  color: var(--dmec-text);
}

.dmec-account-button__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #3f3f3f;
}

.dmec-account-button__chevron svg {
  width: 18px;
  height: 18px;
  fill: #3f3f3f;
}

/* ==========================================================
   #55 — Primary Navigation Bar
   Figma: white bg, logo left, nav center, CTA + search right
   Height: 58px, padding 8px 60px, gap 60px between logo/nav
   ========================================================== */
.dmec-header-primary-bar {
  position: relative;
  background: var(--dmec-white);
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.dmec-header-primary-bar__inner {
  display: flex;
  align-items: center;
  /* Was `justify-content: space-between`, which floated the nav into
   * the middle of the row away from the logo. Per Figma the nav
   * should sit immediately after the logo with the canonical 60-px
   * gap, and only the right-side actions cluster (CTA + search)
   * should be flush right. We get that with `flex-start` + a
   * `margin-inline-start: auto` push on `.dmec-header-primary-actions`
   * (defined below). */
  justify-content: flex-start;
  min-height: 58px;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 60px; /* Figma: 60px between logo and main nav */
}

/* Hamburger / close toggle — Figma shows a plain stroke icon, no button chrome.
   Blocksy's theme <button> rules set a solid primary bg + 14px/30px padding at
   high specificity, so we use !important across the board (same pattern as
   .dmec-account-button--account elsewhere in this file). */
/* Hamburger / close toggle — Figma navigation Mobile (697:16795)
   button/icon container is 48 × 48 with p-[8px] inset around a 32-px
   menu-rounded glyph. Stays the same dimensions when the drawer is
   open and the icon swaps to close-rounded. */
button.dmec-header-mobile-toggle,
.dmec-header-mobile-toggle {
  display: none;
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--dmec-blue) !important;
  padding: 8px !important;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

button.dmec-header-mobile-toggle:hover,
.dmec-header-mobile-toggle:hover {
  background: var(--dmec-blue-bg-light) !important;
  color: var(--dmec-blue) !important;
}

/* Focus-visible: ring only. Hover bg/color layer in via :hover when
   both apply concurrently. */
button.dmec-header-mobile-toggle:focus-visible,
.dmec-header-mobile-toggle:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

.dmec-header-mobile-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Honor the [hidden] attribute — the display rule above ties with the
   UA stylesheet's [hidden] { display: none } and wins on cascade order,
   causing both icons to render at once. Restore the intended hiding. */
.dmec-header-mobile-toggle__icon[hidden] {
  display: none;
}

/* Glyph 32 × 32 per canonical menu-rounded / close-rounded icons
   inside the 48-px button (8-px inset on each side from button bg).
   Stroke-width 1.5 matches the Material Icons "menu" rounded weight at
   24-px reference scaled to 32-px display — the previous 2 px read
   visibly heavier than the Figma canonical bars. */
.dmec-header-mobile-toggle__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dmec-header-mobile-panel {
  display: contents;
}

.dmec-header-mobile-controls {
  display: none;
  align-items: center;
  /* Figma 697:16795 right cluster: gap-[8px] between account pill
     + hamburger button. */
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile-only blocks inside the primary bar / drawer — hidden on desktop. */
.dmec-header-mobile-extras,
.dmec-header-mobile-account-area {
  display: none;
}

/* Search close X button — the search panel is a full-height overlay on
   mobile, so users need an explicit dismiss. Hidden on desktop (where
   the search toggle in the bar handles close/open). */
.dmec-header-search-close {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--dmec-blue);
  cursor: pointer;
}

/* Nav chevron is a mobile-only affordance. */
.dmec-header-nav__chevron {
  display: none;
}

/* Logo — use actual DMEC logo image */
.dmec-header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.dmec-header-logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Fallback text logo when image not available */
.dmec-header-logo__mark {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--dmec-blue);
  color: var(--dmec-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.dmec-header-logo__text {
  font-size: 20px;
  font-weight: 800;
  color: var(--dmec-navy-dark);
  margin-left: 8px;
}

/* Hide text fallback when image is present */
.dmec-header-logo:has(img) .dmec-header-logo__mark,
.dmec-header-logo:has(img) .dmec-header-logo__text {
  display: none;
}

/* Primary nav */
.dmec-header-nav {
  flex: 1;
}

.dmec-header-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  /* Per Figma the nav items pack flush against the start of the nav
   * (which sits immediately after the logo with the canonical 60-px
   * gap), not center-aligned inside a wide nav container. The
   * actions cluster on the right is pushed via
   * `margin-inline-start: auto` on `.dmec-header-primary-actions`. */
  justify-content: flex-start;
  gap: 20px;
}

.dmec-header-nav__item {
  position: static;
}

.dmec-header-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}

.dmec-header-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 4px 8px;
  text-decoration: none;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dmec-text) !important;
  /* Prevent link text from wrapping mid-word on Windows where the 17px
   * scrollbar makes the viewport ~17px narrower than on Mac (overlay
   * scrollbars). Without this, "Conferences & Webinars" wraps to two
   * lines in Edge on Windows. */
  white-space: nowrap;
  /* 4-px bottom border per Figma navigation/button State=Hovered (163:7790,
     Tailwind border-b-4). Default state keeps transparent placeholder at
     the same thickness so layout stays stable when the color is added on
     hover. */
  border-bottom: 4px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.dmec-header-nav__item:hover > .dmec-header-nav__link,
.dmec-header-nav__item:focus-within > .dmec-header-nav__link,
.dmec-header-nav__link[aria-expanded=true] {
  color: var(--dmec-blue) !important;
  /* Canonical Primary/500 #508DFF (was off-by-1 #4f8dff) */
  border-bottom-color: var(--dmec-blue-bright);
}

/* Focus-visible: 4-px Tertiary/500 outline ring ONLY. Hover color +
   border-bottom layer in via :hover when both apply concurrently. */
.dmec-header-nav__link:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.dmec-header-nav__link[aria-current=page],
.dmec-header-nav__link:visited[aria-current=page] {
  color: #701471 !important;
  border-bottom-color: #701471;
}

.dmec-header-nav__link:visited {
  color: #535252 !important;
}

/* Right-side actions: CTA + search.
 * `margin-inline-start: auto` partners with the bar's
 * `justify-content: flex-start` to keep the logo + nav left-aligned
 * (logo, 60-px gap, nav, then leftover space) while pushing CTA +
 * search flush to the right edge. */
.dmec-header-primary-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.dmec-header-primary-actions > * {
  align-self: center;
}

/* CTA — Figma button/basic Primary Default Small (119:3915): Primary/700
   bg #2455a6, r=4, PT Sans 14/700, white, 42px. Was incorrectly using
   --dmec-blue-accent (Primary/800) — fixed 2026-05-04 cleanup pass. */
.dmec-header-cta {
  background: var(--dmec-blue); /* Primary/700 */
  color: var(--dmec-white) !important;
  padding: 0 12px;
  border-radius: 4px;
  font-family: "PT Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px; /* Figma: 42px */
  min-height: 42px;
  line-height: 1.32; /* Figma: UI text/small/bold */
  box-sizing: border-box;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Visited links keep the default Primary/700 bg + white text (color
   shift only — Chrome's :visited privacy restriction silently drops
   non-color property changes on visited links anyway). */
.dmec-header-cta:visited {
  color: var(--dmec-white) !important;
}

/* Hover: Primary/900 bg per Figma button/basic Primary Hovered Small
   (119:3940). Was Primary/1000 (--dmec-navy-dark) which jumped past
   the canonical Primary/900 step toward the Pressed value. Selector
   intentionally split from :visited because combining them caused
   Chrome to revert the bg on visited+hover links. */
.dmec-header-cta:hover {
  background: var(--dmec-primary-900);
  color: var(--dmec-white) !important;
  text-decoration: none;
  filter: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* Focus-visible: ring only. Hover bg/color/inset layer in via :hover
   when both apply concurrently. */
.dmec-header-cta:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

/* Pressed: Primary/1000 bg per Figma button/basic Primary Pressed Small
   (119:3965). Wins over hover via source order. */
.dmec-header-cta:active {
  background: var(--dmec-primary-1000);
  color: var(--dmec-white) !important;
}

/* Search toggle — Figma: 40x40, bg=#e2f1fd, r=4 */
.dmec-header-search-toggle,
button.dmec-header-search-toggle.search-icon-compact {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: #e2f1fd !important;
  border: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-shadow: none !important;
  position: relative;
  z-index: 2;
}

.dmec-header-search-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dmec-header-search-toggle__icon--close {
  display: none;
}

/* Pressed/expanded: the icon button stays at 40 × 40 (matches the
   default magnifier footprint — no height bump, no transform jump).
   The visual connection to the search tray below is created by an
   ::after pseudo-element that extends the Primary/200 bg downward to
   bridge the gap between the toggle's bottom edge and the tray's top
   edge. This keeps the box layout-stable while preserving the
   canonical "merged" appearance from Figma navigation/search pressed
   (572:8247). */
body.search-bar-expanded .dmec-header-search-toggle,
.dmec-header-search-toggle[aria-expanded=true] {
  background: #e2f1fd !important;
  border: 0 !important;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  z-index: 120;
  box-shadow: none !important;
  position: relative;
}

body.search-bar-expanded .dmec-header-search-toggle::after,
.dmec-header-search-toggle[aria-expanded=true]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* Bridge from toggle bottom to tray top. The tray sits at the
     bottom of the primary bar (top: calc(100% - 2px) on
     .dmec-header-search-panel relative to that bar); the toggle is
     centered in the bar, so it's about 9 px above the bar bottom.
     12 px is enough to overlap the tray's top edge without leaving
     a seam. */
  height: 12px;
  background: #e2f1fd;
  pointer-events: none;
}

body.search-bar-expanded .dmec-header-search-toggle .dmec-header-search-toggle__icon--search,
.dmec-header-search-toggle[aria-expanded=true] .dmec-header-search-toggle__icon--search {
  display: none;
}

body.search-bar-expanded .dmec-header-search-toggle .dmec-header-search-toggle__icon--close,
.dmec-header-search-toggle[aria-expanded=true] .dmec-header-search-toggle__icon--close {
  display: inline-flex;
}

.dmec-header-search-toggle svg,
button.dmec-header-search-toggle.search-icon-compact svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--dmec-blue-accent) !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover: distinctive Tertiary/200 soft pink (#F9D9FA) per navigation/search canonical (572:8250) */
.dmec-header-search-toggle:hover,
button.dmec-header-search-toggle.search-icon-compact:hover {
  background: var(--dmec-soft-hover) !important;
  box-shadow: none !important;
}

/* Focus-visible: ring only. Hover bg layers in via :hover when both
   apply concurrently. */
.dmec-header-search-toggle:focus-visible,
button.dmec-header-search-toggle.search-icon-compact:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================
   #57 — Search Panel
   Figma: bg=#e2f1fd, input white + #b4b1ae border,
   outlined "Search" button #356dbd border, #2455a6 text
   ========================================================== */
.dmec-header-search-panel {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 90;
}

.dmec-header-search-panel[hidden] {
  display: none !important;
}

body.search-bar-expanded .dmec-header-search-panel,
.dmec-header-search-panel.is-open {
  display: block !important;
}

.dmec-header-search-panel__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  min-height: auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 60px;
  padding-right: 60px;
}

.body.search-bar-expanded .dmec-header-search-panel,
body.search-bar-expanded .dmec-header-search-panel,
.dmec-header-search-panel.is-open {
  display: block;
}

.dmec-header-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  width: min(520px, 100vw - 220px);
  background: #e2f1fd;
  border: 0;
  border-radius: 6px 0 4px 4px;
  border-top-right-radius: 0;
  padding: 10px 14px 10px 13px;
  box-sizing: border-box;
  pointer-events: auto;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 100;
  overflow: hidden;
}

/* Per Figma input/search/basic canonical (127:4804), Medium size:
   1-px border in every state, color-only shifts (no thickness change,
   no outline, no inset ring). 12-px horizontal / 8-px vertical padding. */
.dmec-header-search-form input[type=search] {
  flex: 1;
  border-radius: 4px;
  border: 1px solid var(--dmec-neutral-warm-400); /* #b4b1ae */
  padding: 8px 12px;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  line-height: 1.24;
  background: var(--dmec-white);
  color: var(--dmec-neutral-warm-900); /* filled-state text */
  min-height: 40px;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

/* Hover: border shifts Neutral/warm/400 → Neutral/warm/500 (#979595) */
.dmec-header-search-form input[type=search]:hover {
  border-color: var(--dmec-text-light); /* #979595 */
}

.dmec-header-search-submit,
.dmec-header-search-form button[type=submit] {
  border: 1px solid var(--dmec-blue-border) !important; /* Primary/600 */
  border-radius: 4px !important;
  background: var(--dmec-white) !important;
  color: var(--dmec-blue) !important; /* Primary/700 */
  padding: 0 18px !important;
  font: 700 14px/1 "PT Sans", sans-serif !important;
  cursor: pointer;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box;
  white-space: nowrap;
  /* Layout-stable transitions (no border-width or padding changes on
     hover/focus — the box-shadow trick adds the 2nd pixel of effective
     border thickness without affecting layout). */
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  background-image: none !important;
}

/* Hover: bg flips to Primary/100, border to 1-px Primary/500 + 1-px inset
   Primary/500 shadow (= 2-px effective ring), text stays Primary/700.
   Same layout-stable pattern as the account-pill hover. */
.dmec-header-search-submit:hover,
.dmec-header-search-form button[type=submit]:hover {
  background: var(--dmec-blue-bg-light) !important; /* Primary/100 */
  color: var(--dmec-blue) !important;
  border-color: var(--dmec-blue-bright) !important; /* Primary/500 */
  box-shadow: inset 0 0 0 1px var(--dmec-blue-bright) !important;
}

/* Focus-visible: ring only. Hover bg/border/color/inset layer in via
   :hover when both apply concurrently. */
.dmec-header-search-submit:focus-visible,
.dmec-header-search-form button[type=submit]:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

.dmec-header-search-form input[type=search]::placeholder {
  color: var(--dmec-text-light);
}

/* Focus: per Figma input/search/basic canonical (127:4804), focus state
   is a 1-px border-color shift to Tertiary/500 (#cb45cc magenta). NO
   thickness change, NO outline ring, NO inset shadow — pure color shift
   on the same 1-px border. !important on `border-color` and `box-shadow`
   bulldozes Blocksy parent theme's `select:focus, textarea:focus,
   input:is(...)` rule, which sets `border-color` to
   `var(--theme-form-field-border-focus-color)` and wins despite being
   lower-specificity. */
.dmec-header-search-form input[type=search]:focus,
.dmec-header-search-form input[type=search]:focus-visible {
  outline: none;
  outline-offset: 0;
  border-color: var(--dmec-focus-ring) !important; /* #cb45cc */
  box-shadow: none !important;
}

/* ==========================================================
   #56 — Mega Menu
   Figma: full-width, 460px tall, two sections:
   Left (#122c56, 320px) + Right (#17386f, flexible)
   ========================================================== */
.dmec-mega-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: min(1440px, 100vw - 32px);
  max-width: min(1440px, 100vw - 32px);
  background: var(--dmec-navy-dark);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  z-index: 100;
  animation: dmec-mega-fadein 0.18s ease-out;
  overflow: hidden;
}

@keyframes dmec-mega-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dmec-mega-panel[hidden] {
  display: none !important;
}

.dmec-mega-panel__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
}

/* Left featured section — darker navy. Padding 32 uniform per Figma
   megamenu canonical (563:11438) `px-[32px] py-[32px]`. Outer gap-32
   sits BETWEEN the title-block (`__featured-main` containing title +
   description) and the CTA pill — see also `__featured-main` gap-24
   below for the title→description spacing. */
.dmec-mega-panel__featured {
  background: var(--dmec-navy-dark);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Back button is mobile-only — hidden on desktop where the megamenu is a
   side-by-side panel below the bar (no drill-down navigation). The mobile
   media query overrides display: inline-flex. */
.dmec-mega-panel__back {
  display: none;
}

/* Featured-section header link — PT Sans Bold 24 in Primary/400 (#81C6FF)
   per megamenu/basic canonical (542:10914) Primary fill=false variant */
.dmec-mega-panel__featured-title {
  font-family: "PT Sans", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dmec-blue-avatar) !important; /* Primary/400 */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dmec-mega-panel__featured-title svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
}

.dmec-mega-panel__featured-title:hover {
  text-decoration: underline;
  color: var(--dmec-blue-avatar) !important;
}

/* Pressed: Tertiary/400 magenta text per Figma megamenu/basic Secondary
   Pressed (542:10957). Wins over hover via source order. */
.dmec-mega-panel__featured-title:active {
  color: var(--dmec-tertiary-400) !important;
}

.dmec-mega-panel__featured-title span {
  color: var(--dmec-blue-avatar);
}

/* Featured-section description — Primary/300 (#BDE1FF), 16/1.4 body
   per megamenu/basic canonical body text */
.dmec-mega-panel__featured p {
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--dmec-blue-highlight); /* Primary/300 */
  line-height: 1.4;
  margin: 0;
}

/* Featured CTA — pill button: Primary/700 #2455A6 bg, white text PT Sans Bold 18,
   arrow-right-alt-rounded trailing icon, min-width 140px per Megamenu-Basic
   Primary fill=true variant */
.dmec-mega-panel__featured-cta,
.dmec-mega-panel__featured-cta:visited {
  font-family: "PT Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--dmec-white) !important;
  background: var(--dmec-blue); /* Primary/700 */
  border-radius: 4px;
  padding: 8px 24px;
  min-width: 140px;
  min-height: 38px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  align-self: flex-start;
}

/* Pill hover: Primary/800 darker fill */
.dmec-mega-panel__featured-cta:hover {
  background: var(--dmec-blue-accent); /* Primary/800 */
  color: var(--dmec-white) !important;
  text-decoration: none;
}

/* Focus-visible: ring only. Hover bg (Primary/800) layers in via
   :hover when both apply concurrently. */
.dmec-mega-panel__featured-cta:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

/* Pressed: Tertiary/700 magenta bg + white text per Figma megamenu/basic
   Primary Fill=Yes Pressed (542:10951). Pressed wins over hover via
   source order when both apply (mouse-down on hovered element). */
.dmec-mega-panel__featured-cta:active {
  background: var(--dmec-tertiary-700);
  color: var(--dmec-white) !important;
}

/* Featured main vs learning split */
/* gap-24 between the section title (e.g. "Conferences & Webinars →")
   and the description paragraph below it. Was 4 px which packed them
   too tight; canonical pattern wants the title and the supporting
   copy clearly separated as two beats. */
.dmec-mega-panel__featured-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dmec-mega-panel__learning {
  padding-top: 0;
}

.dmec-mega-panel__learning-title {
  font-family: "PT Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--dmec-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dmec-mega-panel__learning-title:hover {
  text-decoration: underline;
}

/* Pressed: Tertiary/400 magenta text per Figma megamenu/basic Secondary
   Pressed (542:10957). Wins over hover via source order. */
.dmec-mega-panel__learning-title:active {
  color: var(--dmec-tertiary-400);
}

.dmec-mega-panel__learning-title span {
  color: var(--dmec-white);
}

/* Right content section — Primary/900 #17386F (lighter than left rail's
   Primary/1000) per megamenu canonical (971:27087) two-pane split */
.dmec-mega-panel__right {
  background: var(--dmec-navy); /* Primary/900 */
  /* Figma 545:14276 right panel: padding-32 with gap-80 between columns + promo. */
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Top: quick-link pill grid (2-col rows) */
/* Bottom: topic columns + sidebar card */
.dmec-mega-panel__bottom {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-top: 0;
}

/* Block list — flat list of top-level links per Figma megamenu canonical
   (563:11438). Auto-flows into 2 columns via CSS grid. Each block has a
   bold parent link and an optional sub-list of regular-weight children;
   there are NO column headings between groups. */
.dmec-mega-panel__blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px; /* canonical 80-px gap between columns */
  row-gap: 32px; /* canonical 32-px gap between blocks */
  flex: 1;
  align-content: start;
}

/* Explicit left/right column stacks (ACF-managed block placement). When blocks
   carry a left/right assignment the grid holds two vertical stacks instead of
   auto-flowing individual blocks, so editor placement is honored. Each stack
   keeps the canonical 32-px inter-block gap. */
.dmec-mega-panel__blocks-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.dmec-mega-panel__block {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap between bold parent and sub-list */
  min-width: 0;
}

/* Bold parent link — PT Sans Bold 16/1.4 white per canonical
   megamenu/basic Secondary, Default state (542:10921).
   Hover: pure color shift to Primary/400 (#81c6ff) per Hovered state
   (542:10945). NO underline / border-bottom — canonical is color-only.
   Focus: 4-px Tertiary/500 outline ring per Focused state (542:10933).
   `:visited` is required because Blocksy's parent theme + browser
   defaults render visited links in Primary/300 cyan. */
.dmec-mega-panel__block-link,
.dmec-mega-panel__block-link:visited {
  display: inline-block;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--dmec-white) !important;
  text-decoration: none;
  /* No vertical padding: the 32px inter-block gap IS the canonical visual
     spacing (BugZap #185). The prior 4px top/bottom padding pushed the
     visible gap to ~40px. */
  padding: 0;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.dmec-mega-panel__block-link:hover {
  color: var(--dmec-blue-avatar) !important; /* Primary/400 #81c6ff */
  text-decoration: none;
}

/* Focus-visible: ring only. Default white text inherits from base
   rule; hover (Primary/400) layers in via :hover when both apply. */
.dmec-mega-panel__block-link:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 0;
  border-radius: 4px;
}

/* Pressed: Tertiary/400 magenta text per Figma megamenu/basic Secondary
   Pressed (542:10957). Wins over hover via source order. */
.dmec-mega-panel__block-link:active {
  color: var(--dmec-tertiary-400) !important;
}

/* Sub-list (Tertiary links) — regular-weight 16-px PT Sans white per
   canonical megamenu/basic Tretiary, Default state (563:8615). Sub-list
   wrapper sits inset from the parent block — Figma uses ~12 px indent
   to visually subordinate Tertiary children to their Secondary parent.
   Hover: pure color shift to Primary/400 (#81c6ff) per Tretiary Hovered
   (563:8623). Focus: 4-px Tertiary/500 outline + white text per
   Tretiary Focused (563:8619). NO underline indication — canonical is
   color-only. */
.dmec-mega-panel__block-sublist {
  list-style: none;
  padding: 0 0 0 12px; /* canonical sub-list indent */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* canonical 4-px gap between sub-list rows */
}

.dmec-mega-panel__block-sublist li {
  margin: 0;
}

.dmec-mega-panel__block-sublist a,
.dmec-mega-panel__block-sublist a:visited {
  display: inline-block;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-weight: 400; /* regular weight per canonical */
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--dmec-white) !important; /* override Blocksy/browser :visited */
  text-decoration: none;
  padding: 4px 0;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.dmec-mega-panel__block-sublist a:hover {
  color: var(--dmec-blue-avatar) !important; /* Primary/400 #81c6ff */
  text-decoration: none;
  font-weight: 400; /* Neutralize Elementor kit's a:hover{font-weight:bold} — sublist links are regular weight per canonical */
}

/* Focus-visible: ring only. Default white text inherits from base
   rule; hover (Primary/400) layers in via :hover when both apply. */
.dmec-mega-panel__block-sublist a:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 0;
  border-radius: 4px;
}

/* Pressed: Tertiary/400 magenta text per Figma megamenu/basic Tretiary
   Pressed (563:8627). Wins over hover via source order. */
.dmec-mega-panel__block-sublist a:active {
  color: var(--dmec-tertiary-400) !important;
}

/* Promo sidebar */
.dmec-mega-panel__promo {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dmec-mega-panel__promo-heading {
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--dmec-white) !important;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.dmec-mega-panel__promo-card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  /* BugZap #192: the card is now an <a> to the panel's top-level page.
     Keep it looking like a card — no underline, inherit text colors. */
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.dmec-mega-panel__promo-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Focus: ring only (matches the header's focus convention). */
.dmec-mega-panel__promo-card:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

.dmec-mega-panel__promo-art {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0;
  background: linear-gradient(135deg, rgba(18, 44, 86, 0.95), rgba(36, 85, 166, 0.85));
}

.dmec-mega-panel__promo-text {
  padding: 16px 18px 20px;
  background: var(--dmec-card-bg);
  border-radius: 0;
}

.dmec-mega-panel__promo-card {
  margin-bottom: 4px;
}

.dmec-mega-panel__promo-text h4 {
  font-family: "PT Sans", sans-serif;
  /* Figma 545:14276: promo heading PT Sans Bold 20/1.2. */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dmec-promo-title);
  margin: 0 0 8px;
}

.dmec-mega-panel__promo-text p {
  font-family: "PT Sans", sans-serif;
  /* Figma 545:14276: promo description PT Sans Regular 16/1.4. */
  font-size: 16px;
  font-weight: 400;
  color: var(--dmec-promo-text);
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================
   Account dropdown (Free & Paid states)
   Opens when the utility-bar "My Account" button is clicked.
   ========================================================== */
.dmec-header-account-area {
  position: relative;
}

.dmec-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--dmec-white);
  border: 1px solid var(--dmec-blue-border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 9999;
  list-style: none;
  margin: 0;
  animation: dmec-account-menu-fadein 0.12s ease-out;
}

@keyframes dmec-account-menu-fadein {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dmec-account-menu[hidden] {
  display: none !important;
}

.dmec-account-menu__item {
  margin: 0;
  padding: 0;
}

.dmec-account-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font-family: "PT Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--dmec-text) !important;
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.32;
  transition: background 0.1s, color 0.1s;
}

.dmec-account-menu__link:hover {
  background: var(--dmec-blue-bg-light);
  color: var(--dmec-blue-accent) !important;
}

/* Focus-visible: ring only. Hover bg/color layer in via :hover when
   both apply concurrently. */
.dmec-account-menu__link:focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}

.dmec-account-button[aria-expanded=true] .dmec-account-button__chevron svg {
  transform: rotate(180deg);
  transition: transform 0.15s;
}

.dmec-account-button__chevron svg {
  transition: transform 0.15s;
}

/* ==========================================================
   #58 — User-state conditional visibility
   ========================================================== */
body.dmec-user-paid .become-member-cta {
  display: none;
}

body.dmec-user-paid .membership-nav-link {
  display: none;
}

/* ==========================================================
   Responsive — deferred to Sprint 4 but basic breakpoints
   ========================================================== */
@media (max-width: 1440px) {
  .dmec-header-container,
  .dmec-header-search-panel__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
  .dmec-mega-panel {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
}
/* Windows scrollbar compensation: Windows renders a 17px layout scrollbar,
 * shrinking an apparent 1440px window to ~1423px usable. With the default
 * 60px primary-bar gap the 6 nav items (≈870px total with gaps) no longer
 * fit on one row at that width. Tightening the gap to 24px here keeps the
 * nav on a single row for Windows users at 1440px and wider. */
@media (max-width: 1460px) {
  .dmec-header-primary-bar__inner {
    gap: 24px;
  }
}
/* Raised from 1180px → 1380px so Windows users at common 1280px–1366px
 * resolutions (viewport ≈1263–1349px after scrollbar) get the nav on its
 * own row rather than a cramped single row with wrapping text. */
@media (max-width: 1380px) {
  .dmec-header-primary-bar__inner {
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .dmec-header-nav {
    order: 3;
    width: 100%;
    /* `display: contents` on the parent panel causes Chrome to ignore the
     * CSS `order` property on promoted flex children and auto-margins on
     * them. The real mechanism that moves the nav to its own row is
     * `flex: 0 0 auto` + `width: 100%`: flex-basis resolves via width to
     * ~100% of the container, so the nav is always container-wide and wraps
     * onto its own row. Without this, `flex: 1` from the global rule lets
     * the nav grow into row 1 and crowds out the logo / CTA cluster. */
    flex: 0 0 auto;
  }
  /* With nav forced to its own full-width row, the search-group ends up on
   * row 1 with the logo. `margin-left: auto` absorbs the free space between
   * logo and search-group, pushing the CTA + search toggle to the right edge.
   * Note: auto-margins on display:contents-promoted children don't work in
   * Chrome, but the search-group IS a real direct flex child of the bar
   * (inside the promoted subtree but receiving flex participation), so the
   * margin works here once nav is off row 1. */
  .dmec-header-mobile-search-group {
    margin-left: auto;
  }
  .dmec-header-nav__list {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dmec-mega-panel {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 8px;
  }
  .dmec-mega-panel__inner {
    grid-template-columns: 1fr;
  }
  .dmec-mega-panel__bottom {
    flex-direction: column;
  }
  .dmec-mega-panel__promo {
    width: 100%;
  }
}
@media (max-width: 820px) {
  .dmec-header-shell {
    /* Keep the shell sticky on mobile so the primary bar stays visible
       after the user scrolls — needed for the hamburger / close X and
       the account pill to remain reachable when the drawer overlays
       the rest of the viewport. */
    gap: 0;
  }
  /* Container horizontal padding: 20 px per Figma navigation Mobile
     (697:16795) `px-[20px]`. */
  .dmec-header-container,
  .dmec-header-search-panel__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .dmec-header-utility-bar {
    display: none;
  }
  /* Primary bar inner — Figma 697:16795 `py-[8px]` with 8-px gap
     between right-cluster items. The 64-px min-height comes from
     the 48-px hamburger button + 8 px top + 8 px bottom = 64 px,
     so the bar always pins to that height even when the logo
     (32 px) is shorter. flex-wrap: wrap is preserved so the drawer
     content can break to its own row when open. */
  .dmec-header-primary-bar__inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .dmec-header-mobile-controls {
    display: flex;
    margin-left: auto;
  }
  .dmec-header-logo img {
    height: 32px;
  }
  .dmec-header-mobile-toggle,
  button.dmec-header-mobile-toggle {
    display: inline-flex !important;
  }
  .dmec-header-mobile-panel {
    width: 100%;
    flex-basis: 100%;
    display: none;
    padding-top: 4px;
  }
  body.dmec-mobile-menu-open {
    overflow: hidden; /* scroll-lock while the drawer is open */
  }
  body.dmec-mobile-menu-open .dmec-header-mobile-panel {
    /* Fixed overlay so the drawer always pins to the viewport below
       the primary bar — shell is `position: static` on mobile, so a
       flow-level drawer would land wherever the shell sat in the
       document (broken if the user had scrolled). Top: 64px matches
       the primary-bar min-height. Figma 974:31886 drawer spec:
       px-20 py-24 with gap-20 between primary-actions / nav / utility. */
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    z-index: 9999;
  }
  /* DOM order is nav → primary-actions → extras to keep the desktop
     layout (the mobile panel is `display: contents` at >820px).
     On mobile we use flex `order` to visually surface Become-a-Member +
     search at the top, per Figma. */
  body.dmec-mobile-menu-open .dmec-header-mobile-panel > .dmec-header-primary-actions {
    order: 1;
  }
  body.dmec-mobile-menu-open .dmec-header-mobile-panel > .dmec-header-nav {
    order: 2;
  }
  body.dmec-mobile-menu-open .dmec-header-mobile-panel > .dmec-header-mobile-extras {
    order: 3;
  }
  .dmec-header-nav {
    width: 100%;
    flex: 0 0 auto; /* override desktop's flex: 1 so nav doesn't eat all the drawer's vertical space and push utility links below the fold */
    /* Section divider per Figma navigation/menu/mobile (971:27158):
       1-px Neutral/warm/300 (#d6d1cd) horizontal rule between the
       CTA row and the primary-nav buttons. The drawer's gap-20
       already provides the breathing room above and below; the
       border just paints the line. */
    border-top: 1px solid var(--dmec-neutral-warm-300);
    padding-top: 0;
  }
  .dmec-header-nav__list {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    /* Figma 974:31886: no border-top on list; the section-level divider
       between primary-actions and nav is provided by the drawer's
       flex-column gap-20, not by per-list rules. */
    padding-top: 8px;
  }
  .dmec-header-nav__item {
    width: 100%;
  }
  .dmec-header-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* Per Figma navigation/menu/mobile (971:27158) primary-nav button:
       pt-[16px] pb-[12px] px-[4px] (asymmetric — top heavier so the
       label sits slightly above the row centerline), 16-px PT Sans
       Bold per Body text/medium/bold spec. */
    padding: 16px 4px 12px;
    font-size: 16px;
    line-height: 1.4;
  }
  /* Bump the chevron SVG so the affordance matches the bigger row. */
  .dmec-header-nav__chevron svg {
    width: 20px;
    height: 20px;
  }
  /* On mobile all nav items render neutrally in the collapsed drawer —
     focus-within / hover shouldn't flip them blue or paint a 4-px
     underline the way they do on desktop. The desktop hover rule sets
     BOTH `color` and `border-bottom-color`; mobile suppresses both so
     the only active-state cue is the chevron rotation. The
     `aria-expanded="true"` case keeps the blue as active feedback
     when the accordion is open. */
  .dmec-header-nav__item:hover > .dmec-header-nav__link,
  .dmec-header-nav__item:focus-within > .dmec-header-nav__link {
    color: var(--dmec-text) !important;
    border-bottom-color: transparent !important;
  }
  /* The anonymous-state Membership emphasis (blue) is a desktop cue —
     suppress it on mobile so the drawer opens with all items uniformly
     dark, matching Figma. */
  .dmec-header-nav__link.membership-nav-link {
    color: var(--dmec-text) !important;
  }
  /* Chevron affordance — Figma shows a right-pointing chevron that rotates
     90° when the nav item's mega accordion is expanded. */
  .dmec-header-nav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dmec-text);
    transition: transform 0.15s ease;
  }
  .dmec-header-nav__link[aria-expanded=true] .dmec-header-nav__chevron {
    transform: rotate(90deg);
    color: var(--dmec-blue);
  }
  /* Mobile account area — Figma places the avatar pill (logged in) or
     Register/Login outline button (anonymous) in the primary bar at the
     right, pushed just to the left of the hamburger.
     `margin-left: auto` makes the account-area + hamburger act as a
     single right-flush cluster — without it, the desktop's
     `justify-content: space-between` distributes leftover space across
     all 3 siblings (logo, account, hamburger), producing a ~21-px gap
     between account and hamburger instead of the canonical 8 px from
     Figma 697:16795. */
  .dmec-header-mobile-account-area {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto;
  }
  .dmec-header-mobile-account-area .dmec-account-button--outline {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
  }
  .dmec-header-mobile-account-area .dmec-account-button--account {
    height: 40px;
    min-height: 40px;
    padding: 0 8px 0 3px !important;
    gap: 8px;
  }
  .dmec-header-mobile-account-area .dmec-account-button__avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 16px;
  }
  /* Mobile avatar dropdown hides the label (per Figma — just avatar + chevron). */
  .dmec-header-mobile-account-area .dmec-account-button__label {
    display: none;
  }
  .dmec-header-mobile-account-area .dmec-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    z-index: 20;
  }
  .dmec-header-primary-actions {
    /* Drawer provides py-24 / gap-20, so no vertical padding here. */
    padding-top: 0;
    padding-bottom: 0;
    gap: 8px;
    margin-left: 0;
  }
  .dmec-header-cta {
    /* Figma 974:31886 CTA: h=42, p=12, PT Sans Bold 14. */
    min-height: 42px;
    padding: 12px;
    font-size: 14px;
  }
  .dmec-header-search-toggle,
  .dmec-header-search-close {
    /* Figma: 42×42 collapsed search toggle. */
    width: 42px;
    height: 42px;
  }
  /* On mobile we use the inline search form inside the drawer (below) —
     the separate full-screen search panel is a desktop-only pattern. */
  .dmec-header-search-panel {
    display: none !important;
  }
  /* Mobile expanded toggle — stays 42 × 42 (matches the default
     magnifier footprint). Bottom corners go FLAT so the ::after bridge
     below connects seamlessly into the search tray; top corners stay
     rounded since the X is the visual "cap" of the merged shape. */
  body.search-bar-expanded .dmec-header-search-toggle,
  .dmec-header-search-toggle[aria-expanded=true] {
    transform: none !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-top: 0 !important;
    background: var(--dmec-primary-200) !important;
    border-radius: 4px 4px 0 0 !important;
  }
  /* Mobile bridge between the X close icon and the search tray below —
     the search-form has a 12-px margin-top creating breathing room from
     the CTA row, but on the RIGHT (under the X icon) we want a
     continuous Primary/200 strip so the X reads as visually connected
     to the tray. Pseudo-element extends 12 px straight down from the
     toggle, full toggle width, matching tray bg. Position is absolute
     so it overlays the white drawer bg in the gap. */
  body.search-bar-expanded .dmec-header-search-toggle,
  .dmec-header-search-toggle[aria-expanded=true] {
    position: relative;
  }
  body.search-bar-expanded .dmec-header-search-toggle::after,
  .dmec-header-search-toggle[aria-expanded=true]::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    background: var(--dmec-primary-200);
    pointer-events: none;
  }
  /* Inline mobile search group — just a positioning wrapper. The
     Become-a-Member row stays neutral; only the form below gets the
     light-blue tray treatment (per Figma — the tray "drops down"
     from the search toggle like the desktop expanded-search pattern). */
  .dmec-header-mobile-search-group {
    width: 100%;
  }
  /* When expanded, collapse the bottom padding between primary-actions
     and the tray so the search toggle (now showing the close-X icon)
     visually connects to the tray below. */
  .dmec-header-mobile-search-group.is-expanded .dmec-header-primary-actions {
    padding-bottom: 0;
  }
  /* Light-blue tray for the inline search form — appears beneath the
     Become-a-Member row with 12 px of breathing room. The X icon's
     ::after bridge fills that 12 px on the right so the X and tray
     read as one merged shape. Tray's TOP-RIGHT corner is flat
     (border-radius 0) at the bridge landing point so the seam is
     invisible; the other 3 corners stay rounded.
     Bg is hardcoded to Primary/200 (#E2F1FD) instead of using the
     --dmec-blue-bg-light alias, because Phase 2 repointed that
     alias at Primary/100 for the account-pill / search-submit
     hover bg. */
  .dmec-header-mobile-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--dmec-primary-200);
    border-radius: 4px 0 4px 4px;
  }
  /* Honor the [hidden] attribute — author `display: flex` beats UA's
     [hidden] on specificity tie otherwise. */
  .dmec-header-mobile-search-form[hidden] {
    display: none;
  }
  .dmec-header-mobile-search-form input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    /* Figma input: p-12; keep h=44 so touch target meets a11y minimum. */
    height: 44px;
    padding: 12px;
    border: 1px solid #b4b1ae;
    border-radius: 4px;
    background: #ffffff;
    font-family: "PT Sans", sans-serif;
    font-size: 16px;
  }
  /* Per Figma input/search/basic Focused state (127:4804): 1-px
     border-color shift to Tertiary/500 (#cb45cc magenta), no outline.
     !important on `border-color` and `box-shadow` bulldozes Blocksy
     parent theme's input focus rule (see desktop search-input rule
     above for full rationale). The border-color shift remains a clear
     focus indicator that meets WCAG 2.4.7. */
  .dmec-header-mobile-search-form input[type=search]:focus,
  .dmec-header-mobile-search-form input[type=search]:focus-visible {
    outline: none;
    outline-offset: 0;
    border-color: var(--dmec-focus-ring) !important;
    box-shadow: none !important;
  }
  .dmec-header-mobile-search-form .dmec-header-mobile-search-submit,
  button.dmec-header-mobile-search-submit {
    /* Figma: 42px h, p-12 all sides, Outlined variant (#356ebd border,
       #2455a6 text, white bg). */
    flex: 0 0 auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--dmec-blue-border) !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: var(--dmec-blue) !important;
    font: 700 14px/1 "PT Sans", sans-serif !important;
    cursor: pointer;
  }
  .dmec-mega-panel {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 0;
    box-shadow: none;
    animation: none;
    /* Mobile: drop the bottom 8-px radius — at narrow widths the
       accordion mega panel reads better with square corners (it sits
       flush in a single-column drawer flow rather than as a hovering
       dropdown). Desktop keeps `0 0 8px 8px` from the default rule. */
    border-radius: 0;
  }
  .dmec-mega-panel__inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .dmec-mega-panel__featured,
  .dmec-mega-panel__right {
    /* Figma 971:27088 mobile panel: padding-32 px / 24 py, gap-40 between sections. */
    padding: 24px 32px;
    gap: 40px;
  }
  /* Mobile featured section per Figma navigation/menu/mobile drilled-in
     panel (971:27088): contains the Back button + section title only.
     Description text and "Browse education" pill CTA are NOT shown on
     mobile (canonical drops them to keep the drawer panel compact). */
  .dmec-mega-panel__featured {
    gap: 16px;
  }
  .dmec-mega-panel__featured p,
  .dmec-mega-panel__featured-cta {
    display: none;
  }
  /* Back button — Figma navigation/back (967:26254) inside 971:27088:
     1-px Primary/100 border, 8-px radius, 4-px V padding, 4-px L /
     24-px R padding, gap-8 between chevron and label, PT Sans Bold 14
     white "Back" with 24-px chevron-left icon.
     `!important` on bg / border / box-shadow because Blocksy's parent
     theme styles all <button> elements with its own bg/box-shadow that
     wins on cascade order — without these overrides the Back button
     renders with a Primary/700-ish fill and shadow instead of the
     canonical transparent-on-navy outlined look. */
  .dmec-mega-panel__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    border: 1px solid var(--dmec-primary-100) !important;
    border-radius: 8px !important;
    padding: 4px 24px 4px 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dmec-white) !important;
    font-family: "PT Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    min-height: 0 !important;
    height: auto !important;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .dmec-mega-panel__back:hover {
    background: rgba(242, 249, 255, 0.08) !important;
  }
  .dmec-mega-panel__back:focus-visible {
    outline: 4px solid var(--dmec-focus-ring);
    outline-offset: 2px;
  }
  .dmec-mega-panel__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .dmec-mega-panel__back-icon svg {
    width: 24px;
    height: 24px;
  }
  /* Hide the promo card on mobile — canonical 971:27088 doesn't include
     the marketing card on the drilled-in panel (the card lives only in
     the desktop megamenu where there's room for it). Bonus: avoids the
     broken-image flash for any item whose `image_url` doesn't resolve
     in local dev. */
  .dmec-mega-panel__promo {
    display: none;
  }
  /* Mobile mega-panel block list — per canonical 971:27088 the
     right-section block stack uses gap-40 between blocks (vs gap-32
     on desktop) and gap-12 between bold parent + sublist (vs gap-8). */
  /* Mobile: collapse the 2-column block grid to a single column.
     Per direction, the drilled-in panel reads better as a single
     stacked list at narrow widths — text wraps awkwardly in 2
     columns inside the 360-px container, and the 1-column layout
     matches the rhythm of the parent drawer's nav-button list. */
  .dmec-mega-panel__blocks {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
  }
  .dmec-mega-panel__block {
    gap: 12px;
  }
  /* L/R stacks collapse to a single column on mobile; match the 24-px
     inter-block rhythm of the surrounding drawer. */
  .dmec-mega-panel__blocks-col {
    gap: 24px;
  }
  .dmec-mega-panel__block-sublist {
    /* Mobile sublist: 8-px gap between rows, 16-px indent (slightly
       bigger than desktop's 12-px so the hierarchy reads on a
       narrower column). */
    gap: 8px;
    padding-left: 16px;
  }
  .dmec-mega-panel__featured {
    gap: 40px;
  }
  .dmec-mega-panel__featured-title {
    /* Figma 971:27088: featured title PT Sans Bold 24/1.2, Primary/400. */
    font-size: 24px;
    line-height: 1.2;
    color: var(--dmec-blue-avatar);
  }
  .dmec-mega-panel__learning-title,
  .dmec-mega-panel__column h3,
  .dmec-mega-panel__promo-heading,
  .dmec-mega-panel__promo-text h4 {
    font-size: 20px;
  }
  .dmec-mega-panel__quick-links {
    gap: 12px;
  }
  .dmec-mega-panel__quick-links-row {
    flex-direction: column;
    gap: 12px;
  }
  .dmec-mega-panel__quick-link {
    width: 100%;
    min-height: 44px;
  }
  .dmec-mega-panel__bottom,
  .dmec-mega-panel__columns {
    flex-direction: column;
    gap: 24px;
  }
  .dmec-mega-panel__column {
    padding: 0;
  }
  .dmec-mega-panel__column + .dmec-mega-panel__column {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--dmec-blue-border);
    padding-top: 16px;
    margin-top: 0;
  }
  .dmec-mega-panel__promo {
    width: 100%;
  }
  .dmec-mega-panel__promo-art {
    height: 180px;
  }
  .dmec-mega-panel__promo-text {
    padding: 16px;
  }
  /* -----------------------------------------------------------------
   * Mobile drawer extras — utility links at the bottom of the drawer.
   * Auth CTA lives in the primary bar on mobile, not here.
   * Figma: dark-gray labels, no dividers, generous vertical rhythm.
   * ----------------------------------------------------------------- */
  .dmec-header-mobile-extras {
    display: block;
    width: 100%;
    /* Section divider per Figma navigation/menu/mobile (971:27158):
       1-px Neutral/warm/300 (#d6d1cd). Was #e8e8e8 — corrected to
       the canonical token. The drawer's gap-20 between siblings
       already provides the breathing room; padding-top removed so
       the rhythm matches the new top divider on .dmec-header-nav. */
    border-top: 1px solid var(--dmec-neutral-warm-300);
    margin-top: 0;
    padding-top: 0;
  }
  .dmec-header-mobile-extras__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Figma 974:31886 utility stack: gap-8 between rows. */
    gap: 8px;
  }
  /* Beat the theme's generic `a { color: var(--dmec-blue) }` with
     selector specificity from the parent class chain. */
  body.dmec-redesign-active .dmec-header-mobile-extras__link,
  body.dmec-redesign-active .dmec-header-mobile-extras__link:visited {
    display: block;
    /* Figma: pt-12 pb-8 px-4 per utility link. */
    padding: 12px 4px 8px;
    border: 0;
    color: var(--dmec-text);
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    /* Per Figma navigation/utility / Default Mobile (956:25770) and
       navigation/menu/mobile (971:27158): UI text/small/bold spec
       uses line-height 1.44, not the prior 1.2. */
    line-height: 1.44;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  body.dmec-redesign-active .dmec-header-mobile-extras__link:hover {
    color: var(--dmec-blue);
  }
  /* Focus-visible: ring only. Hover color layers in via :hover when
     both apply concurrently. */
  body.dmec-redesign-active .dmec-header-mobile-extras__link:focus-visible {
    outline: 4px solid var(--dmec-focus-ring);
    outline-offset: 2px;
  }
  .dmec-header-mobile-extras__avatar {
    flex-shrink: 0;
  }
}
@media (max-width: 540px) {
  /* Drawer-open layout note: previously the inner used
     `align-items: flex-start` here so the multi-row drawer content
     stacked from the top. That broke the CLOSED bar's vertical
     centering (logo + account pill + hamburger were all top-aligned
     at y=8 instead of vertically centered in the 64-px bar). The
     align-items override is removed; rows still flow correctly with
     the inherited `align-items: center` from the 820-query rule
     because each row's items center within their own line. */
  .dmec-header-primary-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .dmec-header-cta {
    /* Per Figma navigation/menu/mobile (971:27158) the "Become a
       Member" CTA is sized to its label content (h=42, p=12), NOT
       full-width. The CTA row uses `justify-between` so the CTA
       anchors left, search anchors right, with empty space
       between — that's what gives the canonical airy feel. */
    flex: 0 0 auto;
    justify-content: center;
  }
  .dmec-header-search-toggle {
    flex-shrink: 0;
  }
  .dmec-mega-panel__featured p,
  .dmec-mega-panel__promo-text p,
  .dmec-mega-panel__column a {
    font-size: 15px;
  }
}
/*
 * Header focus-ring fallback — issue #106 cleanup pass (2026-05-04).
 *
 * Component-level `:focus-visible` rules above own their canonical
 * visuals (4px Tertiary/500 ring for Strong tier; inputs use a
 * border-color shift; etc). This fallback ensures any focusable
 * element inside the redesigned header that LACKS a component rule
 * (logo anchor, mega-panel featured/learning titles, mega-panel
 * column anchors, "Become a Member" CTA, etc.) still gets the
 * canonical Strong-tier ring instead of the browser's UA default.
 *
 * `:where(...)` zeros out the inner selector's specificity, so any
 * `.dmec-foo:focus-visible` rule (specificity 0,2,0) wins over this
 * fallback (also 0,2,0 but earlier in cascade).
 *
 * Replaces the old `.dmec-header-shell *:focus-visible` rule plus
 * the global mu-plugin rule that injected 2px Primary/700 outlines.
 */
/* Specificity targeting: (0,0,1,1).
   - `:where(...)` outer scope contributes 0 specificity.
   - `:is(a, button, ...)` inner contributes max of its args = (0,0,0,1)
     (bare element selector). Crucially, `:is()` is needed instead of
     `:where()` here because Blocksy parent theme ships
     `a:focus-visible, button:focus-visible { outline-color: ... }` at
     (0,0,1,1). A (0,0,1,0) fallback (`:where()` on both) loses to
     Blocksy and the canonical pink ring fails on logo + other
     unstyled-focusables.
   - `:focus-visible` adds (0,0,1,0).
   - Total (0,0,1,1) BEATS Blocksy (same spec, later in cascade) and
     LOSES to component rules at (0,0,2,0) so component overrides
     like Register/Login's `outline-offset: -4px` still win. */
:where(.dmec-header-shell, .dmec-mega-panel, footer.dmec-site-footer) :is(a, button, input, select, textarea):focus-visible {
  outline: 4px solid var(--dmec-focus-ring);
  outline-offset: 2px;
}