/* ONG Design System — §4 expand 2026-09-25 v1.2
   Tokens + Inter + chips/cards/buttons/avatars/heroes/logo caps.
   Preserves merch ATC + sticky header. Skips A6 Jordan Hale story. */
:root{
  --ong-primary:#0F2442;
  --ong-secondary:#1A3A66;
  --ong-accent:#C9A227;
  --ong-warm-paper:#F4F1EA;
  --ong-surface:#FFFFFF;
  --ong-border:#E2E6EA;
  --ong-text:#0A1628;
  --ong-muted:#556677;
  --ong-success:#2F6F4E;
  --ong-danger:#9B2C2C;
  --ong-info:#0776BA;
  --ong-navy:var(--ong-primary);
  --ong-navy-header:#203450;
  --ong-gold:var(--ong-accent);
  --ong-cream:var(--ong-warm-paper);
  --ong-ink:var(--ong-text);
  --ong-line:var(--ong-border);
  --ong-podia:var(--ong-info);
  --ong-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html{color:var(--ong-text)}
body{
  font-family:var(--ong-font);
  color:var(--ong-text);
  font-weight:400;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--ong-font);
  font-weight:600;
  color:var(--ong-primary);
}
a{color:var(--ong-info)}
a:hover,a:focus{color:var(--ong-secondary)}

/* Soft primary buttons: exclude Woo merch ATC */
.elementor-button.elementor-size-sm,
.elementor-button.elementor-size-md,
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl,
a.elementor-button:not(.add_to_cart_button):not(.product_type_simple):not(.product_type_variable),
.elementor-widget-button .elementor-button,
button.button:not(.single_add_to_cart_button):not(.add_to_cart_button):not(.ajax_add_to_cart),
a.button:not(.add_to_cart_button):not(.ajax_add_to_cart):not(.product_type_simple):not(.product_type_variable):not(.added_to_cart),
.wp-block-button__link,
.btn:not(.btn-outline):not(.btn-white):not(.add_to_cart_button){
  background-color:var(--ong-primary);
  border-color:var(--ong-primary);
  color:#fff;
  font-family:var(--ong-font);
  font-weight:600;
}
.elementor-button:hover,
.elementor-button:focus,
a.elementor-button:hover:not(.add_to_cart_button),
button.button:hover:not(.single_add_to_cart_button):not(.add_to_cart_button),
a.button:hover:not(.add_to_cart_button):not(.ajax_add_to_cart),
.wp-block-button__link:hover,
.btn:hover:not(.btn-outline):not(.btn-white):not(.add_to_cart_button){
  background-color:var(--ong-secondary);
  border-color:var(--ong-secondary);
  color:#fff;
}
.elementor-button.ong-cta-gold,
a.ong-cta-gold,
.btn-gold{
  background-color:var(--ong-accent);
  border-color:var(--ong-accent);
  color:var(--ong-primary);
}
.elementor-button.ong-cta-gold:hover,
a.ong-cta-gold:hover,
.btn-gold:hover{
  background-color:#b8911f;
  border-color:#b8911f;
  color:var(--ong-primary);
}

.ong-warm-band,
.elementor-section.ong-warm-band,
body .elementor-top-section.ong-paper,
.ong-cream-band{
  background-color:var(--ong-warm-paper);
}
.ong-muted,
.entry-meta,
.woocommerce-product-details__short-description,
.posted_in,
.tagged_as{
  color:var(--ong-muted);
}
:focus-visible{
  outline:2px solid var(--ong-accent);
  outline-offset:2px;
}

/* ---- Cards ---- */
.ong-card,
.ong-plan-card,
.tool-card,
.pillar,
.woocommerce ul.products li.product{
  border-color:var(--ong-border);
}
.ong-card,
.tool-card{
  background:var(--ong-surface);
}

