/* inzevenbergen.nl homepage – volgt XenForo style variations.
   Extern CSS: gebruik CSS custom properties die XenForo in de actieve stijl aanbiedt.
   Fallbacks zijn bedoeld voor installaties waar een property niet bestaat. */
.iz-home{
  --iz-bg:var(--xf-contentBg,Canvas);
  --iz-alt:var(--xf-contentAltBg,var(--iz-bg));
  --iz-text:var(--xf-textColor,CanvasText);
  --iz-muted:var(--xf-textColorMuted,var(--iz-text));
  --iz-border:var(--xf-borderColor,color-mix(in srgb,var(--iz-text) 20%,transparent));
  --iz-link:var(--xf-linkColor,#2377b4);
  display:grid;gap:1rem;color:var(--iz-text);min-width:0;
}
.iz-home *{box-sizing:border-box}
.iz-home a{color:var(--iz-link)}
.iz-home a:focus-visible,.iz-home button:focus-visible{outline:3px solid var(--iz-link);outline-offset:3px}
.iz-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);gap:1.2rem;align-items:center;padding:clamp(1.25rem,3.8vw,2.5rem);border-radius:1.15rem;color:#fff;background:linear-gradient(120deg,#103b60,#12618c 68%,#157d8c)}
.iz-kicker{display:block;font-size:.76rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase;opacity:.85}
.iz-hero h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;margin:.55rem 0 .75rem;color:inherit}
.iz-lead{max-width:62ch;font-size:1.06rem;line-height:1.65;color:#f0f7fb}
.iz-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.iz-btn{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:.65rem .95rem;border-radius:.65rem;font-weight:750;text-decoration:none!important}
.iz-home .iz-btn--primary{background:#f5ce66;color:#173951}
.iz-home .iz-btn--light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff}
.iz-home .iz-btn--outline{border:1px solid var(--iz-border);color:var(--iz-text);background:var(--iz-bg)}
.iz-heroVisual{position:relative;display:flex;min-height:220px;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;padding:1.1rem;border:1px solid rgba(255,255,255,.22);border-radius:1rem;background:radial-gradient(circle at 55% 50%,rgba(255,255,255,.18),transparent 65%),rgba(255,255,255,.06)}
.iz-heroVisual__label,.iz-heroVisual__caption{font-weight:700;text-align:center;font-size:.85rem}
.iz-heroVisual__mark{display:grid;place-items:center;width:125px;height:125px;border:2px solid rgba(255,255,255,.55);border-radius:50%;font-size:5rem;font-weight:900;line-height:1}
.iz-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.iz-quickCard{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1rem;min-height:145px;border:1px solid var(--iz-border);border-radius:.9rem;background:var(--iz-bg);text-decoration:none!important;color:var(--iz-text)!important}
.iz-quickCard:hover,.iz-place:hover{border-color:var(--iz-link)}
.iz-quickCard__icon{font-size:1.55rem;color:var(--iz-link)}
.iz-quickCard strong{font-size:1.04rem}
.iz-quickCard span:not(.iz-quickCard__icon){font-size:.85rem;color:var(--iz-muted)}
.iz-quickCard b{position:absolute;right:1rem;top:1rem;color:var(--iz-link)}
.iz-panel{padding:clamp(1rem,2.3vw,1.5rem);border:1px solid var(--iz-border);border-radius:1rem;background:var(--iz-bg);scroll-margin-top:1rem}
.iz-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.05rem}
.iz-heading h2,.iz-community h2{font-size:clamp(1.45rem,2.5vw,2.15rem);margin:.25rem 0 .2rem}
.iz-heading>p{max-width:39ch;color:var(--iz-muted);margin:0}
.iz-introGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem;align-items:start}
.iz-introGrid p:first-child{margin-top:0}
.iz-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.iz-facts>div{padding:.85rem .5rem;text-align:center;border-radius:.75rem;background:var(--iz-alt);border:1px solid var(--iz-border)}
.iz-facts strong{display:block;font-size:1.65rem;color:var(--iz-link)}
.iz-facts span{font-size:.78rem;color:var(--iz-muted)}
.iz-placeGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.iz-place{padding:1rem;border:1px solid var(--iz-border);border-radius:.85rem;background:var(--iz-alt)}
.iz-place h3{margin:.1rem 0 .4rem;font-size:1.05rem}
.iz-place p{font-size:.85rem;color:var(--iz-muted);margin:0}
.iz-place a{display:inline-block;margin-top:.6rem;font-size:.83rem;font-weight:700}
.iz-place--featured{border-color:var(--iz-link)}
.iz-place__eyebrow{display:inline-block;margin-bottom:.4rem;color:var(--iz-link);font-size:.75rem;font-weight:800;text-transform:uppercase}
.iz-note,.iz-footnote{font-size:.82rem;color:var(--iz-muted)}
.iz-note{margin:1rem 0 0}
.iz-storyGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.iz-story{padding:1rem;border:1px solid var(--iz-border);border-radius:.85rem;background:var(--iz-alt)}
.iz-story__index{font-weight:900;color:var(--iz-link)}
.iz-story h3{margin:.5rem 0}
.iz-story p{font-size:.9rem}
.iz-story a{font-weight:700;font-size:.86rem}
.iz-timeLink{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;padding:1rem;border:1px solid var(--iz-border);border-radius:.85rem}
.iz-timeLink strong,.iz-timeLink span{display:block}
.iz-timeLink span{font-size:.85rem;color:var(--iz-muted)}
.iz-neighbourGrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.iz-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1rem 0;padding:0}
.iz-tags li{padding:.45rem .7rem;border:1px solid var(--iz-border);border-radius:2rem;background:var(--iz-alt)}
.iz-neighbourMap{margin:0;padding:.75rem;border:1px solid var(--iz-border);border-radius:.85rem;background:var(--iz-alt)}
.iz-neighbourMap img{display:block;width:100%;height:auto;border-radius:.4rem}
.iz-neighbourMap figcaption{margin-top:.4rem;color:var(--iz-muted);font-size:.78rem}
.iz-futureGrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.iz-futureGrid a{display:grid;gap:.25rem;padding:.9rem;border:1px solid var(--iz-border);border-radius:.7rem;text-decoration:none}
.iz-futureGrid span{color:var(--iz-muted);font-size:.83rem}
.iz-community{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--iz-alt)}
.iz-community p{max-width:65ch;margin:.3rem 0 0}
.iz-footnote{margin:0 .25rem 1rem}
@media(max-width:1000px){.iz-quick,.iz-placeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.iz-storyGrid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.iz-hero,.iz-introGrid,.iz-neighbourGrid{grid-template-columns:1fr}.iz-heroVisual{min-height:160px}.iz-heroVisual__mark{width:80px;height:80px;font-size:3.2rem}.iz-storyGrid,.iz-futureGrid{grid-template-columns:1fr}.iz-heading,.iz-timeLink,.iz-community{align-items:flex-start;flex-direction:column}.iz-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:450px){.iz-quick,.iz-placeGrid{grid-template-columns:1fr}.iz-facts{grid-template-columns:1fr}.iz-actions .iz-btn{width:100%}}
@media(prefers-reduced-motion:reduce){.iz-home *{scroll-behavior:auto!important}}


