/* =========================================================
   Deer Run POA — site.css (FULL FILE REPLACEMENT)
   GOAL: Mobile (Bootstrap) matches Desktop (Tailwind) theme:
   - dark base
   - glass surfaces
   - brass accents
   - muted slate text
   - zero horizontal scroll / no right-side margin
   ========================================================= */

/* ---------------------------
   Theme Variables
--------------------------- */
:root{
  --dr-ink:#0b1220;
  --dr-slate:#0f172a;
  --dr-deep:#020617;
  --dr-accent:#c7a15a;       /* brass */
  --dr-accent2:#6aa3a0;      /* lake */
  --dr-border:rgba(148,163,184,.18);

  --dr-glass-1:rgba(15,23,42,.72);
  --dr-glass-2:rgba(2,6,23,.72);

  --dr-text:#e2e8f0;
  --dr-text-dim:rgba(226,232,240,.78);

  --dr-radius-lg:24px;
  --dr-radius-md:18px;
  --dr-radius-sm:14px;

  --dr-shadow-strong:0 20px 55px rgba(0,0,0,.35);
  --dr-shadow-soft:0 16px 40px rgba(2,6,23,.18);
}

/* ---------------------------
   Global Resets / Anti-overflow
--------------------------- */
*{ box-sizing:border-box; }
html, body{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-height:100%;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--dr-ink);
  color:var(--dr-text);
}

/* Media elements never exceed viewport */
img, svg, video, canvas, iframe{
  max-width:100%;
  height:auto;
  display:block;
}
iframe{ border:0; }

/* Links */
a{ color:inherit; }
a:hover{ text-decoration:none; }

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; background:#fff; color:#000;
  z-index:9999; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* ---------------------------
   Sticky Header
--------------------------- */
.dr-header{ position:sticky; top:0; z-index:50; }

/* ---------------------------
   Shared UI bits (Tailwind-mode)
--------------------------- */
.dr-navlink{
  padding:.55rem .85rem;
  border-radius:999px;
  font-size:.875rem;
  color:rgba(226,232,240,.88);
  border:1px solid transparent;
  transition:all .18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.1;
}
.dr-navlink:hover{
  border-color:var(--dr-border);
  background:rgba(15,23,42,.6);
}
.dr-navlink-active{
  background:rgba(199,161,90,.12);
  border-color:rgba(199,161,90,.35);
  color:#fff;
}

.dr-btn{
  padding:.55rem .85rem;
  border-radius:12px;
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.6);
  color:var(--dr-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.dr-btn:hover{ filter:brightness(1.08); }

.dr-btn-primary{
  padding:.85rem 1.1rem;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(199,161,90,.95), rgba(199,161,90,.78));
  color:#0b1220;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(199,161,90,.45);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  transition:transform .12s ease, filter .12s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.dr-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.03); }

.dr-btn-secondary{
  padding:.85rem 1.1rem;
  border-radius:14px;
  background:rgba(15,23,42,.65);
  color:var(--dr-text);
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--dr-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.dr-btn-secondary:hover{ filter:brightness(1.08); }

/* ---------------------------
   Hero / Banner
--------------------------- */
.dr-hero{
  background-size:cover;
  background-position:center;
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.dr-hero-overlay{
  background:linear-gradient(90deg, rgba(2,6,23,.92), rgba(2,6,23,.66), rgba(2,6,23,.25));
  min-height:420px;
}
.dr-hero-panel{
  border:1px solid var(--dr-border);
  background:linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.60));
  border-radius:var(--dr-radius-lg);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}

/* Desktop/neutral “glass card” (reusable) */
.dr-glass{
  border:1px solid var(--dr-border);
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.72));
  border-radius:var(--dr-radius-lg);
  box-shadow:var(--dr-shadow-strong);
}

/* Headings kicker */
.dr-kicker{
  letter-spacing:.16em;
  font-weight:800;
  font-size:.72rem;
  opacity:.92;
  color:var(--dr-accent);
  text-transform:uppercase;
}

/* ---------------------------
   Cards (default: dark glass)
--------------------------- */
.dr-card{
  border:1px solid var(--dr-border);
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.72));
  border-radius:22px;
  box-shadow:var(--dr-shadow-strong);
}
.dr-card-title{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.01em;
}
.dr-pagehead{ margin-bottom:8px; }

/* Pills */
.dr-pill{
  font-size:.75rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(199,161,90,.35);
  background:rgba(199,161,90,.10);
  color:#f8fafc;
  white-space:nowrap;
}

/* Forms (Tailwind style inputs) */
.dr-label{
  display:block;
  font-size:.875rem;
  color:rgba(226,232,240,.92);
  margin-bottom:.35rem;
  font-weight:700;
}
.dr-input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.55);
  color:var(--dr-text);
  padding:.75rem .9rem;
  outline:none;
  line-height:1.25;
}
.dr-input:focus{
  border-color:rgba(199,161,90,.55);
  box-shadow:0 0 0 3px rgba(199,161,90,.18);
}

/* Alerts */
.dr-alert{
  border-radius:16px;
  padding:12px 14px;
  border:1px solid var(--dr-border);
}
.dr-alert-ok{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.35);
  color:#eafff0;
}
.dr-alert-bad{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.32);
  color:#ffecec;
}

/* ---------------------------
   Gallery / thumbs
--------------------------- */
.dr-thumb{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.45);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  transition:transform .12s ease;
  text-decoration:none;
}
.dr-thumb:hover{ transform:translateY(-2px); }
.dr-thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

