/**
 * Qube Manhattan client skin (client-first redesign)
 * Primary #F67A20 | secondary #FF00FE | trust leaf #61CE70 | blue #0070AF
 * NO Nearfront gold (#c3a25d) on CTAs/chips. NO Georgia display.
 * Chrome overrides documented in ../DIFF-vs-rejected.md
 */

/* --- Tokens --- */
.client-skin--qube {
  --client-primary: #F67A20;
  --client-accent: #61CE70;
  --client-secondary: #FF00FE;
  --client-blue: #0070AF;
  --client-accent-hover: #F67A20;
  --client-on-accent: #000000;
  --btn-primary-bg: #F67A20;
  --btn-primary-fg: #000000;
  --font-sans: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-secondary: "Roboto Slab", Georgia, "Times New Roman", serif;
  --accent: var(--client-primary);
  --accent-hover: #e06d1a;
  --accent-text: #b35512;
  --on-accent: var(--btn-primary-fg);
  --focus: var(--client-primary);
  --halo: 0 0 0 3px rgba(246, 122, 32, 0.22);
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --masthead: #ffffff;
  --masthead-rule: transparent;
  --on-masthead: #1a1a18;
  --on-masthead-2: #6b6b60;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

.client-skin--qube h1,
.client-skin--qube h2,
.client-skin--qube h3,
.client-skin--qube .hero__title,
.client-skin--qube .section__title,
.client-skin--qube .btn {
  font-family: var(--font-display);
}

.client-skin--qube .hero__eyebrow,
.client-skin--qube .hours-note,
.client-skin--qube .nap-card__meta {
  font-family: var(--font-secondary);
}

/* Hide any leftover NF teal masthead if chrome injects it */
.client-skin--qube .nf-masthead {
  display: none !important;
}

/* --- Slim client top bar (Option A) --- */
.client-skin--qube .client-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line, #e8e6df);
  min-height: 72px;
  display: flex;
  align-items: center;
}

.client-skin--qube .client-topbar__inner {
  width: 100%;
  max-width: var(--maxw, 1120px);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.client-skin--qube .client-topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.client-skin--qube .client-topbar__brand img {
  display: block;
  width: clamp(120px, 22vw, 160px);
  height: auto;
}

.client-skin--qube .client-topbar__meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #6b6b60);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.client-skin--qube .age-strip {
  background: #f7f7f7;
  border-bottom: 1px solid var(--line, #e8e6df);
  font-family: var(--font-sans);
}

/* --- Hero photo --- */
.client-skin--qube .hero.hero--photo {
  position: relative;
  isolation: isolate;
  background-color: #0f1f22;
  background-image: linear-gradient(
    160deg,
    rgba(15, 31, 34, 0.52) 0%,
    rgba(22, 44, 48, 0.42) 45%,
    rgba(15, 31, 34, 0.58) 100%
  );
  overflow: hidden;
}

.client-skin--qube .hero.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-photo, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.client-skin--qube .hero::after {
  background: var(--client-primary);
}

.client-skin--qube .hero--photo .hero__logo-slot {
  width: auto;
  min-width: 120px;
  height: auto;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 12px;
}

.client-skin--qube .hero--photo .hero__logo-slot img {
  display: block;
  width: clamp(140px, 28vw, 200px);
  height: auto;
}

.client-skin--qube .hero__title {
  font-family: var(--font-display);
  font-weight: 800;
}

/* --- Trust chips under hero --- */
.client-skin--qube .hero-trust {
  padding-top: 16px;
  padding-bottom: 0;
}

.client-skin--qube .hero-trust .trust-strip {
  margin: 0;
}

.client-skin--qube .chip {
  font-family: var(--font-sans);
  border-color: rgba(246, 122, 32, 0.28);
}

.client-skin--qube .chip--trust {
  background: rgba(97, 206, 112, 0.14);
  color: #1a6b28;
  border-color: rgba(97, 206, 112, 0.45);
}

.client-skin--qube .chip--gold,
.client-skin--qube .chip--on-dark.chip--gold {
  /* Kill NF gold naming; map to trust leaf / orange */
  background: rgba(97, 206, 112, 0.14);
  color: #1a6b28;
  border-color: rgba(97, 206, 112, 0.4);
}

.client-skin--qube .nearby .chip:hover,
.client-skin--qube a.chip:hover {
  border-color: rgba(255, 0, 254, 0.45);
}

/* --- Buttons (Qube orange; no NF gold) --- */
.client-skin--qube .btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.client-skin--qube .btn--primary:hover {
  background: #e06d1a;
  border-color: #e06d1a;
  color: var(--btn-primary-fg);
}

.client-skin--qube .btn--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

.client-skin--qube .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #ff00fe;
}

