/*
 * Ferndale Intranet: content typography (front end and block editor).
 *
 * Every plugin's output sits inside .entry-content, so these rules are
 * written not to leak into plugins (04 §3 rows 13–14):
 * - element rules are wrapped in :where() (zero specificity), so any
 *   plugin rule wins;
 * - lists, links and headings with a class attribute are skipped
 *   (:not([class])), so plugin markup keeps its own look;
 * - unclassed headings are styled only at the top level of the content
 *   (a direct child); core heading blocks (.wp-block-heading) anywhere.
 *   Headings nested inside plugin widgets keep the plugin's UI styling.
 * The editor canvas uses the same rules through .is-root-container.
 */

/* ------------------------------------------------------------------
 * Text and flow.
 * ------------------------------------------------------------------ */
:where(.entry-content, .is-root-container) {
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

:where(.entry-content) > * {
	margin-block: 0;
}

:where(.entry-content) > * + * {
	margin-block-start: 1.25rem;
}

:where(.entry-content) > :where(h2, h3, h4, h5, h6) {
	margin-block-start: 2.25rem;
}

:where(.entry-content) > :where(h2, h3, h4, h5, h6) + * {
	margin-block-start: 0.75rem;
}

:where(.entry-content) > :first-child {
	margin-block-start: 0;
}

/* A Spacer block sets the gap on its own (its height is what the editor chose). */
:where(.entry-content) > :where(.wp-block-spacer),
:where(.entry-content) > :where(.wp-block-spacer) + * {
	margin-block-start: 0;
}

:where(.entry-content)::after {
	content: "";
	display: table;
	clear: both;
}

:where(.entry-content, .is-root-container) > :where(h1, h2, h3, h4, h5, h6):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h1, h2, h3, h4, h5, h6):where(.wp-block-heading) {
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-weight: var(--fi-heading-weight);
	letter-spacing: -0.012em;
	line-height: 1.25;
	text-wrap: balance;
}

:where(.entry-content, .is-root-container) > :where(h1, h2):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h1, h2):where(.wp-block-heading) {
	color: var(--fi-h2);
	font-family: var(--fi-font-display);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	font-weight: var(--fi-display-weight);
}

:where(.entry-content, .is-root-container) > :where(h2):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h2):where(.wp-block-heading) {
	font-weight: var(--fi-heading-weight);
}

:where(.entry-content, .is-root-container) > :where(h3):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h3):where(.wp-block-heading) {
	color: var(--fi-h3);
	font-family: var(--fi-font-display);
	font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
}

:where(.entry-content, .is-root-container) > :where(h4):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h4):where(.wp-block-heading) {
	font-size: 1.1875rem;
}

:where(.entry-content, .is-root-container) > :where(h5, h6):where(:not([class])),
:where(.entry-content, .is-root-container) :where(h5, h6):where(.wp-block-heading) {
	font-size: 1.0625rem;
}

:where(.entry-content, .is-root-container) :where(p) {
	text-wrap: pretty;
}

:where(.entry-content, .is-root-container) :where(strong, b) {
	color: var(--fi-heading);
	font-weight: 700;
}

/* Links (not classed links: plugin buttons and tiles keep their look). */
:where(.entry-content, .is-root-container) :where(a:not([class])) {
	color: var(--fi-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--fi-duration) ease, text-decoration-thickness var(--fi-duration) ease;
}

:where(.entry-content, .is-root-container) :where(a:not([class])):hover {
	color: var(--fi-link-hover);
	text-decoration-thickness: 2px;
}

/* Links inside highlighted text (the editor's highlight, <mark>) take the
 * highlight's text colour, which the editor keeps readable on it: the link
 * colour can fail on a light highlight (A's #1e73be on #f6e857 is 3.9:1).
 * The underline still marks the link, and thickens on hover. */
:where(.entry-content, .is-root-container) mark a:not([class]) {
	color: inherit;
}

/* Document links show their file type. */
:where(.entry-content, .is-root-container) :where(a:not([class])):is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".xls" i], [href$=".xlsx" i], [href$=".ppt" i], [href$=".pptx" i])::after {
	display: inline-block;
	margin-inline-start: 0.4em;
	padding: 0.1em 0.45em;
	border-radius: 4px;
	background: var(--fi-surface-2);
	color: var(--fi-primary);
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-decoration: none;
	vertical-align: 0.15em;
}

:where(.entry-content, .is-root-container) :where(a:not([class]))[href$=".pdf" i]::after {
	content: "PDF";
}

:where(.entry-content, .is-root-container) :where(a:not([class])):is([href$=".doc" i], [href$=".docx" i])::after {
	content: "DOC";
}

:where(.entry-content, .is-root-container) :where(a:not([class])):is([href$=".xls" i], [href$=".xlsx" i])::after {
	content: "XLS";
}

