/* MMC website. Brand colours sampled from the logo: teal #00949C, grey #909090.
   Text and links use darker shades that meet WCAG AA contrast on white. */
:root {
  --teal: #00949C;        /* brand; decorative and large elements only */
  --teal-dark: #00737A;   /* links, buttons: 5.6:1 on white */
  --teal-darker: #005A60;
  --teal-tint: #E6F4F5;
  --grey: #909090;        /* brand; decorative only */
  --text: #24292E;
  --muted: #5A6169;       /* 6.2:1 on white */
  --bg: #FFFFFF;
  --bg-alt: #F5F7F8;
  --border: #DDE2E5;
  --footer-bg: #000000;   /* matches the black background of logo-mmc-negativo.jpg */
  --radius: 6px;
  --wrap: 72rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-underline-offset: 0.15em; }
a:hover { color: var(--teal-darker); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-top: 1.6em; }
h3 { font-size: 1.15rem; margin-top: 1.4em; }
p, ul, ol { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 46rem; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal-dark); color: #fff; padding: 0.6rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; color: #6E6E6E; line-height: 1.1; }
.brand-text span { display: block; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.32em; color: var(--teal-dark); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a { text-decoration: none; color: var(--text); font-weight: 500; padding: 0.35rem 0; display: inline-block; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--teal-dark); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--teal-dark); }
.site-nav .lang-switch { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.3rem 0.7rem; font-size: 0.95rem; }

/* Sections */
section { padding: 3rem 0; }
section.alt { background: var(--bg-alt); }
.hero { padding: 4rem 0 3rem; background: linear-gradient(180deg, var(--teal-tint), var(--bg)); }
.hero .lead { font-size: clamp(1.15rem, 2vw, 1.35rem); color: var(--muted); max-width: 40rem; }
.page-title { padding: 3rem 0 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn { display: inline-block; padding: 0.7rem 1.3rem; border-radius: var(--radius); font-weight: 600; text-decoration: none; border: 2px solid var(--teal-dark); }
.btn-primary { background: var(--teal-dark); color: #fff; }
.btn-primary:hover { background: var(--teal-darker); border-color: var(--teal-darker); color: #fff; }
.btn-secondary { color: var(--teal-dark); background: transparent; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; padding: 0; list-style: none; }
.card { background: var(--bg); border: 1px solid var(--border); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { margin-top: 0; }

.service { display: grid; gap: 2rem; align-items: start; padding: 2.5rem 0; border-top: 1px solid var(--border); }
.service:first-of-type { border-top: 0; }
.service h2 { margin-top: 0; }
.service figure { margin: 0; }
.service figcaption, .caption { font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem; }
@media (min-width: 52rem) { .service.has-figure { grid-template-columns: 3fr 2fr; } }

.pub-list li, .project-list li { margin-bottom: 0.8em; }
.pub-list { padding-left: 1.2rem; }

.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2.5rem 2rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.team li { display: flex; flex-direction: column; }
.team .photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; width: 78%; max-width: 15rem; margin: 0 auto 1.2rem;
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, var(--teal-tint) 70%); border: 4px solid var(--teal-tint); }
.team .photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: grayscale(1); }
.team h2 { font-size: 1.2rem; margin: 0 0 0.5rem; text-align: center; }
.team h2::after { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--teal); margin: 0.6rem auto 0; border-radius: 2px; }
.team p { font-size: 0.97rem; color: var(--muted); margin: 0; }

.logos { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; list-style: none; padding: 0; }
.logos img { max-height: 64px; width: auto; }

/* Form */
.form { display: grid; gap: 1.1rem; max-width: 40rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 0.65rem 0.75rem; border: 1px solid #8A9299; border-radius: var(--radius); background: #fff; color: var(--text); }
.field textarea { min-height: 9rem; resize: vertical; }
.req { color: #B3261E; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.consent input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button { justify-self: start; font: inherit; cursor: pointer; }
.hint { font-size: 0.9rem; color: var(--muted); }

/* Placeholders still to confirm: visible on purpose */
mark.tbc { background: #FFF2B3; color: #5C4400; padding: 0 0.2em; border-radius: 3px; font-size: 0.9em; }

/* Footer */
.site-footer { background: var(--footer-bg); color: #D5DADD; margin-top: 3rem; padding: 2.5rem 0; font-size: 0.95rem; }
.site-footer a { color: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; }
.footer-inner img { width: 140px; }
.footer-inner p { margin: 0 0 0.35rem; }
.small { font-size: 0.85rem; color: #A9B1B6; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }