/* ============================================================
   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; }

/* The drawers, the backdrop and the bottom bar are moved out to <body> by
   npf-skin.js — they have to escape the sticky header's stacking context — so
   they stop inheriting anything declared on `.npf-header`. That silently broke
   the menu drawer's slide: `transition: transform var(--npf-t)` became an
   unresolvable var(), which is invalid at computed-value time, so the whole
   declaration was dropped and the panel jumped open with no animation.
   They are listed here so the tokens follow them wherever they end up. */
.npf-header,
.npf-footer,
.npf-mobile-menu,
.npf-account-panel,
.npf-drawer-backdrop,
.npf-bottombar {
  --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
   ============================================================ */

/* `z-index: 900`, not the 100 this started at.
   100 was chosen against the design's own layers and lost to the theme's:
   front.min.css hands in-content elements values of its own that are higher
   — `.sidebar-user-level-profile` (the badge over the profile avatar) is 102,
   `.autocomplete-list-container` is 999 — so those punched through the sticky
   header on scroll. 900 clears everything the page content can produce while
   staying under the layers that are *meant* to cover the header: the chat
   sidebar (1000/1001), Semantic's modal dimmer (1002) and this skin's own
   drawers (9980-9995). Page content is additionally confined to its own
   stacking context — see the isolation rule in npf-dashboard.css. */
.npf-header {
  position: sticky;
  top: 0;
  z-index: 900;
  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);
}

/* `height`, not `min-height`: the design fixes the header at 112px (92px below
   860px) and centres everything inside it.

   Three columns rather than a flex row, because the design centres the primary
   menu on the header itself. As a flex row it could not: the menu sat in
   whatever space was left between the brand and the actions, so its centre was
   the midpoint of those two edges, not of the header. With a 164px brand and a
   152px actions block that was already 6px out, and it got much worse the
   moment the widths diverged — logged in, where the actions block carries an
   avatar, balance and two icon buttons, the menu was pushed visibly left.
   Equal `1fr` side tracks make the middle track land on the header's centre
   whatever the two sides contain. */
.npf-nav {
  height: var(--npf-nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding-block: 16px;
}

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

/* The header brand is the design's monogram + wordmark (templates/header.php);
   the footer still renders the uploaded logo image, so both variants live here.
   The 164x50 slot is what centres the primary menu — the design sizes it
   explicitly rather than letting the logo decide. */
.npf-header .npf-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
  width: 164px;
  height: 50px;
  font-family: var(--npf-font-footer);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #010810;
  text-decoration: none;
}

/* Serif "NF" — the letters overlap on the N's right stem, which is what the
   negative letter-spacing buys. The matching right padding gives the F's
   overhang its space back so the wordmark does not collide with it. */
.npf-brand__mark {
  flex: none;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1;
  color: var(--npf-primary);
  letter-spacing: -0.295em;
  padding-right: 0.295em;
  transition: transform var(--npf-t);
}

.npf-brand__mark > span { font-weight: 500; }
.npf-brand:hover .npf-brand__mark { transform: scale(1.04); }

.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-header .npf-brand__word {
  display: block;
  font-family: var(--npf-font-footer);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  color: #010810;
}

.npf-header .npf-brand__word small {
  display: block;
  font-weight: 600;
  font-size: inherit;
}

.npf-footer .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) ---------- */

/* The middle grid track. `min-width: 0` lets it shrink under a narrow viewport
   instead of pushing the actions off the end. */
.npf-nav__menu {
  min-width: 0;
}

/* 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;
  justify-content: 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); }

/* The active pill. `current-menu-item` is put on the matching row by
   NPF_Nav::mark_current() — the theme's own menu walker never emits it, which
   is why this rule sat unused and no page ever showed as active.
   `current-menu-ancestor` carries it up to the top-level item when the current
   page is one of its children, so a subcategory highlights its parent in the
   bar rather than a link inside a closed dropdown. */
