/* ============================================================
   NPF Header & Footer Skin
   Cosmetic layer only. Every selector is scoped under .npf-header
   or .npf-footer so nothing here can leak into page content.

   Note: the source design used bare .container / .btn class names.
   Those collide with the theme's Semantic UI (10 and 76 occurrences
   respectively), so they are namespaced to .npf-container / .npf-btn.
   ============================================================ */

/* ============================================================
   SITE-WIDE TYPOGRAPHY
   index.html sets --font-body: "Inter" on <body>; everything else
   inherits. Reproduced here so the whole site matches the design.

   Icon fonts are excluded explicitly — Semantic UI (.icon), Font
   Awesome (.fa*) and the theme's glyph classes render glyphs from
   their own families and would break if reassigned.
   ============================================================ */

/* !important is required, not preference: the theme's Kirki customizer emits
   `body { font-family: Merriweather }` as an inline <style> in wp_head, which
   loads after every enqueued stylesheet and wins on order at equal
   specificity. Semantic UI (Lato) and the child theme (Gotham) also set it.
   Deactivating the plugin removes this and the theme's fonts return. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.heading-title,
.ui.header,
.ui.form input,
.ui.button,
.wpj-page-content a,
.wpj-page-content li,
.wpj-page-content span,
.wpj-page-content label,
.wpj-page-content p,
.wpj-page-content td,
.wpj-page-content th {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* The admin bar is WordPress chrome, not site design. Leave it entirely
   alone — a blanket font rule turns its Dashicons glyphs into blocks. */
#wpadminbar,
#wpadminbar * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
}

#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar [class*="dashicons"]::before,
#wpadminbar #adminbarsearch::before {
  font-family: dashicons !important;
}

/* index.html gives the footer its own face (--font-footer: "Inter Tight"). */
.npf-footer,
.npf-footer a,
.npf-footer li,
.npf-footer span,
.npf-footer h4,
.npf-footer .chw-title {
  font-family: "Inter Tight", "Inter", system-ui, sans-serif !important;
}

/* Never touch glyph fonts. */
i.icon,
i.icon::before,
[class*=" fa-"],
[class^="fa-"],
.fa, .fas, .far, .fab, .fal, .fad,
.dashicons, .dashicons-before::before,
.evil-icon, .evil-icon svg {
  font-family: inherit;
}

i.icon, i.icon::before { font-family: Icons !important; }
.fa, .fas, .far, .fab, .fal, .fad,
[class*=" fa-"], [class^="fa-"] { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important; }
.dashicons, .dashicons-before::before { font-family: dashicons !important; }

.npf-header,
.npf-footer {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  --npf-ink: #010810;
  --npf-muted: #8a94a3;
  --npf-bg-alt: #fafafa;
  --npf-line: #e3e3e3;
  /* Body grey and the hairline, from the reference :root. Both were referenced
     by the mega menu and the mobile drawer before being declared, so those
     colours silently fell back to whatever was inherited. */
  --npf-text: #4c5563;
  --npf-line-soft: #eef1f6;
  --npf-footer-bg: #01040c;
  --npf-footer-link: #c0c0c0;
  --npf-radius-sm: 10px;
  --npf-radius-btn: 6px;
  --npf-shadow-sm: 0 2px 8px rgba(19, 24, 36, 0.05);
  --npf-shadow: 0 10px 30px rgba(19, 24, 36, 0.08);
  --npf-shadow-primary: 0 12px 28px rgba(63, 109, 179, 0.28);
  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.28s var(--npf-ease);
  --npf-nav-h: 112px;
  --npf-gutter: 24px;
  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-font-footer: "Inter Tight", "Inter", system-ui, sans-serif;
}

.npf-container {
  width: 100%;
  max-width: 1196px;
  margin-inline: auto;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* ============================================================
   HEADER
   ============================================================ */

.npf-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  transition: box-shadow var(--npf-t);
  font-family: var(--npf-font-body);
}

.npf-header.is-scrolled {
  box-shadow: inset 0 -1px 0 var(--npf-line), var(--npf-shadow-sm);
}

.npf-nav {
  min-height: var(--npf-nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 16px;
}

/* ---------- Brand ---------- */

.npf-header .npf-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 200px;
  height: 50px;
  text-decoration: none;
}

.npf-brand__logo {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--npf-t);
}

.npf-brand:hover .npf-brand__logo { transform: scale(1.04); }

.npf-brand__word {
  font-family: var(--npf-font-footer);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--npf-ink);
}

/* ---------- Primary nav (theme markup, re-skinned) ---------- */

.npf-nav__menu {
  flex: 1 1 auto;
  min-width: 0;
  margin-inline: auto;
}

/* No max-height/overflow here: a scroll container would clip the absolutely
   positioned sub-menu dropdowns. Only 3 items are top-level, so one row fits. */
.npf-nav__menu ul.menu,
.npf-nav__menu ul.categories-here {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: auto;
  overflow: visible;
}

.npf-nav__menu li.menu-item {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
  border: 0;
  background: none;
  width: auto;
}

