/*
Theme Name:        Horizon — Entertainer
Theme URI:         https://automatehorizon.com
Description:       Horizon creator site theme. Skeleton A — The Entertainer. For feature dancers, touring performers and club acts. Primary conversion: Book me / See my shows. GeneratePress child theme. No Elementor. Per-tenant configuration via Horizon Vault. Default skin: Clean Editorial (warm cream, dusty rose, Cormorant Garamond + Inter).
Version:           1.0.0
Author:            Automate Horizon
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
Template:          generatepress
Text Domain:       horizon-entertainer
*/

/*
 * The design-system tokens + shared component CSS load as separate enqueued
 * stylesheets from assets/css/ in dependency order:
 *   hp-design-system (the active skin) -> hp-base -> hp-components -> page-specific -> hp-responsive
 * This file (handle: hp-child) is enqueued LAST, so the rules below are the
 * final word — a compact light-theme polish that keeps the Clean Editorial
 * skin reading correctly over GeneratePress + the shared (dark-origin)
 * component layer. All values reference skin tokens, so a per-tenant skin swap
 * still flows through.
 */

/* Document + content surfaces */
body,
#page,
.site-content {
  background-color: var(--hp-bg);
  color: var(--hp-text);
}

/* Header + primary navigation — dark ink on cream */
.site-header,
.main-navigation,
.main-navigation ul,
.main-navigation ul ul {
  background-color: var(--hp-bg-surface);
}
.site-header {
  border-bottom: 1px solid var(--hp-border);
}
.main-navigation a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.site-title a,
.site-description {
  color: var(--hp-text);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a:hover {
  color: var(--hp-gold-dark);
}

/* Footer */
.hp-footer {
  background-color: var(--hp-bg-raised);
  border-top: 1px solid var(--hp-border);
  color: var(--hp-text);
}
.hp-footer a {
  color: var(--hp-text-muted);
}
.hp-footer a:hover {
  color: var(--hp-gold-dark);
}

/* Headings — editorial serif weight/spacing */
h1, h2, h3,
.hp-page-header__title,
.hp-section-head h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1 { font-weight: 400; }

/* Eyebrow — quiet, non-shouty on light */
.hp-eyebrow {
  color: var(--hp-gold-dark);
}

/* Secondary buttons — outlined for editorial restraint */
.hp-btn--secondary {
  background: transparent;
  border: 1px solid var(--hp-gold);
  color: var(--hp-gold-dark);
}
.hp-btn--secondary:hover {
  background: var(--hp-gold-muted);
  color: var(--hp-gold-dark);
}

/* Forms — light fields */
.hp-field input,
.hp-field textarea,
.hp-field select {
  background: var(--hp-bg-surface);
  color: var(--hp-text);
  border-color: var(--hp-border-strong);
}
.hp-field input::placeholder,
.hp-field textarea::placeholder {
  color: var(--hp-text-disabled);
}
.hp-field input:focus,
.hp-field textarea:focus {
  border-color: var(--hp-gold);
  box-shadow: 0 0 0 3px var(--hp-gold-muted);
}

/* Cards — white on cream, hairline for definition */
.hp-card {
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
}
.hp-card:hover {
  border-color: var(--hp-border-strong);
}

/* Brand wordmark over the hero — the shared layer paints it --hp-gold with a
   white photo-shadow (built for a DARK hero). On the Clean Editorial light skin
   that reads faint over a bright hero top, so use the deeper rose and drop the
   light shadow for legibility. */
.hp .site-header .main-title a,
.hp .site-header .site-title a {
  color: var(--hp-gold-dark) !important;
  text-shadow: none;
}
.hp .site-header .main-title a:hover,
.hp .site-header .site-title a:hover {
  color: var(--hp-gold) !important;
}

/* Age-gate modal on light */
.hp-age-gate__modal {
  background: var(--hp-bg-surface);
  color: var(--hp-text);
  box-shadow: var(--hp-shadow-raised);
}
.hp-age-gate__title { color: var(--hp-text); }
.hp-age-gate__body  { color: var(--hp-text-muted); }