/*
Theme Name:        CLA Showcase (Philstack Staging)
Description:       Lightweight replica of the laundryassociation.org look, for previewing Philstack work in progress on a password-protected staging site. Header, footer, and page templates only. Not for production.
Author:            Philstack LLC
Author URI:        https://philstack.com
Version:           0.3.0
Requires at least: 6.6
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       cla-showcase
*/

/*
 * Colors, fonts, type scale, links, headings, and buttons live in theme.json.
 * This file holds only what theme.json cannot express: the custom header and
 * footer chrome, the title banner, and accessibility utilities.
 *
 * Everything references the --wp--preset--* variables so this file never
 * introduces a second set of color tokens.
 */

/* ---------- Accessibility utilities ---------- */

/* Block themes don't ship this class; WordPress core and many plugins rely on it. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important; /* must beat layout rules that set position on children */
	width: 1px;
	word-wrap: normal !important;
}

/* Visible focus everywhere. currentColor keeps it legible on white and on blue. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* ---------- Staging bar (doubles as CLA's announcement bar) ---------- */

.ps-topbar {
	background: var(--wp--preset--gradient--blue-sweep);
	color: var(--wp--preset--color--base);
	padding-block: 0.5rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ps-topbar p {
	margin: 0;
}

.ps-tag {
	display: inline-block;
	margin-inline-end: 0.5rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tertiary);
	/* Dark text on the green measures ~7.3:1; white measures 2.25:1. */
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ---------- Header ---------- */

.ps-header {
	background: var(--wp--preset--color--base);
	padding-block: 1rem;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
}

.ps-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.ps-header .wp-block-site-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.ps-utilitynav,
.ps-mainnav {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* The My Lists button is excluded: these rules outrank the plugin's single
   class and would recolour it and underline it on hover. */
.ps-utilitynav a,
.ps-mainnav a:not(.cla-mylists-btn) {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.ps-utilitynav a:hover,
.ps-mainnav a:not(.cla-mylists-btn):hover {
	text-decoration: underline;
}

/* Portal and login are inert stand-ins on staging (see README). */
.ps-portal-pills {
	margin: 0;
	display: flex;
	gap: 0.5rem;
}

.ps-pill {
	display: inline-block;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.ps-pill--blue {
	background: var(--wp--preset--color--primary);
}

.ps-pill--green {
	background: var(--wp--preset--color--tertiary);
	/* Matches live CLA (white on green, 2.25:1, fails WCAG AA). See README. */
}

.ps-header .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	padding: 0.25rem;
}

/* The utility row is secondary navigation; on small screens the main menu's
   overlay is enough, and two hamburger menus would be confusing. */
@media (max-width: 781px) {
	.ps-utility-row {
		display: none !important; /* overrides the flex display set by layout support */
	}
}

/* The main menu's copy of the My Lists button (added in functions.php) is for
   widths where the utility row above is hidden. Three classes, to outrank
   core's display rule for navigation items. */
@media (min-width: 782px) {
	.wp-block-navigation.ps-mainnav .ps-mylists-item {
		display: none;
	}
}

/* ---------- Page title banner ---------- */

.ps-title-banner {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

/* Decorative bubbles echoing CLA's banner. Pure CSS, so nothing for assistive tech to announce. */
.ps-title-banner::before,
.ps-title-banner::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--wp--preset--color--quaternary);
	opacity: 0.35;
	pointer-events: none;
}

.ps-title-banner::before {
	width: 6rem;
	height: 6rem;
	top: -2rem;
	left: -2rem;
}

.ps-title-banner::after {
	width: 1rem;
	height: 1rem;
	top: 1.5rem;
	left: 4.5rem;
}

.ps-title-banner .wp-block-post-title {
	position: relative; /* sits above the bubbles */
	color: var(--wp--preset--color--base);
	margin: 0;
}

.ps-main {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* ---------- Footer ---------- */

.ps-footer {
	background: var(--wp--preset--gradient--blue-sweep);
	color: var(--wp--preset--color--base);
	padding-block: 3rem;
	text-align: center;
	font-weight: 400;
}

.ps-footer a {
	color: var(--wp--preset--color--base);
}

.ps-footer .wp-block-social-links {
	gap: 1rem;
}

.ps-footer .wp-social-link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.ps-footer .wp-social-link a {
	color: var(--wp--preset--color--primary);
	padding: 0.6rem;
}

.ps-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0;
}

.ps-footer .wp-block-site-title a {
	text-decoration: none;
}

.ps-footer-links a {
	text-decoration: none;
	margin-inline: 0.5rem;
}

.ps-footer-links a:hover {
	text-decoration: underline;
}

.ps-footer-legal {
	font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}