.npf-nav__menu li.menu-item > a {
  display: inline-block;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--npf-ink);
  padding: 8px 10px;
  border-radius: 4px;
  text-transform: none;
  background: none;
  border: 0;
  transition: color var(--npf-t), background var(--npf-t);
}

.npf-nav__menu li.menu-item > a:hover { color: var(--npf-primary); }

.npf-nav__menu li.current-menu-item > a,
.npf-nav__menu li.current_page_item > a {
  background: var(--npf-primary-soft);
  color: #0e1109;
  border-radius: 16px;
}

/* Parent items get a caret so the dropdown is discoverable. */
.npf-nav__menu li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--npf-t);
}

.npf-nav__menu li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateY(-3px);
}

/* ---------- Mega menu ----------
   The category menus carry 12+ children, and the theme marks the wide ones
   `.ul-two-columns`. Reproduces the production layout: a flat white panel
   under the nav row, two columns, compact rows.

   `!important` on the geometry: front.min.css sizes these rows for the theme's
   own mega menu (tall rows, wide gutters, absolute-positioned columns) at a
   specificity a plain descendant selector cannot reach, which is what stretched
   the panel out. */

.npf-nav__menu ul.sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  display: none;
  min-width: 220px;
  max-width: min(92vw, 720px);
  margin: 0 !important;
  padding: 10px !important;
  list-style: none;
  background: #fff;
  border: 1px solid var(--npf-line-soft);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(19, 24, 36, 0.12);
  /* The theme positions its columns absolutely; column-count does the same job
     without taking the rows out of flow. */
  columns: auto 1 !important;
  column-gap: 8px !important;
}

/* Wide menus split into two columns, as production does. */
.npf-nav__menu ul.sub-menu.ul-two-columns {
  columns: 2 !important;
  min-width: 540px;
}

/* Items near the right edge open leftwards so the panel stays on screen. */
.npf-nav__menu li.menu-item:nth-last-child(-n + 2) > ul.sub-menu {
  left: auto;
  right: 0;
}

.npf-nav__menu li.menu-item:hover > ul.sub-menu,
.npf-nav__menu li.menu-item:focus-within > ul.sub-menu { display: block; }

/* A bridge across the 10px gap, so the pointer can travel from the parent to
   the panel without the hover dropping. */
.npf-nav__menu li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
  display: none;
}

.npf-nav__menu li.menu-item-has-children:hover::after { display: block; }

.npf-nav__menu ul.sub-menu li.menu-item {
  break-inside: avoid;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
}

/* Compact rows: 14/18 on 7px insets gives ~32px, against the ~66px the
   theme's own mega-menu spacing produced. Resting colour is the body grey, not
   ink — at this density full-strength ink on twelve rows reads as a wall. */
.npf-nav__menu ul.sub-menu li.menu-item > a {
  display: block !important;
  white-space: normal;
  font-family: var(--npf-font-body);
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  color: var(--npf-text) !important;
  padding: 7px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px;
  background: none;
  text-transform: none !important;
  transition: color var(--npf-t), background var(--npf-t);
}

.npf-nav__menu ul.sub-menu li.menu-item > a:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

/* Caret must not repeat on child rows. */
.npf-nav__menu ul.sub-menu li.menu-item > a::after { content: none !important; }

/* ---------- Actions: search, currency, login/account ---------- */

.npf-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  margin-left: auto;
}

/* Search icon. The real form is kept hidden for the planned popup. */
.npf-nav__search[hidden] { display: none; }

/* Same button as the messages/notifications icons below — 42x42, 12px radius,
   a 22px primary-coloured outline glyph and the primary-soft hover lift. The
   design has no search icon to copy, so it borrows .nav__icon wholesale and
   the three read as one set. Its SVG is already stroked and already uses
   currentColor (header.php), so only the box and sizing change. */
.npf-nav__search-toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--npf-primary);
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t), transform var(--npf-t);
}

.npf-nav__search-toggle:hover {
  background: var(--npf-primary-soft);
  color: var(--npf-primary);
  transform: translateY(-2px);
}

.npf-nav__search-toggle svg { width: 22px; height: 22px; }

/* Search — theme form, re-skinned to a compact pill. */
.npf-nav__search form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.npf-nav__search .ui.input { width: auto; }

.npf-nav__search input[type="text"] {
  width: 168px;
  height: 40px;
  padding: 0 14px;
  font-family: var(--npf-font-body);
  font-size: 14px;
  color: var(--npf-ink);
  background: #f7f9fc;
  border: 1px solid var(--npf-line);
  border-radius: 999px;
  box-shadow: none;
  transition: border-color var(--npf-t), width var(--npf-t);
}

.npf-nav__search input[type="text"]:focus {
  border-color: var(--npf-primary);
  outline: none;
  width: 200px;
}

.npf-nav__search .new-search-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  background: var(--npf-primary);
  cursor: pointer;
  transition: background var(--npf-t);
}

.npf-nav__search .new-search-icon:hover { background: var(--npf-primary-dark); }
.npf-nav__search .new-search-icon i { margin: 0; }

