navigation.css

/* Updated to match Algoritmeregister styling and design patterns */

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background-color: #154273;
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  font-weight: bold;
  font-size: 0.9rem;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid white;
  outline-offset: 2px;
}

.skip-link:hover {
  background-color: #0066a3;
}

/* Make main content focusable for skip link */
#main-content {
  outline: none;
}

#main-content:focus {
  outline: 2px solid #154273;
  outline-offset: 2px;
}

/* WCAG AA: Improve contrast for logo and interactive elements */
.md-header__button.md-logo {
  padding: 4px;
  border-radius: 4px;
}

.md-header__button.md-logo:focus {
  outline: 3px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.1) !important;
}

/* Ensure sufficient contrast for interactive elements */
button, .md-button {
  border: 1px solid transparent;
}

button:focus, .md-button:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.1) !important;
}

/* Adjust root font size for better tooltip readability */
html {
  font-size: 16px; /* Larger root size for better browser tooltips */
}

/* Body font size adjusted to compensate for larger root size */
body {
  font-size: 0.984375rem; /* (14px / 16px) * 1.125rem = same visual size */
}

:root {
  /* Algoritmeregister color scheme - CORRECTED */
  --primary-blue: #007bc7;
  --dark-blue: #154273;
  --light-blue: #b2d7ee;
  --bg-light-blue: #e5f1f9;
  --bg-very-light-blue: #f2f8fc;
  --neutral-gray: #f3f3f3;
  --dark-gray: #333;
  --muted-gray: #555;
  --text-color: #154273;
  --white: #fff;
  --orange-accent: #e17000;
  --green-accent: #39870c;
}

/* Tabs Styling - Updated to match Algoritmeregister */
.md-tabs {
  background-color: var(--primary-blue);
  color: var(--white) !important;
  border-bottom: 6px solid var(--light-blue);
  min-height: 44px;
  display: flex;
  position: static;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.md-tabs__list {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
}

.md-tabs__list::-webkit-scrollbar {
  display: none;
}

.md-tabs__item {
  flex-shrink: 0;
  min-width: auto;
  height: 44px;
  display: flex;
  align-items: center;
}

.md-tabs .md-grid {
  background-color: var(--primary-blue);
  color: var(--white);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  max-width: var(--md-main-max-width, 61rem);
}

.md-tabs__item--active {
  background-color: var(--light-blue);
}

.md-tabs__link {
  text-decoration: none;
  color: #FFFFFF;
  opacity: 100%;
  padding: 0rem 0.15rem;
  margin: auto 0;
  font-size: 0.875rem;
  white-space: nowrap;
  line-height: 44px;
  height: 44px;
  display: flex;
  box-sizing: border-box;
}

/* Header Styling */
.md-header {
  background-color: white;
  height: auto;
  align-content: center;
}

h1{
  color: #154273 !important;
  font-weight: 900 !important;
}

.md-header__inner {
  height: 60px;
}

.md-header--shadow {
  box-shadow: none;
}

.md-header__button.md-logo img {
  height: 55px; /* Adjust to the desired height */
  width: auto; /* Keeps the aspect ratio */
}

.md-header__button.md-logo {
  pointer-events: auto; /* Enable hover and click */
}

.md-header__button.md-logo:hover {
  background-color: transparent !important;
}

.md-header__topic {
  display: none;
}

/* Ensure hover and focus effects are applied to the link itself */
.md-tabs__list .md-tabs__item .md-tabs__link:hover,
.md-tabs__list .md-tabs__item .md-tabs__link:focus {
  color: #154273 !important; /* Same color as active */
  background-color: #b2d7ee !important;
}

/* Apply color and background on both link and item on hover and focus */
.md-tabs__item:hover,
.md-tabs__item:hover .md-tabs__link,
.md-tabs__link:hover,
.md-tabs__item:focus-within,
.md-tabs__item:focus-within .md-tabs__link {
  color: var(--dark-blue) !important; /* Set text color to blue */
  background-color: var(--light-blue) !important; /* Set background color to light blue */
}

.md-tabs__item:hover .md-tabs__link,
.md-tabs__item:focus-within .md-tabs__link {
  color: #154273 !important; /* Zorgt ervoor dat de link blauw blijft als je over het tab-item zweeft */
}

.md-tabs__item:hover,
.md-tabs__item:focus-within {
  background-color: #b2d7ee !important;
  color: #154273 !important;
}

/* Active tab styling - only for actually active pages, not focus */
.md-tabs .md-tabs__list .md-tabs__item--active .md-tabs__link {
  color: #154273 !important; /* Active color */
  background-color: #b2d7ee !important; /* Active background */
}

/* Enhanced focus states for accessibility */
.md-tabs__link:focus {
  color: #FFFFFF !important; /* Keep white text on focus */
  outline: 3px solid #FFFFFF !important;
  outline-offset: -3px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Focus states for search */
.md-search__input:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  border-color: #154273 !important;
}

/* Focus states for navigation links */
.md-nav__link:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.1) !important;
}


