/* ============================================================
   EDITOR.CSS — стилі всередині CKEditor 5
   Підключається через school_gov.libraries.yml як ckeditor5-stylesheets
   ============================================================ */

/* Базовий шрифт редактора */
.ck-content {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #1a2340;
}

/* ── ЗАГОЛОВКИ ─────────────────────────────────────────── */
.ck-content h2 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #1B3D8F;
  margin: 1.5rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 3px solid #F5A800;
}
.ck-content h3 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1B3D8F;
  margin: 1.25rem 0 .6rem;
  padding-left: 12px;
  border-left: 4px solid #F5A800;
}
.ck-content h4 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2E57C5;
  margin: 1rem 0 .5rem;
}

/* ── ПАРАГРАФИ ─────────────────────────────────────────── */
.ck-content p {
  margin: 0 0 .8rem;
  line-height: 1.75;
}

/* ── СПИСКИ ────────────────────────────────────────────── */
.ck-content ul,
.ck-content ol {
  margin: .5rem 0 1rem 1.5rem;
  padding: 0;
}
.ck-content ul li,
.ck-content ol li {
  margin-bottom: .4rem;
  line-height: 1.7;
}
.ck-content ul li::marker { color: #F5A800; }
.ck-content ol li::marker { color: #1B3D8F; font-weight: 700; }

/* ── ПОСИЛАННЯ ─────────────────────────────────────────── */
.ck-content a {
  color: #1B3D8F;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ck-content a:hover { color: #F5A800; }

/* ── ФОТО БЕЗ ПІДПИСУ ──────────────────────────────────── */
.ck-content figure.image figcaption { display: none !important; }
.ck-content figure.image { margin: 1rem 0; }
.ck-content figure.image img {
  max-width: 100%;
  border-radius: 8px;
}
/* Вирівнювання фото */
.ck-content figure.image.image-style-align-left {
  float: left;
  margin: .5rem 1.5rem 1rem 0;
  max-width: 45%;
}
.ck-content figure.image.image-style-align-right {
  float: right;
  margin: .5rem 0 1rem 1.5rem;
  max-width: 45%;
}
.ck-content figure.image.image-style-align-center { margin: 1rem auto; }

/* ── ТАБЛИЦІ ────────────────────────────────────────────── */
.ck-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .94rem;
  border-radius: 8px;
  overflow: hidden;
}
.ck-content table th {
  background: #1B3D8F;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: .6rem 1rem;
  text-align: left;
}
.ck-content table td {
  padding: .55rem 1rem;
  border-bottom: 1px solid rgba(27,61,143,.1);
  color: #2a3557;
}
.ck-content table tr:nth-child(even) td { background: rgba(27,61,143,.04); }
.ck-content table tr:hover td { background: rgba(245,168,0,.08); }

/* Таблиця — мінімальний стиль */
.ck-content table.table-minimal th {
  background: #EEF1F9;
  color: #1B3D8F;
}
.ck-content table.table-minimal td {
  border: 1px solid rgba(27,61,143,.15);
}

/* ── БЛОК ВИДІЛЕНИЙ ─────────────────────────────────────── */
.ck-content .block-highlight {
  background: #EEF1F9;
  border-left: 5px solid #1B3D8F;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: #1a2340;
}

/* ── БЛОК ВАЖЛИВО ───────────────────────────────────────── */
.ck-content .block-important {
  background: #FFF8E7;
  border-left: 5px solid #F5A800;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.ck-content .block-important::before {
  content: '★ Важливо!';
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #D98D00;
  margin-bottom: .4rem;
  letter-spacing: .05em;
}

/* ── БЛОК УВАГА ─────────────────────────────────────────── */
.ck-content .block-warning {
  background: #FEF0F0;
  border-left: 5px solid #c0392b;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.ck-content .block-warning::before {
  content: '⚠ Увага!';
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  color: #c0392b;
  margin-bottom: .4rem;
  letter-spacing: .05em;
}

/* ── ЦИТАТА ─────────────────────────────────────────────── */
.ck-content blockquote,
.ck-content .block-quote {
  border: none;
  border-left: 4px solid #2E57C5;
  background: #f0f4fc;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  font-style: italic;
  color: #2a3557;
  font-size: 1.05rem;
}

/* ── КАРТКА З ТІННЮ ─────────────────────────────────────── */
.ck-content .block-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 2px 16px rgba(27,61,143,.1);
  border: 1px solid rgba(27,61,143,.08);
}

/* ── КНОПКА-ПОСИЛАННЯ ───────────────────────────────────── */
.ck-content a.btn-primary {
  display: inline-block;
  background: #1B3D8F;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none !important;
  margin: .5rem 0;
  transition: background .2s;
}
.ck-content a.btn-accent {
  display: inline-block;
  background: #F5A800;
  color: #122A6B !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.5rem;
  border-radius: 6px;
  text-decoration: none !important;
  margin: .5rem 0;
}

/* ── ВІДЕО YouTube ──────────────────────────────────────── */
.ck-content .media,
.ck-content figure.media {
  margin: 1rem 0;
  border-radius: 10px;
  overflow: hidden;
}
.ck-content .media iframe,
.ck-content figure.media iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 10px;
}