/* Logged-out buttons. .login-link / .register-link are functional classes
   the AJAX modal binds to — restyled here, never renamed. */
/* The theme ships Login as .ui.button.primary and Register as
   .ui.button.secondary, so Semantic UI paints Login blue and Register dark —
   the inverse of the reference design. Reset both, then restyle: Login is a
   plain text link, SignUp is the solid primary pill. */
.npf-nav__actions a.ui.button,
.npf-nav__actions a.ui.button.primary,
.npf-nav__actions a.ui.button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: var(--npf-radius-btn);
  box-shadow: none;
  background-image: none;
  transition: transform var(--npf-t), background var(--npf-t), color var(--npf-t), box-shadow var(--npf-t);
}

/* !important is required here, not laziness: the theme injects an inline
   `.ui.primary.button { background: #c0c0c0 !important }` rule, which no
   amount of selector specificity can beat. */
/* index.html .nav__login — Inter 500, 16/20, #010810, no chrome. */
.npf-nav__actions a.ui.button.login-link,
.npf-nav__actions a.ui.button.login-link.primary {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--npf-ink);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  padding: 12px 6px;
  border-radius: 0;
}

.npf-nav__actions a.ui.button.login-link:hover,
.npf-nav__actions a.ui.button.login-link.primary:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--npf-primary);
  box-shadow: none;
}

/* index.html .btn — Inter 600, 18/30, 12px 24px, --npf-radius-btn, --primary. */
.npf-nav__actions a.ui.button.register-link,
.npf-nav__actions a.ui.button.register-link.secondary,
.npf-nav__actions a.ui.button.npf-register-link {
  background: var(--npf-primary) !important;
  background-color: var(--npf-primary) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  padding: 12px 24px;
  border-radius: var(--npf-radius-btn);
}

.npf-nav__actions a.ui.button.register-link:hover,
.npf-nav__actions a.ui.button.npf-register-link:hover,
.npf-nav__actions a.ui.button.register-link.secondary:hover {
  background: var(--npf-primary-dark) !important;
  background-color: var(--npf-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: var(--npf-shadow-primary);
}

/* ---------- Logged-in cluster ----------
   The theme's markup (functions-header.php:116-145) maps onto the design's
   header actions like this:

     .nh-icons                -> the two .nav__icon buttons
       .nh-icon.nh-messages       .nav__icon  (envelope)
         i.envelope.icon            the glyph — design uses a 22px SVG
         a.nh-link > #unread-message  full-box click target + unread badge
         .nh-submenu                the hover preview dropdown
       .nh-icon.nh-notifications  .nav__icon  (bell)
     .nh-user-info > a         -> .nav__user
       .nh-user-img               .nav__user img   42px circle
       .nh-user-right             .nav__user span
         .nh-user-name              .nav__user strong
         .nh-user-balance           .nav__user small

   Nothing is added or removed — only sized and coloured. */

.npf-nav__actions .nh-user-notifications,
.npf-nav__actions .nh-user-info { float: none; }

/* .nav__actions--user is a flat 20px gap across icons AND the user block.
   The container's own 16px gap carries the icons -> user side, so the extra
   4px is made up here rather than widening the logged-out button row too. */
.npf-nav__actions .nh-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* The theme gives this wrapper a fixed width and a 7px top nudge, both sized
   for its old 30x25 glyphs. Left alone it holds 144px for 104px of icons, and
   those 40px are exactly what pushed the primary menu onto a second row. It
   shrinks to its contents instead, and the flex centring handles the offset. */
.npf-nav__actions .nh-user-notifications {
  width: auto;
  margin: 0 4px 0 0;
}

.npf-nav__actions .nh-icons { margin: 0; }

/* .nh-icons also carries the theme's `cf` clearfix, whose ::before/::after
   become FLEX ITEMS here — zero-width, but each one still collects a 20px
   gap. That is the 40px: 104px of icons rendering as 144px. The clearfix has
   nothing to clear once the container is flex, so both are dropped. */
.npf-nav__actions .nh-icons::before,
.npf-nav__actions .nh-icons::after { display: none; }

/* .nav__icon — 42x42, 12px radius, primary-coloured glyph.
   The theme paints these #c0c0c0 at 21px, which is what read as grey and
   undersized against the design. `place-items: center` only moves the glyph:
   .nh-link and .nh-submenu are both absolutely positioned, so they stay out
   of flow and keep their own geometry. */
.npf-nav__actions .nh-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--npf-primary);
  transition: background var(--npf-t), color var(--npf-t), transform var(--npf-t);
}

.npf-nav__actions .nh-icon:hover {
  background: var(--npf-primary-soft);
  transform: translateY(-2px);
}

/* `!important` is required, not preference: the customizer emits
   `.nh-icon.nh-messages .icon { color: #c0c0c0 !important }` as an inline
   <style> in wp_head, which no ordinary declaration can outrank. This
   selector is more specific than that one, so !important settles it. */