.client-skin--qube .btn--secondary-light {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line, #e8e6df);
}

.client-skin--qube .btn--secondary-light:hover {
  border-color: rgba(255, 0, 254, 0.55);
  color: var(--text);
}

.client-skin--qube .btn--tertiary {
  color: var(--accent-text);
}

.client-skin--qube .btn--tertiary:hover {
  color: var(--client-primary);
}

.client-skin--qube .btn--outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.client-skin--qube .btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

.client-skin--qube a:hover {
  color: var(--client-primary);
}

.client-skin--qube .hit-target {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* --- Map --- */
.client-skin--qube .map-frame {
  overflow: hidden;
  padding: 0;
}

.client-skin--qube .map-frame__embed {
  display: block;
  width: 100%;
  min-height: 280px;
  height: 320px;
  border: 0;
}

.client-skin--qube .map-frame__actions {
  margin: 0;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Category image tiles (4:3; no letter glyphs) --- */
.client-skin--qube .cat-grid--media {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 560px) {
  .client-skin--qube .cat-grid--media {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .client-skin--qube .cat-grid--media {
    grid-template-columns: repeat(6, 1fr);
  }
}

.client-skin--qube .cat-tile--media {
  background: var(--surface);
  border: 1px solid var(--line, #e8e6df);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(28, 52, 57, 0.06));
  min-height: 0;
}

.client-skin--qube .cat-tile__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: #1b1b1b;
  overflow: hidden;
}

.client-skin--qube .cat-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-skin--qube .cat-tile--media .cat-tile__label {
  display: block;
  padding: 12px 8px 14px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text);
}

.client-skin--qube .cat-tile__icon {
  display: none !important;
}

.client-skin--qube .prose-muted {
  max-width: var(--maxw-prose, 72ch);
  color: var(--text-2, #52514e);
  margin: 0;
}

/* --- Sticky mobile bar: native Qube orange (not NF teal/gold) --- */
.client-skin--qube .sticky-cta {
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line, #e8e6df);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
}

.client-skin--qube .sticky-cta .btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}

.client-skin--qube .sticky-cta .btn--outline-light {
  background: #fff;
  color: #1a1a18;
  border: 2px solid var(--client-primary);
}

.client-skin--qube .sticky-cta .btn--outline-light:hover {
  background: rgba(246, 122, 32, 0.08);
  color: #1a1a18;
  border-color: var(--client-primary);
}

/* --- Quiet NF publisher credit (≤12px muted; no teal block) --- */
.client-skin--qube .nf-chrome-footer {
  display: none !important;
}

.client-skin--qube .nf-credit {
  text-align: center;
  padding: 24px 16px 96px;
  background: #fff;
  border-top: 1px solid var(--line, #e8e6df);
}

.client-skin--qube .nf-credit p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #9a9a90;
  font-family: var(--font-sans);
}

.client-skin--qube .nf-credit a {
  color: #8a8a80;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.client-skin--qube .nf-credit a:hover {
  color: #6b6b60;
}

@media (min-width: 900px) {
  .client-skin--qube .nf-credit {
    padding-bottom: 40px;
  }
}

/* FAQ type align */
.client-skin--qube .faq summary,
.client-skin--qube .faq p {
  font-family: var(--font-sans);
}

.client-skin--qube .compliance-footer {
  font-family: var(--font-sans);
}