/*
Theme Name: Direct Fence Weather
Theme URI: https://directfencenj.com/
Author: Codex
Description: Custom WordPress theme for the Direct Fence County Go/No-Go board.
Version: 1.0.0
Text Domain: direct-fence-weather
*/

:root{
  color-scheme: light;
  --burg:#7B1F4B;
  --burg-d:#5C1738;
  --ink:#1A1A1A;
  --gray:#404040;
  --tint:#F5EEF2;
  --none:#1E7A3C;
  --none-bg:#E6F4EA;
  --light:#B37400;
  --light-bg:#FFF4D6;
  --heavy:#B5451F;
  --heavy-bg:#FBE7DF;
  --nogo:#7B1F4B;
  --nogo-bg:#EBD7E1;
  --line:#D9D0D5;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font:14px/1.45 Calibri,Arial,Helvetica,sans-serif;
}
a{color:var(--burg)}
button{font:inherit;cursor:pointer;border-radius:4px;border:1px solid var(--line);background:#fff;padding:6px 11px}
button:hover{border-color:var(--burg)}
button:active{transform:translateY(1px)}

.wrap{max-width:1180px;margin:0 auto;padding:18px 20px 40px}
.lh{border-bottom:3px solid var(--burg);padding-bottom:8px;margin-bottom:14px}
.lh h1{margin:0;font-size:21px;letter-spacing:.5px;color:var(--burg)}
.lh .sub{font-size:11px;color:var(--gray);margin-top:3px}
h2{font-size:15px;color:var(--burg);border-bottom:1.5px solid var(--burg);padding-bottom:4px;margin:26px 0 10px}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border-bottom:2px solid var(--burg);
  padding:8px 0;
  margin-bottom:10px;
}
.topbar .tb-t{font-weight:700;font-size:13px;color:var(--burg);line-height:1.15}
.topbar .tb-s{font-size:10.5px;color:var(--gray);font-weight:400}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.btn-r,.btn-p,.btn-c{white-space:nowrap}
.btn-r{display:flex;align-items:center;gap:6px;background:var(--burg);color:#fff;border-color:var(--burg);font-weight:700}
.btn-r:hover{background:var(--burg-d);border-color:var(--burg-d)}
.btn-r .ic{font-size:14px;line-height:1}
.btn-c{background:var(--none);color:#fff;border-color:var(--none);font-weight:700}
.btn-c:hover{background:#166B32;border-color:#166B32}
.btn-p{background:var(--burg);color:#fff;border-color:var(--burg);font-weight:700}
.btn-p:hover{background:var(--burg-d);border-color:var(--burg-d)}
.stamp{font-size:11px;color:var(--gray);text-align:right;line-height:1.25;font-variant-numeric:tabular-nums}
.stamp b{color:var(--ink)}
.bar .spacer{flex:1}
.lyt{display:flex;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.lyt button{padding:8px 12px}
.lyt button + button{border-left:0}

.bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  background:var(--tint);
  border-left:5px solid var(--burg);
  padding:11px 14px;
  border-radius:3px;
  margin-bottom:6px;
}
.bar .t{font-weight:700;font-size:13px}
.clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--burg);font-size:15px}
.legend,.haz,.k{display:flex;flex-wrap:wrap;gap:8px}
.legend{margin:12px 0 6px}
.lg{display:flex;align-items:center;gap:7px;font-size:12px;border:1px solid var(--line);border-radius:20px;padding:4px 12px 4px 8px}
.sw{width:14px;height:14px;border-radius:3px;flex:0 0 auto}
.hint{font-size:12px;color:var(--gray);margin:8px 0 14px}
.mapwrap{border:1px solid var(--line);border-radius:5px;padding:14px;background:#FCFAFB}
.staterow{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.staterow .nm{font-size:11px;font-weight:700;color:var(--gray);letter-spacing:1px;min-width:34px}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-bottom:7px}
.cty{
  grid-column:var(--c);
  border:1.5px solid var(--line);
  border-radius:5px;
  padding:7px 8px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  position:relative;
  transition:.12s;
  min-height:56px
}
.cty:hover{box-shadow:0 0 0 2px var(--burg) inset}
.cty .n{font-weight:700;font-size:12.5px;display:block;line-height:1.2}
.cty .z{font-size:9.5px;color:var(--gray);letter-spacing:.3px}
.cty .s{font-size:10px;font-weight:700;margin-top:3px;display:block;text-transform:uppercase;letter-spacing:.4px}
.cty .lock{position:absolute;top:5px;right:6px;font-size:9px;font-weight:700;color:var(--nogo)}
.cty[data-s="NONE"]{background:var(--none-bg);border-color:var(--none)}
.cty[data-s="NONE"] .s{color:var(--none)}
.cty[data-s="LIGHT"]{background:var(--light-bg);border-color:var(--light)}
.cty[data-s="LIGHT"] .s{color:var(--light)}
.cty[data-s="HEAVY"]{background:var(--heavy-bg);border-color:var(--heavy)}
.cty[data-s="HEAVY"] .s{color:var(--heavy)}
.cty[data-s="NOGO"]{background:var(--nogo-bg);border-color:var(--nogo)}
.cty[data-s="NOGO"] .s{color:var(--nogo)}
.cty[data-s="UNK"]{
  background:repeating-linear-gradient(45deg,#F3F1F2,#F3F1F2 6px,#E7E3E5 6px,#E7E3E5 12px);
  border-color:#9A9299;
  color:#4A444A
}
.cty[data-s="UNK"] .s{color:#6B2510;font-weight:700}

.ckrow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ck{font-size:11.5px;border:1.5px solid var(--line);border-radius:4px;padding:5px 10px;background:#fff}
.ck.done{border-color:var(--none);background:var(--none-bg);color:#14532d;font-weight:700}
.ck.due{border-color:var(--heavy);background:var(--heavy-bg);color:#6B2510;font-weight:700}

.staleband{border-radius:3px;padding:9px 13px;font-size:12.5px;margin:0 0 12px;border-left:5px solid}
.sb-ok{background:var(--none-bg);border-color:var(--none);color:#14532d}
.sb-warn{background:#FFF4D6;border-color:var(--light);color:#5C4300}
.sb-bad{background:var(--heavy-bg);border-color:var(--heavy);color:#6B2510;font-weight:700}

.fs{border:1.5px solid var(--line);border-radius:4px;margin:0 0 14px;overflow:hidden;font-size:12px}
.fs-h{
  background:var(--tint);
  padding:7px 12px;
  font-weight:700;
  color:var(--burg);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline
}
.fs-b{padding:8px 12px;max-height:210px;overflow:auto}
.fs-r{
  display:grid;
  grid-template-columns:120px 62px 1fr;
  gap:0 10px;
  padding:3px 0;
  border-top:1px solid #F0ECEE;
  font-variant-numeric:tabular-nums
}
.fs-r:first-child{border-top:0}
.fs-bad{color:#6B2510;font-weight:700}

table{border-collapse:collapse;width:100%;font-size:12.5px}
th{background:var(--burg);color:#fff;text-align:left;padding:7px 9px;font-weight:700;font-size:11.5px}
td{border:1px solid #E4DCE0;padding:6px 9px;vertical-align:top}
tr:nth-child(even) td{background:var(--tint)}
.pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:11px;border:1.5px solid}
.p-go{color:var(--none);border-color:var(--none);background:var(--none-bg)}
.p-marg{color:var(--light);border-color:var(--light);background:var(--light-bg)}
.p-stop,.p-nocall{color:var(--nogo);border-color:var(--nogo);background:var(--nogo-bg)}

.kc{flex:1 1 130px;border:1px solid var(--line);border-radius:5px;padding:9px 11px;background:#fff}
.kc .v{font-size:22px;font-weight:700;line-height:1.1}
.kc .l{font-size:10.5px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

.tl{border:1.5px solid var(--line);border-radius:4px;overflow:hidden;margin:0 0 14px}
.tl-h{
  background:var(--tint);
  padding:7px 12px;
  font-weight:700;
  color:var(--burg);
  border-bottom:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline
}
.tl-h span{font-size:11px;color:var(--gray);font-weight:400}
.tl-r{
  display:grid;
  grid-template-columns:104px 1fr 150px;
  gap:0 12px;
  padding:8px 12px;
  border-top:1px solid #F0ECEE
}
.tl-r.now{background:var(--heavy-bg)}
.tl-r.past{opacity:.66}
.tl-r .t{font-weight:700}
.tl-r .w{font-size:12.5px}
.tl-r .o{font-size:11px;color:var(--gray);text-align:right}

.warn{background:#FFF4D6;border-left:5px solid var(--light);padding:10px 13px;border-radius:3px;font-size:12.5px;margin:12px 0}
.foot{margin-top:26px;border-top:1px solid var(--line);padding-top:9px;font-size:10.5px;color:var(--gray);text-align:center}

@media (max-width:640px){
  .wrap{padding:12px 12px 32px}
  .topbar{flex-wrap:nowrap;gap:8px}
  .topbar .tb-t{font-size:12px}
  .tb-right{flex-direction:column;align-items:flex-end;gap:3px}
  .btn-r{padding:9px 13px;font-size:13px;min-height:40px}
  .stamp{font-size:10px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .cty{grid-column:auto !important;min-height:62px}
  .bar{gap:7px}
  .bar button{padding:8px 12px}
  .bar button{flex:1 1 44%;min-height:38px}
  table{font-size:11.5px}
  pre{font-size:11px}
  .tl-r{grid-template-columns:1fr;gap:1px}
  .tl-r .o{text-align:left}
}