/* =============================================================================
   Shopfront — base.css
   Reset, typography, layout primitives, and design tokens.
   ============================================================================= */

/* Design tokens ---------------------------------------------------------------*/
:root {
	/* Palette: minimalist gallery — near-black on white with warm earthy accents
	   for Land Art / secondary surfaces, lifted from the original site. */
	--sf-color-text: #111111;
	--sf-color-muted: #6b6b6b;
	--sf-color-bg: #ffffff;
	--sf-color-surface: #f4f2ee;   /* warm off-white */
	--sf-color-border: #e3e1dc;
	--sf-color-earth: #544433;     /* dark warm brown (Land Art) */
	--sf-color-earth-mid: #86807d; /* mid warm grey */
	--sf-color-accent: #111111;    /* buttons use near-black for gallery feel */
	--sf-color-accent-hover: #000000;
	--sf-color-danger: #b43232;

	/* Fonts: loaded via Google Fonts in inc/enqueue.php */
	--sf-font-body: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sf-font-display: "Anton", "Epilogue", Impact, "Helvetica Neue", Arial, sans-serif;
	/* Aliases to keep older selectors working */
	--sf-font-sans: var(--sf-font-body);
	--sf-font-serif: Georgia, "Times New Roman", serif;

	--sf-font-size-base: 1rem;
	--sf-line-height: 1.6;

	--sf-space-1: 0.25rem;
	--sf-space-2: 0.5rem;
	--sf-space-3: 0.75rem;
	--sf-space-4: 1rem;
	--sf-space-5: 1.5rem;
	--sf-space-6: 2rem;
	--sf-space-8: 3rem;
	--sf-space-10: 4rem;

	--sf-radius-sm: 4px;
	--sf-radius-md: 8px;
	--sf-radius-lg: 16px;

	--sf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

	--sf-container-max: 1200px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--sf-font-body);
	font-size: var(--sf-font-size-base);
	line-height: var(--sf-line-height);
	color: var(--sf-color-text);
	background: var(--sf-color-bg);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "ss01", "cv11";
}

img, picture, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sf-space-3);
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); }
h3 { font-size: 1.25rem; }

/* Use Anton for display-style headings on hero/section titles via utility class. */
.display-font {
	font-family: var(--sf-font-display);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

p { margin: 0 0 var(--sf-space-4); }

a {
	color: var(--sf-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:hover,
a:focus-visible {
	color: var(--sf-color-accent-hover);
}

button {
	font-family: inherit;
	cursor: pointer;
}

/* Accessibility utilities ---------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -40px;
	left: 8px;
	background: #000;
	color: #fff;
	padding: var(--sf-space-2) var(--sf-space-4);
	z-index: 1000;
	border-radius: var(--sf-radius-sm);
	text-decoration: none;
}
.skip-link:focus {
	top: 8px;
}

/* Layout primitives ---------------------------------------------------------*/
.container {
	width: min(100% - 2rem, var(--sf-container-max));
	margin-inline: auto;
}

main.site-main {
	padding-block: var(--sf-space-8);
}

/* Blank Canvas page template — used for Beaver Builder pages. The artist
   designs the entire page in BB, so the theme strips its default padding
   and lets the_content() take the full width edge-to-edge. */
main.site-main.page-blank {
	padding: 0;
}

.page-blank__article,
.page-blank__content {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Buttons -------------------------------------------------------------------*/
.button,
button.button,
input[type="submit"].button,
.entry-content .button {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	background: var(--sf-color-accent);
	color: #fff;
	border: 1px solid var(--sf-color-accent);
	border-radius: 999px; /* pill for gallery feel */
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.button:hover,
.button:focus-visible {
	background: var(--sf-color-accent-hover);
	border-color: var(--sf-color-accent-hover);
	color: #fff;
}

.button--primary {
	background: var(--sf-color-accent);
	color: #fff;
}

.button--outline {
	background: transparent;
	color: var(--sf-color-accent);
}
.button--outline:hover,
.button--outline:focus-visible {
	background: var(--sf-color-accent);
	color: #fff;
}

.button--inverse {
	background: #fff;
	color: var(--sf-color-text);
	border-color: #fff;
}
.button--inverse:hover,
.button--inverse:focus-visible {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

/* Forms ---------------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid var(--sf-color-border);
	border-radius: var(--sf-radius-sm);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--sf-color-accent);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

/* Entries (posts + pages) ---------------------------------------------------*/
.entry {
	margin-bottom: var(--sf-space-8);
}

.entry-header {
	margin-bottom: var(--sf-space-5);
}

.entry-meta {
	color: var(--sf-color-muted);
	font-size: 0.875rem;
}

.entry-meta > * + *::before {
	content: " · ";
	margin: 0 0.25em;
}

.entry-content {
	max-width: 70ch;
}

.entry-content > * + * {
	margin-top: var(--sf-space-4);
}

.post-thumbnail {
	display: block;
	margin-bottom: var(--sf-space-4);
	border-radius: var(--sf-radius-md);
	overflow: hidden;
}

/* Post lists (archive + blog index) -----------------------------------------*/
.posts-list {
	display: grid;
	gap: var(--sf-space-8);
}

.entry--card {
	padding-bottom: var(--sf-space-6);
	border-bottom: 1px solid var(--sf-color-border);
}

.entry--card:last-child {
	border-bottom: none;
}

.entry-summary {
	margin-bottom: var(--sf-space-3);
}

.read-more {
	font-weight: 500;
}

/* Pagination ----------------------------------------------------------------*/
.pagination,
.navigation.posts-navigation,
.navigation.post-navigation {
	margin-top: var(--sf-space-8);
	padding-top: var(--sf-space-5);
	border-top: 1px solid var(--sf-color-border);
}

.page-numbers {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	margin-right: 0.25rem;
	border-radius: var(--sf-radius-sm);
	text-decoration: none;
	color: inherit;
}
.page-numbers.current {
	background: var(--sf-color-accent);
	color: #fff;
}
.page-numbers:hover:not(.current) {
	background: var(--sf-color-surface);
}

/* Page headers --------------------------------------------------------------*/
.page-header {
	margin-bottom: var(--sf-space-6);
	padding-bottom: var(--sf-space-4);
	border-bottom: 1px solid var(--sf-color-border);
}

/* (Home page styles now live in home.css, only loaded on the front page.) */

.section-title {
	text-align: center;
	margin-bottom: var(--sf-space-6);
}

/* Widgets -------------------------------------------------------------------*/
.widget-area,
.widget {
	margin-bottom: var(--sf-space-6);
}

.widget-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--sf-space-3);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--sf-color-border);
}

/* 404 -----------------------------------------------------------------------*/
.error-404 {
	text-align: center;
	padding-block: var(--sf-space-10);
}