/*
Theme Name: Project Staffing Blue
Theme URI: https://projectstaffing.company/
Author: Project Staffing Company
Description: Custom block theme for the Project Staffing Company's corporate website.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.5.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: projectstaffingblue
*/

/* Footer social icons: WP core's social-links block only ships three style
   presets (circle, logos-only, pill) — no square. The icon background shape
   is just border-radius though, so this swaps the default circle for a
   rounded square matching the 4px radius already used on buttons sitewide,
   rather than needing different icon assets. */
.is-style-square-icons .wp-social-link {
	border-radius: 4px !important;
}

/* Tagline marquee (patterns/marquee-tagline.php). Structure/animation technique
   reused from spadeavenuewhite's client-logo-marquee: two identical tracks
   side by side (the second aria-hidden, invisible to assistive tech but needed
   visually), the pair animated left by exactly one track's width + the gap
   between them, so the loop point is seamless — the moment track 1 has fully
   scrolled off, track 2 is sitting exactly where track 1 started. */
.motto-marquee {
	width: 100%;
	overflow: hidden;
	padding: 1rem 0;
	background-color: var(--wp--preset--color--white);
}

.motto-marquee__wrap {
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: 2rem;
}

.motto-marquee__track {
	flex-shrink: 0;
	min-width: 100%;
	display: flex;
	align-items: center;
	gap: 2rem;
	animation: motto-marquee-scroll 90s linear infinite;
}

.motto-marquee__item {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy-900);
}

.motto-marquee__logo {
	flex: 0 0 auto;
	height: 28px;
	width: 28px;
	object-fit: contain;
}

@keyframes motto-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-100% - 2rem));
	}
}

/* Media & Text blocks (patterns/media-text-split-left.php, media-text-split-right.php):
   WP core always stacks the image first on mobile regardless of desktop left/right
   position (see wp-includes/blocks/media-text/style.css) — overridden here so text
   always leads on small screens instead, matching the same fix from spadeavenuewhite.
   !important + matching core's own 600px breakpoint, since this needs to win over
   core's same-specificity rule regardless of stylesheet load order. */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-row: 1 !important;
	}
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-row: 2 !important;
	}
}

/* Bullet lists: browser/WP default padding-left is 40px, purely to make room
   for the marker — noticeably wider than the heading/paragraph text above it
   needs, especially inside a narrower column like the Why PSC? media-text
   split. Tightened site-wide rather than just on that one instance, since
   the same default affects every bulleted list on the site equally. */
.wp-block-list {
	padding-left: 20px;
}

/* Logo sized by height, not width, so it scales cleanly if a differently-
   shaped logo ever replaces this one. 40px is the tallest it can be without
   growing the compact header itself — at this height the logo already ties
   the nav text as the bar's tallest element (nav line-height is ~25.6px), so
   the header's height is effectively defined by the logo; any taller and the
   whole bar grows by the same amount on every page. */
.wp-block-site-logo.site-logo-fixed-height img {
	height: 40px !important;
	width: auto !important;
	max-width: none !important;
}

/* WP's own block-gap CSS adds margin-block-start to every child of
   .wp-site-blocks except the first — and since our actual header is
   position:fixed, the outer template-part wrapper around it collapses to
   zero height, making <main> the *second* child. That gave <main> (and on
   the front page, the banner as its first child) an untracked 20px gap at
   the top on every page. Zeroed here so the only vertical offset comes from
   the header-height padding we set explicitly. */
.wp-site-blocks > main {
	margin-block-start: 0 !important;
}

/* Visible keyboard focus everywhere - not just on links/buttons covered by theme.json elements */
:where(.wp-site-blocks *:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-600);
	outline-offset: 2px;
}

/*
 * Sticky header, at 85% opacity, always the same (compact) height on every
 * page — every page's banner photo is a separate, normal-flow content block
 * (see the hero-banner rule below), not part of the header itself, so only
 * the nav bar stays pinned while the photo scrolls away normally underneath
 * it.
 *
 * Uses position: fixed rather than sticky — sticky positioning silently
 * stops working under certain ancestor stacking/overflow contexts, which is
 * exactly what broke it here. Fixed has no such restriction, at the cost of
 * removing the header from normal flow, so .wp-site-blocks below compensates
 * with matching padding-top on the one template that doesn't have a banner
 * (404) — every page with a banner (front page + all regular pages, see the
 * has-hero-banner body class in functions.php) skips that padding instead,
 * since the banner is meant to render right at the top, underneath the
 * transparent header, rather than be pushed down below it.
 *
 * --header-height defaults to an approximate value here; assets/js/sticky-
 * header.js measures the real rendered height on load/resize and overwrites
 * it, so the compensating padding stays accurate at every breakpoint without
 * hardcoding per-breakpoint numbers.
 *
 * The opacity itself is applied to the background only (via color-mix), not
 * the header element as a whole — a literal `opacity: 0.85` would also fade
 * the logo and nav text, which fails the WCAG contrast work already done on
 * this palette once page content scrolls underneath and shows through.
 */