/* Lightbox */
.dr-lightbox{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.86);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.dr-lightbox-inner{
  max-width:min(1100px, 96vw);
  width:100%;
}
.dr-lightbox-img{
  width:100%;
  max-height:80vh;
  object-fit:contain;
  border-radius:18px;
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.55);
}
.dr-lightbox-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
  color:var(--dr-text);
  font-size:.9rem;
}
.dr-lightbox-close{
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.6);
  color:var(--dr-text);
  border-radius:12px;
  padding:.5rem .75rem;
}

/* Ticker */
.dr-ticker{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dr-ticker-item{
  padding:.6rem .75rem;
  border-radius:14px;
  border:1px solid var(--dr-border);
  background:rgba(15,23,42,.45);
  width:100%;
  max-width:100%;
}

/* =========================================================
   BOOTSTRAP MODE — MAKE IT LOOK LIKE DESKTOP (GLASS THEME)
   The trick: your PHP body class will include "dr-bootstrap".
   Everything below scopes to .dr-bootstrap so it won’t affect desktop.
   ========================================================= */

.dr-bootstrap{
  background:var(--dr-ink) !important;
  color:var(--dr-text) !important;
}

/* Override Bootstrap muted colors in dark theme */
.dr-bootstrap .text-muted,
.dr-bootstrap .text-secondary,
.dr-bootstrap .text-body-secondary{
  color:rgba(226,232,240,.72) !important;
}

/* Header / navbar becomes translucent glass like desktop */
.dr-bootstrap .navbar{
  background:rgba(2,6,23,.70) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--dr-border) !important;
}
.dr-bootstrap .navbar-brand,
.dr-bootstrap .nav-link{
  color:rgba(226,232,240,.92) !important;
}
.dr-bootstrap .nav-link.active{
  color:#fff !important;
}
.dr-bootstrap .navbar-toggler{
  border:1px solid var(--dr-border) !important;
}
.dr-bootstrap .navbar-toggler-icon{
  filter:invert(1) saturate(0) brightness(1.1);
}

/* Footer glass */
.dr-bootstrap footer{
  background:rgba(2,6,23,.70) !important;
  border-top:1px solid var(--dr-border) !important;
  color:rgba(226,232,240,.72) !important;
}

/* Bootstrap cards become glass panels (not white) */
.dr-bootstrap .dr-card{
  background:linear-gradient(180deg, rgba(15,23,42,.72), rgba(2,6,23,.72)) !important;
  border:1px solid var(--dr-border) !important;
  color:var(--dr-text) !important;
  box-shadow:var(--dr-shadow-strong) !important;
}
.dr-bootstrap .dr-card-title{ color:#fff !important; }

/* Bootstrap hero card should NOT be white; make it glass like desktop */
.dr-bootstrap .dr-hero-card{
  background:linear-gradient(180deg, rgba(2,6,23,.78), rgba(2,6,23,.60)) !important;
  border:1px solid var(--dr-border) !important;
  color:var(--dr-text) !important;
  border-radius:var(--dr-radius-lg) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.45) !important;
}

/* Bootstrap buttons to match desktop */
.dr-bootstrap .btn-dark{
  background:linear-gradient(180deg, rgba(199,161,90,.95), rgba(199,161,90,.78)) !important;
  border-color:rgba(199,161,90,.45) !important;
  color:#0b1220 !important;
  font-weight:800 !important;
}
.dr-bootstrap .btn-outline-dark{
  border-color:var(--dr-border) !important;
  color:rgba(226,232,240,.92) !important;
  background:rgba(15,23,42,.55) !important;
}
.dr-bootstrap .btn-outline-dark:hover{
  filter:brightness(1.08);
}

/* Bootstrap alerts on dark theme */
.dr-bootstrap .alert{
  border-radius:16px;
  border:1px solid var(--dr-border);
}
.dr-bootstrap .alert-success{
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.35) !important;
  color:#eafff0 !important;
}
.dr-bootstrap .alert-danger{
  background:rgba(239,68,68,.10) !important;
  border-color:rgba(239,68,68,.32) !important;
  color:#ffecec !important;
}

/* Bootstrap forms on dark theme */
.dr-bootstrap .form-label{ color:rgba(226,232,240,.92) !important; font-weight:700; }
.dr-bootstrap .form-control,
.dr-bootstrap .form-select{
  background:rgba(15,23,42,.55) !important;
  border:1px solid var(--dr-border) !important;
  color:rgba(226,232,240,.92) !important;
  border-radius:14px !important;
}
.dr-bootstrap .form-control:focus,
.dr-bootstrap .form-select:focus{
  border-color:rgba(199,161,90,.55) !important;
  box-shadow:0 0 0 3px rgba(199,161,90,.18) !important;
}

/* =========================================================
   MOBILE SIZING (works for Bootstrap + general)
   ========================================================= */
@media (max-width: 575.98px){
  .dr-hero{ min-height:360px; }
  .dr-hero-overlay{ min-height:360px; }

  .dr-bootstrap .navbar-brand{ font-size:1rem !important; }
  .dr-bootstrap .nav-link{ padding:.45rem .65rem !important; font-size:.95rem !important; }

  .dr-bootstrap .dr-hero-card{
    padding:1rem !important;
    border-radius:18px !important;
  }

  .dr-bootstrap .display-6{ font-size:1.55rem !important; }
  .dr-bootstrap .lead{ font-size:1rem !important; line-height:1.45 !important; }

  .dr-bootstrap .btn-lg{
    padding:.6rem .9rem !important;
    font-size:1rem !important;
  }

  /* Prevent iOS input zoom */
  input, select, textarea{ font-size:16px; }

  .dr-thumb img{ height:150px; }
}

/* =========================================================
   Optional tap highlight removal
   ========================================================= */
.dr-navlink, .dr-btn, .dr-btn-primary, .dr-btn-secondary, .dr-thumb{
  -webkit-tap-highlight-color:transparent;
}