/* The design's icons are STROKED outlines; the theme renders Semantic's solid
   envelope and bell glyphs from its Icons font, which no amount of colouring
   can turn into outlines. The glyph is suppressed and the <i> is painted with
   the design's own SVG as a mask instead — same two paths as
   expert-dashboard.html, at the same 22px, filled with currentColor so it
   still inherits .nh-icon's colour and hover.

   A mask rather than a background-image so the colour stays in CSS: one
   `color` on .nh-icon drives the glyph, the hover and any future state,
   instead of needing a second recoloured data-URI per state. */
.npf-nav__actions .nh-icon i.icon {
  color: inherit !important;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 0;
  line-height: 1;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Semantic paints the glyph through .icon:before — emptying it leaves the
   masked box behind. */
.npf-nav__actions .nh-icon i.icon::before { content: ""; }

.npf-nav__actions .nh-messages i.icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

.npf-nav__actions .nh-notifications i.icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

/* The click target is sized 30x25 by the theme to match the old glyph box —
   it has to cover the new 42px square instead, or two thirds of the button
   would be dead. */
.npf-nav__actions .nh-icon .nh-link {
  inset: 0;
  width: auto;
  height: auto;
}

/* .nav__user — pill with a hover wash. */
.npf-nav__actions .nh-user-info > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--npf-t);
}

.npf-nav__actions .nh-user-info > a:hover { background: var(--npf-bg-alt); }

.npf-nav__actions .nh-user-img {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.npf-nav__actions .nh-user-right {
  display: grid;
  line-height: 1.25;
}

.npf-nav__actions .nh-user-name {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--npf-ink);
}

/* The theme paints this as a filled chip — front.min.css gives .nh-user-balance
   a green background and the customizer's inline <style> overrides it with
   `background-color: #003366 !important`, which is the navy block behind
   "0.00 USD". The design has a plain muted line under the name, so the fill
   has to be beaten on its own terms. */
.npf-nav__actions .nh-user-balance {
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--npf-muted);
  background: none !important;
  padding: 0;
}

/* The account dropdown's caret. The theme draws it twice — ::after as an 8px
   background-image arrow pinned at right:-12px, and ::before as a glyph in the
   Icons font at right:0 — with 15px of padding reserved for them. The design's
   header carries no caret, so both go, and the reserved space with them. The
   dropdown itself is untouched and still opens from .nh-has-submenu. */
.npf-nav__actions .nh-user-name::after,
.npf-nav__actions .nh-user-name::before { display: none; }

.npf-nav__actions .nh-user-name { padding-right: 0; }

/* ---------- Account dropdown ----------
   The theme prints this as a bare `ul.reset > li > a.item` list with 8px rows
   and no iconography, which is what made it read as cramped. Restyled as a
   proper menu: 44px rows, an icon per row, a divider-free 8px-padded card.

   Row classes are added by npf-skin.js from the link text (`data-npf-icon`),
   because half these rows come from a WP admin menu that the theme's
   `wpjobster_dropdown_menu_list` filter never sees. */

.npf-nav__actions .nh-submenu,
.npf-account-panel {
  --npf-icon: none;
}

.npf-nav__actions .nh-submenu {
  min-width: 268px;
  padding: 8px !important;
  border: 1px solid var(--npf-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(19, 24, 36, 0.16);
}

.npf-nav__actions .nh-submenu ul.reset,
.npf-account-panel ul.reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-nav__actions .nh-submenu li,
.npf-account-panel li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0 !important;
}

.npf-nav__actions .nh-submenu a.item,
.npf-account-panel a.item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 15px !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
  background: none !important;
  text-transform: none !important;
  transition: color var(--npf-t), background var(--npf-t);
}

.npf-nav__actions .nh-submenu a.item:hover,
.npf-account-panel a.item:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

/* Icon. Drawn as a mask so it takes the row's colour on hover rather than
   needing a second coloured asset. */
.npf-nav__actions .nh-submenu a.item::before,
.npf-account-panel a.item::before {
  content: "";
  flex: none;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask: var(--npf-icon) center / 19px 19px no-repeat;
  mask: var(--npf-icon) center / 19px 19px no-repeat;
  transition: opacity var(--npf-t);
}

.npf-nav__actions .nh-submenu a.item:hover::before,
.npf-account-panel a.item:hover::before { opacity: 1; }

/* Parent rows keep their expand caret on the right. */
.npf-nav__actions .nh-submenu a.nh-accordion-handler,
.npf-account-panel a.nh-accordion-handler { position: relative; padding-right: 34px !important; }

.npf-nav__actions .nh-submenu a.nh-accordion-handler::after,
.npf-account-panel a.nh-accordion-handler::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.6;
}

