/*
Theme Name: Scraper Blades USA
Theme URI: https://scraperbladesusa.com/
Author: Web Design Woodlands
Author URI: https://www.webdesignwoodlands.com/
Description: Custom block theme for Scraper Blades USA, a division of Highland Plastics. Design tokens are generated from the approved static design system; page content is authored entirely with core Gutenberg blocks.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.5.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scraper-blades
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, one-column, wide-blocks
*/

/* --------------------------------------------------------------------------
   Everything expressible as a design token lives in theme.json, not here.
   This file carries only what theme.json cannot describe.
   Site chrome styling arrives in Phase 3 (assets/css/site-chrome.css).
   -------------------------------------------------------------------------- */

/* theme.json can only express :focus for the link element, not :focus-visible, so
   its red ring also fires on mouse clicks and on programmatic focus — which is why
   opening the mobile menu drew a red box around its first link before the reader had
   touched anything. Suppress the ring where the browser says an indicator is not
   wanted; the :focus-visible rules below still serve keyboard users. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

/* Visible focus on every interactive element (design system §15).
   Red ring on light grounds, white on dark and red ones so it never disappears. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 2px;
}

:where(.has-ink-background-color, .has-navy-background-color, .has-black-background-color,
	.has-red-background-color) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Uppercase runs need tracking or Montserrat looks cramped (design system §5.3). */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

/* Dimensions and figures must align vertically wherever they are tabulated. */
.is-style-tabular,
:where(table) {
	font-variant-numeric: tabular-nums;
}

/* Skip link: WordPress injects it, the theme makes it match the brand. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 22px;
	border-radius: 3px;
	z-index: 999999;
}

/* --------------------------------------------------------------------------
   Buttons — motion and the outline variant's hover.
   theme.json carries the colours, but it cannot express transitions, the 2px
   lift, or a hover for core's is-style-outline (design system §8.1, §13).
   -------------------------------------------------------------------------- */

/* Reference .btn is a 48px-min inline-flex box; core buttons are inline-block,
   so min-height alone would not centre the label. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	transition:
		background-color 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
		color 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
		border-color 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
		transform 140ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
}

/* Core's is-style-outline overrides padding to .667em/1.333em and paints the
   border and label in currentColor, so it rendered a different size and colour
   than the reference secondary button. Pin it to the design system.
   Interim: Phase 3 re-registers this as the branded `outline-navy` style. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline-navy > .wp-block-button__link,
.wp-block-button.is-style-outline-on-dark > .wp-block-button__link,
.wp-block-button.is-style-on-red > .wp-block-button__link {
	padding: 16px 32px;
	border-width: 2px;
	border-style: solid;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline-navy > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button.is-style-outline-navy > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	background-image: none;
	border-color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible,
.wp-block-button.is-style-outline-navy > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline-navy > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--navy);
}

/* Reference .btn--on-dark: the secondary CTA over the hero photograph. */
.wp-block-button.is-style-outline-on-dark > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-on-dark > .wp-block-button__link:not(.has-background) {
	background-color: transparent;
	background-image: none;
	border-color: rgba(255, 255, 255, 0.55);
}

.wp-block-button.is-style-outline-on-dark > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline-on-dark > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--wp--preset--color--white);
}

/* Reference .btn--on-red: the primary CTA sitting on the red closing band. */
.wp-block-button.is-style-on-red > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--red-deep);
}

.wp-block-button.is-style-on-red > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--white);
	background-image: none;
	border-color: transparent;
}

.wp-block-button.is-style-on-red > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-on-red > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--bone);
	border-color: transparent;
}

/* Reference .btn--lg. Declared after the outline rules above so it wins the tie
   at equal specificity rather than needing !important. */
.wp-block-button.is-style-lg > .wp-block-button__link {
	padding: 18px 40px;
}

/* Button glyphs. The reference inlines an SVG inside the <a>; editor content is
   block-only, so the same 17px mark is painted as a mask that inherits the
   label colour. */
.wp-block-button.is-style-with-arrow > .wp-block-button__link::after,
.wp-block-button.is-style-with-phone > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--sb-glyph) no-repeat center / contain;
	mask: var(--sb-glyph) no-repeat center / contain;
}

.wp-block-button.is-style-with-arrow > .wp-block-button__link::after {
	--sb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5.5 18.5 12 12 18.5'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-with-phone > .wp-block-button__link::before {
	--sb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.9v2.6a2 2 0 0 1-2.2 2 19.4 19.4 0 0 1-8.5-3 19.1 19.1 0 0 1-5.9-5.9 19.4 19.4 0 0 1-3-8.6A2 2 0 0 1 3.4 2H6a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L7.1 9.9a15.7 15.7 0 0 0 5.9 5.9l1.2-1.1a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}