@import "../vendor/@fontsource/montserrat/index.min-uYTyE2E.css";

/*
 * Breakpoints (reference — CSS variables cannot be used inside @media queries)
 *
 *  --bp-xs:  480px   small phones
 *  --bp-sm:  640px   large phones
 *  --bp-md:  768px   tablets (portrait)
 *  --bp-lg:  1024px  tablets (landscape) / small laptops
 *  --bp-xl:  1280px  laptops / desktops
 *  --bp-2xl: 1440px  large desktops
 */

/* ─── Brand Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Brand colors */
  --color-primary:       #25377E;
  --color-secondary:     #95A0BF;
  --color-accent:        #F46472;
  --color-second-accent: #22b573;
  --color-text:          #25377E;

  /* Backgrounds */
  --bg-body:   #ffffff;
  --bg-page:   #ffffff;
  --bg-nav:    #ffffff;
  --bg-footer: #25377E;

  /* Font */
  --font: 'Montserrat', sans-serif;

  /*
   * Typography — pt to px: 1pt = 1.333px
   *   H1:   33pt bold    → 2.75rem  (~44px),  line-height 1.2
   *   Lead: 16px medium,  line-height 1.43
   *   Body: 14px regular, line-height 1.42
   *   Menu: 12pt medium  → 1rem
   */
  --text-h1:   2.0625rem;
  --lh-h1:     2,5rem;
  --text-lead: 1rem;
  --lh-lead:   1,75rem;
  --text-body: 0.875rem;
  --lh-body:   1.8125rem;
  --text-menu: 1rem;

  /* Layout */
  --content-max: 1200px;
  --hero-height: 300px;
  --nav-height:  170px;
  --radius:       12px;

  --logo-size: 145px;
  --logo-mobile-size: 64px;
}

/* ─── Reset ─────────────────────────────────────────────────────────────────── */

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

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ─── Base ──────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--bg-body);
  /* background-image: url("../images/background-m8hSNQ4.png"); */
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  color: var(--color-accent);
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* ─── Layout Helpers ────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Content column — narrower for body text */
.content-col {
  width: 100%;
  max-width: var(--content-max);
  padding-inline: 1rem;
  margin-inline: auto;
  position: relative;
}

/* ─── Header ────────────────────────────────────────────────────────────────── */

header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bg-nav);
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.2s ease;
  /* background-image: url("../images/background-m8hSNQ4.png");
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
  background-attachment: local; */
}

/* Added once the header has scrolled past the page hero, see header_controller.js */
header.header--shadow {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15);
}

/* ─── Navigation ────────────────────────────────────────────────────────────── */


.nav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--nav-height);
  max-width: calc(var(--content-max) + 2 * var(--logo-size) + 2rem);
  max-width: calc(var(--content-max) + 2 * var(--logo-size) - 5rem);
  padding-inline: 0 calc(var(--logo-size) + 0rem);
}

.nav-logo {
  padding-inline-end: 1rem;
}

.nav-logo img,
.nav-logo svg {
  display: block;
  height: var(--logo-size);
  width: auto;
  flex-shrink: 0;
}

/* Mobile logo is only shown from the hamburger breakpoint down */
.nav-logo__mobile {
  display: none;
}

.nav-mobile-toggle {
  display: none;
}

.nav-items {
  flex: 1;
  display: flex;
  gap: 2rem;
  align-items: stretch;
  justify-content: space-between;
  background: var(--bg-nav);
  position: relative; /* positioning context for the subitems bar */
}

/* li items are NOT positioned — subitems use nav-primary as positioning context */
.nav-items > li {
  display: flex;
  align-items: center;
  position: static;
  min-height: 105px;
}

/* Close button inside the mobile overlay — hidden on desktop */
.nav-items > li.nav-close-item {
  display: none;
}

.nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 1.25rem;
  line-height: 1;
  user-select: none;
}

.nav-items > li > a,
.nav-items > li > span {
  font-size: var(--text-menu);
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}

/* text-shadow simulates the bold weight instead of font-weight, so the text
   never changes width and the surrounding layout doesn't shift */
