/*
Theme Name: ARCOA
Theme URI: https://arcoappraisers.org
Author: Arkansas Coalition of Appraisers
Description: Custom WordPress theme for the Arkansas Coalition of Appraisers (ARCOA). Navy with gold on dark backgrounds and the logo crimson on light ones, Merriweather headings, built to match the approved ARCOA design. Includes membership tier, resource and board member content types, a working contact form, and hooks for a membership plugin or outside AMS.
Version: 1.6.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: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arcoa
Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, news
*/

/* ==========================================================================
   1. Design tokens
   These are also written out dynamically by the Customizer (see inc/customizer.php),
   so changing a color in the WordPress admin overrides the values below.
   ========================================================================== */
:root {
  --navy: #16324f;
  --navy-dark: #0f2337;
  --gold: #c8a24c;
  --gold-dark: #a9853a;
  /* Crimson sampled from the ARCOA logo. Used on light backgrounds only:
     red on navy measures 1.84:1 and disappears, gold on navy measures 5.44:1.
     Gold on white is only 2.41:1, red on white is 7.11:1 — so each colour
     is used where it actually reads. */
  --red: #ad1b20;
  --red-dark: #8c1519;
  --gray-bg: #f5f6f8;
  --gray-line: #e2e6ea;
  --text: #25303b;
  --muted: #5b6975;
  --wrap: 1120px;
  --font-head: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.25;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }
p { margin-bottom: 14px; }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0 0 20px; }

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: #3a2c07;
  padding: 10px 18px;
  font-weight: 700;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

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

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
section.block { padding: 54px 0; }
section.block.alt { background: var(--gray-bg); }

/* ==========================================================================
   3. Top utility bar
   ========================================================================== */
