/* ===== TownieGuide After Dark ===== */
/* Applied via body.after-dark class. Auto-activated at sunset by after-dark.js */

/* ---- Custom Properties ---- */
body.after-dark {
  --ad-bg: #141414;
  --ad-surface: #1E1E1E;
  --ad-surface-2: #252520;
  --ad-border: #3A3020;
  --ad-text: #E8D5B0;
  --ad-text-dim: #857050;
  --ad-amber: #FF8C00;
  --ad-amber-glow: rgba(255,140,0,0.45);
  --ad-amber-dim: #CC6A00;
  --ad-orange: #FF6A00;
}

/* ---- Base ---- */
body.after-dark {
  background: var(--ad-bg);
  color: var(--ad-text);
  transition: background 0.8s, color 0.8s;
}

/* ---- Header ---- */
body.after-dark .site-header {
  background: #0C0C0C;
  border-bottom: 1px solid var(--ad-amber);
}

/* ---- Logo swap ---- */
body.after-dark .day-logo {
  display: none;
}
body.after-dark .neon-logo {
  display: inline-flex;
}

/* ---- Nav links ---- */
body.after-dark nav a {
  color: var(--ad-text-dim);
}
body.after-dark nav a:hover {
  color: var(--ad-amber);
}

/* ---- Dropdown ---- */
body.after-dark .dropdown summary {
  color: var(--ad-text-dim);
}
body.after-dark .dropdown summary:hover {
  color: var(--ad-amber);
}
body.after-dark .dropdown-menu {
  background: #181510;
  border: 1px solid var(--ad-border);
}
body.after-dark .dropdown-menu a {
  color: var(--ad-text-dim);
}
body.after-dark .dropdown-menu a:hover {
  color: var(--ad-amber);
}

/* ---- Mobile toggle ---- */
body.after-dark .mobile-toggle {
  color: var(--ad-text);
}

/* ---- Hero ---- */
body.after-dark .hero {
  background: linear-gradient(160deg, #0A0A08 0%, #18120A 100%);
}
body.after-dark .hero h1 {
  text-shadow: 0 0 30px rgba(255,140,0,0.5), 0 0 60px rgba(255,140,0,0.2);
}

/* ---- Section titles ---- */
body.after-dark .section-title {
  color: var(--ad-amber);
}
body.after-dark .section-subtitle {
  color: var(--ad-text-dim);
}

/* ---- Cards ---- */
body.after-dark .card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  box-shadow: none;
}
body.after-dark .card:hover {
  box-shadow: 0 4px 20px rgba(255,140,0,0.1);
}
body.after-dark .card h3 {
  color: var(--ad-amber);
}
body.after-dark .card a {
  color: var(--ad-amber);
}
body.after-dark .card p {
  color: var(--ad-text);
}

/* ---- Tab nav ---- */
body.after-dark .tab-nav {
  border-color: var(--ad-border);
}
body.after-dark .tab-btn {
  color: var(--ad-text-dim);
}
body.after-dark .tab-btn:hover {
  color: var(--ad-amber);
}
body.after-dark .tab-btn.active {
  color: var(--ad-amber);
  border-bottom-color: var(--ad-amber);
}

/* ---- Info table ---- */
body.after-dark .info-table {
  background: var(--ad-surface);
}
body.after-dark .info-table th {
  background: #261800;
  color: var(--ad-amber);
}
body.after-dark .info-table td {
  border-color: var(--ad-border);
  color: var(--ad-text);
}
body.after-dark .info-table tr:nth-child(even) td {
  background: #1C1608;
}

/* ---- Tips list ---- */
body.after-dark .tips-list li {
  background: var(--ad-surface);
  color: var(--ad-text);
}
body.after-dark .tips-list li strong {
  color: var(--ad-amber);
}

/* ---- Form ---- */
body.after-dark .form-wrap {
  background: var(--ad-surface);
}
body.after-dark .form-wrap h3 {
  color: var(--ad-amber);
}
body.after-dark .form-wrap input,
body.after-dark .form-wrap select,
body.after-dark .form-wrap textarea {
  background: #0E0E0C;
  color: var(--ad-text);
  border-color: var(--ad-border);
}

/* ---- Submit button ---- */
body.after-dark .btn-submit {
  background: var(--ad-amber);
  color: #000;
}

