/*
Theme Name:   Don't Flock
Theme URI:    https://dontflock.com
Author:       Don't Flock
Author URI:   https://dontflock.com
Description:  Accountability layer for ALPR surveillance. Tracks which officials approved licence plate reader contracts, what those contracts cost, and when they come up for renewal. Ships with custom post types for officials, jurisdictions and votes, a mandatory-sourcing publish gate, Google News schema, and a seed-data importer. Colours by vote, never by party.
Version:      1.0.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dontflock
Tags:         news, blog, custom-colors, custom-menu, translation-ready, full-width-template
*/

/* =========================================================================
   Tokens
   ========================================================================= */

:root{
  --df-asphalt:#12171C;
  --df-asphalt-2:#1A2128;
  --df-asphalt-3:#232B33;
  --df-plate:#E9EAE4;
  --df-plate-dim:#B9BEC4;
  --df-amber:#F2C14E;
  --df-amber-lift:#F7CF6C;
  --df-iron:#7C858E;
  --df-supports:#C2483D;
  --df-opposes:#5F9068;
  --df-mixed:#C9973F;
  --df-line:rgba(233,234,228,.14);

  --df-display:"Archivo",system-ui,-apple-system,sans-serif;
  --df-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --df-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  --df-wrap:1180px;
  --df-gap:24px;
}

/* =========================================================================
   Base
   ========================================================================= */

body{
  background:var(--df-asphalt);
  color:var(--df-plate);
  font-family:var(--df-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.df-wrap{max-width:var(--df-wrap);margin:0 auto;padding:0 var(--df-gap)}

h1,h2,h3,h4{
  font-family:var(--df-display);
  font-stretch:118%;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:0;
}

h1{font-size:clamp(2.3rem,5.4vw,4rem);font-stretch:125%;font-weight:900}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.25rem;font-stretch:112%;font-weight:700}

a{color:var(--df-amber);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--df-amber-lift)}

:focus-visible{outline:2px solid var(--df-amber);outline-offset:2px}

.df-lede{font-size:19px;color:var(--df-plate-dim);max-width:34em}

/* Record label — the structural device.
   Used only where the content genuinely is a dated public record. */
.df-rec{
  font-family:var(--df-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-iron);
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:22px;
}
.df-rec::before{content:"";width:26px;height:1px;background:var(--df-amber);flex:none}

/* =========================================================================
   Buttons
   ========================================================================= */

.df-btn{
  display:inline-block;
  background:var(--df-amber);
  color:var(--df-asphalt);
  border:0;
  padding:14px 26px;
  border-radius:3px;
  font-family:var(--df-display);
  font-stretch:112%;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
}
.df-btn:hover{background:var(--df-amber-lift);color:var(--df-asphalt)}

.df-btn-ghost{
  display:inline-block;
  border:1px solid var(--df-line);
  padding:12px 22px;
  border-radius:3px;
  color:var(--df-plate);
  text-decoration:none;
  font-family:var(--df-display);
  font-stretch:112%;
  font-weight:700;
  font-size:14.5px;
}
.df-btn-ghost:hover{border-color:var(--df-amber);color:var(--df-amber)}

/* =========================================================================
   Scorecard
   Colour encodes the vote. Party is neutral text only — this is deliberate
   and load-bearing: the coalition is cross-ideological and partisan colour
   coding would halve it.
   ========================================================================= */

.df-scorecard{border-top:1px solid var(--df-line)}

.df-score-row{
  display:grid;
  grid-template-columns:16px 1.5fr 1fr 118px;
  gap:20px;
  align-items:center;
  padding:17px 0;
  border-bottom:1px solid var(--df-line);
}

.df-score-bar{width:4px;height:38px;border-radius:2px;background:var(--df-iron)}
.df-score-bar--op{background:var(--df-opposes)}
.df-score-bar--su{background:var(--df-supports)}
.df-score-bar--mx{background:var(--df-mixed)}

