/*
Theme Name:  SE Accessible
Theme URI:   https://siteengine.io/se-site-shield
Author:      SiteEngine
Author URI:  https://siteengine.io
Description: Simplified Reading Mode theme supplied by SE Site Shield. Activated per-request to reduce presentation complexity. No WCAG conformance claim is made. Do not set this as the site default theme.
Version:     1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License:     Proprietary
Text Domain: se-accessible
Tags:        one-column
*/

/* ==========================================================================
   Custom properties

   Every foreground/background pair below has been checked against WCAG 2.2
   AA. Ratios are noted so a future edit can be checked without re-measuring.
   ========================================================================== */

:root {
	/* Colour */
	--color-bg:           #FFFFFF;
	--color-surface:      #F5F5F5;
	--color-text:         #1A1A1A; /* 17.40:1 on bg */
	--color-heading:      #111111; /* 18.88:1 on bg */
	--color-text-muted:   #595959; /*  7.00:1 on bg */
	--color-link:         #0057B8; /*  6.87:1 on bg */
	--color-link-hover:   #003D82; /* 10.55:1 on bg */
	--color-border:       #767676; /*  4.54:1 on bg */
	--color-border-light: #D4D4D4;
	--color-focus-ring:   #0057B8;
	--color-button-bg:    #0057B8;
	--color-button-text:  #FFFFFF; /*  6.87:1 on button bg */

	/* Typography */
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-base: 1.125rem; /* 18px */
	--font-size-sm:   1rem;
	--font-size-lg:   1.25rem;
	--font-size-xl:   1.5rem;
	--font-size-2xl:  1.875rem;
	--font-size-3xl:  2.25rem;
	--line-height:    1.6;

	/* Layout */
	--content-width: 720px;
	--measure:       72ch;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2.5rem;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	/* WCAG 1.4.12: never clip content when users override text spacing. */
	overflow-wrap: break-word;
}

.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	line-height: 1.25;
	margin-block: var(--space-xl) var(--space-md);
	max-width: var(--measure);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5, h6 { font-size: var(--font-size-base); }

p, ul, ol, dl, blockquote, table, pre {
	margin-block: 0 var(--space-md);
	max-width: var(--measure);
}

ul, ol {
	padding-inline-start: var(--space-lg);
}

li { margin-block-end: var(--space-xs); }

blockquote {
	border-inline-start: 4px solid var(--color-border);
	padding-inline-start: var(--space-md);
	color: var(--color-text-muted);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375em;
}

pre {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border-light);
	padding: var(--space-md);
	overflow-x: auto;
}

hr {
	border: 0;
	border-block-start: 1px solid var(--color-border);
	margin-block: var(--space-xl);
}

/* ==========================================================================
   Links

   Underlined by default: WCAG 1.4.1 requires that colour is not the only
   means of conveying information, and an underline is the reliable signal.
   ========================================================================== */

a {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:active {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Focus

   Two-layer ring: a white halo inside a solid colour ring, so the indicator
   stays visible on light and dark backgrounds alike (WCAG 2.4.7, 1.4.11).
   ========================================================================== */

:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--color-bg);
	border-radius: 2px;
}

/* Fallback for browsers without :focus-visible. */
:focus {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* ==========================================================================
   Skip link — WCAG 2.4.1 Bypass Blocks
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-bg);
	color: var(--color-link);
	font-weight: 700;
	text-decoration: underline;
}

.skip-link:focus {
	left: var(--space-md);
	top: var(--space-md);
}

/* ==========================================================================
   Screen reader text
   ========================================================================== */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--font-size-base);
	font-weight: 700;
	height: auto;
	left: var(--space-md);
	line-height: normal;
	padding: var(--space-sm) var(--space-lg);
	text-decoration: none;
	top: var(--space-md);
	width: auto;
	z-index: 100000;
	background-color: var(--color-bg);
	color: var(--color-text);
	box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	border-block-end: 1px solid var(--color-border);
	padding-block: var(--space-md);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.site-title {
	font-size: var(--font-size-xl);
	margin: 0;
}

.site-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.site-title a:hover {
	text-decoration: underline;
}

