/* Styles for markup kept from WordPress: block editor classes, the old theme's
   Semantic UI blocks and Rank Math blocks. Loaded only on page and post views.
   alignleft/alignright and has-text-align-* are physical on purpose: that is
   what the stored content means, in every language. */

.prose--wide { max-width: 1100px; }
.prose--wide > :where(p, ul, ol, h2, h3, h4, h5, h6, blockquote, pre, .wp-block-rank-math-toc-block, .wp-block-rank-math-faq-block, .wp-block-rank-math-howto-block, .wp-block-buttons, .wp-block-embed) { max-width: 760px; margin-inline: auto; }
.prose h5, .prose h6 { color: var(--ink); font-size: 17px; font-weight: 800; margin-top: 1.6em; }
.prose hr, .prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: 36px; }
.prose figure { margin-block: 1.4em; }
.prose iframe { border: 0; }

/* Alignment and colour presets */
.prose .has-text-align-center, .prose .text-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }
.prose .has-text-align-left { text-align: left; }
.prose .aligncenter { display: block; margin-inline: auto; text-align: center; }
.prose figure.aligncenter img { margin-inline: auto; display: block; }
.prose .has-red-color { color: var(--red-text); }
.prose .has-white-color { color: var(--white); }
.prose .has-black-color, .prose .has-page-text-color { color: var(--ink); }
.prose .has-grey-color { color: var(--body); }
.prose .has-small-font-size { font-size: 14px; }
.prose .has-medium-font-size { font-size: 20px; }
.prose .has-large-font-size { font-size: 26px; }
.prose .uppercase { text-transform: uppercase; }
.prose .img-fluid { max-width: 100%; height: auto; }
.prose .mb-20 { margin-bottom: 20px; }
.prose .mb-30 { margin-bottom: 30px; }
.prose .pt-50 { padding-top: 32px; }
@media (min-width: 700px) {
  .prose .alignleft { float: left; max-width: 46%; margin: 6px 28px 16px 0; }
  .prose .alignright { float: right; max-width: 46%; margin: 6px 0 16px 28px; }
}
.prose::after { content: ""; display: block; clear: both; }

/* Block editor layout */
.prose .wp-block-columns, .prose .ui.grid > .row, .prose .ui.grid:not(:has(> .row)) { display: flex; flex-wrap: wrap; gap: 24px 32px; }
.prose .ui.grid:has(> .row) { display: flex; flex-direction: column; gap: 32px; }
.prose .wp-block-column, .prose .ui.grid .column { flex: 1 1 260px; min-width: 0; }
.prose .wp-block-column > * + *, .prose .ui.grid .column > * + *, .prose .ui.card > .content > * + *, .prose .wp-block-group > * + * { margin-top: 1em; }
.prose .is-vertically-aligned-center { align-self: center; }
.prose .is-vertically-aligned-bottom { align-self: flex-end; }
.prose .wp-block-group.has-background, .prose p.has-background { padding: 24px; }
.prose .wp-block-spacer { height: 28px !important; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .wp-block-button.aligncenter { text-align: center; }
.prose .wp-block-image img { height: auto; }
.prose .wp-element-caption, .prose figcaption { margin-top: 8px; font-size: 14px; text-align: center; }
.prose .wp-block-embed { margin-inline: auto; }
.prose .wp-block-embed__wrapper iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose .wp-block-table.is-style-stripes tr:nth-child(odd) td { background: var(--grey); }
.prose .wp-block-cover { position: relative; padding: 32px 24px; background: var(--hero); color: var(--white); }
.prose .wp-block-cover img { display: none; }
.prose .wp-block-social-links { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; }

/* Rank Math: table of contents, questions, how-to steps */
.prose .wp-block-rank-math-toc-block { padding: 24px; background: var(--grey); font-size: 16px; }
.prose .wp-block-rank-math-toc-block ul { margin: 0; padding-inline-start: 1.2em; }
.prose .wp-block-rank-math-toc-block > nav > ul { padding-inline-start: 1.1em; }
.prose .wp-block-rank-math-toc-block li + li, .prose .wp-block-rank-math-toc-block li > ul { margin-top: 6px; }
.prose .wp-block-rank-math-toc-block a { color: var(--ink); font-weight: 600; }
.prose .rank-math-faq-item, .prose .rank-math-howto-step { padding-block: 20px; border-top: 1px solid var(--line); }
.prose .rank-math-faq-item:last-child, .prose .rank-math-howto-step:last-child { border-bottom: 1px solid var(--line); }
.prose .rank-math-question, .prose .rank-math-howto-title { margin: 0 0 8px; font-size: 20px; }

/* Old theme (Semantic UI) blocks */
.prose .ui.container { max-width: 100%; }
.prose .ui.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.prose .ui.card { background: var(--white); box-shadow: 0 12px 40px rgba(29, 29, 33, 0.1); }
.prose .ui.card > .content { padding: 24px; }
.prose .ui.button { display: inline-block; padding: 16px 28px; background: var(--ink); color: var(--white); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; }
.prose .ui.button:hover { background: var(--red); color: var(--ink); }
.prose .ui.statistic { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.prose .ui.statistic > .value { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.prose .ui.red.statistic > .value { color: var(--red-text); }
.prose .ui.statistic > .label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.prose .ui.accordion:empty { display: none; }

/* The old theme drew icons with an icon font that is not loaded here. */
.prose i.icon, .prose i.fa { display: none; }
.prose a > i.linkedin.icon, .prose a > i.mail.icon, .prose a > i.fa-linkedin, .prose a > i.fa-envelope { display: inline-block; font-style: normal; font-size: 14px; font-weight: 700; }
.prose a > i.linkedin.icon::before, .prose a > i.fa-linkedin::before { content: "LinkedIn"; }
.prose a > i.mail.icon::before, .prose a > i.fa-envelope::before { content: "E-mail"; }

/* Team cards of the old theme */
.prose .kteam { padding: 24px; background: var(--grey); text-align: center; }
.prose .kteam-img img { width: 160px; max-width: 100%; height: auto; }
.prose .kteam-title { font-size: 20px; font-weight: 800; color: var(--ink); }
.prose .kteam-img-social { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
[dir="rtl"] .prose .ui.button, [dir="rtl"] .prose .ui.statistic > .label { letter-spacing: 0; }