/*
 * Portal article content. ONE source for the site and the block editor:
 * includes/portal/editor.php serves this file to the editor with `.sdk-portal-content` replaced by
 * `.editor-styles-wrapper`, so whatever is written here is what the editor shows. Keep every rule scoped to
 * `.sdk-portal-content` and set properties explicitly (font, size, margins, list style, borders) instead of
 * relying on theme or editor defaults, which differ between the two environments.
 */
.sdk-portal-content {
	color: #10233a;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere; /* long tokens/URLs must not widen the page on phones */
}
.sdk-portal-content > :first-child { margin-top: 0; }
.sdk-portal-content > :last-child { margin-bottom: 0; }

/* Text */
.sdk-portal-content p {
	font: 400 16px/28px Montserrat, sans-serif;
	color: #10233a;
	margin: 0 0 16px;
	padding: 0;
}
.sdk-portal-content strong, .sdk-portal-content b { font-weight: 600; }
.sdk-portal-content em, .sdk-portal-content i { font-style: italic; }
.sdk-portal-content a {
	color: #1b55e9;
	text-decoration: none;
	cursor: pointer;
	word-break: break-word;
	border: 0;
	background: none;
}
.sdk-portal-content a:hover, .sdk-portal-content a:focus { color: #1b55e9; text-decoration: underline; }
.sdk-portal-content code, .sdk-portal-content kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1;
	color: #10233a;
	background: #f0f4f8;
	border: 1px solid #e1e8ef;
	border-radius: 4px;
	padding: 2px 6px;
	word-break: break-word;
}
.sdk-portal-content kbd { background: #fff; border-bottom-width: 2px; }
.sdk-portal-content mark { background: #fff3c4; color: inherit; padding: 0 2px; }
.sdk-portal-content sup, .sdk-portal-content sub { font-size: 12px; line-height: 0; }

/* Headings (h1 is the page title, outside the content) */
.sdk-portal-content h2, .sdk-portal-content h3, .sdk-portal-content h4, .sdk-portal-content h5, .sdk-portal-content h6 {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	color: #10233a;
	padding: 0;
	letter-spacing: 0;
	scroll-margin-top: var(--sdk-portal-offset, 24px); /* below the site's fixed header on the front (portal.css) */
}
.sdk-portal-content h2 { font-size: 32px; line-height: 40px; margin: 48px 0 20px; } /* = blog (owner 06.11) */
.sdk-portal-content h3 { font-size: 22px; line-height: 32px; margin: 32px 0 12px; }
.sdk-portal-content h4 { font-size: 18px; line-height: 26px; margin: 24px 0 8px; }
.sdk-portal-content h5, .sdk-portal-content h6 { font-size: 16px; line-height: 24px; margin: 20px 0 8px; }
.sdk-portal-content h2 code, .sdk-portal-content h3 code { font-size: 0.85em; }

/* Lists */
.sdk-portal-content ul, .sdk-portal-content ol {
	font: 400 16px/28px Montserrat, sans-serif;
	color: #10233a;
	margin: 0 0 16px;
	padding: 0 0 0 26px;
}
.sdk-portal-content ul { list-style: disc; }
.sdk-portal-content ol { list-style: decimal; }
.sdk-portal-content ul ul { list-style: circle; }
.sdk-portal-content li {
	font: 400 16px/28px Montserrat, sans-serif;
	margin: 0 0 6px;
	padding: 0;
	position: static;
}
.sdk-portal-content li::before { content: none; }
.sdk-portal-content li > ul, .sdk-portal-content li > ol { margin: 6px 0 0; }
.sdk-portal-content li p { margin: 0; }
.sdk-portal-content li::marker { color: #10233a; }

/* Tables. Core prints per-block styles inline next to the block on the site (after this file), so cell rules carry
   one extra element in the selector to win in both environments. */
.sdk-portal-content table thead { display: table-header-group; border: 0; }
.sdk-portal-content table tbody { display: table-row-group; border: 0; }
.sdk-portal-content table tr { display: table-row; border: 0; background: none; }
.sdk-portal-content .wp-block-table { margin: 0 0 24px; padding: 0; overflow-x: auto; }
.sdk-portal-content table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	font: 400 15px/24px Montserrat, sans-serif;
	color: #10233a;
	border: 0;
}
.sdk-portal-content table th, .sdk-portal-content table td {
	display: table-cell;
	border: 1px solid #d3e1ec;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	font: 400 15px/24px Montserrat, sans-serif;
	word-break: normal;
	min-width: 0;
	height: auto;
}
.sdk-portal-content table th { font-weight: 600; background: #f0f7fd; }
.sdk-portal-content table thead th { border-bottom-width: 2px; }
.sdk-portal-content table td p, .sdk-portal-content table th p { font-size: 15px; line-height: 24px; margin: 0 0 8px; }
.sdk-portal-content table td p:last-child, .sdk-portal-content table th p:last-child { margin: 0; }
.sdk-portal-content table td code { font-size: 13px; }
/* Column widths (owner 06.11): `overflow-wrap: anywhere` (inherited from .sdk-portal-content) and `word-break: break-word`
   (links, code) let the browser break a word anywhere, so the auto table layout counted such columns as almost zero wide
   ("limite|d", "docum|ents"). In tables words wrap only between words, so a column is at least as wide as its longest word
   (overflow-wrap: break-word does not lower that minimum, it only rescues real overflow); long identifiers get soft breaks
   at their joints on output (sdk_portal_table_soft_breaks in includes/portal/frontend.php). */
.sdk-portal-content table, .sdk-portal-content table * { word-break: normal; overflow-wrap: break-word; }
/* Wide tables (5+ columns): tighter cells and 14px text, so six columns still fit the 648px article column. */
.sdk-portal-content table:has(tr > :nth-child(5)) :is(th, td) { padding: 8px 10px; font-size: 14px; line-height: 22px; }
.sdk-portal-content table:has(tr > :nth-child(5)) :is(th, td) p { font-size: 14px; line-height: 22px; }
.sdk-portal-content .wp-block-table.is-style-stripes { border: 0; }
.sdk-portal-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #f7fafd; }
.sdk-portal-content .wp-block-table.is-style-stripes th, .sdk-portal-content .wp-block-table.is-style-stripes td { border: 0; border-bottom: 1px solid #d3e1ec; }
.sdk-portal-content .wp-block-table figcaption, .sdk-portal-content .wp-block-image figcaption, .sdk-portal-content .wp-block-embed figcaption {
	font: 400 14px/20px Montserrat, sans-serif;
	color: #5b6b80;
	text-align: center;
	margin: 8px 0 0;
}

/* Images, video */
.sdk-portal-content .wp-block-image { margin: 0 0 24px; padding: 0; }
/* Click to enlarge (portal.js; linked image files use the site's Fancybox) */
.sdk-portal-content img.is-zoomable, .sdk-portal-content a[data-fancybox] img { cursor: zoom-in; }
.sdk-portal-content img.is-zoomable:focus-visible { outline: 2px solid #1b55e9; outline-offset: 2px; }
.sdk-portal-content .wp-block-image img, .sdk-portal-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid #e1e8ef;
}
.sdk-portal-content .wp-block-image.aligncenter img { margin: 0 auto; }
.sdk-portal-content .wp-block-image.is-style-plain img, .sdk-portal-content img.is-plain { border: 0; border-radius: 0; }
.sdk-portal-content .wp-block-embed { margin: 0 0 24px; }
.sdk-portal-content .wp-block-embed iframe { border-radius: 8px; }
/* scripts.js wraps every YouTube iframe in .video-wrapper (its own 56.25% padding); core's responsive embed already
   reserves the aspect ratio on .wp-block-embed__wrapper::before, so the block came out twice as tall with the video at the bottom. */
.sdk-portal-content .wp-block-embed__wrapper .video-wrapper { position: static; padding: 0; height: auto; margin: 0; }

/* Code block, quote, separator, details */
.sdk-portal-content .wp-block-code {
	background: #f4f7fa;
	border: 1px solid #d3e1ec;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 24px;
	overflow: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 22px;
	color: #10233a;
	white-space: pre;
}
.sdk-portal-content .wp-block-code code {
	display: block;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	white-space: pre;
	word-break: normal;
}
.sdk-portal-content .wp-block-quote {
	border-left: 4px solid #1b55e9;
	background: #f7fafd;
	border-radius: 0 8px 8px 0;
	margin: 0 0 24px;
	padding: 12px 20px;
	font-style: normal;
}
.sdk-portal-content .wp-block-quote p { margin: 0 0 8px; }
.sdk-portal-content .wp-block-quote p:last-child { margin: 0; }
.sdk-portal-content .wp-block-quote cite { display: block; font: 400 14px/20px Montserrat, sans-serif; color: #5b6b80; margin-top: 8px; font-style: normal; }
.sdk-portal-content .wp-block-separator {
	border: 0;
	border-top: 1px solid #d3e1ec;
	height: 0;
	margin: 32px 0;
	width: 100%;
	background: none;
	opacity: 1;
}
.sdk-portal-content .wp-block-details {
	border: 1px solid #d3e1ec;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0 0 16px;
	background: #fff;
}
.sdk-portal-content .wp-block-details summary { font-weight: 600; cursor: pointer; margin: 0; }
.sdk-portal-content .wp-block-details[open] summary { margin-bottom: 8px; }
.sdk-portal-content .wp-block-details > :last-child { margin-bottom: 0; }

/* Callout (sdk/callout block) */
.sdk-portal-content .sdk-callout {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid #c7dbff;
	border-left-width: 4px;
	border-radius: 8px;
	background: #eef4ff;
	padding: 14px 18px;
	margin: 0 0 24px;
	color: #10233a;
}
.sdk-portal-content .sdk-callout::before {
	content: '';
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	background: #1b55e9 center/20px 20px no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 9v5M10 6.2v.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 9v5M10 6.2v.2' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.sdk-portal-content .sdk-callout.is-tip { background: #ebf8f0; border-color: #bfe8cf; }
.sdk-portal-content .sdk-callout.is-tip::before { background-color: #1f9d55; }
.sdk-portal-content .sdk-callout.is-warning { background: #fff7e8; border-color: #f5d9a6; }
.sdk-portal-content .sdk-callout.is-warning::before { background-color: #e0912a; }
.sdk-portal-content .sdk-callout.is-danger { background: #fdeeee; border-color: #f3c0c0; }
.sdk-portal-content .sdk-callout.is-danger::before { background-color: #d64545; }
.sdk-portal-content .sdk-callout__body { flex: 1 1 auto; min-width: 0; }
.sdk-portal-content .sdk-callout__title { font: 600 16px/24px Montserrat, sans-serif; margin: 0 0 4px; }
.sdk-portal-content .sdk-callout__body > p, .sdk-portal-content .sdk-callout__body > ul, .sdk-portal-content .sdk-callout__body > ol { margin-bottom: 8px; }
.sdk-portal-content .sdk-callout__body > :last-child { margin-bottom: 0; }

/*
 * Text scale of the blog (owner 06.11: "make it a bit bigger, like the blog"): body text, lists and tables are 16/28 below
 * 768px and 18/32 from 768px, as .single-post-content. Kept at the end so it wins over the base rules above. The editor
 * canvas is wider than 768px, so it shows the desktop scale, like the article column on a desktop.
 */
@media (min-width: 768px) {
	.sdk-portal-content { font-size: 18px; line-height: 32px; }
	.sdk-portal-content p, .sdk-portal-content ul, .sdk-portal-content ol, .sdk-portal-content li { font-size: 18px; line-height: 32px; }
	.sdk-portal-content p { margin-bottom: 20px; }
	.sdk-portal-content code, .sdk-portal-content kbd { font-size: 15px; }
	.sdk-portal-content table th, .sdk-portal-content table td,
	.sdk-portal-content table td p, .sdk-portal-content table th p { font-size: 16px; line-height: 26px; }
	.sdk-portal-content table td code { font-size: 14px; }
	.sdk-portal-content table:has(tr > :nth-child(5)) :is(th, td),
	.sdk-portal-content table:has(tr > :nth-child(5)) :is(th, td) p { font-size: 14px; line-height: 22px; }
	.sdk-portal-content .sdk-callout__title { font-size: 18px; line-height: 28px; }
	.sdk-portal-content .wp-block-code, .sdk-portal-content .wp-block-code code { font-size: 15px; }
}