:root{
  --bg: #000000;
  --fg: wheat;
  --fg-muted: rgba(245, 222, 179, 0.78);
  --card: rgba(245, 222, 179, 0.08);
  --card-border: rgba(245, 222, 179, 0.22);
  --danger: rgba(255, 99, 71, 0.85);
  --ok: rgba(144, 238, 144, 0.85);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--fg);
 
}

.app-grid{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
}

.site-top{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
}
.site-header{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg);
}

.site-header img{
  display:block;
  height: 210px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


.nav{
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(245, 222, 179, 0.04);
}
.nav-left{ display:flex; align-items:center; gap:12px; }
.nav-brand{
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--fg);
  white-space: nowrap;
}
.nav-user{
  color: var(--fg-muted);
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.content{
  padding: 16px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.footer{
  padding: 10px 16px;
  border-top: 1px solid var(--card-border);
  color: var(--fg-muted);
  text-align: center;
}

h1, h2, h3{ margin: 0 0 10px; }
p{ color: var(--fg-muted); margin-top: 0; }

.card{
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  margin: 0 0 14px;
}

.href{color: wheat;
}

.btn{
  min-height: 44px;
  display: inline-block;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  background: rgba(245, 222, 179, 0.06);
  transition: transform 120ms ease, background 120ms ease;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover{ background: rgba(245, 222, 179, 0.12); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn-ghost{ background: transparent; }
.btn-danger{ border-color: rgba(255,99,71,0.55); }
.btn-danger:hover{ background: rgba(255,99,71,0.12); }

.btn-wide {
    min-height: 44px;
    display: inline-block;
    inset:auto;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    text-decoration: none;
    color: black;
    background-color: wheat;
    transition: transform 120ms ease, background 120ms ease;
    font-weight: 600;
    cursor: pointer;
    width: 50vw;
    text-align: center;
    align-self: center;
}

.btn-wide:hover {
    background: rgba(245, 222, 179, 0.12);
    transform: translateY(-1px);
}


.form{
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.field{ display: grid; gap: 6px; }
label{ color: var(--fg); font-weight: 600; }
input, textarea, select{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(0,0,0,0.35);
  color: var(--fg);
  outline: none;
}
input:focus, textarea:focus, select:focus{ border-color: rgba(245, 222, 179, 0.6); }

.notice{
  padding: 10px 12px;
  border: 1px solid rgba(245, 222, 179, 0.35);
  background: rgba(245, 222, 179, 0.08);
  border-radius: 12px;
  margin: 0 0 14px;
}
.notice.ok{ border-color: rgba(144, 238, 144, 0.45); background: rgba(144, 238, 144, 0.08); }
.notice.bad{ border-color: rgba(255, 99, 71, 0.45); background: rgba(255, 99, 71, 0.08); }

.table-wrap{
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  margin-top: 10px;
}
table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: rgba(0,0,0,0.18);
}
th, td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(245, 222, 179, 0.14);
  text-align: left;
  vertical-align: top;
}
th{
  color: var(--fg);
  background: rgba(245, 222, 179, 0.06);
  position: sticky;
  top: 0;
}
tr:hover td{ background: rgba(245, 222, 179, 0.04); }

.badge{
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(245, 222, 179, 0.06);
  font-weight: 700;
  font-size: 0.85rem;
}
.badge.ok{ border-color: rgba(144, 238, 144, 0.45); }
.badge.bad{ border-color: rgba(255, 99, 71, 0.45); }

/* Events calendar (mobile-first) */
.legend{ display:flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.legend-item{ display:flex; align-items:center; gap: 8px; font-weight: 600; font-size: 0.95rem; }

.calendar{ display: grid; gap: 14px; }
.cal-month{ border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; background: rgba(0,0,0,0.20); }
.cal-month-title{ padding: 10px 12px; font-weight: 800; background: rgba(245, 222, 179, 0.06); }
.cal-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow{ padding: 8px 6px; text-align:center; font-weight: 800; font-size: 0.8rem; opacity: 0.85; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cal-day{ min-height: 92px; padding: 6px; border-right: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.cal-day:nth-child(7n){ border-right: none; }
.cal-day--muted{ opacity: 0.55; }
.cal-day--out{ opacity: 0.22; }
.cal-day-num{ font-weight: 800; font-size: 0.85rem; margin-bottom: 6px; }

.cal-events{ display:flex; flex-direction: column; gap: 6px; }
.cal-event{ display:flex; align-items:flex-start; gap: 8px; }
.cal-event-text{ font-size: 0.85rem; line-height: 1.15; }

.event-bar{ width: 10px; height: 20px; border-radius: 6px; display:inline-block; border: 1px solid rgba(0,0,0,0.30); }
.lake-big{ background: #1e6fff; }
.lake-carp{ background: #d43b3b; }
.lake-silverfish{ background: #c0c0c0; }
.lake-other{ background: rgba(245, 222, 179, 0.65); }

@media (min-width: 900px){
  .cal-day{ min-height: 110px; }
  .cal-event-text{ font-size: 0.9rem; }
}

@media (max-width: 420px){
  .cal-day{ min-height: 86px; padding: 6px 5px; }
  .cal-event-text{ font-size: 0.82rem; }
}

.gallery-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery-grid img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  display: block;
}
@media (min-width: 800px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid img{ max-width: 40vw; justify-self: start; }
}
@media (max-width: 520px){
  .nav{ padding: 0 10px; }
  .content{ padding: 12px; }
  table{ min-width: 640px; }
}


/* Lightbox */
.lightbox-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.lightbox-backdrop.open{ display: flex; }

.lightbox-content{
  position: relative;
  width: min(1100px, 96vw);
  max-height: 92vh;
  border: 1px solid rgba(245, 222, 179, 0.22);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.55);
}
.lightbox-img{
  width: 100%;
  height: auto;
  max-height: 92vh;
  object-fit: contain;
  display: block;
}
.lightbox-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(245, 222, 179, 0.35);
  background: rgba(0,0,0,0.45);
  color: wheat;
  font-weight: 700;
  cursor: pointer;
}
.lightbox-close:hover{ background: rgba(245, 222, 179, 0.12); }
.gallery-grid img{ cursor: zoom-in; }


/* Banner refinements */
.site-header{
  position: relative;
  height: 200px; /* fixed banner height */
}
.banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.55));
  pointer-events: none;
}
.banner a{
  width: 100%;
  height: 100%;
  display: block;
}
.site-header img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* chosen behavior: cover */
  object-position: center;
  display: block;
}

/* Mobile-specific banner crop */
@media (max-width: 520px){
  .site-header img{
    content: url("logo.jpg");
    object-fit: cover;
    object-position: center;
  }
}


/* Banner image refinement: reduce perceived stretching */
.site-header{
  height: 200px;
}

.site-header img{
  width: 100%;
  height: 100%;
  object-fit: contain;       /* prevents elongation */
  object-position: center;
  background: #000;
}

/* On small screens, allow gentle cover to avoid letterboxing */
@media (max-width: 600px){
  .site-header{
    height: 160px;
  }
  .site-header img{
    object-fit: cover;
    object-position: center;
  }
}


/* Banner hover effect (desktop only) */
@media (hover: hover) and (pointer: fine){
  .site-header img{
    transition: transform 220ms ease;
    will-change: transform;
  }
  .banner a:hover img{
    transform: scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce){
  .site-header img{ transition: none !important; }
  .banner a:hover img{ transform: none !important; }
}


/* Hi-DPI mobile banner swap */
@media (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 600px) and (min-resolution: 192dpi){
  .site-header img{
    content: url("logo.jpg");
  }
}


/* ===== Header layout fixes ===== */

/* Ensure the banner never overlaps nav: grid rows size to content */
.page-grid{
  grid-template-rows: auto auto 1fr auto;
}

/* Center banner and keep it responsive */
.site-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  max-height: 200px;
}
.banner a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.site-header img{
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Mobile: reduce banner height so it cannot bleed into nav */
@media (max-width: 600px){
  .site-header{ max-height: 140px; }
  .site-header img{ max-height: 140px; }
}

/* Very small phones: keep the header visible (logo only) but constrain height */
@media (max-width: 360px){
  .site-header{ max-height: 80px; }
  .site-header img{ max-height: 80px; }
}

/* Sticky nav on mobile (helps usability) */
@media (max-width: 600px){
  .nav{
    position: sticky;
    top: 0;
    z-index: 2000;
  }
}

/* ===== Mobile hamburger menu ===== */
.nav-toggle{
  display: none;
  border: 1px solid rgba(245, 222, 179, 0.35);
  background: rgba(0,0,0,0.45);
  color: wheat;
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle:hover{ background: rgba(245, 222, 179, 0.12); }

@media (max-width: 600px){
  .nav-toggle{ display: inline-flex; align-items: center; justify-content:center; }
  .nav-right{ gap: 10px; }
  .nav-links{
    display: none;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
    color:wheat;
  }
  .nav-right.open .nav-links{ display: flex;  color: wheat;}
}


/* Season filter controls */
@media (max-width: 600px){
  form[method="get"] select{
    width: 100%;
    max-width: 260px;
  }
}


/* Join Us button (filled wheat) */
.btn.btn-join{
  background: wheat;
  color: #000;
  border: 1px solid wheat;
}
.btn.btn-join:hover{
  filter: brightness(0.95);
}

/* Join Us buttons either side of sign-in */
.join-sides{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.join-sides-text{
  font-weight: 800;
  letter-spacing: 0.5px;
}
@media (max-width: 600px){
  .join-sides{
    flex-wrap: wrap;
    justify-content: center;
  }
  .join-sides-text{
    width: 100%;
    text-align: center;
    margin: 6px 0;
  }
}


/* Venue image placeholder */
.venue-photo-wrap{
  width: 200px;
  height: 100px;
  margin: 8px 0 14px 0;
  border: 1px solid rgba(245, 222, 179, 0.30);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.venue-photo{
  width: 200px;
  height: 100px;
  object-fit: cover;
  display: block;
}
.venue-photo-placeholder{
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0.8;
}
@media (max-width: 600px){
  .venue-photo-wrap, .venue-photo, .venue-photo-placeholder{
    width: 100%;
    max-width: 320px;
  }
  .venue-photo-wrap{ height: 120px; }
  .venue-photo{ height: 120px; }
  .venue-photo-placeholder{ height: 120px; }
}


/* Large Join Us button under sign-in */
.btn-join-large{
  width: 100%;
  max-width: 320px;
  padding: 16px 24px;
  font-size: 1.2rem;
  font-weight: 800;
  color:black;
  background:white;
}


/* Why Join text */
.why-join{
  margin-top: 10px;
  font-style: italic;
  opacity: 0.85;
  color:white;
}

/* External hyperlinks (absolute URLs / new tab) */
a[href^="http"],
a[target="_blank"]{
  color: wheat;
}

a[href^="http"]:hover,
a[target="_blank"]:hover{
  text-decoration: underline;
}


/* Inline 'Reports' links next to venue/lake headings */
.reports-link{ font-size: 0.9em; margin-left: 10px; }


/* Clickable venue images */
.venue-thumb { cursor: pointer; }



@media (max-width: 600px){
  .site-header img{ height: 40px; }

  .nav{
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    gap: 10px;
  }

  .nav-left{
    justify-content: space-between;
    width: 100%;
  }

  .nav-user{
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-right{
    width: 100%;
  }

  .nav-toggle{
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .nav-links{
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }

  .nav-links .btn,
  .nav-links .btn-ghost{
    width: 100%;
    text-align: center;
    padding: 14px 14px;
    border-radius: 14px;
    font-size: 1rem;
  }

  .content{
    padding: 14px 12px;
  }

  /* Make tables scroll instead of breaking layout */
  .table-wrap{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table{ min-width: 560px; }
}


/* Global dropdown dark grey */
select{
  background-color:#2f2f2f;
  color:#ffffff;
  border:1px solid #555555;
}
select option{
  background-color:#2f2f2f;
  color:#ffffff;
}
select:focus{
  outline:none;
  border-color:#888888;
}


/* Mobile Logo Height Override - Increased x2 */
@media (max-width: 768px) {
    .logo img, img.logo, #logo img {
        height: 120px !important;
    }
}


/* === Homepage === */

.home-hero{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--card-border);
/*  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(245,222,179,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(245,222,179,0.08), transparent 55%),
    linear-gradient(180deg, rgba(245,222,179,0.05), rgba(0,0,0,0.35));*/
  min-height: 360px;
}

.home-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-url);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.02);
  opacity: 0.6;
  transform: scale(1.03);
}

.home-hero::after{
  content:"";
  position:absolute; inset:0;
/*  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);*/
}

.home-hero-inner{
  position: relative;
  padding: 22px;
  display: grid;
  gap: 14px;
  max-width: 720px;
  animation: homeFadeUp 2000ms ease-out both;
}

.home-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 0.95rem;
  color: var(--fg-muted);
}

.home-title{
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
}

.home-lead{
  font-size: 1.05rem;
  color: rgba(245,222,179,0.95);
  margin: 0;
}

.home-cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.home-grid{
  display:grid;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 860px){
  .home-grid{
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.home-features{
  display:grid;
  gap: 10px;
}

.feature{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(245,222,179,0.06);
  animation: homeFadeUp 560ms ease-out both;
}

.feature:nth-child(2){ animation-delay: 60ms; }
.feature:nth-child(3){ animation-delay: 120ms; }
.feature:nth-child(4){ animation-delay: 180ms; }

.feature .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(245,222,179,0.9);
  box-shadow: 0 0 0 4px rgba(245,222,179,0.12);
  flex: 0 0 auto;
}

.feature h3{
  margin: 0 0 4px;
  font-size: 1.05rem;
}
.feature p{
  margin: 0;
}

.lake-cards{
  display:grid;
  gap: 12px;
}

@media (min-width: 720px){
  .lake-cards{
    grid-template-columns: repeat(3, 1fr);
  }
}

.lake-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(245,222,179,0.06);
  min-height: 170px;
  animation: homeFadeUp 560ms ease-out both;
}

.lake-card:nth-child(2){ animation-delay: 80ms; }
.lake-card:nth-child(3){ animation-delay: 160ms; }

.lake-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  opacity: 0.24;
  transform: scale(1.04);
}

.lake-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.78));
}