.site-description {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.main-navigation li { margin: 0; }

.main-navigation a {
	display: inline-block;
	/* WCAG 2.5.8 Target Size (Minimum) — 24x24 CSS pixels. */
	min-height: 24px;
	padding-block: var(--space-xs);
}

.main-navigation .current-menu-item > a {
	font-weight: 700;
}

/* ==========================================================================
   Main content
   ========================================================================== */

.site-main {
	padding-block: var(--space-xl);
}

.entry-header { margin-block-end: var(--space-lg); }

.entry-title { margin-block-start: 0; }

.entry-meta {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.entry-content > *:first-child { margin-block-start: 0; }

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

figure { margin-block: var(--space-lg); }

figcaption {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin-block-start: var(--space-sm);
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 1px solid var(--color-border);
	padding: var(--space-sm) var(--space-md);
	text-align: start;
}

th {
	background-color: var(--color-surface);
	font-weight: 700;
}

caption {
	caption-side: top;
	font-weight: 700;
	padding-block-end: var(--space-sm);
	text-align: start;
}

/* ==========================================================================
   Forms
   ========================================================================== */

label {
	display: block;
	font-weight: 700;
	margin-block-end: var(--space-xs);
}

input, textarea, select, button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	max-width: 32rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background-color: var(--color-bg);
	color: var(--color-text);
}

button,
input[type="submit"],
.button {
	display: inline-block;
	/* WCAG 2.5.8 Target Size (Minimum). */
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-button-bg);
	color: var(--color-button-text);
	border: 1px solid var(--color-button-bg);
	border-radius: 3px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
	background-color: var(--color-link-hover);
	border-color: var(--color-link-hover);
	color: var(--color-button-text);
}

/* ==========================================================================
   Pagination and post navigation
   ========================================================================== */

.post-navigation,
.posts-navigation {
	border-block-start: 1px solid var(--color-border-light);
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-lg);
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
}

.nav-next { text-align: end; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-block-start: 1px solid var(--color-border);
	padding-block: var(--space-lg);
	margin-block-start: var(--space-xl);
}

.site-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.site-info {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin: 0;
}

.footer-links {
	list-style: none;
	display: flex;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.footer-links li { margin: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	h1 { font-size: var(--font-size-2xl); }
	h2 { font-size: var(--font-size-xl); }
	h3 { font-size: var(--font-size-lg); }

	.site-header .container,
	.site-footer .container {
		flex-direction: column;
		align-items: flex-start;
	}

	.post-navigation .nav-links,
	.posts-navigation .nav-links {
		flex-direction: column;
	}

	.nav-next { text-align: start; }
}

/* ==========================================================================
   Reduced motion — WCAG 2.3.3

   Near-zero rather than `none`, so animation end events still fire and any
   script depending on them does not stall.
   ========================================================================== */

@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;
	}
}

/* ==========================================================================
   Forced colours — Windows High Contrast Mode

   In forced-colors, author background and border colours are replaced by the
   OS palette. The focus ring must be re-expressed in system colour keywords
   or it disappears entirely.
   ========================================================================== */

@media (forced-colors: active) {
	:focus-visible,
	:focus {
		outline: 3px solid Highlight;
		outline-offset: 2px;
		box-shadow: none;
	}

	a { color: LinkText; }

	button,
	input[type="submit"],
	.button {
		border: 2px solid ButtonText;
	}

	th, td { border: 1px solid CanvasText; }
}

/* ==========================================================================
   Print — WCAG 1.4.8
   ========================================================================== */

@media print {
	.skip-link,
	.main-navigation,
	.site-footer,
	.post-navigation,
	.posts-navigation {
		display: none;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
		color: #000000;
		background: #FFFFFF;
	}

	a {
		color: #000000;
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }

	p, blockquote { orphans: 3; widows: 3; }

	img { max-width: 100% !important; }
}

