/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.1
*/

/* ===========================================================================
   GOLD SOVEREIGN VAULT — Dark Theme Overrides
   Navy #0D1B2A | Gold #C9A84C | Slate #1C2E40 | Text #E8E8E8
   =========================================================================== */


/* ── HEADER ─────────────────────────────────────────────────────────────────── */

/* Header bar — dark navy background */
body.st-dark-page #header-outer,
body.st-dark-page #header-outer[data-permanent-transparent="false"],
body.st-dark-page #header-outer.small-nav,
body.st-dark-page #header-outer.scrolled-down {
  background-color: var(--st-bg) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Secondary header bar */
body.st-dark-page #header-secondary-outer {
  background-color: var(--st-bg-deep) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.st-dark-page #header-secondary-outer .container .sf-menu a,
body.st-dark-page #header-secondary-outer span,
body.st-dark-page #header-secondary-outer p {
  color: var(--st-text-muted) !important;
}

/* ── LOGO TEXT ─────────────────────────────────────────────────────────────── */

body.st-dark-page #header-outer #logo {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: 0.02em !important;
  color: var(--st-gold) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

body.st-dark-page #header-outer #logo:hover {
  color: var(--st-gold-light) !important;
  text-decoration: none !important;
}

/* If logo has an image, keep it as-is */
body.st-dark-page #header-outer #logo img {
  filter: none;
}


/* ── NAVIGATION LINKS ──────────────────────────────────────────────────────── */

/* Main nav links */
body.st-dark-page #header-outer .sf-menu > li > a,
body.st-dark-page #header-outer header#top nav > ul > li > a {
  color: var(--st-text) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  transition: color 0.2s ease !important;
}

body.st-dark-page #header-outer .sf-menu > li > a:hover,
body.st-dark-page #header-outer .sf-menu > li.current-menu-item > a,
body.st-dark-page #header-outer .sf-menu > li.current_page_item > a,
body.st-dark-page #header-outer header#top nav > ul > li > a:hover {
  color: var(--st-gold) !important;
}

/* Dropdown menus */
body.st-dark-page #header-outer .sf-menu ul {
  background-color: var(--st-surface) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

body.st-dark-page #header-outer .sf-menu ul li a {
  color: var(--st-text) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

body.st-dark-page #header-outer .sf-menu ul li a:hover,
body.st-dark-page #header-outer .sf-menu ul li.current-menu-item > a {
  color: var(--st-gold) !important;
  background-color: rgba(201, 168, 76, 0.08) !important;
}

/* Header buttons (account, search, etc.) */
body.st-dark-page #header-outer .nectar-header-text-content,
body.st-dark-page #header-outer .slide-out-widget-area-toggle a,
body.st-dark-page #header-outer #search-btn a span,
body.st-dark-page #header-outer .cart-menu .cart-icon-wrap .icon-salient-cart {
  color: var(--st-text) !important;
}

body.st-dark-page #header-outer .slide-out-widget-area-toggle a:hover,
body.st-dark-page #header-outer #search-btn a:hover span {
  color: var(--st-gold) !important;
}

/* Header CTA button */
body.st-dark-page #header-outer .nectar-cta a {
  background-color: var(--st-gold) !important;
  color: var(--st-navy) !important;
  border-color: var(--st-gold) !important;
  font-weight: 600 !important;
}

body.st-dark-page #header-outer .nectar-cta a:hover {
  background-color: var(--st-gold-light) !important;
  color: var(--st-navy) !important;
}

/* Mobile menu icon */
body.st-dark-page .nectar-mobile-only .mobile-header .lines,
body.st-dark-page .nectar-mobile-only .mobile-header .lines:before,
body.st-dark-page .nectar-mobile-only .mobile-header .lines:after {
  background-color: var(--st-text) !important;
}

/* Mobile off-canvas menu */
body.st-dark-page #slide-out-widget-area,
body.st-dark-page #slide-out-widget-area-bg {
  background-color: var(--st-bg) !important;
}

body.st-dark-page #slide-out-widget-area .off-canvas-menu-container li a {
  color: var(--st-text) !important;
}

