/**
 * Nucor - Museum Theme
 * Main Stylesheet
 */

/* ==============================
   Block Styles Front-end Fix
   Ensures wp-block-* CSS renders correctly in classic PHP templates.
   theme.json variables are generated by WP but need to be accessible
   on the front end when using classic (non-FSE) templates.
   ============================== */

/* Page/post content wrapper — NO max-width so block custom widths apply */
.entry__content {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

.entry--page,
.entry--single {
	width: 100%;
	overflow-x: clip;
}

/* Full-width aligned blocks in classic templates */
.entry__content .alignfull,
.entry--page .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry__content .alignwide,
.entry--page .alignwide {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-left: auto;
	margin-right: auto;
}

/* Ensure block wrapper respects content width */
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--content-size, 1040px);
	margin-left: auto;
	margin-right: auto;
}

/* Columns block */
.wp-block-columns {
	display: flex;
	gap: var(--wp--style--block-gap, 1rem);
	flex-wrap: wrap;
}

.wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

/* Cover block */
.wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Separator */
.wp-block-separator {
	border: none;
	border-top: 2px solid currentColor;
	margin: 1.5rem auto;
}

.wp-block-separator.is-style-wide { width: 100%; }
.wp-block-separator.is-style-dots { border: none; text-align: center; }
.wp-block-separator.is-style-dots::before { content: '\00B7 \00B7 \00B7'; font-size: 1.5rem; letter-spacing: 0.5rem; }