/* ---- Footer ---- */
body.after-dark .site-footer {
  background: #080806;
  border-top: 1px solid var(--ad-border);
  color: var(--ad-text-dim);
}
body.after-dark .site-footer a {
  color: var(--ad-amber);
}

/* ---- Inline style overrides ---- */
body.after-dark [style*="color:var(--green-dark)"] {
  color: var(--ad-amber) !important;
}
body.after-dark [style*="color: var(--green-dark)"] {
  color: var(--ad-amber) !important;
}
body.after-dark [style*="color:var(--green)"] {
  color: var(--ad-amber) !important;
}
body.after-dark [style*="color: var(--green)"] {
  color: var(--ad-amber) !important;
}
body.after-dark [style*="color:var(--text-light)"] {
  color: var(--ad-text-dim) !important;
}
body.after-dark [style*="color: var(--text-light)"] {
  color: var(--ad-text-dim) !important;
}

/* ---- Day/Night content visibility ---- */
.tab-night-label {
  display: none;
}
body.after-dark .tab-night-label {
  display: inline;
}
body.after-dark .tab-day-label {
  display: none;
}

.night-content {
  display: none;
}
body.after-dark .night-content {
  display: block;
}
body.after-dark .day-content {
  display: none;
}

.hero-night-tagline {
  display: none;
}
body.after-dark .hero-night-tagline {
  display: block;
}
body.after-dark .hero-day-tagline {
  display: none;
}