body.st-dark-page #slide-out-widget-area .off-canvas-menu-container li a:hover {
  color: var(--st-gold) !important;
}


/* ── FOOTER ────────────────────────────────────────────────────────────────── */

/* Main footer area */
body.st-dark-page #footer-outer {
  background-color: var(--st-bg-deep) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.15) !important;
}

body.st-dark-page #footer-outer #footer-widgets {
  background-color: transparent !important;
  padding: 50px 0 30px !important;
}

/* Footer widget headings */
body.st-dark-page #footer-outer #footer-widgets .widget h4,
body.st-dark-page #footer-outer #footer-widgets .widget .widget-title {
  color: var(--st-gold) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
}

/* Footer text */
body.st-dark-page #footer-outer #footer-widgets .widget,
body.st-dark-page #footer-outer #footer-widgets .widget p,
body.st-dark-page #footer-outer #footer-widgets .widget li,
body.st-dark-page #footer-outer #footer-widgets .widget span {
  color: var(--st-text-muted) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Footer links */
body.st-dark-page #footer-outer #footer-widgets .widget a {
  color: var(--st-gold) !important;
  transition: color 0.2s ease !important;
}

body.st-dark-page #footer-outer #footer-widgets .widget a:hover {
  color: var(--st-gold-light) !important;
}

/* Footer lists */
body.st-dark-page #footer-outer #footer-widgets .widget ul li {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}


/* ── COPYRIGHT BAR ─────────────────────────────────────────────────────────── */

body.st-dark-page #footer-outer #copyright {
  background-color: var(--st-bg-deepest) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 18px 0 !important;
}

body.st-dark-page #footer-outer #copyright p,
body.st-dark-page #footer-outer #copyright span,
body.st-dark-page #footer-outer #copyright .widget {
  color: var(--st-text-faint) !important;
  font-size: 13px !important;
}

body.st-dark-page #footer-outer #copyright a {
  color: var(--st-gold) !important;
}

body.st-dark-page #footer-outer #copyright a:hover {
  color: var(--st-gold-light) !important;
}

/* Social icons in footer */
body.st-dark-page #footer-outer #copyright ul.social li a {
  color: var(--st-text-faint) !important;
  transition: color 0.2s ease !important;
}

body.st-dark-page #footer-outer #copyright ul.social li a:hover {
  color: var(--st-gold) !important;
}


/* ── PAGE BACKGROUND — ensure no white flashes ─────────────────────────────── */

body.st-dark-page,
body.st-dark-page .container-wrap,
body.st-dark-page #ajax-content-wrap,
body.st-dark-page .main-content {
  background-color: var(--st-bg) !important;
}

/* Page hero / title area — Salient injects a ~250px tall #page-header-bg block
   at the top of every page by default. On sovereign pages we build our own
   heroes inside .st-page-wrap, so suppress Salient's one entirely (it was
   creating a big empty dark band on the coin detail page on mobile). */
body.st-dark-page .page-header-bg-image,
body.st-dark-page #page-header-bg,
body.st-dark-page .nectar-page-header,
body.st-dark-page #page-header-wrap {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}


/* ── SCROLLBAR — dark themed ───────────────────────────────────────────────── */

body.st-dark-page::-webkit-scrollbar {
  width: 8px;
}

body.st-dark-page::-webkit-scrollbar-track {
  background: var(--st-bg);
}

body.st-dark-page::-webkit-scrollbar-thumb {
  background: var(--st-surface);
  border-radius: 4px;
}

body.st-dark-page::-webkit-scrollbar-thumb:hover {
  background: var(--st-gold);
}


/* ── SOVEREIGN SUB-NAVIGATION ────────────────────────────────────────────── */

.st-subnav {
  background: var(--st-bg);
  border-bottom: 1px solid rgba(201,168,76,.12);
  box-shadow: 0 1px 12px rgba(0,0,0,.25);

  /* Default: in normal flow so the FX (spot) bar renders directly
     beneath it without a fixed-position gap. */
  position: relative;
  z-index: 9985;
}