/* Focus states for buttons */
button:focus, .md-header__button:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
}

/* Focus states for links in content */
.md-content a:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.1) !important;
}

/* Focus states for definition tooltips and elements with title attributes */
abbr[data-tooltip]:focus,
abbr[title]:focus,
[title]:focus,
.md-typeset abbr:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.15) !important;
  position: relative;
  z-index: 1;
}

/* Ensure tooltip elements are keyboard accessible and show focus states */
abbr[data-tooltip],
abbr[title],
[title]:not(img):not(.md-header__button):not(.md-nav__button):not(.md-search__button) {
  cursor: help;
  border-bottom: 1px dotted #154273;
  text-decoration: none;
  position: relative;
}

/* Enhanced hover and focus states for better visibility */
abbr[data-tooltip]:hover,
abbr[data-tooltip]:focus,
abbr[title]:hover,
abbr[title]:focus,
[title]:not(img):not(.md-header__button):not(.md-nav__button):not(.md-search__button):hover,
[title]:not(img):not(.md-header__button):not(.md-nav__button):not(.md-search__button):focus {
  background-color: rgba(21, 66, 115, 0.15) !important;
  border-bottom: 2px solid #154273 !important;
  border-radius: 2px;
  color: #154273 !important;
}

/* Stronger focus indicators for keyboard users */
[title][tabindex="0"]:focus,
[title][tabindex]:focus,
abbr[title][tabindex="0"]:focus,
abbr[title][tabindex]:focus {
  outline: 3px solid #154273 !important;
  outline-offset: 1px !important;
  background-color: rgba(21, 66, 115, 0.2) !important;
}

/* Specific styling for MkDocs abbreviations from begrippenlijst */
.md-typeset abbr[data-tooltip] {
  border-bottom: 1px dotted #154273 !important;
  text-decoration: none !important;
  cursor: help !important;
  position: relative;
}

.md-typeset abbr[data-tooltip]:hover,
.md-typeset abbr[data-tooltip]:focus {
  background-color: rgba(21, 66, 115, 0.15) !important;
  border-bottom: 2px solid #154273 !important;
  border-radius: 2px;
  color: #154273 !important;
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
}

/* Also target general elements with title attribute in md-typeset */
.md-typeset [title]:not(img):not(button):not(.md-header__button):not(.md-nav__button) {
  border-bottom: 1px dotted #154273;
  cursor: help;
  position: relative;
}

.md-typeset [title]:not(img):not(button):not(.md-header__button):not(.md-nav__button):hover,
.md-typeset [title]:not(img):not(button):not(.md-header__button):not(.md-nav__button):focus {
  background-color: rgba(21, 66, 115, 0.15) !important;
  border-bottom: 2px solid #154273 !important;
  border-radius: 2px;
  color: #154273 !important;
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
}

