/*
 Theme Name: Material Agency
 Theme URI: https://example.com/
 Author: WP Dev
 Description: A functional Block Theme based on the Material Agency template.
 Version: 1.2
 Requires at least: 6.0
 Tested up to: 6.5
 */

/* ── FONT STACK: no external deps ── */
:root {
	--f-display: 'Barlow Condensed', 'Arial Narrow', 'Franklin Gothic Medium', 'Oswald', ui-sans-serif, sans-serif;
	--f-body:    'Barlow', 'Helvetica Neue', Arial, ui-sans-serif, sans-serif;
	--f-mono:    'IBM Plex Mono', 'Fira Mono', 'Consolas', 'Menlo', ui-monospace, monospace;
}

/* ════════════════════════════════════════════
 * COLOR MODES
 * ════════════════════════════════════════════ */

body, body.mode-midnight {
	--bg:   #0d1117; --bg2:  #111820; --bg3:  #151d28;
	--bgd:  #060810; --bgh:  #0d1117;
	--bd:   #1e2a38; --bdc:  #2a3848;
	--ac:   #e8a020; --acl:  #f5c040; --acd:  #b07010;
	--nv:   #1a2744; --st:   #3a4a5c; --stl:  #c8d8e8;
	--tx:   #f0ede6; --tx2:  #7a8fa6; --tx3:  #4a5e72;
	--nav-bd: #e8a020;
	--card: #151d28; --inv:  #111820;
	--abt:  #0d1117; --stat: #151d28;
	--ftbg: #0a0e14; --ftbt: #060810;
	--tick: #0a0e14;
}

body.mode-workshop {
	--bg:   #f5f0e8; --bg2:  #ede8de; --bg3:  #e5e0d6;
	--bgd:  #1a1a18; --bgh:  #f5f0e8;
	--bd:   #c8bea8; --bdc:  #d8d0bc;
	--ac:   #c8a040; --acl:  #d8b050; --acd:  #a08030;
	--nv:   #1a1a18; --st:   #6a6458; --stl:  #2a2820;
	--tx:   #1a1a18; --tx2:  #5a5448; --tx3:  #9a9080;
	--nav-bd: #1a1a18;
	--card: #ede8de; --inv:  #1a1a18;
	--abt:  #1a1a18; --stat: #242420;
	--ftbg: #f5f0e8; --ftbt: #0e0e0c;
	--tick: #1a1a18;
}

body.mode-editorial {
	--bg:   #ffffff; --bg2:  #f8f6f2; --bg3:  #f4f2ee;
	--bgd:  #0f1a2e; --bgh:  #ffffff;
	--bd:   #e0dcd4; --bdc:  #d8d4cc;
	--ac:   #e8a020; --acl:  #f5c040; --acd:  #b07010;
	--nv:   #1a2744; --st:   #7a8fa6; --stl:  #1a2744;
	--tx:   #1a2744; --tx2:  #5a6878; --tx3:  #9aaab8;
	--nav-bd: #e0dcd4;
	--card: #ffffff; --inv:  #f4f2ee;
	--abt:  #1a2744; --stat: #243260;
	--ftbg: #1a2744; --ftbt: #0f1a2e;
	--tick: #1a2744;
}

/* ════════════════════════════════════════════
 * RESET & BASE
 * ════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--f-body);
	background: var(--bg);
	color: var(--tx);
	transition: background .35s, color .35s;
	min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; height: auto; }

/* ════════════════════════════════════════════
 * UTILITY
 * ════════════════════════════════════════════ */

.bc   { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; }
.mono { font-family: var(--f-mono); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Stretched Link for Cards */
.stretched-link::after {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 1;
	content: "";
}

/* ════════════════════════════════════════════
 * MODE SWITCHER BAR (top of page)
 * ════════════════════════════════════════════ */

.mode-bar {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--bgd);
	border-bottom: 1px solid var(--bd);
	display: flex;
	align-items: center;
	justify-content: flex-end; /* Locks elements to the right */
	gap: 1.5rem; /* Gap between text and buttons */
	padding: 0 2.5rem;
	height: 42px;
}

.mode-bar__label {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .25em;
	color: var(--tx3);
	text-transform: uppercase;
}

.mode-bar__btns { display: flex; gap: 6px; }

.cms-btn {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 5px 13px;
	background: transparent;
	border: 1px solid var(--bd);
	color: var(--tx3);
	cursor: pointer;
	transition: all .15s;
}

.cms-btn:hover          { border-color: var(--ac); color: var(--ac); }
.cms-btn.active         { border-color: var(--ac); color: var(--ac); }

