/*
Theme Name: Haas
Theme URI: https://jlhaas.com/
Author: Metzae Media
Author URI: https://metzae.media/
Description: Custom theme for the Haas Law Office in Tyler, Texas. A modern rebuild of the site's long-standing banded layout: a cream page held between two solid brand bands, centered masthead, courthouse hero, content beside a sidebar, three-column footer. Responsive, accessible, no framework, no jQuery.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: haas
Tags: two-columns, right-sidebar, custom-menu, custom-header, featured-images, translation-ready, block-styles
*/

/* ==========================================================================
   1. Tokens
   The whole palette is here. To go back to the old stock gray scheme, swap
   the three --brand values for #a6a6a6, #808080 and #7d7d7d.
   ========================================================================== */

:root {
	/* Brand. Maroon matches the site icon. */
	--brand:            #660000;
	--brand-deep:       #4a0000;
	--brand-raised:     #7d1414;

	/* Page */
	--cream:            #fff4da;
	--cream-soft:       #fffaf0;
	--paper:            #ffffff;

	/* Ink */
	--ink:              #1a1614;
	--ink-soft:         #4a423e;
	--ink-muted:        #6f6660;
	--on-brand:         #fff4da;
	--on-brand-muted:   #e6d4b4;

	/* Lines */
	--rule:             rgba(102, 0, 0, .16);
	--rule-on-brand:    rgba(255, 244, 218, .38);

	/* Type */
	--font-display:     "Philosopher", "Palatino Linotype", Palatino, "Times New Roman", serif;
	--font-body:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--step--1:          clamp(.8125rem, .79rem + .11vw, .875rem);
	--step-0:           clamp(1rem, .972rem + .14vw, 1.0625rem);
	--step-1:           clamp(1.125rem, 1.08rem + .22vw, 1.25rem);
	--step-2:           clamp(1.3125rem, 1.24rem + .36vw, 1.5rem);
	--step-3:           clamp(1.5rem, 1.36rem + .7vw, 2rem);
	--step-4:           clamp(2.125rem, 1.5rem + 3.1vw, 4.25rem);

	/* Layout. Covenant: tight vertical rhythm, mobile first. */
	--wrap:             1020px;
	--wrap-pad:         clamp(1rem, .55rem + 2.2vw, 1.75rem);
	--band-pad:         clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
	--stack:            clamp(.75rem, .65rem + .5vw, 1.25rem);
	--radius:           10px;
	--radius-sm:        6px;

	--shadow:           0 1px 2px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .12);
	--focus:            #ffd166;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
iframe,
svg { max-width: 100%; }

img,
video { height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	text-wrap: balance;
}

p, li, dd, blockquote { text-wrap: pretty; }

a {
	color: var(--brand);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover { color: var(--brand-raised); }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: calc(var(--stack) * 1.5) 0;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--wrap-pad);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--cream);
	color: var(--brand);
	padding: .7rem 1.1rem;
	font-weight: 700;
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	left: 0;
}

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

/* ==========================================================================
   4. Masthead band
   ========================================================================== */

.site-header {
	background: var(--brand);
	color: var(--on-brand);
	padding-block: clamp(1.25rem, .9rem + 1.8vw, 2.25rem) 0;
	text-align: center;
}

.masthead-mark {
	display: inline-block;
	line-height: 0;
	margin-bottom: .6rem;
}

.masthead-mark img {
	width: clamp(56px, 12vw, 76px);
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: block;
}

.site-title {
	font-family: var(--font-display);
	font-size: var(--step-4);
	font-weight: 400;
	line-height: 1.05;
	margin: 0;
	letter-spacing: .005em;
}

.site-title a {
	color: var(--on-brand);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--paper);
}

/* The tagline keeps the old bordered plate, minus the four corner divs. */
.site-tagline {
	display: inline-block;
	max-width: min(100%, 40ch);
	margin: clamp(.6rem, .5rem + .5vw, 1rem) auto 0;
	padding: .35em 1.1em;
	border: 1px solid var(--rule-on-brand);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .16);
	color: var(--on-brand);
	font-family: var(--font-display);
	font-size: var(--step-2);
	line-height: 1.3;
	text-wrap: balance;
}

/* --- Navigation ------------------------------------------------------- */

