/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: basetags.css
Description: Global resets, typography bases, and core layout logic.
*/

/* * -------------------------------------------------------------------------
 * Global Reset & Body
 * -------------------------------------------------------------------------
 */

* {
	box-sizing: border-box;
	text-decoration-skip: objects;
}

body {
	margin: 0;
	padding: 0;
	
	/* Typography Base */
	font-family: var(--base-fonts);
	font-size: var(--font-size-m);
	font-optical-sizing: auto;
	line-height: 1.6;
	color: var(--color-text);

	/* Texture & Backgrounds */
	background-color: var(--color-bg);
	background-image: var(--bg-effect-light);
	background-size: var(--bg-size);
	background-blend-mode: var(--bg-effect-blend-light);
	background-repeat: repeat;
}

/* * -------------------------------------------------------------------------
 * Page Layout
 * -------------------------------------------------------------------------
 */

/* Main Wrapper */
body > .main {
	padding: 0;
	width: 100%;
	/* OPTIMIZATION: Ensure footer height matches this calculation, or use grid/flex for sticky footer */
	min-height: calc(100vh - 215px); 
	max-width: unset;
}

/* Mobile Constraints */
@media (max-width: 1000px) {
	.content-wrapper {
		max-width: 100%;
	}
}

.content {
	margin-bottom: var(--space-xl);
}

/* Inner Container Constraints */
.main .content > * {
	max-width: var(--breakpoint-l);
	margin: 0 auto;
}

/* Section Spacing */
section,
article {
	padding: var(--space-m) var(--page-gutter-s);
	margin: 0 0 var(--space-xl) 0;
}

/* * Inverse Section (Dark Mode Areas)
 * Uses contextual dark background/texture tokens
 */
section.inverse {
	max-width: none !important;
	
	background-color: var(--color-accent-dark);
	background-image: var(--bg-effect-dark);
	background-size: var(--bg-size);
	background-repeat: repeat;
	background-blend-mode: var(--bg-effect-blend-dark);

	color: var(--color-bg);
}

section.inverse > * {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

/* * Breakpoints
 * Note: CSS Variables cannot be used in media query declarations in vanilla CSS.
 * Values below match variables.css tokens.
 */

/* --breakpoint-m */
@media (min-width: 700px) {
	section,
	article {
		padding: var(--space-s) var(--page-gutter-l);
	}
}

/* --container-max */
@media (min-width: 900px) {    
	section,
	article {
		padding: var(--space-m) var(--page-gutter-l);
	}
	
	/* * FLAG: Negative Margin Hack
	 * Overlapping sections can cause z-index wars. 
	 * Consider using a negative margin utility class instead of default behavior.
	 */
	section.inverse {
		position: relative;
		top: calc(-1 * var(--space-m));
		z-index: 10;
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}
}

/* --container-max-with-gutter */
@media (min-width: 940px) {
	section,
	article {
		padding: var(--space-m) 0;
	}
}

/* * -------------------------------------------------------------------------
 * Headers
 * -------------------------------------------------------------------------
 */

h1, h2, h3, h4, nav {
	font-family: var(--header-fonts);
}

h1 {
	font-size: var(--font-size-xl);
	color: var(--color-accent); /* Context-aware color */
	padding: 0;
	margin: var(--space-xl) 0 var(--space-m) 0;
}

.main .content > h1 {
	margin: var(--space-xl) auto var(--space-m) auto;
}

h1:not(.show) {
	display: none;
}

h2 {
	font-size: var(--font-size-xl);
	font-weight: normal;
	color: var(--color-accent);
	margin-bottom: var(--space-m);
	margin-top: var(--space-m);
}
@media (min-width: 700px) {
	h2 {
		font-size: var(--font-size-xxl);
	}
}

article h2 {    
}

h3 {
	font-size: var(--font-size-m);
	margin: 0;
}

article h2,
article h3, {
	margin-top: var(--space-xl);
}

article h3 {
	margin-top: var(--space-lg);
	margin-bottom: var(--space-m);
	font-size: var(--font-size-l);
	color: var(--color-accent);
}

h2.small,
h3.small {
  font-size: var(--font-size-s);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-m);
  opacity: 0.85;
}

.inverse h2,
.inverse h3 {
	color: var(--color-accent-light);
}

/* * -------------------------------------------------------------------------
 * Content Elements (Lists, Paragraphs, HR)
 * -------------------------------------------------------------------------
 */

:where(section, article) img:not(.hard) {
	border-radius: var(--radius-s)
}
:where(section, article) img:not(.flat) {
	box-shadow: var(--shadow-medium);
}
:where(section, article) img:not(.no-edge) {
	outline: #fff1 1px solid;
	outline-offset: -1px;
}
:where(p) strong {
	background-color: #ffe70099;
}

p:first-child {
	margin-top: 0;
}

/* Article Lists */
article ul {
	border-left: 3px solid var(--color-borders);
	padding-left: var(--space-m);
	padding-right: var(--space-lg);
	list-style-type: none;
}

article ul strong {
	color: var(--color-accent);
}

article p,
article ul {
	line-height: 1.8;
}

li {
	margin-bottom: var(--space-s);  
}

article li {
	margin-bottom: var(--space-m);
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 2px solid var(--color-accent);
	border-radius: 50%;
	opacity: .5;
	margin: var(--space-xl) auto;
	max-width: 250px;
	width: 100%;
}

/* Tables */
th {
	text-align: left;
}

/* * -------------------------------------------------------------------------
 * Hyperlinks
 * -------------------------------------------------------------------------
 */

a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: all var(--motion-fast);
}

a:hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.inverse a {
	color: var(--color-accent-light);
}

/* Legacy description removal? */
a .description {
	text-decoration: none !important;
	text-decoration-thickness: 0;
	text-decoration-color: var(--color-bg);
}

/* * -------------------------------------------------------------------------
 * Hero Images
 * -------------------------------------------------------------------------
 */

figure.hero-image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	overflow: hidden;
	/* !important overrides standard figure margins from resets */
	margin: 0 auto !important; 
	max-width: var(--container-wide) !important;
	box-shadow: 0 0 1px 1px #fff2, 0 1px 3px #0006, 0 3px 10px #0001;
}

figure.hero-image img {
	display: block; /* Removes bottom gap typical with inline images */
	width: 100%;
	height: 100%;
	object-fit: cover; /* Prevents aspect ratio distortion */
}

/* --container-wide */
@media (min-width: 1280px) {
	figure.hero-image {
		/* Round the bottom corners when the image doesn't touch screen edges */
		border-bottom-left-radius: var(--radius-l);
		border-bottom-right-radius: var(--radius-l);
	}
}

/* * -------------------------------------------------------------------------
 * Components
 * -------------------------------------------------------------------------
 */

/* CTA Box */
.cta-box {
	background: var(--color-borders);
	border-radius: var(--radius-m);
	padding: var(--space-m);
	margin-top: var(--space-xl);
}

.cta-box h2,
.cta-box h3 {
	margin-top: 0;
}

.cta-box .wp-block-columns {
	margin-bottom: 0;
}

/* Special Variation */
.cta-box.special {
	background: var(--color-gray-800); /* Swapped hex for dark gray var */
	color: var(--color-bg);
}

/* * -------------------------------------------------------------------------
 * Modifiers
 * -------------------------------------------------------------------------
 */

.hide {
	display: none!important;
}

.special h2,
.special h3 {
	color: var(--color-special);
}