/* this_file: src_docs/md/css/fontlab-chrome.css */
/* ==================================================================
   FontLab Partners — site chrome: press-kit CTA (non-landing pages)
   and the hamburger drawer transparent-wrapper rules.
   ================================================================== */

/* ==================================================================
     Press-kit "Download the marketing pack" proud CTA
   Markdown: [:octicons-download-16: text](url){ .btn .btn-primary .btn-lg .fl-press-cta }
   pymdownx.emoji with to_svg wraps the icon as `<span class="twemoji">…svg…</span>`.
   ================================================================== */

.md-typeset p:has(> .fl-press-cta) {
  margin: 1.5rem 0 2rem !important;
}

.md-typeset .btn.fl-press-cta,
.md-typeset a.btn.fl-press-cta,
.md-typeset .btn.fl-press-cta:hover,
.md-typeset .btn.fl-press-cta:focus,
.md-typeset .btn.fl-press-cta:visited {
  background-color: #0e273e !important;
  border-color: #0e273e !important;
  color: var(--fl-white) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 1rem 2rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 28px -12px rgba(14, 39, 62, 0.55);
  text-decoration: none !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.md-typeset .btn.fl-press-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -12px rgba(14, 39, 62, 0.65);
}

.md-typeset .fl-press-cta .twemoji {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.md-typeset .fl-press-cta .twemoji svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* ==================================================================
   Hamburger drawer — transparent wrapper, opaque list.

   The wrapper + list styling is UNCONDITIONAL (no `:checked` gate).
   The site forces hamburger mode at every breakpoint, so the primary
   sidebar is only ever seen via the drawer toggle — there is no
   "inline sidebar" state to preserve. Making these rules always-on
   prevents the sidebar from flashing white during the close-transition
   when `:checked` stops matching but MaterialX is still animating the
   translate-off-screen.

   DOM (from MaterialX):
     .md-sidebar.md-sidebar--primary
       .md-sidebar__scrollwrap
         .md-sidebar__inner
           nav.md-nav.md-nav--primary
             label.md-nav__title
             ul.md-nav__list

   We make the outer four transparent + pointer-events: none, and
   give `ul.md-nav__list` an opaque floating-panel look so clicks
   that miss the panel pass through to page content behind it.
   The dimming overlay rule stays `:checked`-scoped because the
   overlay only exists while the drawer is open.
   ================================================================== */

.md-sidebar.md-sidebar--primary,
.md-sidebar--primary .md-sidebar__scrollwrap,
.md-sidebar--primary .md-sidebar__inner,
.md-sidebar--primary nav.md-nav.md-nav--primary {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* MaterialX applies an extra box-shadow on the primary sidebar
   specifically when `[data-md-toggle="drawer"]:checked ~ .md-container`
   matches at ≥76.25em:
     transform: translateX(12.1rem) !important;
     box-shadow: 0 0 .4rem 0 rgba(0, 0, 0, .2) !important;
   The shadow bleeds out past the sidebar edge as a visible vertical
   dark band. Beat it with a higher-specificity selector that zeros
   just the shadow; the translate stays so the drawer still slides
   in correctly when it opens. */
[data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar.md-sidebar--primary {
  box-shadow: none !important;
}

/* Hide the in-drawer title bar (logo + "FontLab Partners") — the
   FontLab site chrome already provides brand identity. */
.md-sidebar--primary nav.md-nav--primary > label.md-nav__title {
  display: none !important;
}

/* The actual list: opaque floating panel, clickable. Compact vertical
   spacing. No box-shadow — the sidebar has no overflow, so any shadow
   on the panel bleeds beyond the sidebar's right edge as a visible
   vertical band. A 1px border defines the panel edge. */
.md-sidebar--primary nav.md-nav--primary > ul.md-nav__list {
  pointer-events: auto !important;
  background: var(--md-default-bg-color, #fff) !important;
  border: 1px solid var(--fl-gray-light, #e8e8e8);
  border-radius: 0.6rem;
  box-shadow: none !important;
  padding: 0.35rem 0 !important;
  margin: 0.75rem 0.75rem 0 0.75rem !important;
  max-width: calc(100% - 1.5rem);
}

/* Compact the drawer nav items so Home / Join / Downloads stack
   tightly inside the panel instead of using MaterialX's default
   generous spacing. */
.md-sidebar--primary nav.md-nav--primary > ul.md-nav__list > .md-nav__item {
  margin: 0 !important;
  padding: 0 !important;
}
.md-sidebar--primary nav.md-nav--primary > ul.md-nav__list > .md-nav__item > .md-nav__link {
  padding: 0.5rem 1rem !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}

/* Also cover any nested `ul` (sub-menus) so they remain clickable. */
.md-sidebar--primary nav.md-nav--primary ul.md-nav__list ul.md-nav__list {
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 !important;
}

/* MaterialX keeps `label.md-overlay[for="__drawer"]` in the DOM at
   all times under the hamburger breakpoint and animates
   `opacity: 0 → 1 → 0` around the drawer toggle. If we only zero
   its background while `:checked` matches, the background snaps
   back to MaterialX's default light color the instant the drawer
   is unchecked — and since the opacity fade-out is still in
   progress, that default color repaints across the full viewport
   for one frame as a bad white flash.

   Fix: make the drawer overlay transparent UNCONDITIONALLY (both
   open and close states), and scope `pointer-events: none` to
   `:checked` so click-through only applies while the drawer is
   open. */
.md-overlay[for="__drawer"] {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
[data-md-toggle="drawer"]:checked ~ .md-overlay[for="__drawer"] {
  pointer-events: none !important;
}

/* ==================================================================
   Kill MaterialX's frosted-glass backdrop-filter blur across all
   chrome elements. The default theme applies blur(4–8px) to the
   overlay, header, sidebars, and top-bar buttons. We want clean
   flat chrome, not a glass effect.
   ================================================================== */
.md-overlay,
.md-header,
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--secondary,
.md-top__button,
.md-top__button--main,
.md-top__side {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==================================================================
   Force the sticky page header to a fully opaque white background.
   MaterialX shifts `.md-header` to a translucent fill once the page
   is scrolled (and toggles `.md-header--shadow`), which reads as a
   washed-out bar over the page content. We want the header chrome
   to stay solid white regardless of scroll state so text and the
   FontLab menu web component remain legible.
   ================================================================== */
.md-header,
.md-header--shadow,
.md-header[data-md-state="shadow"] {
  background-color: var(--md-default-bg-color, #fff) !important;
  background-image: none !important;
}

/* ==================================================================
   Disable mkdocs-material search entirely.
   The `search` plugin is removed from mkdocs.yml so no search index
   is generated. These rules hide what MaterialX still renders from
   its template (the loupe button, the search overlay form, and any
   search-related header chrome) so there is nothing to click.
   ================================================================== */
.md-header .md-header__button.md-icon[for="__search"],
.md-header .md-search,
.md-search,
.md-search__overlay,
.md-search__form {
  display: none !important;
}