/**
 * brand.css — site-wide NSI brand layer (loaded on every public page EXCEPT
 * single listings, where skin.css loads instead and carries its own
 * dark-header lockup styles under body.single-listing).
 *
 * Sections (child-theme expansion):
 *   A. Web fonts (self-hosted variable Inter + Source Serif 4).
 *   B. Header + footer ribbon-N lockup (the original brand.css, preserved).
 *   C. Design tokens (HEX equivalents of the v2.0 tokens).
 *   D. Base ground and type site-wide (cream ground, Inter body, serif heads).
 *   E. Header shell — dark space-900 band, cream nav, one orange CTA.
 *   F. Footer — navy-deep band, cream copy, teal-electric links.
 *   G. Buttons — orange primary pill, ghost secondary pill.
 *   H. Archive / search result cards — nsi-card frame (best-effort classes).
 *
 * Sections A-B are byte-for-byte the shipped nsi-directory-skin brand.css, so
 * the live lockup does not regress. Sections C-H are new: they carry the NSI
 * brand across the whole directory (home, categories, search, taxonomy), which
 * previously kept the stock theme presentation. Because the header shell is now
 * dark site-wide, the header lockup is flipped to the dark-surface pair
 * (cream name, electric tag) in section E, matching the listing header and the
 * footer lockup — the standalone light-surface pair below is overridden there.
 *
 * Every new selector targets a real ListingPro class and fails safe: a class
 * that is absent on a given template simply matches nothing. The archive
 * result-card interior selectors in section H are BEST-EFFORT — the read-only
 * harvest captured the single-listing DOM, not a live archive DOM, so those
 * class names must be confirmed against a live archive page in the deploy wave.
 * All are inert if wrong.
 *
 * @font-face note: src URLs are bare (no query string) and byte-match the
 * preload hrefs printed by nsi_skin_head_preloads() — a mismatched URL makes
 * browsers download every font twice. This file lives in the same
 * assets/css/ directory as skin.css, so ../fonts/ resolves identically.
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-variable-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Header lockup — mark + two-line wordmark inside the theme's .lp-logo box. */

.nsi-lockup {
  display: flex;
  align-items: center;
}

.nsi-lockup > a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.nsi-lockup img {
  width: 56px;
  height: auto; /* guards the intrinsic 44x41 ratio against theme img rules */
  display: block;
  flex: 0 0 auto;
}

.nsi-lockup-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.nsi-lockup-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .01em;
  color: #1A2532; /* navy-deep */
}

.nsi-lockup-tag {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0A565A; /* teal-deep — 7:1+ on the light header surface */
  margin-top: 3px;
}

/* Footer lockup — the theme footer is dark site-wide, so the wordmark flips
   to the dark-surface pair. Markup has no inner <a>, so the gap sits here. */

.nsi-lockup--footer {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 18px 0 10px;
}

.nsi-lockup--footer .nsi-lockup-name {
  color: #F5F1EC; /* cream */
}

.nsi-lockup--footer .nsi-lockup-tag {
  color: #5DDADE; /* teal-electric */
}

/* Responsive collapse — mirrors skin.css: in narrow headers the tag yields,
   the name wraps beside the mark, and nothing crosses the viewport edge. */