.npf-nav__menu li.current-menu-item > a,
.npf-nav__menu li.current-menu-ancestor > a,
.npf-nav__menu li.current_page_item > a {
  background: var(--npf-primary-soft);
  color: #0e1109;
  border-radius: 16px;
}

/* …but not for the rows inside a dropdown, which are a plain list. */
.npf-nav__menu ul.sub-menu li.current-menu-item > a {
  background: none;
  border-radius: 0;
  color: var(--npf-primary);
  font-weight: 600;
}

/* 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: 6px;
  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 ---------- */

/* Right-hand grid track, contents pushed to the outer edge. `justify-self`
   rather than `margin-left: auto`, so the track keeps its `1fr` share of the
   row — that share is what balances the brand's track and holds the menu on
   the header's centre. */
.npf-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

/* The header carries no search control any more. The theme's real form is
   still rendered — hidden — so its live-search bindings and element ids
   (#big-search, #big-search-submit) keep existing for anything that looks
   them up. The styling below applies if it is ever un-hidden. */
.npf-nav__search[hidden] { display: none; }

/* 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: 500;
  font-size: 16px;
  line-height: 28px;
  padding: 8px 18px;
  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; }

/* Each .nh-icon is a 42px square holding a 22px glyph, so 10px of the box is
   empty on either side and any gap declared here reads as 20px wider than it
   is. At the theme's 20px the envelope and bell sat 40px apart. 2px puts them
   at an optical 22px, which is the spacing in the design. */
.npf-nav__actions .nh-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 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;
}

/* The unread count — server-rendered by NPF_Nav::add_unread_badges() and then
   kept current by the theme's own poll, which writes this same element.

   The theme drops it at the bottom-right in a 15px lime chip sized in rem, so
   it grew with the root font and read as part of the page rather than as an
   alert. Here it is a count badge on the top-right corner of the 42px button,
   in the palette's red, with a white ring so it stays legible against the
   hover wash behind it. */
.npf-nav__actions .nh-icon .unread-label.digits {
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: auto;
  left: auto;
  display: grid;
  place-items: center;
  min-width: 18px;
  width: auto;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e05656;
  border: 2px solid #fff;
  box-sizing: border-box;
  font-family: var(--npf-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

.npf-nav__actions .nh-icon .unread-label.digits .messages_count {
  color: #fff;
  font-size: inherit;
  line-height: 1;
}

/* .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;
}

/* `min-width` is what makes the name readable, and it is doing more work than
   it looks like it is.

   front.min.css gives .nh-user-name `overflow: hidden; text-overflow:
   ellipsis; max-width: 150px`, which is fine on its own. The squeeze comes
   from this header's three-column grid: the actions sit in a `1fr` track, and
   a track's minimum is its content's min-content width — which, for a box
   that is allowed to clip, is nothing at all. So once the centred menu grew
   (four items, one of them "Marketing and Communications") the track was free
   to collapse the name to a few pixels and it rendered as "Nai…".

   An explicit min-width raises that min-content contribution, so the grid has
   to keep 96px for the name before it starts taking any away. 96px carries
   ~11 characters at this size; anything longer still ellipses at the theme's
   150px cap, which is the intended behaviour rather than a bug. */
.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);
  min-width: 70px;
  max-width: 150px;
}

.nh-user-name:before{
  color: #000 !important;
  font-size: 1.2em !important;
}

/* 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 { 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: 6px;
  padding: 8px;
  background: var(--npf-primary);
  border: 0;
  border-radius: 8px;
  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; }

/* Bottom bar is a phone-only control; the media query below turns it on. */
.npf-bottombar { 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; }

  /* The name's floor drops with the rest of the row. The menu is still on
     screen down to 860px and it is the wider of the two claims, so holding
     96px back for the name here would push the header past the viewport.
     72px is roughly eight characters — short of the full 150px, but it is a
     name rather than the fragment the collapse produced. */
  .npf-nav__actions .nh-user-name { min-width: 72px; }
}

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