.lake-card-inner{
  position: relative;
  padding: 14px;
  display: grid;
  gap: 6px;
}

.lake-card h3{
  margin: 0;
  font-size: 1.15rem;
}

.lake-meta{
  font-size: 0.95rem;
  color: var(--fg-muted);
}

.home-section{
  margin-top: 18px;
}

.home-section h2{
  font-size: 1.35rem;
  margin-bottom: 10px;
}

.gallery-preview{
  display:grid;
  gap: 12px;
}

@media (min-width: 720px){
  .gallery-preview{
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-tile{
  position: relative;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(245,222,179,0.06);
  min-height: 140px;
  text-decoration: none;
  color: var(--fg);
  display:block;
  animation: homeFadeUp 560ms ease-out both;
}

.gallery-tile:nth-child(2){ animation-delay: 70ms; }
.gallery-tile:nth-child(3){ animation-delay: 140ms; }

.gallery-tile::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  transform: scale(1.05);
}

.gallery-tile::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.82));
}

.gallery-tile-inner{
  position: relative;
  padding: 14px;
  display: grid;
  gap: 6px;
}

@keyframes homeFadeUp{
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .home-hero-inner, .feature, .lake-card, .gallery-tile{
    animation: none !important;
  }
}


/* === Theme: Light Mode ===
   Default theme is dark (black background, wheat text).
   Set <html data-theme="light"> to enable the overrides below.
*/
:root[data-theme="light"]{
  --bg: #ffffff;
  --fg: #111111;
  --fg-muted: rgba(17, 17, 17, 0.74);
  --card: rgba(0, 0, 0, 0.04);
  --card-border: rgba(0, 0, 0, 0.18);
  --danger: rgba(200, 44, 44, 0.85);
  --ok: rgba(40, 140, 70, 0.85);
}