:where(.entry-content, .is-root-container) :where(a:not([class])):is([href$=".ppt" i], [href$=".pptx" i])::after {
	content: "PPT";
}

/* Lists (not classed lists). */
:where(.entry-content, .is-root-container) :where(ul:not([class]), ol:not([class]), ul.wp-block-list, ol.wp-block-list) {
	padding-inline-start: 1.35em;
}

:where(.entry-content, .is-root-container) :where(ul:not([class]), ol:not([class]), ul.wp-block-list, ol.wp-block-list) > :where(li + li) {
	margin-block-start: 0.4em;
}

:where(.entry-content, .is-root-container) :where(ul:not([class]), ul.wp-block-list) > :where(li)::marker {
	color: var(--fi-primary);
}

:where(.entry-content, .is-root-container) :where(ol:not([class]), ol.wp-block-list) > :where(li)::marker {
	color: var(--fi-primary);
	font-weight: 700;
}

/* Images, captions and floats. */
:where(.entry-content, .is-root-container) :where(img) {
	max-width: 100%;
	height: auto;
}

:where(.entry-content, .is-root-container) :where(.wp-block-image) img {
	border-radius: var(--fi-radius);
}

:where(.entry-content, .is-root-container) :where(figcaption, .wp-element-caption) {
	margin-block-start: 0.6rem;
	color: var(--fi-muted);
	font-size: 0.875rem;
	text-align: center;
}

:where(.entry-content) :where(.alignleft) {
	float: left;
	max-width: 45%;
	margin: 0.35rem 1.75rem 1rem 0;
}

:where(.entry-content) :where(.alignright) {
	float: right;
	max-width: 45%;
	margin: 0.35rem 0 1rem 1.75rem;
}

:where(.entry-content) :where(.aligncenter) {
	margin-inline: auto;
	text-align: center;
}

/* Quotes, separators, highlights and code. */
:where(.entry-content, .is-root-container) :where(blockquote:not([class]), .wp-block-quote) {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-inline-start: 4px solid var(--fi-accent-line);
	color: var(--fi-heading);
	font-size: 1.125rem;
}

:where(.entry-content, .is-root-container) :where(blockquote cite, .wp-block-quote cite) {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--fi-muted);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
}

:where(.entry-content, .is-root-container) :where(hr:not([class]), .wp-block-separator) {
	height: 1px;
	margin-block: 2.5rem;
	border: 0;
	background: var(--fi-border);
	opacity: 1;
}

:where(.entry-content, .is-root-container) :where(code, kbd, samp) {
	padding: 0.1em 0.35em;
	border-radius: 4px;
	background: var(--fi-surface-2);
	color: var(--fi-heading);
	font-size: 0.9em;
}

:where(.entry-content, .is-root-container) :where(pre:not([class]), .wp-block-code) {
	overflow-x: auto;
	padding: 1rem 1.25rem;
	border-radius: var(--fi-radius);
	background: var(--fi-surface);
	color: var(--fi-heading);
	font-size: 0.9375rem;
	line-height: 1.6;
}

:where(.entry-content, .is-root-container) :where(pre code) {
	padding: 0;
	background: none;
}

/* ------------------------------------------------------------------
 * Tables: core table blocks and bare tables in the content only.
 * Plugin tables (they all have classes) keep their own look; the plugin
 * groups use .fi-table values. No unscoped table rules (decision 11).
 * ------------------------------------------------------------------ */
:where(.entry-content, .is-root-container) :where(.wp-block-table) {
	overflow-x: auto;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	-webkit-overflow-scrolling: touch;
}

:where(.entry-content) :where(.table-scroll) {
	overflow-x: auto;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	-webkit-overflow-scrolling: touch;
}

:where(.entry-content, .is-root-container) :where(.wp-block-table > table, .table-scroll > table, .entry-content > table:not([class])) {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: var(--fi-card-bg);
	font-size: 0.9375rem;
	line-height: 1.55;
}

:where(.entry-content, .is-root-container) :where(.wp-block-table, .table-scroll) :where(th, td),
:where(.entry-content) > :where(table:not([class])) :where(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-top: 1px solid var(--fi-border);
	text-align: start;
	vertical-align: top;
}

:where(.entry-content, .is-root-container) :where(.wp-block-table, .table-scroll) :where(thead th, thead td, table > tr:first-child > th, tbody > tr:first-child > th:only-child),
:where(.entry-content) > :where(table:not([class])) :where(thead th, thead td) {
	border-top: 0;
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-weight: 700;
}

/* A header cell that sets its own background in the page (a hand-written
 * table such as the portal's After school clubs: style="background: #f5f5f5")
 * keeps that background, so the white header text above would vanish (1.09:1).
 * Such tables were written for GeneratePress's dark text: give them the
 * heading colour. A text colour set in the cell itself still wins. */