/* ---- Back-to-top, clear of the chat launcher (all widths) ----
   The theme parks this button at `bottom: 16`, which is the same corner Tawk
   puts its launcher in at `bottom: 20`. Both are 60 tall and the launcher
   carries z-index 2000000000 against the button's 999999999, so the button was
   not merely overlapping — it was completely covered and unclickable.

   It moves rather than the launcher: Tawk's wrapper holds both the launcher
   and the opened chat panel, so shifting it would lift the open panel off the
   bottom of the screen too. Nudging the theme's own button costs nothing.

   80 is the launcher's top edge (20 + 60); 12 is the gap. The mobile
   breakpoint below re-stacks both around the fixed bottom bar. */
a.scrollToTop {
  bottom: 92px !important;
}

/* ---- Back-to-top, in #133660 rather than white (client request) ----

   The theme draws the control with Semantic's `chevron circle up`: a solid
   disc with the arrow knocked OUT of it, so the arrow is not painted at all —
   it is whatever sits behind the button. Recolouring the glyph to #133660 on
   its own would therefore give a navy disc with a navy-on-black arrow over the
   footer, which is exactly where the report caught it.

   So the glyph is swapped for the plain `chevron up` (\f077 — the same icon
   font, nothing new is loaded) and the requested colour moves to the button
   itself. The arrow is then a real white shape on #133660 and reads the same
   over the footer, the page and the hero.

   `!important` and the weight of the selectors: the customizer prints
   `.scrollToTop { color: … !important }` into an inline <style> in the head,
   which loads after this file and so wins every tie. Only a heavier selector
   answers it.

   `display` is deliberately left alone — footer.js fades this button in and
   out, and jQuery writes `display` inline, so anything set here would either
   be ignored or fight the fade. Centring is done with line-height instead. */
