/*
Theme Name: Texas Rural Fence
Theme URI: https://livingstonfence.com
Author: Texas Rural Fence, Inc.
Description: A classic WordPress theme built to work cleanly with Elementor. Page content is fully designed in Elementor (no width constraints), while the blog, widgets, and Customizer-driven theme colors give the rest of the site a finished, branded feel without needing code edits for everyday changes.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: texas-rural-fence
*/

/* ==========================================================================
   Base
   ========================================================================== */

:root {
	--trf-color-primary: #002347;
	--trf-color-accent: #8C0021;
	--trf-color-background: #F2E4C9;
	--trf-color-text: #0A0A0A;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--trf-color-text);
	background: #fff;
	line-height: 1.6;
}

a {
	color: var(--trf-color-accent);
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	padding: 12px 16px;
	background: var(--trf-color-primary);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--trf-color-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Header (fallback only — HFE / Elementor header overrides this in
   normal use. Kept styled in case HFE is ever deactivated.)
   ========================================================================== */

.trf-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 24px;
	background: var(--trf-color-primary);
}

.trf-site-logo img {
	max-height: 60px;
	width: auto;
	display: block;
}

.trf-site-header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trf-site-header nav a {
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

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

/* ==========================================================================
   Footer (fallback only — same note as header above)
   ========================================================================== */

.trf-site-footer {
	padding: 40px 24px 24px;
	background: var(--trf-color-background);
	color: var(--trf-color-text);
}

.trf-site-footer .widget-area {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 24px;
}

.trf-site-footer .widget-area .widget {
	flex: 1 1 200px;
}

.trf-site-footer .widget-title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
	color: var(--trf-color-primary);
}

.trf-site-footer nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.trf-site-footer nav a {
	text-decoration: none;
	color: var(--trf-color-primary);
	font-size: 14px;
	font-weight: 600;
}

.trf-copyright {
	font-size: 12px;
	color: #6b6357;
	margin: 16px 0 0;
}

/* ==========================================================================
   Blog (single posts, archives) — these use real theme templates,
   not Elementor, so they get genuine styling here.
   ========================================================================== */

.trf-post-header h1,
.trf-archive-header h1 {
	font-size: 32px;
	color: var(--trf-color-primary);
	margin-bottom: 8px;
}

.trf-post-meta {
	font-size: 13px;
	color: #8a8377;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.trf-post-thumbnail {
	margin: 24px 0;
	border-radius: 4px;
	overflow: hidden;
}

.trf-post-content {
	font-size: 17px;
}

.trf-post-content h2,
.trf-post-content h3 {
	color: var(--trf-color-primary);
}

.trf-post-content a {
	color: var(--trf-color-accent);
}

article.trf-post {
	border-bottom: 1px solid #e5ddc8;
}

/* ==========================================================================
   Widgets
   ========================================================================== */

.widget {
	margin-bottom: 28px;
}

.widget-title {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--trf-color-primary);
}

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

.widget li {
	margin-bottom: 8px;
}

/* ==========================================================================
   Comments
   ========================================================================== */

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

.comment-list li {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e5ddc8;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.trf-site-header,
	.trf-site-footer {
		padding: 16px;
	}
}