/*
  Website and Code by Anthony J. Hedge
  Ladoga, IN — Created on 09/14/2025
  © 2025 Historic Ladoga. All rights reserved.
*/

/* ===== Resets ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* ===== 16:9 main hero image ===== */
.main-hero {
  width: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* ===== Responsive map container ===== */
.map-embed-wrap { position: relative; width: 100%; margin: 16px 0; }
.map-embed-wrap::before { content: ""; display: block; padding-top: 56.25%; }
.map-embed-wrap > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 8px;
}

/* ===== CSS Variables ===== */
:root{
  --ws-bg: #ffffff;
  --ws-text: #222;
  --ws-accent: #1e86ff;
  --ws-accent-2: #0b5ed7;
  --ws-border: #e9ecef;

  /* Header/logo sizing */
  --ws-logo-h: clamp(40px, 5.5vw, 60px);
  --ws-logo-maxw: clamp(100px, 38vw, 300px);
}

/* ===== Header / Nav ===== */
.ws-header{
  position: sticky; top: 0; z-index: 1000;
  background: var(--ws-bg);
  border-bottom: 1px solid var(--ws-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ws-header .ws-wrap{
  max-width: 1100px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
.ws-logo{
  display: flex; align-items: center;
  height: var(--ws-logo-h);
  max-width: var(--ws-logo-maxw);
  flex: 0 1 var(--ws-logo-maxw);  /* allow shrinking */
  min-width: 0;
  color: var(--ws-text); text-decoration: none;
  overflow: visible;
}
/* Make any logo image (with or without background) fit, no cropping */
.ws-logo picture,
.ws-logo img{
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
header img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0); /* forces GPU compositing, sharper edges */
}
.ws-nav{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ws-nav a{
  text-decoration: none; color: var(--ws-text);
  padding: 8px 12px; border-radius: 8px; font-weight: 500;
}
.ws-nav a:hover{ color: var(--ws-accent); background: rgba(30,134,255,.06); }

/* Burger */
.ws-burger{
  display: none; width: 38px; height: 38px;
  border: 1px solid var(--ws-border);
  border-radius: 8px; background: #fff;
  align-items: center; justify-content: center; cursor: pointer;
}
.ws-burger span{ display:block; width:20px; height:2px; background:#555; position:relative; }
.ws-burger span::before, .ws-burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#555;
}
.ws-burger span::before{ top:-6px; } .ws-burger span::after{ top:6px; }

/* Mobile nav */
@media (max-width: 900px){
  .ws-nav{
    display: none; position: absolute; left: 0; right: 0;
    top: calc(var(--ws-logo-h) + 24px);
    background: #fff; border-bottom: 1px solid var(--ws-border);
    padding: 10px 16px; flex-direction: column; gap: 4px;
  }
  .ws-nav.ws-open{ display: flex; }
  .ws-burger{ display: flex; margin-left: auto; }
}

/* Anchor offset under sticky header */
body{ scroll-padding-top: calc(var(--ws-logo-h) + 24px); }

/* ===== Optional “site-nav” (pill buttons) ===== */
.site-nav{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:16px 0; }
.site-nav a{ text-decoration:none; }
.site-nav .btn{
  padding:10px 14px; border:1px solid #ddd; border-radius:999px;
  font-size:14px; line-height:1; cursor:pointer; display:inline-block; background:#fff;
}
.site-nav .btn--current{ font-weight:700; border-color:#aaa; }

/* ===== Dark Mode ===== */
[data-theme="dark"]{
  --ws-bg: #121212;
  --ws-text: #f1f1f1;
  --ws-accent: #4dabf7;
  --ws-accent-2: #339af0;
  --ws-border: #333;
  background-color: var(--ws-bg);
  color: var(--ws-text);
}
html, body, .card, .ws-header, .ws-nav, .site-nav .btn, footer{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Header/containers */
[data-theme="dark"] .ws-header,
[data-theme="dark"] .ws-nav,
[data-theme="dark"] .site-nav .btn,
[data-theme="dark"] .card,
[data-theme="dark"] footer{
  background-color: var(--ws-bg);
  color: var(--ws-text);
  border-color: var(--ws-border);
}

/* Links */
[data-theme="dark"] a{ color: var(--ws-accent); }
[data-theme="dark"] a:hover{ color: var(--ws-accent-2); }

/* Nav hover + burger lines */
[data-theme="dark"] .ws-nav a:hover{ background-color: rgba(77,171,247,0.1); }
[data-theme="dark"] .ws-burger span,
[data-theme="dark"] .ws-burger span::before,
[data-theme="dark"] .ws-burger span::after{ background: var(--ws-text); }

/* Cards, forms, lists */
[data-theme="dark"] .card{ background-color:#1c1f26; border-color:var(--ws-border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .list-group-item{
  background-color:#2a2d34; color:var(--ws-text); border-color:var(--ws-border);
}

/* Alerts */
[data-theme="dark"] .alert{ background-color:#242730; color:var(--ws-text); border-color:var(--ws-border); }
[data-theme="dark"] .alert-warning{ background-color:#333; color:#ffcd39; }

/* Utilities / wrappers */
[data-theme="dark"] .bg-dark{ background-color:#1a1a1a !important; }
[data-theme="dark"] .text-light{ color:#ccc !important; }
html[data-theme="dark"], body[data-theme="dark"], [data-theme="dark"] body{
  background-color: var(--ws-bg);
  color: var(--ws-text);
}
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] main, [data-theme="dark"] section{
  background: transparent; color: var(--ws-text);
}
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .card.bg-white,
[data-theme="dark"] .card.bg-light{
  background-color:#1c1f26 !important; color:var(--ws-text) !important;
}
[data-theme="dark"] .text-muted{ color:#a9b2c0 !important; }
[data-theme="dark"] .text-dark{ color:var(--ws-text) !important; }
[data-theme="dark"] hr, [data-theme="dark"] .border, [data-theme="dark"] .table, [data-theme="dark"] .table *{
  border-color: var(--ws-border) !important;
}
[data-theme="dark"] .table{ background-color:transparent !important; color:var(--ws-text) !important; }
[data-theme="dark"] .dropdown-menu, [data-theme="dark"] .modal-content, [data-theme="dark"] .popover{
  background-color:#1c1f26 !important; color:var(--ws-text) !important; border-color:var(--ws-border) !important;
}

/* ===== Theme Toggle ===== */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap;
}
.ws-theme{ display:flex; align-items:center; gap:10px; margin-left:10px; }
@media (max-width:600px){ .ws-theme .theme-label{ display:none; } }
.theme-toggle-btn{
  position:relative; width:56px; height:28px; border-radius:999px;
  background:#c7c7c7; box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
  cursor:pointer; display:inline-block; transition: background-color .25s ease;
}
.theme-toggle-btn .thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition: transform .25s ease;
}
#theme-toggle:checked + .theme-toggle-btn{ background: var(--ws-accent, #4dabf7); }
#theme-toggle:checked + .theme-toggle-btn .thumb{ transform: translateX(28px); }
[data-theme="dark"] .theme-label{ color: var(--ws-text); }
/* ===== iOS/mobile fixes: show label + bigger tap targets ===== */

/* 1) Always show the Light/Dark text (it was hidden under 600px) */
.ws-theme .theme-label{
  display: inline !important;
  white-space: nowrap;
  font-size: 14px;
  margin-left: 6px;
}

/* 2) Larger, easier-to-tap switch */
.theme-toggle-btn{
  width: 64px;   /* was 56 */
  height: 34px;  /* was 28 */
}
.theme-toggle-btn .thumb{
  width: 28px;   /* was 24 */
  height: 28px;
  top: 3px; left: 3px;
}
#theme-toggle:checked + .theme-toggle-btn .thumb{
  /* 64 - (3 left + 28 thumb + 3 right) = 30 */
  transform: translateX(30px);
}

/* 3) Larger hamburger (Apple HIG: ≥44x44pt) */
:root{ --tap-target: 60px; }  /* easy to change later */
.ws-burger{
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.ws-burger span{
  width: 24px;  /* thicker/longer lines for retina */
  height: 3px;
}
.ws-burger span::before,
.ws-burger span::after{
  width: 24px;
  height: 3px;
}
.ws-burger span::before{ top: -7px; }
.ws-burger span::after{  top:  7px; }

/* 4) Keep header tidy on phones */
.ws-wrap{ gap: 10px; }
.ws-theme{ gap: 8px; }

/* Optional: if the header ever gets too tight under 360px, hide the word "mode" only */
@media (max-width: 360px){
  .ws-theme .theme-label{ font-size: 13px; }
  .ws-theme .theme-label::after{ content: ""; } /* leaves just "Light" / "Dark" */
}
/* ===== iOS Safari: Google Maps overlapping footer ===== */
.map-embed-wrap{
  position: relative;           /* ensures a local stacking context */
  z-index: 0;                   /* baseline below the footer */
  overflow: hidden;             /* clip any iframe bleed */
  border-radius: 12px;          /* keeps rounded corners clean on iOS */
  margin-bottom: 24px;          /* space before footer */
}
.map-embed-wrap > iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 0;                   /* do NOT float above siblings */
  transform: translateZ(0);     /* prevents iOS paint glitches */
  -webkit-transform: translateZ(0);
}
/* Make sure the footer always paints above the map */
footer{
  position: relative;
  z-index: 5;
  /* nice on iPhones with the bottom bar / home indicator */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: inherit;          /* keep dark/light theme background */
}