/*
  Uptune 2027 design tokens + a small set of hover utility classes.

  The source Claude Design mockup styles almost everything inline and uses a
  design-tool-only `style-hover="..."` attribute for hover states, which has no
  effect in a real browser. This file supplies the :root tokens the inline
  styles reference (var(--brand) etc.) plus real CSS for those repeated hover
  patterns, as reusable classes (u-navlink, u-btn-brand, u-btn-accent,
  u-card-link, u-link).

  Loaded after theme.min.css / my.css so it wins on typography and color for
  the redesigned public pages.
*/

:root {
  --brand: #010C80;
  --brand-rgb: 1, 12, 128;
  --brandhi: #0019D8;
  --accent: #00FFEF;
  --sky: #77D4FC;
  --ink: #0B1024;
  --ink-rgb: 11, 16, 36;
  --surface: #FFFFFF;
  --panel: #F4F6FB;
  --ondark: #FFFFFF;
  --ondark-rgb: 255, 255, 255;

  /*
    Displaytypografie. Het ontwerp zet deze vier waarden samen om tussen twee
    letterbeelden: 'Archivo' (standaard) en 'Bebas Neue'. Wil je het alternatief,
    laad dan Bebas Neue in base.html en zet hier:
      --display:'Bebas Neue'; --dw:400; --dls:.005em; --dm:1.2;
  */
  --display: 'Archivo';
  --dw: 400;
  --dls: -.032em;
  --dm: 1;

  --u-display: var(--display), system-ui, sans-serif;
  --u-body: 'Exo 2', system-ui, sans-serif;
  --u-mono: 'IBM Plex Mono', monospace;

  /*
    Merkelement (de faders). --mk schaalt het beeldmerk zelf, de cap-maten
    schalen de losse schuifjes. "prominent" (standaard) versus "subtiel":
      prominent: 22/8/28/82px, --mk 1.4
      subtiel:   14/6/20/52px, --mk 1
  */
  --capW: 22px;
  --capH: 8px;
  --capW2: 28px;
  --faderW: 82px;
  --mk: 1.4;
}