.site-nav {
	margin-top: clamp(.9rem, .7rem + .8vw, 1.4rem);
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .15rem clamp(.15rem, .5vw, .5rem);
}

.site-nav a {
	display: block;
	padding: .5em .95em;
	color: var(--on-brand);
	text-decoration: none;
	font-size: var(--step--1);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	background: rgba(255, 244, 218, .14);
	color: var(--paper);
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav [aria-current="page"] {
	background: rgba(255, 244, 218, .2);
	color: var(--paper);
}

/* --- Call to action --------------------------------------------------- */

.call-action {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: clamp(.9rem, .7rem + .7vw, 1.25rem);
	padding: .62em 1.35em;
	background: var(--cream);
	color: var(--brand);
	font-weight: 700;
	font-size: var(--step-1);
	letter-spacing: .01em;
	text-decoration: none;
	border-radius: 999px;
	box-shadow: var(--shadow);
	transition: transform .15s ease, background-color .15s ease;
	white-space: nowrap;
}

.call-action:hover,
.call-action:focus-visible {
	background: var(--paper);
	color: var(--brand-deep);
	transform: translateY(-1px);
}

.call-action svg {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
}

.call-action .call-label {
	font-family: var(--font-body);
}

/* --- Hero ------------------------------------------------------------- */

.site-hero {
	margin-top: clamp(1.1rem, .8rem + 1.4vw, 2rem);
	padding-bottom: clamp(1.1rem, .8rem + 1.4vw, 2rem);
}

.site-hero img {
	display: block;
	width: 100%;
	height: clamp(150px, 30vw, 420px);
	object-fit: cover;
	object-position: center 42%;
	border: clamp(5px, 1vw, 10px) solid var(--cream);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* ==========================================================================
   5. Page headline band
   ========================================================================== */

.page-headline {
	background: var(--brand);
	padding-bottom: clamp(1.25rem, .9rem + 1.6vw, 2rem);
	text-align: center;
}

.page-headline .headline-plate {
	display: inline-block;
	max-width: min(100%, 34ch);
	padding: .3em 1em;
	border: 1px solid var(--rule-on-brand);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .16);
	color: var(--on-brand);
	font-size: var(--step-3);
	font-weight: 400;
	line-height: 1.25;
}

/* When the masthead already ends in the hero, the headline band continues it
   without a seam, so no extra top padding is needed. */
.site-hero + .page-headline { padding-top: 0; }

/* ==========================================================================
   6. Content band
   ========================================================================== */

.site-main {
	flex: 1 0 auto;
	background: var(--cream);
	padding-block: var(--band-pad);
}

.layout {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 60em) {
	.layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 290px;
	}
}

/* --- Prose ------------------------------------------------------------ */

.prose > * + * { margin-top: var(--stack); }

.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose blockquote,
.prose figure,
.prose table { margin-block: 0; }

.prose h2 {
	font-size: var(--step-2);
	color: var(--brand);
	margin-top: calc(var(--stack) * 1.8);
	padding-bottom: .25em;
	border-bottom: 1px solid var(--rule);
}

.prose h3 {
	font-size: var(--step-1);
	color: var(--brand-deep);
	margin-top: calc(var(--stack) * 1.4);
}

.prose h4,
.prose h5,
.prose h6 {
	font-size: var(--step-0);
	color: var(--brand-deep);
	margin-top: calc(var(--stack) * 1.2);
}

.prose ul,
.prose ol { padding-left: 1.35em; }

.prose li + li { margin-top: .3em; }

.prose blockquote {
	margin-inline: 0;
	padding: .1em 0 .1em 1.1em;
	border-left: 3px solid var(--brand);
	color: var(--ink-soft);
	font-style: italic;
}

.prose img { border-radius: var(--radius-sm); }

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: .5em .7em;
	border: 1px solid var(--rule);
	text-align: left;
}

.prose th { background: var(--cream-soft); }

/* Long content stays readable. */
.entry-content { max-width: 68ch; }
.layout.has-sidebar .entry-content { max-width: none; }

/* ==========================================================================
   7. Sidebar
   ========================================================================== */

.site-sidebar {
	font-size: var(--step--1);
}

