/*
Theme Name: Eley Law
Theme URI: https://eleylawmelbourne.com/
Author: Mach DevOps LLC
Author URI: https://machdevops.com/
Description: Clean, lightweight custom theme for The Law Office of Edmond Eley, P.A. in Melbourne, Florida. Optimized for family law, wills, trusts, probate and estate planning attorney in Brevard County. No frameworks, no bloat — pure semantic HTML with secure PHP templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eley-law
*/

/* =====================================================================
   TOKENS
   ===================================================================== */
:root {
	--navy:    #1c2b3a;
	--navy-dk: #111d28;
	--gold:    #c29965;
	--gold-lt: #d4b07e;
	--rule:    #dde1e6;
	--paper:   #f7f8fa;
	--white:   #ffffff;
	--text:    #222831;
	--muted:   #5c6978;
	--max:     860px;
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-serif: Georgia, 'Times New Roman', serif;
}

/* =====================================================================
   RESET / BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; font-size: 16px; }
body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 1.05rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.4em; }
p { margin: 0 0 1.1em; }
h1,h2,h3,h4,h5,h6 {
	font-family: var(--font-serif);
	color: var(--navy);
	line-height: 1.2;
	margin: 0 0 .6em;
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.site-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.site-main  { flex: 1; }
.container  { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
	background: var(--navy-dk);
	border-bottom: 3px solid var(--gold);
}
.header-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 18px 24px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
/* Site title / logo */
.site-branding a {
	text-decoration: none;
	display: block;
}
.site-title {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	font-weight: normal;
	color: var(--white);
	margin: 0;
	line-height: 1.2;
	letter-spacing: .01em;
}
.site-title span {
	display: block;
	font-size: .72rem;
	font-family: var(--font-sans);
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--gold);
	margin-top: 3px;
}
/* Primary nav */
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	flex-wrap: nowrap;
}
.site-nav a {
	display: block;
	color: #c8d3dc;
	text-decoration: none;
	font-size: .82rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: 8px 14px;
	border-radius: 4px;
	transition: color .15s, background .15s;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-page-item > a {
	color: var(--navy-dk);
	background: var(--gold);
}
.nav-toggle {
	display: none;
	background: none;
	border: 1px solid #3a5068;
	color: var(--white);
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 1.1rem;
	line-height: 1;
}

/* =====================================================================
   HERO BAND (home page)
   ===================================================================== */
.hero-band {
	background: var(--navy);
	color: var(--white);
	padding: 54px 24px 48px;
	text-align: center;
	border-bottom: 1px solid rgba(194,153,101,.3);
}
.hero-band .eyebrow {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--gold);
	margin-bottom: 14px;
}
.hero-band h1 {
	font-family: var(--font-serif);
	font-size: clamp(1.7rem, 4vw, 2.6rem);
	color: var(--white);
	margin: 0 auto 16px;
	max-width: 680px;
	line-height: 1.15;
}
.hero-band .sub {
	color: #bccad5;
	font-size: 1.05rem;
	max-width: 520px;
	margin: 0 auto 28px;
}
.hero-cta {
	display: inline-block;
	background: var(--gold);
	color: var(--navy-dk);
	font-weight: 600;
	font-size: .95rem;
	padding: 13px 28px;
	border-radius: 5px;
	text-decoration: none;
	transition: background .15s;
}
.hero-cta:hover { background: var(--gold-lt); color: var(--navy-dk); }

/* =====================================================================
   PAGE HERO (interior pages)
   ===================================================================== */
.page-hero {
	background: var(--navy);
	color: var(--white);
	padding: 40px 24px 34px;
	border-bottom: 3px solid var(--gold);
}
.page-hero .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.page-hero .crumb {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--gold);
	margin-bottom: 10px;
}
.page-hero h1 {
	color: var(--white);
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	margin: 0;
	font-family: var(--font-serif);
}

/* =====================================================================
   CONTENT AREA
   ===================================================================== */
