/* mmrc.nl — flat, responsive rebuild of the original .mmrc identity
   Palette carried over from the Rails site's home.css.scss, with link
   and text colors adjusted so everything meets WCAG AA contrast on the
   gradient card (see notes inline). */

:root {
  --card-from: #ABA194;
  --card-to: #8E9398;
  --text: #333333;
  --text-on-card: #222222;
  --link: #434E5E;
  --link-on-card: #1F2733;
  --btn-bg: #636E7E;
  --btn-bg-hover: #4D5866;
  --btn-bg-active: #434B57;
  --border: #d8d5d0;
  --max-width: 900px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

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

a {
  color: var(--link);
}

/* ---- Header ---- */

.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.brand img {
  width: 220px;
  height: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 6px;
  background: #f5f5f5;
  border-radius: 999px;
}

.site-nav a {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: #e6e6e6;
}

.site-header__shadow,
.site-footer__shadow {
  height: 22px;
  margin: 20px auto 0;
  max-width: 1100px;
  background-image: url("/images/shadow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.site-footer__shadow {
  margin: 40px auto 0;
}

/* ---- Layout ---- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px 10px;
}

.card {
  max-width: var(--max-width);
  margin: 0 auto;
  background-color: var(--card-from);
  background-image: linear-gradient(to right, var(--card-from), var(--card-to));
  color: var(--text-on-card);
  border-radius: 8px;
  padding: 45px 55px;
  text-align: center;
}

.card a {
  color: var(--link-on-card);
}

.card h1 {
  font-size: 30px;
  margin: 0 0 24px;
}

.card h2 {
  font-size: 20px;
  margin: 28px 0 12px;
}

.card p {
  margin: 0 0 16px;
}

.card__cta {
  margin-top: 30px !important;
}

.card--wide {
  max-width: 1100px;
  text-align: left;
}

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 6px;
  border: none;
  transition: background-color 0.15s ease-in-out;
}

.btn:hover,
.btn:focus {
  background: var(--btn-bg-hover);
  color: #fff;
}

.btn:active {
  background: var(--btn-bg-active);
}

/* ---- Experience highlights (homepage) ---- */

.highlights {
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 20px;
}

.highlights li {
  margin-bottom: 10px;
}

.visually-hidden {
  display: none;
}

/* ---- Contact page ---- */

.contact-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
  text-align: left;
}

.contact-grid__details {
  flex: 1 1 280px;
}

.contact-grid__card {
  flex: 0 0 auto;
}

.contact-grid__card img {
  width: 140px;
  border-radius: 8px;
}

/* ---- CV page ---- */

.cv-download {
  text-align: center;
  margin-bottom: 30px;
}

.card--wide h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.cv-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.cv-table td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.cv-table td.cv-label {
  width: 220px;
  font-weight: bold;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cv-table,
  .cv-table tbody,
  .cv-table tr,
  .cv-table td {
    display: block;
    width: auto;
  }

  .cv-table tr {
    padding: 8px 0;
  }

  .cv-table td.cv-label {
    white-space: normal;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cv-table td:last-child {
    padding-top: 4px;
  }
}

/* ---- Footer ---- */

.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
  color: var(--text);
  font-size: 14px;
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
  .site-header__inner {
    justify-content: center;
    text-align: center;
    padding-top: 16px;
  }

  .brand img {
    width: 160px;
  }

  .page {
    padding: 20px 16px 10px;
  }

  .card {
    padding: 30px 20px;
  }

  .card h1 {
    font-size: 24px;
  }

  .card--wide {
    text-align: left;
  }
}