/* Buttons block */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-block-button__link {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

/* Image block */
.wp-block-image { margin: 0; }
.wp-block-image img { height: auto; max-width: 100%; border-radius: inherit; }
.wp-block-image.aligncenter { text-align: center; }
.wp-block-image figcaption { font-size: 0.875rem; color: var(--wp--preset--color--gray-300, #A0A0A0); margin-top: 0.5rem; }

/* Heading block */
.wp-block-heading { line-height: 1.2; }

/* Paragraph */
.wp-block-paragraph { margin-top: 0; margin-bottom: 1em; }

/* List */
.wp-block-list { padding-left: 1.5rem; }

/* Quote */
.wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--green-600, #006325);
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
}

/* Code */
.wp-block-code {
	background: var(--wp--preset--color--gray-100, #F8F8F8);
	padding: 1rem 1.25rem;
	border-radius: 4px;
	font-family: ui-monospace, monospace;
	font-size: 0.875rem;
	overflow-x: auto;
}

/* Table */
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { padding: 0.5rem 0.75rem; border: 1px solid var(--wp--preset--color--green-100, #D9E8E2); }
.wp-block-table th { background: var(--wp--preset--color--green-100, #D9E8E2); font-weight: 700; }

/* Gallery */
.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.wp-block-gallery .wp-block-image { flex: 1 1 200px; }

/* ==============================
   Reset & Base
   ============================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: FSIndustrieBook, ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--green-900, #213B34);
	background-color: var(--wp--preset--color--white, #fff);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--wp--preset--color--green-600, #006325); }
a:hover { color: var(--wp--preset--color--green-900, #213B34); }

/* ==============================
   Container
   ============================== */
.container {
	width: 100%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 768px) {
	.container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ==============================
   Site Layout
   ============================== */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }
/* No horizontal padding on site-main — blocks control their own width */
.site-main { padding-top: 0; padding-bottom: 0; }

/* ==============================
   Header
   ============================== */
.site-header {
	background-color: var(--wp--preset--color--white, #fff);
	border-bottom: 1px solid var(--wp--preset--color--green-100, #D9E8E2);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	gap: 1.5rem;
}

.site-branding .site-title {
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--green-900, #213B34);
}

.site-description { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--gray-300, #A0A0A0); }

.custom-logo { max-height: 60px; width: auto; }

/* ==============================
   Navigation
   ============================== */
.main-navigation .nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.main-navigation .nav-menu a {
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--green-900, #213B34);
	transition: color 0.15s;
}

.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu .current-menu-item > a {
	color: var(--wp--preset--color--green-600, #006325);
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.25rem;
	color: var(--wp--preset--color--green-900, #213B34);
	padding: 0.25rem;
}

@media (max-width: 767px) {
	.menu-toggle { display: block; }

	.main-navigation .nav-menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--wp--preset--color--green-100, #D9E8E2);
		padding: 1rem;
		gap: 0.75rem;
		box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	}

	.main-navigation.toggled .nav-menu { display: flex; }
}

/* ==============================
   Footer
   ============================== */
.site-footer {
	background-color: var(--wp--preset--color--green-900, #213B34);
	color: var(--wp--preset--color--green-100, #D9E8E2);
	padding: 2.5rem 1rem;
}

.site-footer__inner {
	max-width: 1040px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: space-between;
}

.site-footer .site-title { color: var(--wp--preset--color--green-100, #D9E8E2); }
.site-footer .custom-logo { filter: brightness(0) invert(1); }

.footer-navigation .footer-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.footer-navigation .footer-nav-menu a {
	color: var(--wp--preset--color--green-300, #A1CEAD);
	text-decoration: none;
	font-size: 0.9rem;
}

.footer-navigation .footer-nav-menu a:hover { color: #fff; }

.site-footer__credits p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray-300, #A0A0A0);
}

/* ==============================
   Blog Entries
   ============================== */
.entry { margin-bottom: 0; }
.entry__separator { border: none; border-top: 1px solid var(--wp--preset--color--green-100, #D9E8E2); margin: 2rem 0; }

.entry__thumbnail { margin-bottom: 1rem; }
.entry__thumbnail img { width: 100%; border-radius: 4px; }

.entry__title { font-size: clamp(1.25rem, 3vw, 1.75rem); margin: 0 0 0.5rem; }
.entry__title a { text-decoration: none; color: var(--wp--preset--color--green-900, #213B34); }
.entry__title a:hover { color: var(--wp--preset--color--green-600, #006325); }

.entry__meta { font-size: 0.875rem; color: var(--wp--preset--color--gray-300, #A0A0A0); margin-bottom: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.entry__excerpt { margin-bottom: 1rem; }

.entry__read-more {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	background-color: var(--wp--preset--color--green-600, #006325);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.9rem;
	transition: background-color 0.15s;
}

.entry__read-more:hover { background-color: var(--wp--preset--color--green-900, #213B34); color: #fff; }

/* Single post */
.entry--single .entry__header { margin-bottom: 1.5rem; }
.entry--single .entry__title { font-size: clamp(1.75rem, 4vw, 2.5rem); }
/* No max-width on entry__content — block inline styles control width */
.entry--single .entry__content { max-width: 100%; }
.entry--single img { border-radius: 4px; }

/* ==============================
   Archive / Search Header
   ============================== */
.archive-header, .page-header { margin-bottom: 2rem; }
.archive-title, .page-title { font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 0.5rem; }
.archive-description { color: var(--wp--preset--color--gray-300, #A0A0A0); margin: 0; }

/* ==============================
   404 / No Results
   ============================== */
.error-404 { text-align: center; padding: 3rem 0; }
.no-results { text-align: center; padding: 2rem 0; }

/* ==============================
   Pagination
   ============================== */
.nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2rem; }
.nav-links a, .nav-links span {
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--wp--preset--color--green-300, #A1CEAD);
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--wp--preset--color--green-900, #213B34);
}
.nav-links a:hover, .nav-links .current { background-color: var(--wp--preset--color--green-600, #006325); border-color: var(--wp--preset--color--green-600, #006325); color: #fff; }

/* ==============================
   Search Form
   ============================== */
.search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 1.5rem auto; }
.search-field {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--green-300, #A1CEAD);
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
}
.search-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: var(--wp--preset--color--green-600, #006325);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s;
}
.search-submit:hover { background-color: var(--wp--preset--color--green-900, #213B34); }

/* ==============================
   Widgets
   ============================== */
.widget { margin-bottom: 2rem; }
.widget-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; }

/* ==============================
   Buttons
   ============================== */
.button, button, input[type="submit"] {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	background-color: var(--wp--preset--color--green-600, #006325);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s;
}
.button:hover, button:hover, input[type="submit"]:hover {
	background-color: var(--wp--preset--color--green-900, #213B34);
	color: #fff;
}

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

/* ==============================
   Group / Column Centering & Width
   ============================== */
.wp-block-group,
.wp-block-columns {
	margin-left: auto;
	margin-right: auto;
}

.editor-styles-wrapper .wp-block-group,
.editor-styles-wrapper .wp-block-columns {
	margin-left: auto;
	margin-right: auto;
}

/* ==============================
   Utility Classes — Padding
   ============================== */
.p-xs  { padding: var(--wp--preset--spacing--xs); }
.p-sm  { padding: var(--wp--preset--spacing--sm); }
.p-md  { padding: var(--wp--preset--spacing--md); }
.p-lg  { padding: var(--wp--preset--spacing--lg); }
.p-xl  { padding: var(--wp--preset--spacing--xl); }

.pt-xs { padding-top: var(--wp--preset--spacing--xs); }
.pt-sm { padding-top: var(--wp--preset--spacing--sm); }
.pt-md { padding-top: var(--wp--preset--spacing--md); }
.pt-lg { padding-top: var(--wp--preset--spacing--lg); }
.pt-xl { padding-top: var(--wp--preset--spacing--xl); }

.pb-xs { padding-bottom: var(--wp--preset--spacing--xs); }
.pb-sm { padding-bottom: var(--wp--preset--spacing--sm); }
.pb-md { padding-bottom: var(--wp--preset--spacing--md); }
.pb-lg { padding-bottom: var(--wp--preset--spacing--lg); }
.pb-xl { padding-bottom: var(--wp--preset--spacing--xl); }

.pl-xs { padding-left: var(--wp--preset--spacing--xs); }
.pl-sm { padding-left: var(--wp--preset--spacing--sm); }
.pl-md { padding-left: var(--wp--preset--spacing--md); }
.pl-lg { padding-left: var(--wp--preset--spacing--lg); }
.pl-xl { padding-left: var(--wp--preset--spacing--xl); }

.pr-xs { padding-right: var(--wp--preset--spacing--xs); }
.pr-sm { padding-right: var(--wp--preset--spacing--sm); }
.pr-md { padding-right: var(--wp--preset--spacing--md); }
.pr-lg { padding-right: var(--wp--preset--spacing--lg); }
.pr-xl { padding-right: var(--wp--preset--spacing--xl); }

.px-xs { padding-left: var(--wp--preset--spacing--xs); padding-right: var(--wp--preset--spacing--xs); }
.px-sm { padding-left: var(--wp--preset--spacing--sm); padding-right: var(--wp--preset--spacing--sm); }
.px-md { padding-left: var(--wp--preset--spacing--md); padding-right: var(--wp--preset--spacing--md); }
.px-lg { padding-left: var(--wp--preset--spacing--lg); padding-right: var(--wp--preset--spacing--lg); }
.px-xl { padding-left: var(--wp--preset--spacing--xl); padding-right: var(--wp--preset--spacing--xl); }

.py-xs { padding-top: var(--wp--preset--spacing--xs); padding-bottom: var(--wp--preset--spacing--xs); }
.py-sm { padding-top: var(--wp--preset--spacing--sm); padding-bottom: var(--wp--preset--spacing--sm); }
.py-md { padding-top: var(--wp--preset--spacing--md); padding-bottom: var(--wp--preset--spacing--md); }
.py-lg { padding-top: var(--wp--preset--spacing--lg); padding-bottom: var(--wp--preset--spacing--lg); }
.py-xl { padding-top: var(--wp--preset--spacing--xl); padding-bottom: var(--wp--preset--spacing--xl); }

/* ==============================
   Utility Classes — Margin
   ============================== */
.m-xs  { margin: var(--wp--preset--spacing--xs); }
.m-sm  { margin: var(--wp--preset--spacing--sm); }
.m-md  { margin: var(--wp--preset--spacing--md); }
.m-lg  { margin: var(--wp--preset--spacing--lg); }
.m-xl  { margin: var(--wp--preset--spacing--xl); }

.mt-xs { margin-top: var(--wp--preset--spacing--xs); }
.mt-sm { margin-top: var(--wp--preset--spacing--sm); }
.mt-md { margin-top: var(--wp--preset--spacing--md); }
.mt-lg { margin-top: var(--wp--preset--spacing--lg); }
.mt-xl { margin-top: var(--wp--preset--spacing--xl); }

.mb-xs { margin-bottom: var(--wp--preset--spacing--xs); }
.mb-sm { margin-bottom: var(--wp--preset--spacing--sm); }
.mb-md { margin-bottom: var(--wp--preset--spacing--md); }
.mb-lg { margin-bottom: var(--wp--preset--spacing--lg); }
.mb-xl { margin-bottom: var(--wp--preset--spacing--xl); }

.ml-xs { margin-left: var(--wp--preset--spacing--xs); }
.ml-sm { margin-left: var(--wp--preset--spacing--sm); }
.ml-md { margin-left: var(--wp--preset--spacing--md); }
.ml-lg { margin-left: var(--wp--preset--spacing--lg); }
.ml-xl { margin-left: var(--wp--preset--spacing--xl); }

.mr-xs { margin-right: var(--wp--preset--spacing--xs); }
.mr-sm { margin-right: var(--wp--preset--spacing--sm); }
.mr-md { margin-right: var(--wp--preset--spacing--md); }
.mr-lg { margin-right: var(--wp--preset--spacing--lg); }
.mr-xl { margin-right: var(--wp--preset--spacing--xl); }

.mx-xs { margin-left: var(--wp--preset--spacing--xs); margin-right: var(--wp--preset--spacing--xs); }
.mx-sm { margin-left: var(--wp--preset--spacing--sm); margin-right: var(--wp--preset--spacing--sm); }
.mx-md { margin-left: var(--wp--preset--spacing--md); margin-right: var(--wp--preset--spacing--md); }
.mx-lg { margin-left: var(--wp--preset--spacing--lg); margin-right: var(--wp--preset--spacing--lg); }
.mx-xl { margin-left: var(--wp--preset--spacing--xl); margin-right: var(--wp--preset--spacing--xl); }

.my-xs { margin-top: var(--wp--preset--spacing--xs); margin-bottom: var(--wp--preset--spacing--xs); }
.my-sm { margin-top: var(--wp--preset--spacing--sm); margin-bottom: var(--wp--preset--spacing--sm); }
.my-md { margin-top: var(--wp--preset--spacing--md); margin-bottom: var(--wp--preset--spacing--md); }
.my-lg { margin-top: var(--wp--preset--spacing--lg); margin-bottom: var(--wp--preset--spacing--lg); }
.my-xl { margin-top: var(--wp--preset--spacing--xl); margin-bottom: var(--wp--preset--spacing--xl); }

/* ==============================
   Utility Classes — Background Colors
   ============================== */
.bg-green-100 { background-color: var(--wp--preset--color--green-100); }
.bg-green-300 { background-color: var(--wp--preset--color--green-300); }
.bg-green-600 { background-color: var(--wp--preset--color--green-600); }
.bg-green-900 { background-color: var(--wp--preset--color--green-900); }
.bg-gray-100  { background-color: var(--wp--preset--color--gray-100); }
.bg-gray-300  { background-color: var(--wp--preset--color--gray-300); }
.bg-beige-100 { background-color: var(--wp--preset--color--beige-100); }
.bg-blue-300  { background-color: var(--wp--preset--color--blue-300); }
.bg-blue-600  { background-color: var(--wp--preset--color--blue-600); }
.bg-white     { background-color: var(--wp--preset--color--white); }
.bg-black     { background-color: var(--wp--preset--color--black); }

/* ==============================
   Utility Classes — Text Colors
   ============================== */
.text-green-100 { color: var(--wp--preset--color--green-100); }
.text-green-300 { color: var(--wp--preset--color--green-300); }
.text-green-600 { color: var(--wp--preset--color--green-600); }
.text-green-900 { color: var(--wp--preset--color--green-900); }
.text-gray-100  { color: var(--wp--preset--color--gray-100); }
.text-gray-300  { color: var(--wp--preset--color--gray-300); }
.text-beige-100 { color: var(--wp--preset--color--beige-100); }
.text-blue-300  { color: var(--wp--preset--color--blue-300); }
.text-blue-600  { color: var(--wp--preset--color--blue-600); }
.text-white     { color: var(--wp--preset--color--white); }
.text-black     { color: var(--wp--preset--color--black); }

/* ==============================
   Responsive Container
   ============================== */
@media (min-width: 480px) {
	.container-responsive { max-width: 480px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 640px) {
	.container-responsive { max-width: 640px; }
}
@media (min-width: 768px) {
	.container-responsive { max-width: 768px; }
}
@media (min-width: 1040px) {
	.container-responsive { max-width: 1040px; }
}
@media (min-width: 1280px) {
	.container-responsive { max-width: 1280px; }
}
@media (min-width: 1440px) {
	.container-responsive { max-width: 1440px; }
}