/*
Theme Name: Sherbert Industrial Portfolio
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sherbert-industrial
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--grid-rule: var(--wp--preset--color--rule);
	--signal: var(--wp--preset--color--primary);
	--panel: var(--wp--preset--color--surface);
}

/* === reset === */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
::selection { background: var(--signal); color: var(--wp--preset--color--background); }
.wp-site-blocks { background-image: linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--grid-rule) 35%, transparent) 50%, transparent calc(50% + .5px)); }

/* === typography === */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
a { text-underline-offset: .28em; text-decoration-thickness: 1px; }
.tech-label, .wp-block-navigation { font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tech-label { color: var(--wp--preset--color--muted); margin: 0; }
.signal-text { color: var(--signal); }
.metric-value { font-family: var(--wp--preset--font-family--bebas-neue); font-size: clamp(3rem, 7vw, 6.5rem); line-height: .85; margin: 0; }
.metric-note { color: var(--wp--preset--color--muted); font-size: .78rem; margin-top: .75rem; }

/* === header === */
.site-header { border-block: 1px solid var(--grid-rule); background: color-mix(in srgb, var(--wp--preset--color--background) 90%, transparent); backdrop-filter: blur(12px); position: relative; z-index: 20; }
.site-header__inner { min-height: 78px; }
.site-header .wp-block-site-title { font-family: var(--wp--preset--font-family--bebas-neue); font-size: 1.55rem; letter-spacing: .06em; margin: 0; }
.site-header .wp-block-site-title a { color: var(--wp--preset--color--text); text-decoration: none; }
.site-header .wp-block-navigation-item__content { color: var(--wp--preset--color--muted); text-decoration: none; }
.site-header .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item__content:focus { color: var(--signal); }

/* === ruled grid === */
.ruled-section { border-bottom: 1px solid var(--grid-rule); }
.entry-content > .ruled-section { margin-block-start: 0 !important; }
.ruled-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-left: 1px solid var(--grid-rule); border-top: 1px solid var(--grid-rule); }
.ruled-grid > * { margin-block-start: 0 !important; }
.ruled-cell { border-right: 1px solid var(--grid-rule); border-bottom: 1px solid var(--grid-rule); padding: clamp(1.5rem, 4vw, 3.5rem); min-width: 0; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.section-heading { font-size: var(--wp--preset--font-size--headline); margin: .5rem 0 0; }
.section-intro { color: var(--wp--preset--color--muted); max-width: 62ch; }
.index-number { color: var(--signal); font-weight: 600; margin: 0 0 2.5rem; }

/* === hero === */
.hero-grid { min-height: min(760px, calc(100vh - 78px)); align-items: stretch; }
.hero-main { grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; min-height: 610px; padding-block: clamp(3rem, 8vw, 7rem); position: relative; overflow: hidden; }
.hero-main::after { content: "+"; position: absolute; right: 1rem; bottom: -.2em; color: color-mix(in srgb, var(--signal) 14%, transparent); font-family: var(--wp--preset--font-family--bebas-neue); font-size: 25rem; line-height: .65; pointer-events: none; }
.hero-kicker { color: var(--signal); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.hero-title { font-size: var(--wp--preset--font-size--display); line-height: .86; margin: 1.5rem 0 2rem; max-width: 10ch; position: relative; z-index: 1; }
.hero-summary { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 62ch; position: relative; z-index: 1; }
.hero-side { grid-column: span 2; display: grid; grid-template-rows: 1fr 1fr; padding: 0; }
.hero-side > .wp-block-group { padding: clamp(1.5rem, 3vw, 3rem); margin-block-start: 0 !important; }
.hero-side > .wp-block-group + .wp-block-group { border-top: 1px solid var(--grid-rule); }
.hero-actions { margin-top: 2.5rem; }
.hero-actions .wp-element-button { text-decoration: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.hero-actions .wp-element-button:hover { background: var(--wp--preset--color--text); box-shadow: 6px 6px 0 var(--signal); }

/* === timeline === */
.timeline-entry { position: relative; }
.timeline-entry::before { content: ""; position: absolute; left: 0; top: clamp(1.5rem, 4vw, 3.5rem); width: 3px; height: 2.5rem; background: var(--signal); }
.timeline-date { color: var(--signal); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .1em; }
.timeline-entry h3 { font-size: clamp(1.9rem, 3.5vw, 3.2rem); margin: .75rem 0 .25rem; }
.timeline-entry .company { color: var(--wp--preset--color--muted); margin-top: 0; }

/* === projects === */
.project-card { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; transition: background-color .25s ease; }
.project-card:hover { background: var(--panel); }
.project-card h3 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 1rem 0; }
.project-meta { color: var(--signal); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.project-outcome { border-top: 1px solid var(--grid-rule); color: var(--wp--preset--color--muted); margin-top: 2rem; padding-top: 1.25rem; }
.skill-cell h3 { font-size: clamp(1.65rem, 3vw, 2.6rem); margin: 1rem 0; }
.skill-cell p:last-child { color: var(--wp--preset--color--muted); }

/* === APS samples === */
.sample-card { min-height: 100%; padding: 0; overflow: hidden; transition: background-color .2s ease; }
.sample-card:hover { background: var(--panel); }
.sample-card .wp-block-image { margin: 0; border-bottom: 1px solid var(--grid-rule); overflow: hidden; aspect-ratio: 4 / 3; }
.sample-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(35%) contrast(115%) brightness(78%) sepia(10%); transition: transform .35s ease, filter .35s ease; }
.sample-card:hover .wp-block-image img { transform: scale(1.025); filter: grayscale(0%) contrast(115%) brightness(85%); }
.sample-card__body { padding: clamp(1.35rem, 3vw, 2.5rem); }
.sample-card h3 { font-size: clamp(1.8rem, 3.5vw, 3rem); margin: .8rem 0 1rem; }
.sample-card a { color: var(--wp--preset--color--text); text-decoration: none; }
.sample-link { color: var(--signal); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sample-page-hero { padding-block: clamp(3rem, 8vw, 7rem); }
.sample-page-hero h1 { font-size: clamp(3.8rem, 9vw, 8rem); line-height: .88; margin: 1rem 0 1.5rem; max-width: 11ch; }
.sample-context { color: var(--wp--preset--color--muted); }
/* full-bleed APS viewer: escape the post-content column to touch both viewport edges while staying in normal flow (so it pushes the content below down when the viewer mounts). CSS-only so it survives editor re-saves. */
#aps-viewer {
	display: block;
	min-height: 600px;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.sample-viewer-shell { background: var(--panel); padding: clamp(1rem, 2.5vw, 2rem); min-height: 680px; }
.sample-viewer { border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent); min-height: 615px; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 4rem); text-align: center; background-image: linear-gradient(color-mix(in srgb, var(--signal) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--signal) 8%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 45%); background-size: 48px 48px, 48px 48px, auto; }
.sample-viewer h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); margin: .75rem 0 1rem; }
.sample-feature-panel h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin: .75rem 0 1.25rem; }
.sample-feature-panel li { margin-bottom: .8rem; }
.sample-nav { border-top: 1px solid var(--grid-rule); }

