/* GS Campers - site stylesheet
   Improved from user-provided CSS: variables, better layout utilities, accessible focus styles,
   camper card grid, and responsive tweaks.
*/

:root{
  /* color palette */
  --bg: #f9fafb;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #065f46; /* deep teal */
  --accent: #e0f2f1;
  --white: #ffffff;
  --radius: 12px;
  --container-max: 1100px;
  --gap: 1rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Utilities */
.container{max-width:var(--container-max);margin:0 auto;padding:0 1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

header{background:var(--brand);color:var(--white);padding:2.25rem 1rem;text-align:center}
header h1{font-size:2.25rem;margin-bottom:.25rem}
header p{font-size:1.05rem;opacity:.95}

/* Hero */
section.hero{position:relative;padding:3rem 1rem;min-height:60vh;display:flex;align-items:center;justify-content:center;color:var(--white)}
section.hero::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:1}
.hero-overlay{position:relative;z-index:2;background-color:rgba(0,0,0,0.55);padding:2rem;border-radius:var(--radius);max-width:95%}
.hero h2{font-size:2.25rem;margin-bottom:1rem;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.hero p{font-size:1.1rem;max-width:680px;margin:0 auto;text-shadow:0 2px 6px rgba(0,0,0,0.5)}

/* Info section */
section.info{padding:3rem 1rem}
.info .lead{max-width:var(--container-max);margin:0 auto 1.5rem;color:var(--text)}
.info h3{font-size:1.6rem;margin-bottom:.75rem;color:var(--brand)}
.info p{font-size:1rem;margin-bottom:1rem;color:var(--text)}

.notify{background:var(--accent);padding:1.5rem;border-radius:var(--radius);text-align:center}
.notify form{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.notify input[type="email"]{padding:.8rem;border:1px solid #d1d5db;border-radius:8px;width:320px;max-width:100%}
.notify button{padding:.8rem 1.25rem;background:var(--brand);color:var(--white);border:none;border-radius:8px;cursor:pointer}
.notify button:hover{filter:brightness(.95)}
.notify input[type="email"]:focus,.notify button:focus{outline:3px solid rgba(6,95,70,0.18);outline-offset:2px}

/* Camper cards grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:var(--white);border-radius:12px;padding:1rem;box-shadow:0 6px 18px rgba(15,23,42,0.06);display:flex;flex-direction:column;min-height:120px}
.card h4{margin-bottom:.5rem;color:var(--brand)}
.card p{flex:1;color:var(--muted)}
.card .price{font-weight:700;color:var(--text);margin-top:.75rem}

footer{text-align:center;padding:2rem 1rem;background:#f1f5f9;color:var(--muted);font-size:.95rem}

/* responsive */
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  header h1{font-size:1.75rem}
  .hero h2{font-size:1.6rem}
  .hero p{font-size:1rem;padding:0 1rem}
  .cards{grid-template-columns:1fr}
  .notify form{flex-direction:column}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Helpers for hero background injection from template */
.hero-bg-inline{background-size:cover;background-position:center}