/* ===========================================================================
   Nashville Media Knowledge Base — shared styling.

   Palette and type are inherited from the workshop site so this reads as the
   same company. Tuned down for reading: gold is reserved for status and the
   primary action, not decoration.
   =========================================================================== */

:root{
  --bg:#050607;
  --panel:rgba(255,255,255,.035);
  --panel-hover:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --border-soft:rgba(255,255,255,.07);
  --text:#EDEFF2;
  --muted:rgba(237,239,242,.72);
  --muted2:rgba(237,239,242,.50);
  --gold:#d6b35b;
  --gold-dim:rgba(214,179,91,.14);
  --gold-line:rgba(214,179,91,.40);
  --radius:18px;
  --radius-sm:12px;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --maxw:760px;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:inherit;}

.kb-container{
  width:min(var(--maxw), calc(100% - 40px));
  margin:0 auto;
}

/* --- Header ---------------------------------------------------------------
   Deliberately NOT the public site header. No links out to nashvillemedia.org.
   This is an internal tool and should not read as a page of the marketing site.
   ------------------------------------------------------------------------- */

.kb-header{
  border-bottom:1px solid var(--border-soft);
  padding:14px 0;
  position:sticky;
  top:0;
  background:rgba(5,6,7,.86);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  z-index:50;
}

.kb-headerInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.kb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-height:44px;
}

/* Pushes every header link to the right as one group, so adding a second
   link does not spread them across the bar. */
.kb-brand{margin-right:auto;}

.kb-brand img{height:26px;width:auto;display:block;}

.kb-brandText{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}

.kb-headerLink{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted2);
  text-decoration:none;
  padding:10px 4px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color .18s ease;
}

.kb-headerLink:hover,.kb-headerLink:focus-visible{color:var(--text);}

.kb-headerLink .kb-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  margin-left:7px;
}

main{flex:1 0 auto;}

/* --- Ask ---------------------------------------------------------------- */

.kb-ask{padding:clamp(38px,9vw,84px) 0 clamp(26px,5vw,44px);}

.kb-askTitle{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,7vw,46px);
  line-height:1.12;
  margin:0 0 12px;
  letter-spacing:-.01em;
}

.kb-askTitle .gold{color:var(--gold);}

.kb-askSub{
  margin:0 0 clamp(24px,5vw,34px);
  color:var(--muted2);
  font-size:clamp(14px,2.4vw,16px);
}

.kb-form{position:relative;display:flex;gap:10px;}

.kb-input{
  flex:1 1 auto;
  min-width:0;
  /* 16px minimum — anything smaller makes iOS zoom the page on focus. */
  font-size:16px;
  font-family:var(--sans);
  font-weight:400;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:17px 18px;
  min-height:56px;
  transition:border-color .18s ease, background .18s ease;
}

.kb-input::placeholder{color:rgba(237,239,242,.38);}

.kb-input:focus{
  outline:none;
  border-color:var(--gold-line);
  background:var(--panel-hover);
}

.kb-submit{
  flex:0 0 auto;
  min-width:56px;
  min-height:56px;
  border-radius:var(--radius);
  border:1px solid var(--gold-line);
  background:var(--gold-dim);
  color:var(--gold);
  font-size:19px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease;
}

.kb-submit:hover,.kb-submit:focus-visible{background:rgba(214,179,91,.24);}

/* --- Categories --------------------------------------------------------- */

.kb-sectionLabel{
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted2);
  margin:0 0 14px;
}

.kb-cats{padding-bottom:clamp(40px,8vw,72px);}

.kb-catList{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--border-soft);
}

.kb-catList li{border-bottom:1px solid var(--border-soft);}

.kb-cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px 2px;
  min-height:44px;
  text-decoration:none;
  color:var(--text);
  font-size:15px;
  font-weight:400;
  transition:padding-left .18s ease, color .18s ease;
}

.kb-cat:hover,.kb-cat:focus-visible{padding-left:8px;color:var(--gold);}

.kb-catCount{
  font-size:12px;
  color:var(--muted2);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}

.kb-cat[data-empty="true"]{color:var(--muted2);}
.kb-cat[data-empty="true"]:hover{color:var(--muted);}

/* --- Answer ------------------------------------------------------------- */

.kb-results{
  padding-bottom:clamp(40px,8vw,72px);
  /* The header is sticky, so an un-offset scrollIntoView tucks the answer's
     title underneath it. */
  scroll-margin-top:74px;
}

.kb-answer{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(20px,4.5vw,30px);
  background:var(--panel);
  margin-bottom:18px;
}

.kb-answerHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.kb-answerTitle{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(20px,4vw,26px);
  line-height:1.25;
  margin:0;
}

/* Confidence chips. Only Core Standard gets gold — if everything is
   highlighted, nothing is. */
.kb-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid var(--border);
  color:var(--muted2);
  flex:0 0 auto;
}

.kb-chip[data-level="core"]{
  border-color:var(--gold-line);
  background:var(--gold-dim);
  color:var(--gold);
}

.kb-chip[data-level="established"]{
  border-color:rgba(255,255,255,.22);
  color:var(--text);
}

.kb-chip .kb-chipDot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85;}