.df-score-name{
  font-family:var(--df-display);
  font-stretch:112%;
  font-weight:700;
  font-size:17.5px;
  text-decoration:none;
  color:var(--df-plate);
}
.df-score-name:hover{color:var(--df-amber)}

.df-score-tag{
  font-family:var(--df-mono);
  font-size:11.5px;
  color:var(--df-iron);
  margin-top:3px;
  letter-spacing:.03em;
}

.df-score-meta{font-size:14px;color:#A7AEB5;line-height:1.45}

.df-verdict{
  font-family:var(--df-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-align:center;
  padding:6px 4px;
  border-radius:2px;
  border:1px solid var(--df-line);
  color:var(--df-iron);
}
.df-verdict--op{color:var(--df-opposes);border-color:rgba(95,144,104,.42)}
.df-verdict--su{color:var(--df-supports);border-color:rgba(194,72,61,.42)}
.df-verdict--mx{color:var(--df-mixed);border-color:rgba(201,151,63,.42)}

@media(max-width:760px){
  .df-score-row{grid-template-columns:14px 1fr 108px;gap:14px}
  .df-score-meta{display:none}
}

/* =========================================================================
   Renewal cards — the urgency engine
   ========================================================================= */

.df-renewals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.df-renewals{grid-template-columns:1fr}}

.df-card{
  background:var(--df-asphalt);
  border:1px solid var(--df-line);
  border-top:2px solid var(--df-amber);
  border-radius:3px;
  padding:24px;
}

.df-card-days{
  font-family:var(--df-display);
  font-stretch:125%;
  font-weight:900;
  font-size:44px;
  line-height:1;
  color:var(--df-amber);
}
.df-card-days small{
  display:block;
  margin-top:9px;
  font-family:var(--df-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--df-iron);
}

/* Past due reads as urgent, not decorative */
.df-card--overdue{border-top-color:var(--df-supports)}
.df-card--overdue .df-card-days{color:var(--df-supports)}

.df-card-city{
  font-family:var(--df-display);
  font-stretch:112%;
  font-weight:700;
  font-size:19px;
  margin:20px 0 6px;
}
.df-card-line{font-family:var(--df-mono);font-size:12px;color:var(--df-iron);line-height:1.75}
.df-card-line b{color:var(--df-plate-dim);font-weight:500}

/* =========================================================================
   Sources — visible citation is the credibility of the whole project
   ========================================================================= */

.df-sources{
  font-family:var(--df-mono);
  font-size:12.5px;
  color:var(--df-iron);
  padding-left:1.4em;
  margin:14px 0 0;
}
.df-sources li{margin-bottom:6px}
.df-sources a{color:var(--df-iron);text-decoration:underline}
.df-sources a:hover{color:var(--df-amber)}

.df-sources-head{
  font-family:var(--df-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--df-iron);
  margin:36px 0 0;
  padding-top:20px;
  border-top:1px solid var(--df-line);
}

/* =========================================================================
   Single official
   ========================================================================= */

.df-official-head{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:44px;
  padding:56px 0;
  border-bottom:1px solid var(--df-line);
}
@media(max-width:820px){.df-official-head{grid-template-columns:1fr;gap:28px}}

.df-fact{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--df-line);
  font-family:var(--df-mono);
  font-size:12.5px;
}
.df-fact dt{color:var(--df-iron);letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.df-fact dd{margin:0;color:var(--df-plate);text-align:right}

.df-timeline{list-style:none;margin:28px 0 0;padding:0}
.df-timeline li{
  padding:16px 0 16px 26px;
  border-bottom:1px solid var(--df-line);
  position:relative;
}
.df-timeline li::before{
  content:"";
  position:absolute;
  left:0;
  top:23px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--df-amber);
}
.df-timeline time{
  display:block;
  font-family:var(--df-mono);
  font-size:11.5px;
  color:var(--df-iron);
  letter-spacing:.05em;
  margin-bottom:5px;
}

/* =========================================================================
   Forms
   ========================================================================= */