.topbar { background: var(--navy-dark); color: #cdd8e2; font-size: .85rem; }
.topbar .wrap {
  padding: 7px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar a { color: #cdd8e2; }
.topbar a:hover { color: #fff; }
.topbar .login {
  background: var(--gold);
  color: #3a2c07;
  padding: 4px 14px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-block;
}
.topbar .login:hover { background: var(--gold-dark); color: #3a2c07; }

/* ==========================================================================
   4. Header + navigation
   ========================================================================== */
header.main {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
/* Keep the sticky header clear of the WP admin bar for logged-in editors */
.admin-bar header.main { top: 32px; }

.header-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand a { display: flex; align-items: center; gap: 14px; }
.emblem {
  width: 52px;
  height: 52px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 900;
  color: var(--gold);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.brand-logo img { max-height: 60px; width: auto; display: block; }
.brand-text strong {
  display: block;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: .01em;
}
.brand-text span {
  display: block;
  color: #9fb4c7;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Primary menu -- styled to match the original tab buttons */
nav.tabs ul {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.tabs li { position: relative; }
nav.tabs a {
  display: block;
  background: none;
  border: none;
  color: #d6e0ea;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: .15s;
}
nav.tabs a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
nav.tabs .current-menu-item > a,
nav.tabs .current_page_item > a,
nav.tabs .current-menu-ancestor > a,
nav.tabs .current-menu-parent > a,
nav.tabs .current_page_parent > a {
  background: var(--gold);
  color: #3a2c07;
}

/* Dropdown submenus */
nav.tabs ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--navy-dark);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  padding: 6px 0;
  z-index: 60;
}
nav.tabs li:hover > ul,
nav.tabs li:focus-within > ul { display: block; }
nav.tabs ul ul a { border-radius: 0; padding: 9px 16px; }
nav.tabs ul ul li { width: 100%; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: 9px 14px;
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
}
.menu-toggle .bars { display: inline-block; width: 16px; height: 2px; background: #fff; position: relative; }
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #fff;
}
.menu-toggle .bars::before { top: -5px; }
.menu-toggle .bars::after { top: 5px; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero {
  background:
    linear-gradient(rgba(15, 35, 55, .82), rgba(15, 35, 55, .86)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%2316324f'/%3E%3Cpath d='M0 59h60M59 0v60' stroke='%231d3f60' stroke-width='1'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 88px 22px;
}
.hero h1 { color: #fff; font-size: 2.5rem; max-width: 820px; margin: 0 auto 16px; }
.hero p { color: #dbe6f0; font-size: 1.2rem; max-width: 640px; margin: 0 auto 30px; }
.hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Compact hero used on interior pages when a featured image is set */
.page-hero { padding: 60px 22px; }
.page-hero h1 { font-size: 2.1rem; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: .15s;
  font-family: var(--font-body);
  line-height: 1.2;
  text-align: center;
}
.btn-gold { background: var(--gold); color: #3a2c07; }
.btn-gold:hover { background: var(--gold-dark); color: #3a2c07; }
.btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-dark); color: #fff; }
/* Primary action on white/light sections. */
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); color: #fff; }

/* ==========================================================================
   7. Section headings and prose
   ========================================================================== */
/* Applies to h1 and h2 alike: page titles are h1, in-page section headings h2. */
.section-title { font-size: 1.9rem; text-align: center; margin-bottom: 10px; }
.section-title.left { text-align: left; }
.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto 38px;
  font-size: 1.05rem;
}
.lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 20px; }
.soft { color: var(--muted); font-style: italic; }

.prose { max-width: 820px; }
.prose.centered { margin-left: auto; margin-right: auto; }
.prose h2 { font-size: 1.6rem; margin: 32px 0 10px; }
.prose h3 { margin: 28px 0 8px; font-size: 1.35rem; }
.prose h4 { margin: 22px 0 6px; font-size: 1.15rem; }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 7px; }
.prose blockquote {
  border-left: 4px solid var(--red);
  padding: 6px 0 6px 20px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 1.08rem;
}
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.prose th, .prose td { border: 1px solid var(--gray-line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--gray-bg); font-weight: 700; }
.prose hr { border: none; border-top: 1px solid var(--gray-line); margin: 32px 0; }

/* ==========================================================================
   8. Cards ("Why ARCOA")
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(20, 50, 79, .05);
}
.card .ic {
  width: 46px;
  height: 46px;
  background: var(--navy);
  color: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .97rem; margin-bottom: 0; }

/* ==========================================================================
   9. Membership tiers
   ========================================================================== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 10px; }
.tier {
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  padding: 26px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.tier.feat { border: 2px solid var(--red); box-shadow: 0 6px 18px rgba(173, 27, 32, .15); }
.tier h3 { font-size: 1.25rem; }
.tier .price {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--navy);
  margin: 12px 0 4px;
}
.tier ul { list-style: none; text-align: left; margin: 16px 0; padding: 0; flex-grow: 1; }
.tier li {
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-line);
  font-size: .95rem;
  color: var(--muted);
}
.tier li::before { content: "\2713"; color: var(--red); font-weight: 700; margin-right: 8px; }
.tier .btn { align-self: center; }
.tier-badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* ==========================================================================
   9b. Board of Directors  ([arcoa_board] shortcode)
   ========================================================================== */
.board-block { margin: 36px 0 8px; }
.board-heading { font-size: 1.6rem; margin-bottom: 8px; }
.board-sub { color: var(--muted); margin-bottom: 26px; }

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;
}

.board-member { text-align: center; }

.board-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  border: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.board-initials {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2.1rem;
  color: var(--gold);
  letter-spacing: .02em;
}

.board-name { font-size: 1.15rem; margin-bottom: 2px; }
.board-role {
  color: var(--red);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}
.board-location { color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.board-bio { color: var(--muted); font-size: .95rem; text-align: left; margin-bottom: 0; }
.board-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-weight: 700;
  font-size: .88rem;
}
.board-more:hover { color: var(--navy); text-decoration: underline; }

/* Full-width row for a longer bio (officers, founders) */
.board-feature {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 34px;
  align-items: start;
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--gray-line);
  margin-bottom: 34px;
}
.board-feature-side { text-align: center; }
.board-photo-lg { width: 200px; height: 200px; }
.board-feature-side .board-name { font-size: 1.25rem; margin-bottom: 3px; }
.board-feature-bio { color: var(--text); }
.board-feature-bio p { margin-bottom: 15px; }
.board-feature-bio p:last-child { margin-bottom: 0; }
.board-feature-bio p:first-child { font-size: 1.05rem; }

@media (max-width: 780px) {
  .board-feature {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
  .board-photo-lg { width: 160px; height: 160px; }
}

/* Single board member bio page */
.bio-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.bio-photo { width: 170px; height: 170px; margin: 0; flex-shrink: 0; }
.bio-heading { flex: 1 1 260px; }
.bio-heading .section-title { margin-bottom: 6px; }
.bio-heading .board-role { font-size: .9rem; }
.bio-body { max-width: 820px; }
.bio-back { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--gray-line); font-weight: 600; }

@media (max-width: 560px) {
  .bio-header { gap: 18px; }
  .bio-photo { width: 130px; height: 130px; }
}

@media (max-width: 820px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
}
@media (max-width: 520px) {
  .board-grid { grid-template-columns: 1fr; }
  .board-bio { text-align: center; }
}

/* ==========================================================================
   10. News
   ========================================================================== */
.news-list { max-width: 820px; margin: 0 auto; }
.news-item {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--gray-line);
}
.news-date {
  flex-shrink: 0;
  width: 90px;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  padding: 12px 6px;
  height: fit-content;
}
.news-date .d { font-family: var(--font-head); font-size: 1.5rem; display: block; line-height: 1; }
.news-date .m {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold);
  display: block;
}
.news-item h3 { font-size: 1.2rem; margin-bottom: 5px; }
.news-item h3 a { color: var(--navy); }
.news-item h3 a:hover { color: var(--red); }
.news-item p { color: var(--muted); margin: 0; }
.news-thumb { margin-top: 12px; border-radius: 6px; overflow: hidden; }

.entry-meta { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
.entry-meta a { color: var(--muted); text-decoration: underline; }

/* Pagination */
.pagination { margin-top: 34px; text-align: center; }
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border: 1px solid var(--gray-line);
  border-radius: 4px;
  color: var(--navy);
  font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--red); color: #fff; border-color: var(--red); }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-line);
  font-weight: 600;
}

/* ==========================================================================
   11. Resource grid
   ========================================================================== */
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.res {
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  padding: 22px;
  background: #fff;
  transition: .15s;
}
a.res:hover { border-color: var(--red); box-shadow: 0 6px 18px rgba(20, 50, 79, .08); }
.res h3 { font-size: 1.15rem; margin-bottom: 6px; }
.res p { color: var(--muted); font-size: .95rem; margin: 0; }
.res .res-link { display: inline-block; margin-top: 10px; color: var(--red); font-weight: 700; font-size: .9rem; }

/* ==========================================================================
   12. Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-line);
  border-radius: 5px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: #fff;
}
.field input:focus, .field textarea:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(173, 27, 32, .14); }
.hp-field { position: absolute; left: -9999px; }

.emails { list-style: none; margin: 0; padding: 0; }
.emails li { padding: 9px 0; border-bottom: 1px solid var(--gray-line); }
.emails li a { font-weight: 600; }
.emails li span { display: block; color: var(--muted); font-size: .85rem; }

.notice-box {
  padding: 12px 16px;
  border-radius: 5px;
  margin-bottom: 18px;
  font-weight: 600;
}
.notice-ok { background: #e8f4ea; color: #1e5b2c; border: 1px solid #bcdcc4; }
.notice-err { background: #fbe9e9; color: #8a2020; border: 1px solid #f0c4c4; }

/* ==========================================================================
   13. Footer
   ========================================================================== */
footer.site-footer {
  background: var(--navy-dark);
  color: #b9c7d4;
  padding: 44px 22px 24px;
  font-size: .92rem;
}
.foot-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
}
.foot-grid.has-extra { grid-template-columns: 2fr 1fr 1fr 1fr; }
.foot-grid .widget { margin-bottom: 18px; }
footer.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; letter-spacing: .03em; }
footer.site-footer p { color: #8ba0b3; }
footer.site-footer a { color: #b9c7d4; display: block; padding: 3px 0; }
footer.site-footer a:hover { color: var(--gold); }
footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
.foot-bottom {
  max-width: var(--wrap);
  margin: 28px auto 0;
  padding-top: 16px;
  border-top: 1px solid #24435f;
  text-align: center;
  font-size: .82rem;
  color: #8ba0b3;
}
/* Who built the site: its own line, a step quieter than the copyright. */
.foot-builder { display: block; margin-top: 6px; font-size: .78rem; color: #6f8598; }
.foot-builder a { display: inline; color: #6f8598; padding: 0; }
.foot-builder a:hover { color: var(--gold); }

/* ==========================================================================
   14. WordPress core classes
   ========================================================================== */
.alignleft { float: left; margin: 5px 24px 20px 0; }
.alignright { float: right; margin: 5px 0 20px 24px; }
.aligncenter { display: block; margin: 0 auto 20px; }
.alignwide { max-width: calc(var(--wrap) - 44px); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { color: var(--muted); font-size: .88rem; text-align: center; margin-top: 6px; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
.wp-block-button__link { background: var(--red); color: #fff; font-weight: 700; border-radius: 5px; }
.wp-block-quote { border-left: 4px solid var(--red); padding-left: 20px; }
.wp-block-separator { border-top: 1px solid var(--gray-line); }

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 980px) {
  /* The brand and the toggle share the first row; the menu wraps onto its own. */
  .header-wrap { flex-wrap: wrap; gap: 12px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand a { min-width: 0; }
  .menu-toggle { display: inline-flex; flex: 0 0 auto; }
  nav.tabs {
    display: none;
    flex: 1 0 100%;
    width: 100%;
    order: 3;
    padding-bottom: 10px;
  }
  nav.tabs.open { display: block; }
  nav.tabs ul { flex-direction: column; gap: 0; width: 100%; }
  nav.tabs li { width: 100%; }
  nav.tabs a { padding: 12px 10px; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  nav.tabs ul ul {
    display: block;
    position: static;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
  }
}

@media (max-width: 820px) {
  .cards, .tiers, .res-grid, .contact-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
  .hero { padding: 62px 22px; }
  section.block { padding: 40px 0; }
  .section-title { font-size: 1.6rem; }
}

@media (max-width: 782px) {
  .admin-bar header.main { top: 46px; }
}

@media (max-width: 560px) {
  .news-item { gap: 14px; }
  .news-date { width: 70px; padding: 10px 4px; }
  .btn { padding: 12px 20px; font-size: .95rem; }

  /* Keep the header to one tidy line on phones. */
  .brand { gap: 10px; }
  .brand a { gap: 10px; }
  .emblem { width: 44px; height: 44px; font-size: .78rem; letter-spacing: -.02em; border-width: 2px; }
  .brand-logo img { max-height: 42px; }
  .brand-text strong { font-size: .95rem; line-height: 1.2; }
  .brand-text span { display: none; }
  .header-wrap { padding: 12px 16px; }
  .topbar .wrap { padding: 7px 16px; }
  .menu-toggle { padding: 8px 12px; }
}

@media print {
  .topbar, header.main, footer.site-footer, .hero-actions { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   14. Coverage map and member directory
   The map is one inline SVG: 75 <path> elements, each a real button with a
   tab stop, so it is usable without a mouse. Shading steps read as "how many
   members work here", not as a heat map of anything else.
   ========================================================================== */
/* The directory page uses .prose for its text but the map must span the full
   wrap, so the width cap moves from the container onto its text children. */
.directory-body { max-width: none; }
.directory-body > p,
.directory-body > h2,
.directory-body > h3,
.directory-body > h4,
.directory-body > ul,
.directory-body > ol,
.directory-body > blockquote { max-width: 820px; }

.map-block { margin: 26px 0 0; }
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 26px;
}

.map-picker { display: block; margin-bottom: 14px; }
.map-picker select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--gray-line);
  border-radius: 6px;
  background: #fff;
}
.map-picker select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(173, 27, 32, .13); }

.ar-map { width: 100%; height: auto; display: block; }
.ar-map .county {
  fill: #eef1f4;
  stroke: #fff;
  stroke-width: 1.4;
  cursor: pointer;
  transition: fill .12s ease;
}
.ar-map .county.step-1 { fill: #e8b9bb; }
.ar-map .county.step-2 { fill: #cf6f74; }
.ar-map .county.step-3 { fill: var(--red); }
.ar-map .county:hover { fill: var(--navy); }
.ar-map .county:focus { outline: none; }
.ar-map .county:focus-visible { outline: none; stroke: var(--navy); stroke-width: 3.5; }
.ar-map .county.is-active {
  fill: var(--navy);
  stroke: var(--gold);
  stroke-width: 2.5;
}

.map-key {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: .82rem;
  color: var(--muted);
}
.map-key .key {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1px solid var(--gray-line);
  display: inline-block;
}
.map-key .key + .key { margin-left: 12px; }
.map-key .step-0 { background: #eef1f4; }
.map-key .step-1 { background: #e8b9bb; }
.map-key .step-2 { background: #cf6f74; }
.map-key .step-3 { background: var(--red); }

.map-results-head {
  font-size: 1.15rem;
  color: var(--navy);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  margin-bottom: 4px;
}
/* No inner scroll: a hidden scrollbar beside a tall map is easy to miss, so
   the list flows and the page scrolls instead. */
.map-list { }

.member-card {
  display: flex;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--gray-line);
}
.member-photo {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-photo .board-initials { font-size: 1.4rem; }
.member-body h4 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 3px; }
.member-body h4 a { color: var(--navy); }
.member-body h4 a:hover { color: var(--red); }
.member-cred { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); margin-bottom: 3px; }
.member-meta { color: var(--muted); font-size: .9rem; margin-bottom: 4px; }
.member-contact a { display: inline-block; margin-right: 14px; font-size: .9rem; font-weight: 600; }
.member-open {
  display: inline-block;
  margin-top: 6px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1e6b34;
  background: #e6f4ea;
  border-radius: 20px;
  padding: 3px 10px;
}

.member-supervisor {
  font-size: .85rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 4px;
}

.member-supervising {
  display: inline-block;
  margin-top: 6px;
  margin-left: 6px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  background: #e7edf3;
  border-radius: 20px;
  padding: 3px 10px;
}

.map-empty {
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  padding: 26px 24px;
}
.map-empty h3 { font-size: 1.15rem; color: var(--navy); margin-bottom: 9px; }
.map-empty p { color: var(--muted); margin-bottom: 14px; }
.map-empty p:last-child { margin-bottom: 0; }

/* Member profile page */
.member-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.member-side {
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
  padding: 22px 20px;
}
.member-side h3 { font-size: 1rem; color: var(--navy); margin-bottom: 12px; }
.member-facts { list-style: none; margin: 0 0 14px; padding: 0; }
.member-facts li { padding: 8px 0; border-bottom: 1px solid var(--gray-line); font-size: .92rem; }
.member-facts li:last-child { border-bottom: 0; }
.member-facts span {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.member-disclaimer { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.member-tags { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.member-tags li {
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: .85rem;
}
.member-counties { color: var(--muted); line-height: 1.7; }

@media (max-width: 960px) {
  .map-layout { grid-template-columns: 1fr; gap: 26px; }
  .member-profile { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .member-card { gap: 12px; }
  .member-photo { width: 54px; height: 54px; }
  .member-photo .board-initials { font-size: 1.1rem; }
  .member-contact a { display: block; margin-right: 0; }
}