/*
Theme Name: Kirksville Wire
Template: twentytwentyfour
Description: Child theme for Kirksville Wire — dark, wire-dispatch aesthetic built on Twenty Twenty-Four.
Author: Kirksville Wire
Version: 1.4
*/

:root {
  --kw-ink: #141311;
  --kw-ink-2: #1D1B18;
  --kw-paper: #F3EEE1;
  --kw-signal: #FF5A36;
  --kw-wire: #FFC857;
  --kw-grey: #8C8879;
}

/* Base */
body {
  background-color: var(--kw-ink);
  color: var(--kw-paper) !important;
  font-family: "Space Mono", monospace;
}

p, .wp-block-paragraph {
  color: var(--kw-paper) !important;
}

a { color: var(--kw-wire) !important; }
a:hover { color: var(--kw-signal) !important; }

/* Headings use the display serif */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-site-title {
  font-family: "Fraunces", serif;
  font-weight: 700;
  color: var(--kw-paper) !important;
}

.wp-block-site-tagline {
  font-family: "Fraunces", serif;
  font-style: italic;
  color: var(--kw-grey) !important;
}

/* Buttons */
.wp-block-button__link,
button,
input[type="submit"] {
  background-color: var(--kw-signal) !important;
  color: var(--kw-ink) !important;
  border-radius: 0 !important;
  font-family: "Space Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: none !important;
}
.wp-block-button__link:hover,
button:hover {
  background-color: var(--kw-wire) !important;
}

/* Post excerpts / cards */
.wp-block-post-excerpt {
  font-family: "Fraunces", serif;
  color: var(--kw-paper);
}

.wp-block-post-date,
.wp-block-post-terms,
.wp-block-post-author {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--kw-grey) !important;
  text-transform: uppercase;
}

/* Section dividers */
.wp-block-separator {
  border-color: var(--kw-ink-2) !important;
}

/* ---- Wire ticker (used by the Wire Ticker pattern) ---- */
.kw-ticker-wrap {
  background: var(--kw-signal);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5rem 0;
  border-bottom: 2px solid var(--kw-ink);
}
.kw-ticker {
  display: inline-block;
  padding-left: 100%;
  animation: kw-scroll 22s linear infinite;
  color: var(--kw-ink);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-family: "Space Mono", monospace;
}
.kw-ticker span { padding: 0 0.9em; }
@keyframes kw-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .kw-ticker { animation: none; }
}

/* ---- Live signal dot (used by the Dispatch Hero pattern) ---- */
.kw-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--kw-signal);
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
}
.kw-dot {
  width: 8px; height: 8px;
  background: var(--kw-signal);
  border-radius: 50%;
  animation: kw-pulse 1.4s ease-in-out infinite;
}
@keyframes kw-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .kw-dot { animation: none; }
}

/* News box heading dot is a static (non-"live") indicator — this feed is
   a 30-minute cache, not a truly live signal, so it shouldn't pulse. */
.kw-live--static .kw-dot {
  animation: none;
  opacity: 1;
  transform: scale(1);
}

/* ---- Ad slots ---- */
.kw-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px dashed var(--kw-grey);
  background: var(--kw-ink-2);
  color: var(--kw-grey);
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 2rem auto;
}
.kw-ad-slot span {
  opacity: 0.6;
}
.kw-ad-slot--leaderboard { width: 100%; max-width: 728px; height: 90px; }
.kw-ad-slot--rectangle { width: 300px; height: 250px; }
.kw-ad-slot--in-article { width: 100%; max-width: 600px; height: 120px; }
.kw-ad-slot--banner { width: 100%; max-width: 970px; height: 120px; }

/* An ad slot with real ad code/an image pasted in (as opposed to the
   dashed "paste ad code here" placeholder above) — keep it centered and
   never let an image or embed blow out past its column. */
.kw-ad-slot-live {
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}
.kw-ad-slot-live img,
.kw-ad-slot-live iframe {
  max-width: 100%;
  height: auto;
}

/* ---- Weather badge (top-right of hero) ---- */
.kw-weather-corner {
  position: absolute;
  top: 0.5rem;
  right: 0;
  font-family: "Space Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--kw-grey);
  text-align: right;
}
.kw-weather-corner .kw-weather-temp {
  color: var(--kw-paper);
  font-weight: 700;
}