@media (max-width: 991px) {
  .nsi-lockup-tag {
    display: none;
  }

  .nsi-lockup-text {
    white-space: normal;
  }

  .nsi-lockup-name {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .nsi-lockup img {
    width: 44px;
  }
}

@media (max-width: 375px) {
  .nsi-lockup img {
    width: 36px;
  }

  .nsi-lockup-name {
    font-size: .875rem;
  }
}

/* C. Design tokens — the documented HEX equivalents of the v2.0 OKLCH tokens.
   Mirrors skin.css section 2. skin.css and brand.css never co-load (skin on
   single listings, brand everywhere else), so each carries its own :root. */

:root {
  --global-space-900: #06111D;
  --global-space-800: #111F2E;
  --global-space-700: #1E2F41;

  --global-navy: #2B3A4A;
  --global-navy-deep: #1A2532;
  --global-navy-soft: #4A5868;

  --global-teal: #10797C;
  --global-teal-deep: #0A565A;
  --global-teal-electric: #5DDADE;
  --global-teal-vivid: #09C2C7;

  --global-orange: #F7921E;
  --global-orange-deep: #D97706;

  --global-cream: #F5F1EC;
  --global-cream-deep: #E8E1D6;
  --global-cream-bright: #FAF6EE;
  --global-mist: #A9B4C2;

  --global-white: #FFFFFF;
  --global-text-muted: #5A6577;
  --global-border: #DDD9D2;

  --radius-frame: 28px 0 28px 0;

  --motion-fast: 200ms;
  --motion-base: 300ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-lifted: 0 12px 32px rgba(43, 58, 74, .25);
  --shadow-cta: 0 10px 15px -3px rgba(247, 146, 30, .30),
                0 4px 6px -4px rgba(247, 146, 30, .30);

  --nsi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Arial, sans-serif;
  --nsi-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* D. Base ground and type site-wide. Retires the theme's Quicksand/Montserrat
   families across the directory by cascade order (verified on listing pages
   that no theme font-family carries a live !important; confirm on archive
   pages in the deploy wave). The directory's aliceblue wash becomes cream. */

body {
  font-family: var(--nsi-font-body);
  color: var(--global-navy);
}

body h1,
body h2,
body h3,
body h4 {
  font-family: var(--nsi-font-display);
  font-weight: 600;
  color: var(--global-navy);
}

body h5,
body h6 {
  font-family: var(--nsi-font-body);
  font-weight: 700;
  color: var(--global-navy);
}

body button,
body input,
body select,
body textarea {
  font-family: var(--nsi-font-body);
}

/* The theme paints wide bands aliceblue (#F7FBFE / #eef5fb); the calm cream
   ground shows through on the directory the same way it does on listings. */
.aliceblue {
  background-color: var(--global-cream-bright);
}

/* E. Header shell — the same dark space-900 band the listing header uses, so
   the directory header is coherent across every page. Colors and lockup
   composition only; the theme's float layout and mmenu mechanics are untouched. */

.lp-header-bg-black {
  background-color: var(--global-space-900);
  border-bottom: 1px solid var(--global-space-700);
}

.lp-menu-bar,
.lp-menu-bar.lp-menu-bar-color {
  background-color: var(--global-space-900);
}

/* The header is now dark, so the header lockup flips to the dark-surface pair.
   These class-on-class selectors outrank the standalone lockup colors above. */
.lp-logo.nsi-lockup .nsi-lockup-name {
  color: var(--global-cream);
}

.lp-logo.nsi-lockup .nsi-lockup-tag {
  color: var(--global-teal-electric);
}

.lp-menu-bar .menu-item a {
  font-family: var(--nsi-font-body);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--global-cream);
  transition: color var(--motion-fast) var(--motion-ease);
}

.lp-menu-bar .menu-item a:hover,
.lp-menu-bar .menu-item a:focus {
  color: var(--global-teal-electric);
}

.lp-menu-bar .menu-item ul {
  background-color: var(--global-space-800);
  border: 1px solid var(--global-space-700);
}

.navbar-toggle .icon-bar {
  background-color: var(--global-cream);
}

.mm-menu {
  background: var(--global-space-900);
  color: var(--global-cream);
}

.mm-menu .mm-listview > li > a {
  color: var(--global-cream);
  font-family: var(--nsi-font-body);
}

/* F. Footer — navy-deep band, cream copy, teal-electric links (mirrors skin.css
   section 12; the footer lockup already ships the dark-surface pair). */

.footer-style1,
.footer-bottom-bar {
  background-color: var(--global-navy-deep);
}

.footer-bottom-bar {
  border-top: 1px solid var(--global-space-700);
}

.footer-about-company li {
  font-family: var(--nsi-font-body);
  color: var(--global-cream);
}

.footer-about-company li a {
  color: var(--global-teal-electric);
  text-decoration: none;
}

.footer-about-company li a:hover {
  color: var(--global-cream);
  text-decoration: underline;
}

.credit-links {
  font-family: var(--nsi-font-body);
  color: var(--global-cream);
}

.credit-links a {
  color: var(--global-teal-electric);
}

.credit-links a:hover {
  color: var(--global-cream);
}

/* G. Buttons — the directory's primary action is an orange pill with dark ink
   (navy-on-orange passes AA; orange is never used as foreground text), and the
   secondary is a ghost pill. Matches the listing button family. */

.lpl-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .65rem 1.5rem;
  background-color: var(--global-orange);
  color: var(--global-navy-deep);
  font-family: var(--nsi-font-body);
  font-weight: 700;
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 9999px;
  box-shadow: var(--shadow-cta);
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}

.lpl-button:hover,
.lpl-button:focus {
  background-color: var(--global-orange-deep);
  color: var(--global-white);
}

.secondary-btn,
.lp-secondary-btn {
  min-height: 44px;
  padding: .55rem 1.25rem;
  color: var(--global-navy);
  background-color: transparent;
  border: 2px solid var(--global-navy);
  border-radius: 9999px;
  font-family: var(--nsi-font-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}

.secondary-btn:hover,
.lp-secondary-btn:hover {
  color: var(--global-teal-deep);
  border-color: var(--global-teal-deep);
}

/* H. Archive / search result cards — the nsi-card frame (white, hairline, 3px
   teal top, lift on hover), the same language as the sidebar cards on listings.

   BEST-EFFORT: the read-only harvest captured the single-listing DOM, not a
   live archive DOM, so these ListingPro list/grid card class names are the
   framework's usual ones but were NOT verified against a live archive page.
   Each selector is inert if its class is absent, so a wrong guess costs
   nothing. Confirm the real archive card class(es) against a live
   listing-simple.php / loop-list-view.php render in the deploy wave and prune
   or correct this list then. */

.list-view-box,
.grid-view-box,
.item-listing-wrap,
.listing-item,
.listingItem,
.lp-listing-card {
  background-color: var(--global-white);
  border: 1px solid var(--global-border);
  border-top: 3px solid var(--global-teal);
  border-radius: 16px;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}

.list-view-box:hover,
.grid-view-box:hover,
.item-listing-wrap:hover,
.listing-item:hover,
.listingItem:hover,
.lp-listing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lifted);
  border-top-color: var(--global-teal-vivid);
}

@media (prefers-reduced-motion: reduce) {
  .list-view-box,
  .grid-view-box,
  .item-listing-wrap,
  .listing-item,
  .listingItem,
  .lp-listing-card {
    transition: none;
  }

  .list-view-box:hover,
  .grid-view-box:hover,
  .item-listing-wrap:hover,
  .listing-item:hover,
  .listingItem:hover,
  .lp-listing-card:hover {
    transform: none;
  }
}

/* Card titles + result-card business names in the serif display face. */
.list-view-box h2,
.list-view-box h3,
.grid-view-box h2,
.grid-view-box h3,
.item-listing-wrap h2,
.item-listing-wrap h3,
.listing-item h2,
.listing-item h3 {
  font-family: var(--nsi-font-display);
  color: var(--global-navy);
}