.u-page {
  font-family: var(--u-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

/*
  Displaykoppen (h1/h2): gewicht en tracking komen uit de tokens, zodat het
  omschakelen van letterbeeld één plek is. Subkoppen (h3) blijven iets zwaarder
  en minder strak — net als in het ontwerp.
*/
.u-page h1, .u-page h2, .u-page .u-display {
  font-family: var(--u-display);
  font-weight: var(--dw);
  letter-spacing: var(--dls);
}

.u-page h3 {
  font-family: var(--u-display);
  font-weight: 500;
  letter-spacing: -.022em;
}

.u-mono {
  font-family: var(--u-mono);
}

@keyframes u-up-rise {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}

.u-rise {
  animation: u-up-rise .7s ease both;
}

/* Nav links: ink -> brand on hover, with an "active" state pinned to brand */
.u-navlink {
  color: rgba(var(--ink-rgb), .66);
  text-decoration: none;
  transition: color .15s ease;
}
.u-navlink:hover { color: var(--brand); }
.u-navlink.is-active { color: var(--brand); }

/* Plain text link with an arrow, brand colored */
.u-link {
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
}
.u-link:hover { color: var(--brandhi); }

/* Primary pill button: brand -> brandhi on hover */
.u-btn-brand {
  display: inline-block;
  background: var(--brand);
  color: var(--ondark);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  border: 0;
  text-decoration: none;
  transition: background-color .15s ease;
  cursor: pointer;
}
.u-btn-brand:hover { background: var(--brandhi); color: var(--ondark); }

/* Accent pill button (used on dark/brand backgrounds): accent -> white on hover */
.u-btn-accent {
  display: inline-block;
  background: var(--accent);
  color: var(--brand);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  border: 0;
  text-decoration: none;
  transition: background-color .15s ease;
  cursor: pointer;
}
.u-btn-accent:hover { background: var(--ondark); color: var(--brand); }

/* Secundaire knop naast de hoofd-CTA: rand in plaats van vlak */
.u-btn-ghost {
  display: inline-block;
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb), .14);
  color: var(--ink);
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.u-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* De drie stappen naast de hero: hele regel kleurt mee op hover */
.u-steplink {
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}
.u-steplink:hover { color: var(--brand); }

/* Rij in de downloadlijst: hele rij kleurt mee op hover */
.u-rowlink {
  text-decoration: none;
  transition: color .15s ease;
}
.u-rowlink:hover { color: var(--brand); }

/* Kaartje in het "Opleiden"-blok: rand en tekst kleuren mee op hover */
.u-tilelink {
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.u-tilelink:hover {
  border-color: rgba(var(--brand-rgb), .45);
  color: var(--brand);
}

/* --- Over ons -------------------------------------------------------------
   Het ontwerp van deze pagina gebruikt een eigen cyaan (#00E4DF) en een eigen
   paneelkleur voor hover; vandaar deze aparte klassen naast de sitebrede set. */

.u-stapkaart {
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease;
}
.u-stapkaart:hover { background: #eaeef8; color: var(--ink); }

.u-onderlijnd {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  padding-bottom: 2px;
}
.u-onderlijnd:hover { color: #172794; border-color: #172794; }

.u-btn-cyaan {
  background: #00E4DF;
  color: var(--brand);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}
.u-btn-cyaan:hover { background: #b3fcf8; color: var(--brand); }

.u-link-ondark {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-bottom: 2px;
}
.u-link-ondark:hover { color: #00E4DF; border-color: #00E4DF; }

/* Hoverable panel-card used for role/course/case link-cards */
.u-card-link {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 20px;
  padding: 30px 28px 26px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.u-card-link:hover {
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), .35) inset;
  color: var(--ink);
}

.u-pill {
  display: inline-block;
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: rgba(var(--ink-rgb), .7);
}

.u-cap {
  width: var(--capW);
  height: var(--capH);
  border-radius: 2px;
  background: var(--accent);
  display: inline-block;
}

/* Bredere cap, gebruikt in de niveau-aanduiding op opleidingskaarten */
.u-cap2 {
  width: var(--capW2);
  height: var(--capH);
  border-radius: 2px;
  display: inline-block;
}

/* Het beeldmerk schaalt mee met --mk; de hoogte volgt uit de viewBox */
.u-mark {
  flex: none;
  width: calc(var(--u-mark-size, 22px) * var(--mk));
  height: auto;
}

/* Het losse faderteken bij de stapkoppen; breedte komt uit --faderW */
.u-fader {
  flex: none;
  width: var(--faderW);
  height: auto;
}

/*
  Retint the Bootstrap "Silicon" theme's primary color to the new brand navy
  wherever it survives inside a redesigned page (kept real content: the
  testimonials/FAQ/"why us" sections in index.html use plain Bootstrap
  .btn-primary/.text-primary/etc.). Most Silicon components read color through
  the --si-primary(-rgb) custom properties, which cascade normally — but a
  handful of utility classes bake the old indigo in as a literal hex with
  !important, so those need direct, higher-specificity overrides here.
*/
.u-page {
  --si-primary: var(--brand);
  --si-primary-rgb: var(--brand-rgb);
}
.u-page .text-primary { color: var(--brand) !important; }
.u-page .border-primary { border-color: rgba(var(--brand-rgb), .35) !important; }
.u-page .shadow-primary { box-shadow: 0 .5rem 1.125rem -0.5rem rgba(var(--brand-rgb), .9) !important; }
.u-page .bg-faded-primary { background-color: rgba(var(--brand-rgb), .1) !important; }
.u-page .bg-gradient-primary { background: linear-gradient(90deg, var(--brand) 0%, var(--brandhi) 60%, var(--sky) 100%) !important; }
.u-page .bg-secondary { background-color: var(--panel) !important; }
.u-page .btn-primary {
  --si-btn-bg: var(--brand);
  --si-btn-border-color: var(--brand);
  --si-btn-color: #fff;
  --si-btn-hover-bg: var(--brandhi);
  --si-btn-hover-border-color: var(--brandhi);
  --si-btn-hover-color: #fff;
  --si-btn-active-bg: var(--brandhi);
  --si-btn-active-border-color: var(--brandhi);
}
.u-page .btn-outline-primary {
  --si-btn-color: var(--brand);
  --si-btn-border-color: var(--brand);
  --si-btn-hover-bg: var(--brand);
  --si-btn-hover-border-color: var(--brand);
  --si-btn-hover-color: #fff;
  --si-btn-active-bg: var(--brand);
  --si-btn-active-border-color: var(--brand);
}

/* Header altijd boven de pagina-inhoud. Zonder z-index (vóór het scrollen, als
   de header nog niet "stuck" is) schilderden gepositioneerde elementen verderop,
   zoals de fotostrook op de homepage, over het Account-menu heen. */
.header.navbar {
  position: relative;
  z-index: 1030;
}

/* Het theme opent navbar-dropdowns op hover, met een kleine tussenruimte tussen
   het menu-item en het menu. Deze onzichtbare brug houdt de hover vast terwijl
   de muis naar beneden beweegt, zodat het menu niet dichtklapt. */
.navbar .navbar-nav .dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1rem;
}


/* --- Update oktober 2026: home, in kaart brengen, automatiseren ------------
   Het ontwerp toont de trap of een lijst met JS op basis van de vensterbreedte
   (trapBreed/trapSmal) en gebruikt het design-tool-only `style-hover`. Hier
   staat de echte CSS-variant. */

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

.u-anker { scroll-margin-top: 90px; }

/* Trap: breed (>= 1100px) met labels op de afbeelding, smal als lijst */
.u-trap-smal { display: none; }
@media (max-width: 1099.98px) {
  .u-trap-breed { display: none; }
  .u-trap-smal { display: flex; }
}
.u-trap-link {
  color: var(--brand);
  text-decoration: none;
}
.u-trap-link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Knoppen met de vlakke "pill"-vorm van de nieuwe pagina's */
.u-btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 23px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.u-btn-solid:hover { background: #172794; border-color: #172794; color: #fff; }

.u-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 23px;
  border: 1px solid #dce0eb;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.u-btn-outline:hover { border-color: var(--brand); color: var(--brand); }

/* Cyaan knop op de donkerblauwe vlakken */
.u-btn-cyaan-vol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 23px;
  border: 1px solid #00E4DF;
  border-radius: 999px;
  background: #00E4DF;
  color: var(--brand);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.u-btn-cyaan-vol:hover { background: #b3fcf8; border-color: #b3fcf8; color: var(--brand); }

/* Tekstlink met streepje eronder (en de variant die pas bij hover onderstreept) */
.u-streeplink {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--brand);
  font-size: 15px;
  color: var(--brand);
  text-decoration: none;
}
.u-streeplink:hover { color: var(--brand); }
.u-streeplink-zacht { border-color: transparent; }
.u-streeplink-zacht:hover { border-color: var(--brand); }

/* Drie stappen onder "Van experiment naar werk dat vanzelf loopt" */
.u-stap {
  flex: 1 1 240px;
  padding: 26px 28px 28px 0;
  border-top: 1px solid #dce0eb;
  color: var(--ink);
  text-decoration: none;
}
.u-stap:hover { color: var(--brand); }
@media (min-width: 760px) {
  .u-stap + .u-stap { padding-left: 28px; border-left: 1px solid #dce0eb; }
}

/* Uitklapbare rollen in het Opleiden-blok (details/summary, werkt zonder JS) */
.u-acc { border-bottom: 1px solid #dce0eb; }
.u-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-family: var(--u-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}
.u-acc > summary::-webkit-details-marker { display: none; }
.u-acc > summary::after { content: "+"; font-weight: 400; color: var(--brand); }
.u-acc[open] > summary::after { content: "\2212"; }

.u-merklink { color: #fff; text-decoration: none; }
.u-merklink:hover { color: #00E4DF; }

/* Feedbackblok */
.u-feedback-nav {
  width: 42px;
  height: 42px;
  border: 1px solid #dce0eb;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease;
}
.u-feedback-nav:hover { border-color: var(--brand); }

/* ShiftMap: 3D-gekantelde schermafbeelding */
.u-sm-schuin {
  position: absolute;
  left: 6%;
  right: -14%;
  top: 44px;
  bottom: -60px;
  background: #fff url("../img/uptune/sm-flowdiagram.png") no-repeat;
  background-size: 170% auto;
  background-position: 30% 30%;
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(1, 12, 128, .35);
  transform: rotateX(14deg) rotateZ(-3deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%), linear-gradient(to right, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 30%, transparent 92%), linear-gradient(to right, transparent 0%, #000 14%);
  mask-composite: intersect;
}