.nav-items > li.active > a,
.nav-items > li.active > span {
  text-shadow: -0.35px 0 currentColor, 0.35px 0 currentColor;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nav-items > li:hover > a,
.nav-items > li:hover > span {
  text-shadow: -0.35px 0 currentColor, 0.35px 0 currentColor;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* While hovering the menu, li.active loses its styling unless it's the item being hovered */
.nav-items:hover > li.active:not(:hover) > a,
.nav-items:hover > li.active:not(:hover) > span {
  text-shadow: none;
  text-decoration: none;
}

.nav-items > li.has-children > a::after,
.nav-items > li.has-children > span::after {
  content: ' ›';
  font-size: 1em;
  font-weight: bold;
  color: var(--color-accent);
}

.nav-items > li > span {
  cursor: default;
}

/* External portal login — icon and label on one line, only the label gets the
   hover underline so the icon isn't struck through */
.nav-items > li.nav-portal-item > a,
.nav-items > li.nav-portal-item:hover > a {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--color-accent);
}

/* The icon fills with currentColor, so it follows the link colour above */
.nav-items > li.nav-portal-item > a svg {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

.nav-items > li.nav-portal-item:hover > a > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hamburger — hidden on desktop */
.nav-hamburger {
  display: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-primary);
  font-size: 1.5rem;
  line-height: 1;
  margin-left: auto;
  user-select: none;
}

.nav-hamburger::before {
  content: '☰';
}

/* ─── Desktop subitems: full-width horizontal bar below the primary nav ─── */

/* Hidden by default — positioned absolute relative to .nav-primary */
.nav-subitems--inline {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  background: var(--bg-nav);
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  gap: 3.5rem;
  padding-top: 1.25rem;
  z-index: 1;
}

/* Active parent: subitems always visible */
.nav-items > li.has-children.active > .nav-subitems--inline {
  display: flex;
}

/* Hovered parent: subitems on top of the active parent's bar */
.nav-items > li.has-children:hover > .nav-subitems--inline {
  display: flex;
  z-index: 2;
}

.nav-subitems--inline > li > a {
  font-size: var(--text-menu);
  font-weight: 400;
  color: var(--color-primary);
  white-space: nowrap;
}

.nav-subitems--inline > li.active > a {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Mobile: full-page overlay ─── */

@media (max-width: 768px) {
  /* Menu bar is exactly as tall as the mobile logo */
  .nav-inner {
    height: var(--logo-mobile-size);
    padding-inline: 0 1rem;
  }

  .nav-primary {
    padding: 10px;
  }


  .nav-logo__desktop {
    display: none;
  }

  .nav-logo__mobile {
    display: block;
  }

  .nav-logo svg {
    height: var(--logo-mobile-size);
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
  }

  .nav-items {
    display: none;
  }

  /* Full-page overlay when checkbox is checked */
  .nav-mobile-toggle:checked ~ .nav-items {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--bg-nav);
  }

  /* X close button: eerste item in de overlay, rechts uitgelijnd via flex */
  .nav-mobile-toggle:checked ~ .nav-items .nav-close-item {
    display: flex;
    align-self: flex-end;
    margin-bottom: 1rem;
  }

  /* Hide the hamburger icon when the overlay is open */
  .nav-mobile-toggle:checked ~ .nav-hamburger {
    display: none;
  }

  /* No chevron on mobile */
  .nav-items > li.has-children > a::after,
  .nav-items > li.has-children > span::after {
    content: none;
  }

  /* Each nav item stacks its children below */
  .nav-items > li {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding-block: 0.3rem;
    min-height: auto;
  }

  /* Subitems: always visible in the overlay, normal nested list */
  .nav-subitems--inline {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.3rem 0 0.3rem 1rem;
    width: 100%;
    border-top: none;
    background: transparent;
    list-style-type: circle;
  }

  .nav-subitems--inline > li > a {
    font-size: var(--text-menu);
    font-weight: 400;
    color: var(--color-primary);
  }

  .nav-subitems--inline > li.active > a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ─── Hero Image ────────────────────────────────────────────────────────────── */

.page-hero {
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  background-color: transparent;
  position: relative;
}

.page-hero picture {
  display: block;
  height: 100%;
}

.page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  --streep: url("../images/paint-line-1oK1Xy9.svg");

  mask: var(--streep) right bottom / auto 300px no-repeat;
  -webkit-mask: var(--streep) right bottom / auto 300px no-repeat;
}

@media (max-width: 768px) {
  .page-hero {
    height: 200px;
  }
}
/* ─── Image Block ───────────────────────────────────────────────────────────── */

.image-block--rounded img {
  border-radius: var(--radius);
}

.image-block--shadow img {
  box-shadow: 7px 7px 10px 0px #dddddd;
}

.image-block__caption {
  font-size: 0.8rem;
}

/* ─── Main Content ──────────────────────────────────────────────────────────── */

main {
  flex: 1;
}

.page-content {
  overflow: clip;
  height: 100%;
}

.page-content > .container  {
  height: 100%;
}

.page-content > .container .content-col {
  padding-top: 2.125rem;
  padding-bottom: 4.5rem;
  background-color: var(--bg-page);
  height: 100%;
  /* box-shadow: 12px 0 15px -4px rgba(0, 0, 0, 0.2), -12px 0 8px -4px rgba(0, 0, 0, 0.05); */
}

/* ─── Row / Column layout ────────────────────────────────────────────────────── */

/*
 * The "default" block type is a row that holds sub-blocks as columns.
 * --cols-N sets how many equal columns appear on desktop;
 * narrower viewports collapse to fewer columns automatically.
 *
 * Gutter between columns: var(--col-gap) = 2rem.
 */

:root {
  --col-gap: 2rem;
}

.row-block {
  display: grid;
  gap: var(--col-gap);
  margin-bottom: 2.5rem;
}

.row-block:last-child {
  margin-bottom: 0;
}

.row-block__title {
  margin-bottom: 1rem;
}

/* Desktop column counts */
.row-block--cols-1 { grid-template-columns: 1fr; }
.row-block--cols-2 { grid-template-columns: repeat(2, 1fr); }
.row-block--cols-3 { grid-template-columns: repeat(3, 1fr); }
.row-block--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablet (~768 px – ~1024 px): 4-col → 2-col, 3-col → 2-col */
@media (max-width: 1024px) {
  .row-block--cols-3,
  .row-block--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (< 640 px): everything → single column */
@media (max-width: 640px) {
  .row-block--cols-2,
  .row-block--cols-3,
  .row-block--cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ─── Rich Text (Sulu editor output) ────────────────────────────────────────── */

.rich-text {
  line-height: var(--lh-body);
}

.rich-text p {
  margin-bottom: 1em;
}


/* .rich-text p:last-child {
  margin-bottom: 0;
} */

.rich-text h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.rich-text h3 {
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

.rich-text ul,
.rich-text ol {
  list-style: disc;
  padding-left: 1.5em;
  margin-bottom: 1em;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text li {
  margin-bottom: 0.25em;
}

.rich-text a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 700;
}

.rich-text a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.rich-text strong {
  font-weight: 700;
}

/* Lead / intro paragraph — applied via Sulu block settings or first <p> in certain templates */
.lead,
.rich-text .lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead) !important;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

/* ─── Form block ────────────────────────────────────────────────────────────── */

.form-block {
  margin-block: 1.5rem;
}

/* Basic styling for Sulu Form Bundle output */
.form-block form,
.form-block [id^="dynamic_form"] {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}

/* Field width classes generated by Sulu form theme */
.form-block .width-full           { flex: 0 0 100%; }
.form-block .width-half           { flex: 0 0 calc(50% - 0.5rem); }
.form-block .width-one_third      { flex: 0 0 calc(33.333% - 0.667rem); }
.form-block .width-two_thirds     { flex: 0 0 calc(66.666% - 0.334rem); }
.form-block .width-one_quarter    { flex: 0 0 calc(25% - 0.75rem); }
.form-block .width-three_quarters { flex: 0 0 calc(75% - 0.25rem); }
.form-block .width-one_sixth      { flex: 0 0 calc(16.666% - 0.834rem); }
.form-block .width-five_sixths    { flex: 0 0 calc(83.333% - 0.167rem); }

@media (max-width: 640px) {
  .form-block [class*="width-"] { flex: 0 0 100%; }
}

.form-block label {
  display: block;
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.form-block input,
.form-block textarea,
.form-block select {
  width: 100%;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font);
  font-size: var(--text-body);
  color: var(--color-primary);
  background: var(--bg-page);
  transition: border-color 0.15s;
}

.form-block input:focus,
.form-block textarea:focus,
.form-block select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-block textarea {
  min-height: 120px;
  resize: vertical;
}

.form-block button[type="submit"],
.form-block input[type="submit"] {
  width: auto;
  align-self: flex-start;
  background: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.5rem;
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s;
}

.form-block button[type="submit"]:hover,
.form-block input[type="submit"]:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
}

/* Validation error messages */
.form-block .error,
.form-block [class*="error"] {
  color: var(--color-accent);
  font-size: 0.875rem;
  margin-top: 0.2rem;
}

/* ─── Download block ────────────────────────────────────────────────────────── */

.download-item,
.page-reference,
.vacancy-props {
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid #fafafa;
  box-shadow: 7px 7px 10px 0px #dddddd;
  padding: 1rem 1.25rem;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.download-item:last-child {
  margin-bottom: 0;
}

/*
 * Bold clickable title with a › arrow, matching the style of nav items
 * with children (see .nav-items > li.has-children > span::after).
 */
.download-item__title,
.page-reference__title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}

.download-item__title::after {
  content: '\00a0›';
  font-size: 1em;
  font-weight: bold;
  color: var(--color-accent);
}

.download-item__title:hover {
  color: var(--color-accent);
}

/* Bottom-right "read more" link, with the same › arrow as the title above it */
.page-reference__more {
  align-self: flex-end;
  margin-top: auto;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}

.page-reference__more::after {
  content: '\00a0›';
  font-size: 1em;
  font-weight: bold;
  color: var(--color-accent);
}

.page-reference__more:hover {
  color: var(--color-accent);
}

.download-item__text {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-primary);
  margin-top: 0.2rem;
}

/* ─── Blockquote block ──────────────────────────────────────────────────────── */

/*
 * Single max-content column: its width hugs the widest child (the quote),
 * so the right-aligned footer lines up with the quote's own text box
 * instead of the full (wider) block width.
 */
.blockquote-block {
  display: grid;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: 1rem;
}

.blockquote-block__quote {
  text-align: center;
  font-style: oblique;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary);
}
/* 
.blockquote-block__quote::before {
  content: '\201C';
}

.blockquote-block__quote::after {
  content: '\201D';
} */

