/*
Theme Name: Howard & Howard
Theme URI: https://howardhowardlaw.com
Author: David Walker Designs
Description: Custom hand-coded theme for Howard & Howard, P.C.
Version: 1.0.0
Text Domain: howard-howard
*/

/* ---------- Design tokens ---------- */
:root {
	--navy: #142654;
	--navy-dark: #131d34;
	--cream: #f5f4f2;
	--gold: #c9a96e;
	--white: #ffffff;
	--text: #333333;
	--text-light: #666666;
	--border: #d8d8d8;
	--font-serif: 'Prata', Georgia, 'Times New Roman', serif;
	--font-sans: 'Open Sans', Arial, sans-serif;
	--max-width: 1140px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--text-light);
	font-size: 14px;
	line-height: 1.7;
	background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--text);
	margin: 0 0 0.5em;
	line-height: 1.25;
}
p { margin: 0 0 1em; }

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.divider {
	width: 60px;
	height: 2px;
	background: var(--text-light);
	margin: 24px auto;
}

.btn {
	display: inline-block;
	padding: 6px 20px;
	border: 2px solid var(--navy);
	color: var(--navy);
	font-family: var(--font-sans);
	font-size: 20px;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--navy); color: var(--white); }
.btn-light { border-color: rgb(147,149,152); color: var(--white); text-transform: uppercase; }
.btn-light:hover { background: var(--white); color: var(--navy); }

/* ---------- Top bar ---------- */
.top-bar {
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}
.top-bar .logo img { height: 51px; width: auto; }
.top-bar .logo {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	letter-spacing: 0.02em;
	color: var(--navy);
}
.top-bar .offices {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	font-size: 0.92rem;
	color: var(--text-light);
	text-align: right;
}
.top-bar .offices strong { color: var(--text-light); font-weight: 700; display: block; }

/* ---------- Primary nav ---------- */
.site-nav {
	background: var(--navy);
}
.site-nav .container { display: flex; align-items: center; justify-content: center; }
.site-nav ul { display: flex; gap: 8px; }
.site-nav .primary-menu-wrap > ul { justify-content: center; width: 100%; }
.site-nav li { position: relative; }
.site-nav a {
	display: block;
	padding: 18px 20px;
	color: var(--white);
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.site-nav a:hover, .site-nav li.current-menu-item > a { background: rgba(255,255,255,0.08); }
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: var(--white);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	z-index: 20;
}
.site-nav li:hover > .sub-menu { display: block; }
.site-nav .sub-menu a { color: var(--navy); text-transform: none; letter-spacing: normal; padding: 12px 20px; }
.site-nav .sub-menu a:hover { background: var(--cream); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Hamburger toggle — hidden on desktop */
.menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 16px;
	cursor: pointer;
}
.menu-toggle-bars {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}
.menu-toggle-bars span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--white);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle-bars span:nth-child(1) { top: 0; }
.menu-toggle-bars span:nth-child(2) { top: 8px; }
.menu-toggle-bars span:nth-child(3) { top: 16px; }
.menu-toggle.is-active .menu-toggle-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active .menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .menu-toggle-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Submenu toggle button (mobile only) */
.submenu-toggle { display: none; }