.sidebar-widget + .sidebar-widget { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.sidebar-widget .widget-title {
	font-size: var(--step-1);
	font-weight: 400;
	color: var(--brand);
	margin-bottom: .5rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--rule);
}

/* The Areas of Expertise widget is a long single-column list. Give it two
   columns on wide phones and up, and strip the inline sizing that the old
   widget markup carries. */
.sidebar-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-widget ul li {
	font-size: inherit !important;
	line-height: 1.45 !important;
	padding: .2em 0 .2em .9em;
	position: relative;
	break-inside: avoid;
}

.sidebar-widget ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .32em;
	height: .32em;
	border-radius: 50%;
	background: var(--brand);
}

/* Belt and braces. The widget filter strips these, but any inline sizing that
   survives an edit in the admin should not shrink the list again. */
.sidebar-widget ul[style],
.sidebar-widget ol[style] { line-height: inherit !important; font-size: inherit !important; }

@media (min-width: 34em) and (max-width: 59.999em) {
	.sidebar-widget ul { columns: 2; column-gap: 1.75rem; }
}

.sidebar-widget p { margin: 0 0 var(--stack); }

.sidebar-widget img { display: block; }

.sidebar-widget a { font-weight: 600; }

/* ==========================================================================
   8. Posts and archives
   ========================================================================== */

.post-list { display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2rem); }

.post-card {
	background: var(--cream-soft);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: clamp(1rem, .8rem + 1vw, 1.5rem);
}

.post-card .entry-title {
	font-size: var(--step-2);
	color: var(--brand);
}

.post-card .entry-title a {
	color: inherit;
	text-decoration: none;
}

.post-card .entry-title a:hover { text-decoration: underline; }

.entry-meta {
	font-size: var(--step--1);
	color: var(--ink-muted);
	margin-top: .3rem;
}

.entry-thumb {
	display: block;
	margin-bottom: var(--stack);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.read-more {
	display: inline-block;
	margin-top: var(--stack);
	font-weight: 700;
}

.empty-note {
	background: var(--cream-soft);
	border: 1px dashed var(--rule);
	border-radius: var(--radius);
	padding: clamp(1rem, .8rem + 1vw, 1.75rem);
	color: var(--ink-soft);
}

.pagination {
	margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: .4em .8em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	text-decoration: none;
	background: var(--cream-soft);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--brand);
	color: var(--on-brand);
	border-color: var(--brand);
}

/* ==========================================================================
   9. Forms, including Contact Form 7
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: .6em .75em;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
}

textarea { min-height: 9em; resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--brand);
	outline: 3px solid var(--focus);
	outline-offset: 1px;
}

button,
input[type="submit"],
input[type="reset"],
.wpcf7 input[type="submit"] {
	display: inline-block;
	width: auto;
	padding: .65em 1.6em;
	font: inherit;
	font-weight: 700;
	color: var(--on-brand);
	background: var(--brand);
	border: 1px solid var(--brand-deep);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background: var(--brand-raised); }

.wpcf7 form .wpcf7-response-output {
	border-radius: var(--radius-sm);
	border-width: 2px;
	margin: var(--stack) 0 0;
	padding: .7em 1em;
}

.wpcf7-not-valid-tip { font-size: var(--step--1); }

/* Contact Form 7 stores each field as a paragraph with a label, a break, then
   the input. Give that shape room and consistent spacing. */
.wpcf7 { max-width: 40rem; }

.wpcf7 form > p,
.prose .wpcf7 form > p { margin: 0 0 var(--stack); }

.wpcf7 form > p { display: flex; flex-direction: column; gap: .35rem; }

.wpcf7 form > p > br { display: none; }

.wpcf7-form-control-wrap { display: block; }

.wpcf7 .wpcf7-spinner { margin-left: .6rem; }

.wpcf7 textarea { height: 9em; min-height: 6em; }

/* Full width submit reads well on a phone. On anything wider it should sit at
   its natural size rather than stretch across the whole form. */
.wpcf7 input[type="submit"] { align-self: stretch; }

@media (min-width: 34em) {
	.wpcf7 input[type="submit"] { align-self: flex-start; }
}

/* --- Search form ------------------------------------------------------ */

.search-form {
	display: flex;
	gap: .5rem;
	max-width: 26rem;
}

