/* OSM brand colour overrides for the Material theme */
:root {
  --md-primary-fg-color:        #0072ce;
  --md-primary-fg-color--light: #338ed8;
  --md-primary-fg-color--dark:  #005ba6;
  --md-accent-fg-color:         #0072ce;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0072ce;
  --md-accent-fg-color:  #338ed8;
}

/* ---- OSM main-site top navigation bar (rendered in Material's announcement slot) ----
   Mirrors layouts/partials/nav.html of the osm.etsi.org repo (Tailwind classes translated
   to plain CSS). Sizes are in px because Material scales the root font size, while the main
   site uses the 16px Tailwind rem. Every rule is scoped under `.md-banner` so it outranks
   Material's `.md-typeset` styles. */
.md-banner {
  position: relative;
  z-index: 10;
  overflow: visible;
  background: #1f2937;                 /* bg-gray-800 */
  color: #e5e7eb;                      /* text-gray-200 */
  border: 2px solid #111827;           /* border-2 border-gray-900 */
}
.md-banner .md-banner__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
}
.md-banner .osm-nav,
.md-banner .osm-nav * {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.md-banner .osm-nav__container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
.md-banner .osm-nav__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}
.md-banner .osm-nav a.osm-nav__logo {
  display: flex;
  align-items: center;
  color: #f3f4f6;                      /* text-gray-100 */
  text-decoration: none;
}
.md-banner .osm-nav__logo img {
  width: 36px;
  height: 36px;
  margin: -4px 0;
  transition: opacity 1s ease-in-out;
}
.md-banner .osm-nav__logo span {
  padding-left: 8px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #f3f4f6;
  transition: color 1s ease-in-out;
}
.md-banner .osm-nav__logo:hover img { opacity: 0.5; }
.md-banner .osm-nav__logo:hover span { color: rgba(156, 163, 175, 0.6); }  /* group-hover:text-gray-400/60 */
.md-banner .osm-nav__title {
  display: flex;
  align-items: center;
}
.md-banner .osm-nav a.osm-nav__badge {
  display: inline-flex;
  margin-left: 12px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #f3f4f6;                      /* text-gray-100 */
  background: #36c3ee;                 /* bg-primary-500 */
  border: 1px solid #374151;           /* border-gray-700 */
  border-radius: 9999px;
  text-decoration: none;
}
.md-banner .osm-nav__burger {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.md-banner .osm-nav__menu {
  display: none;
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 16px;
}
.md-banner .osm-nav__menu.is-open { display: flex; }

.md-banner .osm-nav .osm-nav__theme {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;                      /* text-gray-500 */
  cursor: pointer;
}
.md-banner .osm-nav .osm-nav__theme:hover { background: #f3f4f6; }   /* hover:bg-gray-100 */
.md-banner .osm-nav .osm-nav__theme:focus-visible { outline: 0; box-shadow: 0 0 0 4px #e5e7eb; }
[data-md-color-scheme="slate"] .md-banner .osm-nav .osm-nav__theme { color: #9ca3af; }          /* dark:text-gray-400 */
[data-md-color-scheme="slate"] .md-banner .osm-nav .osm-nav__theme:hover { background: #374151; }  /* dark:hover:bg-gray-700 */
[data-md-color-scheme="slate"] .md-banner .osm-nav .osm-nav__theme:focus-visible { box-shadow: 0 0 0 4px #374151; }

/* The logo is already in the osm.etsi.org bar: hide the one of the Material header */
.md-header__button.md-logo { display: none; }

/* The theme toggle lives in the osm.etsi.org bar; hide Material's own one */
.md-header__option[data-md-component="palette"] { display: none; }

.md-banner .osm-nav .osm-nav__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.md-banner .osm-nav .osm-nav__item:hover,
.md-banner .osm-nav .osm-nav__item:focus {
  background: #12abda;                 /* primary-600 */
  color: #fff;
  outline: none;
}
.md-banner .osm-nav__chevron {
  display: inline;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  margin-left: 4px;
  transition: transform 0.2s;
}
.md-banner .osm-nav__dropdown.is-open .osm-nav__chevron { transform: rotate(180deg); }
.md-banner .osm-nav__dropdown { position: relative; }
.md-banner .osm-nav__panel {
  display: none;
  position: absolute;
  right: 0;
  z-index: 30;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: #fff;
  color: #05313e;                      /* text-primary-900 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.md-banner .osm-nav__dropdown.is-open .osm-nav__panel { display: block; }
.md-banner .osm-nav .osm-nav__subitem {
  display: block;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  color: #05313e;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
}
.md-banner .osm-nav .osm-nav__subitem:hover,
.md-banner .osm-nav .osm-nav__subitem:focus {
  background: #12abda;
  color: #fff;
  outline: none;
}

/* md: >= 768px */
@media screen and (min-width: 768px) {
  .md-banner .osm-nav__container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }
  .md-banner .osm-nav__burger { display: none; }
  .md-banner .osm-nav__menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-bottom: 0;
  }
  .md-banner .osm-nav .osm-nav__theme { align-self: auto; margin-top: 0; margin-left: 8px; }
  .md-banner .osm-nav .osm-nav__item {
    width: auto;
    margin-top: 0;
    margin-left: 16px;
  }
  /* the main site renders this button inline, so a 3.4px space adds to the 4px margin */
  .md-banner .osm-nav__chevron { margin-top: -4px; margin-left: 7.4px; }
  .md-banner .osm-nav__panel { width: 192px; }
  .md-banner .osm-nav .osm-nav__subitem { margin-top: 0; }
  .md-banner .osm-nav .osm-nav__subitem + .osm-nav__subitem { margin-top: 8px; }
}
/* lg: >= 1024px */
@media screen and (min-width: 1024px) {
  .md-banner .osm-nav__container { padding: 0 32px; }
}

/* ---- OSM main-site footer (replaces Material's footer) ----
   Mirrors layouts/partials/footer.html of the osm.etsi.org repo (Tailwind translated to CSS). */
.osm-footer,
.osm-footer * {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.osm-footer {
  background: #111827;                 /* bg-gray-900 */
  font-size: 16px;
  line-height: 24px;
}
.osm-footer__container {
  max-width: 448px;                    /* max-w-md */
  margin: 0 auto;
  padding: 48px 16px;                  /* py-12 px-4 */
  overflow: hidden;
}
.osm-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -8px -20px;                  /* -my-2 -mx-5 */
}
.osm-footer__navitem { padding: 8px 20px; }
.osm-footer a {
  color: #9ca3af;                      /* text-gray-400 */
  text-decoration: none;
}
.osm-footer a:hover { color: #d1d5db; }  /* text-gray-300 */
.osm-footer__socials {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
}
.osm-footer__social { display: inline-flex; }
.osm-footer__social + .osm-footer__social { margin-left: 24px; }  /* space-x-6 */
.osm-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.osm-footer__text {
  margin: 32px 0 0;
  text-align: center;
  color: #9ca3af;
}
.osm-footer__text.osm-footer__made { margin-top: 8px; }
.osm-footer__made a {
  font-weight: 900;
  text-transform: uppercase;
}
.osm-footer__made a:hover {
  color: #12abda;                      /* hover:text-primary-600 */
  text-decoration: underline;
}
@media screen and (min-width: 640px) {      /* sm */
  .osm-footer__container { max-width: 768px; padding-left: 24px; padding-right: 24px; }
}
@media screen and (min-width: 1024px) {     /* lg */
  .osm-footer__container { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
}

/*
 * Wide screens with tabs: put the search on the row of the tabs, aligned to the right.
 * The search stays inside .md-header (Material styles its open state from there), it is
 * only placed over the tabs row. When Material hides the tabs on scroll it goes back to
 * the title row. Branches without tabs are not affected.
 */
@media screen and (min-width: 76.25em) {
  [dir=ltr] .md-header__title { margin-left: 0.6rem; }   /* aligned with the first tab */
  body:has(.md-tabs:not([hidden])) .md-header .md-search {
    position: absolute;
    top: 2.4rem;
    right: calc(50% - 30.5rem + 0.2rem);
  }
}