/* Nested list (Services, Profile). */
.npf-nav__actions .nh-submenu .nh-accordion,
.npf-account-panel .nh-accordion {
  margin: 0;
  padding: 0 0 0 31px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.npf-nav__actions .nh-submenu .nh-accordion a.item,
.npf-account-panel .nh-accordion a.item {
  font-weight: 400;
  font-size: 14px !important;
  gap: 10px;
}

.npf-nav__actions .nh-submenu .nh-accordion a.item::before,
.npf-account-panel .nh-accordion a.item::before { width: 17px; height: 17px; mask-size: 17px 17px; -webkit-mask-size: 17px 17px; }

/* Log out sits apart, in the danger colour. */
.npf-nav__actions .nh-submenu a.item[data-npf-icon="logout"],
.npf-account-panel a.item[data-npf-icon="logout"] {
  margin-top: 6px !important;
  padding-top: 15px !important;
  border-top: 1px solid var(--npf-line) !important;
  border-radius: 0 0 8px 8px;
  color: #c04747 !important;
}

.npf-nav__actions .nh-submenu a.item[data-npf-icon="logout"]:hover,
.npf-account-panel a.item[data-npf-icon="logout"]:hover {
  background: #fdf3f3 !important;
  color: #a33 !important;
}

/* ---------- Dropdown icon set ----------
   Inline 24-grid stroke glyphs, percent-encoded so they survive as data URIs.
   One custom property per row type; the mask rule above does the drawing. */

a.item[data-npf-icon="default"]        { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="services"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13' rx='2'/%3E%3Cpath d='M8.5 7V5.5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2V7'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="post-new"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="my-services"]    { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="sales"]          { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="shopping"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l-1.2 12.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9z'/%3E%3Cpath d='M9 10V6.5a3 3 0 0 1 6 0V10'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="messages"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="favorites"]      { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.7-7.5-9.4A4.1 4.1 0 0 1 12 8a4.1 4.1 0 0 1 7.5 2.6C19.5 15.3 12 20 12 20z'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="referral"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='11' rx='1.5'/%3E%3Cpath d='M12 9v11M3 13h18'/%3E%3Cpath d='M12 9S9.5 4 7.3 4.7 8 9 12 9zM12 9s2.5-5 4.7-4.3S16 9 12 9z'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="payments"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="discounts"]      { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Ccircle cx='15' cy='15' r='1.6'/%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="profile"]        { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.7'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="public-profile"] { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 12h17M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="settings"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7.9 19.5l-.1.1A2 2 0 1 1 5 16.8l.1-.1A1.6 1.6 0 0 0 3.9 14H3.8a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.1-2.7L5 7.2A2 2 0 1 1 7.8 4.4l.1.1A1.6 1.6 0 0 0 10.6 3.4V3.3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1A2 2 0 1 1 20.2 7.2l-.1.1a1.6 1.6 0 0 0 1.1 2.7h.1a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.8 1z'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="feedback"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.8 2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.6 9.9l5.8-.8z'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="questions"]      { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 1 1 3.3 2.4c-.6.2-.9.8-.9 1.4v.4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="subscriptions"]  { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M18.5 3v3.5H15'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="ask-question"]   { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15.5a2 2 0 0 1-2 2H8l-4.5 3.5v-14a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 14v-.4c0-.6.3-1.1.9-1.4a2.1 2.1 0 1 0-2.8-2'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="answered"]       { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15.5a2 2 0 0 1-2 2H8l-4.5 3.5v-14a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='m8 10.5 2.6 2.5L16 8'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="unanswered"]     { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 15.5a2 2 0 0 1-2 2H8l-4.5 3.5v-14a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8.5 11h7'/%3E%3C/svg%3E"); }
a.item[data-npf-icon="logout"]         { --npf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H15'/%3E%3Cpath d='M10 8 6 12l4 4M6 12h9'/%3E%3C/svg%3E"); }

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

.npf-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 13px;
  background: var(--npf-primary);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--npf-t), transform var(--npf-t);
}

.npf-nav__toggle:hover { background: var(--npf-primary-dark); }
.npf-nav__toggle:active { transform: scale(0.95); }

.npf-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--npf-t), opacity var(--npf-t);
}

.npf-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.npf-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.npf-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   CUSTOM-OFFER MODAL ("Send Quote")
   Semantic UI detaches this modal to <body> on show, so it cannot be scoped
   under .npf-header — it is styled on its own class instead.
   ============================================================ */

.ui.modal.custom-offer-container {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  --npf-ink: #010810;
  --npf-line: #e3e3e3;
  --npf-g500: #77878f;
  --npf-g600: #5f6c72;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(19, 24, 36, 0.24);
  font-family: "Inter", system-ui, sans-serif;
}

/* Header: title left, close right, on one 60px row. The theme puts the title
   in a centred `.ui.icon.header` with a decorative glyph above it, which reads
   as a dialog from a different design system. */
.ui.modal.custom-offer-container > .ui.icon.header {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 60px;
  padding: 18px 56px 18px 22px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--npf-line);
  background: #fff;
  text-align: left !important;
}

.ui.modal.custom-offer-container > .ui.icon.header > i.icon {
  display: none !important;
}

.ui.modal.custom-offer-container > .ui.icon.header p {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  color: var(--npf-ink);
}

.ui.modal.custom-offer-container > i.close.icon {
  top: 17px;
  right: 16px;
  left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--npf-g600) !important;
  opacity: 1;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.ui.modal.custom-offer-container > i.close.icon:hover {
  background: var(--npf-primary-soft);
  color: var(--npf-primary) !important;
}

.ui.modal.custom-offer-container > .content {
  padding: 22px !important;
  background: #fff;
}