/* === contact form === */
.contact-form-cell form label.jetpack-field-label { color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: var(--wp--preset--font-size--label); margin-bottom: .5rem; }
.contact-form-cell form .wp-block-jetpack-field-name,
.contact-form-cell form .wp-block-jetpack-field-email,
.contact-form-cell form .wp-block-jetpack-field-textarea { width: 100%; }
.contact-form-cell form input[type="text"],
.contact-form-cell form input[type="email"],
.contact-form-cell form textarea { width: 100%; background: var(--wp--preset--color--background); color: var(--wp--preset--color--text); border: 1px solid var(--grid-rule); border-radius: 0; padding: .9rem 1rem; font-family: var(--wp--preset--font-family--ibm-plex-mono); font-size: 1rem; line-height: 1.6; transition: border-color .2s ease; }
.contact-form-cell form textarea { min-height: 200px; }
.contact-form-cell form input:focus, .contact-form-cell form textarea:focus { outline: none; border-color: var(--signal); }
.contact-form-cell form input::placeholder, .contact-form-cell form textarea::placeholder { color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, transparent); }

/* === model viewport === */
.model-shell { background: var(--panel); min-height: 560px; padding: 0; position: relative; overflow: hidden; }
.model-viewport { min-height: 560px; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 5rem); background-image: linear-gradient(color-mix(in srgb, var(--signal) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--signal) 9%, transparent) 1px, transparent 1px), radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 42%); background-size: 44px 44px, 44px 44px, auto; }
.model-frame { border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent); box-shadow: inset 0 0 60px color-mix(in srgb, var(--signal) 7%, transparent), 0 0 80px color-mix(in srgb, var(--signal) 6%, transparent); margin: 0 !important; padding: clamp(2rem, 6vw, 6rem); text-align: center; width: 100%; max-width: 740px; position: relative; }
.model-frame::before, .model-frame::after { content: ""; position: absolute; background: var(--signal); }
.model-frame::before { width: 26px; height: 1px; top: -1px; left: -1px; }
.model-frame::after { width: 1px; height: 26px; top: -1px; left: -1px; }
.model-frame h3 { font-size: clamp(2.5rem, 6vw, 5.5rem); margin: .75rem 0 1rem; }
.status-line { color: var(--signal); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.status-line::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--signal); margin-right: .7rem; box-shadow: 0 0 12px var(--signal); animation: status-pulse 2s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .35; } }

/* === contact and footer === */
.contact-cell { padding-block: clamp(3rem, 9vw, 8rem); }
.contact-cell h2 { font-size: clamp(3.5rem, 8vw, 7.5rem); margin: .5rem 0 1.5rem; }
.contact-link { font-size: clamp(1rem, 2vw, 1.35rem); }
.site-footer { border-top: 1px solid var(--grid-rule); color: var(--wp--preset--color--muted); }
.site-footer a { color: var(--wp--preset--color--text); }

/* === responsive and motion === */
@media (max-width: 900px) {
	.ruled-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.span-2, .span-3, .span-4, .span-6, .hero-main, .hero-side { grid-column: span 2; }
	.hero-main { min-height: 560px; }
	.hero-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
	.hero-side > .wp-block-group + .wp-block-group { border-top: 0; border-left: 1px solid var(--grid-rule); }
}
@media (max-width: 600px) {
	.wp-site-blocks { background-image: none; }
	.site-header__inner { min-height: 68px; }
	.ruled-cell { padding: 1.35rem; }
	.hero-main { min-height: 510px; padding-block: 3rem; }
	.hero-main::after { font-size: 15rem; }
	.hero-side { grid-template-columns: 1fr; }
	.hero-side > .wp-block-group + .wp-block-group { border-left: 0; border-top: 1px solid var(--grid-rule); }
	.project-card { min-height: 280px; }
	.sample-viewer-shell { min-height: 520px; padding: .75rem; }
	.sample-viewer { min-height: 495px; padding: 1.25rem; }
	.model-shell, .model-viewport { min-height: 480px; }
	.model-shell { padding: 0; }
	.model-viewport { padding: 1rem; }
	.model-frame { padding: 2.5rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}