/* ── ГОРИЗОНТАЛЬНА ЛІНІЯ ────────────────────────────────── */
.ck-content hr {
  border: none;
  border-top: 2px solid rgba(27,61,143,.15);
  margin: 1.5rem 0;
}

/* Clearfix після float */
.ck-content::after {
  content: '';
  display: table;
  clear: both;
}

/* ============================================================
   СТИЛІ ДЛЯ ПЛАГІНУ STYLE (CKEditor 5)
   Додати в кінець css/components.css і css/editor.css
   ============================================================ */

/* ── РОЗМІРИ ШРИФТУ ─────────────────────────────────────── */
.text-tiny   { font-size: 0.75rem !important; line-height: 1.6; }
.text-small  { font-size: 0.875rem !important; line-height: 1.65; }
.text-normal { font-size: 1rem !important; line-height: 1.75; }
.text-large  { font-size: 1.2rem !important; line-height: 1.7; }
.text-huge   { font-size: 1.5rem !important; line-height: 1.5; font-weight: 600; }

/* ── КОЛЬОРИ ТЕКСТУ ─────────────────────────────────────── */
.text-blue       { color: #1B3D8F !important; }
.text-blue-light { color: #2E57C5 !important; }
.text-yellow     { color: #D98D00 !important; }
.text-green      { color: #2E7D32 !important; }
.text-red        { color: #c0392b !important; }
.text-gray       { color: #667788 !important; }
.text-white      { color: #FFFFFF !important; }
.text-dark       { color: #1a2340 !important; }

/* ── КОЛЬОРИ ФОНУ ───────────────────────────────────────── */
.bg-blue-light   { background-color: #EEF1F9 !important; padding: .2em .4em; border-radius: 4px; }
.bg-yellow-light { background-color: #FFF8E7 !important; padding: .2em .4em; border-radius: 4px; }
.bg-red-light    { background-color: #FEF0F0 !important; padding: .2em .4em; border-radius: 4px; }
.bg-green-light  { background-color: #EAF3DE !important; padding: .2em .4em; border-radius: 4px; }
.bg-blue         { background-color: #1B3D8F !important; color: #fff !important; padding: .2em .4em; border-radius: 4px; }
.bg-yellow       { background-color: #F5A800 !important; color: #122A6B !important; padding: .2em .4em; border-radius: 4px; }
.bg-green        { background-color: #4A7C3F !important; color: #fff !important; padding: .2em .4em; border-radius: 4px; }
.bg-red          { background-color: #c0392b !important; color: #fff !important; padding: .2em .4em; border-radius: 4px; }

/* ── БЛОКИ (paragraph) ──────────────────────────────────── */
p.block-highlight {
  background: #EEF1F9;
  border-left: 5px solid #1B3D8F;
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.25rem !important;
  margin: .8rem 0 !important;
}
p.block-important {
  background: #FFF8E7;
  border-left: 5px solid #F5A800;
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.25rem !important;
  margin: .8rem 0 !important;
}
p.block-important::before {
  content: '★ Важливо! ';
  font-weight: 700;
  color: #D98D00;
}
p.block-warning {
  background: #FEF0F0;
  border-left: 5px solid #c0392b;
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.25rem !important;
  margin: .8rem 0 !important;
}
p.block-warning::before {
  content: '⚠ Увага! ';
  font-weight: 700;
  color: #c0392b;
}
p.block-success {
  background: #EAF3DE;
  border-left: 5px solid #4A7C3F;
  border-radius: 0 8px 8px 0;
  padding: .9rem 1.25rem !important;
  margin: .8rem 0 !important;
}
p.block-success::before {
  content: '✓ ';
  font-weight: 700;
  color: #4A7C3F;
}

/* ── КНОПКИ-ПОСИЛАННЯ ───────────────────────────────────── */
a.btn-primary {
  display: inline-block;
  background: #1B3D8F;
  color: #fff !important;
  font-weight: 600;
  padding: .5rem 1.4rem;
  border-radius: 6px;
  text-decoration: none !important;
  margin: .3rem 0;
  transition: background .2s;
}
a.btn-primary:hover { background: #2E57C5; }

a.btn-accent {
  display: inline-block;
  background: #F5A800;
  color: #122A6B !important;
  font-weight: 700;
  padding: .5rem 1.4rem;
  border-radius: 6px;
  text-decoration: none !important;
  margin: .3rem 0;
}
a.btn-accent:hover { background: #D98D00; }

/* ── ТАБЛИЦІ ────────────────────────────────────────────── */
table.table-school th {
  background: #1B3D8F;
  color: #fff;
  font-weight: 600;
  padding: .55rem 1rem;
}
table.table-school td {
  padding: .5rem 1rem;
  border-bottom: 1px solid rgba(27,61,143,.1);
}
table.table-school tr:nth-child(even) td {
  background: rgba(27,61,143,.04);
}
table.table-minimal th {
  background: #EEF1F9;
  color: #1B3D8F;
  font-weight: 600;
  padding: .5rem 1rem;
}
table.table-minimal td {
  padding: .45rem 1rem;
  border: 1px solid rgba(27,61,143,.15);
}