/* =========================================================
   CampSmart — WEB_V3 Global Styles
   MOBILE-FIRST by default, enhanced for tablet/desktop using min-width.
   Assets expected:
   - Assets/Images/hero-hills.svg
   - Assets/Logos/CampSmart_icon.svg
   - Assets/Logos/CampSmart_wordmark.svg (optional)
   ========================================================= */

:root{
  --bg-0:#07120d;          /* deep forest */
  --bg-1:#0b1c13;          /* forest */
  --card:#0e2418;          /* card */
  --card-2:#102a1b;        /* card hover */
  --line:rgba(236,253,245,0.10);

  --text:#ecfdf5;
  --muted:rgba(236,253,245,0.78);

  --accent:#34d399;        /* emerald */
  --accent-amber:#fbbf24;  /* campfire */
  --accent-sky:#60a5fa;    /* optional */

  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 12% -12%, rgba(52,211,153,0.18), transparent 55%),
    radial-gradient(1100px 900px at 90% 0%, rgba(251,191,36,0.12), transparent 62%),
    radial-gradient(900px 700px at 80% 110%, rgba(96,165,250,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{min-height:100%; display:flex; flex-direction:column}
.container{width:min(1100px, calc(100% - 2.2rem)); margin:0 auto}
main{flex:1; padding:1.1rem 0 2.3rem}

/* ---------- Topbar (mobile) ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(7,18,13,0.80);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.topbar-inner{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
  padding:0.95rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.brand img{width:54px; height:54px; border-radius:14px; object-fit:cover; box-shadow:0 10px 22px rgba(0,0,0,0.25); border:1px solid rgba(236,253,245,0.12)}
.brand-title{display:flex; flex-direction:column; line-height:1.1}
.brand-title strong{font-size:1.12rem; letter-spacing:0.2px}
.brand-title span{font-size:0.88rem; color:var(--muted); margin-top:0.15rem}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}
.nav a{
  display:inline-flex;
  align-items:center;
  padding:0.42rem 0.7rem;
  border-radius:999px;
  background:rgba(16,42,27,0.60);
  border:1px solid rgba(236,253,245,0.08);
  color:var(--text);
  font-weight:800;
  font-size:0.92rem;
  text-decoration:none;
}
.nav a:hover{
  text-decoration:none;
  background:rgba(16,42,27,0.85);
  border-color:rgba(52,211,153,0.22);
}

/* ---------- Hero ---------- */
.hero{
  border-radius:var(--radius);
  border:1px solid rgba(236,253,245,0.10);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:
    linear-gradient(135deg, rgba(52,211,153,0.18), rgba(251,191,36,0.10)),
    url("Assets/Images/hero-hills.svg");
  background-size:cover;
  background-position:center;
}
.hero-inner{
  padding:1.15rem 1.05rem;
  background:linear-gradient(90deg, rgba(7,18,13,0.88), rgba(7,18,13,0.20));
}
.hero h1{margin:0 0 0.45rem 0; font-size:1.55rem}
.hero p{margin:0; color:var(--muted); max-width:60ch}

.hero-cta{
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  margin-top:1rem;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.55rem;
}
.pill{
  padding:0.35rem 0.6rem;
  border-radius:999px;
  border:1px solid rgba(236,253,245,0.10);
  background:rgba(16,42,27,0.55);
  font-size:0.88rem;
  font-weight:850;
}

/* ---------- Sections / Cards ---------- */
.section{
  margin-top:1.2rem;
  padding:1.1rem 1rem;
  background:rgba(14,36,24,0.72);
  border:1px solid rgba(236,253,245,0.10);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.section h2{margin:0 0 0.75rem 0}
.section h3{margin:0 0 0.45rem 0}
.meta{color:var(--muted); font-size:0.92rem; margin-top:0.35rem}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}

.card{
  padding:1.05rem;
  background:rgba(16,42,27,0.65);
  border:1px solid rgba(236,253,245,0.10);
  border-radius:var(--radius);
  box-shadow:0 18px 28px rgba(0,0,0,0.30);
}
.card p{margin:0; color:var(--muted)}
.card-actions{
  margin-top:0.95rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.65rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:0.4rem;
  padding:0.65rem 0.9rem;
  border-radius:12px;
  font-weight:950;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
}
.btn-primary{
  background:var(--accent);
  color:#052011;
}
.btn-primary:hover{filter:brightness(1.05); text-decoration:none}
.btn-ghost{
  background:rgba(16,42,27,0.55);
  color:var(--text);
  border-color:rgba(236,253,245,0.12);
}
.btn-ghost:hover{
  background:rgba(16,42,27,0.80);
  border-color:rgba(52,211,153,0.20);
  text-decoration:none;
}

/* ---------- Callout ---------- */
.callout{
  margin-top:1rem;
  padding:0.9rem 0.95rem;
  border-radius:var(--radius);
  background:rgba(16,42,27,0.55);
  border:1px solid rgba(52,211,153,0.22);
  color:var(--text);
}

/* ---------- Forms / Tables (basic, mobile-first) ---------- */
label{font-weight:850}
input,select,textarea{
  width:100%;
  padding:0.7rem 0.8rem;
  border-radius:12px;
  border:1px solid rgba(236,253,245,0.14);
  background:rgba(16,42,27,0.70);
  color:var(--text);
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(52,211,153,0.35);
}

.table-scroll{
  width:100%;
  overflow:auto;
  border-radius:var(--radius);
  border:1px solid rgba(236,253,245,0.10);
  background:rgba(14,36,24,0.60);
}
table{width:100%; border-collapse:collapse}
th,td{
  padding:0.8rem;
  border-bottom:1px solid rgba(236,253,245,0.08);
  vertical-align:top;
}
th{text-align:left; font-size:0.92rem; color:rgba(236,253,245,0.92)}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  background:rgba(7,18,13,0.70);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  padding:1rem 0;
  color:var(--muted);
  font-size:0.92rem;
}

/* =========================================================
   Enhancements (Tablet / Desktop)
   ========================================================= */

/* Tablet (≥ 720px) */
@media (min-width:720px){
  
  .brand img{width:62px; height:62px; border-radius:16px}
main{padding:1.35rem 0 2.8rem}
  .topbar-inner{flex-direction:row; align-items:center; justify-content:space-between}
  .brand img{width:38px; height:38px}
  .hero-inner{padding:1.55rem 1.35rem}
  .hero h1{font-size:1.9rem}
  .hero-cta{flex-direction:row}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .footer-inner{flex-direction:row; align-items:center; justify-content:space-between}
}

/* Desktop (≥ 1024px) */
@media (min-width:1024px){
  .grid{grid-template-columns:repeat(3, 1fr)}
  .nav a{font-size:0.95rem}
}