/*  CSS for traffic camera website.
    Copyright (c) 2026 Bruce Keever. All rights reserved.
    Revised: 1 February 2026 */

/* =========================================================
   RESPONSIVE RULE:
   - Layout changes live ONLY in the Responsive Layout section
   - Component-level tweaks may include local media queries
   ========================================================= */
   
html{scrollbar-gutter:stable;}
@supports not (scrollbar-gutter: stable){html{overflow-y:scroll;}}

:root{
  --cam-tile-w: 335px;   /* default tile width */
}

/* General Styles */
body {
  margin: 0;
font-family: 'Overpass', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background-color: #fff;
  color: #111;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* ----------------------------------------
   Light / Dark Mode
---------------------------------------- */
body.light-mode {
  background-color: #fff;
  color: #111;
}

#dark-mode-toggle {
  margin-left: 20px;
}

/* ----------------------------------------
   View Controls
---------------------------------------- */
.view-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dark mode button inside view controls */
.view-controls .site-nav__mode,
.view-controls .site-nav__mode:hover,
.view-controls .site-nav__mode:focus,
.view-controls .site-nav__mode:active {
  background-color: #000 !important;
  color: #fff !important;
  background-image: none !important;
  border: 1px solid #444 !important;
}

/* Button group (Reset + Light/Dark) */
.view-controls__buttons {
  display: flex;
  align-items: center;
  gap: 20px; /* desktop default */
}

/* ----------------------------------------
   Desktop Layout (701px+)
---------------------------------------- */
@media (min-width: 701px) {
  .gallery {
    max-width: 80vw;
    margin: 0 auto;
  }
}

/* ----------------------------------------
   Mobile Layout (<=700px)
---------------------------------------- */
@media (max-width: 700px) {
  .forecast7 {
    display: none !important;
  }

  .view-controls__buttons {
    gap: 0 !important;
  }
}


/* Desktop/tablet spacing */
#dark-mode-toggle {
  margin-left: 20px;
}

/* Mobile: remove the extra space */
@media (max-width: 700px) {
  #dark-mode-toggle {
    margin-left: 0 !important;
  }
}

/* Typography */
H1, H2, p, li {
  font-family: 'Overpass', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  color: inherit;
}

H1 { font-size: 16px; font-weight: bold; }
H2 { font-size: 14px; font-weight: bold; margin-bottom: -10px; }

/* Links */
a:link, a:visited {
  color: #004c99;
  text-decoration: none;
}