/* Headroom pattern: when the user scrolls UP past the sub-nav's natural
   position, pin it to the viewport so navigation is always within reach.
   On scroll-down it un-pins and the page content reclaims the space.
   JS toggles `is-pinned` (see partials/sovereign-nav.php). */
.st-subnav.is-pinned {
  position: fixed;
  top: 78px;       /* below Salient #header-outer (expanded) */
  left: 0;
  right: 0;
  animation: stSubnavSlideDown 0.22s ease-out;
}
@keyframes stSubnavSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* When Salient shrinks the header on scroll, slide the pinned sub-nav up. */
body.st-dark-page #header-outer.small-nav ~ #ajax-content-wrap .st-subnav.is-pinned,
body.st-dark-page #header-outer.scrolled-down ~ #ajax-content-wrap .st-subnav.is-pinned {
  top: 56px;
}

/* WP admin bar offset (only relevant once pinned). */
body.admin-bar .st-subnav.is-pinned { top: 110px; }
body.admin-bar #header-outer.small-nav ~ #ajax-content-wrap .st-subnav.is-pinned,
body.admin-bar #header-outer.scrolled-down ~ #ajax-content-wrap .st-subnav.is-pinned {
  top: 88px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .st-subnav.is-pinned { top: 124px; }
}

.st-subnav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
}

.st-subnav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 0 0;
  margin-right: 8px;
  border-right: 1px solid rgba(201,168,76,.1);
  text-decoration: none !important;
  flex-shrink: 0;
}

.st-subnav__brand-icon {
  color: var(--st-gold);
  font-size: 20px;
}

.st-subnav__brand-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--st-gold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.st-subnav__brand:hover .st-subnav__brand-text {
  color: var(--st-gold-light);
}

.st-subnav__links {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* NOTE: must not set any overflow here — browsers clip overflow-y when
     overflow-x is auto/scroll, which would hide dropdown submenus. */
}

.st-subnav__item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.st-subnav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 15px 18px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--st-text);
  letter-spacing: 0.02em;
  text-decoration: none !important;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.st-subnav__caret {
  font-size: 9px;
  color: var(--st-text-faint);
  margin-left: 2px;
  transition: color .2s ease, transform .2s ease;
}

.st-subnav__item:hover > .st-subnav__link .st-subnav__caret,
.st-subnav__link--active .st-subnav__caret { color: var(--st-gold); }

/* Dropdown submenu */
.st-subnav__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--st-bg-deep);
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 9995;
}

.st-subnav__item--has-submenu:hover > .st-subnav__submenu,
.st-subnav__item--has-submenu:focus-within > .st-subnav__submenu,
.st-subnav__item--has-submenu.is-open > .st-subnav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.st-subnav__subitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  color: var(--st-text) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}

.st-subnav__subitem:hover {
  color: var(--st-gold) !important;
  background: rgba(201,168,76,.06);
  border-left-color: var(--st-gold);
  text-decoration: none !important;
}

.st-subnav__subitem--active {
  color: var(--st-gold) !important;
  background: rgba(201,168,76,.08);
  border-left-color: var(--st-gold);
  font-weight: 600;
}

.st-subnav__subitem--soon {
  color: var(--st-text-faint) !important;
  cursor: default;
  opacity: .65;
}
.st-subnav__subitem--soon:hover {
  color: var(--st-text-faint) !important;
  background: transparent;
  border-left-color: transparent;
}
.st-subnav__sublabel { flex: 1; }

.st-subnav__link:hover {
  color: var(--st-gold);
  background: rgba(201,168,76,.04);
  text-decoration: none !important;
}

.st-subnav__link--active {
  color: var(--st-gold) !important;
  border-bottom-color: var(--st-gold) !important;
  font-weight: 600;
  background: rgba(201,168,76,.06);
}

.st-subnav__link--soon {
  color: var(--st-text-faint) !important;
  cursor: default;
  opacity: .65;
}

.st-subnav__link--soon:hover {
  color: var(--st-text-faint) !important;
  background: transparent;
}

