/*
Theme Name: Reclaim Our Data
Theme URI: https://reclaimourdata.org
Description: Block theme for ReclaimOurData.org. All page design lives in patterns/ so the site rebuilds from source rather than from a database backup.
Author: Reclaim Our Data
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 6.7
Tested up to: 7.0.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reclaim
*/

/* Design lives in theme.json. This file exists for the header above, plus the
   few rules that theme.json cannot express. */

/* ---------------------------------------------------------------------------
   Dark mode.

   theme.json has no notion of colour schemes, so the presets are overridden
   here. Only the PAGE tokens flip: base, surface, border, ink, ink-soft,
   primary, link. The `paper` and `paper-soft` tokens never flip, because they
   are the text that sits ON the navy hero and the red banner -- surfaces that
   are dark in both modes. Flipping `base` for those would have turned the hero
   headline black on navy.

   `highlight` (#06BAFC) stays decorative in both modes. It measures 2.11:1 on
   cream, so it can never carry text in light mode, and consistency beats a
   mode-specific exception.

   Specificity: WordPress emits its presets on `:root` (0,1,0). Both selectors
   below are (0,2,0), so they win without !important.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #0B1220;
	--wp--preset--color--surface: #16233A;
	--wp--preset--color--border: #2C3E5A;
	--wp--preset--color--ink: #F3EFE1;
	--wp--preset--color--ink-soft: #AEBACB;
	--wp--preset--color--primary: #20477C;
	--wp--preset--color--link: #8FBCF0;
}

/* Same values, applied when the visitor has expressed no preference and the OS
   asks for dark. Duplicated because CSS cannot share a declaration block across
   a media query and a plain selector. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #0B1220;
		--wp--preset--color--surface: #16233A;
		--wp--preset--color--border: #2C3E5A;
		--wp--preset--color--ink: #F3EFE1;
		--wp--preset--color--ink-soft: #AEBACB;
		--wp--preset--color--primary: #20477C;
		--wp--preset--color--link: #8FBCF0;
	}
}

/* The theme toggle. It lives in the header next to the primary action.
   Square, because it holds an icon rather than a word. 36px is comfortably
   over the 24px minimum target size in WCAG 2.2. */
.rod-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	cursor: pointer;
}

.rod-theme-toggle:hover {
	border-color: var(--wp--preset--color--ink-soft);
}

.rod-theme-toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* No JavaScript, no toggle. The OS preference still applies. */
.rod-theme-toggle[hidden] {
	display: none;
}

.rod-theme-toggle__icon {
	width: 1.15rem;
	height: 1.15rem;
	/* The strokes are painted with `currentColor`, so the icon inherits the
	   button's ink and flips with the theme along with everything else. */
	display: block;
}

/* Light: offer the moon. Dark: offer the sun. Which of the two is showing is
   decided in CSS, not by JavaScript rewriting the DOM after paint.

   Both branches are spelled out for the same reason the colour tokens below
   are: with no stored preference there is no `data-theme` attribute at all,
   and the OS media query is the only thing that knows which mode we are in. */
.rod-theme-toggle__icon--sun {
	display: none;
}

:root[data-theme="dark"] .rod-theme-toggle__icon--moon {
	display: none;
}

:root[data-theme="dark"] .rod-theme-toggle__icon--sun {
	display: block;
}

@media ( prefers-color-scheme: dark ) {
	:root:not([data-theme="light"]) .rod-theme-toggle__icon--moon {
		display: none;
	}

	:root:not([data-theme="light"]) .rod-theme-toggle__icon--sun {
		display: block;
	}
}

/* Form controls come from Fluent Forms with its own light styling. Painting
   them from our tokens makes them correct in both modes with one rule set. */
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="url"],
.frm-fluent-form textarea,
.frm-fluent-form select {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.frm-fluent-form input:focus,
.frm-fluent-form textarea:focus,
.frm-fluent-form select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.frm-fluent-form label,
.frm-fluent-form .ff-el-input--label label {
	color: var(--wp--preset--color--ink);
}

.frm-fluent-form .ff-el-form-check-label,
.frm-fluent-form .ff-el-help-message {
	color: var(--wp--preset--color--ink-soft);
}

/* The forms' honeypot. Hidden from sight but not from bots, and kept out
   of the accessibility tree so screen readers never announce it. */
.rod-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The pledge clauses, set apart from the surrounding prose. */
.rod-demand {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface);
}

/* theme.json colours every link `primary` (navy). On the navy hero and footer,
   and on the red revocation banner, that renders the link invisible or
   near-invisible against its own background. Cream reads 13.1:1 on navy and
   5.2:1 on the action red. Buttons are excluded -- they carry their own colour. */
.has-primary-background-color a:not(.wp-element-button),
.has-accent-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.has-primary-background-color a:not(.wp-element-button):hover,
.has-accent-background-color a:not(.wp-element-button):hover {
	text-decoration: none;
}

/* Click-to-play video facade. Nothing here loads from Google. */
.rod-video {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.rod-video__btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
	cursor: pointer;
	background-color: var(--wp--preset--color--primary);
}

.rod-video__btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.rod-video__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.rod-video__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--primary);
}

/* A cream triangle on the Action Red disc: 5.16:1, the same contrast the
   primary button relies on. */
.rod-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4.5rem;
	height: 4.5rem;
	transform: translate( -50%, -50% );
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

.rod-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate( -50%, -50% );
	border-style: solid;
	border-width: 0.85rem 0 0.85rem 1.4rem;
	border-color: transparent transparent transparent var(--wp--preset--color--paper);
}

/* Hovering must not use `ink`: in dark mode ink is cream, and the cream play
   triangle would disappear into a cream disc. Navy works in both modes. */
.rod-video__btn:hover .rod-video__play {
	background-color: var(--wp--preset--color--primary);
}

.rod-video__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 6px;
}

.rod-video__note {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}