:root {
	--header-height: 76px;
}

.site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100;
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent) !important;
}

/* More transparent on every banner page, so the photo reads clearly through
   the nav bar floating over it. */
body.has-hero-banner .site-header {
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent) !important;
}

.wp-site-blocks {
	padding-top: var(--header-height) !important;
}

body.has-hero-banner .wp-site-blocks {
	padding-top: 0 !important;
}

/* Hero banners (front page and every regular page): fluid height instead of
   a fixed one, so it scales smoothly with viewport width rather than being
   disproportionately tall on mobile or capped too short on a wide desktop
   screen. Overrides the block editor's fixed inline min-height (kept there
   as a sensible editor-preview fallback). Both banner patterns share this
   rule so their sizing/behavior stays identical by construction, not by
   duplicated numbers that could drift apart. */
.front-page-banner,
.default-page-banner {
	min-height: clamp(320px, 40vw, 600px) !important;
}

/* The fixed header doesn't get automatically pushed down by the margin
   WordPress adds to <html> for the admin bar on normal-flow pages, since
   fixed positioning isn't part of that flow. Without this, the admin bar
   (z-index 99999) covers the top of the header while logged in. Matches WP
   core's own admin-bar height/breakpoint. */
body.admin-bar .site-header {
	top: 32px !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px !important;
	}
}

/* Keeps in-page anchor jumps (e.g. the skip link) from landing underneath
   the fixed header. */
html {
	scroll-padding-top: var(--header-height);
}

/* WPForms submit button — match the site's standard CTA button (the accent
   button style used on Home/Services/Careers), not WPForms' own default blue. */
.wpforms-form button[type=submit] {
	background-color: var(--wp--preset--color--accent-600) !important;
	border: none !important;
	border-radius: 4px !important;
	color: var(--wp--preset--color--white) !important;
	padding: 0.75rem 1.75rem !important;
	font-weight: 600 !important;
	transition: background-color 0.3s ease-in-out, transform 0.15s ease, box-shadow 0.15s ease;
}

.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:focus {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-600) 85%, black) !important;
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/*
 * Link hover/focus treatment.
 *
 * Links are color-only at rest (no permanent underline) — this is WCAG 1.4.1
 * compliant per technique G183: Primary 700 has 3.97:1 contrast against black
 * body text (>= the 3:1 minimum for color-only link identification) and 5.29:1
 * against the white background (comfortably clears the separate 4.5:1 text-
 * contrast minimum, SC 1.4.3). G183 also requires a non-color cue on both
 * hover AND focus, provided below by the animated underline reveal.
 *
 * The underline uses a background-image (not text-decoration or a ::after
 * pseudo-element) specifically so it animates smoothly and still renders
 * correctly on links that wrap across multiple lines.
 */
:where(.wp-site-blocks) a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link) {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.2s ease, color 0.15s ease;
}

:where(.wp-site-blocks) a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link):hover,
:where(.wp-site-blocks) a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):not(.custom-logo-link):focus {
	background-size: 100% 2px;
}

/* Same animated-underline treatment for nav items (including the Home link),
   kept as a separate rule since they're flex children, not wrapped inline text. */
.wp-block-navigation-item__content {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.2s ease;
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus {
	background-size: 100% 2px;
}

/* Regular weight for nav links (header + footer), bold only for the current page.
   [aria-current="page"] is what WP renders on whichever item matches the current
   page, for both the Home Link block and ordinary navigation-link items. */
.wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
}

/* Footer links (e.g. the copyright line's company-name link) would otherwise
   pick up theme.json's global link color (Primary 700, Navy 900 on hover) —
   correct on a white background, but on the footer's navy-900 background the
   hover state would land nearly invisible. The footer's nav links avoid this
   by setting textColor explicitly on the wp:navigation block itself; plain
   links elsewhere in the footer (not wrapped in a block that does that) need
   the same fix, so they match the nav items: white at rest, no color change
   on hover, with the animated underline (see the a:hover rule above) as the
   only non-color hover/focus cue — identical treatment to the rest of the
   footer's white text. */
.site-footer a:not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor) {
	color: inherit;
}

.site-footer a:not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):hover,
.site-footer a:not(.wp-block-navigation-item__content):not(.wp-block-social-link-anchor):focus {
	color: inherit;
}

/* Buttons: color transition plus a tactile lift + shadow on hover/focus, rather
   than a flat color-only change (covers default and accent core/button styles;
   WPForms' own submit button above gets the matching treatment separately). */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-element-button:focus,
.wp-block-button__link:focus {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Respect reduced-motion preference: collapse every transition/animation above
   to effectively instant rather than removing the resulting hover/focus state. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}