/*
Theme Name: InclusiveSA Child
Description: Parity and accessibility layer for the InclusiveSA site. Child of Twenty Twenty-Five.
Author: InclusiveSA
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: inclusivesa
*/

/* ---------------------------------------------------------------------------
   Base typography.
   NOTE: the Elementor kit's Additional CSS (custom_css post 36) sets
   body { font-size: 16px; line-height: 1.5 }. This overrides it to the v3
   accessibility spec's 18px / 1.6. That is a deliberate site-wide change, not
   a parity fix. Specificity settles the tie, not source order -- see below.
   --------------------------------------------------------------------------- */
/* `html body`, not `body`. The kit's rule is a bare `body{...}`, so matching its
   specificity would leave the winner down to stylesheet order -- and Elementor
   prints its own CSS, which we do not control. One extra element selector wins
   regardless of who loads first, without reaching for !important. */
html body {
	font-size: 18px;
	line-height: 1.6;
	text-align: left;
}

p,
li {
	max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   Focus indicator.
   Two-tone ring (dark outer, light inner) so it stays visible against both the
   cream #fff8f1 and the navy #12233e surfaces. A single-colour ring cannot meet
   WCAG 2.2 SC 1.4.11 (3:1 non-text contrast) on both.
   --------------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid #12233e;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #fff8f1;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Skip link. Hidden until focused; becomes the first focusable element
   because wp_body_open() fires before the template markup.
   --------------------------------------------------------------------------- */
.isa-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: #12233e;
	color: #fff8f1;
	font-weight: 600;
	text-decoration: none;
}

.isa-skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   Reduced motion. The site is motion-free by default; this is the belt to the
   spec's braces, and also neutralises anything Elementor adds later.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Page title. The reference applies this padding inline on the h1; keying it to
   the class keeps the markup clean. `hostinger-ai-page-title` carries no CSS in
   TT5 -- the visible result comes from has-text-align-center +
   has-x-large-font-size, which the render_block_data filter restores.
   --------------------------------------------------------------------------- */
.hostinger-ai-page-title {
	padding-block: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
   Blog card grid. One rule set serves both callers: the archive template and
   the [inclusivesa_blog_list] shortcode in mu-plugins. They emit the same class
   names on purpose, so neither can drift from the other's styling.
   --------------------------------------------------------------------------- */
.blog-posts-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.blog-post-item .post-thumbnail {
	margin-bottom: var(--wp--preset--spacing--30);
}

.blog-post-item .post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.blog-post-item .post-title {
	font-size: var(--wp--preset--font-size--large);
	margin-block: var(--wp--preset--spacing--30);
}

.blog-post-item .post-excerpt {
	margin-bottom: var(--wp--preset--spacing--30);
}

.blog-post-item .post-date {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* The archive is TT5's core/post-template, so its items carry core's class
   names rather than the shortcode's. The grid class is added to the same <ul>
   by the render_block_data filter, so these selectors reach both callers and
   the two cannot drift apart. */
.blog-posts-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	margin-block: var(--wp--preset--spacing--30);
}

.blog-posts-grid .wp-block-post-excerpt {
	margin-bottom: var(--wp--preset--spacing--30);
}

.blog-posts-grid .wp-block-post-date {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

/* Core's post-template is a <ul> with list styling; the grid replaces it. */
.blog-posts-grid.wp-block-post-template {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Reading aids. State lives as data-isa-* attributes on <html>, so overriding
   the kit's own custom properties here works WITH the kit's CSS rather than
   fighting it. Defaults are the spec's, so with JS disabled the site is
   already correct and the panel simply does nothing.
   --------------------------------------------------------------------------- */
/* The slugs to override are the KIT's, not TT5's. The kit's Additional CSS
   (custom_css post 36) defines its own palette -- page-background, page-text,
   color-1/2/3, light, dark, grey, contrast -- and its `body` rule reads
   background-color from page-background and color from page-text. Overriding
   TT5's `base`/`contrast` instead would recolour nothing but the links and
   leave the page cream. Both sets are set below: the kit's because they are
   what the page actually consumes, TT5's because our own panel and any core
   block still reading them should follow suit.
   The explicit body rule is the belt to that braces, for any component that
   hard-codes a colour instead of using a preset. */
html[data-isa-theme="dark"] {
	--wp--preset--color--page-background: #0d141a;
	--wp--preset--color--page-text: #fff8f1;
	--wp--preset--color--base: #0d141a;
	--wp--preset--color--contrast: #fff8f1;
}

html[data-isa-theme="dark"] body {
	background-color: #0d141a;
	color: #fff8f1;
}

html[data-isa-theme="hc"] {
	--wp--preset--color--page-background: #000000;
	--wp--preset--color--page-text: #ffff00;
	--wp--preset--color--base: #000000;
	--wp--preset--color--contrast: #ffff00;
}

html[data-isa-theme="hc"] body {
	background-color: #000000;
	color: #ffff00;
}

html[data-isa-theme="hc"] a {
	color: #ffff00;
	text-decoration: underline;
}

html[data-isa-text="lg"] body {
	font-size: 21px;
}

html[data-isa-text="xl"] body {
	font-size: 24px;
}

html[data-isa-spacing="loose"] body {
	line-height: 1.9;
	letter-spacing: 0.02em;
}

html[data-isa-spacing="loose"] p,
html[data-isa-spacing="loose"] li {
	max-width: 60ch;
}

html[data-isa-font="sans"] body {
	font-family: "Open Sans", system-ui, -apple-system, sans-serif;
}

html[data-isa-font="serif"] body {
	font-family: Georgia, "Times New Roman", serif;
}

html[data-isa-font="dyslexic"] body {
	font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
	letter-spacing: 0.03em;
	word-spacing: 0.1em;
}

/* Reading-aids panel. <details> gives keyboard and screen-reader support for
   free, so there is no ARIA to get wrong. */
.isa-a11y-panel {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 99999;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 2px solid currentColor;
	border-radius: 4px;
	max-width: min(22rem, calc(100vw - 2rem));
}

.isa-a11y-panel > summary {
	cursor: pointer;
	padding: 0.6em 1em;
	font-weight: 600;
}

.isa-a11y-panel fieldset {
	border: 0;
	margin: 0;
	padding: 0 1em 1em;
}

.isa-a11y-panel legend {
	font-weight: 600;
	padding-top: 0.5em;
}

.isa-a11y-panel label {
	display: block;
	padding: 0.15em 0;
}

/* ---------------------------------------------------------------------------
   Non-functional forms. The visible note replaces the old title= tooltip,
   which screen readers do not reliably announce and which no keyboard user
   can reach.
   --------------------------------------------------------------------------- */
.isa-form-note {
	margin-block: var(--wp--preset--spacing--30);
	padding: 0.75em 1em;
	border-left: 4px solid #917039;
	background: rgba(145, 112, 57, 0.08);
	max-width: 70ch;
}

.isa-form-note a {
	text-decoration: underline;
}

/* Disabled submit. Kept legible rather than greyed to the point of failing
   contrast -- the control still has to be readable to explain itself. */
.isa-contact-form button[disabled],
.isa-newsletter button[disabled] {
	cursor: not-allowed;
	opacity: 0.75;
}