/**
 * wysiwyg-content.css
 * Include this on any front-end page that renders WYSIWYG content.
 * Wrap your output in <div class="wyseditor-content"> like so:
 *   <div class="wyseditor-content"><?= $content ?></div>
 */

/* ─── Images ───────────────────────────────────────────────────── */
.wyseditor-content img                    { max-width: 100%; height: auto; display: block; }
/* Float — text wraps around */
.wyseditor-content img.wyseditor-float-left  { float: left;  margin: 0 20px 20px 0; }
.wyseditor-content img.wyseditor-float-right { float: right; margin: 0 0 20px 20px; }
/* Align — no float, text stays above/below */
.wyseditor-content img.wyseditor-align-left   { float: none; display: block; margin: 8px auto 8px 0; }
.wyseditor-content img.wyseditor-align-center { float: none; display: block; margin: 8px auto; }
.wyseditor-content img.wyseditor-align-right  { float: none; display: block; margin: 8px 0 8px auto; }
/* Clear floats after content */
.wyseditor-content::after { content: ''; display: table; clear: both; }

/* ─── Responsive tables ────────────────────────────────────────── */
.wyseditor-content .wyseditor-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: .75em 0;
}
.wyseditor-content table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
  margin: 0;
}
.wyseditor-content td,
.wyseditor-content th {
  border: 1px solid #cbd5e1;
  padding: 7px 10px;
  min-width: 60px;
  vertical-align: top;
  white-space: nowrap;
}
.wyseditor-content th {
  background: #f1f5f9;
  font-weight: 600;
}

/* ─── Embeds (responsive 16:9, resizable) ──────────────────────── */
/*
 * The editor saves embeds with an inline width% and margin:auto so admins
 * can resize them. On the front end we respect that inline width while
 * capping it at 100% and keeping the wrapper centred.
 */
.wyseditor-content .wyseditor-embed-wrapper {
  max-width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  /* margin-left/right come from the inline style (auto = centred) */
}
.wyseditor-content .wyseditor-ratio-box {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.wyseditor-content .wyseditor-ratio-box iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
/* Hide editor-only elements on the front end */
.wyseditor-content .wyseditor-embed-label { display: none; }

/* ─── Typography ───────────────────────────────────────────────── */
.wyseditor-content p          { margin: 0 0 .75em; }
.wyseditor-content h1         { font-size: 2.1em;  margin: .5em 0 .4em; color: #29569E; }
.wyseditor-content h2         { font-size: 1.7em;  margin: .5em 0 .4em; color: #29569E; }
.wyseditor-content h3         { font-size: 1.4em;  margin: .5em 0 .4em; color: #29569E; }
.wyseditor-content h4         { font-size: 1.2em;  margin: .5em 0 .4em; color: #29569E; }
.wyseditor-content h5         { font-size: 1.05em; margin: .5em 0 .4em; color: #29569E; }
.wyseditor-content h6         { font-size: .95em;  margin: .5em 0 .4em; color: #29569E; font-style: italic; }
.wyseditor-content ul,
.wyseditor-content ol         { margin: 0 0 .75em 1.5em; }
.wyseditor-content blockquote { border-left: 3px solid #93c5fd; padding-left: 12px; color: #555; margin: .75em 0; }
.wyseditor-content hr         { border: none; border-top: 2px solid #e2e8f0; margin: 1.2em 0; }
.wyseditor-content a          { color: #2563eb; }
.wyseditor-content a:hover    { text-decoration: underline; }

/* ─── Buttons ──────────────────────────────────────────────────────
 * Edit these variables to restyle all buttons site-wide.
 * Primary   — main call-to-action colour
 * Secondary — supporting/neutral colour
 * Outline   — border-only, inherits primary colour
 * ─────────────────────────────────────────────────────────────── */
.wyseditor-content .wyseditor-btn-primary,
.wyseditor-content .wyseditor-btn-secondary,
.wyseditor-content .wyseditor-btn-outline {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s, background .15s;
  cursor: pointer;
  margin: 4px 0;
}
.wyseditor-content .wyseditor-btn-primary,
.wyseditor-content .wyseditor-btn-primary:hover   { background: #2563eb; color: #fff; border: 2px solid #2563eb; }
.wyseditor-content .wyseditor-btn-secondary,
.wyseditor-content .wyseditor-btn-secondary:hover { background: #64748b; color: #fff; border: 2px solid #64748b; }
.wyseditor-content .wyseditor-btn-outline,
.wyseditor-content .wyseditor-btn-outline:hover   { background: transparent; color: #2563eb; border: 2px solid #2563eb; }

.wyseditor-content .wyseditor-btn-primary:hover,
.wyseditor-content .wyseditor-btn-secondary:hover,
.wyseditor-content .wyseditor-btn-outline:hover   { opacity: .85; text-decoration: none; }