@charset "utf-8";
/*
 * Layout www.brevet.aero (KNVvL Examinering Instituut)
 * Gebaseerd op de oude SiteEngine-layout (web/css/style.css), opgeschoond:
 * responsive (desktop 960px, tablet, mobiel met inklapbaar menu), toegankelijk
 * (focus-stijlen, voldoende contrast) en zonder externe bronnen.
 */

:root {
  --blauw-tekst: #15377a;
  --blauw-kop: #003a81;
  --blauw-header-link: #05499e;
  --blauw-achtergrond: #8dc5eb;
  --oranje: #ff7213;
  --oranje-link: #ff8c3f;      /* links in de tekst, huisstijlkleur oude site */
  --oranje-sub: #ff7213;       /* submenu-achtergrond, huisstijlkleur oude site */
  --oranje-actief: #713106;    /* tekst op actief menu-item */
  --menu-blauw-boven: #2b9be6;
  --menu-blauw-onder: #0a6fb5;
  --focus: #ffbf47;
  --wit: #fff;
}

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

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

body {
  margin: 0;
  background-color: var(--blauw-achtergrond);
  color: var(--blauw-tekst);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.75;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; }

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--blauw-kop);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--blauw-kop);
  color: var(--wit);
  font-weight: bold;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

.top-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 920px;
  background: url("/assets/img/background.jpg") no-repeat center top;
  z-index: -1;
}

.wrapper {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 20px;
}

/* ------------------------------------------------------------- header */

.site-header {
  position: relative;
  height: 136px;
  margin-top: 15px;
  border: 1px solid var(--wit);
  background: #2ea4ee url("/assets/img/header-desktop.jpg") no-repeat left top;
}

.logo {
  position: absolute;
  left: 0; top: 0;
  width: 300px; height: 134px;
}

.search {
  position: absolute;
  top: 0; right: 0;
  display: flex;
}
.search input {
  width: 143px; height: 24px;
  margin: 0; padding: 0 6px;
  border: 0; border-radius: 0;
  background: var(--wit);
  color: var(--blauw-tekst);
  font: 12px Arial, Helvetica, sans-serif;
  -webkit-appearance: none; appearance: none;
}
.search button {
  display: block;
  margin: 0; padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.header-menu {
  position: absolute;
  top: 0; left: 457px;
}
.header-menu ul, .site-footer ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0; padding: 0;
  list-style: none;
}
.header-menu li + li::before {
  content: "-";
  padding: 0 7px;
  color: var(--blauw-header-link);
}
.header-menu a {
  color: var(--blauw-header-link);
  font: 11px/22px Verdana, Geneva, sans-serif;
  text-decoration: none;
}
.header-menu a:hover, .header-menu a[aria-current] { text-decoration: underline; }

/* ------------------------------------------------------------- inhoud */

.content-box {
  display: flex;
  align-items: flex-start;
  min-height: 400px;
  margin-top: 16px;
  border: 1px solid var(--wit);
  background: var(--wit);
}
.page-content .content-box {
  background: var(--wit) url("/assets/img/dots.gif") right top repeat-y;
}

.left {
  flex: 0 0 236px;
  width: 236px;
}

.menu-toggle {
  display: none;
}