.st-subnav__icon {
  display: none; /* cleaner without icons */
}

.st-subnav__label {}

.st-subnav__badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--st-text-muted);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 2px;
}

@media (max-width: 999px) {
  /* Mobile uses Salient's default hamburger menu — our sovereign sub-nav
     is desktop-only to avoid duplicating navigation on small screens. */
  .st-subnav { display: none !important; }
}


/* ── LIGHT-MODE surface overrides ─────────────────────────────────────────
   The sub-nav and the spot-price bar both default to using --st-bg as their
   background, which makes them blend into the page in light mode. Give them
   a distinct cream surface plus a subtle border so they sit visually apart.
   These rules apply via system preference + explicit override, mirroring
   the token cascade in sovereign-tracker.css. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .st-subnav,
  :root:not([data-theme="dark"]) .st-spot-bar {
    background: var(--st-bg-deep);
    border-bottom-color: var(--st-border);
  }
  :root:not([data-theme="dark"]) .st-subnav__link {
    color: #1A1A1A;
  }
  :root:not([data-theme="dark"]) .st-subnav__brand,
  :root:not([data-theme="dark"]) .st-subnav__brand-text {
    color: var(--st-gold);
  }
}

[data-theme="light"] .st-subnav,
[data-theme="light"] .st-spot-bar {
  background: var(--st-bg-deep);
  border-bottom-color: var(--st-border);
}
[data-theme="light"] .st-subnav__link {
  color: #1A1A1A;
}
[data-theme="light"] .st-subnav__brand,
[data-theme="light"] .st-subnav__brand-text {
  color: var(--st-gold);
}


/* ── SUBNAV THEME TOGGLE ───────────────────────────────────────────────────
   Sun/moon icon sits on the right of the sub-nav. Visible icon mirrors
   the *current* effective theme (sun in dark mode → "switch to light").
   Per-session via sessionStorage; falls through to system preference on
   a fresh tab. */

.st-subnav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-left: 12px;
}

.st-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid var(--st-border-subtle);
  border-radius: 999px;
  color: var(--st-text-muted);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.st-theme-toggle:hover {
  color: var(--st-gold);
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.06);
}

.st-theme-toggle:focus-visible {
  outline: 2px solid var(--st-gold);
  outline-offset: 2px;
}

.st-theme-toggle__icon {
  display: block;
}

/* Show the icon for the theme the user can SWITCH TO. In dark mode,
   show the sun (clicking → light). In light mode, show the moon. */
.st-theme-toggle__icon--sun  { display: block; }
.st-theme-toggle__icon--moon { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .st-theme-toggle__icon--sun  { display: none; }
  :root:not([data-theme="dark"]) .st-theme-toggle__icon--moon { display: block; }
}

:root[data-theme="light"] .st-theme-toggle__icon--sun  { display: none; }
:root[data-theme="light"] .st-theme-toggle__icon--moon { display: block; }
/* :root[data-theme="dark"] uses the default (sun visible). */


/* ── HEADER SEARCH OVERLAY — dark themed ──────────────────────────────── */
/* Salient's salient-dynamic-styles.css (generated from theme options) sets:
     #search-outer { background: #fff }
     #header-outer #search-outer:before { background: #fff }   ← the "reveal" pseudo
     body.material #search-outer { background-color: transparent }
     #search-outer input { color: #000; border-bottom: 2px solid #3452ff }
   We override all of those on sovereign (st-dark-page) views. */

html body.st-dark-page #search-outer,
html body.material.st-dark-page #search-outer {
  background-color: var(--st-bg) !important;
  background-image: none !important;
}

/* The white "slide-down" pseudo element — make it navy so the overlay is dark. */
html body.st-dark-page #header-outer #search-outer:before,
html body.material.st-dark-page #header-outer #search-outer:before,
html body.st-dark-page #search-outer .bg-color-stripe,
html body.st-dark-page #header-outer .bg-color-stripe {
  background-color: var(--st-bg) !important;
}