:where(.entry-content, .is-root-container) :where(.wp-block-table, .table-scroll) :where(thead th, thead td, table > tr:first-child > th, tbody > tr:first-child > th:only-child):where([style*="background"]),
:where(.entry-content) > :where(table:not([class])) :where(thead th, thead td):where([style*="background"]) {
	color: var(--fi-heading);
}

:where(.entry-content, .is-root-container) :where(.wp-block-table, .table-scroll) :where(tbody tr:nth-child(even) > td),
:where(.entry-content) > :where(table:not([class])) :where(tbody tr:nth-child(even) > td) {
	background: var(--fi-row-alt);
}

:where(.entry-content, .is-root-container) :where(.wp-block-table) :where(tbody th) {
	color: var(--fi-heading);
	font-weight: 700;
}

:where(.entry-content, .is-root-container) :where(.wp-block-table) :where(figcaption) {
	margin: 0;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--fi-border);
	text-align: start;
}

/* Core's table block CSS (.wp-block-table td/th: a 1px currentColor grid
 * and 0.5em padding; a 3px thead/tfoot rule) is (0,1,1), so it beats the
 * zero-specificity rules above. These (0,2,1) rules match core table blocks
 * only, never plugin tables, and restore the light row rules. */
:is(.entry-content, .is-root-container) .wp-block-table :is(th, td) {
	padding: 0.75rem 1rem;
	border: 0;
	border-top: 1px solid var(--fi-border);
}

:is(.entry-content, .is-root-container) .wp-block-table tr:first-child > :is(th, td) {
	border-top: 0;
}

:is(.entry-content, .is-root-container) .wp-block-table :is(thead, tfoot) {
	border: 0;
}

/* ------------------------------------------------------------------
 * Embeds, video and details.
 * ------------------------------------------------------------------ */
:where(.entry-content, .is-root-container) :where(iframe) {
	max-width: 100%;
}

:where(.entry-content, .is-root-container) :where(iframe:not([style*="border"])) {
	border: 0;
}

/* Google Slides embeds are a fixed 960 × 569: make them fit the page (226). */
.entry-content iframe[src*="docs.google.com/presentation"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 960 / 569;
	border-radius: var(--fi-radius);
}

/* 0.1.40: exactly a 16:9 slide plus Slides' own 36px control bar (measured),
 * so the frame adds no black bars of its own, and no wider than the embed's
 * own 960px, centred (on the portal's home page it filled 1200px). Black bars
 * inside a slide belong to the slide itself (the portal's posters are
 * portrait images on black widescreen slides, made for the school's screens). */
@supports (height: 1cqw) {
	.entry-content :where(p, div, figure):has(> iframe[src*="docs.google.com/presentation"]) {
		container-type: inline-size;
	}

	.entry-content iframe[src*="docs.google.com/presentation"] {
		width: min(100%, 960px);
		height: calc(min(100cqw, 960px) * 9 / 16 + 36px);
		aspect-ratio: auto;
		margin-inline: auto;
	}
}

:where(.entry-content, .is-root-container) :where(.wp-block-embed iframe, .wp-block-video video) {
	border-radius: var(--fi-radius);
}

:where(.entry-content, .is-root-container) :where(.wp-block-video video) {
	display: block;
	width: 100%;
	height: auto;
}

:where(.entry-content, .is-root-container) :where(details:not([class]), .wp-block-details) {
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
}

:where(.entry-content, .is-root-container) :where(details:not([class]), .wp-block-details) > :where(summary) {
	min-height: 3rem;
	padding: 0.75rem 1rem;
	color: var(--fi-heading);
	font-weight: 700;
}

:where(.entry-content, .is-root-container) :where(details:not([class]), .wp-block-details) > :where(:not(summary)) {
	margin: 0;
	padding: 0 1rem 1rem;
}

/* Block buttons share the theme button look (base.css .fi-btn). */
:where(.entry-content) :where(.wp-block-buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ------------------------------------------------------------------
 * Replacements for the old Additional CSS (customiser post 50), scoped.
 * ------------------------------------------------------------------ */

/* Google search bar (Home 25 and Dashboard 745). The markup is in the page;
 * plugin-a11y.js gives the input its accessible name. */
.entry-content .google-search-container {
	width: 100%;
	margin-inline: 0;
}

.entry-content .google-search-container form {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0;
	border-radius: var(--fi-radius-control);
	box-shadow: var(--fi-shadow-sm);
}

/* A magnifying glass inside the field. */
.entry-content .google-search-container form::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1rem;
	z-index: 3;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
	background: var(--fi-muted);
	-webkit-mask: var(--fi-icon-search) center / contain no-repeat;
	mask: var(--fi-icon-search) center / contain no-repeat;
	pointer-events: none;
}

