/* Simple, lightweight styles for the Cookley Scouts landing page */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --accent:#25b755;
  --accent-dark:#225f38;
  --muted:#55666a;
  --shadow: #909090;
  --hover: #e3e3e3;
  --container-width:1100px;
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Helvetica Neue",Arial;
  color:#163129;
  background: white;
  line-height:1.5;
  font-size:16px;
}

main {
    padding-left: 1rem;
}

a:link {
  color: var(--accent);
}

/* visited link */
a:visited {
  color: var(--accent);
}

/* mouse over link */
a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* selected link */
a:active {
  color: var(--accent-dark);
}

.container{
  width:90%;
  max-width:var(--container-width);
  padding:2rem 0;
}

/* Header */
.site-header{
  background:var(--accent);
  border-bottom:1px solid rgba(20,20,20,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{display:flex;align-items:center;gap:0.9rem}
.brand h1{
  margin:0;font-size:1.05rem;letter-spacing:0.4px;
}
.subtitle{margin:0;font-size:0.85rem;color:var(--muted)}

/* Nav */
.main-nav a{
  color: white;
  text-decoration:none;
  margin-left:1rem;
  font-weight:600;
}
.main-nav a:hover{text-decoration: underline;}


/* Buttons */
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  border:0;
  cursor:pointer;
}
.btn.primary{
  background:var(--accent);
  color:white;
  box-shadow: 0 6px 18px rgba(42,143,77,0.16);
}
.btn.primary:hover{background:var(--accent-dark)}
.btn.secondary{
  background:transparent;
  border:2px solid rgba(34,95,56,0.12);
  color:var(--accent-dark);
}

/* Sections */
.about, .sections, .contact{background:transparent;margin:1.25rem 0;padding:1rem 0}
.sections .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1rem;
}

.card{
  background:var(--card);
  border-radius:10px;
  padding:1rem;
  box-shadow:0 6px 18px var(--shadow);
}
.card h4{margin:.2rem 0 .5rem}
.card p{margin:0;color:var(--muted)}

/* Contact */
.small{font-size:.9rem;color:var(--muted)}

/* Footer */
.site-footer{
  margin-top:2rem;
  padding:1rem 0;
  border-top:1px solid rgba(20,20,20,0.04);
}
.footer-inner{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}

/* Responsive */
@media (max-width:800px){
  .header-inner{flex-direction:column;align-items:flex-start}
  .main-nav{align-self:stretch}
  .sections .grid{grid-template-columns:repeat(1,1fr)}
  .badge{width:48px;height:48px}
  .hero{padding:2rem 1rem}
  .brand h1{font-size:1rem}
}