/* ============================================================
   Kentucky Run for the Fallen — styles.css
   Nearly all styling is inline in index.html so each block can be
   edited on its own. This file holds only what inline styles can't do:
   resets, fonts, keyframe animations, and :hover states.
   PALETTE  navy #080E1A / #0D1628 / #131F36 · blue #1D3A6D #27508F
            steel #A8BEDF · red #E04A52 #B4232B · white #F2F5FB
   ============================================================ */

/* --- resets, keyframes, reduced motion --- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: #080E1A; color: #F2F5FB; font-family: Barlow, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { display: block; }
  a { color: #A8BEDF; text-decoration: none; }
  a:hover { color: #F2F5FB; }
  ::selection { background: #1D3A6D; color: #F2F5FB; }
  summary::-webkit-details-marker { display: none; }
  @keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.14); } }
  @keyframes drift { from { transform: translateY(0); } to { transform: translateY(6px); } }
  @keyframes glow { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
  @keyframes grainshift { 0% { transform: translate(0,0); } 100% { transform: translate(-6%,-4%); } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; } }



  /* --- MOBILE / TABLET ---------------------------------------- */
  @media (max-width: 880px) {
    [data-header] { padding-left: 12px !important; padding-right: 12px !important; }
    [data-header] nav { padding-left: 0 !important; gap: 18px !important; font-size: 13px !important;
      flex-wrap: nowrap !important; justify-content: flex-start !important;
      overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    [data-header] nav::-webkit-scrollbar { display: none; }
    [data-header] nav a { flex: 0 0 auto; }
    [data-brand] img { width: clamp(210px, 62vw, 330px) !important; }
    [data-hero-photo] { clip-path: none !important; }
    [data-countdown] { margin: 22px 0 6px !important; }
    [data-route-aside] { position: static !important; top: auto !important; }
    [data-gallery] { grid-auto-rows: 150px !important; }
  }
  @media (max-width: 560px) {
    [data-header] nav a[href^="http"] { padding: 12px 18px !important; }
    [data-gallery] { grid-auto-rows: 128px !important; gap: 8px !important; }
    [data-countdown] { padding: 18px 16px !important; }
  }

/* --- hover states (generated from the design; each maps to a
       data-h="n" attribute on the element in index.html) --- */
[data-h="1"]:hover {
  filter:brightness(1.15) !important;
  transform:translateY(-1px) !important;
}
[data-h="2"]:hover {
  border-color:#E04A52 !important;
  background:rgba(224,74,82,.16) !important;
  color:#F2F5FB !important;
}
[data-h="3"]:hover {
  border-color:#A8BEDF !important;
  background:rgba(168,190,223,.14) !important;
  color:#F2F5FB !important;
}
[data-h="4"]:hover {
  transform:translateY(-2px) !important;
  filter:brightness(1.12) !important;
}
[data-h="5"]:hover {
  border-color:#A8BEDF !important;
  background:rgba(168,190,223,.12) !important;
}
[data-h="6"]:hover {
  border-color:#A8BEDF !important;
  background:rgba(168,190,223,.12) !important;
}
[data-h="7"]:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(168,190,223,.32) !important;
}
[data-h="8"]:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(168,190,223,.32) !important;
}
[data-h="9"]:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(168,190,223,.32) !important;
}
[data-h="10"]:hover {
  transform:translateY(-4px) !important;
  border-color:rgba(168,190,223,.32) !important;
}
[data-h="11"]:hover {
  transform:scale(1.03) !important;
}
[data-h="12"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="13"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="14"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="15"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="16"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="17"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="18"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="19"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="20"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="21"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="22"]:hover {
  transform:scale(1.05) !important;
  filter:saturate(1) !important;
}
[data-h="23"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="24"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="25"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="26"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="27"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="28"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="29"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="30"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="31"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="32"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="33"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="34"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="35"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="36"]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(15,26,46,.1) !important;
}
[data-h="37"]:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(168,190,223,.35) !important;
  background:#1B2A47 !important;
}
[data-h="38"]:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(168,190,223,.35) !important;
  background:#1B2A47 !important;
}
[data-h="39"]:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(168,190,223,.6) !important;
}
[data-h="40"]:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(168,190,223,.35) !important;
  background:#1B2A47 !important;
}
[data-h="41"]:hover {
  transform:scale(1.05) !important;
}

/* --- nav tiles --- */
[data-navtile]:hover {
  transform:translateY(-3px) !important;
  box-shadow:0 12px 26px rgba(3,7,16,.7),inset 0 1px 0 rgba(242,245,251,.14) !important;
  color:#F2F5FB !important;
  border-color:#E04A52 !important;
}