/*
Theme Name: PCC Commercial Site
Theme URI: https://example.invalid/pcc-commercial-site
Author: PCC Commercial Website Workstream
Author URI: https://example.invalid/
Description: Native Full Site Editing block theme for the PCC public commercial website. Restrained, technically credible visual language, brand-neutral and centrally re-brandable. Responsive from 320px with an accessible navigation overlay and AA-verified contrast. No page builder; theme.json version 3.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pcc-commercial-site
Tags: full-site-editing, block-patterns, accessibility-ready, blog, portfolio
*/

/*
 * Presentation is defined in theme.json. This file holds only supplemental rules that
 * theme.json cannot express (accessibility affordances and reduced-motion handling).
 * Colours and spacing reference CSS custom properties emitted by theme.json.
 */

/* Skip link — visible on focus */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--accent-strong, #1f4d63);
	text-decoration: underline;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* Visible focus for keyboard users */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2f6f8f);
	outline-offset: 2px;
}

/* Evidence-status chip — colour is paired with a text label in markup */
.pcc-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1;
	padding: 0.3em 0.6em;
	border-radius: 999px;
	border: 1px solid currentColor;
}

.pcc-status::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: currentColor;
}

.pcc-status--operational { color: #1f7a4d; }
.pcc-status--validated { color: #2f6f8f; }
.pcc-status--active-development { color: #8a6d1f; }
.pcc-status--projected,
.pcc-status--proposed { color: #6b6f76; }
.pcc-status--held { color: #8a5a1f; }
.pcc-status--superseded,
.pcc-status--unavailable,
.pcc-status--excluded { color: #6b7280; }

/* Field/network decorative geometry stays behind content and is non-interactive */
.pcc-field {
	pointer-events: none;
}

/* Enquiry form — accessible, restrained, no framework */
.pcc-enquiry label {
	font-weight: 600;
}

.pcc-enquiry input[type="text"],
.pcc-enquiry textarea {
	width: 100%;
	max-width: 34rem;
	padding: 0.6em 0.7em;
	border: 1px solid var(--wp--preset--color--line, #d6dde6);
	border-radius: 6px;
	font: inherit;
	color: inherit;
	background: var(--wp--preset--color--surface, #fff);
}

.pcc-enquiry fieldset {
	border: 1px solid var(--wp--preset--color--line, #d6dde6);
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin: 1rem 0;
}

.pcc-enquiry legend {
	font-weight: 600;
	padding: 0 0.4em;
}

.pcc-enquiry button[type="submit"] {
	background: var(--wp--preset--color--accent, #2f6f8f);
	color: var(--wp--preset--color--ink-inverse, #eef2f8);
	border: 0;
	border-radius: 6px;
	padding: 0.8em 1.4em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.pcc-enquiry button[type="submit"]:hover,
.pcc-enquiry button[type="submit"]:focus-visible {
	background: var(--wp--preset--color--accent-strong, #1f4d63);
}

/*
 * Contact channel being configured.
 *
 * Shown in place of the enquiry form while contact routing is unresolved. Styled as a
 * calm, informative panel rather than an error: nothing has gone wrong, the channel is
 * simply not live yet. Status is carried by the heading text, not by colour alone.
 */
.pcc-contact-unavailable {
	border: 1px solid var(--wp--preset--color--line, #d6dde6);
	border-left: 4px solid var(--wp--preset--color--accent, #2f6f8f);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--surface, #fff);
}

.pcc-contact-unavailable > :first-child {
	margin-top: 0;
}

.pcc-contact-unavailable > :last-child {
	margin-bottom: 0;
}

/* Inline stand-in where a contact address would otherwise appear */
.pcc-contact-pending {
	font-style: italic;
}

/* ==========================================================================
 * Responsive system
 *
 * Breakpoints, stated once:
 *
 *   mobile   <= 599px   single column throughout, stacked full-width actions
 *   tablet   600–1023px  two-up card grids, navigation still an overlay
 *   desktop  >= 1024px   authored column counts, inline navigation
 *
 * The navigation overlay threshold is deliberately 1024px rather than the
 * WordPress default of 600px: the primary menu carries eight top-level items,
 * which cannot sit on one line below roughly 1000px without wrapping across the
 * header. Raising the threshold is what keeps the desktop bar on a single line
 * and gives tablets a usable toggle instead of a cramped inline menu.
 * ========================================================================== */

:root {
	--pcc-nav-breakpoint: 1024px; /* documentation; media queries cannot use vars */
	--pcc-col-gap: var(--wp--preset--spacing--70, 1.5rem);
	--pcc-touch-target: 44px;
	/* Reserved strip so a bottom-corner floating control cannot cover footer links. */
	--pcc-floating-safe-area: 3.5rem;
}

/* --------------------------------------------------------------- foundations */

/*
 * Border-box everywhere. Without it a full-width mobile button overflows its
 * container by its own padding and border, which is exactly the kind of 1–2px
 * horizontal overflow that is hard to spot and easy to ship.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Long URLs and identifiers may wrap; ordinary prose must never be hyphenated. */
body {
	overflow-wrap: break-word;
	hyphens: none;
}

/*
 * Overflow guard. `clip` is preferred over `hidden` because it does not turn the
 * element into a scroll container, which would break sticky positioning.
 */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

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

/* Wide tables scroll inside their own figure rather than widening the page. */
.wp-block-table {
	overflow-x: auto;
}

/* ------------------------------------------------------------------- header */

.site-header__bar {
	gap: var(--wp--preset--spacing--60);
}

/* Identity stays legible and on one line; it shrinks last. */
.site-header__identity {
	flex: 0 1 auto;
	min-width: 0;
}

.site-header__identity .wp-block-site-title {
	white-space: nowrap;
}

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

/* --------------------------------------------------- navigation: overlay mode */

/*
 * Below the navigation breakpoint the toggle is shown and the menu is only in
 * the DOM flow once opened. These selectors carry `.site-header` so they
 * out-specify the core block stylesheet without needing !important.
 */
@media (max-width: 1023px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Above it, the toggle disappears and the menu returns to the header bar. */
@media (min-width: 1024px) {
	.site-header .wp-block-navigation__responsive-container-open,
	.site-header .wp-block-navigation__responsive-container-close {
		display: none;
	}

	/*
	 * `overlayBackgroundColor` puts a `has-*-background-color` utility class on the
	 * container, and those utilities are emitted with !important. It must only apply
	 * to the open overlay — left alone it paints a dark band across the desktop
	 * header — so the closed state resets it with equal weight.
	 */
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: flex;
		position: relative;
		width: auto;
		background-color: transparent !important;
		color: inherit !important;
		padding: 0;
	}
}

/* Toggle and close controls: real touch targets, visible focus. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: var(--pcc-touch-target);
	min-height: var(--pcc-touch-target);
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
}

.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink, #1b2432);
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
	border-color: var(--wp--preset--color--line, #d6dde6);
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink-inverse, #eef2f8);
}

/* Open overlay: comfortable spacing and legible, tappable rows. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--pcc-touch-target);
	padding: 0.25rem 0;
	font-size: 1.125rem;
}

/*
 * Submenus are presented inline in the overlay — no hover dependency, no
 * off-screen positioning — so they remain reachable by keyboard and touch.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	position: static;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding-left: var(--wp--preset--spacing--60);
	opacity: 1;
	visibility: visible;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	padding: 0.5rem;
}

/* Navigation links: never fragment mid-word. */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__label,
.site-footer a {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Desktop bar: keep eight items on one line without crowding the identity. */
@media (min-width: 1024px) {
	.site-header .wp-block-navigation .wp-block-navigation__container {
		flex-wrap: nowrap;
	}

	.site-header .wp-block-navigation a {
		white-space: nowrap;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.site-header .wp-block-navigation {
		font-size: 0.9375rem;
	}

	.site-header .wp-block-navigation .wp-block-navigation__container {
		gap: 0.875rem;
	}
}

/* ------------------------------------------------------- columns and layouts */

/*
 * Tablet: two-up rather than three- or four-up. Overrides the core rule that
 * forces `nowrap` from 782px, which would otherwise squeeze three cards into a
 * tablet width and produce the narrow columns that cause word fragmentation.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	/*
	 * flex-grow stays 0 so an odd third card holds the same half-width as the two
	 * above it, rather than stretching to full width and unbalancing the grid.
	 */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - (var(--pcc-col-gap) / 2)) !important;
		flex-grow: 0;
	}
}

/* Mobile: one column, everywhere, regardless of authored widths. */
@media (max-width: 599px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--70);
	}

	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}

	/* 6rem section padding is oppressive on a phone; halve it. */
	.wp-block-group[style*="--wp--preset--spacing--100"] {
		padding-top: var(--wp--preset--spacing--80) !important;
		padding-bottom: var(--wp--preset--spacing--80) !important;
	}
}

/* Cards keep breathing room but stop wasting width on the narrowest phones. */
@media (max-width: 374px) {
	.wp-block-column[style*="padding"] {
		padding: var(--wp--preset--spacing--60) !important;
	}
}

/* ------------------------------------------------------------------- footer */

@media (max-width: 1023px) {
	.site-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--70);
	}
}

/*
 * The identity column carries an authored width. Core still lets it grow, which
 * at desktop widths pushes it past half the footer and squeezes the three link
 * columns into a width where labels like "Standards & Conformance" wrap badly.
 * Hold it to its authored share and let the link columns take the remainder.
 */
@media (min-width: 1024px) {
	.site-footer .wp-block-column[style*="flex-basis"] {
		flex-grow: 0;
	}
}

@media (max-width: 599px) {
	/* Reserve space so a floating control cannot sit on top of footer links. */
	.site-footer {
		padding-bottom: calc(var(--wp--preset--spacing--80) + var(--pcc-floating-safe-area)) !important;
	}

	.site-footer .wp-block-list.is-style-none li {
		padding: 0.25rem 0;
	}

	.site-footer .wp-block-list.is-style-none a {
		display: inline-flex;
		align-items: center;
		min-height: var(--pcc-touch-target);
	}
}

/* ---------------------------------------------------------- calls to action */

/*
 * Mobile actions stack full width so the primary route is unmissable and every
 * target clears the 44px minimum. Hierarchy is preserved: the filled button
 * stays filled, the outline buttons stay outlined.
 */
@media (max-width: 599px) {
	.wp-block-buttons {
		gap: var(--wp--preset--spacing--50);
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: var(--pcc-touch-target);
		text-align: center;
	}
}

/* Between mobile and desktop, let buttons wrap deliberately rather than overflow. */
@media (min-width: 600px) {
	.wp-block-buttons {
		flex-wrap: wrap;
	}

	.wp-block-button__link {
		min-height: var(--pcc-touch-target);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ------------------------------------------------- dark-section legibility */

/*
 * Sections on the dark base invert their palette. The accent and status colours
 * are tuned for light surfaces and fall well below AA on #0e1420, so dark
 * contexts get lighter variants. Ratios are asserted by scripts/check-contrast.py.
 */
.has-base-background-color .has-accent-color,
.pcc-hero .has-accent-color {
	color: var(--wp--preset--color--accent-light, #6fb0d0);
}

.has-base-background-color a:where(:not(.wp-element-button)),
.pcc-hero a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-light, #6fb0d0);
}

.has-base-background-color .pcc-status--operational { color: #3fae74; }
.has-base-background-color .pcc-status--validated { color: #6fb0d0; }
.has-base-background-color .pcc-status--active-development { color: #c9a63e; }
.has-base-background-color .pcc-status--projected,
.has-base-background-color .pcc-status--proposed { color: #9aa2ae; }
.has-base-background-color .pcc-status--held { color: #d09050; }
.has-base-background-color .pcc-status--superseded,
.has-base-background-color .pcc-status--unavailable,
.has-base-background-color .pcc-status--excluded { color: #9aa2ae; }

/* Outline buttons on dark need a visible edge. */
.has-base-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.pcc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--ink-inverse, #eef2f8);
	border-color: var(--wp--preset--color--ink-inverse, #eef2f8);
}

/* ------------------------------------------------------------------- rhythm */

/* Deliberate spacing between headings, prose, badges and actions. */
.pcc-status {
	margin-bottom: var(--wp--preset--spacing--50);
}

.wp-block-buttons {
	margin-top: var(--wp--preset--spacing--70);
}

@media (max-width: 599px) {
	.pcc-hero .wp-block-buttons {
		margin-top: var(--wp--preset--spacing--80);
	}
}

/* Motion discipline */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}