/* Editor helpers for Classic Editor: Infobox and Columns
   These styles are loaded both in admin (editor) and on the frontend. */

/* Color tokens (keep in sync with _colors.scss) */
:root{
  --cs-primary:#1A3B8B;
  --cs-secondary:#F7931A;
  --cs-accent:#6193C9;
  --cs-accent20:#E4EBF4;
  --cs-light:#F3F4F9;
  --cs-white:#FFFFFF;
  --cs-dark:#0F132A;
  --cs-gray40:#AAB6C4;
  --cs-gray70:#475C75;
}

/* ========== Infobox ==========
   Usage: <div class="cs-infobox cs-infobox--primary">...</div> */
.cs-infobox{
  position: relative;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--cs-light);
  color: var(--cs-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  line-height: 1.6;
}
.cs-infobox p{ margin: 0 0 0.75em; }
.cs-infobox p:last-child{ margin-bottom: 0; }
.cs-infobox a{ color: inherit; text-decoration: underline; }
.cs-infobox strong{ font-weight: 700; }

/* Color variants */
.cs-infobox--primary{ background: color-mix(in oklab, var(--cs-primary) 12%, #fff); border-color: color-mix(in oklab, var(--cs-primary) 24%, #fff); }
.cs-infobox--secondary{ background: color-mix(in oklab, var(--cs-secondary) 14%, #fff); border-color: color-mix(in oklab, var(--cs-secondary) 28%, #fff); }
.cs-infobox--accent{ background: color-mix(in oklab, var(--cs-accent) 14%, #fff); border-color: color-mix(in oklab, var(--cs-accent) 28%, #fff); }
.cs-infobox--light{ background: var(--cs-light); border-color: var(--cs-gray40); }

/* Add subtle left stripe for emphasis */
.cs-infobox::before{
  content:"";
  position:absolute; inset: 0 auto 0 0; width:6px; border-radius: 14px 0 0 14px; background: rgba(0,0,0,0.06);
}
.cs-infobox--primary::before{ background: var(--cs-primary); }
.cs-infobox--secondary::before{ background: var(--cs-secondary); }
.cs-infobox--accent::before{ background: var(--cs-accent); }
.cs-infobox--light::before{ background: var(--cs-gray40); }

/* Heading inside infobox */
.cs-infobox h3,.cs-infobox h4{ margin-top:0; margin-bottom:8px; line-height:1.3; }

/* ========== Columns ==========
   Usage: <div class="cs-columns" data-cols="2|3|4"><div class="cs-col">...</div>...</div> */
.cs-columns{
  display: grid;
  gap: 20px;
}
.cs-columns[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cs-columns[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.cs-columns[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Mobile stacking */
@media (max-width: 899px){
  .cs-columns{ grid-template-columns: 1fr !important; }
}

.cs-columns .cs-col{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* Ensure nested text spacing feels nice */
.cs-columns .cs-col p{ margin: 0 0 0.8em; }
.cs-columns .cs-col p:last-child{ margin-bottom: 0; }

/* Editor iframe defaults occasionally strip grid gaps; ensure visible */
.mce-content-body .cs-columns{ gap: 16px; }

/* High-contrast mode consideration */
@media (forced-colors: active){
  .cs-infobox, .cs-columns .cs-col{ border: 1px solid CanvasText; box-shadow: none; }
}


/* ========== Eyebrow ==========
   Simple helper to preview eyebrow text inside Classic Editor and frontend */
.wp-admin .eyebrow{
  color: var(--cs-accent);
  font-weight: 500;
  margin-bottom: 16px;
  display: block;
  font-size: 20px;
}