/*
Theme Name: NAP Museum
Theme URI: https://napmuseum.nl
Author: NAP Museum
Description: Lichtgewicht WordPress Block Theme voor de tijdelijke website van het NAP Museum.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: nap-museum
*/

html { scroll-behavior: smooth; }
body { margin: 0; }

:root {
  --nap-blue: #28299b;
  --nap-red: #ed2946;
  --nap-light-blue: #afd8e5;
  --nap-ink: #111126;
  --nap-white: #ffffff;
}

* { box-sizing: border-box; }

body,
button,
input,
textarea,
select {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body { color: var(--nap-ink); background: #fff; }

a { text-underline-offset: .18em; }

.wp-site-blocks { overflow: hidden; }

.nap-texture {
  background-image: linear-gradient(rgba(17, 11, 55, .05), rgba(17, 11, 55, .05)), url("assets/images/nap-background.png");
  background-size: cover;
  background-position: center;
}

.nap-header {
  min-height: 420px;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(32px, 5vw, 72px) !important;
  padding-bottom: clamp(70px, 9vw, 140px) !important;
}

.nap-header-inner { width: 100%; }

.nap-logo img { width: min(300px, 42vw); height: auto; }

.nap-nav a {
  color: var(--nap-white) !important;
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(17px, 1.35vw, 22px);
}

.nap-nav .wp-block-navigation-item:last-child a {
  background: var(--nap-light-blue);
  color: var(--nap-blue) !important;
  border-radius: 999px;
  padding: 18px 30px;
}

.nap-intro { padding-top: clamp(70px, 9vw, 140px) !important; }

.nap-eyebrow {
  color: var(--nap-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.nap-title {
  color: var(--nap-blue);
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: .98;
  letter-spacing: -.035em;
  margin-top: 0;
}

.nap-copy { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.35; }

.nap-wave-image,
.nap-wave-image img {
  width: 100%;
  min-height: 360px;
  object-fit: cover;
}

.nap-wave-image {
  overflow: hidden;
  clip-path: polygon(0 14%, 100% 0, 100% 89%, 78% 83%, 55% 91%, 30% 100%, 0 90%);
}

.nap-news-heading { margin-top: clamp(55px, 8vw, 120px); }

.nap-news-card {
  position: relative;
  background: var(--nap-light-blue);
  padding: clamp(34px, 5vw, 74px);
  margin-top: 28px;
  margin-bottom: clamp(80px, 10vw, 160px);
  clip-path: polygon(0 0, 92% 14%, 92% 88%, 72% 92%, 51% 100%, 25% 89%, 0 96%);
}

.nap-news-card .wp-block-post-template { margin: 0; }
.nap-news-card .wp-block-post { margin: 0; }
.nap-news-card .wp-block-post-title { color: var(--nap-blue); line-height: 1.05; }
.nap-news-card .wp-block-post-date { color: var(--nap-red); font-weight: 700; font-size: 13px; }
.nap-news-card .wp-block-post-excerpt { font-size: 17px; line-height: 1.35; }

.nap-news-image img {
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 70% 88%, 48% 100%, 20% 94%, 0 99%);
}

.nap-button .wp-block-button__link,
.nap-read-more {
  position: relative;
  background: var(--nap-red) !important;
  color: white !important;
  border-radius: 0 !important;
  font-weight: 700;
  padding: 13px 34px 13px 18px !important;
  text-decoration: none;
}

.nap-button .wp-block-button__link::after,
.nap-read-more::after {
  content: "";
  position: absolute;
  right: -24px;
  top: 0;
  width: 25px;
  height: 100%;
  background: var(--nap-red);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.nap-footer {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
  color: white;
}

.nap-footer-logo img { width: min(230px, 55vw); height: auto; }
.nap-footer a { color: white; }

.nap-signup-section {
  background: #f5f7fb;
  padding: clamp(50px, 7vw, 95px) 24px;
  scroll-margin-top: 30px;
}

.nap-signup-wrap { max-width: 760px; margin: 0 auto; }
.nap-signup-form { display: grid; gap: 14px; }
.nap-signup-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.nap-signup-form input[type="email"] {
  width: 100%;
  min-height: 54px;
  border: 2px solid var(--nap-blue);
  padding: 12px 16px;
  font-size: 17px;
}
.nap-signup-form button {
  border: 0;
  background: var(--nap-red);
  color: white;
  min-height: 54px;
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.nap-consent { font-size: 14px; line-height: 1.35; }
.nap-form-message { padding: 13px 16px; font-weight: 700; }
.nap-form-message.success { background: #dff4e6; }
.nap-form-message.error { background: #fde4e7; }
.nap-hp { position: absolute !important; left: -9999px !important; }

@media (max-width: 781px) {
  .nap-header { min-height: 330px; }
  .nap-header-inner { gap: 24px !important; }
  .nap-header-inner > .wp-block-group { width: 100%; }
  .nap-nav .wp-block-navigation__responsive-container-open { color: white; }
  .nap-intro-columns { gap: 44px !important; }
  .nap-wave-image, .nap-wave-image img { min-height: 280px; }
  .nap-news-card { clip-path: polygon(0 0, 100% 5%, 100% 96%, 70% 94%, 48% 100%, 22% 95%, 0 98%); }
  .nap-signup-row { grid-template-columns: 1fr; }
  .nap-footer-inner { align-items: flex-start !important; }
}