/* Olgarden – opmaak van de publieke site (ook gebruikt in het editor-voorbeeld).
   Vaste kleuren en lettertypes; alles valt onder .og zodat het beheer er geen last van heeft. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/work-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/work-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.og {
  --indigo: #3A3A73;
  --vlak: #ECEEFB;
  --limoen: #CCFF66;
  --tekst: #24244A;
  --tekst-zacht: #4A4A6A;
  --grijs: #5F5F80;
  --lijn: #DADDF2;
  --achtergrond: #FBFBFE;
  --voet: #2C2C5A;
  --serif: 'Newsreader', Georgia, serif;
  --gutter: 40px;

  background: var(--achtergrond);
  color: var(--tekst);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.og *, .og *::before, .og *::after { box-sizing: border-box; }
.og main { flex: 1 0 auto; }
.og img { display: block; max-width: 100%; }
.og a { color: var(--indigo); }
.og a:hover { color: var(--tekst); }
.og h1, .og h2 { font-family: var(--serif); font-weight: 400; color: var(--indigo); margin: 0; }
.og p { margin: 0 0 18px; color: var(--tekst-zacht); }
.og p:last-child { margin-bottom: 0; }

.og-wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.og-label { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grijs); }
.og-klein { font-size: 17px; color: var(--grijs) !important; }
.og :focus-visible { outline: 3px solid #E07B00; outline-offset: 3px; }
.og-vlak { background: var(--vlak); }

/* Kop en menu */
.og-kop { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.og-logo { font-family: var(--serif); font-size: 30px; text-decoration: none; color: var(--indigo) !important; line-height: 1.2; }
.og-menu { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 18px; }
.og-menu a { text-decoration: none; color: var(--tekst); min-height: 44px; display: inline-flex; align-items: center; }
.og-menu a:hover { text-decoration: underline; text-underline-offset: 8px; }
.og-menu a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--indigo); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Mededeling */
.og-mededeling { background: var(--indigo); color: #FFFFFF; font-size: 20px; font-weight: 500; padding: 16px 0; }
.og-mededeling--uit { background: var(--vlak); color: var(--grijs); font-size: 16px; font-weight: 400; border: 1px dashed #B4B8D8; }

/* Grote foto met titel */
.og-hero__beeld { position: relative; border-radius: 6px; overflow: hidden; }
.og-hero__foto { width: 100%; height: 680px; object-fit: cover; }
.og-hero__kaart { position: absolute; left: 0; bottom: 0; max-width: 620px; padding: 52px 56px; background: var(--achtergrond); border-top-right-radius: 6px; }
.og-hero__kaart .og-label { margin-bottom: 14px; letter-spacing: 2px; }
.og-hero h1 { margin-bottom: 18px; font-size: 58px; line-height: 1.05; }

/* Openingstijden (praktische info) */
.og-info { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.og-info__waarde { font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--indigo); }
.og-info__sub { font-size: 17px; color: var(--grijs); margin-top: 2px; }

/* Tekst met foto */
.og-tekstfoto { padding-top: 112px; padding-bottom: 112px; display: flex; flex-wrap: wrap; gap: 72px; align-items: center; }
.og-tekstfoto--links { flex-direction: row-reverse; }
.og-tekstfoto__tekst { flex: 1 1 420px; min-width: 0; }
.og-tekstfoto h2, .og-tekst h2 { margin-bottom: 24px; font-size: 44px; line-height: 1.15; }
.og-link { display: inline-block; margin-top: 10px; font-weight: 500; text-underline-offset: 5px; }
.og-tekstfoto__fotos { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.og-tekstfoto__fotos img { width: 100%; height: 520px; object-fit: cover; border-radius: 6px; }
.og-tekstfoto__fotos--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.og-tekstfoto__fotos--twee img:nth-child(2) { margin-top: 64px; }

/* Tekst */
.og-tekst { padding-top: 96px; padding-bottom: 96px; }
.og-tekst > * { max-width: 760px; }

/* Fotostrip (kaarten) */
.og-strip { padding-top: 104px; padding-bottom: 104px; }
.og-strip h2 { margin-bottom: 48px; font-size: 44px; line-height: 1.15; }
.og-strip__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.og-strip__kaart { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--tekst) !important; }
.og-strip__kaart img { width: 100%; height: 420px; object-fit: cover; border-radius: 6px; }
.og-strip__titel { font-family: var(--serif); font-size: 28px; line-height: 1.2; color: var(--indigo); }
.og-strip__tekst { color: var(--tekst-zacht); }
a.og-strip__kaart:hover .og-strip__titel { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Open tuindagen */
.og-tuindagen { padding-top: 112px; padding-bottom: 112px; display: flex; flex-wrap: wrap; gap: 56px; }
.og-tuindagen__intro { flex: 1 1 340px; min-width: 0; }
.og-tuindagen h2 { margin-bottom: 16px; font-size: 44px; line-height: 1.15; }
.og-tuindagen__lijst { flex: 2 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--lijn); }
.og-tuindagen__lijst li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--lijn); }
.og-tuindagen__datum { font-family: var(--serif); font-size: 24px; }
.og-tuindagen__wat { color: var(--grijs); }

/* Footer */
.og-voet { background: var(--voet); color: #D9DCF7; margin-top: 0; }
.og-voet__binnen { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 32px; font-size: 18px; }
.og-voet__logo { font-family: var(--serif); font-size: 28px; color: #FFFFFF; }
.og-voet__menu { display: flex; flex-wrap: wrap; gap: 0 28px; }
.og-voet__menu a { min-height: 44px; display: inline-flex; align-items: center; }
.og-voet__menu a { color: var(--limoen) !important; }

/* Tablet */
@media (max-width: 1000px) {
  .og-hero__foto { height: 520px; }
  .og-hero h1 { font-size: 46px; }
  .og-tekstfoto, .og-tuindagen { padding-top: 88px; padding-bottom: 88px; }
}

/* Telefoon */
@media (max-width: 720px) {
  .og { --gutter: 20px; font-size: 18px; }
  .og-kop { padding-top: 16px; padding-bottom: 8px; }
  .og-logo { font-size: 30px; }
  .og-menu { gap: 0 20px; font-size: 18px; }
  .og-hero__foto { height: 340px; }
  .og-hero__kaart { position: static; max-width: none; padding: 24px 0 0; background: transparent; }
  .og-hero__beeld { overflow: visible; }
  .og-hero__foto { border-radius: 6px; }
  .og-hero h1 { font-size: 38px; margin-bottom: 12px; }
  .og-mededeling { font-size: 19px; }
  .og-info { padding-top: 40px; padding-bottom: 40px; gap: 24px; grid-template-columns: 1fr; }
  .og-info__waarde { font-size: 22px; }
  .og-tekstfoto, .og-tuindagen, .og-tekst, .og-strip { padding-top: 64px; padding-bottom: 64px; gap: 32px; }
  .og-tekstfoto--links { flex-direction: column; }
  .og-tekstfoto h2, .og-tekst h2, .og-strip h2, .og-tuindagen h2 { font-size: 32px; margin-bottom: 16px; }
  .og-strip h2 { margin-bottom: 28px; }
  .og-tekstfoto__fotos img { height: 300px; }
  .og-tekstfoto__fotos--twee img { height: 240px; }
  .og-tekstfoto__fotos--twee img:nth-child(2) { margin-top: 32px; }
  .og-strip__raster { gap: 36px; }
  .og-strip__kaart img { height: 260px; }
  .og-strip__titel { font-size: 24px; }
  .og-tuindagen__datum { font-size: 21px; }
  .og-tuindagen__lijst li { padding: 16px 0; }
}