/* ════════════════════════════════════════════
 * NAVIGATION
 * ════════════════════════════════════════════ */

.site-header {
	position: sticky;
	top: 42px;
	z-index: 100;
	background: var(--bgh);
	border-bottom: 2px solid var(--ac);
	transition: background .35s, border-color .35s;
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.nav-logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.nav-logo svg { width: 32px; height: 32px; flex-shrink: 0; }

.nav-logo-text {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .12em;
	color: var(--tx);
	line-height: 1.1;
	margin: 0 !important;
}

.nav-logo-sub {
	font-family: var(--f-mono);
	font-size: 7px;
	letter-spacing: .2em;
	color: var(--ac);
	display: block;
	margin: 0 !important;
}

.nav-links, .menu { display: flex; gap: 2rem; list-style: none; align-items: center; margin: 0; padding: 0; }

.nav-links a, .menu a {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--tx2);
	transition: color .2s;
	position: relative;
	z-index: 2;
	display: inline-block;
}
.nav-links a:hover, .menu a:hover { color: var(--ac); }

.nav-cta a {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--ac);
	border: 1px solid var(--ac);
	padding: 7px 16px;
	transition: background .2s, color .2s;
}
.nav-cta a:hover { background: var(--ac); color: var(--bgd); }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--tx); }

/* Admin Bar Fixes */
.admin-bar .mode-bar { top: 32px; }
.admin-bar .site-header { top: 74px; }

/* ════════════════════════════════════════════
 * HERO
 * ════════════════════════════════════════════ */

.hero {
	background: var(--bgh);
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	align-items: center;
	border-bottom: 1px solid var(--bd);
	transition: background .35s;
}

.hero__content { padding: 5rem 2.5rem 5rem 2.5rem; }

.hero__eyebrow {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .25em;
	color: var(--ac);
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.hero__eyebrow::before { content:''; display:inline-block; width:24px; height:1px; background:var(--ac); }

.hero__h1 {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(3.5rem, 5.5vw, 5rem);
	line-height: .94;
	color: var(--tx);
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 1.25rem;
}
.hero__h1 em { color: var(--ac); font-style: normal; }

.hero__body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--tx2);
	max-width: 380px;
	margin-bottom: 2rem;
}

.hero__btns { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }

.btn {
	display: inline-block;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .15em;
	text-transform: uppercase;
	padding: .75rem 1.5rem;
	cursor: pointer;
	transition: opacity .2s;
	border: none;
}
.btn:hover { opacity: .85; }

.btn--primary { background: var(--ac); color: var(--bgd); }
.btn--ghost   { background: transparent; color: var(--tx2); border: 1px solid var(--st); }

.hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
}

.hero__stack-wrap { width: 100%; max-width: 260px; }

/* ════════════════════════════════════════════
 * TICKER
 * ════════════════════════════════════════════ */

.ticker {
	background: var(--tick);
	border-top: 1px solid var(--bd);
	border-bottom: 1px solid var(--bd);
	padding: 10px 0;
	overflow: hidden;
	transition: background .35s;
}

.ticker__track {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: ticker-scroll 22s linear infinite;
}
@keyframes ticker-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.ticker__item {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--tx3);
	text-transform: uppercase;
	white-space: nowrap;
}
.ticker__item::before { content:'◈'; color:var(--ac); margin-right:.5rem; }

/* ════════════════════════════════════════════
 * SERVICES
 * ════════════════════════════════════════════ */

.section { padding: 5rem 0; }
.section--alt { background: var(--bg2); }

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid var(--bd);
	padding-bottom: 1.25rem;
	margin-bottom: 2.5rem;
}

.section-label {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .3em;
	color: var(--ac);
	text-transform: uppercase;
	display: block;
	margin-bottom: .5rem;
}

.section-title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tx);
	line-height: 1;
}

.section-link {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--tx3);
	transition: color .2s;
	position: relative;
	z-index: 2;
}
.section-link:hover { color: var(--ac); }

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: var(--bd);
}

.service-card {
	background: var(--card);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .875rem;
	border-top: 3px solid transparent;
	transition: border-top-color .2s;
	cursor: pointer;
	position: relative;
}
.service-card:hover { border-top-color: var(--ac); }

.service-card__num {
	font-family: var(--f-mono);
	font-size: 8px;
	letter-spacing: .2em;
	color: var(--st);
}

.service-card__name {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .05em;
	color: var(--tx);
	text-transform: uppercase;
	line-height: 1.1;
}

.service-card__desc { font-size: 13px; line-height: 1.65; color: var(--tx3); }