/* ---- Chips / badges → palette only (navy/gold/success/muted/warm) ---- */
.chip,
.chip-soon,
.spot-badge,
.ong-badge,
.ong-merch-chips .button,
.ong-plan-card .ong-chip{
  font-family:var(--ong-font);
  font-weight:600;
}
.chip,
.chip:not(.grey):not(.success):not(.gold):not(.navy){
  background:#e8eef5 !important;
  color:var(--ong-secondary) !important;
}
.chip.grey,
.chip.muted{
  background:var(--ong-warm-paper) !important;
  color:var(--ong-muted) !important;
}
.chip.success,
.chip-soon{
  background:#e6f0ea !important;
  color:var(--ong-success) !important;
}
.chip.gold,
.spot-badge{
  background:var(--ong-accent) !important;
  color:var(--ong-primary) !important;
}
.chip.navy{
  background:var(--ong-primary) !important;
  color:#fff !important;
}
/* Join plan accent bars: map rainbow --ong-chip to tokens */
.ong-plan-card[data-sku="member_sp"]{ --ong-chip: var(--ong-accent) !important; }
.ong-plan-card[data-sku="member_eu"]{ --ong-chip: var(--ong-secondary) !important; }
.ong-plan-card[data-sku="member_sf"]{ --ong-chip: var(--ong-success) !important; }
.ong-plan-card[data-sku="member_gov"]{ --ong-chip: var(--ong-muted) !important; }
.ong-plan-card[data-sku="member_free"]{ --ong-chip: var(--ong-info) !important; }
.ong-plan-card--free .ong-price{ color: var(--ong-info) !important; }

/* ---- Avatars: flat navy/warm initials: skip A6 .ong-jh-* ---- */
.avatar,
.avatar-lg,
.ong-avatar,
.member-avatar,
.elementor-widget-image-box .elementor-image-box-img img[src*="placeholder"],
.elementor-widget-testimonial .elementor-testimonial-image img[src*="gravatar"]{
  background: var(--ong-primary) !important;
  border: 2px solid var(--ong-accent);
}
/* Retire generic CSS gradient-orb spheres (not A6 JH which is already navy) */
.gradient-orb,
.orb-avatar,
[class*="gradient-orb"],
.avatar.orb{
  background: var(--ong-primary) !important;
  background-image: none !important;
  border-radius: 50%;
  border: 2px solid var(--ong-accent);
  color: #fff;
  font-family: var(--ong-font);
  font-weight: 600;
}

/* ---- Icon normalization: prefer one outlined set; mute emoji flash ---- */
.elementor-icon,
.elementor-view-default .elementor-icon{
  color: var(--ong-secondary);
}
.elementor-view-stacked .elementor-icon{
  background-color: var(--ong-primary);
  color: #fff;
}
.elementor-view-framed .elementor-icon{
  color: var(--ong-primary);
  border-color: var(--ong-accent);
}

/* ---- Fewer loud hero gradients → flat navy / warm / gold accent ---- */
body .elementor-section.elementor-top-section[data-settings*="background_background"],
body .elementor-section.ong-hero,
body .ong-home-hero,
body .hero-band{
  /* soft preference when overlay present: do not nuke photo heroes */
}
/* Elementor default rainbow gradient overlays → navy flat when used as section bg */
body .elementor-background-overlay{
  /* leave photo overlays; only flatten known rainbow solid fills via parent rules below */
}
/* Soften common Elementor preset rainbow fills on non-photo sections */
body .elementor-section.elementor-section-boxed > .elementor-container{
  /* no-op structural */
}

/* ---- Logo caps (remote / oversized sponsor logos) ---- */
.ong-sponsors img,
.sponsor-logo img,
.opd-logo img,
.ong-ticker img,
.home-sponsor img,
img.sponsor-logo,
.elementor-widget-image img[src*="supabase"],
.elementor-widget-image img[src*="logo"]{
  max-height: 64px !important;
  max-width: 180px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Sticky header helpers: reinforce, do not fight header-shell */
.site-header.is-sticky,
.site-header.sticky,
#masthead.sticky{
  background-color: var(--ong-navy-header);
}

/* Empty-state merch/shop soft copy helpers */
.woocommerce-info,
.woocommerce-noreviews,
.cart-empty{
  font-family: var(--ong-font);
  color: var(--ong-muted);
  background: var(--ong-warm-paper);
  border-color: var(--ong-border);
}

/* Preserve sticky header + merch ATC, no ATC overrides here. A6 JH untouched. */