/* ==========================================================================
   Fluent Forms compatibility

   Reading Mode dequeues Fluent Forms' own stylesheet along with every other
   third-party asset — that stripping is the point of the mode, since page
   builder and plugin CSS is where most barriers originate. But an unstyled
   form reads as broken, and an abandoned form is an accessibility failure of
   its own. So Fluent Forms' markup is styled natively here instead of
   allowlisting its CSS back in.

   Selectors target Fluent Forms' stable class names. Colours reuse the theme
   custom properties, and the status colours below are contrast-verified:
     error   #B32D2E  6.30:1 on white, 5.67:1 on the error background
     success #007A33  5.48:1 on white
   ========================================================================== */

:root {
	--color-error:      #B32D2E;
	--color-error-bg:   #FCF0F1;
	--color-success:    #007A33;
	--color-success-bg: #EDF7F1;
}

.frm-fluent-form {
	max-width: var(--measure);
}

/* Field groups stack in a single column. Reading Mode is one column by
   definition, and multi-column form layouts break reflow at 320px (WCAG 1.4.10). */
.frm-fluent-form .ff-t-container,
.frm-fluent-form .ff-t-cell {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

.frm-fluent-form .ff-el-group {
	margin-block-end: var(--space-lg);
}

.frm-fluent-form .ff-el-input--label label {
	display: block;
	font-weight: 700;
	margin-block-end: var(--space-xs);
	color: var(--color-text);
}

/* Required marker. The asterisk is decorative — Fluent Forms already sets
   aria-required on the input, so this is hidden from assistive technology to
   avoid it being announced as literal "star". */
.frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.frm-fluent-form .ff-el-is-required.asterisk-left label::before {
	content: " *";
	color: var(--color-error);
	speak: never;
}

.frm-fluent-form .ff-el-form-control {
	display: block;
	width: 100%;
	max-width: 32rem;
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 8rem;
}

/* Help text sits under the control and is wired to it by Fluent Forms. */
.frm-fluent-form .ff-el-help-message {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin-block-start: var(--space-xs);
}

/* Checkboxes and radios — real inputs, visible, with adequate target size. */
.frm-fluent-form .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-block-end: var(--space-sm);
	min-height: 24px;
}

.frm-fluent-form .ff-el-form-check input[type="checkbox"],
.frm-fluent-form .ff-el-form-check input[type="radio"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.2rem 0 0 0;
	flex-shrink: 0;
}

.frm-fluent-form .ff-el-form-check label,
.frm-fluent-form .ff-el-form-check-label {
	font-weight: 400;
	margin: 0;
}

/* Grouped inputs must be a fieldset with a legend (WCAG 1.3.1). */
.frm-fluent-form fieldset {
	border: 1px solid var(--color-border-light);
	padding: var(--space-md);
	margin-block-end: var(--space-lg);
}

.frm-fluent-form legend {
	font-weight: 700;
	padding-inline: var(--space-xs);
}

/* Submit button — 44px minimum target (WCAG 2.5.8). */
.frm-fluent-form .ff-btn,
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button[type="submit"] {
	display: inline-block;
	min-height: 44px;
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-button-bg);
	color: var(--color-button-text);
	border: 1px solid var(--color-button-bg);
	border-radius: 3px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	cursor: pointer;
}

.frm-fluent-form .ff-btn:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover {
	background-color: var(--color-link-hover);
	border-color: var(--color-link-hover);
}

/* Errors. Colour alone never carries the message (WCAG 1.4.1): the field gains
   a thicker border and the message is text. */
.frm-fluent-form .ff-el-is-error .ff-el-form-control,
.frm-fluent-form .ff-el-form-control[aria-invalid="true"] {
	border-color: var(--color-error);
	border-width: 2px;
}

.frm-fluent-form .error,
.frm-fluent-form .text-danger,
.frm-fluent-form .ff-el-is-error .error-text {
	display: block;
	color: var(--color-error);
	font-size: var(--font-size-sm);
	font-weight: 700;
	margin-block-start: var(--space-xs);
}

.frm-fluent-form .ff-el-ff-message-error,
.frm-fluent-form .ff_submit_failed,
.frm-fluent-form .error_message {
	background-color: var(--color-error-bg);
	border-inline-start: 4px solid var(--color-error);
	color: var(--color-error);
	padding: var(--space-md);
	margin-block-end: var(--space-lg);
}

