/* ==========================================================================
   Hayes Hunter PC – Firm Page template (template-firm.php)
   Builds on hh-practice.css (hero, article, sidebar, FAQ). Tokens in hh-site.css.
   ========================================================================== */

/* ---------- Trust bar ---------- */
.hh-trustbar { background: var(--hh-forest); border-top: 1px solid rgba(255,255,255,.08); }
.hh-trustbar-list {
	list-style: none; margin: 0 auto; padding: 0;
	width: min(1220px, 100% - 48px);
	display: grid; grid-template-columns: repeat(5, 1fr);
}
.hh-trustbar-list li {
	padding: 22px 18px; text-align: center; font-size: 1rem;
	border-right: 1px solid rgba(255,255,255,.12);
	display: flex; flex-direction: column; gap: 2px;
}
.hh-trustbar-list li:last-child { border-right: 0; }
.hh-trustbar-list strong { font-family: "Playfair Display", serif; font-weight: 400; font-size: 1.25rem; color: var(--hh-gold); line-height: 1.2; }
.hh-trustbar-list span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ---------- Intro photo ---------- */
.hh-intro-photo { min-height: 520px; background-size: cover; background-position: center 20%; background-color: var(--hh-cream); }

/* ---------- Article components used on firm pages ---------- */
.hh-article .hh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 30px; }
.hh-article .hh-card { border: 1px solid var(--hh-line); border-radius: 6px; padding: 22px 22px 8px; background: #fff; border-top: 3px solid var(--hh-sage); }
.hh-article .hh-card h3 { margin-top: 0; font-size: 1.25rem; }
.hh-article .hh-card p { font-size: .98rem; }
.hh-article .hh-card .hh-card-tag { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hh-gold-ink); margin: 0 0 6px; }

/* Value cards (Core Values) */
.hh-article .hh-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 34px; }
.hh-article .hh-value { background: var(--hh-forest); color: #fff; border-radius: 6px; padding: 28px 24px 14px; position: relative; overflow: hidden; }
.hh-article .hh-value h3 { color: var(--hh-gold); margin: 0 0 10px; font-size: 1.5rem; }
.hh-article .hh-value p { color: rgba(255,255,255,.86); font-size: .98rem; }
.hh-article .hh-value .hh-value-num { position: absolute; top: 14px; right: 18px; font-family: "Playfair Display", serif; font-size: 2.6rem; color: rgba(255,255,255,.1); line-height: 1; margin: 0; }

/* Process timeline */
.hh-article .hh-timeline { list-style: none; padding: 0; margin: 10px 0 34px; counter-reset: step; position: relative; }
.hh-article .hh-timeline::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--hh-line); }
.hh-article .hh-timeline > li { position: relative; padding: 0 0 26px 82px; counter-increment: step; }
.hh-article .hh-timeline > li::before {
	content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0;
	width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--hh-sage);
	display: grid; place-items: center; font-family: "Playfair Display", serif; font-size: 1.15rem; color: var(--hh-sage);
}
.hh-article .hh-timeline > li:first-child::before { background: var(--hh-sage); color: #fff; }
.hh-article .hh-timeline h3 { margin: 12px 0 6px; }
.hh-article .hh-timeline ul { margin-top: 8px; }

/* Credential blocks (profile) */
.hh-article .hh-creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 6px 0 30px; }
.hh-article .hh-cred { background: var(--hh-cream); border-radius: 6px; padding: 22px 24px 8px; }
.hh-article .hh-cred h3 { margin: 0 0 10px; font-size: 1.2rem; }
.hh-article .hh-cred ul { padding-left: 1.1em; }
.hh-article .hh-cred li { font-size: .98rem; }
.hh-article blockquote.hh-quote {
	margin: 30px 0; padding: 26px 30px; border-left: 4px solid var(--hh-gold); background: var(--hh-cream); border-radius: 0 6px 6px 0;
	font-family: "Playfair Display", serif; font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--hh-forest);
}
.hh-article blockquote.hh-quote cite { display: block; margin-top: 10px; font-family: "DM Sans", sans-serif; font-style: normal; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hh-gold-ink); }

/* Career timeline (profile) */
.hh-article .hh-career { list-style: none; padding: 0; margin: 6px 0 30px; border-left: 2px solid var(--hh-line); }
.hh-article .hh-career li { position: relative; padding: 0 0 18px 26px; }
.hh-article .hh-career li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--hh-sage); border: 2px solid #fff; }
.hh-article .hh-career strong.hh-when { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hh-gold-ink); }

/* Sidebar profile card */
.hh-profile-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: 16px; display: block; }
.hh-profile-card dl { margin: 0; text-align: left; }
.hh-profile-card dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hh-gold-ink); margin-top: 12px; }
.hh-profile-card dd { margin: 2px 0 0; font-size: .95rem; color: var(--hh-ink); line-height: 1.45; }
.hh-sidebar a[aria-current="page"] { color: var(--hh-sage); font-weight: 700; }

/* ---------- Team grid ---------- */
.hh-team { background: #fff; padding: 96px 0 72px; }
.hh-team h2 { font-family: "Playfair Display", serif; font-weight: 400; color: var(--hh-forest); font-size: clamp(2rem, 3.4vw, 2.8rem); padding-top: 0; }
.hh-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; margin-top: 34px; text-align: left; align-items: start; }
.hh-team-card { border: 1px solid var(--hh-line); border-radius: 6px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.hh-team-card:hover { box-shadow: 0 16px 40px rgba(12,50,39,.1); transform: translateY(-2px); }
.hh-team-photo { aspect-ratio: 1 / 1; background: var(--hh-cream) center 20% / cover no-repeat; }
.hh-team-body { padding: 20px 22px 18px; }
.hh-team-body h3 { font-family: "Playfair Display", serif; font-weight: 400; font-size: 1.4rem; color: var(--hh-forest); padding: 0; margin: 0 0 4px; }
.hh-team-role { font-size: .78rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hh-gold-ink) !important; margin: 0 0 10px !important; text-align: left; }
.hh-team-note { font-size: .82rem !important; line-height: 1.5 !important; color: #5b6861 !important; font-style: italic; margin: 0 0 12px !important; text-align: left; }
.hh-team-more, .hh-team-bio summary { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hh-sage); cursor: pointer; }
.hh-team-more::after, .hh-team-bio summary::after { content: " →"; }
.hh-team-bio[open] summary::after { content: " ↑"; }
.hh-team-bio summary { list-style: none; }
.hh-team-bio summary::-webkit-details-marker { display: none; }
.hh-team-bio p { font-size: .95rem; line-height: 1.65; color: #45524b; text-align: left; margin: 12px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.hh-trustbar-list { grid-template-columns: repeat(3, 1fr); }
	.hh-trustbar-list li:nth-child(3) { border-right: 0; }
	.hh-article .hh-values { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
	.hh-intro-photo { min-height: 340px; width: 100% !important; }
	.hh-article .hh-creds { grid-template-columns: 1fr; }
	.hh-team { padding: 64px 0 48px; }
}
@media (max-width: 640px) {
	.hh-trustbar-list { grid-template-columns: repeat(2, 1fr); width: calc(100% - 32px); }
	.hh-trustbar-list li { border-right: 0; padding: 16px 8px; }
	.hh-trustbar-list li:last-child { grid-column: 1 / -1; }
	.hh-article .hh-timeline > li { padding-left: 70px; }
}

/* Team cards: linked names + photos */
.hh-team-body h3 a { color: inherit; }
.hh-team-body h3 a:hover { color: var(--hh-sage); }
.hh-team-photo-link { display: block; }