/* StudioFlicks — content-typography.css
   ══════════════════════════════════════════════════════════════════════════
   CONTENT TYPOGRAPHY LAW
   Every declaration here intentionally uses !important: Gutenberg writes
   editor-picked sizes/colors as inline style="" attributes and .has-*
   preset classes, and only !important beats an inline style. This file
   forces the theme's own scale on post/page body content regardless of
   what was chosen in the editor.

   Scope (one :is() list, shared by front end + editor canvas):
     - .sf-context-news .sf-entry-content   → single.php / page.php body
       (cinema-context templates reuse .sf-entry-content but sit outside
       .sf-context-news, so gallery/movie/video pages are untouched)
     - .editor-styles-wrapper.post-type-post / .post-type-page → the block
       editor canvas for posts & pages only (CPT editors untouched)

   Only properties Gutenberg's UI can set are forced (font-family, size,
   weight, line-height, letter-spacing, text-transform, color). Margins,
   borders, backgrounds and the h2 accent bar stay in news.css.

   Color is NOT forced inside .has-background blocks: an editor-made
   highlight box keeps its background and its readable text color; only
   fonts/sizes unify inside it.

   Toggled by Settings → News & Posts → "Uniform content typography"
   (sf_setting 'uniform_content_typography'). Do NOT add !important
   elsewhere to fight this file — toggle it off instead.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Headings ─────────────────────────────────────────────────────────── */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(h1, h2, h3, h4, h5) {
	font-family: var(--sf-font-display) !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
/* h1 in body content is demoted: between the post title and h2 */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h1 {
	font-size: clamp(20px, 2.8vw, 28px) !important;
	line-height: 1.25 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h2 {
	font-size: clamp(18px, 2.5vw, 24px) !important;
	line-height: 1.3 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h3 {
	font-size: clamp(16px, 2vw, 20px) !important;
	line-height: 1.35 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h4 {
	font-size: 17px !important;
	line-height: 1.4 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h5 {
	font-size: 15.5px !important;
	line-height: 1.4 !important;
}
/* h6 = accent small-caps kicker (same idiom as homepage section labels) */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h6 {
	font-family: var(--sf-font-display) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--sf-accent) !important;
	margin: 24px 0 4px;
}

/* ── Heading decorations ──────────────────────────────────────────────────
   Live here (not news.css) so they render in the editor canvas too —
   news.css scopes to .sf-entry-content, which doesn't exist in the editor
   DOM. Decorative props need no !important (nothing in Gutenberg sets
   them); only h1's text-align is forced, to beat .has-text-align-center. */

/* h1 — section opener: accent underline stub + hairline rule */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h1 {
	text-align: left !important;
	margin: 36px 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sf-news-border);
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 10px;
	border-radius: 2px;
	background: var(--sf-accent);
}

/* h2 — accent bar (mirrors news.css so writers see it while editing);
   extra top space so sections visibly "start" */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h2 {
	position: relative;
	padding-left: 16px;
	margin: 38px 0 14px;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 4px;
	border-radius: 2px;
	background: var(--sf-accent);
}

/* h3 — short gold dash prefix (echoes the review-star gold) */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h3 {
	margin: 28px 0 10px;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) h3::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 3px;
	margin-right: 10px;
	border-radius: 2px;
	vertical-align: middle;
	background: var(--sf-gold);
}

/* h4/h5 — size and weight only; consistent rhythm */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(h4, h5) {
	margin: 24px 0 8px;
}

/* ── Body text ────────────────────────────────────────────────────────── */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(p, li) {
	font-family: var(--sf-font-body) !important;
	font-size: 16.5px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* ── Inline elements ──────────────────────────────────────────────────── */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(strong, b) {
	font-weight: 700 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(em, i) {
	font-style: italic !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: .9em !important;
	background: var(--sf-news-bg);
	border: 1px solid var(--sf-news-border);
	border-radius: 6px;
	padding: 2px 6px;
}

/* ── Block elements ───────────────────────────────────────────────────── */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	background: var(--sf-news-bg);
	border: 1px solid var(--sf-news-border);
	border-radius: var(--sf-radius);
	padding: 16px;
	overflow-x: auto;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit !important;
}
/* Gold pull-quote (values mirror news.css; forced so editor picks can't skew it) */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(blockquote, blockquote p) {
	font-family: var(--sf-font-display) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(table, th, td) {
	font-family: var(--sf-font-body) !important;
	font-size: 13px !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) :is(figcaption, .wp-caption-text) {
	font-family: var(--sf-font-body) !important;
	font-size: 12.5px !important;
	color: var(--sf-news-subtle) !important;
	margin-top: 8px;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) hr {
	border: 0;
	height: 1px;
	background: var(--sf-news-border);
	margin: 32px 0;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) li::marker {
	color: var(--sf-accent);
}

/* ── Color law — skipped inside .has-background highlight boxes ───────── */
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page)
	:is(h1, h2, h3, h4, h5, p, li, blockquote, strong, b, em, i, td, th):not(.has-background, .has-background *) {
	color: var(--sf-news-text) !important;
}
:is(.sf-context-news .sf-entry-content,
    .editor-styles-wrapper.post-type-post,
    .editor-styles-wrapper.post-type-page) a:not(.has-background, .has-background *) {
	color: var(--sf-accent) !important;
	text-decoration: underline;
}