/* ============================================================
   Peter Research Group — design tokens + shared styles
   Source: Peter_Reasearch_Group_Website_v6.xd (1600px artboards,
   container x145→x1455 = 1310 design px; pct = (x-145)/1310)
   Palette: FZJ-blue ramp · Font: Inter Tight (Google Fonts)
   ============================================================ */

:root {
  --blue-900: #023d6b;   /* FZJ blue — logo, nav text, Contact us */
  --blue-700: #356489;   /* primary text                          */
  --blue-500: #678ba6;   /* secondary text, footer links          */
  --blue-300: #9ab1c4;   /* member plates, hover pills            */
  --blue-200: #cdd8e1;   /* banner buttons, light tiles           */
  --bg:       #e9e9e9;   /* page background                       */
  --white:    #ffffff;
  --ink:      #1d1d1b;

  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1320px;
  --gutter: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg);
  color: var(--blue-700);
  font-size: 22px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* corner-arrow icon (XD link glyph ⌐) */
.icon-corner, .icon-download {
  width: 15px; height: 15px; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.4;
}

/* ============================================================
   HEADER — XD spec (all pages):
   utility "Home Linkedin" y32 right-aligned to x1524 (#9ab1c4)
   logo x65 y71 · nav cells 136px from x806 (Research…Our Lab)
   "Contact us" button x1342 y109 182×36 #023d6b, white text
   ============================================================ */
.site-header { padding: 32px 0 0; }
.header-inner { position: relative; height: 118px; }

.logo { position: absolute; left: -6.1%; top: 39px; display: block; }
.logo-full { width: 230px; height: auto; }

.utility-nav {
  position: absolute; right: -5.3%; top: 0;
  display: flex; gap: 38px;
  font-size: 20px; color: var(--blue-300);
}

.site-nav {
  position: absolute; left: 50.4%; top: 70px;
  display: flex; align-items: flex-start;
}
.nav-item { position: relative; width: 136px; }
.nav-link {
  display: flex; align-items: center;
  width: 136px; height: 40px; padding: 0 0 0 7px;
  font-size: 20px; color: var(--blue-900);
  background: transparent; border: 0; font-family: inherit; cursor: pointer;
  transition: background .3s ease-out, color .3s ease-out;
}
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link { background: var(--blue-300); }

/* dropdown: white panel flush under pill, 37px rows, hover #9ab1c4 */
.dropdown {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 50;
  width: 136px; background: var(--white);
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { display: block; }
.dropdown a {
  display: flex; align-items: center;
  height: 37px; padding: 0 0 0 7px;
  font-size: 20px; color: var(--blue-900);
  transition: background .3s ease-out;
}
.dropdown a:hover { background: var(--blue-300); opacity: 1; }

.btn-contact {
  display: flex; align-items: center; justify-content: space-between;
  width: 182px; height: 36px; padding: 0 10px 0 12px;
  margin: 7px 0 0 -8px;
  background: var(--blue-900); color: var(--white);
  font-size: 20px; flex-shrink: 0;
  transition: background .3s ease-out;
}
.btn-contact:hover { background: #0a4d80; opacity: 1; }

/* ============================================================
   BANNER BUTTON — 384×76 #cdd8e1, 33px text + corner icon
   (Play the video · Archive · Join the Group · Back · Archiv)
   ============================================================ */
.banner-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 384px; max-width: 80vw; height: 76px;
  background: var(--blue-200); color: var(--blue-700);
  font-size: 33px; font-weight: 400; padding: 0 22px 0 8px;
}
.banner-btn .icon-corner { width: 22px; height: 22px; }
.banner-btn:hover { background: var(--blue-300); opacity: 1; }

/* underlined link with corner icon (Mail · Linkedin · CV DOWNLOAD …) */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; color: var(--blue-500);
  border-bottom: 1px solid var(--blue-500);
  padding-bottom: 3px;
}

/* highlighted inline link (…more about me, read more) */
.link-hl { background: var(--blue-200); padding: 1px 8px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 90px 0; }
.section-title {
  font-size: 60px; font-weight: 300; color: var(--blue-700);
  text-align: center; margin-bottom: 70px;
}
.section-title.left { text-align: left; }

/* ============================================================
   FOOTER — XD spec: wordmark + Jülich brand + address (left),
   5 underlined link rows w/ corner icons (right col x1057),
   bottom row ©2023 + legal links 15px
   ============================================================ */
.site-footer { padding: 110px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 30.4%;
  gap: 24px;
  align-items: start;
}
.footer-wordmark {
  font-size: 17px; font-weight: 700; line-height: 1.1;
  letter-spacing: .4px; color: var(--blue-900);
}
.footer-wordmark .l2 { color: #1f5078; }
.footer-wordmark .l3 { color: var(--blue-300); font-weight: 600; }

.fzj-brand {
  display: flex; align-items: center; gap: 8px;
  margin-top: 40px;
  color: var(--blue-500);
}
.fzj-brand svg { width: 26px; height: 26px; flex-shrink: 0; }
.fzj-brand .wm { line-height: 1; }
.fzj-brand .wm b { font-size: 17px; font-weight: 700; letter-spacing: 2px; display: block; }
.fzj-brand .wm small { font-size: 7px; letter-spacing: .5px; display: block; }

.footer-addr { font-size: 20px; color: var(--blue-500); white-space: pre-line; margin-top: 10px; }

.footer-links { list-style: none; }
.footer-links li { border-bottom: 1px solid var(--blue-300); }
.footer-links a {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 20px; color: var(--blue-500);
  padding: 12px 2px 10px 0;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 90px; font-size: 15px; color: var(--blue-500);
}
.footer-bottom .legal { display: flex; gap: 32px; }

/* footer CTA (HOME only) */
.footer-cta {
  font-size: 60px; font-weight: 400; color: var(--blue-700);
  padding: 150px 0 0;
}
.footer-cta .hl { background: var(--blue-200); padding: 0 10px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1240px) {
  .logo { left: 0; }
  .utility-nav { right: 0; }
}
@media (max-width: 1100px) {
  body { font-size: 19px; }
  .header-inner { height: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-bottom: 12px; }
  .logo, .utility-nav, .site-nav { position: static; }
  .site-nav { flex-wrap: wrap; }
  .utility-nav { order: 3; margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-title, .footer-cta { font-size: 42px; }
}
@media (max-width: 720px) {
  .logo-full { width: 190px; }
  .site-nav { gap: 4px; }
  .nav-item, .nav-link { width: auto; }
  .nav-link { padding: 0 10px; }
  .btn-contact { margin-left: 0; }
  .utility-nav { display: none; }
  .section-title, .footer-cta { font-size: 34px; }
  .banner-btn { font-size: 24px; height: 60px; }
  .footer-bottom { flex-direction: column; gap: 18px; align-items: flex-start; }
}