/*
 * Content area typography — for everything printed via the_content()
 * inside a `.content` wrapper (blog posts, single service/portfolio
 * body, generic pages).
 *
 * Why this file exists: the original template hand-styled every single
 * piece of text with its own custom class (fz-font-lg, neutral-500,
 * h6, etc.). The WordPress block editor instead outputs plain semantic
 * HTML (<h2>, <p>, <ul>, <figure>...), and main.css's *global* h1–h6
 * rules are tuned for big marketing/hero headings (h2 is 60–72px!) —
 * great for section titles, way too large for an in-article subheading.
 * This file gives plain content tags sensible, readable sizing that
 * matches the site's fonts/colors, scoped to `.content` only so it
 * never touches the hero/marketing sections elsewhere on the site.
 */

:where(.content, .editor-styles-wrapper) {
	font-size: 17px;
	line-height: 1.75;
	color: var(--at-neutral-700);
}

:where(.content, .editor-styles-wrapper) > *:first-child {
	margin-top: 0;
}

:where(.content, .editor-styles-wrapper) p {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.75;
	margin-bottom: 1.4em;
	color: var(--at-neutral-700);
}

:where(.content, .editor-styles-wrapper) h1,
:where(.content, .editor-styles-wrapper) h2,
:where(.content, .editor-styles-wrapper) h3,
:where(.content, .editor-styles-wrapper) h4,
:where(.content, .editor-styles-wrapper) h5,
:where(.content, .editor-styles-wrapper) h6 {
	letter-spacing: normal;
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	color: var(--at-neutral-950);
}

:where(.content, .editor-styles-wrapper) h1 { font-size: 38px; }
:where(.content, .editor-styles-wrapper) h2 { font-size: 30px; }
:where(.content, .editor-styles-wrapper) h3 { font-size: 25px; }
:where(.content, .editor-styles-wrapper) h4 { font-size: 21px; }
:where(.content, .editor-styles-wrapper) h5 { font-size: 19px; }
:where(.content, .editor-styles-wrapper) h6 { font-size: 17px; }

@media screen and (min-width: 1401px) {
	:where(.content, .editor-styles-wrapper) h1 { font-size: 44px; }
	:where(.content, .editor-styles-wrapper) h2 { font-size: 34px; }
	:where(.content, .editor-styles-wrapper) h3 { font-size: 28px; }
	:where(.content, .editor-styles-wrapper) h4 { font-size: 23px; }
	:where(.content, .editor-styles-wrapper) h5 { font-size: 20px; }
	:where(.content, .editor-styles-wrapper) h6 { font-size: 18px; }
}

:where(.content, .editor-styles-wrapper) ul,
:where(.content, .editor-styles-wrapper) ol {
	padding-left: 1.3em;
	margin-bottom: 1.4em;
}

:where(.content, .editor-styles-wrapper) li {
	margin-bottom: 0.5em;
	line-height: 1.75;
}

:where(.content, .editor-styles-wrapper) li > ul,
:where(.content, .editor-styles-wrapper) li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

:where(.content, .editor-styles-wrapper) a {
	color: var(--at-theme-primary);
	text-decoration: underline;
	text-decoration-color: rgba(240, 70, 14, 0.35);
	text-underline-offset: 2px;
}

:where(.content, .editor-styles-wrapper) a:hover {
	text-decoration-color: currentColor;
}

:where(.content, .editor-styles-wrapper) strong,
:where(.content, .editor-styles-wrapper) b {
	color: var(--at-neutral-950);
	font-weight: 700;
}

:where(.content, .editor-styles-wrapper) blockquote {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.5em;
	border-left: 3px solid var(--at-theme-primary);
	font-size: 20px;
	font-style: italic;
	color: var(--at-neutral-950);
}

:where(.content, .editor-styles-wrapper) blockquote p:last-child {
	margin-bottom: 0;
}

:where(.content, .editor-styles-wrapper) figure {
	margin: 2em 0;
}

:where(.content, .editor-styles-wrapper) img {
	border-radius: 12px;
}

:where(.content, .editor-styles-wrapper) figcaption {
	margin-top: 0.6em;
	font-size: 13px;
	text-align: center;
	color: var(--at-neutral-500);
}

:where(.content, .editor-styles-wrapper) hr {
	margin: 2.5em 0;
	border: none;
	border-top: 1px solid var(--at-neutral-100);
}

:where(.content, .editor-styles-wrapper) table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

:where(.content, .editor-styles-wrapper) th,
:where(.content, .editor-styles-wrapper) td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--at-neutral-100);
	text-align: left;
}

/* Gutenberg's multi-column / gallery blocks ship their own flex layout
   (from WordPress core's block-library stylesheet) — this just adds a
   comfortable gap and makes sure nested images don't get extra
   bottom-margin from the rule above. */
:where(.content, .editor-styles-wrapper) .wp-block-columns {
	gap: 24px;
	margin-bottom: 1.5em;
}

:where(.content, .editor-styles-wrapper) .wp-block-column > *:last-child {
	margin-bottom: 0;
}

:where(.content, .editor-styles-wrapper) .wp-block-image {
	margin-bottom: 1.5em;
}