.search-form .search-field { flex: 1 1 auto; }

/* ==========================================================================
   10. Comments
   ========================================================================== */

.comments-area {
	margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	padding-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	border-top: 1px solid var(--rule);
}

.comments-title,
.comment-reply-title { font-size: var(--step-2); color: var(--brand); }

.comment-list {
	list-style: none;
	margin: var(--stack) 0 0;
	padding: 0;
}

.comment-list ol { list-style: none; padding-left: clamp(1rem, 3vw, 2rem); }

.comment-body {
	background: var(--cream-soft);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	padding: clamp(.8rem, .7rem + .6vw, 1.2rem);
	margin-bottom: var(--stack);
}

.comment-meta { font-size: var(--step--1); color: var(--ink-muted); }

/* ==========================================================================
   11. Footer band
   ========================================================================== */

.site-footer {
	background: var(--brand);
	color: var(--on-brand);
	padding-block: var(--band-pad);
	margin-top: auto;
}

.footer-columns {
	display: grid;
	gap: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
	grid-template-columns: 1fr;
}

@media (min-width: 44em) {
	.footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-widget { font-size: var(--step--1); }

.footer-widget .widget-title {
	font-family: var(--font-display);
	font-size: var(--step-1);
	font-weight: 400;
	color: var(--paper);
	margin: 0 0 .45rem;
	padding-bottom: .3rem;
	border-bottom: 1px solid var(--rule-on-brand);
}

.footer-widget p { margin: 0 0 .6rem; }

.footer-widget p:last-child { margin-bottom: 0; }

.footer-widget h3 {
	font-size: var(--step-2);
	font-weight: 700;
	margin-top: .2rem;
}

.footer-widget a,
.footer-widget h3 a {
	color: var(--paper);
	text-decoration-color: var(--rule-on-brand);
}

.footer-widget a:hover { color: var(--cream); }

.site-signature {
	margin-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	padding-top: clamp(.75rem, .6rem + .6vw, 1.1rem);
	border-top: 1px solid var(--rule-on-brand);
	color: var(--on-brand-muted);
	font-size: var(--step--1);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: .5rem 1.5rem;
}

/* The signature widget carries an inline 0.6em, which is unreadably small
   against the current body size. Hold it at the footer's own scale. */
.site-signature p,
.signature-widget p { margin: 0; font-size: inherit !important; }

.site-signature a { color: var(--on-brand-muted); }

.site-signature a:hover { color: var(--cream); }

/* ==========================================================================
   12. Back to top
   ========================================================================== */

.to-top {
	position: fixed;
	right: clamp(.75rem, 2vw, 1.5rem);
	bottom: clamp(.75rem, 2vw, 1.5rem);
	z-index: 50;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--brand);
	color: var(--on-brand);
	border: 1px solid var(--rule-on-brand);
	border-radius: 50%;
	box-shadow: var(--shadow);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(.5rem);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.to-top svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* ==========================================================================
   13. WordPress core classes
   ========================================================================== */

.alignleft { float: left; margin: .3rem 1.25rem .75rem 0; }
.alignright { float: right; margin: .3rem 0 .75rem 1.25rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-element-caption {
	font-size: var(--step--1);
	color: var(--ink-muted);
	text-align: center;
	margin-top: .4rem;
}

.sticky .post-card { border-color: var(--brand); border-width: 2px; }

.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.gallery-item { margin: 0; }
.gallery br { display: none; }

/* Covenant baseline: keep video embeds on a 16 by 9 box. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="player.vimeo.com"],
iframe[src*="vimeo.com"] {
	aspect-ratio: 16 / 9;
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* ==========================================================================
   14. Print
   ========================================================================== */

@media print {
	.site-nav,
	.site-hero,
	.to-top,
	.call-action,
	.site-sidebar,
	.comments-area { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }

	.site-header,
	.page-headline,
	.site-footer {
		background: #fff !important;
		color: #000 !important;
	}

	.site-title a,
	.site-tagline,
	.page-headline .headline-plate,
	.footer-widget .widget-title,
	.footer-widget a { color: #000 !important; }

	.site-tagline,
	.page-headline .headline-plate { border-color: #000; background: none; }

	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}