.service-card__link {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--ac);
	margin-top: auto;
	padding-top: .5rem;
}

/* ════════════════════════════════════════════
 * INVENTORY
 * ════════════════════════════════════════════ */

.section--inv { background: var(--inv); }
.section--inv .section-title { color: var(--tx); }

.inventory-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--bd);
}

.inventory-item {
	background: var(--card);
	padding: 1.5rem 1.25rem;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	cursor: pointer;
	transition: background .2s;
	position: relative;
	overflow: hidden;
}
.mode-midnight .inventory-item { background: #151d28; }
.mode-workshop .inventory-item { background: #242420; }
.mode-editorial .inventory-item { background: #ffffff; }

.inventory-item:hover { filter: brightness(1.06); }

.inventory-item__bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-60%);
	opacity: .06;
	pointer-events: none;
}

.inventory-item__tag {
	font-family: var(--f-mono);
	font-size: 7px;
	letter-spacing: .2em;
	color: var(--ac);
	text-transform: uppercase;
	margin-bottom: .25rem;
	position: relative;
}

.inventory-item__name {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .05em;
	color: var(--tx);
	text-transform: uppercase;
	position: relative;
	line-height: 1.2;
}

.inventory-item__price {
	font-family: var(--f-mono);
	font-size: 12px;
	color: var(--tx3);
	position: relative;
	margin-top: .25rem;
}

.inventory-item--cta { background: var(--nv) !important; }
.inventory-item--cta .inventory-item__name { font-size: 20px; line-height: 1; }

/* ════════════════════════════════════════════
 * ABOUT / STATS
 * ════════════════════════════════════════════ */

.section--about {
	background: var(--abt);
	transition: background .35s;
}

.about-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.about-inner .section-title { color: #f0ede6; }
.mode-editorial .about-inner .section-title { color: #f0ede6; }

.about__body {
	font-size: 14px;
	line-height: 1.8;
	color: var(--tx2);
	margin-bottom: 1.75rem;
}
.section--about .about__body { color: #7a8fa6; }

.stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--bdc);
	border: 1px solid var(--bdc);
}

.stat-box {
	background: var(--stat);
	padding: 1.5rem 1.25rem;
	text-align: center;
}

.stat-box__num {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 2.5rem;
	color: var(--ac);
	line-height: 1;
	display: block;
	margin-bottom: .375rem;
}

.stat-box__label {
	font-family: var(--f-mono);
	font-size: 8px;
	letter-spacing: .2em;
	color: var(--tx3);
	text-transform: uppercase;
}

/* ════════════════════════════════════════════
 * PROJECTS
 * ════════════════════════════════════════════ */

.projects-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	background: var(--bd);
}

.project-card {
	background: var(--card);
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.project-card:hover { filter: brightness(1.05); }

.project-card__bg {
	position: absolute;
	inset: 0;
	opacity: .18;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.project-card__cat {
	font-family: var(--f-mono);
	font-size: 8px;
	letter-spacing: .2em;
	color: var(--ac);
	text-transform: uppercase;
	display: block;
	margin-bottom: .375rem;
	position: relative;
}

.project-card__title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--tx);
	text-transform: uppercase;
	letter-spacing: .04em;
	position: relative;
}

/* ════════════════════════════════════════════
 * FOOTER
 * ════════════════════════════════════════════ */

.site-footer {
	background: var(--ftbg);
	border-top: 2px solid var(--ac);
	transition: background .35s;
}

.footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	padding: 3rem 0;
}