body.dark-mode a:link, body.dark-mode a:visited { color: #ffffff; }
a:hover { color: #FF0000; }

a.black { color: black; }
a.white { color: white; }

a.white:hover { color: #FF0000; }

a.black:hover { font-weight: bold; }

/* Copyright */
.copyright {
  font-size: 8pt;
  bottom: 10px;
  left: 10px;
  color: #000 !important;
  padding: 5px;
}

/* Site logo and title */
.site-title{
  display: flex;
  align-items: center;
  gap: 12px;

  /* keep logo + text on one line */
  white-space: nowrap;
}

.site-title-logo{
  height: 34px;   /* good “header icon” size */
  width: auto;
  display: block;
  object-fit: contain;

  /* prevent it from exploding on mobile */
  max-height: 34px;
}

.site-title-text{
  font-size: 18px;   /* adjust if needed */
  line-height: 1;
}


/* =========================================================
   Navigation menu
   ========================================================= */

/* FHWA guide sign green is specified as Pantone 342 for printing (MUTCD color specs).
   For web UI, this is a common close match often referenced as "road sign green". */
:root{
  --interstate-green: #01735C;
  --nav-bg: var(--interstate-green);
  --footer-bg: var(--interstate-green);
  --nav-border: rgba(255,255,255,0.20);
  --nav-link: #ffffff;
  --nav-link-hover: rgba(255,255,255,0.12);
  --nav-active: rgba(255, 214, 92, 0.25);
  --nav-active-border: rgba(255, 214, 92, 0.75);
}

body.dark-mode{
  background-color:#000;
  color:#fff;
}

/* Sticky top nav */
.site-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

@media (min-width: 821px){
  .site-nav{
    background: color-mix(in srgb, var(--nav-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.site-nav__inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-nav__brand{
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 12px;
}

.site-nav__brand:hover{
  background: rgba(255,255,255,0.10);
}

/* Brand (logo + "Traffic Cameras") */
.site-nav__brand{
  display: inline-flex;       /* make the anchor a flex row */
  align-items: center;
  gap: 12px;
}

/* The actual logo in menu.php */
.site-nav__brand-logo{
  height: clamp(34px, 5vw, 48px);
  max-height: 48px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* The title text */
.site-nav__brand-text{
  font-size: 20px;
  line-height: 1;
}

/* Cam width slider */
.view-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px;
}

.view-controls__slider{
  width: min(420px, 70vw);
}

.view-controls__reset{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #fff;
  cursor: pointer;
}

.view-controls__value{
  min-width: 58px;
  text-align: right;
}

.site-nav__toggle{
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nav-border);
  background: rgba(255,255,255,0.10);
  color: var(--nav-link);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.site-nav__menu{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: 6px;
}

.site-nav__link{
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.8px;

  padding: 7px 12px;
  border-radius: 6px;                 /* closer to guide sign corner */
  border: 2px solid rgba(255,255,255,0.95);  /* bold white stroke */
  background: rgba(0,0,0,0.08);        /* subtle depth against green */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

.site-nav__link:hover{
  background: rgba(255,255,255,0.14);
}

.site-nav__link.is-active{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255, 214, 92, 0.95); /* reflective-ish active edge */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.12),
    0 0 0 2px rgba(0,0,0,0.08);
}

.site-nav__mode{
  margin-left: auto;
  border: 1px solid var(--nav-border);
  background: rgba(0,0,0,0.12);
  color: var(--nav-link);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.site-nav__toggle:focus-visible,
.site-nav__link:focus-visible,
.site-nav__mode:focus-visible{
  outline: 2px solid rgba(255, 214, 92, 0.90);
  outline-offset: 2px;
}

@media (max-width: 820px){
  .site-nav__toggle{ display: inline-flex; }
  .site-nav__mode{ margin-left: 0; }

  .site-nav__menu{
    width: 335px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 6px 0 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--nav-border);
  }
  .site-nav__menu.is-open{ display: flex; }

  .site-nav__link{
    text-align: center;
    font-size: 13px;
  }
}

/* Content wrapper (keeps grid from going edge-to-edge) */
.main{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Grid Layout */
.gallery,
.camgallery{
    display: grid;
  /* Fixed-width tiles centered (prevents "full-width stretch") */
  grid-template-columns: repeat(auto-fill, var(--cam-tile-w));
  justify-content: center;
  gap: 10px;
  padding: 12px;
  align-items: start;
}

/* Camera Cards */
.camgallery-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Camera Images */
.camgallery-image {
  width: var(--cam-tile-w);
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

/* Scroll Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.camgallery-card {
  animation: fadeIn 0.6s ease-in-out;
}

/* Bellevue page */
.iframe-center{
  display: flex;
  justify-content: center;
}

.iframe-center iframe{
  display: block;
  max-width: 100%;
}

.iframe-center{ margin-bottom: 12px; }

.iframe-credit{
  text-align: center;
  margin-top: 12px;
}


/* =========================================================
   Gallery images (shared)
   ========================================================= */
.gallery-image,
.camgallery-image{
    width: var(--cam-tile-w);
  height: auto;
  /* Show full image (no top/bottom cropping) */
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.20);
  background: rgba(0,0,0,0.03);
  transform-origin: center;
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
  will-change: transform;
}

body.dark-mode .gallery-image, body.dark-mode .camgallery-image{ border-color: rgba(255,255,255,0.18); }

/* Default (desktop): allow hover zoom */
.camgallery-card img,
.gallery img,
.gallery-image {
  transition: transform 160ms ease, box-shadow 160ms ease;
  transform-origin: center center;
}

/* Touch devices (phones/tablets): no hover zoom */
@media (hover: none), (pointer: coarse) {
  .camgallery-card img:hover,
  .gallery img:hover,
  .gallery-image:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   Lightbox (click/tap to enlarge)
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.lightbox.is-open {
  display: block;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
}

.lightbox__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.lightbox__img {
  max-width: min(94vw, 1400px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  background: rgba(255,255,255,0.06);
}

.lightbox__close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
}

.lightbox__close:focus-visible {
  outline: 2px solid rgba(255,183,0,0.85);
  outline-offset: 2px;
}

/* Optional: subtle hover hint on desktop */
@media (hover: hover) and (pointer: fine) {
  .gallery-image {
    cursor: zoom-in;
  }
}

/* =========================================================
   Lightbox (click/tap to enlarge) — overrides
   ========================================================= */

.lightbox__figure{
  position: relative;
  display: inline-block;
}

.lightbox__img{
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
}

.lightbox__close{
  position: absolute;
  top: -12px;
  right: -12px;

  width: 34px;
  height: 34px;
  padding: 0;

  display: grid;
  place-items: center;

  background: #fff;
  color: #000;

  border: 1px solid #000;
  border-radius: 6px;

  cursor: pointer;

  font-weight: 900;
  font-size: 18px;
  line-height: 1;

  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.lightbox__close:hover{
  background: #f2f2f2;
}


/* Lightbox replaces hover zoom — disable all hover transforms */
@media (hover: hover) and (pointer: fine) {
  .gallery-image:hover,
  .camgallery-image:hover,
  .camgallery-card:hover .gallery-image,
  .camgallery-card:hover .camgallery-image {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   Favorites star button
   ========================================================= */
.camgallery-card{
  position: relative;
}

.fav-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  cursor: pointer;
  padding: 0;
  z-index: 10;
}

body.dark-mode .fav-btn{
  border-color: rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
}

.fav-icon{
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Filled star (favorited) — fill with interstate green */
.fav-btn.is-fav .fav-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2301735C'%3E%3Cpath d='M12 2l2.9 6.9L22 9.8l-5 4.7 1.3 7.1L12 18.9 5.7 21.6 7 14.5 2 9.8l7.1-.9L12 2z'/%3E%3C/svg%3E");
}

/* Star icon (inline SVG) */
.fav-icon{
  width: 18px;
  height: 18px;
  display: block;
}

.fav-btn .fav-icon path{
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.dark-mode .fav-btn .fav-icon path{
  stroke: #fff;
}

/* Favorited: filled with interstate green */
.fav-btn.is-fav .fav-icon path{
  fill: var(--interstate-green, #01735C);
  stroke: var(--interstate-green, #01735C);
}

/* Star pop animation */
.fav-btn.is-fav {
  animation: fav-pop 180ms ease-out;
}

@keyframes fav-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}


/* =========================================================
   Favorites menu spacing + count
   ========================================================= */
.favorites-controls {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 16px 0 16px;
  text-align: right;
}

.clear-fav-btn {
  background: #b30000;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.clear-fav-btn:hover {
  background: #cc0000;
}

   .site-nav__link--favorites{
  margin-left: 20px; /* keeps extra spacing after Seattle */
}

.fav-count{
  opacity: 0.9;
  font-weight: 800;
  margin-left: 6px;
}

/* =========================================================
   Favorites empty state
   ========================================================= */
.favorites-empty{
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 14px;
  background: rgba(0,0,0,0.06);
  color: inherit;
  font-weight: 700;
}

body.dark-mode .favorites-empty{
  background: rgba(255,255,255,0.08);
}

/* Keep nav links white even after visited (esp. mobile Safari/Chrome) */
.site-nav a,
.site-nav a:visited,
.site-nav__link:visited,
.site-nav__brand:visited{
  color: #fff;
}


/* =========================================================
   Back to Top button
   ========================================================= */
.back-to-top{
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-fixed-h, 0px) + 16px);
  z-index: 10000;

  padding: 10px 12px;
  border: 0;
  border-radius: 999px;

  cursor: pointer;

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease;
}

.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* =========================================================
   Bottom lock (fixed weather and footer)
   ========================================================= */
/* Reserve space for the fixed weather+footer bar so content never hides behind it */
:root {
  --bottom-fixed-h: 0px;
}

/* Main content should never slide under the fixed bottom bar */
.main {
  padding-bottom: calc(var(--bottom-fixed-h) + 24px);
}

.bottom-fixed,
.bottom-fixed *{
  color: #fff;
}

.bottom-fixed a,
.bottom-fixed a:visited{
  color: #fff;
}

.bottom-fixed a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Make bottom bar stack forecast + footer cleanly */
.bottom-fixed{
  display: flex;
  flex-direction: column;
  gap: 6px;                 /* small space between widget and footer */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  color: #fff;
  background: var(--footer-bg);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
}

/* Footer should sit on top and be readable */
.bottom-fixed .footer{
  position: relative;
  z-index: 2;
  padding: 6px 10px;
}

/* Override the global black copyright color */
.bottom-fixed .copyright{
  color: #fff !important;
  margin: 0;
}