.blockquote-block__footer {
  justify-self: end;
  margin-top: 1rem;
  padding: 0;
  background: none;
  text-align: right;
  font-size: var(--text-body);
  color: var(--color-secondary);
}

.blockquote-block__author {
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-primary);
}

/* ─── Document link style ────────────────────────────────────────────────────── */

.rich-text a.doc-link,
a.doc-link {
  font-weight: 700;
  color: var(--color-primary);
}

.rich-text a.doc-link::after {
  content: ' ›';
}

/* ─── School Cards ───────────────────────────────────────────────────────────── */

/*
 * Flex-wrap with justify-content: center ensures that a partial last row
 * is centred as a group rather than left-aligned.
 * Cards have a fixed width of 200px and a 20px gap between them.
 */
.school-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.school-card {
  /* Fixed card width — partial rows are centred by the flex container */
  flex: 0 0 200px;
  min-width: 0;                /* prevent overflow */

  border-radius: var(--radius);
  border: none;
  box-shadow: 7px 7px 10px 0px #ddd;
  padding: 1rem 1.25rem;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
}

/* Brief highlight when a card's marker is clicked on the map — flashes to
   the card's own type colour (see --flash-color per .school-card--* below) */
.school-card--po            { --flash-color: var(--color-primary); }
.school-card--vo            { --flash-color: var(--color-accent); }
.school-card--international { --flash-color: var(--color-second-accent); }

