/**
 * ToyTool — base styles: reset, typography, containers.
 * Mobile-first.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Belt-and-braces against horizontal overflow (explicit requirement):
   no single element should ever be allowed to widen the page, but this
   is the backstop in case one slips through. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
	margin: 0;
	background: var(--tt-background);
	color: var(--tt-text);
	font-family: var(--tt-font-body);
	font-size: var(--tt-body);
	line-height: var(--tt-line-height);
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--tt-link); text-decoration: none; }
a:hover { color: var(--tt-primary-hover); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tt-font-heading);
	color: var(--tt-heading);
	line-height: var(--tt-line-height-heading);
	font-weight: 700;
	margin: 0 0 0.6em;
}
h1 { font-size: var(--tt-h1); }
h2 { font-size: var(--tt-h2); }
h3 { font-size: var(--tt-h3); }
h4 { font-size: var(--tt-h4); }
h5 { font-size: var(--tt-h5); }
h6 { font-size: var(--tt-h6); }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }

/* Focus states — visible everywhere, never suppressed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--tt-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.tt-skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 10000;
	background: var(--tt-primary);
	color: #fff;
	padding: 0.6rem 1rem;
	border-radius: var(--tt-radius-sm);
	transition: top 0.2s ease;
}
.tt-skip-link:focus { top: 1rem; color: #fff; }

/* Containers */
.tt-container {
	width: 100%;
	max-width: var(--tt-wide-width);
	margin-inline: auto;
	padding-inline: var(--tt-container-padding);
}

.tt-container--narrow {
	max-width: var(--tt-content-width);
}

.tt-section {
	padding-block: var(--tt-section-spacing);
}

/* Full-bleed dark section — spans edge to edge (unlike a dark card
   floating inset inside a white .tt-section), so scrolling past one
   actually reads as a white→dark→white rhythm break instead of just
   another box on the same page background. Put a .tt-container inside
   for the actual content width; same navy the footer already uses via
   --tt-contrast-bg/--tt-contrast-text (variables.css), not a new color. */
.tt-section--contrast {
	background: var(--tt-contrast-bg);
	color: var(--tt-contrast-text);
	padding-block: var(--tt-section-spacing);
}
.tt-section--contrast h1, .tt-section--contrast h2, .tt-section--contrast h3,
.tt-section--contrast h4, .tt-section--contrast h5, .tt-section--contrast h6 {
	color: #fff;
}

@media (min-width: 480px) {
	:root { --tt-container-padding: 1.25rem; }
}

@media (min-width: 1024px) {
	:root { --tt-container-padding: 2rem; }
}

/* Buttons */
.tt-button,
button.tt-button,
input.tt-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--tt-touch-target);
	padding: var(--tt-button-padding-y) var(--tt-button-padding-x);
	background: var(--tt-primary);
	color: var(--tt-primary-contrast);
	border: 0;
	border-radius: var(--tt-button-radius);
	font-weight: 600;
	font-size: var(--tt-small);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	text-align: center;
}
.tt-button:hover, .tt-button:focus-visible {
	background: var(--tt-primary-hover);
	color: var(--tt-primary-contrast);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
}
.tt-button:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.24); }

.tt-button--outline {
	background: transparent;
	color: var(--tt-heading);
	border: 1.5px solid var(--tt-border);
	box-shadow: none;
}
.tt-button--outline:hover, .tt-button--outline:focus-visible {
	background: var(--tt-primary);
	color: var(--tt-primary-contrast);
	border-color: var(--tt-primary);
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.24);
}

.tt-button--dark {
	background: #fff;
	color: var(--tt-heading);
}
.tt-button--dark:hover, .tt-button--dark:focus-visible {
	background: var(--tt-primary);
	color: var(--tt-primary-contrast);
}

.tt-button--full { width: 100%; }

/* Cards */
.tt-card {
	background: var(--tt-card-bg);
	border: 1px solid var(--tt-card-border);
	border-radius: var(--tt-card-radius);
	box-shadow: var(--tt-card-shadow);
}

/* ---------- Alert dialog ----------
   Replaces the native window.alert() browser chrome dialog (unstyled,
   can't be themed, breaks the rest of the site's design) — see
   showAlert()/the window.alert override in main.js. Site-wide, not
   product-page-specific: any plugin (WooCommerce's own review-rating
   and variation-selection validation included) that calls alert()
   anywhere gets this instead. */
.tt-alert-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	z-index: 10000;
}
.tt-alert {
	background: var(--tt-background);
	border-radius: var(--tt-radius-lg);
	box-shadow: var(--tt-card-shadow-hover);
	padding: 1.75rem;
	max-width: 360px;
	width: 100%;
	text-align: center;
}
.tt-alert__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tt-light-blue);
	color: var(--tt-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}
.tt-alert__message { color: var(--tt-heading); font-weight: 500; line-height: 1.5; margin: 0 0 1.5rem; }
.tt-alert__ok { width: 100%; }

/* Icons */
.tt-icon { display: inline-block; flex-shrink: 0; }

/* Star rating (WooCommerce's native rating markup + our editorial one) */
.star-rating,
.tt-static-rating {
	color: #FBBF24;
	display: inline-flex;
	align-items: center;
	gap: 1px;
}
.star-rating { overflow: hidden; position: relative; height: 1em; line-height: 1; width: 5.4em; font-family: inherit; }
.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	color: var(--tt-border);
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}
.star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	top: 0;
	position: absolute;
	left: 0;
	color: #FBBF24;
}

/* Utility */
.tt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* !important is deliberate here: these are visibility utility classes
   that must always win regardless of a component's own later, equally-
   specific display rule (e.g. .tt-icon-button { display: inline-flex }
   in layout.css, loaded after this file) — without it, source order
   alone decided the tie and silently kept a mobile-only element visible
   at desktop widths. */
.tt-mobile-only { display: block !important; }
.tt-desktop-only { display: none !important; }
@media (min-width: 1024px) {
	.tt-mobile-only { display: none !important; }
	.tt-desktop-only { display: block !important; }
}