.frm-fluent-form .ff-message-success,
.frm-fluent-form .ff_message_success {
	background-color: var(--color-success-bg);
	border-inline-start: 4px solid var(--color-success);
	color: var(--color-success);
	padding: var(--space-md);
	margin-block-end: var(--space-lg);
}

/* Step / multi-page forms degrade to a plain stack. */
.frm-fluent-form .ff-step-container,
.frm-fluent-form .ff-step-body {
	display: block;
	width: 100%;
	transform: none;
}

@media (forced-colors: active) {
	.frm-fluent-form .ff-el-form-control {
		border: 1px solid CanvasText;
	}

	.frm-fluent-form .ff-btn,
	.frm-fluent-form .ff-btn-submit {
		border: 2px solid ButtonText;
	}
}

/* ==========================================================================
   Third-party markup left behind after asset removal

   Dequeuing styles and scripts removes ASSETS, not MARKUP. Plugins that print
   directly on wp_footer, or render container blocks into post content, still
   emit their HTML — it simply arrives unstyled and with no JavaScript to
   operate it. What is left behind is worse than useless: empty landmarks,
   orphaned buttons that are focusable but inert, and overlay wrappers that no
   longer hide themselves.

   `display: none` is the correct treatment for the inert controls: it removes
   them from the accessibility tree AND from the tab order, which visually
   hiding alone would not.
   ========================================================================== */

/* GP Premium slideout: an empty nav landmark plus a "Close" button with
   nothing to close. Both are keyboard focusable and announce as real controls. */
#generate-slideout-menu,
.slideout-overlay,
.slideout-navigation,
.gb-overlay__backdrop,
.gb-overlay__close,
.mobile-menu-control-wrapper,
.menu-toggle {
	display: none !important;
}

/* Builder overlay wrappers hold real content — often the contact form — so
   they are laid out as ordinary blocks rather than hidden. The plugin's
   aria-hidden and dialog role are stripped server-side by the theme switcher;
   this restores normal flow so the content is actually reachable. */
.gb-overlay,
.gb-overlay--standard,
.gb-overlay__content {
	position: static !important;
	display: block !important;
	inset: auto !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible !important;
	z-index: auto !important;
}

/* Builder layout wrappers collapse to a single column. */
.gb-element-5f712005,
.gb-element-89755e2b,
[class*="gb-element-"] {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin-inline: 0 !important;
	background: none !important;
}

/* Fluent Forms inline per-form <style> blocks set their own button colours,
   which are not contrast-checked. Ours wins. */
.frm-fluent-form .ff-btn-submit.wpf_has_custom_css {
	background-color: var(--color-button-bg) !important;
	border-color: var(--color-button-bg) !important;
	color: var(--color-button-text) !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 44px !important;
	font-size: var(--font-size-base) !important;
}

.frm-fluent-form .ff-btn-submit.wpf_has_custom_css:hover {
	background-color: var(--color-link-hover) !important;
	border-color: var(--color-link-hover) !important;
	color: var(--color-button-text) !important;
}

/* Stray spacer paragraphs full of <br> add nothing in a single-column read. */
.gb-overlay p:empty {
	display: none;
}

/* ==========================================================================
   Header contact and footer detail
   ========================================================================== */

.site-logo img {
	max-height: 60px;
	width: auto;
}

.site-contact {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 700;
}

.site-phone {
	display: inline-block;
	/* WCAG 2.5.8 Target Size (Minimum). */
	min-height: 44px;
	padding-block: var(--space-xs);
	white-space: nowrap;
}

.site-footer .container {
	display: block;
}

.footer-heading {
	font-size: var(--font-size-lg);
	margin-block: 0 var(--space-sm);
}

.footer-address {
	font-style: normal;
	margin-block-end: var(--space-md);
}

.footer-address .business-name {
	font-weight: 700;
}

.footer-contact-list,
.footer-links {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.footer-contact-list li,
.footer-links li {
	margin: 0;
}

.footer-contact-list a,
.footer-links a {
	display: inline-block;
	min-height: 24px;
	padding-block: var(--space-xs);
}

.exit-reading-mode {
	font-weight: 700;
}