/**
 * wysiwyg-content.css
 * Include this on any front-end page that renders WYSIWYG content.
 * Wrap your output like so:
 *   <div class="wyseditor-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; }

/* 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: normal;
}
.wyseditor-content th {
  background: #f1f5f9;
  font-weight: 600;
}

/* Video embeds - width and centering come from the inline style set in the editor */
.wyseditor-content .wyseditor-embed-wrapper {
  max-width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
}
.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 */
.wyseditor-content .wyseditor-embed-label,
.wyseditor-content .wyseditor-shield { 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 colors to restyle all buttons site-wide */
.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   { background: #2563eb; color: #fff; border: 2px solid #2563eb; }
.wyseditor-content .wyseditor-btn-secondary { background: #64748b; color: #fff; border: 2px solid #64748b; }
.wyseditor-content .wyseditor-btn-outline   { 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; }