.content-area { padding: 52px 0 60px; }
.entry-content { max-width: var(--max); margin: 0 auto; }

/* strip stray   indents left over from old WP blocks */
.entry-content p { text-indent: 0; }

/* =====================================================================
   PRACTICE AREAS STRIP (home only)
   ===================================================================== */
.practice-strip {
	background: var(--paper);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: 44px 24px;
}
.practice-strip h2 {
	text-align: center;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--navy);
	margin-bottom: 28px;
	font-family: var(--font-sans);
	font-weight: 600;
}
.practice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 14px;
	max-width: var(--max);
	margin: 0 auto;
}
.practice-item {
	background: var(--white);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--gold);
	padding: 18px 16px;
	text-align: center;
	border-radius: 0 0 4px 4px;
}
.practice-item span {
	display: block;
	font-size: .93rem;
	font-weight: 600;
	color: var(--navy);
	line-height: 1.3;
}

/* =====================================================================
   CONTACT CARD (Contact Us page)
   ===================================================================== */
.contact-card {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--gold);
	padding: 32px 36px;
	max-width: 520px;
	margin: 0 auto 40px;
}
.contact-card h2 {
	font-size: 1.3rem;
	margin-bottom: 20px;
	color: var(--navy);
}
.contact-row {
	display: flex;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule);
	align-items: flex-start;
	font-size: 1rem;
}
.contact-row:last-child { border-bottom: none; }
.contact-lbl {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gold);
	font-weight: 600;
	min-width: 60px;
	padding-top: 2px;
}
.contact-val a { color: var(--navy); font-weight: 600; }

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band {
	background: var(--navy-dk);
	color: var(--white);
	text-align: center;
	padding: 46px 24px;
	border-top: 3px solid var(--gold);
}
.cta-band p { color: #bccad5; margin-bottom: 20px; font-size: 1.05rem; }
.cta-band h2 {
	font-family: var(--font-serif);
	color: var(--white);
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	margin-bottom: 10px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
	background: var(--navy-dk);
	color: #8da0b0;
	font-size: .875rem;
	padding: 36px 24px;
	border-top: 1px solid rgba(194,153,101,.25);
}
.footer-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-start;
}
.footer-brand b { color: var(--white); font-family: var(--font-serif); font-size: 1.05rem; }
.footer-brand p { margin: 6px 0 0; font-size: .82rem; }
.footer-contact { text-align: right; }
.footer-contact a { color: var(--gold); text-decoration: none; }
.footer-contact a:hover { color: var(--gold-lt); }
.footer-bottom {
	max-width: var(--max);
	margin: 22px auto 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.07);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .78rem;
	color: #566878;
}
.footer-disclaimer {
	max-width: var(--max);
	margin: 12px auto 0;
	font-size: .75rem;
	color: #4a5a6a;
	line-height: 1.6;
}

/* =====================================================================
   WP CORE ALIGNMENT HELPERS
   ===================================================================== */
.aligncenter { display: block; margin: 0 auto 1em; }
.alignleft   { float: left; margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.wp-block-heading { margin-bottom: .5em; }

/* =====================================================================
   404
   ===================================================================== */
.not-found { padding: 80px 24px; text-align: center; }
.not-found h1 { font-size: 4rem; color: var(--gold); margin-bottom: 8px; }

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 6px;
	background: var(--gold);
	color: var(--navy-dk);
	padding: 8px 16px;
	font-weight: 600;
	z-index: 999;
	border-radius: 3px;
}
.skip-link:focus { left: 6px; }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 680px) {
	.nav-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--navy-dk);
		border-bottom: 3px solid var(--gold);
		z-index: 100;
	}
	.site-nav.open { display: block; }
	.site-nav ul { flex-direction: column; gap: 0; padding: 8px 0; }
	.site-nav a { border-radius: 0; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
	.site-header { position: relative; }
	.header-inner { flex-wrap: nowrap; }
	.footer-contact { text-align: left; }
	.contact-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}