/* Form controls, matched to the checkout's field styling. */
.ui.modal.custom-offer-container .request_form .field { margin-bottom: 16px; }

.ui.modal.custom-offer-container .request_form textarea {
  width: 100%;
  min-height: 132px;
  padding: 13px 15px;
  border: 1px solid var(--npf-line);
  border-radius: 8px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--npf-ink);
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ui.modal.custom-offer-container .request_form textarea::placeholder { color: var(--npf-g500); }

.ui.modal.custom-offer-container .request_form textarea:focus {
  outline: none;
  border-color: var(--npf-primary);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

/* Upload control reads as a dashed drop target rather than a plain button. */
.ui.modal.custom-offer-container .upload-form-wrapper,
.ui.modal.custom-offer-container .wpj-upload-button {
  width: 100%;
}

.ui.modal.custom-offer-container .wpj-upload-button,
.ui.modal.custom-offer-container .upload-form-wrapper .ui.button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0 !important;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1px dashed #c9cfd2 !important;
  border-radius: 8px;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ui.modal.custom-offer-container .wpj-upload-button:hover,
.ui.modal.custom-offer-container .upload-form-wrapper .ui.button:hover {
  border-color: var(--npf-primary) !important;
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

/* Submit sits in its own footer bar. */
.ui.modal.custom-offer-container .actions,
.ui.modal.custom-offer-container .request_form .actions {
  margin: 22px -22px -22px !important;
  padding: 16px 22px !important;
  background: #fff;
  border-top: 1px solid var(--npf-line);
  text-align: right;
}

.ui.modal.custom-offer-container .custom-offer-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px !important;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.2px;
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background 0.2s;
}

.ui.modal.custom-offer-container .custom-offer-btn:hover { background: var(--npf-primary-dark) !important; }
.ui.modal.custom-offer-container .custom-offer-btn i.icon { margin: 0 !important; opacity: 1; }

/* Loading state.
   The theme fetches this form over admin-ajax after showing the modal, and on
   this install that request takes seconds — so without a placeholder the modal
   opens as an empty white box and reads as broken. */
.ui.modal.custom-offer-container .custom-offer-content:empty {
  display: block;
  min-height: 190px;
  position: relative;
}

.ui.modal.custom-offer-container .custom-offer-content:empty::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid var(--npf-primary-soft);
  border-top-color: var(--npf-primary);
  border-radius: 50%;
  animation: npf-modal-spin 0.8s linear infinite;
}

@keyframes npf-modal-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .ui.modal.custom-offer-container {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
    border-radius: 14px;
  }

  .ui.modal.custom-offer-container > .content { padding: 18px !important; }
  .ui.modal.custom-offer-container > .ui.icon.header { padding: 16px 52px 16px 18px !important; }
  .ui.modal.custom-offer-container > .ui.icon.header p { font-size: 18px; }

  .ui.modal.custom-offer-container .actions,
  .ui.modal.custom-offer-container .request_form .actions {
    margin: 18px -18px -18px !important;
    padding: 14px 18px !important;
  }

  /* Full-width submit on a phone. */
  .ui.modal.custom-offer-container .custom-offer-btn { width: 100%; }
}

/* ---------- Off-canvas drawers ----------
   Both the primary menu and the account menu slide in from the right over a
   shared backdrop; npf-skin.js guarantees only one is open at a time.
   Declared outside the media query so the backdrop and panel chrome exist
   whatever the width — the media query only decides when they are reachable. */

/* npf-skin.js moves both panels and this backdrop out to <body> so they escape
   the sticky header's stacking context. These values only have to clear the
   theme's own layers — `.nh-icon` sits at 998 — and stay under the WP admin
   bar at 99999. */
.npf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(2, 11, 24, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--npf-t), visibility var(--npf-t);
}

.npf-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

body.npf-drawer-open { overflow: hidden; }

.npf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--npf-line);
}

.npf-drawer__title {
  font-family: var(--npf-font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 24px;
  color: var(--npf-ink);
}

.npf-drawer__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  color: var(--npf-ink);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t);
}

.npf-drawer__close:hover { background: var(--npf-primary-soft); color: var(--npf-primary); }
.npf-drawer__close svg { width: 21px; height: 21px; }

/* Account drawer — same shell as the menu drawer. */
.npf-account-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9995;
  width: min(86vw, 340px);
  padding: 22px 20px 32px;
  background: #fff;
  box-shadow: -12px 0 40px rgba(19, 24, 36, 0.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform var(--npf-t);
}

.npf-account-panel.is-open { transform: none; }

