/* Titan Protect HC-02 shared overrides.
   Loaded ONLY on HC-02 page templates (each template <link>s it), so global selectors
   here affect only reskinned pages. Carries his concept masthead + layout to every page,
   built on his own Manus classes so the presentation is his by construction. */

/* Hide the live theme's own fixed nav / search overlay / sticky CTA on reskinned pages. */
#tp-nav, #tp-search-overlay, #tp-sticky-cta { display: none !important; }

/* The theme reserved a top offset for its old FIXED nav (now replaced by the in-flow HC-02 masthead).
   Remove it so the black body background no longer shows as a bar under the masthead. */
main.site-content { padding-top: 0 !important; margin-top: 0 !important; }

/* The live theme sets a near-white global h1/h2/h3 (for its dark bg) that bleeds over his
   ink headings. Force his ink so his display type reads dark on the cream, as designed. */
.tp-page h1, .tp-page h2, .tp-page h3, .tp-page h3 a { color: var(--tp-ink, #1c1b18) !important; }

/* ===== Masthead → his HC-02 concept: nav LEFT, wordmark CENTER + large, JOIN dark button,
   divided full-width ticker. Reordered via CSS `order` so no markup change is needed. ===== */
.tp-global-nav { order: 1; justify-content: flex-start; }
.tp-brand { order: 2; font-size: clamp(1.85rem, 2.6vw, 2.6rem); letter-spacing: .22em; color: var(--tp-ink, #1c1b18); }
.tp-header__actions { order: 3; gap: 20px; }
.tp-global-nav__list a.tp-menu-trigger { text-decoration: none; display: inline-block; }
.tp-global-nav__item { align-items: center; }
.tp-global-nav__item + .tp-global-nav__item::before { content: "\00B7"; color: var(--tp-muted, #9a988f); display: inline-flex; align-items: center; font-size: 1.1rem; line-height: 1; margin: 0 2px; }
.tp-action-link--primary { background: var(--tp-ink, #1c1b18) !important; color: #fff !important; border: 1px solid var(--tp-ink, #1c1b18); padding: 0 22px; min-height: 44px; letter-spacing: .14em; transition: background .15s ease, color .15s ease; }
.tp-action-link--primary:hover { background: var(--tp-gold, #B08A32) !important; border-color: var(--tp-gold, #B08A32); color: #fff !important; }
.tp-action-link--search { color: var(--tp-muted, #6b6a63); }
.tp-market-tape__item + .tp-market-tape__item { border-left: 1px solid rgba(255,255,255,.16); padding-left: 22px; }
.tp-market-tape__inner { gap: 0; column-gap: 22px; }

/* Mobile masthead: the theme hides the desktop nav for a drawer we don't ship, which leaves the
   phone masthead with no navigation. Stack brand → wrapped nav → actions so mobile stays usable. */
@media (max-width: 900px) {
  .tp-header__inner { display: flex !important; flex-direction: column !important; align-items: center !important; row-gap: 8px; padding-top: 10px; padding-bottom: 12px; min-height: 0; }
  .tp-brand { order: 1; font-size: 1.55rem; }
  .tp-global-nav { order: 2; display: flex !important; }
  .tp-global-nav__list { flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
  .tp-global-nav__item { min-height: 0; }
  .tp-menu-trigger { min-height: 0 !important; padding: 6px 9px !important; }
  .tp-header__actions { order: 3; display: flex !important; }
  .tp-global-nav__item + .tp-global-nav__item::before { content: none; }
}

/* Route cards: his gold descriptive subtitle. */
.tp-route-card .tp-route-card__sub { color: var(--tp-gold, #B08A32); font: 600 .84rem/1.32 var(--tp-font-body, Inter, sans-serif); letter-spacing: .01em; text-transform: none; margin: -.1rem 0 .6rem; max-width: none; }
.tp-route-card__glyph { display: block; height: 34px; margin-bottom: 15px; color: var(--tp-gold, #B08A32); }

/* Chart embeds: hide his outer header/summary/meta/table so only the plot + legend show in-card. */
.tp-chart--embed { border: 0; background: none; padding: 0; }
/* his concept charts show only the plot + legend inside the card — hide the chart's own eyebrow/title/
   measure header, summary, meta and data table so it flows straight after the card's metrics. */
.tp-chart--embed .tp-chart__header, .tp-chart--embed .tp-chart__summary, .tp-chart--embed .tp-chart__meta, .tp-chart--embed .tp-chart__table { display: none; }

/* desk-card ("Today at the desk") metric values in gold, per his concept (label grey, value gold). */
.tp-hero__panel .tp-metric__value { color: var(--tp-gold, #B08A32); }

/* Tables (ledger, catalogue): the live theme styles tables dark for its dark bg, which renders
   as a black box on the cream page. Force his light scheme so rows read as ink on canvas. */
.tp-page .tp-table { width: 100%; border-collapse: collapse; background: transparent !important; }
.tp-page .tp-table thead th, html .tp-page table.tp-table thead th { background: var(--tp-gold, #B08A32) !important; color: #fff !important; font: 600 .62rem/1.2 var(--tp-font-mono, monospace) !important; letter-spacing: .09em; text-transform: uppercase; padding: 11px 14px !important; text-align: left !important; border: 0 !important; }
.tp-page .tp-table tbody td, html .tp-page table.tp-table tbody td { background: var(--tp-surface-canvas, #F8F6F0) !important; color: var(--tp-ink, #1c1b18) !important; padding: 14px !important; border-bottom: 1px solid var(--tp-line, rgba(0,0,0,.10)) !important; font-size: .9rem !important; line-height: 1.5 !important; }

/* Film Room poster: keep the play glyph inside its poster (theme CSS tries to absolutely-position
   spans with a dark bg, which strands the glyph at the page edge). */
.tp-film-room__media--poster { position: relative; }
.tp-film-room__play { position: static !important; inset: auto !important; background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important; color: var(--tp-gold, #B08A32) !important; }

/* Light terminal strip before the theme footer. */
.tp-home-terminal { border-top: 1px solid var(--tp-line, var(--tp-rule)); border-bottom: 1px solid var(--tp-line, var(--tp-rule)); display: flex; flex-wrap: wrap; gap: 18px 30px; margin: 0 auto; padding: 18px 0; max-width: 1180px; }
.tp-home-terminal a { color: var(--tp-secondary, var(--tp-muted)); font: 600 .63rem/1.2 var(--tp-font-mono, monospace); letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }