/* We Care Communicatie — one stylesheet for the whole site.
   Read AGENTS.md before changing anything here.

   Sections:
   1. Fonts
   2. Tokens
   3. Base
   4. Layout (container, section)
   5. Components (alphabetical)
   6. Header & footer
   7. Responsive
*/

/* 1. Fonts ------------------------------------------------------------ */

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 2. Tokens ----------------------------------------------------------- */

:root {
  --gold: #dca54a;
  --ink: #0f172a;      /* headings */
  --text: #4a4a4a;     /* body text */
  --cream: #faf5e5;    /* section background */
  --line: #f0e6c5;     /* borders on cream */
  --dark: #222222;     /* dark panels */
  --white: #ffffff;

  --font-body: "Work Sans", system-ui, sans-serif;
  --font-heading: "Open Sans", system-ui, sans-serif;
  --font-button: "Poppins", system-ui, sans-serif;

  --fs-h1: 3rem;
  --fs-h2: 2.5rem;
  --fs-h3: 2rem;
  --fs-h4: 1.375rem;
  --fs-eyebrow: 1rem;

  --container: 1200px;
  --gutter: 40px;          /* side padding of the page */
  --gap: 100px;            /* space between two columns */
  --section-y: 100px;      /* top padding of a section */
  --section-y-end: 75px;   /* bottom padding of a section */
  --radius: 10px;          /* images, cards */
  --radius-lg: 20px;       /* panels */
}

/* 3. Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.71;
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.33;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
h4 { font-size: var(--fs-h4); line-height: 1.4; font-weight: 600; }

p, ul, ol { margin: 0 0 1.6em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running text are underlined; menus, buttons and the
   footer are not. */
main :is(p, li) a { text-decoration: underline; }
/* Link in body-text colour instead of gold. */
.text-link { color: inherit; }

img { display: block; max-width: 100%; height: auto; }

/* 4. Layout ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(960px + 2 * var(--gutter)); }

/* Every block of the page is a <section class="section">. White by
   default; add .section--cream for the cream background. */
.section { padding-block: var(--section-y) var(--section-y-end); }
.section--cream { background: var(--cream); }
.section--tight { padding-block: 50px; }
/* Two cream sections in a row share their spacing. */
.section--cream + .section--cream { padding-top: 40px; }

/* Eyebrow + heading above a block of content. */
.section-head { margin-bottom: 60px; }
.section-head--center { text-align: center; }

/* 5. Components ------------------------------------------------------- */

/* Button. Gold by default, .button--light for use on dark panels. */
.button {
  display: inline-block;
  padding: 20px 32px;
  border-radius: 5px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-button);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.button:hover { text-decoration: none; filter: brightness(0.95); }
.button--light { background: var(--white); color: var(--ink); }
/* A button below text sits 32px under it. */
:is(.hero, .media, .dark-panel) .button { margin-top: 32px; }
:is(.hero, .media, .dark-panel) p:has(+ .button) { margin-bottom: 0; }

/* Card: white box on a cream section. */
.card {
  padding: 50px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
}
.card h4 { margin-bottom: 10px; }
.card--center { text-align: center; }
/* Short gold line under the card title. */
.card--center h4::after {
  content: "";
  display: block;
  width: 30px;
  margin: 18px auto 20px;
  border-top: 2px solid var(--gold);
}

/* Grid of three equal columns (cards, testimonials). */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Grid of four equal columns (cards-4): two below 1100px, one on phones. */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}
.grid-4 .card { padding: 40px 30px; }

/* Two columns of text next to each other. */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* Contact card on the contact page. */
.contact-card {
  padding: 50px;
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: var(--white);
}
.contact-card__inner { max-width: 450px; margin-inline: auto; }
.contact-card h2 { color: var(--gold); margin-bottom: 20px; }
.contact-card .label { display: block; margin-top: 22px; }
.contact-card .label:first-of-type {
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 3px solid #444;
}
.contact-card .label:first-of-type + .label { margin-top: 13px; }
.contact-card a { display: block; color: var(--white); }
.contact-card__email {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* "Neem contact op" panel at the bottom of most pages. */
.cta {
  padding: 100px;
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: var(--white);
  text-align: center;
}
.cta h2, .cta .eyebrow { color: var(--white); }
.cta h2 { font-size: var(--fs-h3); line-height: 1.4; }
.cta__email {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  overflow-wrap: anywhere;
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}
.cta .button { margin: 20px 0 45px; }
.cta .label { display: block; margin-bottom: 8px; }

/* Dark panel with intro text on the left and white cards on the right. */
.dark-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 50px;
  border-radius: var(--radius-lg);
  background: var(--dark);
  color: var(--white);
}
.dark-panel h2 { color: var(--white); margin: 14px 0 20px; }

.dark-panel__cards { display: grid; gap: 20px; }
.dark-panel .card { padding: 32px; }
.dark-panel .card h4 { margin-bottom: 12px; }

/* Small coloured line above a heading. */
.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gold);
}

/* Hero: first block of a page. Text left, image right. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
  padding-bottom: var(--section-y);
}
.hero h1 + p { margin-top: 20px; }

/* Image with rounded corners. It is shown at the width in its width
   attribute (smaller on narrow screens). Add a ratio class to crop it to a
   fixed shape; without one the photo keeps the shape of the file. */