html body.st-dark-page #search-outer #search,
html body.st-dark-page #search-outer form,
html body.st-dark-page #search-outer .container,
html body.st-dark-page #search-outer #search-box,
html body.st-dark-page #search-outer #search-box .inner-wrap {
  background-color: transparent !important;
}

html body.st-dark-page #search-outer input[type="text"],
html body.st-dark-page #search-outer input.search,
html body.st-dark-page #search-outer #search input[type="text"],
html body.st-dark-page #search-outer #search input,
html body #search-outer #search input[type="text"].st-dark-ignore,   /* placeholder selector to boost list */
html body.st-dark-page.material #search-outer #search input[type="text"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--st-text) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 34px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(201, 168, 76, 0.4) !important;
  border-radius: 0 !important;
  caret-color: var(--st-gold) !important;
  box-shadow: none !important;
}

html body.st-dark-page #search-outer input[type="text"]:focus,
html body.st-dark-page #search-outer #search input[type="text"]:focus {
  border-bottom-color: var(--st-gold) !important;
  outline: none !important;
  box-shadow: 0 2px 0 0 var(--st-gold) !important;
}

/* Placeholder — Salient sets #000 in light-header mode and #fff in dark;
   also #888 in a generic rule. Override all variants with both modern
   ::placeholder and the vendor-prefix pseudos Salient targets. */
html body.st-dark-page #search-outer input[type="text"]::placeholder,
html body.st-dark-page #search-outer input[type="text"]::-webkit-input-placeholder,
html body.st-dark-page #search-outer input[type="text"]::-moz-placeholder,
html body.st-dark-page #search-outer input[type="text"]:-ms-input-placeholder,
html body.st-dark-page #header-outer #search-outer input[type="text"]::placeholder,
html body.st-dark-page #header-outer #search-outer input[type="text"]::-webkit-input-placeholder,
html body.st-dark-page #header-outer #search-outer input[type="text"]::-moz-placeholder,
html body[data-header-color="dark"].st-dark-page #header-outer #search-outer input[type="text"]::placeholder,
html body[data-header-color="dark"].st-dark-page #header-outer #search-outer input[type="text"]::-webkit-input-placeholder,
html body[data-header-color="dark"].st-dark-page #header-outer #search-outer input[type="text"]::-moz-placeholder,
html body[data-header-color="light"].st-dark-page #header-outer #search-outer input[type="text"]::placeholder,
html body[data-header-color="light"].st-dark-page #header-outer #search-outer input[type="text"]::-webkit-input-placeholder,
html body[data-header-color="light"].st-dark-page #header-outer #search-outer input[type="text"]::-moz-placeholder,
html body[data-header-color="custom"].st-dark-page #header-outer #search-outer input[type="text"]::placeholder,
html body[data-header-color="custom"].st-dark-page #header-outer #search-outer input[type="text"]::-webkit-input-placeholder {
  color: var(--st-text-muted) !important;
  font-style: italic !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--st-text-muted) !important;
}

/* "Hit enter to search…" hint text + our JS-injected example-search chips */
html body.st-dark-page #search-outer #search span:not(.close-line):not(.screen-reader-text),
html body.st-dark-page #search-outer #search .span_12 span,
html body.st-dark-page #search-outer #search-box span {
  color: var(--st-text-muted) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  opacity: 1 !important;
  line-height: 1.8 !important;
  margin-top: 18px !important;
  text-align: left !important;
  display: block !important;
}
html body.st-dark-page #search-outer #search-box span b {
  color: var(--st-gold) !important;
  background: rgba(201, 168, 76, 0.08) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  margin: 0 2px !important;
  font-weight: 600 !important;
  font-family: 'JetBrains Mono', Menlo, monospace !important;
  font-size: 12px !important;
  display: inline-block !important;
}
html body.st-dark-page #search-outer #search-box span small {
  color: var(--st-text-faint) !important;
  font-size: 12px !important;
  display: inline-block !important;
  margin-top: 6px !important;
}

/* Submit button inside the overlay */
html body.st-dark-page #search-outer button.search-box__button,
html body.st-dark-page #search-outer .search-box__button {
  background: var(--st-gold) !important;
  color: var(--st-navy) !important;
  border: 1px solid var(--st-gold) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
