/*!
Theme Name: Berghain
Theme URI: https://www.seancarney.ca
Author: Sean Carney
Author URI: https://www.seancarney.ca
Description: A bold Neobrutalist WordPress theme for personal webpage and blog featuring thick borders, high-contrast colors, and playful interactive elements. Fully accessible (WCAG 2.1 AA), Gutenberg-compatible, and optimized for performance.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berghain
Tags: blog, one-column, two-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 CSS Custom Properties (Neobrutalism Design System)
2.0 Normalize & Reset
3.0 Typography
4.0 Elements
5.0 Forms
6.0 Navigation
7.0 Accessibility
8.0 Layout
9.0 Content
10.0 Widgets
11.0 Comments
12.0 Media
13.0 Blocks (Gutenberg)
14.0 Post Formats
15.0 Utilities
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 CSS Custom Properties (Neobrutalism Design System)
--------------------------------------------------------------*/
:root {
	/* Colors - Neobrutalism High Contrast Palette */
	--color-main: #000000;
	--color-main-foreground: #ffffff;
	--color-secondary: #ffff00;
	--color-accent: #ff00ff;
	--color-background: #ffffff;
	--color-foreground: #000000;
	--color-border: #000000;
	--color-success: #00ff00;
	--color-warning: #ffaa00;
	--color-error: #ff0000;

	/* Typography */
	--font-heading: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
	--font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--font-size-base: 18px;
	--font-size-small: 14px;
	--font-size-large: 24px;
	--font-size-xlarge: 36px;
	--font-size-xxlarge: 48px;
	--line-height-base: 1.6;
	--line-height-heading: 1.2;

	/* Spacing - Grid-based (70px baseline) */
	--spacing-unit: 10px;
	--spacing-xs: calc(var(--spacing-unit) * 0.5);
	--spacing-sm: var(--spacing-unit);
	--spacing-md: calc(var(--spacing-unit) * 2);
	--spacing-lg: calc(var(--spacing-unit) * 3.5);
	--spacing-xl: calc(var(--spacing-unit) * 7);

	/* Borders - Thick Neobrutalist Borders */
	--border-width-thin: 2px;
	--border-width-thick: 4px;
	--border-radius-base: 4px;
	--border-radius-none: 0;

	/* Shadows - Neobrutalist Shadow System */
	--shadow-offset-x: 6px;
	--shadow-offset-y: 6px;
	--shadow-color: var(--color-border);
	--shadow-base: var(--shadow-offset-x) var(--shadow-offset-y) 0 var(--shadow-color);
	--shadow-large: calc(var(--shadow-offset-x) * 1.5) calc(var(--shadow-offset-y) * 1.5) 0 var(--shadow-color);

	/* Transitions */
	--transition-speed: 150ms;
	--transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--content-width-narrow: 640px;
	--content-width-normal: 960px;
	--content-width-wide: 1200px;
	--content-width-full: 100%;

	/* Customizable Background Colors */
	--color-content-bg: #ffffff;
	--color-header-bg: #ffffff;
	--color-footer-bg: #000000;
}

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

html {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-foreground);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*--------------------------------------------------------------
3.0 Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 900;
	line-height: var(--line-height-heading);
	margin-top: 0;
	margin-bottom: var(--spacing-md);
	color: var(--color-main);
}

h1 {
	font-size: var(--font-size-xxlarge);
	margin-bottom: var(--spacing-lg);
}

h2 {
	font-size: var(--font-size-xlarge);
}

h3 {
	font-size: var(--font-size-large);
}

h4, h5, h6 {
	font-size: var(--font-size-base);
}

p {
	margin-top: 0;
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--color-main);
	text-decoration: underline;
	text-decoration-thickness: var(--border-width-thin);
	text-underline-offset: 3px;
	transition: all var(--transition-speed) var(--transition-easing);
}

a:hover,
a:focus {
	color: var(--color-accent);
	text-decoration-color: var(--color-accent);
}

strong, b {
	font-weight: 900;
}

/*--------------------------------------------------------------
7.0 Accessibility
--------------------------------------------------------------*/
/* Skip to content link */
.skip-link {
	position: absolute;
	top: -999px;
	left: -999px;
	background-color: var(--color-main);
	color: var(--color-main-foreground);
	padding: var(--spacing-sm) var(--spacing-md);
	border: var(--border-width-thick) solid var(--color-border);
	text-decoration: none;
	font-weight: 700;
	z-index: 100000;
}

.skip-link:focus {
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	outline: var(--border-width-thick) solid var(--color-accent);
	outline-offset: var(--border-width-thin);
}

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

.screen-reader-text:focus {
	background-color: var(--color-background);
	border: var(--border-width-thick) solid var(--color-border);
	clip: auto !important;
	clip-path: none;
	color: var(--color-foreground);
	display: block;
	font-size: var(--font-size-base);
	height: auto;
	left: var(--spacing-sm);
	padding: var(--spacing-md);
	top: var(--spacing-sm);
	width: auto;
	z-index: 100000;
}

/*--------------------------------------------------------------
15.0 Utilities
--------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* Neobrutalist Box Elements (non-interactive) */
.neobrutalist-box {
	border: var(--border-width-thick) solid var(--color-border);
	border-radius: var(--border-radius-base);
	box-shadow: var(--shadow-base);
}

/* WordPress Alignment Classes */
.alignleft {
	float: left;
	margin-right: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.alignright {
	float: right;
	margin-left: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-md);
}