/* The relocated .nh-submenu must drop the desktop dropdown chrome. */
.npf-account-panel .nh-submenu {
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.npf-account-panel a.item { padding: 13px 12px !important; font-size: 16px !important; }

.npf-mobile-menu { display: none; }

/* The theme's own responsive header stays in the DOM for its JS bindings. */
.npf-legacy-mobile {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   FOOTER
   ============================================================ */

.npf-footer {
  background: var(--npf-footer-bg);
  color: var(--npf-footer-link);
  padding-block: 74px 112px;
  font-family: var(--npf-font-footer);
}

.npf-footer .npf-container { max-width: 1328px; padding-inline: var(--npf-gutter); }

/* Five columns, not the design's four: the site has five populated footer
   widget areas and none may be dropped. The grid absorbs the extra column. */
.npf-footer__top {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 24px;
  padding-bottom: 40px;
}

.npf-footer__brand-col {
  grid-column: 1 / -1;
  margin-bottom: 18px;
}

.npf-footer .npf-brand { display: inline-flex; align-items: center; text-decoration: none; }
.npf-footer .npf-brand__logo { max-height: 64px; }
.npf-footer .npf-brand__word { color: #fff; font-size: 28px; line-height: 1.14; }

/* Widget wrappers produced by the theme's register_sidebar() args. */
.npf-footer__col .chw-title,
.npf-footer__col h2 {
  color: #fff;
  font-family: var(--npf-font-footer);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
}

/* The theme draws a mobile accordion chevron on this wrapper. Hide the
   indicator on desktop; the drawer behaviour itself is left untouched. */
/* The theme turns each footer heading into a mobile accordion. The design has
   no accordion at any width — every column is simply listed out (see the
   reference footer). Hide the chevron at ALL widths, not just desktop, and
   keep the lists open so a stray toggle can never collapse one. */
.npf-footer__col .js-toggle-arrow {
  margin: 0;
  position: relative;
  cursor: default !important;
}

/* Hide only the chevron itself. Do not touch .js-toggle-arrow's own display:
   the heading markup differs between the logged-out and logged-in widgets
   (h2.chw-title vs a Semantic grid), and forcing a display value on the
   wrapper collapses the heading in the logged-in variant. */
.npf-footer__col .js-toggle-arrow .dynamically.dynamically-icon,
.npf-footer__col .js-toggle-arrow::before,
.npf-footer__col .js-toggle-arrow::after,
.npf-footer__col .js-toggle-arrow > i {
  display: none !important;
}

/* The heading column shares the `dynamically` class with the chevron, so it
   must be re-shown explicitly — matching `.dynamically` alone hides the
   heading along with the icon. */
.npf-footer__col .js-toggle-arrow .dynamically:not(.dynamically-icon) {
  display: block !important;
}

/* In the logged-in widget the heading sits in a Semantic UI grid column
   (`.fourteen.wide.column`) with 14px padding on every side. Horizontally that
   indented the heading 14px past the links; vertically it stretched the
   heading-to-first-link gap to 30px where the design specifies 16px. */
.npf-footer__col .js-toggle-arrow,
.npf-footer__col .js-toggle-arrow > * {
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* .footer__col h4 { margin-bottom: 16px } */
.npf-footer__col .chw-title,
.npf-footer__col h2,
.npf-footer__col h4 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Lists stay expanded whatever the accordion script does. */
.npf-footer__col ul,
.npf-footer__col ul.menu {
  display: grid !important;
  max-height: none !important;
  overflow: visible !important;
  visibility: visible !important;
}

.npf-footer__col ul,
.npf-footer__col .menu {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-footer__col li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}

.npf-footer__col a {
  display: block;
  color: var(--npf-footer-link);
  font-family: var(--npf-font-footer);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--npf-t), padding var(--npf-t);
}

.npf-footer__col a:hover { color: #fff; padding-left: 4px; }

.npf-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid rgba(125, 125, 125, 0.4);
  font-family: var(--npf-font-footer);
  font-size: 16px;
  line-height: 1.4;
  color: var(--npf-footer-link);
}

.npf-footer__copyright a { color: #fff; text-decoration: none; }
.npf-footer__copyright a:hover { color: var(--npf-primary); }

.npf-footer__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.npf-footer__payments ul.payment-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-footer__payments ul.payment-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.npf-footer__payments img {
  width: 34px;
  height: auto;
  opacity: 0.8;
  transition: opacity var(--npf-t);
}

.npf-footer__payments img:hover { opacity: 1; }

.npf-footer__social { display: flex; gap: 16px; }

.npf-footer__social a {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.7);
  transition: background var(--npf-t), color var(--npf-t), transform var(--npf-t);
}

.npf-footer__social a:hover {
  background: var(--npf-primary);
  color: #fff;
  transform: translateY(-3px);
}

.npf-footer__social svg,
.npf-footer__social img { width: 18px; height: 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .npf-nav { gap: 16px; }
  .npf-nav__search input[type="text"] { width: 130px; }
  .npf-nav__menu li.menu-item > a { font-size: 14px; padding: 8px; }
}

@media (max-width: 1024px) {
  .npf-footer__top { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .npf-header { --npf-nav-h: 92px; }

  .npf-nav { justify-content: space-between; flex-wrap: nowrap; }

  /* Primary nav collapses into the drawer. */
  .npf-nav__menu { display: none; }

  /* Keeping brand + actions + toggle on one row exceeded 375px and gave the
     whole site a horizontal scrollbar. The actions move to their own bar
     under the header — npf-skin.js relocates the same node, so nothing is
     duplicated and no binding or element id is lost. */
  .npf-nav > .npf-nav__actions { display: none; }

  .npf-nav__toggle { display: flex; }

  /* ---- Action bar: search / messages / notifications / avatar ---- */
  .npf-actionbar {
    border-top: 1px solid var(--npf-line);
    background: #fff;
  }

  .npf-actionbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding-inline: var(--npf-gutter);
  }

  .npf-nav__actions--bar {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
  }

  /* Logged out, the bar carries the two buttons instead — side by side. */
  .npf-nav__actions--bar a.ui.button {
    flex: 1 1 0;
    justify-content: center;
  }

  .npf-nav__actions--bar .nh-user-notifications { margin: 0; }

  /* The avatar row keeps its name + balance but stops looking like a link
     target the size of the whole bar. */
  .npf-nav__actions--bar .nh-user-info > a { padding: 4px 6px; }

  /* On the bar the avatar opens the account drawer; the desktop hover
     dropdown must not also appear on tap. */
  .npf-nav__actions--bar .nh-submenu { display: none !important; }

  /* ---- Primary menu drawer: slides in from the right ---- */
  .npf-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 340px);
    background: #fff;
    box-shadow: -12px 0 40px rgba(19, 24, 36, 0.18);
    padding: 22px 20px 32px;
    display: block;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--npf-t);
    z-index: 9995;
  }

  .npf-mobile-menu.is-open { transform: none; }

  .npf-account-panel { display: block; }

  .npf-mobile-menu ul.menu,
  .npf-mobile-menu ul.categories-here {
    display: grid;
    gap: 6px;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .npf-mobile-menu li.menu-item {
    list-style: none;
    margin: 0;
    position: relative;
    border-bottom: 1px solid var(--npf-line-soft);
  }

  .npf-mobile-menu li.menu-item:last-child { border-bottom: 0; }

  .npf-mobile-menu li.menu-item > a {
    display: block !important;
    padding: 15px 4px !important;
    border-radius: 0;
    font-family: var(--npf-font-body);
    font-weight: 600;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--npf-ink) !important;
    text-decoration: none;
    background: none !important;
  }

  .npf-mobile-menu li.menu-item > a:hover,
  .npf-mobile-menu li.menu-item > a:active {
    color: var(--npf-primary) !important;
    background: none !important;
  }

  /* Parent rows expand in place. npf-skin.js swallows the first tap and
     toggles .is-expanded, so the category page is still reachable from the
     child list rather than being lost behind the accordion.

     The caret is declared in full here. The desktop rule is scoped to
     `.npf-nav__menu`, which the drawer is not a part of, so positioning alone
     left `content` unset and no arrow was ever drawn. */
  .npf-mobile-menu li.menu-item-has-children > a {
    padding-right: 34px !important;
  }

  .npf-mobile-menu li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 21px;
    width: 8px;
    height: 8px;
    margin: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: 0.55;
    transition: transform var(--npf-t), opacity var(--npf-t);
  }

  .npf-mobile-menu li.menu-item-has-children.is-expanded > a::after {
    transform: rotate(-135deg);
    opacity: 1;
  }

  .npf-mobile-menu li.menu-item-has-children.is-expanded > a {
    color: var(--npf-primary) !important;
  }

  /* Sub-menus slide down rather than appearing.
     `display` cannot be transitioned, so the row stays laid out and its
     max-height is animated instead — 1200px is a ceiling, not a real height,
     so lists of any length still open fully. */
  .npf-mobile-menu ul.sub-menu {
    position: static !important;
    /* `!important`: front.min.css hides these with
       `.menu.categories-here ul.sub-menu { display: none }`, which outranks a
       two-class selector. Without it the row expands to nothing. */
    display: block !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
    min-width: 0;
    max-width: none;
    columns: auto 1 !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.34s var(--npf-ease), opacity 0.24s var(--npf-ease),
      padding-bottom 0.34s var(--npf-ease);
  }

  .npf-mobile-menu li.menu-item.is-expanded > ul.sub-menu {
    max-height: 1200px;
    opacity: 1;
    padding-bottom: 10px !important;
  }

  .npf-mobile-menu ul.sub-menu li.menu-item { border-bottom: 0; }

  .npf-mobile-menu ul.sub-menu li.menu-item > a {
    padding: 10px 4px !important;
    font-weight: 400;
    font-size: 15px !important;
    color: var(--npf-text) !important;
  }
}

@media (max-width: 720px) {
  .npf-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Collapse the search to its icon; submitting with an empty term still
     lands the user on the search page, so the route is never lost. */
  .npf-nav__search input[type="text"] {
    width: 0;
    min-width: 0;
    padding: 0;
    border-width: 0;
    opacity: 0;
  }
  .npf-nav__search input[type="text"]:focus {
    width: 130px;
    padding: 0 14px;
    border-width: 1px;
    opacity: 1;
  }

  .npf-header .npf-brand { max-width: 130px; }

  .npf-footer { padding-block: 56px 64px; }
  .npf-footer__top { grid-template-columns: 1fr; }
  .npf-footer__bottom { flex-direction: column; align-items: flex-start; }
}