/* ---- Folder / resource directory grid ---- */
.kw-folder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (max-width: 780px) {
  .kw-folder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .kw-folder-grid { grid-template-columns: 1fr; }
}
.kw-folder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.6rem;
  background: var(--kw-ink-2);
  border: 1px solid #3A3731;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.kw-folder-card:hover {
  border-color: var(--kw-signal);
  transform: translateY(-2px);
}
.kw-folder-card svg {
  width: 34px;
  height: 34px;
  stroke: var(--kw-signal);
  fill: none;
  stroke-width: 1.5;
}
.kw-folder-card .kw-folder-title {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--kw-paper);
}
.kw-folder-card.kw-folder-placeholder {
  border-style: dashed;
  opacity: 0.55;
}
.kw-folder-card.kw-folder-placeholder .kw-folder-title {
  color: var(--kw-grey);
}

/* ---- Hold-for-release stamp ---- */
.kw-stamp {
  display: inline-block;
  border: 2px solid var(--kw-signal);
  color: var(--kw-signal);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  transform: rotate(-3deg);
  font-family: "Space Mono", monospace;
}


/* ---- Force override: WordPress per-block/per-post colors (has-text-color,
   has-link-color, wp-elements-N) are more specific than plain h1/a rules
      above and were winning, leaving post titles unreadable (near-black on
         dark background). These selectors add specificity to beat them. ---- */
         body .wp-block-post-title,
         body .wp-block-post-title.has-text-color,
         body .wp-block-post-title.has-contrast-color,
         body h1.wp-block-post-title,
         body h2.wp-block-post-title,
         body h3.wp-block-post-title {
             color: var(--kw-paper) !important;
         }
         body .wp-block-post-title a,
         body .wp-block-post-title.has-link-color a {
             color: var(--kw-paper) !important;
         }
         body .wp-block-post-title a:hover {
             color: var(--kw-signal) !important;
         }


/* ---- Alerts rotator (homepage) ---- */
.kw-alert-box {
background: var(--kw-ink-2);
border: 1px solid rgba(243,238,225,.14);
border-radius: 4px;
padding: 1.75rem clamp(1.25rem, 4vw, 2rem);
margin-block: 2.5rem;
}
.kw-alert-box__heading {
margin-block-end: 1.1rem;
}
.kw-alert-rotator {
position: relative;
min-height: 5.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.kw-alert-rotator > .kw-alert-item {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity .6s ease;
}
.kw-alert-rotator > .kw-alert-item.is-active {
opacity: 1;
visibility: visible;
position: relative;
}
.kw-alert-item a {
color: var(--kw-paper);
font-family: "Fraunces", serif;
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.kw-alert-item a:hover {
color: var(--kw-signal);
}
.kw-alert-item time {
display: block;
color: var(--kw-grey);
font-family: "Space Mono", monospace;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .06em;
margin-block-start: .5rem;
}
.kw-alert-empty {
color: var(--kw-grey);
font-style: italic;
margin: 0;
}

/* ---- Hide the CookieAdmin plugin's floating orange "re-consent"
   bubble. It has no on/off switch in the plugin's own settings (only
   a choice of icon style), so it's hidden here instead. The banner
   itself, and everything else the plugin does, is untouched. ---- */
button.cookieadmin_re_consent {
  display: none !important;
}

/* ---- Every "banner" ad between boxes -- Alerts/News/Sports/Calendar
   dividers (.kw-ad-divider) and the folder directory grid dividers
   (.kw-ad-divider--grid) alike -- renders at this same moderate size,
   never at its full 970px design width. One consistent size sitewide,
   at each breakpoint. Aspect ratio is handled by the ad content's own
   CSS, so it scales down cleanly. ---- */
.kw-ad-divider .kw-ad-rotator--banner,
.kw-ad-divider--grid .kw-ad-rotator--banner {
  max-width: calc((100% - 3rem) / 3) !important;
}
@media (max-width: 780px) {
  .kw-ad-divider .kw-ad-rotator--banner,
  .kw-ad-divider--grid .kw-ad-rotator--banner {
    max-width: calc((100% - 1.5rem) / 2) !important;
  }
}
@media (max-width: 680px) {
  .kw-ad-divider .kw-ad-rotator--banner,
  .kw-ad-divider--grid .kw-ad-rotator--banner {
    max-width: min(300px, 88%) !important;
  }
}

/* ---- Safety net: on some phones an ad slide's image was rendering at
   its full native pixel size instead of scaling down to the shrunk ad
   box, spilling out past its row and dragging the whole page into a
   sideways scroll. This forces every ad image/iframe to always fit
   its box, and stops anything from ever pushing the page wider than
   the screen, no matter what causes it. ---- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.kw-ad-divider,
.kw-ad-divider--grid {
  overflow: hidden;
}
.kw-ad-rotator img,
.kw-ad-rotator iframe {
  max-width: 100% !important;
  height: auto !important;
}