/*
Theme Name: Information Birmingham
Theme URI: https://www.informationbirmingham.com/
Author: Information Birmingham
Description: A civic gazette / almanac theme for Information Birmingham — a guide to the city of Birmingham, Alabama.
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: infobham
*/

:root{
  --paper:#f6f8fc;
  --paper-2:#e8f0fa;
  --ink:#0e2747;          /* deep navy text + headlines */
  --ink-soft:#46587a;
  --rule:#0b2e63;         /* navy hairlines */
  --rule-soft:#bcd0ec;
  --accent:#13509e;       /* royal blue accent */
  --measure:42rem;
  --wide:74rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Spectral",Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.62;
  font-feature-settings:"onum" 1;
}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent)}

h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;color:var(--ink);line-height:1.15;font-weight:800}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 22px}

/* small-caps label utility */
.kicker,.sec-label,.main-nav a,.breadcrumb,.colophon-h,.almanac h3,.dateline{
  font-family:"Spectral",Georgia,serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;font-weight:600;color:var(--ink-soft);
}

/* ---------- Masthead ---------- */
.masthead{max-width:var(--wide);margin:0 auto;padding:10px 22px 0}
.edition{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--rule);padding-bottom:7px}
.nameplate{text-align:center;padding:14px 0 6px}
.nameplate .emblem{height:74px;width:auto;display:inline-block;margin-bottom:4px}
.nameplate .brandname{font-family:"Playfair Display",Georgia,serif;font-size:clamp(2.6rem,7vw,4.7rem);font-weight:900;margin:0;letter-spacing:-.01em;line-height:.98;color:var(--ink)}
.nameplate .brandname a{text-decoration:none;color:inherit}
.home-h1{font-size:clamp(1.5rem,3.2vw,2rem);margin:0 0 .35em;color:var(--ink)}
.nameplate .dek{font-family:"Spectral",serif;font-style:italic;font-size:1.06rem;color:var(--ink-soft);margin:.5em auto 0;max-width:40rem}
.rule-double{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);height:5px;margin:10px 0 0}

/* nav */
.main-nav{border-bottom:1px solid var(--rule)}
.main-nav ul{list-style:none;margin:0;padding:8px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:0}
.main-nav li{display:flex;align-items:center}
.main-nav li+li::before{content:"";width:1px;height:.9em;background:var(--rule-soft);margin:0 16px}
.main-nav a{text-decoration:none}
.main-nav a:hover{color:var(--accent)}
.nav-toggle{display:none}

/* ---------- Layout ---------- */
.layout{display:flex;gap:46px;padding:30px 0 50px}
.content{flex:1 1 auto;min-width:0;max-width:var(--measure)}
.sidebar{flex:0 0 16rem;border-left:1px solid var(--rule-soft);padding-left:26px}
.breadcrumb{display:block;padding:18px 0 0}
.breadcrumb a{text-decoration:none}

/* article body */
.content h1{font-size:clamp(2rem,4.5vw,2.9rem);margin:.1em 0 .15em}
.content .dateline{display:block;border-bottom:2px solid var(--rule);padding-bottom:10px;margin-bottom:18px}
.content h2{font-size:1.5rem;margin:1.5em 0 .4em;font-weight:800}
.content h3{font-size:1.17rem;margin:1.3em 0 .3em}
.content p{margin:0 0 1.05em}
.content > p:first-of-type::first-letter{
  font-family:"Playfair Display",serif;float:left;font-size:3.5rem;line-height:.78;
  padding:.06em .1em 0 0;font-weight:900;color:var(--accent)}
.content ul,.content ol{margin:0 0 1.1em;padding-left:1.25em}
.content li{margin:.32em 0}
.content table{border-collapse:collapse;width:100%;margin:1em 0 1.4em;font-size:.95rem}
.content th,.content td{border-top:1px solid var(--rule-soft);padding:9px 10px;text-align:left;vertical-align:top}
.content thead th{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);
  text-transform:uppercase;letter-spacing:.08em;font-size:.74rem;font-family:"Spectral",serif}
.content table tr:last-child td{border-bottom:1px solid var(--rule-soft)}

/* sidebar index */
.sidebar .sec-label{display:block;border-bottom:2px solid var(--rule);padding-bottom:5px;margin:0 0 8px}
.sidebar .idx{list-style:none;margin:0 0 26px;padding:0}
.sidebar .idx li{border-bottom:1px solid var(--rule-soft);padding:6px 0}
.sidebar .idx a{text-decoration:none;font-size:.98rem}
.sidebar .idx a:hover{color:var(--accent)}

/* ---------- Homepage ---------- */
.lead{padding:24px 0 8px;border-bottom:2px solid var(--rule);margin-bottom:8px}
.lead .standfirst{font-size:1.22rem;line-height:1.55;max-width:50rem}
.lead .standfirst p:first-of-type::first-letter{
  font-family:"Playfair Display",serif;float:left;font-size:3.6rem;line-height:.76;padding:.05em .09em 0 0;font-weight:900;color:var(--accent)}

.home-grid{display:flex;gap:46px;padding:26px 0 10px}
.directory{flex:1 1 auto;min-width:0}
.almanac-col{flex:0 0 17rem}