/* Improve link/button contrast on light */
:root[data-theme="light"] .btn{
  border-color: rgba(0,0,0,0.25);
}
:root[data-theme="light"] a,
:root[data-theme="light"] .href{
  color: #111111;
}
:root[data-theme="light"] .btn.btn-ghost{
  background: transparent;
}
:root[data-theme="light"] .nav{
  background: rgba(0,0,0,0.03);
}
:root[data-theme="light"] .site-top,
:root[data-theme="light"] .site-header{
  background: var(--bg);
}


.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.theme-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--card-border);
  background: var(--fg);
}
:root[data-theme="light"] .theme-dot{ background: #111111; }

/* === Hero Slideshow === */
.home-hero-slideshow{
  /* keep existing hero styling; remove background image pseudo and use actual slider layer */
}

.home-hero-slideshow::before{
  /* disable old background image layer if present */
  background-image: none !important;
  content:"";
  position:absolute; inset:0;
  opacity: 0;
}

.home-hero-slideshow .hero-slideshow{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius: 16px;
}

.home-hero-slideshow .hero-track{
  height: 100%;
  display:flex;
  width: 800%; /* 8 slides */
  transform: translate3d(0,0,0);
  transition: transform 900ms ease-in-out;
}

.home-hero-slideshow .hero-track img{
  width: 12.5%; /* 1/8 */
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
  opacity: 0.55;
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce){
  .home-hero-slideshow .hero-track{ transition: none !important; }
}

/* === Mobile: Hide Logo on Scroll === */
/* === Mobile: Hide Logo on Scroll ===
   Goal: when user scrolls down on small screens, collapse the logo/header and keep nav at top.
*/
@media (max-width: 768px){
  .site-top{ position: sticky; top: 0; z-index: 1000; }
  .site-header{
    transition: max-height 260ms ease, padding 260ms ease, opacity 200ms ease;
    overflow: hidden;
    max-height: 86px; /* default visible */
  }
  .nav{ position: sticky; top: 0; z-index: 1001; }
  /* When collapsed */
  .site-top.is-scrolled .site-header{
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    border-bottom: 0;
  }
}

/* === Header Collapse on Scroll (All Screens) ===
   When .site-top has .is-scrolled, hide the logo/header so nav sits at the top.
*/
.site-header{
  transition: max-height 260ms ease, padding 260ms ease, opacity 200ms ease;
  overflow: hidden;
  max-height: 120px; /* visible state */
}
.site-top.is-scrolled .site-header{
  max-height: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
  border-bottom: 0;
}


/* === Mobile: Force full-size logo ===
   Ensures logo.jpg is displayed at full width on small screens.
   Header height is increased to accommodate the image.
*/
@media (max-width: 768px){
  /* Make header tall enough for full-size logo */
  .site-header{
    max-height: 260px !important; /* visible state */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Force logo image to render full width, natural aspect */
  .site-header img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block;
  }
}