/*
Theme Name: Ellis County Bar Association
Theme URI: https://elliscountybar.org
Author: Ellis County Bar Association
Description: Ellis County Bar Association of Waxahachie, Texas. 
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: elliscountybar.org
*/

:root{
  --paper:#FBF9F5;
  --ink:#221C18;
  --granite:#8A3B2C;
  --granite-deep:#5E2419;
  --sandstone:#D9A088;
  --limestone:#EDE4D8;
  --bronze:#7A6A45;
  --rule:#D8CFC2;
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif;
  font-size:17px;
  line-height:1.65;
}
a{color:var(--granite)}
a:focus-visible, button:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
img{max-width:100%;height:auto}

/* ---------- Masthead ---------- */
.topline{
  background:var(--granite-deep);color:var(--limestone);
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 16px;
}
header.mast{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.mast-inner{
  max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:14px 24px;gap:20px;flex-wrap:wrap;
}
.wordmark{
  font-family:"Cinzel",serif;font-weight:700;font-size:20px;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;line-height:1.2;
}
.wordmark small{
  display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:500;
  font-size:11px;letter-spacing:.22em;color:var(--bronze);margin-top:2px;
}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a, nav.main ul li a{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:2px;display:inline-block;
}
nav.main a:hover{background:var(--limestone);color:var(--granite-deep)}
nav.main ul{display:flex;gap:4px;flex-wrap:wrap;list-style:none}
nav.main .current-menu-item > a, nav.main .current_page_item > a{background:var(--limestone);color:var(--granite-deep)}

/* ---------- Hero (front page) ---------- */
.hero{background:linear-gradient(180deg,var(--paper) 0%,var(--limestone) 100%);border-bottom:1px solid var(--rule)}
.hero-inner{
  max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;padding:64px 24px 72px;
}
.hero h1{
  font-family:"Cinzel",serif;font-weight:600;font-size:clamp(34px,5vw,54px);
  line-height:1.12;color:var(--granite-deep);margin-bottom:20px;
}
.hero p.lede{font-size:19px;max-width:58ch;margin:0 auto 40px}
.emblem{width:72px;height:96px;color:var(--granite);margin-bottom:20px}
.hero .plate{width:100%;margin-bottom:40px}
.est{
  font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);
  display:flex;align-items:center;gap:14px;margin-bottom:18px;justify-content:center;
}
.est::before,.est::after{content:"";height:1px;width:36px;background:var(--bronze)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-block;font-family:"IBM Plex Sans",sans-serif;
  font-size:15px;font-weight:600;text-decoration:none;padding:12px 24px;border-radius:2px;
}
.btn-primary{background:var(--granite);color:#fff}
.btn-primary:hover{background:var(--granite-deep);color:#fff}
.btn-ghost{border:1.5px solid var(--granite);color:var(--granite)}
.btn-ghost:hover{background:var(--granite);color:#fff}

/* Framed photo plate */
figure.plate{
  max-width:var(--max);margin:0 auto;background:var(--granite-deep);
  padding:16px;border-radius:4px;box-shadow:0 18px 40px -18px rgba(34,28,24,.45);
}
figure.plate .frame{border:1px solid var(--sandstone);padding:6px}
figure.plate img{display:block;width:100%;height:auto}
figure.plate figcaption{
  color:var(--limestone);font-family:"IBM Plex Sans",sans-serif;
  font-size:13.5px;letter-spacing:.03em;text-align:center;padding:14px 12px 4px;
}
figure.plate figcaption strong{
  font-family:"Cinzel",serif;font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sandstone);display:block;margin-bottom:4px;
}

/* ---------- Sections & pages ---------- */
section, .page-body{padding:72px 24px}
.wrap{max-width:var(--max);margin:0 auto}
.eyebrow{
  font-family:"Cinzel",serif;font-weight:600;font-size:14px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--granite);margin-bottom:10px;
}
h1.page-title{
  font-family:"Cinzel",serif;font-weight:600;font-size:clamp(30px,4vw,44px);
  color:var(--granite-deep);line-height:1.15;margin-bottom:8px;
}
h2{
  font-family:"Cinzel",serif;font-weight:600;font-size:clamp(26px,3.4vw,36px);
  color:var(--ink);margin-bottom:22px;line-height:1.2;
}
.page-hero{
  background:linear-gradient(180deg,var(--paper) 0%,var(--limestone) 100%);
  border-bottom:1px solid var(--rule);padding:56px 24px 48px;
}
.page-hero .wrap{text-align:center}
.page-hero p.sub{font-size:18px;max-width:60ch;margin:14px auto 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.prose p+p{margin-top:14px}
.prose ul{margin:14px 0 0 22px}
.prose li+li{margin-top:8px}

/* Romanesque arch cards */
.arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.arch{
  background:#fff;border:1px solid var(--rule);
  border-radius:120px 120px 4px 4px;padding:56px 26px 30px;text-align:center;position:relative;
}
.arch::before{
  content:"";position:absolute;top:14px;left:14px;right:14px;height:96px;
  border:1px solid var(--sandstone);border-bottom:none;border-radius:110px 110px 0 0;
}
.arch h3{font-family:"Cinzel",serif;font-weight:600;font-size:18px;margin-bottom:10px;color:var(--granite-deep)}
.arch p{font-size:15.5px}

/* Dark band */
.band{background:var(--granite-deep);color:var(--limestone)}
.band .eyebrow{color:var(--sandstone)}
.band h2{color:#fff}
.band a{color:var(--sandstone)}
.meeting-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:4px;padding:26px 28px;margin-top:10px;
}
.meeting-card dt{
  font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sandstone);margin-top:16px;
}
.meeting-card dt:first-child{margin-top:0}
.meeting-card dd{font-size:17px;margin-top:2px}

/* Officers */
.officer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.officer{
  border-top:3px solid var(--granite);background:#fff;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:20px;
}
.officer .role{
  font-family:"Cinzel",serif;font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--granite-deep);
}
.officer .name{font-size:16px;margin-top:8px}
.officer .name.tba{font-style:italic;color:var(--bronze)}