.media-img {
  object-fit: cover;
  border-radius: var(--radius);
}
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-11x9 { aspect-ratio: 11 / 9; }
.ratio-3x2 { aspect-ratio: 3 / 2; }

/* Media: text and image side by side.
   Inside a .media-list the image switches sides automatically:
   1st row image right, 2nd row image left, and so on. Always put the
   text first and the image second in the HTML. */
.media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}
.media h2, .media h3 { margin-bottom: 20px; }
.media-list { display: grid; gap: 70px; }
.media-list > .media:nth-child(even) > :first-child { order: 2; }
.media--boxed {
  align-items: start;
  padding: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Larger intro paragraph in heading font. */
.lead {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

/* Long text pages (privacy, terms). */
.prose { padding-block: 60px; }
.prose h1 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 16px; }
.prose li { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 40px; }

/* Testimonial: <figure class="card quote"> with blockquote + figcaption. */
.quote { margin: 0; }
.quote::before {
  content: "\201C";
  display: block;
  height: 55px;
  font-family: Georgia, serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}
.quote blockquote { margin: 0 0 42px; }

/* Heading row with a short note on the right (testimonials). */
.split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 60px;
}
.split-head p { max-width: 300px; }

/* Small uppercase label ("Telefoon:", footer headings). */
.label {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}
.cta .label, .contact-card .label { color: var(--white); }

/* 6. Header & footer -------------------------------------------------- */

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 16px;
}
.site-header--cream { background: var(--cream); }
.site-header--cream .site-header__inner { padding-bottom: 16px; }
.site-header__logo img { width: 170px; height: 170px; }
.site-header__contact { justify-self: end; padding: 17px 26px; }

.nav-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a {
  display: block;
  padding: 0 16px;
  line-height: 100px;
  color: var(--ink);
}
.nav-menu a[aria-current="page"] { color: var(--gold); }
.nav-menu a:hover { color: var(--gold); text-decoration: none; }

/* The menu is a popover on small screens; on large screens it is
   always visible and the toggle is hidden. */
.nav-menu[popover] {
  position: static;
  inset: auto;
  border: 0;
  background: none;
  overflow: visible;
}
.nav-toggle { display: none; }

.site-footer { background: var(--cream); }
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding-block: 45px;
}
.site-footer .label { display: block; margin-bottom: 20px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul a { color: var(--text); }
.site-footer ul a[aria-current="page"] { color: var(--gold); }
.site-footer__contact p { margin-bottom: 10px; }
.site-footer__contact a { color: var(--text); }
.site-footer__bottom {
  padding-block: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  text-align: center;
}

/* 7. Responsive ------------------------------------------------------- */

/* Tablet: hamburger menu. */
@media (max-width: 921px) {
  :root { --gap: 40px; }

  .site-header__inner { grid-template-columns: 1fr auto; padding-block: 23px; }
  .site-header__logo img { width: 44px; height: 44px; }
  .site-header__contact { display: none; }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--gold);
    border-radius: 2px;
    background: none;
    color: var(--gold);
    cursor: pointer;
  }
  .nav-toggle .icon-close { display: none; }
  body:has(.nav-menu:popover-open) .nav-toggle .icon-open { display: none; }
  body:has(.nav-menu:popover-open) .nav-toggle .icon-close { display: block; }

  .nav-menu[popover] {
    position: fixed;
    inset: 90px 0 auto 0;
    width: 100%;
    flex-direction: column;
    background: var(--white);
  }
  .nav-menu[popover]:not(:popover-open) { display: none; }
  .nav-menu li { border-bottom: 1px solid #eaeaea; }
  .nav-menu a { padding: 0 24px; line-height: 64px; }
}

/* Small desktop and tablet: four cards no longer fit in a row. */
@media (max-width: 1099px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: everything in one column, smaller type. */
@media (max-width: 767px) {
  html { font-size: 91.2%; }
  :root {
    --fs-h1: 2.19rem;
    --fs-h2: 1.92rem;
    --fs-h3: 1.645rem;
    --fs-h4: 1.25rem;
    --fs-eyebrow: 0.9375rem;
    --gutter: 24px;
    --section-y: 64px;
    --section-y-end: 40px;
  }

  .hero, .media, .columns, .dark-panel, .grid-3, .grid-4, .split-head, .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  /* "Communicatiestrategie" doesn't fit a card heading on the narrowest phones. */
  .dark-panel .card h4 { hyphens: auto; }
  .dark-panel__cards { grid-template-columns: minmax(0, 1fr); }
  .hero, .media { gap: 40px; }
  /* On phones every row in a .media-list shows its image first. */
  .media-list > .media > :first-child { order: 2; }
  .media-list > .media:nth-child(even) > :first-child { order: 2; }
  .section-head { margin-bottom: 40px; }
  .split-head { margin-bottom: 40px; }

  .card { padding: 30px; }
  .media--boxed, .contact-card { padding: 30px; }
  .dark-panel { padding: 30px 24px; }
  .dark-panel .card { padding: 24px; }
  .cta { padding: 50px 24px; }
  /* Shrink the email address with the screen so it stays on one line down to 320px. */
  .cta__email, .contact-card__email { font-size: min(var(--fs-h4), calc(5.8vw - 6px)); }

  .site-footer__inner { text-align: center; gap: 30px; }
}