/*
 * Poetry Website Styles for Kurt Allen Bukow
 * Minimalist design with book-like aesthetics
 */

/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */
:root {
	/* Book-like color palette */
	--bg-page: #f9f6f0;           /* Aged book page cream */
	--text-primary: #2d2a26;      /* Dark charcoal for text */
	--text-secondary: #6b655a;    /* Muted brown for metadata */
	--accent-earth: #8b7355;      /* Earthy brown for links */
	--accent-subtle: #c9b99a;     /* Light tan for borders */
	--hover-state: #a68a6a;       /* Darker for hover */

	/* Typography */
	--font-serif: 'Crimson Text', Georgia, serif;
	--font-size-base: 18px;
	--font-size-title: 2.5rem;
	--font-size-heading: 1.75rem;
	--font-size-meta: 0.875rem;
	--line-height-base: 1.8;
	--line-height-poem: 2.0;

	/* Spacing */
	--max-width: 850px;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 3rem;
	--spacing-xl: 4rem;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: var(--font-size-base);
}

body {
	font-family: var(--font-serif);
	background-color: var(--bg-page);
	color: var(--text-primary);
	line-height: var(--line-height-base);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ========================================
   Typography
   ======================================== */
h1, h2, h3 {
	font-weight: 600;
	line-height: 1.3;
}

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

a {
	color: var(--accent-earth);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--hover-state);
}

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

p:last-child {
	margin-bottom: 0;
}

/* ========================================
   Header
   ======================================== */
.site-header {
	text-align: center;
	padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
	border-bottom: 1px solid var(--accent-subtle);
}

.author-name {
	font-size: var(--font-size-title);
	margin-bottom: var(--spacing-sm);
	font-weight: 400;
	letter-spacing: 0.02em;
}

.author-name a {
	color: var(--text-primary);
}

.author-name a:hover {
	color: var(--accent-earth);
}

.site-nav {
	display: flex;
	gap: var(--spacing-md);
	justify-content: center;
	font-size: var(--font-size-meta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.site-nav a {
	color: var(--text-secondary);
}

.site-nav a:hover {
	color: var(--accent-earth);
}

/* ========================================
   Main Content
   ======================================== */
.site-content {
	flex: 1;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-md);
}

/* ========================================
   Footer
   ======================================== */
.site-footer {
	text-align: center;
	padding: var(--spacing-md);
	border-top: 1px solid var(--accent-subtle);
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
	margin-top: var(--spacing-xl);
}

.footer-social {
	margin-top: var(--spacing-xs);
}

/* ========================================
   Poem Display
   ======================================== */
.poem-container {
	max-width: 100%;
}

.poem-header {
	text-align: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--accent-subtle);
}

.poem-title {
	font-size: var(--font-size-heading);
	margin-bottom: var(--spacing-sm);
	font-weight: 400;
	font-style: italic;
}

/* Override h1 default styles for poem title */
h1.poem-title {
	font-size: var(--font-size-heading);
}

.poem-date {
	display: block;
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
	font-style: normal;
}

.poem-content {
	margin-bottom: var(--spacing-xl);
	line-height: var(--line-height-poem);
}

/* Preserve poem formatting */
.poem-content p {
	white-space: pre-wrap;
	margin-bottom: var(--spacing-md);
}

.poem-content em {
	font-style: italic;
}

.poem-content strong {
	font-weight: 600;
}

/* ========================================
   Poem Sharing
   ======================================== */
.poem-sharing {
	text-align: center;
	padding: var(--spacing-md) 0;
	margin-bottom: var(--spacing-md);
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
}

.share-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--spacing-xs);
}

.share-options {
	display: inline;
}

.share-link {
	background: none;
	border: none;
	font-family: var(--font-serif);
	font-size: var(--font-size-meta);
	color: var(--accent-earth);
	cursor: pointer;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: color 0.2s ease;
}

.share-link:hover {
	color: var(--hover-state);
}

.share-separator {
	margin: 0 var(--spacing-xs);
	color: var(--accent-subtle);
}

/* ========================================
   Poem Navigation
   ======================================== */
.poem-navigation {
	padding-top: var(--spacing-md);
	margin-top: var(--spacing-md);
}

.nav-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-sm);
}

.nav-previous,
.nav-next {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--accent-subtle);
	border-radius: 4px;
	color: var(--accent-earth);
	transition: all 0.2s ease;
}

.nav-previous:hover,
.nav-next:hover {
	background-color: var(--accent-earth);
	border-color: var(--accent-earth);
	color: var(--bg-page);
}