a.button.scrollToTop {
  width: 60px;
  height: 60px;
  padding: 0;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  color: #fff !important;
  background: #133660 !important;
  border: 0 !important;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(19, 54, 96, 0.28);
  /* Literal timing, not `var(--npf-t)`: the skin's tokens are declared on
     .npf-header / .npf-footer and this button is a sibling of both, so the
     var would not resolve and the whole declaration would be dropped. */
  transition: background 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.button.scrollToTop:hover {
  background: #0f2a4c !important;
  transform: translateY(-2px);
}

a.button.scrollToTop i.icon.chevron.circle.up::before { content: "\f077"; }

a.button.scrollToTop i.icon {
  padding-top: 0;
  margin: 0;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: top;
}

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

  /* Back to a flex row here: the middle track is empty once the menu collapses
     into the drawer, and the burger takes its place at the end — there is no
     centred element left for the three-column grid to serve. */
  .npf-nav { display: flex; justify-content: space-between; flex-wrap: nowrap; }

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

  .npf-nav__toggle { display: flex; }

  /* ---- Header row: brand … messages · notifications · burger ----
     The actions stay in the header row rather than moving to a second bar.
     Only the two notification icons are kept: the avatar, the balance and the
     logged-out buttons are all reachable from the bottom bar's Account tab,
     and three of them plus a burger did not fit 375px. They are hidden, never
     removed, so their live counts, ids and handlers survive. */
  .npf-nav__actions {
    gap: 8px;
    margin-left: auto;
  }

  .npf-nav__actions .nh-user-info,
  .npf-nav__actions .wpj-language-switcher,
  .npf-nav__actions .currency,
  .npf-nav__actions a.ui.button.login-link,
  .npf-nav__actions a.ui.button.register-link,
  .npf-nav__actions a.ui.button.npf-register-link {
    display: none !important;
  }

  /* The hover dropdown must never open from a tap on the icons. */
  .npf-nav__actions .nh-icon .nh-submenu { display: none !important; }

  /* ---- Bottom bar ----
     Fixed app-style navigation. `env(safe-area-inset-bottom)` keeps the labels
     clear of the home indicator on notched phones. */
  .npf-bottombar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9980;
    background: #fff;
    border-top: 1px solid var(--npf-line);
    box-shadow: 0 -6px 20px rgba(19, 24, 36, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .npf-bottombar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 8px 4px;
    margin: 0;
    border: 0;
    background: none;
    color: var(--npf-muted);
    font-family: var(--npf-font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--npf-t);
    -webkit-tap-highlight-color: transparent;
  }

  .npf-bottombar__item svg { width: 23px; height: 23px; }

  .npf-bottombar__item:hover,
  .npf-bottombar__item.is-active,
  .npf-bottombar__item[aria-expanded="true"] { color: var(--npf-primary); }

  /* Room under the footer so the bar never covers the last row of content. */
  body { padding-bottom: 60px; }

  /* Floating widgets are lifted clear of the bar, and of each other.

     Two controls share this corner, so they queue rather than both sitting at
     the same offset — which is what made them overlap. Reading upward from the
     bottom of the viewport:

         0 - 61     the fixed bottom bar
        66 - 126    back-to-top   (this rule; the button is 60 tall)
       138 - 198    chat launcher (WIDGET_LIFT in npf-skin.js)

     The launcher's half is not expressible here: Tawk's wrapper ignores
     stylesheet rules entirely — see initFloatingWidgets — so its offset has to
     be written inline by the script. The two numbers are related, so moving
     this one means moving WIDGET_LIFT to match. */
  a.scrollToTop {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !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;
  }

  /* The brand keeps its 164px slot at every width, as the design does — the
     monogram and wordmark are sized to that box and a narrower clamp cropped
     the wordmark. Brand + two icons + burger measure ~344px inside a 375px
     frame, so it still fits. */

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

/* ============================================================
   Phone fields: keep the country-flag dropdown out of the text.

   The theme runs intlTelInput() over every `.cell_number` input
   (wpjobster/assets/js/front/authentication.js), which wraps the field and
   lays an absolutely-positioned `.flag-container` over its left edge. The
   widget pays for that itself — `.intl-tel-input.allow-dropdown input
   { padding-left: 52px }` — but every screen the redesign restyles sets its
   own input padding with `!important`, which is more specific, so the padding
   that reserved the flag's space was lost and the number rendered underneath
   the flag.

   `input.cell_number { padding-left: 55px !important }` already exists
   somewhere upstream and is beaten the same way: at (0,2,0) it loses to, for
   instance, `body.npf-account input[type="text"]` at (0,2,1).

   Declared here, in the site-wide stylesheet, rather than per screen: the same
   widget appears on account settings, checkout and the register form, and any
   future form with a phone field gets it for free. The selectors are specific
   enough to outrank the per-screen rules wherever they are loaded from.

   Only `allow-dropdown` is handled for the left side, and the plain variant on
   the right, because that is how the theme initialises the widget — no
   `separateDialCode`, whose wider variants would need their own padding.
   ============================================================ */

body .intl-tel-input.allow-dropdown input,
body .intl-tel-input.allow-dropdown input[type="text"],
body .intl-tel-input.allow-dropdown input[type="tel"] {
  padding-left: 52px !important;
}

/* Without `allow-dropdown` the flag sits at the right-hand edge instead. */
body .intl-tel-input:not(.allow-dropdown) input,
body .intl-tel-input:not(.allow-dropdown) input[type="text"],
body .intl-tel-input:not(.allow-dropdown) input[type="tel"] {
  padding-right: 36px !important;
}

/* The wrapper is `display: inline-block` in the widget's own stylesheet, so a
   phone field sat at its content width while every field beside it filled the
   row. */
body .intl-tel-input {
  display: block;
  width: 100%;
}

.scrollToTop{
  color: #003366;
}

.nh-submenu li.nh-accordion-container:has(a[data-npf-icon="questions"]) {
    display: none !important;
}

/* ============================================================
   POPUP DESIGN SYSTEM OVERRIDES
   All registration / submission popups — override the peach/orange
   inline styles from functions.php (theme). Plugin CSS loads on every
   page via wp_enqueue_style, so these declarations always win on
   source order without needing !important.
   ============================================================ */

/* ── Service Post Submission Popup ("Thank You! Got it") ── */
body #aoe-submission-popup {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15);
    background-image: none;
}