/* V1.1: palette based on Gouwepeer core v1 (from supplied assets ZIP).
   Scoped to this homepage; no changes to other XenForo pages. */
.iz-home {

  /* Basisoppervlakken */
  --gp-bg: #f4f7fb;
  --gp-surface: #ffffff;
  --gp-surface-alt: #eef4f9;
  --gp-surface-subtle: #fbfcfd;

  /* Tekst en lijnen */
  --gp-text: #1d2733;
  --gp-muted: #5d6b79;
  --gp-border: #d9e2ea;
  --gp-border-hover: #b9cad6;

  /* Primair accent */
  --gp-accent: #176b87;
  --gp-accent-strong: #0e526b;
  --gp-accent-soft: #e3f2f7;
  --gp-on-accent: #ffffff;

  /* Statuskleuren */
  --gp-success: #297a4b;
  --gp-success-soft: #e8f5ed;
  --gp-warning: #8a5b00;
  --gp-warning-soft: #fff5d8;
  --gp-danger: #9a3030;
  --gp-danger-soft: #fceaea;
  --gp-info: #285e9b;
  --gp-info-soft: #eaf2fb;

  /* Schaduwen */
  --gp-shadow: 0 10px 30px rgba(24, 45, 62, .08);
  --gp-shadow-hover: 0 16px 38px rgba(24, 45, 62, .13);

  --iz-bg: var(--gp-surface);
  --iz-alt: var(--gp-surface-alt);
  --iz-text: var(--gp-text);
  --iz-muted: var(--gp-muted);
  --iz-border: var(--gp-border);
  --iz-link: var(--gp-accent);
}
html[data-color-scheme="dark"] .iz-home {

  /* Basisoppervlakken */
  --gp-bg: #171b21;
  --gp-surface: #20252c;
  --gp-surface-alt: #272d35;
  --gp-surface-subtle: #1c2127;

  /* Tekst en lijnen */
  --gp-text: #e8edf3;
  --gp-muted: #aeb8c3;
  --gp-border: #39424c;
  --gp-border-hover: #536272;

  /* Primair accent — iets lichter voor contrast op donker */
  --gp-accent: #62b6d1;
  --gp-accent-strong: #8bcde1;
  --gp-accent-soft: #183845;
  --gp-on-accent: #ffffff;

  /* Statuskleuren */
  --gp-success: #70c98f;
  --gp-success-soft: #183628;
  --gp-warning: #e0bb62;
  --gp-warning-soft: #3b3119;
  --gp-danger: #e18484;
  --gp-danger-soft: #3b2224;
  --gp-info: #79afe8;
  --gp-info-soft: #1d3046;

  /* Schaduwen */
  --gp-shadow: 0 10px 30px rgba(0, 0, 0, .24);
  --gp-shadow-hover: 0 16px 38px rgba(0, 0, 0, .34);

}
/* In XenForo the content area is often white, so cards need their own surfaces. */
.iz-home .iz-panel {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  box-shadow: var(--gp-shadow);
}
.iz-home .iz-quickCard,
.iz-home .iz-place,
.iz-home .iz-story,
.iz-home .iz-neighbourMap,
.iz-home .iz-futureGrid a {
  background: var(--gp-surface-alt);
  border: 1px solid var(--gp-border);
  box-shadow: 0 3px 12px rgba(24,45,62,.045);
  color: var(--gp-text);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.iz-home .iz-quickCard:hover,
.iz-home .iz-place:hover,
.iz-home .iz-futureGrid a:hover {
  border-color: var(--gp-border-hover);
  box-shadow: var(--gp-shadow-hover);
  transform: translateY(-2px);
}
.iz-home .iz-place--featured { border-color: var(--gp-accent); background: var(--gp-accent-soft); }
.iz-home .iz-kicker,
.iz-home .iz-story__index,
.iz-home .iz-place__eyebrow,
.iz-home .iz-facts strong { color: var(--gp-accent-strong); }
.iz-home .iz-hero .iz-kicker { color: #fff; }
.iz-home .iz-facts > div,
.iz-home .iz-tags li,
.iz-home .iz-timeLink { background: var(--gp-surface-alt); border-color: var(--gp-border); }
.iz-home .iz-community { background: var(--gp-surface-alt); }
.iz-home .iz-footnote { color: var(--gp-muted); }
.iz-home .iz-btn--outline { background: var(--gp-surface); border-color: var(--gp-border); color: var(--gp-text); }
.iz-home .iz-hero { box-shadow: var(--gp-shadow); }
@media (prefers-reduced-motion: reduce) {
  .iz-home .iz-quickCard, .iz-home .iz-place, .iz-home .iz-futureGrid a { transition: none; transform: none; }
}