.nav-arrow {
	font-size: 1.2em;
}

.nav-label {
	font-size: var(--font-size-meta);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.nav-placeholder {
	width: 100px;
}

.nav-hint {
	text-align: center;
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
	font-style: italic;
}

/* ========================================
   Archive Page
   ======================================== */
.archive-container {
	max-width: 100%;
}

.archive-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--accent-subtle);
	font-weight: 400;
}

.poems-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.poem-item {
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--accent-subtle);
}

.poem-item:last-child {
	border-bottom: none;
}

.poem-link {
	display: block;
}

.poem-item-title {
	font-size: 1.25rem;
	font-weight: 400;
	font-style: italic;
	color: var(--accent-earth);
	margin-bottom: var(--spacing-xs);
}

.poem-link:hover .poem-item-title {
	color: var(--hover-state);
}

.poem-item-date {
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
}

/* ========================================
   About Page
   ======================================== */
.about-container {
	max-width: 100%;
}

.about-title {
	text-align: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--accent-subtle);
	font-weight: 400;
}

.about-content {
	line-height: var(--line-height-base);
}

.about-social {
	margin-top: var(--spacing-md);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--font-size-meta);
}

/* ========================================
   Empty & Not Found States
   ======================================== */
.empty-container,
.not-found-container {
	text-align: center;
	padding: var(--spacing-xl) 0;
}

.empty-message,
.not-found-message {
	color: var(--text-secondary);
	font-style: italic;
	margin-bottom: var(--spacing-md);
}

.not-found-title {
	margin-bottom: var(--spacing-md);
}

.not-found-link {
	color: var(--accent-earth);
	text-decoration: underline;
}

.not-found-link:hover {
	color: var(--hover-state);
}

/* ========================================
   Subscribe Section
   ======================================== */
.subscribe-section {
	text-align: center;
	padding: var(--spacing-lg) 0;
	margin-top: var(--spacing-xl);
	border-top: 1px solid var(--accent-subtle);
}

.subscribe-title {
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: var(--spacing-xs);
}

.subscribe-description {
	font-size: var(--font-size-meta);
	color: var(--text-secondary);
	margin-bottom: var(--spacing-md);
}

.subscribe-form {
	display: flex;
	gap: var(--spacing-xs);
	justify-content: center;
	flex-wrap: wrap;
}

.subscribe-input {
	font-family: var(--font-serif);
	font-size: var(--font-size-meta);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--accent-subtle);
	border-radius: 4px;
	background: var(--bg-page);
	color: var(--text-primary);
	min-width: 200px;
}

.subscribe-input:focus {
	outline: none;
	border-color: var(--accent-earth);
}

.subscribe-button {
	font-family: var(--font-serif);
	font-size: var(--font-size-meta);
	padding: 0.5rem 1rem;
	border: 1px solid var(--accent-earth);
	border-radius: 4px;
	background: var(--accent-earth);
	color: var(--bg-page);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: all 0.2s ease;
}

.subscribe-button:hover {
	background: var(--hover-state);
	border-color: var(--hover-state);
}

.subscribe-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.subscribe-message {
	font-size: var(--font-size-meta);
	margin-top: var(--spacing-sm);
	min-height: 1.5em;
}

.subscribe-message.success {
	color: #4a7c59;
}

.subscribe-message.error {
	color: #a65353;
}

/* ========================================
   Subscriber Pages
   ======================================== */
.subscriber-page {
	text-align: center;
	padding: var(--spacing-xl) 0;
}

.subscriber-title {
	font-size: var(--font-size-heading);
	font-weight: 400;
	margin-bottom: var(--spacing-md);
}

.subscriber-page p {
	margin-bottom: var(--spacing-md);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
	:root {
		--font-size-base: 16px;
		--font-size-title: 2rem;
		--font-size-heading: 1.5rem;
		--spacing-xl: 2.5rem;
		--spacing-lg: 2rem;
	}

	.site-header {
		padding: var(--spacing-md) var(--spacing-sm);
	}

	.site-nav {
		gap: var(--spacing-sm);
	}

	.nav-label {
		display: none;
	}

	.nav-previous,
	.nav-next {
		padding: var(--spacing-sm);
		min-width: 48px;
		justify-content: center;
	}

	.nav-arrow {
		font-size: 1.5em;
	}

	.nav-hint {
		display: none;
	}
}

@media (max-width: 480px) {
	:root {
		--font-size-base: 15px;
		--font-size-title: 1.75rem;
	}
}