/* surfspots.css - stijl afgestemd op WannaSurf.nl */
:root{
  --color-primary:#105ebb;/* blauw uit huisstijl */
  --color-accent:#ff8b00; /* oranje accent */
  --color-text:#1a1a1a;
  --color-bg:#ffffff;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max-width:960px;
}

*,*::before,*::after{box-sizing:border-box;}

header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #34495e;
}

.headerlink {
  color: #ecf0f1;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  padding-left: 20px;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}

/* ===== Hero & navigatie ===== */
.hero picture{display:block;position:relative;}
.hero img{width:100%;height:auto;max-height:70vh;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3),rgba(0,0,0,.55));pointer-events:none;}

.main-nav,.province-nav{background:#fff;border-bottom:1px solid #e5e5e5;}
.main-nav ul,.province-nav ul{margin:0;padding:.5rem 1rem;list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;}
.main-nav a,.province-nav a{text-decoration:none;color:var(--color-text);font-weight:600;}
.main-nav a.active,.main-nav a:hover,.province-nav a:hover{color:var(--color-primary);border-bottom:2px solid var(--color-primary);}  

/* ===== Layout ===== */
#content{max-width:var(--max-width);margin-inline:auto;padding:2rem 1rem;display:grid;gap:2rem;grid-template-columns:1fr 280px;}
@media(max-width:900px){#content{grid-template-columns:1fr}.sidebar{order:-1}}

h1,h2,h3{font-weight:700;color:var(--color-primary);}
h1{font-size:clamp(2rem,4vw,2.75rem);}  

/* ===== Spot-cards ===== */
.spot-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.spot-list li{border:1px solid #e1e1e1;border-radius:.75rem;background:#fafafa;padding:1rem;transition:transform .2s,box-shadow .2s;}
.spot-list li:hover{transform:translateY(-4px);box-shadow:0 6px 15px rgba(0,0,0,.06);}
.spot-list h3{margin:.25rem 0 .5rem;font-size:1.15rem;}
.spot-list p{margin:0;font-size:.9rem;}

/* ===== FAQ details ===== */
details summary{cursor:pointer;font-weight:600;position:relative;padding-left:1.2rem;}
details summary::before{content:"▶";position:absolute;left:0;transition:transform .2s;}
details[open] summary::before{transform:rotate(90deg);}

details{border:1px solid #e1e1e1;border-radius:.5rem;padding:.75rem 1rem;background:#fefefe;margin-bottom:.75rem;}

/* ===== Sidebar ===== */
.sidebar{border:1px solid #e1e1e1;border-radius:.75rem;background:#fafafa;padding:1rem;}
.sidebar h2{margin-top:0;font-size:1.1rem;}

/* ===== Footer ===== */
footer{background:#f8f8f8;text-align:center;padding:2rem 1rem;font-size:.85rem;}
footer a{color:var(--color-primary);}  

a{transition:color .2s;}
a:hover{color:var(--color-accent);}