body #aoe-submission-popup h2 {
    color: #020b18;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 26px;
    margin: 0 0 14px 0;
    font-weight: 600;
    letter-spacing: -0.5px;
}

body #aoe-submission-popup p {
    color: #4c5563;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 30px 0;
}

body #aoe-popup-close {
    background-color: #4f84c3;
    color: #ffffff;
    border: none;
    padding: 13px 38px;
    border-radius: 8px;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    display: inline-block;
    letter-spacing: 0.01em;
}

body #aoe-popup-close:hover {
    background-color: #3e6ea6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(63, 110, 166, 0.28);
    color: #ffffff;
}

body #aoe-submission-popup .aoe-checkmark {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: #e8f5e9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

body #aoe-submission-popup .aoe-checkmark svg {
    width: 36px;
    height: 36px;
    stroke: #2e7d32;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Registration "Thank you for your registration" popup ──
   The .first-time-popup-container has an inline peach gradient from
   functions.php. Override it here with the new white-card design. */

body .first-time-popup-container:not(.has-expert-flow) {
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 20px !important;
    padding: 52px 40px !important;
    height: auto !important;
    max-width: 460px !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.16) !important;
}

body .first-time-popup-content h2 {
    color: #020b18 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 0 32px 0 !important;
    letter-spacing: -0.8px !important;
}

body .first-time-popup-btn {
    background-color: #4f84c3 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 13px 34px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
    font-family: "Inter", system-ui, sans-serif !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
}

body .first-time-popup-btn:hover {
    background-color: #3e6ea6 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(63, 110, 166, 0.28) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Close × button adapts to white background */
body .first-time-popup-container:not(.has-expert-flow) .first-time-popup-close {
    color: #8a94a3 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body .first-time-popup-container:not(.has-expert-flow) .first-time-popup-close:hover {
    color: #020b18 !important;
    background: rgba(0, 0, 0, 0.10) !important;
}

/* ── Email-verify popup (unverified account screen) ── */
body .email-verify-popup {
    background: #ffffff !important;
    background-image: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.15) !important;
}

body .email-verify-popup h2 {
    color: #020b18 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

body .email-verify-popup p {
    color: #4c5563 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

body .email-verify-popup a {
    color: #4f84c3 !important;
}

body .email-verify-popup a:hover {
    color: #3e6ea6 !important;
}

body #verification-message.success {
    background: #4f84c3 !important;
    border-color: #4f84c3 !important;
    color: #ffffff !important;
}

/* ---------- Experience Level label on the points stars ----------
   NPF_Claims wraps every `.iscu_removal_star_rating` the theme prints into
   `.npf-explevel` with this label in front of it, so the same wording appears
   on service cards, search results, the dashboard, the single service page and
   the profile sidebar as on the expert cards.

   Kept deliberately plain and inline: these chips live in five different
   layouts, and anything that sets its own box here would fight one of them. */
.npf-explevel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1;
}
.npf-explevel__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  white-space: nowrap;
  color: #4c5563;
}
.npf-explevel .wpj-star-rating-static { display: inline-flex; align-items: center; }

/* ---------- Tooltip ----------
   One element, kept on <body> by npf-tooltip.js so it is never clipped by a
   card's rounded, overflow:hidden photo. Appears the instant the pointer
   arrives — the browser's own `title` waits about a second, which is why the
   explanation under the Experience Level stars was so easy to miss.

   Fixed colours on purpose: a native tooltip borrows the operating system's
   palette, so the same chip looked different on every machine. */
.npf-tip {
  position: absolute;
  z-index: 100000;
  /* Sized like the browser tooltip this replaces — the first version was set at
     reading size and came out a good deal larger than what it stood in for.
     Colour and corner stay as designed. */
  max-width: 280px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #4a4a4a;
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* No delay in, a short fade out, so moving between two chips does not blink. */
  transition: opacity 0.12s ease 0s, visibility 0s linear 0.12s;
}

.npf-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease 0s, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .npf-tip { transition: none; }
}