/* ---- After Dark badge / light switch ---- */
.ad-badge {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.after-dark .ad-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The wall plate — tall narrow rectangle like a real single-gang plate */
.ad-badge__plate {
  width: 36px;
  height: 58px;
  background: linear-gradient(160deg, #e8e2d2, #d8d0c0);
  border-radius: 3px;
  border: 1px solid #c0b8a8;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.5),
    inset -1px -1px 0 rgba(0,0,0,0.08),
    2px 3px 8px rgba(0,0,0,0.5),
    0 0 18px rgba(255,140,0,0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Screw holes — small flat-head */
.ad-badge__screw {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ccc5b5, #b0a898);
  border: 1px solid #a09888;
  left: 50%;
  transform: translateX(-50%);
}
.ad-badge__screw--top    { top: 5px; }
.ad-badge__screw--bottom { bottom: 5px; }

/* Flat-head screw slot */
.ad-badge__screw::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 1px;
  background: #908878;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
}

/* The toggle opening — small rectangular cutout */
.ad-badge__channel {
  width: 14px;
  height: 24px;
  background: #201c18;
  border-radius: 2px;
  border: 1px solid #181410;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
  position: relative;
  overflow: hidden;
}

/* The toggle paddle — small bat-handle style */
.ad-badge__toggle {
  width: 12px;
  height: 13px;
  background: linear-gradient(180deg, #e8e2d2 0%, #d0c8b8 100%);
  border: 1px solid #b0a898;
  border-radius: 1px;
  position: absolute;
  left: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 1px 2px rgba(0,0,0,0.35);
  transition: top 0.08s ease-in-out;
  top: 10px; /* DOWN = lights off */
}

/* Nub ridge on paddle */
.ad-badge__toggle::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 1px;
  background: #b8b0a0;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Label under the plate */
.ad-badge__label {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ad-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 5px;
  opacity: 0.75;
  text-shadow: 0 0 10px rgba(255,140,0,0.4);
  white-space: nowrap;
}

/* ---- Neon Logo ---- */
.neon-logo {
  display: none;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-decoration: none;
  align-items: baseline;
}

/* Base neon letter — amber tube */
.nl {
  display: inline-block;
  color: var(--ad-amber);
  text-shadow:
    0 0 6px var(--ad-amber),
    0 0 12px var(--ad-amber-glow),
    0 0 22px rgba(255,100,0,0.25);
}

/* Orange-red tube for "Guide" letters */
.nl-g {
  color: var(--ad-orange);
  text-shadow:
    0 0 6px var(--ad-orange),
    0 0 12px rgba(255,106,0,0.45),
    0 0 22px rgba(255,60,0,0.2);
}

/* ---- Flicker keyframes ---- */

/* Fast flicker — amber */
@keyframes neon-flicker-fast {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  17%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  18%  { opacity: 0.15; text-shadow: none; }
  19%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  21%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  22%  { opacity: 0.15; text-shadow: none; }
  23%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  55%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  56%  { opacity: 0.15; text-shadow: none; }
  57%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
}

/* Slow flicker — amber */
@keyframes neon-flicker-slow {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  87%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  88%  { opacity: 0.15; text-shadow: none; }
  89%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  90%  { opacity: 0.15; text-shadow: none; }
  91%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
}

/* Medium flicker — amber */
@keyframes neon-flicker-medium {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  43%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  44%  { opacity: 0.15; text-shadow: none; }
  45%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  46%  { opacity: 0.15; text-shadow: none; }
  47%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  49%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  50%  { opacity: 0.15; text-shadow: none; }
  51%  { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-amber), 0 0 12px var(--ad-amber-glow), 0 0 22px rgba(255,100,0,0.25); }
}

/* Dying — amber */
@keyframes neon-dying {
  0%   { opacity: 0.55; text-shadow: 0 0 4px rgba(255,140,0,0.3); }
  50%  { opacity: 0.25; text-shadow: none; }
  100% { opacity: 0.55; text-shadow: 0 0 4px rgba(255,140,0,0.3); }
}

/* Dead letter */
.nl-dead {
  opacity: 0.1 !important;
  text-shadow: none !important;
  color: #3A2800 !important;
  animation: none !important;
}

/* Fast flicker — orange/guide */
@keyframes neon-flicker-fast-g {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  17%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  18%  { opacity: 0.15; text-shadow: none; }
  19%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  21%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  22%  { opacity: 0.15; text-shadow: none; }
  23%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  55%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  56%  { opacity: 0.15; text-shadow: none; }
  57%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
}

/* Slow flicker — orange/guide */
@keyframes neon-flicker-slow-g {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  87%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  88%  { opacity: 0.15; text-shadow: none; }
  89%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  90%  { opacity: 0.15; text-shadow: none; }
  91%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
}

/* Medium flicker — orange/guide */
@keyframes neon-flicker-medium-g {
  0%   { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  43%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  44%  { opacity: 0.15; text-shadow: none; }
  45%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  46%  { opacity: 0.15; text-shadow: none; }
  47%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  49%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  50%  { opacity: 0.15; text-shadow: none; }
  51%  { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
  100% { opacity: 1; text-shadow: 0 0 6px var(--ad-orange), 0 0 12px rgba(255,106,0,0.45), 0 0 22px rgba(255,60,0,0.2); }
}

/* ---- Apply animations ---- */
.nl-flicker-fast   { animation: neon-flicker-fast   2.3s infinite; }
.nl-flicker-slow   { animation: neon-flicker-slow   5.1s infinite; }
.nl-flicker-medium { animation: neon-flicker-medium 3.7s infinite; }
.nl-dying          { animation: neon-dying          2.2s ease-in-out infinite; }

.nl-g.nl-flicker-fast   { animation: neon-flicker-fast-g   1.9s infinite; }
.nl-g.nl-flicker-slow   { animation: neon-flicker-slow-g   6.3s infinite; }
.nl-g.nl-flicker-medium { animation: neon-flicker-medium-g 4.1s infinite; }

/* ---- Wendell the Owl ---- */
.wendell-wrap {
  display: none;
  text-align: center;
  margin-top: 1.5rem;
}
body.after-dark .wendell-wrap {
  display: block;
}

.wendell-svg {
  filter: drop-shadow(0 0 10px rgba(255,140,0,0.3));
  animation: wendell-pulse 4s ease-in-out infinite;
}

@keyframes wendell-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,140,0,0.3)); }
  50%       { filter: drop-shadow(0 0 20px rgba(255,140,0,0.55)); }
}

.wendell-caption {
  font-size: 0.8rem;
  color: var(--ad-text-dim);
  font-style: italic;
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* ---- Emergency card styles ---- */
body.after-dark .emergency-card {
  border-left: 3px solid #CC2200 !important;
}
body.after-dark .emergency-card h3 {
  color: #FF6655 !important;
}
body.after-dark .ad-alert {
  background: #1A0808;
  border: 1px solid #4A1010;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: #FF9090;
  font-size: 0.9rem;
}