html body.st-dark-page #search-outer button.search-box__button:hover {
  background: var(--st-gold-light) !important;
}

/* Close (X) button — gold cross, no backdrop circle. */
html body.st-dark-page #search-outer #close a:before,
html body.material.st-dark-page #search-outer #search #close a:before {
  display: none !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
}
html body.st-dark-page #search-outer #close .close-line,
html body.st-dark-page #search-outer #close .close-line1,
html body.st-dark-page #search-outer #close .close-line2,
html body.material.st-dark-page #search-outer #search #close .close-line,
html body.material.st-dark-page #search-outer #search #close .close-line1,
html body.material.st-dark-page #search-outer #search #close .close-line2 {
  background-color: var(--st-gold) !important;
}
html body.st-dark-page #search-outer #close a span:not(.close-line) {
  color: var(--st-gold) !important;
}
html body.st-dark-page #search-outer #close a:hover:before {
  display: none !important;
  background-color: transparent !important;
}

/* ── Close X positioning — use position:fixed to break out of Salient's
   containing-block positioning entirely. Salient fights us with:
     #search-outer #search #close { position:absolute; top:50%; margin-top:-28px }
     body.material #search-outer #search #close { right:90px }
   plus transform animations. By using position:fixed we anchor directly to
   the viewport, and our z-index + !important ensures it stays visible. */
html body.st-dark-page.material #header-outer #search-outer #search #close,
html body.st-dark-page #header-outer #search-outer #search #close,
html body.material.st-dark-page #search-outer #search #close,
html body.st-dark-page #search-outer #search #close {
  position: fixed !important;
  top: 24px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
  margin: 0 !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 10100 !important;
  transform: translate3d(0, 0, 0) !important;
}

html body.st-dark-page.material #header-outer #search-outer #search #close a,
html body.st-dark-page #header-outer #search-outer #search #close a,
html body.material.st-dark-page #search-outer #search #close a,
html body.st-dark-page #search-outer #search #close a {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 44px !important;
  height: 44px !important;
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 780px) {
  html body.st-dark-page.material #header-outer #search-outer #search #close,
  html body.st-dark-page #header-outer #search-outer #search #close,
  html body.material.st-dark-page #search-outer #search #close,
  html body.st-dark-page #search-outer #search #close {
    top: 14px !important;
    right: 14px !important;
  }
}

/* Inline search form (if rendered on page) */
body.st-dark-page .search-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

