/* ============================================================
   Chris Bocskei — staging overrides. Layered AFTER styles.css.
   1) Logo identity: Okanagan Navy + white only (neutralize stray
      base-ramp gold). 2) Uniform header controls. 3) Light/dark
      theme toggle. All values use theme-aware tokens so they read
      correctly in BOTH modes.
   ============================================================ */

/* Collapse the base gold ramp to navy — the design is navy + white only, and a
   few components reference these base tokens directly (status badge, chips). */
:root { --gold-500: var(--navy-900); --gold-100: #EEF3F5; }
[data-theme="dark"] { --gold-500: #8AC4DE; --gold-100: #16303A; }

/* Header CTA cluster: one row, vertically centered, even gap. */
.cb-desktop-cta { display: inline-flex !important; align-items: center !important; gap: 12px !important; }

/* All header controls -> identical height, radius, padding, type. */
.cb-desktop-cta > a,
.cb-theme-toggle,
.cb-desktop-cta .cb-header-badge > span {
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Status badge -> brand-colour OUTLINE pill (a label; distinct from the filled CTA). */
.cb-desktop-cta .cb-header-badge > span {
  background: var(--color-surface) !important;
  color: var(--color-brand) !important;
  border: 1.5px solid var(--color-brand) !important;
  gap: 8px !important;
}
.cb-desktop-cta .cb-header-badge > span > span {   /* status dot */
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
}

/* Light/dark theme toggle -> subtle outline pill (utility control). */
.cb-theme-toggle {
  gap: 8px !important;
  cursor: pointer !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  font-family: inherit !important;
}
.cb-theme-toggle:hover { border-color: var(--color-brand) !important; color: var(--color-brand) !important; }
.cb-theme-toggle .cb-tt-icon { font-size: 16px !important; line-height: 1 !important; }

/* Neutralize the gold text-selection highlight -> navy tint. */
::selection { background: rgba(14, 42, 59, 0.16) !important; color: var(--color-text) !important; }

/* ============================================================
   MOBILE OPTIMIZATION
   The kit's header is already responsive (nav→hamburger @900px,
   status badge hidden @1100px). These rules cover the gaps:
   inline-grid card rows that never collapse, header fit, hero
   image height, and the dev-only status switcher overlapping.
   ============================================================ */
@media (max-width: 760px){
  /* Every multi-column grid -> single column (many use inline
     grid-template-columns the kit's .cb-stack breakpoints miss). */
  [style*="grid-template-columns"],
  .cb-stack, .cb-stack-sm { grid-template-columns: 1fr !important; }

  /* Hero photo stacks under the copy — sensible height, keep the face. */
  .cb-hero-media { min-height: 260px !important; }
  .cb-hero-photo { min-height: 260px !important; object-position: center 25% !important; }

  /* Never allow sideways scroll on a phone. */
  html, body { overflow-x: hidden !important; }

  /* Demo-only status switcher would overlap content on a phone. */
  .cb-status-switcher { display: none !important; }
}

/* Phone header: the theme toggle is injected into the always-visible header
   group (sibling of the CTA cluster + hamburger), so it survives when the kit
   hides the desktop CTA on mobile. Just tighten it a touch on small screens. */
@media (max-width: 620px){
  .cb-theme-toggle { padding: 0 12px !important; }
}

/* Hero portrait — fills the media slot where the placeholder was. */
.cb-hero-media { padding: 0 !important; overflow: hidden !important; min-height: 420px; }
.cb-hero-photo {
  width: 100% !important;
  height: 100% !important;
  min-height: 420px;
  object-fit: cover !important;
  object-position: center 22% !important;  /* bias to the face */
  display: block !important;
  border-radius: inherit;
}

/* Hide the dev-only "Style guide" link from the public footer legal bar. */
footer a[href="/style-guide"] { display: none !important; }