/*
 * Blog (magazín) article typography.
 *
 * Single source of truth for how article HTML is rendered:
 *   - public article page: <div class="blog-article">{@html body}</div>
 *     (linked from src/routes/(main)/magazin/clanky/[slug]/+page.svelte)
 *   - admin TinyMCE editor: content_css + body class "blog-article"
 *     (src/lib/components/admin/tinymce/AdminTinyMce.svelte)
 *
 * The editor iframe loads no other stylesheet, so every element used by
 * editors must be styled here explicitly (no Tailwind, no preflight).
 * Fonts are declared here too because the iframe doesn't see app.html.
 */

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/open-sans-v43-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('/fonts/open-sans-v43-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	src: url('/fonts/open-sans-v43-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	src: url('/fonts/open-sans-v43-latin_latin-ext-600italic.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/open-sans-v43-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/eb-garamond-v31-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400;
	src: url('/fonts/eb-garamond-v31-latin_latin-ext-italic.woff2') format('woff2');
}

/*
 * MARK: BASE
 */
.blog-article {
	--dd-green: #3a7728;
	--dd-green-hover: #2e5f20;
	--dd-lime: #74b25e;
	--ba-text: #525252; /* neutral-600 */
	--ba-text-strong: #404040; /* neutral-700 */
	--ba-text-muted: #737373; /* neutral-500 */
	--ba-border: #e5e5e5; /* neutral-200 */

	box-sizing: border-box;
	max-width: 42rem;
	margin-inline: auto;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--ba-text);
	overflow-wrap: anywhere;
}

.blog-article * {
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.blog-article {
		font-size: 1.125rem;
	}
}

.blog-article > :first-child {
	margin-top: 0;
}

.blog-article > :last-child {
	margin-bottom: 0;
}

/*
 * MARK: PARAGRAPHS
 */
.blog-article p {
	margin: 1.25em 0;
}

.blog-article strong,
.blog-article b {
	font-weight: 600;
	color: var(--ba-text-strong);
}

/* app.css sets `* { font-style: normal }` globally on the site,
   so italics must be restored explicitly for all descendants */
.blog-article em,
.blog-article i {
	font-style: italic;
}
.blog-article :where(em, i, blockquote, .blog-article-imgDescription, figcaption) * {
	font-style: inherit;
}

/*
 * MARK: HEADINGS
 */
.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 {
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	color: var(--ba-text-strong);
	line-height: 1.3;
	overflow-wrap: break-word;
}

/* app.css sets `* { font-family: 'Open Sans' }`; keep heading children serif */
.blog-article :where(h1, h2, h3, h4, h5, h6) * {
	font-family: inherit;
	color: inherit;
}

.blog-article h1 {
	font-size: 2.1em;
	line-height: 1.25;
	margin: 1em 0 0.6em;
}

.blog-article h2 {
	font-size: 1.7em;
	margin: 1.75em 0 0.6em;
}

.blog-article h3 {
	font-size: 1.4em;
	margin: 1.6em 0 0.5em;
}

.blog-article h4 {
	font-size: 1.2em;
	margin: 1.5em 0 0.5em;
}

.blog-article h5,
.blog-article h6 {
	font-size: 1.1em;
	margin: 1.5em 0 0.5em;
}

/* tighter gap between consecutive headings */
.blog-article :where(h1, h2, h3, h4) + :where(h2, h3, h4, h5) {
	margin-top: 0.5em;
}

/*
 * MARK: LINKS
 */
.blog-article a {
	color: var(--dd-green);
	text-decoration: underline;
	text-decoration-color: rgba(116, 178, 94, 0.45);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition:
		color 0.15s ease,
		text-decoration-color 0.15s ease;
}

.blog-article a:hover {
	color: var(--dd-green-hover);
	text-decoration-color: currentColor;
}

/*
 * MARK: LISTS
 */
.blog-article ul,
.blog-article ol {
	margin: 1.25em 0;
	padding: 0 0 0 1.5em;
}

.blog-article ul {
	list-style: disc outside;
}

.blog-article ol {
	list-style: decimal outside;
}

.blog-article li {
	margin: 0.5em 0;
	padding-left: 0.25em;
}

.blog-article li::marker {
	color: var(--dd-lime);
}

.blog-article ol > li::marker {
	font-weight: 600;
}

.blog-article li p {
	margin: 0;
}

.blog-article ul ul,
.blog-article ul ol,
.blog-article ol ul,
.blog-article ol ol {
	margin: 0.5em 0;
}

/*
 * MARK: BLOCKQUOTE
 */
.blog-article blockquote {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.5em;
	border-left: 3px solid var(--dd-lime);
	font-family: 'EB Garamond', serif;
	font-style: italic;
	font-size: 1.25em;
	line-height: 1.6;
	color: var(--ba-text-strong);
}

.blog-article blockquote * {
	font-family: inherit;
}

.blog-article blockquote p {
	margin: 0.5em 0;
}

/*
 * MARK: DIVIDER
 */
.blog-article hr {
	width: 4rem;
	height: 3px;
	margin: 3em auto;
	border: 0;
	border-radius: 999px;
	background-color: var(--dd-lime);
}

/*
 * MARK: IMAGES
 */
.blog-article img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1em auto;
}

.blog-article > img {
	margin: 2.5em auto;
}

.blog-article figure {
	margin: 2.5em auto;
}

.blog-article figure img {
	margin: 0 auto;
}

/* image caption — "Popis obrázka" format in the editor */
.blog-article .blog-article-imgDescription,
.blog-article figcaption {
	margin: -1.75em 0 2.5em;
	font-size: 0.875em;
	font-style: italic;
	line-height: 1.6;
	color: var(--ba-text-muted);
	text-align: center;
}

.blog-article figcaption {
	margin-top: 0.75em;
	margin-bottom: 0;
}

.blog-article .blog-article-imgDescription p {
	margin: 0;
}

/* caption block that contains the image itself: don't pull it upwards */
.blog-article .blog-article-imgDescription:has(img) {
	margin-top: 2.5em;
}

.blog-article .blog-article-imgDescription img {
	margin: 0 auto 0.9em;
}

/*
 * MARK: FAQ BLOCKS
 */
.blog-article .blog-article-faqQuestion {
	margin: 1.75em 0 0.5em;
	font-weight: 600;
	color: var(--ba-text-strong);
}

.blog-article .blog-article-faqAnswer {
	margin: 0 0 1.75em;
}

.blog-article .blog-article-faqQuestion p {
	margin: 0;
}

.blog-article .blog-article-faqAnswer p {
	margin: 0 0 0.75em;
}

.blog-article .blog-article-faqAnswer p:last-child {
	margin-bottom: 0;
}

/*
 * MARK: TABLES
 */
.blog-article table {
	width: 100%;
	margin: 2em 0;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.6;
}

.blog-article th {
	padding: 0.6em 0.75em;
	border-bottom: 2px solid var(--dd-lime);
	font-weight: 600;
	color: var(--ba-text-strong);
	text-align: left;
	vertical-align: bottom;
}

.blog-article td {
	padding: 0.6em 0.75em;
	border-bottom: 1px solid var(--ba-border);
	vertical-align: top;
}

.blog-article tbody tr:nth-child(even) {
	background-color: #fafafa;
}

.blog-article table p {
	margin: 0;
}

/*
 * MARK: EMBEDS
 */
.blog-article iframe,
.blog-article video {
	display: block;
	max-width: 100%;
	margin: 2.5em auto;
	border: 0;
}

.blog-article iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}