.kb-body{color:var(--muted);font-size:15.5px;}
.kb-body p{margin:0 0 14px;}
.kb-body p:last-child{margin-bottom:0;}
.kb-body ul,.kb-body ol{margin:0 0 14px;padding-left:22px;}
.kb-body li{margin-bottom:7px;}
.kb-body li::marker{color:var(--muted2);}
.kb-body strong{color:var(--text);font-weight:600;}
.kb-body h3{
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  margin:22px 0 10px;
}
.kb-body code{
  font-size:.9em;
  background:rgba(255,255,255,.07);
  padding:2px 6px;
  border-radius:5px;
}
.kb-body blockquote{
  margin:0 0 14px;
  padding:2px 0 2px 16px;
  border-left:2px solid var(--gold-line);
  color:var(--text);
  font-style:italic;
}
.kb-body a{color:var(--gold);}

/* Tables. A price list must never push the page sideways on a phone, so the
   table scrolls inside its own box rather than widening the layout. */
.kb-body table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:0 0 16px;
  font-size:14.5px;
  -webkit-overflow-scrolling:touch;
}
.kb-body thead th{
  text-align:left;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted2);
  padding:0 16px 9px 0;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.kb-body tbody td{
  padding:11px 16px 11px 0;
  border-bottom:1px solid var(--border-soft);
  vertical-align:top;
  color:var(--muted);
}
.kb-body tbody tr:last-child td{border-bottom:none;}
.kb-body tbody td:last-child{padding-right:0;white-space:nowrap;}
.kb-body tbody td strong{color:var(--gold);font-weight:600;}

/* --- "Why this answer?" ------------------------------------------------- */

.kb-why{
  margin-top:20px;
  border-top:1px solid var(--border-soft);
  padding-top:16px;
}

.kb-why summary{
  cursor:pointer;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted2);
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  transition:color .18s ease;
}

.kb-why summary::-webkit-details-marker{display:none;}
.kb-why summary:hover{color:var(--text);}

.kb-why summary::before{
  content:"+";
  font-size:14px;
  color:var(--gold);
  width:14px;
  display:inline-block;
}

.kb-why[open] summary::before{content:"\2013";}

.kb-whyBody{padding:6px 0 4px;}

.kb-meta{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
}

.kb-meta li{
  display:flex;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
  align-items:baseline;
}

.kb-meta li:last-child{border-bottom:none;}

.kb-metaKey{
  flex:0 0 108px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted2);
}

.kb-metaVal{flex:1 1 auto;color:var(--muted);min-width:0;}
.kb-metaVal a{color:var(--gold);}

/* --- Related / links ---------------------------------------------------- */

.kb-linkRow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  color:var(--gold);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}

.kb-linkRow:hover{text-decoration:underline;}

.kb-related{margin-top:26px;}

/* --- Empty / honest states ---------------------------------------------- */

.kb-empty{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  padding:clamp(22px,5vw,32px);
  text-align:left;
}

.kb-empty h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(18px,3.6vw,22px);
  margin:0 0 10px;
}

.kb-empty p{margin:0 0 12px;color:var(--muted2);font-size:14.5px;}
.kb-empty p:last-child{margin-bottom:0;}

/* --- Article page ------------------------------------------------------- */

.kb-article{padding:clamp(28px,6vw,52px) 0 clamp(48px,9vw,80px);}

.kb-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--muted2);
  text-decoration:none;
  min-height:44px;
  margin-bottom:8px;
}

.kb-back:hover{color:var(--text);}

.kb-articleTitle{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,5.6vw,38px);
  line-height:1.16;
  margin:0 0 14px;
}

.kb-articleMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:clamp(24px,5vw,36px);
  padding-bottom:clamp(20px,4vw,28px);
  border-bottom:1px solid var(--border-soft);
}

.kb-eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted2);
}

.kb-section{margin-bottom:clamp(26px,5vw,38px);}

.kb-sectionHeading{
  font-family:var(--sans);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px;
}

/* --- Review page -------------------------------------------------------- */

.kb-review{padding:clamp(28px,6vw,52px) 0 clamp(48px,9vw,80px);}

.kb-reviewSummary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin-bottom:clamp(30px,6vw,44px);
}

.kb-stat{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:16px;
}

.kb-statNum{
  font-family:var(--serif);
  font-size:30px;
  line-height:1;
  display:block;
  margin-bottom:7px;
}

.kb-statNum[data-zero="true"]{color:var(--muted2);}
.kb-statNum[data-zero="false"]{color:var(--gold);}

.kb-statLabel{
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted2);
}

.kb-item{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  margin-bottom:10px;
}

.kb-itemTitle{
  font-size:15px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--text);
}

/* --- Footer ------------------------------------------------------------- */

.kb-footer{
  border-top:1px solid var(--border-soft);
  padding:22px 0 30px;
  margin-top:auto;
}

.kb-footerText{
  font-size:11.5px;
  color:var(--muted2);
  line-height:1.7;
  margin:0;
}

.kb-footerText strong{color:var(--muted);font-weight:600;}

.kb-srOnly{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

@media (max-width:520px){
  .kb-metaKey{flex-basis:88px;}
  .kb-meta li{gap:10px;}
  .kb-brandText{font-size:10px;letter-spacing:.14em;}
}

@media (max-width:380px){
  .kb-brandText{display:none;}
}