/* ---------- Footer ---------- */
.site-footer {
	background: #222222;
	color: var(--text-light);
	padding: 28px 0;
	font-size: 14px;
	text-align: center;
}

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section-cream { background: var(--cream); }
.section-framed {
	background: #f7f7f7;
	border-left: 8vw solid var(--navy);
	border-right: 8vw solid var(--navy);
	padding: 30px 0 29px;
	box-sizing: border-box;
}
.section-framed h2 {
	font-size: 34px;
	line-height: 1.2;
}
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h2 { color: var(--white); }
.text-center { text-align: center; }
.narrow { max-width: 760px; margin: 0 auto; }
.lead { font-size: 14px; color: var(--white); max-width: 760px; margin: 0 auto 40px; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.hero-overlay {
	position: absolute; inset: 0;
	background: rgba(49, 62, 71, 0.8);
}
.hero-content { position: relative; z-index: 1; }
.hero h1 {
	color: var(--white);
	font-size: 2.6rem;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* ---------- Interior page hero (attorneys, practice areas, contact) ---------- */
.page-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.page-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(rgb(49, 62, 71) 0%, rgba(49, 62, 71, 0.5) 100%);
}
.page-hero-content { position: relative; z-index: 1; text-align: center; }
.page-hero h1 {
	color: var(--white);
	font-size: 41px;
	max-width: 900px;
	margin: 0 auto;
}
.page-hero-subtitle { color: var(--white); font-size: 16px; margin-top: 8px; }
.page-hero-addresses { margin-top: 24px; }
.page-hero-addresses h4 { color: var(--white); font-size: 18px; font-weight: 500; line-height: 1.6; margin: 0 0 16px; }
.page-hero-addresses h4:last-child { margin-bottom: 0; }

/* ---------- Practice grid ---------- */
.practice-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 48px;
	text-align: center;
}
.practice-card { display: block; }
.practice-card-img {
	height: 160px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	margin-bottom: 16px;
}
.practice-card h3 { font-size: 22px; color: #000; }

/* ---------- Photo-overlay sections ---------- */
.section-photo {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.section-photo .container { position: relative; z-index: 1; }
.section-photo h2 { color: var(--white); font-size: 38px; }
.photo-overlay { position: absolute; inset: 0; background: linear-gradient(rgb(49, 62, 71) 0%, rgba(49, 62, 71, 0.5) 100%); }
.section-photo.section-dark h2 { font-size: 48px; }
.eyebrow { color: var(--white); font-size: 14px; margin-bottom: 12px; }
.btn-small { padding: 10px 14px; font-size: 14px; font-weight: 700; letter-spacing: 4px; }
.btn-dark { border-color: rgb(147,149,152); color: #2a2a2a; }
.btn-dark:hover { background: #2a2a2a; color: var(--white); }

/* ---------- Practice area teaser list (Practice Areas parent page) ---------- */
.teaser-list { max-width: 820px; margin: 0 auto; }
.teaser-item { padding: 28px 0; border-bottom: 1px solid var(--border); }
.teaser-item:last-child { border-bottom: none; }
.teaser-item h2 { font-size: 24px; margin-bottom: 10px; }
.teaser-item p { margin-bottom: 16px; }

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	color: var(--white);
}
.feature-grid h4 { color: var(--white); font-family: var(--font-sans); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.feature-grid p { color: rgba(255,255,255,0.9); font-size: 14px; }

/* ---------- Contact form ---------- */
.contact-form-wrap { background: var(--white); padding: 40px; border-radius: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.req { color: #b3261e; }
.form-field input, .form-field select, .form-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 3px;
	font-family: var(--font-sans);
	font-size: 0.95rem;
}
.form-field textarea { resize: vertical; }
.contact-form button.btn { border: none; cursor: pointer; background: var(--navy); color: var(--white); }
.contact-form button.btn:hover { background: var(--navy-dark); }
.form-success { background: #e6f4ea; color: #1e5e34; padding: 20px; border-radius: 4px; text-align: center; }
.form-errors { background: #fbe9e7; color: #9a3324; padding: 16px 20px; border-radius: 4px; margin-bottom: 20px; }
.form-errors p { margin: 4px 0; }

/* ---------- Practice area single ---------- */
.practice-hero { min-height: 280px; }
.practice-hero h1 { font-size: 2.2rem; }
.practice-content { margin-bottom: 20px; }
.practice-content h2 { font-size: 1.5rem; margin-top: 1.5em; }

/* ---------- Page intro ---------- */
.page-intro { padding: 70px 0; }

/* ---------- Attorney flat listing (matches live site: all bios inline on one page) ---------- */
.attorney-flat { padding-top: 40px; padding-bottom: 40px; }
.attorney-flat + .attorney-flat { border-top: 1px solid var(--border); }
.divider-left { margin-left: 0; }
.attorney-email a { color: var(--gold); }
.attorney-flat-row {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin: 24px 0 32px;
	flex-wrap: wrap;
}
.attorney-flat-photo img { width: 200px; border-radius: 4px; }
.attorney-flat-content { flex: 1; min-width: 280px; max-width: 760px; }
.attorney-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	border-top: 1px solid var(--border);
	padding-top: 32px;
	margin-bottom: 32px;
}
.attorney-meta-group h4 { font-family: var(--font-sans); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 10px; }
.attorney-meta-group ul li { padding: 3px 0; font-size: 0.92rem; color: var(--text-light); border-bottom: 1px dotted var(--border); }
.attorney-meta-group p { font-size: 0.92rem; color: var(--text-light); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.top-bar { flex-direction: column; text-align: center; }
	.top-bar .offices { justify-content: center; text-align: center; }

	.site-nav .container { justify-content: space-between; padding: 0; }
	.menu-toggle { display: block; }

	.primary-menu-wrap {
		display: none;
		width: 100%;
		padding-bottom: 8px;
	}
	.primary-menu-wrap.is-open { display: block; }

	.site-nav > .container > .primary-menu-wrap > ul { justify-content: flex-start; }
	.site-nav ul { flex-direction: column; gap: 0; width: 100%; }
	.site-nav li { width: 100%; }
	.site-nav a { padding: 14px 20px; }

	/* Submenu becomes an inline expandable panel, not a hover flyout */
	.site-nav li:hover > .sub-menu { display: none; }
	.site-nav .sub-menu {
		position: static;
		box-shadow: none;
		min-width: 0;
		background: rgba(0,0,0,0.15);
		display: none;
	}
	.menu-item-has-children.submenu-open > .sub-menu { display: block !important; }
	.site-nav .sub-menu a { color: var(--white); }
	.site-nav .sub-menu a:hover { background: rgba(255,255,255,0.1); }
	.menu-item-has-children { position: relative; display: flex; flex-wrap: wrap; }
	.menu-item-has-children > a { flex: 1; }
	.menu-item-has-children > .sub-menu { flex-basis: 100%; }

	.submenu-toggle {
		display: block;
		background: none;
		border: 0;
		color: var(--white);
		padding: 14px 18px;
		font-size: 0.8rem;
		cursor: pointer;
	}
	.submenu-toggle span:first-child { display: inline-block; transition: transform 0.2s ease; }
	.menu-item-has-children.submenu-open .submenu-toggle span:first-child { transform: rotate(180deg); }

	.practice-grid { grid-template-columns: repeat(2, 1fr); }
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.hero h1 { font-size: 1.9rem; }
	.section-photo { background-attachment: scroll; }
	.section { padding: 56px 0; }
}
@media (max-width: 560px) {
	.practice-grid { grid-template-columns: 1fr; }
	.feature-grid { grid-template-columns: 1fr; }
	.attorney-grid { grid-template-columns: 1fr; }
	.attorney-meta-grid { grid-template-columns: 1fr; }
	.attorney-bio-header { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 900px) {
	.attorney-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.form-row { grid-template-columns: 1fr; }
	.contact-form-wrap { padding: 24px; }
}