/* main.css: Base responsive layout rules used across templates
	 - Provides a consistent container, page wrapper, and simple grid utilities
	 - Adds sensible defaults for typography, images and focus states
	 - Keeps visual variables as fallbacks so component CSS variables continue to work
*/

/* Box sizing and sensible base reset */
*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--container-max-width: 1200px;
	--content-max-width: 960px;
	--gutter: 1rem;
	--page-vertical-padding: 2rem;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color: var(--foreground, #111827);
	background: var(--background, #fff);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

/* Images and media should scale naturally */
img, picture, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Reusable centered container */
.container {
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(var(--gutter));
	padding-right: calc(var(--gutter));
	width: 100%;
}

/* Page wrapper used by templates to provide vertical rhythm */
.page-container {
	min-height: calc(100vh - 140px); /* account for header+footer approximate space */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: var(--page-vertical-padding);
	padding-bottom: var(--page-vertical-padding);
}

/* Main content region inside the container */
.main-content {
	width: 100%;
	max-width: var(--content-max-width);
}

/* Basic typographic helpers */
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem 0; font-weight: 600; }
p { margin: 0 0 1rem 0; }

/* Simple responsive grid helpers (12 column-ish behavior) */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.col-12 { grid-column: 1 / -1; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

/* Utility for two-column balanced layout that collapses on mobile */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Stack utilities */
.stack { display: flex; flex-direction: column; gap: 0.75rem; }

/* Form helpers */
label { display: inline-block; margin-bottom: 0.4rem; font-weight: 600; }

/* Focus-visible for accessibility */
:focus-visible { outline: 3px solid var(--ring, rgba(5,150,105,0.4)); outline-offset: 2px; }

/* Buttons and links inherit readable tap targets by default */
button, a.button { min-height: 40px; }

/* Breakpoints: adjust layout on narrower screens */
@media (max-width: 1024px) {
	:root { --container-max-width: 980px; --content-max-width: 720px; }
	.grid { gap: 0.75rem; }
	.grid-2 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	:root { --container-max-width: 720px; --content-max-width: 640px; }
	.grid { grid-template-columns: repeat(6, 1fr); }
	.col-6 { grid-column: 1 / -1; } /* full width stacked behavior */
	.grid-2 { grid-template-columns: 1fr; }
	.page-container { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

@media (max-width: 480px) {
	:root { --container-max-width: 100%; --content-max-width: 100%; }
	.container { padding-left: 0.75rem; padding-right: 0.75rem; }
	.page-container { padding-top: 1rem; padding-bottom: 1rem; }
	.grid { grid-template-columns: 1fr; }
}

/* Small utility helpers */
.muted { color: var(--muted-foreground, #6b7280); }
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* End of base responsive layout */