.dir-section{margin:0 0 26px;break-inside:avoid}
.dir-section > .sec-label{display:block;border-bottom:2px solid var(--rule);padding-bottom:6px;margin-bottom:6px;font-size:.78rem;color:var(--ink)}
.dir-list{list-style:none;margin:0;padding:0}
.dir-list li{border-bottom:1px solid var(--rule-soft);padding:8px 0}
.dir-list .d-name{display:block;font-weight:700}
.dir-list .d-name a{text-decoration:none}
.dir-list .d-name a:hover{color:var(--accent)}
.dir-list .d-desc{display:block;color:var(--ink-soft);font-size:.88rem;line-height:1.45;margin-top:1px}
.dir-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:680px){ .dir-cols{grid-template-columns:1fr} }

.almanac{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);padding:16px 18px}
.almanac h3{margin:0 0 8px;font-family:"Spectral",serif;border-bottom:1px solid var(--rule-soft);padding-bottom:6px}
.almanac dl{margin:0}
.almanac dt{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-top:10px}
.almanac dd{margin:0;font-size:1rem}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--rule);margin-top:30px;background:var(--paper-2)}
.colophon{max-width:var(--wide);margin:0 auto;padding:26px 22px 30px}
.colophon-cols{display:flex;flex-wrap:wrap;gap:40px;border-bottom:1px solid var(--rule-soft);padding-bottom:18px}
.colophon-col{flex:1 1 12rem;min-width:11rem}
.colophon-h{display:block;border-bottom:1px solid var(--rule);padding-bottom:5px;margin-bottom:8px}
.colophon-col ul{list-style:none;margin:0;padding:0}
.colophon-col li{padding:3px 0;font-size:.95rem}
.colophon-col a{text-decoration:none}
.colophon-col a:hover{color:var(--accent)}
.colophon-foot{text-align:center;padding-top:16px;font-family:"Spectral",serif;
  text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--ink-soft)}

/* contact form */
.cf-field{margin:0 0 14px}
.cf-field label{display:block;font-weight:700;margin-bottom:3px;font-size:.95rem}
.cf-field input,.cf-field textarea{width:100%;padding:9px 11px;border:1px solid var(--rule);background:#fff;font:inherit}
.cf-btn{background:var(--ink);color:var(--paper);border:none;padding:11px 24px;font:inherit;
  font-weight:700;letter-spacing:.04em;cursor:pointer;text-transform:uppercase;font-size:.85rem}
.cf-btn:hover{background:var(--accent)}

@media(max-width:860px){
  .layout,.home-grid{flex-direction:column;gap:24px}
  .sidebar{border-left:none;border-top:2px solid var(--rule);padding-left:0;padding-top:18px;flex-basis:auto}
  .almanac-col{flex-basis:auto}
  .content{max-width:none}
  .nav-toggle{display:inline-block;background:none;border:1px solid var(--rule);
    font-family:"Spectral",serif;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;padding:6px 12px;cursor:pointer}
  .main-nav ul{display:none;flex-direction:column;align-items:center;gap:0}
  .main-nav.open ul{display:flex}
  .main-nav li+li::before{display:none}
  .main-nav li{border-top:1px solid var(--rule-soft);width:100%;justify-content:center}
  .main-nav li a{padding:10px 0}
}

/* ---------- Content figures (preserved imagery) ---------- */
.post-figure{margin:1.4em 0;border:1px solid var(--rule-soft);background:#fff;padding:6px}
.post-figure img{display:block;width:100%;height:auto}
.post-figure figcaption{font-family:"Spectral",Georgia,serif;font-style:italic;font-size:.85rem;color:var(--ink-soft);padding:7px 4px 2px}
.post-figure--lead{max-width:420px}
.post-figure--right{float:right;max-width:232px;margin:.3em 0 1em 1.8em;clear:right}
@media(max-width:560px){ .post-figure--right{float:none;max-width:none;margin:1.4em 0} }

/* ---------- Homepage extra: key contacts + FAQ ---------- */
.home-extra{padding-top:6px}
.section-rule{font-size:1.4rem;border-bottom:2px solid var(--rule);padding-bottom:.25em;margin:1.4em 0 .7em}
.keyref{border-collapse:collapse;width:100%;max-width:40rem;margin:0 0 1.6em;font-size:1rem}
.keyref th,.keyref td{border-top:1px solid var(--rule-soft);padding:9px 12px;text-align:left;vertical-align:top}
.keyref th{font-weight:700;width:55%}
.keyref tr:last-child th,.keyref tr:last-child td{border-bottom:1px solid var(--rule-soft)}

/* ---------- FAQ accordions (homepage + content pages) ---------- */
details{border-bottom:1px solid var(--rule-soft);margin:0}
details>summary{cursor:pointer;font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.05rem;
  padding:11px 0;list-style:none;color:var(--ink)}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";display:inline-block;width:1.1em;color:var(--accent);font-weight:700}
details[open]>summary::before{content:"\2212"}
details>summary:hover{color:var(--accent)}
details>p{margin:.2em 0 1em;padding-left:1.1em}
.faq{margin:0 0 1.4em}