/* Resources */
ul.resources{list-style:none;margin-top:24px;columns:2;column-gap:48px}
ul.resources li{break-inside:avoid;padding:14px 0;border-bottom:1px solid var(--rule)}
ul.resources a{font-weight:600;text-decoration:none}
ul.resources a:hover{text-decoration:underline}
ul.resources span{display:block;font-size:14.5px;color:#5A5248;font-family:"IBM Plex Sans",sans-serif;margin-top:3px}

/* Alternate section tint */
.tint{background:var(--limestone);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ---------- Footer ---------- */
footer.site-foot{background:var(--ink);color:var(--limestone);padding:56px 24px 32px}
.foot-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
footer.site-foot h4{
  font-family:"Cinzel",serif;font-weight:600;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sandstone);margin-bottom:12px;
}
footer.site-foot p, footer.site-foot a{font-size:15px;color:var(--limestone)}
footer.site-foot a{display:block;text-decoration:none;padding:3px 0}
footer.site-foot a:hover{color:var(--sandstone)}
.legal{
  max-width:var(--max);margin:40px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.15);
  font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;color:#9A928A;
}

/* WP editor content compatibility */
.page-body .wrap > p{margin-bottom:14px}
.alignleft{float:left;margin:0 20px 12px 0}
.alignright{float:right;margin:0 0 12px 20px}
.aligncenter{display:block;margin:0 auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:860px){
  .hero-inner{padding-top:44px}
  figure.plate{padding:10px}
  .two-col{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .officer-grid{grid-template-columns:repeat(2,1fr)}
  ul.resources{columns:1}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .officer-grid{grid-template-columns:1fr}
}