@font-face {font-family:MaisonNeue;src:local("Maison Neue Regular"),url("assets/fonts/MaisonNeueWEB-Book-JFOOEIF2.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face {font-family:MaisonNeueExtended;src:local("Maison Neue Extended Bold"),url("assets/fonts/MaisonNeueExtendedWEB-Bold-RYX5C3AX.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root {--color-black:#000;--color-white:#fff;--color-green-700:#005141;--color-green-600:#0f5b4c;--color-gray-400:#ece4df;--page-width:132rem;--page-gutter:2rem}

*, *:before, *:after {box-sizing:border-box}
html {font-size:62.5%}
body {display:grid;grid-template-areas:"header" "main";grid-template-columns:minmax(0, 1fr);grid-template-rows:auto 1fr;min-height:100vh;margin:0;background:var(--color-white);color:var(--color-black);font-family:"MaisonNeue", sans-serif;font-size:1.8rem;line-height:1.5;-webkit-font-smoothing:antialiased}
p, h1, h2 {margin:0}

.OfflineHeader {grid-area:header;display:flex;padding:4rem max(var(--page-gutter), calc((100% - var(--page-width)) / 2));background:var(--color-gray-400)}
.OfflineHeader-logo {width:min(100%, 24rem);height:auto}

.OfflineNotice {grid-area:main;justify-self:center;align-self:start;width:min(100% - 2 * var(--page-gutter), var(--page-width));padding:4rem 0 6rem;display:grid}
.OfflineNotice-block {display:grid;row-gap:1.6rem;line-height:1.55}
.OfflineNotice-block > p {max-width:72ch}
.OfflineNotice-lang, .OfflineContact-label {font-size:1.2rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-green-600)}
.OfflineNotice-divider {width:100%;height:0;border:0;border-top:1px solid color-mix(in srgb, var(--color-green-700) 25%, transparent);margin-block:3rem}
.OfflineNotice-title {font-family:"MaisonNeueExtended", sans-serif;font-weight:700;font-size:clamp(2.2rem, 1.6rem + 1.2vw, 2.8rem);line-height:1.2;color:var(--color-green-700)}
.OfflineNotice-link {color:var(--color-green-700);text-decoration:underline;text-underline-offset:0.2em;overflow-wrap:anywhere}
.OfflineNotice-link:focus-visible {outline:2px solid var(--color-green-700);outline-offset:3px;border-radius:2px}

.OfflineTransport {display:grid;row-gap:0.8rem;margin-block-start:3rem;padding:2.4rem 2.8rem;background:color-mix(in srgb, var(--color-green-700) 8%, var(--color-white));border-inline-start:0.4rem solid var(--color-green-700);line-height:1.55}
.OfflineTransport-nl {font-weight:600}

.OfflineContact {display:grid;row-gap:3rem}
.OfflineContact-title {font-family:"MaisonNeueExtended", sans-serif;font-weight:700;font-size:1.7rem;line-height:1.2;color:var(--color-green-700)}
.OfflineContact-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr));gap:2rem 3rem}
.OfflineContact-item {display:grid;row-gap:0.6rem;align-content:start}
.OfflineContact-locations summary {display:inline-flex;align-items:center;padding:1.2rem 2.4rem;border:2px solid var(--color-green-700);border-radius:0.4rem;background:var(--color-green-700);color:var(--color-white);font-weight:700;cursor:pointer;list-style:none}
.OfflineContact-locations summary::-webkit-details-marker {display:none}
.OfflineContact-locations summary:hover {background:var(--color-green-600)}
.OfflineContact-locations summary:focus-visible {outline:3px solid var(--color-green-700);outline-offset:3px}
.OfflineContact-locations {margin-block-start:2rem}
.OfflineContact-locationGrid {display:grid;grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr));gap:3.2rem 3rem;margin-block-start:3.2rem}
.OfflineContact-location {display:grid;row-gap:0.6rem;align-content:start}
.OfflineContact-location address {font-style:normal}
.OfflineContact-locationName {font-family:"MaisonNeueExtended", sans-serif;font-weight:700;font-size:1.8rem;line-height:1.3;color:var(--color-green-700)}

@media screen and (min-width:37em) {
  :root {--page-gutter:4rem}
  .OfflineHeader {padding-block:6rem}
  .OfflineHeader-logo {width:24rem}
  .OfflineNotice {padding-block:6rem 8rem}
}

@media screen and (min-width:60em) {
  .OfflineNotice {grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);grid-template-areas:"nl en" "transport transport" "contact contact";align-items:start}
  .OfflineNotice-block[lang="nl"] {grid-area:nl;padding-inline-end:4rem}
  .OfflineNotice-block[lang="en"] {grid-area:en;padding-inline-start:4rem;border-inline-start:1px solid color-mix(in srgb, var(--color-green-700) 25%, transparent)}
  .OfflineNotice-block > p {max-width:none}
  .OfflineNotice-divider {display:none}
  .OfflineTransport {grid-area:transport;margin-block-start:4rem}
  .OfflineContact {grid-area:contact;margin-block-start:4rem}
}

@media screen and (min-width:64em) {
  :root {--page-gutter:6.4rem}
}

@media screen and (min-width:81.25em) {
  :root {--page-gutter:8rem}
}