.school-card--flash {
  animation: school-card-flash 0.8s ease-out;
}

@keyframes school-card-flash {
  0%   { background-color: var(--flash-color); }
  100% { background-color: var(--bg-page); }
}

.school-card .info {
  display: flex;
  align-items: center;
}

/* 4 possible icons (address, url, email, phone) — spread evenly, 25% each */
.school-card .info-icon {
  position: relative;
  flex: 0 0 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding-top: 0.25rem;
}

/* Address hidden by default, shown as tooltip on hover (desktop) or focus (mobile tap) */
.school-card .info-icon address {
  display: none;
  position: absolute;
  bottom: calc(100% - 0.5rem);
  left: 0;
  background: var(--bg-page);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px #dddddd;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-primary);
  cursor: auto;
}

.school-card .info-icon:hover address,
.school-card .info-icon:focus-within address {
  display: block;
}

.school-card__name {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

.school-card--vo .school-card__name {
  color: var(--color-accent);
}

.school-card--international .school-card__name {
  color: var(--color-second-accent);
}

.school-card__city {
  align-self: flex-end;
  margin-top: auto;
  font-size: 10px;
  line-height: 1;
  color: var(--color-primary);
}

.school-card address {
  font-style: normal;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.school-card p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  margin: 0;
}

.school-card a {
  font-size: var(--text-body);
  color: var(--color-primary);
  text-decoration: underline;
}

.school-card a:hover {
  color: var(--color-accent);
}

/* On very small screens let cards go full-width */
@media (max-width: 480px) {
  .school-card {
    flex: 0 0 100%;
  }
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */

footer {
  background-color: var(--bg-footer);
  color: #ffffff;
  padding-block: 1.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.footer-brand {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-copy {
  font-size: 0.875rem;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.footer-contact {
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.08em;
}

.footer-contact:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    text-align: center;
  }

  .footer-links {
    align-items: center;
  }
}

/* ─── School map block ───────────────────────────────────────────────────────── */

/*
 * Three-column layout: [PO cards] [map] [VO cards]
 * The map column is given more visual weight (2fr) than the sidebars (1fr each).
 */
.school-map {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-block: 1.5rem;
}

.school-map__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* School cards inside the map layout — no outer school-cards wrapper needed */
.school-map .school-card {
  flex: none;
  width: 100%;
}

/* PO cards: dark-blue name */
.school-map .school-card--po .school-card__name {
  color: var(--color-primary);
}

/* VO cards: pink name */
.school-map .school-card--vo .school-card__name {
  color: var(--color-accent);
}

/* International cards: pink name */
.school-map .school-card--international .school-card__name {
  color: var(--color-second-accent);
}

/* JS sets inline color to --color-accent when a dot is clicked */
.school-map .school-card__name {
  transition: color 0.2s;
}

/* Leaflet map container */
.school-map__map-wrap {
  position: relative;
  z-index: 0;
}

.school-map__leaflet {
  height: 480px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Leaflet's own stylesheet is imported by the UX map controller, so the browser
   appends it to <head> at runtime — always after app.css, whatever order the
   two are authored in. Its `.leaflet-container` / `.leaflet-tooltip` rules are
   single-class selectors, exactly like the ones below, so at equal specificity
   source order decides and Leaflet would win. The extra class in these two
   selectors settles it on specificity instead, independent of load order.
   Keep `background` out of the rule above: that one is deliberately left at
   single-class specificity so the mobile height override further down still
   applies. */
.school-map__map-wrap .school-map__leaflet {
  background: #fff; /* Leaflet's default #ddd shows around/behind the drawn map image */
}

/* Dev-only: toggle for comparing the drawing against real OpenStreetMap tiles */
.school-map__debug-toggle {
  position: absolute;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-family: var(--font);
  color: var(--color-primary);
}

/* Leaflet cursor on markers/clusters */
.school-map__leaflet .leaflet-interactive,
.school-map__leaflet .leaflet-marker-icon {
  cursor: pointer;
}

/* Permanent label under each marker — see the specificity note above for why
   this is chained with .leaflet-tooltip rather than standing on its own. */
.leaflet-tooltip.school-map-label {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary);
  text-shadow:
    0 0 3px #fff,
    0 0 3px #fff,
    0 0 3px #fff;
}

/* Hides Leaflet's little white pointer triangle under the tooltip. */
.leaflet-tooltip.school-map-label::before {
  display: none;
}

/* Brief highlight when a card in the sidebar is clicked.
   Leaflet positions the icon via an inline `transform: translate3d(...)`,
   so this only ever animates `opacity` — anything touching `transform`
   (including the standalone `scale`/`translate` properties) fights that
   positioning and makes the icon jump or slide. */
.school-map-marker--flash {
  animation: school-map-marker-flash 1s ease-out 0.3s;
  animation-fill-mode: backwards; /* stay at 0% opacity during the delay, instead of flashing early at full opacity */
}

@keyframes school-map-marker-flash {
  0%   { opacity: 0.15; }
  100% { opacity: 1; }
}

/* Tablet: stack map above cards */
@media (max-width: 1024px) {
  .school-map {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "map   map"
      "left  right";
  }

  .school-map__map-wrap     { grid-area: map; }
  .school-map__sidebar--left  { grid-area: left; }
  .school-map__sidebar--right { grid-area: right; }
}

ul.vacancy-props {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  flex-wrap:wrap; 
  flex-direction:row; 
}

ul.vacancy-props li {
  flex: 0 1 auto;
  width: 50%;
  display: inline-block;
  font-weight: bold;
}

ul.vacancy-props li label {
  width: 50%;
  display: inline-block;
  font-weight: normal;
}

/* Mobile: single column */
@media (max-width: 640px) {
  .school-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "map"
      "left"
      "right";
  }

  .school-map__leaflet {
    height: 420px;
  }

  ul.vacancy-props li {
    width: 100%;
  }

  /* 2 cards per row instead of stacked full-width */
  .school-map__sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .school-map .school-card {
    width: calc(50% - 0.5rem);
  }

}

/* Mobile: single column */
@media (max-width: 350px) {
  ul.vacancy-props li label {
    width: 100%;
  }

}