.leftmenu ul {
  margin: 0; padding: 0;
  list-style: none;
}
.categories {
  margin: -1px 0 0 0;
  font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.categories a {
  display: block;
  margin-top: 1px;
  padding: 3px 8px 3px 20px;
  line-height: 27px;
  color: var(--wit);
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.categories > li.normal > a {
  background: linear-gradient(var(--menu-blauw-boven), var(--menu-blauw-onder));
}
.categories > li.normal > a:hover,
.categories > li.current > a {
  background: url("/assets/img/oranjeverloop.gif") repeat, var(--oranje);
  color: var(--oranje-actief);
  text-shadow: none;
}

.submenu a {
  padding: 1px 8px 1px 30px;
  background: var(--oranje-sub);
  color: var(--wit);
  font-weight: normal;
  font-size: 14px;
  text-shadow: none;
}
.submenu-deep a { padding-left: 44px; font-size: 13px; }
.submenu li.sub_current > a,
.submenu a:hover {
  background: var(--oranje);
  color: var(--oranje-actief);
  font-weight: bold;
}

.leftbanner { margin-top: 15px; line-height: 0; }
.leftbanner img { display: block; width: 234px; }
.logobottomhome { display: inline-block; margin: 54px 0 20px 24px; }

.middle {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 580px;
  padding: 40px;
  overflow-wrap: anywhere;
}
.page-home .middle { max-width: none; }
.middle:focus { outline: none; }

.right {
  flex: 0 0 234px;
  line-height: 0;
}

h1, h2, h3, h4 {
  color: var(--blauw-kop);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3;
}
h1, h2 { font-size: 19px; margin: 10px 0; }
h3 { font-size: 15px; margin: 14px 0 6px; }
h4 { font-size: 13px; margin: 12px 0 4px; }

.middle p { margin: 0 0 10px; }
.middle ul, .middle ol { margin: 0 0 10px; padding-left: 30px; }
.middle li { margin: 0; }
.middle a { font-weight: bold; text-decoration: none; }
.middle a:hover, .middle a:focus-visible { text-decoration: underline; }
.middle img { vertical-align: middle; }
.middle hr { border: 0; border-top: 1px solid #c9d6e8; margin: 16px 0; }
.middle blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid #c9d6e8; }

.middle table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 12px;
  border-collapse: collapse;
}
.middle th, .middle td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
  text-align: left;
}
.middle table.met_rand, .middle .met_rand th, .middle .met_rand td,
.middle table:has(thead) th, .middle table:has(thead) td {
  border: 1px solid #c9d6e8;
  padding: 3px 8px;
}

.print-button { margin: 15px 0 0; clear: both; }
.print-link { border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; }

/* ------------------------------------------------------------- sitemap + zoeken */

.sitemap, .sitemap ul { list-style: none; padding-left: 0; }
.sitemap ul { padding-left: 22px; }
.sitemap li::before { content: "· "; }

.search-form label { display: block; font-weight: bold; margin-bottom: 4px; }
.search-row { display: flex; gap: 6px; flex-wrap: wrap; }
.search-row input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid #8aa0c4;
  border-radius: 3px;
  font: inherit;
  color: var(--blauw-tekst);
}
.search-row button {
  padding: 4px 16px;
  border: 0; border-radius: 3px;
  background: var(--oranje-sub);
  color: var(--wit);
  font: bold 13px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.search-status { margin-top: 12px; font-style: italic; }
.search-results { padding-left: 22px; }
.search-results li { margin-bottom: 12px; }
.search-results p { margin: 0; }
.search-results mark { background: #ffe3c4; color: inherit; }
.search-results .url { color: #4d628f; font-size: 12px; }

/* ------------------------------------------------------------- footer */

.site-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding: 10px 0;
  text-align: center;
}
.footer-logo { line-height: 0; }
.site-footer li + li::before { content: "-"; padding: 0 6px; }
.site-footer a { color: var(--blauw-kop); }

/* ------------------------------------------------------------- tablet */

@media (max-width: 992px) {
  .wrapper { padding: 0 15px 20px; }
  .site-header { background-image: url("/assets/img/header-tablet.jpg"); }
  .header-menu { left: auto; right: 15px; top: 30px; }
  .header-menu a, .header-menu li + li::before { color: var(--wit); }
  .left { flex-basis: 225px; width: 225px; }
  .right { display: none; }
  .page-content .content-box { background-image: none; }
}

/* ------------------------------------------------------------- mobiel */

@media (max-width: 600px) {
  .wrapper { padding: 0 10px 20px; }
  .top-back { display: none; }

  .site-header {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 10px;
    background: #48a1f3 url("/assets/img/header-mobile.jpg") no-repeat center 40px;
  }
  .header-menu {
    position: static;
    order: 1;
    padding: 4px 12px;
    background: var(--oranje-link);
  }
  .header-menu a, .header-menu li + li::before { color: var(--wit); }
  .logo {
    position: static;
    order: 2;
    display: block;
    width: 191px; height: 106px;
    margin: 0 auto;
  }
  .search {
    position: static;
    order: 3;
    padding: 8px;
  }
  .search input { flex: 1 1 auto; height: 28px; font-size: 16px; }
  .search button img { height: 28px; width: auto; }

  .content-box { flex-direction: column; align-items: stretch; margin-top: 10px; }
  .left { flex: none; width: 100%; }

  .js .menu-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 20px;
    border: 0;
    background: linear-gradient(var(--menu-blauw-boven), var(--menu-blauw-onder));
    color: var(--wit);
    font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .js .menu-toggle::before {
    content: "";
    width: 18px; height: 12px;
    border-top: 2px solid; border-bottom: 2px solid;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }
  .js .menu-toggle[aria-expanded="false"] + .leftmenu { display: none; }

  .categories a { padding-top: 6px; padding-bottom: 6px; }
  .leftbanner, .logobottomhome { display: none; }
  .middle { max-width: none; padding: 20px; }
  .page-content .content-box { background-image: none; }
}

/* ------------------------------------------------------------- print */

@media print {
  body { background: none; color: #000; font-size: 11pt; }
  .top-back, .skip-link, .site-header, .left, .right, .site-footer, .print-button { display: none !important; }
  .wrapper, .content-box { width: auto; margin: 0; border: 0; background: none !important; display: block; }
  .middle { max-width: none; padding: 0; }
  .middle a { color: #000; text-decoration: underline; }
  .middle a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: normal; font-size: 9pt; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}