.footer-brand-name {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .12em;
	color: var(--tx);
	line-height: 1.1;
	margin-bottom: .25rem;
}
.section--about ~ * .footer-brand-name,
.mode-editorial .footer-brand-name,
.mode-midnight .footer-brand-name { color: #f0ede6; }
.mode-workshop .footer-brand-name { color: var(--tx); }

.footer-brand-sub {
	font-family: var(--f-mono);
	font-size: 7px;
	letter-spacing: .2em;
	color: var(--ac);
	display: block;
	margin-bottom: 1rem;
}

.footer-brand-desc {
	font-size: 13px;
	line-height: 1.7;
	color: var(--tx3);
}
.mode-editorial .footer-brand-desc { color: #5a7090; }

.footer-col-title {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: .2em;
	color: var(--ac);
	text-transform: uppercase;
	margin-bottom: .875rem;
}

.footer-links { display: flex; flex-direction: column; gap: .5rem; position: relative; z-index: 2; }
.footer-links a { font-size: 13px; color: var(--tx3); transition: color .2s; }
.footer-links a:hover { color: var(--ac); }
.mode-editorial .footer-links a { color: #5a7090; }

.footer-contact {
	font-family: var(--f-mono);
	font-size: 11px;
	color: var(--tx3);
	line-height: 1.8;
}
.mode-editorial .footer-contact { color: #4a6080; }

.footer-bottom {
	background: var(--ftbt);
	padding: 1rem 0;
	border-top: 1px solid var(--bd);
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-copy {
	font-family: var(--f-mono);
	font-size: 9px;
	letter-spacing: .15em;
	color: var(--tx3);
}

/* ════════════════════════════════════════════
 * SCROLL REVEAL
 * ════════════════════════════════════════════ */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════
 * FSE OVERRIDES (Fighting Gutenberg)
 * ════════════════════════════════════════════ */

/* 1. Strip aggressive block gap added by WP core globally */
.wp-site-blocks, .wp-block-group {
	gap: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 2. Fix block wrappers intercepting Hero Layout */
.hero.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
}
/* By passing display: contents, we bypass WP's inner columns wrapper, restoring the grid layout */
.hero.wp-block-group > .wp-block-columns,
.hero.wp-block-group > .wp-block-group__inner-container,
.hero.wp-block-group > .wp-block-group__inner-container > .wp-block-columns {
	display: contents !important;
}

/* 3. Strip WP wrapping anchor tags in <p> inside buttons/links */
.btn p, .nav-cta p, .section-link p, .service-card__link p, .inventory-item__price p {
	margin: 0 !important;
	padding: 0 !important;
}

/* 4. Ensure links look correct when nested by WP blocks */
.btn a, .nav-cta a, .section-link a, .service-card__link a, .hero__btns a {
	text-decoration: none !important;
	color: inherit !important;
}

/* 5. Override default WP container widths */
.container {
	max-width: 1200px !important;
}

/* 6. Enforce zero margins and strict GRIDS on section wrappers */
/* 
 * This is the magic bullet. When WP forces an inner wrapper <div> inside your grid container,
 * the grid sees 1 item (the wrapper) instead of 4 items. This squishes the design vertically.
 * `display: contents` removes the wrapper visually so your cards snap to the grid correctly!
 */
.services-grid > .wp-block-group__inner-container,
.inventory-grid > .wp-block-group__inner-container,
.projects-grid > .wp-block-group__inner-container,
.stats-grid > .wp-block-group__inner-container,
.about-inner > .wp-block-group__inner-container {
	display: contents !important;
}

.services-grid.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2px !important;
	background: var(--bd) !important;
	width: 100% !important;
}

.inventory-grid.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 2px !important;
	width: 100% !important;
}

.projects-grid.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 2px !important;
	width: 100% !important;
}

.stats-grid.wp-block-group {
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1px !important;
	width: 100% !important;
}

.about-inner.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 4rem !important;
	align-items: center !important;
}

/* Force Service Cards to Fill Height & Reset internal block styles */
.service-card.wp-block-group {
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

/* 7. Ensure SVG Wrappers scale properly inside WP Columns */
.hero__visual svg {
	width: 100%;
	height: auto;
}

/* 8. Force Header Nav & Menus into Horizontal Flex */
.wp-block-group.nav-inner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
}

.wp-block-group.nav-links {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 2rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.wp-block-group.nav-links li {
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* ════════════════════════════════════════════
 * RESPONSIVE (Forced Overrides)
 * ════════════════════════════════════════════ */

@media (max-width: 900px) {
	.inventory-grid.wp-block-group { grid-template-columns: repeat(2, 1fr) !important; }
	.projects-grid.wp-block-group { grid-template-columns: 1fr !important; }
}

@media (max-width: 680px) {
	.hero.wp-block-group { grid-template-columns: 1fr !important; }
	
	/* Show Mobile Menu Correctly */
	.wp-block-group.nav-links { display: none !important; }
	.wp-block-group.nav-links.open {
		display: flex !important;
		flex-direction: column !important;
		position: absolute !important;
		top: 64px !important;
		left: 0; right: 0;
		background: var(--bgh) !important;
		border-bottom: 2px solid var(--ac) !important;
		padding: 1.5rem !important;
		gap: 1rem !important;
		z-index: 999 !important;
	}
	
	.services-grid.wp-block-group { grid-template-columns: 1fr !important; }
	.about-inner.wp-block-group { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
	.inventory-grid.wp-block-group { grid-template-columns: 1fr !important; }
	.stats-grid.wp-block-group { grid-template-columns: 1fr !important; }
}