/* ==========================================================================
   START HERE THEME (shared) — v1 CLEAN
   File: site-core/themes/start-here-theme.css

   Purpose:
   - Global primitives used by ALL CTE CPT renderers (boring building blocks).
   - ONE pills block only (no duplicates).
   - Pill colors are NOT defined here (they come from pills-colors.php → JSON).

   Notes:
   - Keep this file “primitive-only”.
   - Single-page spacing/layout rules belong in cte-single-base.css.
   ========================================================================== */

:root{
  --cte-max: 1120px;
  --cte-r: 18px;
  --cte-b: rgba(0,0,0,.10);
  --cte-soft: rgba(0,0,0,.04);
  --cte-muted: rgba(0,0,0,.62);
  --cte-ink: rgba(0,0,0,.92);
  --cte-accent: var(--cte-brand-orange); /* CTE orange (used by buttons/accents only) */
}

.cte-theme *{ box-sizing: border-box; }

/* ==========================================================================
   Containers / Cards
   ========================================================================== */

.cte-wrap{
  max-width: var(--cte-max);
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1024.98px){
.cte-wrap{
  padding: 0 clamp(14px,2.4vw,26px) !important;
}
}
.cte-card{
  background: #fff;
  border: 1px solid var(--cte-b);
  border-radius: var(--cte-r);
  overflow: hidden;
  margin-top: -1px 0;
}

.cte-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cte-muted{ color: var(--cte-muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */

/* ==========================================================================
   CTE BUTTON — final alignment fix
   ========================================================================== */

.cte-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* CRITICAL: kill inherited line-height */
  line-height: 1 !important;

  /* Height-driven centering */
  min-height: 52px;
  padding: 0 18px;

  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;

  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  font-size: 14px;

  text-decoration: none !important;
  white-space: nowrap;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}


.cte-btn:hover{ transform: translateY(-1px); }
.cte-btn:active{ transform: translateY(0); }

.cte-btn--primary{
  background: var(--cte-accent);
  border-color: var(--cte-accent);
  color: #fff;
}

/* ==========================================================================
   Pills (chips) — ONE BLOCK ONLY
   - Geometry + alignment only
   - Colors come from JSON generator (themes/pills-colors.php)
   ========================================================================== */

/* Wrapper */
.cte-single__pills{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Pill base (works for <a> or <span>) */
.cte-pill{
  /* reset theme “button/link” styling */
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none !important;
  box-shadow: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* vertical centering */
  padding: 0 12px;
  line-height: 1;

  /* less bubble */
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);

  /* neutral base (JSON will override bg/border/text where applicable) */
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.88);

  font: 800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing: .02em;

  white-space: nowrap;
  max-width: 100%;
}

/* “Label: value” style pill support (used in magazine hero) */
.cte-pill strong{
  font-weight: 900;
  color: rgba(0,0,0,.90);
}

/* Link pills */
.cte-pill--link{
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.cte-pill--link:hover{
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.cte-pill--link:active{
  transform: translateY(0);
}

/* Mobile tightening */
@media (max-width: 520px){
  .cte-single__pills{ gap: 8px; }
  .cte-pill{
    padding: 0 10px;
    font-size: 11px;
  }
}

/* Buttons: kill injected BR + paragraph spacing */
.cte-btn br { display: none !important; }
.cte-mag__actions p { margin: 0 !important; padding: 0 !important; }
.cte-mag__actions p:empty { display: none !important; }

@media (min-width: 1300px){
#main {
  margin-right: calc(-1 * var(--sidebar-shift));
}
}
/* === PILL COLORS: VAR-DRIVEN (cte-vars.css) === */
/* Singles pill colors are handled by themes/cte-pill-drift.css (var-driven drift). */

/* === CTE_PILL_GEOMETRY_FROM_VARS (v1) === */
/* Global pills/chips should use the SAME geometry as Hot Topics + Singles.
   Single source of truth: cte-vars.css (CTE_PILL_GEOMETRY_TOKENS_V1) */

.cte-pill,
a.cte-pill,
.cte-pill--link {
  padding: var(--cte-pill-pad-y, 6px) var(--cte-pill-pad-x, 10px) !important;
  border-radius: var(--cte-pill-radius, 10px) !important;

  font-size: var(--cte-pill-font-size, 12px) !important;
  font-weight: var(--cte-pill-font-weight, 700) !important;
  line-height: var(--cte-pill-line-height, 1) !important;

  border-width: var(--cte-pill-border-width, 1px) !important;

  transition: var(--cte-pill-transition, background-color .14s ease, border-color .14s ease, color .14s ease) !important;
}