/* External links and GitHub links styling */
a[href*="github.com"]:focus,
a[href*="GitHub"]:focus,
a[target="_blank"]:focus,
.is-external-link-icon:focus {
  outline: 2px solid #154273 !important;
  outline-offset: 2px !important;
  background-color: rgba(21, 66, 115, 0.1) !important;
  border-radius: 2px;
}

/* Fix filter tag styling for better visibility */
.choices__list--multiple .choices__item {
  background-color: #154273 !important;
  border: 1px solid #123456 !important;
  color: white !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  margin-bottom: 4px !important;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #0066a3 !important;
  border: 1px solid #004d7a !important;
}

/* Fix filter input styling */
.choices__inner {
  background-color: white !important;
  border: 1px solid #ccc !important;
  min-height: 44px !important;
}

.choices__input {
  background-color: transparent !important;
  color: #154273 !important;
}

.md-search__input{
  background: #fff !important;
  color: #154273 !important;
  border: #154273 solid 1px !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  padding: 8px 12px 8px 40px !important; /* Left padding for icon space */
  height: 36px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.md-search__form{
  color: #154273;
}

.md-search__input::placeholder {
  color: #333333; /* Set your desired color */
  opacity: 1; /* Ensures the color appears as expected */
  font-size: 1rem !important; /* Larger placeholder text */
  font-family: "ROsanswebtextregular" !important;
}

.md-search__input+.md-search__icon{
  color: #333333;
  width: 18px !important;
  height: 18px !important;
  position: absolute !important;
  top: 9px !important;
  left: 12px !important;
  pointer-events: none !important;
}

.md-search__suggest{
  color: #154273;
}

.md-search__overlay{
  background-color: rgba(0, 0, 0, 0.6);
}

.md-search__output {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 75vh;
  overflow-y: auto;
}

.md-search-result {
  border-bottom: 1px solid #e5e7eb;
  padding: 0;
}

.md-search-result__title,
.md-search-result h1,
.md-search-result h2 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #154273 !important;
  text-decoration: none;
  line-height: 1.4 !important;
  margin: 4px 0 4px 0 !important;
  padding: 0 !important;
  display: block;
  background: none !important;
  border: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.md-search-result__title:hover,
.md-search-result h1:hover,
.md-search-result h2:hover {
  color: #0066a3 !important;
}

.md-search-result__article {
  font-size: 0.984375rem;
  color: #154273;
  margin-bottom: 4px;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.md-search-result__text {
  font-size: 0.984375rem;
  color: #154273;
  line-height: 1.4;
}

.md-search-result__meta {
  background-color: var(--md-default-fg-color--lightest);
  color: #154273 !important;
  font-size: 0.984375rem !important;
  line-height: 1.4 !important;
  padding: 16px 12px 8px 12px !important;
  scroll-snap-align: start;
}

.md-search-result p,
.md-search-result__article p,
.md-search-result a,
.md-search-result__text a,
.md-search-result__article a {
  font-size: 0.984375rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  color: #154273 !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.md-search-result__more,
.md-search-result__more div,
.md-search-result__more summary {
  font-size: 0.984375rem !important;
  line-height: 1.4 !important;
  color: #154273 !important;
  pointer-events: none !important;
  cursor: default !important;
}

.md-search-result__more details {
  pointer-events: none !important;
}

.md-header__source{
  color: #154273;
}

/* Search always uses mobile-style positioning */

/* Align navigation tabs container with main content layout */
.md-tabs {
  width: 100%;
}

.md-tabs .md-grid {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.md-typeset a {
  color: #154273;
}

.md-ellipsis{
  color: #154273;
}

:root {
  --md-typeset-a-color: #154273;
}

/* Navigation font size override */
.md-nav {
  font-size: 1rem !important;
  line-height: 1.4 !important;
}

/* Keep abbreviation text at normal size - only tooltip should be bigger */
abbr[title] {
  font-size: inherit !important;
}

/* Fix breadcrumb font size - keep normal */
.md-ellipsis {
  font-size: 0.875rem !important; /* Reset to normal breadcrumb size */
}

/* Custom tooltip implementation to replace browser tooltips */
abbr[data-tooltip] {
  position: relative;
  cursor: help;
  font-size: inherit !important; /* Keep abbreviation text at normal size */
}

/* Show custom tooltip on hover and focus - NUCLEAR CSS */
abbr[data-tooltip]:hover::after,
abbr[data-tooltip]:focus::after {
  content: attr(data-tooltip) !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: white !important;
  padding: 12px 16px !important; /* Even more padding */
  border-radius: 6px !important;
  font-size: 14px !important; /* Smaller, more readable font */
  font-weight: normal !important;
  white-space: normal !important;
  max-width: 70vw !important; /* 70% of viewport width */
  min-width: 400px !important; /* Bredere minimum width */
  z-index: 99999 !important; /* Super high z-index */
  pointer-events: none !important;
  margin-bottom: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.4 !important;
  text-align: center !important;
  display: block !important;
}

/* Arrow for custom tooltip on hover and focus */
abbr[data-tooltip]:hover::before,
abbr[data-tooltip]:focus::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  margin-bottom: 2px;
  z-index: 1001;
  pointer-events: none;
}

/* Hide the native tooltip by removing title on hover and restoring on mouse leave */
abbr[data-tooltip]:hover {
  /* Custom tooltip replaces native one */
}

.md-nav__title{
  color: #154273;
}

.md-nav--primary .md-nav__title[for=__drawer] {
  background-color: #FFF;
  color: #FFF;
  font-weight: 700;
}

@media screen and (max-width: 50em) {
  .md-nav__source {
      background-color: #FFF;
  }
}

.md-source__repository .md-source__repository--active{
  color: #154273;
}

@media screen and (max-width: 800px) {
  .md-nav--primary .md-nav__item--active>.md-nav__link {
      color: #154273;
  }
}

@media screen and (max-width: 800px) {
  .md-nav--primary .md-nav__title {
      background-color: #fff;
      color: #154273;
      cursor: pointer;
      height: 5.6rem;
      line-height: 2.4rem;
      padding: 3rem .8rem .2rem;
      position: relative;
      white-space: nowrap;
  }
}

.md-main__inner {
  display: flex;
  height: 100%;
  margin-top: 0;
}

/* Force navigation to scroll with content */
@media screen and (min-width: 801px) {
  .md-tabs {
    position: static !important;
    z-index: auto !important;
  }

  .md-main {
    margin-top: 0 !important;
  }
}

/* Responsive navigation padding to match main content */
@media screen and (max-width: 50em) {
  .md-tabs .md-grid {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: none;
  }
}

/* Force show navigation tabs above 800px */
@media screen and (min-width: 801px) {
  .md-tabs {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
  }
}

/* Force hide navigation tabs at 800px and below */
@media screen and (max-width: 800px) {
  .md-tabs {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
  }
}

/* Keep logo visible until exactly 800px */
@media screen and (min-width: 801px) {
  .md-header__button.md-logo {
    display: inline-block !important;
  }
}

/* NUCLEAR CSS - Hide hamburger menu above 800px with maximum specificity */
@media screen and (min-width: 801px) {
  html body .md-container .md-header .md-header__inner .md-header__button[for="__drawer"],
  html body .md-container .md-header .md-header__inner .md-header__button.md-icon--menu,
  html body .md-container .md-header .md-header__inner .md-nav__button,
  html body .md-container .md-header .md-header__inner button[for="__drawer"],
  html body .md-container .md-header button,
  html body .md-header button[type="button"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
  }
}

/* Hide logo only at 800px and below */
@media screen and (max-width: 800px) {
  .md-header__button.md-logo {
    display: none !important;
  }
}