body.st-dark-page .search-form .search-field,
body.st-dark-page input[type="search"].search-field {
  background: var(--st-surface) !important;
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  color: var(--st-text) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

body.st-dark-page .search-form .search-field:focus,
body.st-dark-page input[type="search"].search-field:focus {
  border-color: var(--st-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18) !important;
}

body.st-dark-page .search-form .search-field::placeholder {
  color: var(--st-text-faint) !important;
}

body.st-dark-page .search-form .search-widget-btn {
  background: var(--st-gold) !important;
  color: var(--st-navy) !important;
  border: 1px solid var(--st-gold) !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}

body.st-dark-page .search-form .search-widget-btn:hover {
  background: var(--st-gold-light) !important;
}

body.st-dark-page .search-form .search-widget-btn .icon-salient-search {
  color: var(--st-navy) !important;
}


/* ── SOVEREIGN page-layout shell (shared by Search + Premium Movers) ──── */
/* Reset Salient's page wrappers so our template controls the full width. */

body.st-tpl-search .container-wrap,
body.st-tpl-search #ajax-content-wrap,
body.st-tpl-search .main-content,
body.st-tpl-search #content-wrap,
body.st-tpl-movers .container-wrap,
body.st-tpl-movers #ajax-content-wrap,
body.st-tpl-movers .main-content,
body.st-tpl-movers #content-wrap {
  background: var(--st-bg) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Salient often renders a page-header hero above — suppress it. */
body.st-tpl-search #page-header-bg,
body.st-tpl-search .page-header-bg-image,
body.st-tpl-search .nectar-page-header,
body.st-tpl-movers #page-header-bg,
body.st-tpl-movers .page-header-bg-image,
body.st-tpl-movers .nectar-page-header {
  display: none !important;
}

body.st-tpl-search .st-page-wrap,
body.st-tpl-movers .st-page-wrap {
  padding: 40px 24px 60px !important;
  min-height: 70vh;
  background: var(--st-bg) !important;
}

body.st-tpl-search .st-container,
body.st-tpl-movers .st-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.st-tpl-search .st-page-header,
body.st-tpl-movers .st-page-header {
  margin-bottom: 20px !important;
}

body.st-tpl-search .st-breadcrumb,
body.st-tpl-movers .st-breadcrumb {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: var(--st-text-muted) !important;
  margin-bottom: 10px !important;
}

body.st-tpl-search .st-breadcrumb a,
body.st-tpl-movers .st-breadcrumb a {
  color: var(--st-gold) !important;
  text-decoration: none !important;
}

body.st-tpl-search .st-breadcrumb a:hover,
body.st-tpl-movers .st-breadcrumb a:hover { color: var(--st-gold-light) !important; }

body.st-tpl-search .st-breadcrumb__sep,
body.st-tpl-movers .st-breadcrumb__sep {
  margin: 0 8px !important;
  color: var(--st-text-faint) !important;
}

body.st-tpl-search h1.st-page-title,
body.st-tpl-search .st-page-title,
body.st-tpl-movers h1.st-page-title,
body.st-tpl-movers .st-page-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 38px !important;
  line-height: 1.2 !important;
  color: var(--st-text) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-transform: none !important;
}

body.st-tpl-search .st-page-intro,
body.st-tpl-movers .st-page-intro {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 15px !important;
  color: var(--st-text-muted) !important;
  margin: 10px 0 0 !important;
  max-width: 780px !important;
  line-height: 1.55 !important;
}


/* ── HIDE SALIENT'S DEFAULT FOOTER ─────────────────────────────────────
   Salient renders #footer-outer (empty logo + duplicate copyright row)
   on every page. Our st-footer replaces it on all sovereign templates. */

body.st-dark-page #footer-outer { display: none !important; }


/* ── STICKY FOOTER ────────────────────────────────────────────────────
   Push .st-footer to the bottom of the viewport on short pages so it
   doesn't float mid-screen (e.g. /login/, empty error states). Salient
   wraps everything below the header in #ajax-content-wrap; we make it
   a flex column tall enough to fill the viewport minus header height,
   then let the content area grow and pin the footer to the bottom.
   Header heights mirror Salient's own .no-scroll calc rules. */

body.st-dark-page #ajax-content-wrap {
  display: flex !important;
  flex-direction: column;
  min-height: calc(100vh - 78px);
}
body.st-dark-page #ajax-content-wrap > .container-wrap {
  flex: 1 0 auto;
}
body.st-dark-page #ajax-content-wrap > .st-footer {
  margin-top: auto;
  flex-shrink: 0;
}
@media (max-width: 999px) {
  body.st-dark-page #ajax-content-wrap { min-height: calc(100vh - 47px); }
}


/* ── SOVEREIGN FOOTER BAR ─────────────────────────────────────────────── */
/* Sits at the bottom of every tracker page. Light on visual weight —
   copyright on the left, legal links on the right, muted hairline on top. */

.st-footer {
  background: var(--st-bg-deep) !important;
  border-top: 1px solid rgba(201,168,76,.12) !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}
.st-footer__inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
.st-footer__left,
.st-footer__links {
  font-size: 12.5px !important;
  color: var(--st-text-faint) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.st-footer__brand {
  color: var(--st-gold) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.st-footer__sep { color: var(--st-border); }
.st-footer__links a {
  color: var(--st-text-muted) !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.st-footer__links a:hover { color: var(--st-gold) !important; }

@media (max-width: 640px) {
  .st-footer__inner { justify-content: center !important; text-align: center !important; }
  .st-footer__left, .st-footer__links { justify-content: center !important; }
}