/*
Theme Name: WaliRides
Theme URI: https://walirides.com
Author: WaliRides
Description: Marketing site theme for WaliRides, safe and visible school transport for parents, schools and drivers. Block theme with the WaliRides brand palette, launch animation and page patterns.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: walirides
Tags: block-patterns, full-site-editing, custom-colors, editor-style, one-column, wide-blocks
*/

/* Dark mode follows the system setting. Brand colours (primary, accent, on-accent, success) stay fixed. */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--ink: #ffffff;
		--wp--preset--color--hyperlink: #4d85ff;
		--wp--preset--color--base: #0d1117;
		--wp--preset--color--base-alt: #161b22;
		--wp--preset--color--line: #30363d;
		--wp--preset--color--contrast: #e6edf3;
		--wp--preset--color--muted: #8b949e;
	}
}

/* Skip link and focus (WCAG 2.2: visible focus). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-weight: 600;
	height: auto;
	left: 8px;
	padding: 12px 20px;
	top: 8px;
	width: auto;
	z-index: 100000;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Sticky header with a hairline once the page scrolls (class set by launch.js). */
.wr-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s;
}
.admin-bar .wr-site-header { top: var(--wp-admin--admin-bar--height, 0); }
.wr-scrolled .wr-site-header { border-bottom-color: var(--wp--preset--color--line); }

/* Header: the two buttons become menu items below 1080px (the core menu collapses below 600px). */
.wr-nav-compact { display: none !important; }
@media (max-width: 1079px) {
	.wr-header-actions { display: none !important; }
	.wr-nav-compact { display: flex !important; }
}

/* Footer */
.wr-footer-links { list-style: none; padding-left: 0; margin: 0; }
.wr-footer-links li { margin-block: 10px; }
.wr-footer-links a { text-decoration: none; }
.wr-footer-links a:hover { text-decoration: underline; }
.wr-site-footer .wr-footer-rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background: none;
	opacity: 1;
}
.wr-site-footer > .wp-block-walirides-copyright { max-width: var(--wp--style--global--wide-size); opacity: 0.85; }

/* Brand logo block */
.wp-block-walirides-logo { display: inline-flex; line-height: 0; color: var(--wp--preset--color--ink); }
.wp-block-walirides-logo a { display: inline-flex; line-height: 0; color: inherit; }
.wp-block-walirides-logo svg,
.wp-block-walirides-logo img { width: var(--wr-logo-width, 168px); height: auto; display: block; }

/* Cards */
.wr-card {
	height: 100%;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wr-card:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--raised); }

/* Icon chips used in feature grids (inline SVG inside core/html is avoided; icons are images). */
.wr-icon img { width: 44px; height: 44px; }

/* Step numbers in "How it works" */
.wr-step-number {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-weight: 700;
}

/* Small label pill ("Coming next", eyebrows) */
.wr-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* FAQ (core/details) */
.wr-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}
.wr-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	min-height: 24px;
}
.wr-faq .wp-block-details[open] summary { margin-bottom: var(--wp--preset--spacing--20); }

/* Card grids: N columns, 2 on tablets, 1 on phones. */
.wr-grid.wr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wr-grid.wr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wr-grid.wr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) {
	.wr-grid.wr-grid-3, .wr-grid.wr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
	.wr-grid.wr-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Section bits */
.wr-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0; }
.wr-intro { margin-bottom: var(--wp--preset--spacing--50); }
.wr-intro .wr-eyebrow { text-align: center; }
.wr-page-header h1 { font-size: var(--wp--preset--font-size--xx-large); }
.wr-hero h1 { max-width: 16ch; }
.wr-fact { gap: var(--wp--preset--spacing--30); }
.wr-fact p { margin: 0; }
.wr-fact .wr-icon, .wr-card .wr-icon { margin: 0; flex: none; }
.wr-step { padding-top: var(--wp--preset--spacing--20); }
.wr-step h3 { margin-top: var(--wp--preset--spacing--30); }
.wr-checklist { padding-left: 1.25em; }
.wr-checklist li { margin-block: 0.5em; }
.wr-checklist li::marker { color: var(--wp--preset--color--primary); }
.wr-steps-list li::marker { color: var(--wp--preset--color--primary); font-weight: 700; }

/* The navy CTA band: the outline button turns white. */
.wr-cta-band .is-style-outline .wp-block-button__link,
.wr-site-footer .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}
.wr-cta-band a:not(.wp-block-button__link) { color: #fff; }

/* Cards sit on the alt background; on the plain background they get a border. */
.wr-card { border: 1px solid var(--wp--preset--color--line); }
.has-base-alt-background-color .wr-card { border-color: transparent; box-shadow: var(--wp--preset--shadow--card); }

/* "Coming next" cards are visibly different from live features. */
.wr-roadmap .wr-card { background: transparent !important; border: 1px dashed var(--wp--preset--color--line); box-shadow: none; }
.wr-roadmap .wr-card:hover { transform: none; box-shadow: none; }

/* Illustrations keep their own card background, so they read in both themes. */
.wr-illustration img { border-radius: 20px; box-shadow: var(--wp--preset--shadow--raised); }

/* Fluent Forms inside the demo-form block: brand inputs that also work in dark mode. */
.wp-block-walirides-demo-form .ff-el-input--label label { color: var(--wp--preset--color--ink); font-weight: 600; }
.wp-block-walirides-demo-form .ff-el-form-control {
	font-size: 1rem;
	min-height: 48px;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.wp-block-walirides-demo-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--primary); }
.wp-block-walirides-demo-form .ff-el-help-message { color: var(--wp--preset--color--muted); }
.wp-block-walirides-demo-form .ff_tc_checkbox { color: var(--wp--preset--color--contrast); }
.wp-block-walirides-demo-form .ff-btn-submit {
	font-weight: 700;
	border-radius: 10px;
	padding: 14px 28px;
	font-size: 1rem;
}

/* Contact form placeholder for editors when the form plugin is inactive */
.wr-form-notice {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: reduce) {
	.wr-card, .wr-site-header { transition: none; }
	.wr-card:hover { transform: none; }
}