/*
Theme Name: Schenktronics
Description: The schenktronics.com theme. A child of Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 7.0
Requires PHP: 7.4
Text Domain: schenktronics
*/

/* Colours and fonts are set in theme.json. This file holds what theme.json can't. */

/* ---------------------------------------------------------------- site-wide dark theme */
/* The header and footer were already dark (same palette as the home hero,
   with a light-colored logo made for exactly this). This extends it to the
   rest of the site by overriding the same preset color tokens the theme's
   other CSS already reads via var(...), so it cascades everywhere without a
   second set of color rules. color-scheme tells the browser to render native
   form controls (selects, their dropdown lists, scrollbars, date pickers) to
   match, instead of leaving them light and unreadable against a dark page. */
:root {
	color-scheme: dark;
	--wp--preset--color--base: #141416;
	--wp--preset--color--accent-3: #f0f0f0;
}
a:where(:not(.wp-element-button)) { color: #ff7a70; }

/* Belt and suspenders beyond color-scheme: WooCommerce's variation picker is
   a plain <select>, not a themeable block, so it doesn't inherit the tokens
   above - pin its colors explicitly rather than rely on browser heuristics. */
table.variations select { background-color: #1c1c1f; color: #f0f0f0; border: 1px solid #3a3a40; }

/* ---------------------------------------------------------------- header, footer */
.st-header { padding: 14px 24px; }
.st-header > .alignwide { align-items: center; }
.st-logo { margin: 0; line-height: 0; }
.st-logo img { height: 22px; width: auto; }
.st-header a { color: #fff; text-decoration: none; }
.st-header .wp-block-navigation { font-weight: 500; font-size: .95rem; }
.st-header .wc-block-mini-cart__button { color: #fff; }

.st-footer { background: #0a0a0c; color: #a0a0aa; padding: 56px 24px 28px; margin-top: 0; font-size: .92rem; }
.st-footer-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.st-footer img { height: 20px; width: auto; margin-bottom: 14px; }
.st-footer h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #a0a0aa; font-weight: 600; margin: 0 0 12px; }
.st-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-footer a { color: #ececee; text-decoration: none; }
.st-footer a:hover { color: #ff7a70; }
.st-footer-base { max-width: 1180px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid #2c2c33; font-size: .8rem; }

/* Full-bleed sections sit flush against the header and footer. */
.home .wp-site-blocks > main { margin-top: 0; }
.wp-site-blocks > footer { margin-top: 0; }

/* ---------------------------------------------------------------- home */
.st-hero {
	color: #ececee;
	background:
		linear-gradient(90deg, rgba(10, 10, 12, .96) 0%, rgba(10, 10, 12, .82) 45%, rgba(10, 10, 12, .55) 100%),
		url('assets/images/lab.jpg') center / cover no-repeat #0e0e10;
	padding: clamp(48px, 8vw, 104px) 24px;
}
.st-hero-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.st-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 700; margin: 0 0 .5em; color: #fff; }
.st-hero p { font-size: 1.15rem; color: #cfcfd6; max-width: 34em; margin: 0 0 1.75rem; }
.st-btn { display: inline-block; padding: 12px 20px; border-radius: 8px; background: #c62a25; color: #fff; font-weight: 600; text-decoration: none; }
.st-btn:hover { background: #a8211d; color: #fff; }
.st-section { max-width: 1180px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px; }
.st-section > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 .4em; }
.st-section > p { color: #555; max-width: 44em; margin: 0 0 28px; }

/* Eurorack case, to scale: --mm is one millimetre. The rails sit behind the
   panels, centered on the mounting holes 3 mm in from each panel edge, so the
   panel flanges cover them and only a sliver shows above and below. */
.rack { justify-self: center; --panel-h: clamp(220px, 28vw, 340px); --mm: calc(var(--panel-h) / 128.5); }
.rack-case {
  position: relative;
  padding: calc(var(--mm) * 5) 0;
  background: #070708;
  border-inline: calc(var(--mm) * 4) solid #1c1c20;
  border-radius: 3px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55), inset 0 0 24px rgba(0, 0, 0, .9);
}
.rail {
  position: absolute; left: 0; right: 0; height: calc(var(--mm) * 10);
  background:
    radial-gradient(circle, #0c0c0d 0 calc(var(--mm) * 1.1), transparent calc(var(--mm) * 1.3)) 0 50% / calc(var(--mm) * 5.08) 100% repeat-x,
    linear-gradient(180deg, #d3d6db 0%, #a3a6ac 22%, #6f7278 42%, #55585e 50%, #6f7278 58%, #a3a6ac 78%, #c4c7cc 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.rail-top { top: calc(var(--mm) * 3); }
.rail-bottom { bottom: calc(var(--mm) * 3); }
.rack-row { position: relative; z-index: 1; display: flex; gap: 1px; }
.rack-gap { flex: none; width: calc(var(--mm) * 5.08 * var(--hp)); height: var(--panel-h); }
/* No base filter: drop-shadow() isn't clipped to its own element - at rest,
   it was bleeding across the ~1px gap onto the slot's neighbor, looking like
   a permanent shadow along that module's edge rather than this one's own.
   The hover/focus version doing that is fine - it's a momentary pop effect,
   not a constant artifact - so only the resting state changes here. */
.rack-slot { display: block; flex: none; transition: transform .2s ease, filter .2s ease; }
.rack-slot:hover, .rack-slot:focus-visible { transform: translateY(-4px); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .8)); }
.rack-panel { display: block; height: var(--panel-h); width: auto; max-width: none; border-radius: 1px; }

/* ---------------------------------------------------------------- product page */
.st-product-notices { margin-top: 20px; font-size: .9rem; }
.st-product-notices p { margin: 0 0 10px; }
.st-docs-link a { font-weight: 600; }
.st-ship-note { color: #b7b7bd; }
.st-prop65 { color: #9a9aa0; font-size: .8rem; margin-top: 40px; margin-bottom: 48px; padding-top: 16px; border-top: 1px solid #2c2c33; }
.st-prop65 a { color: inherit; }

.st-3d-viewer { position: relative; }
.st-3d-viewer__canvas { aspect-ratio: 1; width: 100%; background: #0e0e10; border-radius: 4px; overflow: hidden; }
.st-3d-viewer__canvas canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .4s ease; }
.st-3d-viewer.is-loaded .st-3d-viewer__canvas canvas { opacity: 1; }
.st-3d-viewer__hint { margin: 10px 0 0; font-size: .8rem; color: #6f6f76; text-align: center; }
.st-3d-viewer.has-error .st-3d-viewer__hint::after { content: " (model failed to load)"; }

@media (max-width: 800px) {
	.st-hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.rack { --panel-h: 220px; }
	.st-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.st-footer-grid { grid-template-columns: 1fr; }
}