.entry-content .google-search-container .google-search-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.75rem 1rem 0.75rem 2.9rem;
	border: 1px solid var(--fi-control-border);
	border-right: 0;
	border-radius: var(--fi-radius-control) 0 0 var(--fi-radius-control);
	background: var(--fi-control-bg);
	color: var(--fi-text);
	font-size: 1.0625rem;
	-webkit-appearance: none;
	appearance: none;
}

/* The page puts the cursor in this field on load, so staff can type straight
 * away. Its focus look is therefore calm rather than the theme's bright 3px
 * keyboard ring: a solid 2px border in the header colour that runs straight
 * into the button, with no ring or halo outside it, so there's no pale gap
 * around the field or between the field and the button (administrator's
 * feedback, 9 Oct 2026). The button keeps the normal keyboard ring. */
.entry-content .google-search-container .google-search-input:is(:focus, :focus-visible) {
	border-color: var(--fi-primary);
	outline: 0;
	box-shadow: inset 0 0 0 1px var(--fi-primary);
}

.entry-content .google-search-container form:focus-within::before {
	background: var(--fi-primary);
}

.entry-content .google-search-container .google-search-button {
	flex: 0 0 auto;
	min-height: 3.25rem;
	margin: 0;
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--fi-primary);
	border-radius: 0 var(--fi-radius-control) var(--fi-radius-control) 0;
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--fi-duration) ease;
}

.entry-content .google-search-container .google-search-button:hover {
	border-color: var(--fi-primary-hover);
	background: var(--fi-primary-hover);
}

@media (max-width: 30rem) {
	.entry-content .google-search-container .google-search-button {
		padding-inline: 1rem;
	}
}

/* Icon grid (Test-Subfolders-Links, 242). Custom properties renamed with
 * the theme prefix (the old names were generic). */
.entry-content .icon-menu {
	--fi-icon-item-height: 150px;
	--fi-icon-image-height: 80px;
	--fi-icon-image-size: 80px;
	--fi-icon-text-width: 110px;
	--fi-icon-grid-gap: 16px;
	--fi-icon-columns: 8;
	--fi-icon-item-width: 150px;
	display: grid;
	grid-template-columns: repeat(var(--fi-icon-columns), 1fr);
	gap: var(--fi-icon-grid-gap);
	justify-content: center;
	max-width: calc(var(--fi-icon-item-width) * var(--fi-icon-columns) + var(--fi-icon-grid-gap) * (var(--fi-icon-columns) - 1));
	margin-inline: auto;
}

.entry-content .icon-menu a {
	color: inherit;
	text-decoration: none;
}

.entry-content .icon-menu .icon-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: var(--fi-icon-item-height);
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	transition: border-color var(--fi-duration) ease, box-shadow var(--fi-duration) ease;
}

.entry-content .icon-menu a:hover .icon-item,
.entry-content .icon-menu a:focus-visible .icon-item {
	border-color: var(--fi-primary);
	box-shadow: var(--fi-shadow);
}

.entry-content .icon-menu .icon-image-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--fi-icon-image-height);
	margin-top: 10px;
}

.entry-content .icon-menu .icon-item img {
	max-width: var(--fi-icon-image-size);
	max-height: 100%;
	object-fit: contain;
}

.entry-content .icon-menu .icon-text-container {
	width: 100%;
	padding: 10px;
	text-align: center;
	word-wrap: break-word;
}

.entry-content .icon-menu .icon-item h3 {
	width: var(--fi-icon-text-width);
	margin: 0 auto;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

@media (max-width: 1279px) {
	.entry-content .icon-menu {
		grid-template-columns: repeat(auto-fill, minmax(var(--fi-icon-text-width), 1fr));
		max-width: none;
	}

	.entry-content .icon-menu .icon-item h3 {
		width: 100%;
	}
}

/* T4B ticker on the front page: a slim strip at the top of the dashboard.
 * (The old Additional CSS pulled it over GeneratePress's article padding
 * with negative margins; the theme places it instead. Its colours and the
 * pause button belong to the third-party plugin group.) */
.home .entry-content > .ticker-news,
.home .entry-content > :first-child .ticker-news {
	margin: 0;
}

.home .entry-content .tickercontainer {
	margin: 0;
}

/* Apps (1072) and Request Forms (1053): use the intranet font (04 §4.14).
 * Their tables (fixed 80px and 220px columns, from the page's own CSS) are
 * wider than a small phone: they scroll sideways inside the widget instead
 * of being cut off at the page edge. */
.entry-content :is(.apps-widget, .rf-widget) {
	overflow-x: auto;
	font-family: var(--fi-font) !important;
}