.df-input{
  background:var(--df-asphalt-2);
  border:1px solid var(--df-line);
  color:var(--df-plate);
  padding:15px 17px;
  font-family:var(--df-body);
  font-size:16px;
  border-radius:3px;
  width:100%;
}
.df-input::placeholder{color:#69727A}
.df-input:focus{outline:2px solid var(--df-amber);outline-offset:1px;border-color:transparent}

/* =========================================================================
   Sections
   ========================================================================= */

.df-section{padding:86px 0;border-bottom:1px solid var(--df-line)}
.df-section--alt{background:var(--df-asphalt-2)}

@media(max-width:700px){
  .df-section{padding:58px 0}
}

/* =========================================================================
   Accessibility
   ========================================================================= */

.df-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

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

/* =========================================================================
   Site chrome — nav, hero, ledger, footer
   ========================================================================= */

.df-nav{
  border-bottom:1px solid var(--df-line);
  position:sticky;top:0;z-index:60;
  background:rgba(18,23,28,.92);
  backdrop-filter:blur(10px);
}
.df-nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.df-brand{
  font-family:var(--df-display);font-stretch:125%;font-weight:900;
  font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--df-plate);
}
.df-brand span{color:var(--df-amber)}
.df-nav-links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.df-nav-links a{font-size:14px;text-decoration:none;color:var(--df-iron);font-weight:500}
.df-nav-links a:hover{color:var(--df-plate)}
@media(max-width:820px){.df-nav-links{display:none}}

.df-hero{padding:86px 0 74px;border-bottom:1px solid var(--df-line)}
.df-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.df-hero h1 em{font-style:normal;color:var(--df-amber)}
@media(max-width:940px){.df-hero-grid{grid-template-columns:1fr;gap:46px}}
@media(max-width:700px){.df-hero{padding:56px 0 48px}}

.df-ledger{
  background:var(--df-asphalt-2);border:1px solid var(--df-line);
  border-radius:3px;font-family:var(--df-mono);font-size:12.5px;overflow:hidden;
}
.df-ledger-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 15px;border-bottom:1px solid var(--df-line);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--df-iron);
}
.df-dot{width:6px;height:6px;border-radius:50%;background:var(--df-amber);display:inline-block;margin-right:8px;vertical-align:1px}
.df-ledger-body{height:290px;overflow:hidden}
.df-ledger-row{
  display:grid;grid-template-columns:62px 1fr 74px;gap:12px;
  padding:9px 15px;border-bottom:1px solid rgba(233,234,228,.06);
  color:#9AA2AA;white-space:nowrap;overflow:hidden;
}
.df-ledger-row b{color:var(--df-plate);font-weight:500}
.df-ledger-row i{font-style:normal;color:var(--df-iron);text-align:right}
.df-ledger-row.is-new{animation:df-slide .5s ease-out}
@keyframes df-slide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.df-ledger-foot{padding:13px 15px;border-top:1px solid var(--df-line);font-size:12px;color:var(--df-iron)}
.df-ledger-foot strong{color:var(--df-amber);font-weight:600}

.df-find{display:flex;gap:10px;max-width:590px}
@media(max-width:560px){.df-find{flex-direction:column}}

.df-foot{padding:56px 0 70px;font-size:14px;color:var(--df-iron)}
.df-foot-menu{display:flex;gap:26px;list-style:none;margin:0 0 30px;padding:0;flex-wrap:wrap}
.df-foot-menu a{color:var(--df-iron);text-decoration:none}
.df-foot-menu a:hover{color:var(--df-plate)}
.df-foot-note{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--df-line);
  font-size:13px;max-width:60em;line-height:1.7;
}
.df-foot-note a{color:var(--df-iron)}

.pagination,.nav-links{font-family:var(--df-mono);font-size:13px}
.pagination .page-numbers{padding:6px 11px;border:1px solid var(--df-line);margin-right:5px;text-decoration:none;display:inline-block}
.pagination .current{border-color:var(--df-amber);color:var(--df-amber)}