/*  ===========================
    Custom CSS for Flossmanuals
    Creation date: 1 November 2025
    Author: Martin Kean
    =========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


.hx-w-full {
    width: 98dvw !important;
}



body {
    background: url('/images/bg-pattern-2.svg') repeat;
    background-size: 28px 14px;
    width: 100dvw;
    font-family: "Inter", sans-serif !important;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.main-below-nav {
    min-height: calc(100vh - 64px);
    /* Adjust 64px to your nav height */
    max-width: 1200px;
    margin-left: 0;
}

p {
    font-size: .95rem;
}

.nav-container {
    height: 8rem;
    position: relative;
}

.nav-container nav {
    margin-left: 0;
    padding-left: 0;
    height: 7.8rem;
}

.nav-container nav a:hover {
    opacity: 1 !important;
}

.nav-container nav a span.hx-font-extrabold {
    font-family: "Inter", sans-serif;
    font-size: 2.2rem !important;
    color: #403D3C;
    font-weight: 700 !important;
    margin-left: 2rem !important;
}

.nav-container-blur {
    display: none;
}

.fm-logo {
    width: 40rem !important;
}

.sidebar-container {
    max-width: 200px !important;
}

aside {
    background-color: #ff7f00;
    /* max-width: 20rem !important; */
}

aside div ul li a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

aside div ul a:hover,
aside div ul a:active,
aside div ul a:focus {
    background-color: #A6998F !important;
}

aside div ul li.open a {
    color: #333 !important;
    font-weight: 700;
    background-color: #FFF7F0;
}

.dark-light-mode {
    display: none;
    background-color: #FFA54D;
    box-shadow: none;
    border-radius: 10px 10px 0 0;
    border-top-width: 0;
    --tw-text-opacity: 0;
    justify-content: center;
}

.dark-light-mode div:first-child {
    align-items: left;
    padding: 0 1rem;
}

.dark-light-mode div button {
    background-color: none;
    box-shadow: none;
    border-top-width: 0;
    --tw-text-opacity: 1;
    width: 100%;
    height: 3rem;
}

.dark-light-mode div button:hover {
    background-color:aqua;
    box-shadow: none;
    border-top-width: 0;
    --tw-text-opacity: 1;
}

div:has(> .scroll-to-top-button) {
    display: none;
}

.article-manual-page {
    width: clamp(300px, 95dvw, 670px);
    max-width: 670px;
    margin-right: auto;
    border: 5px solid #666666;
    padding: 0px;
    /* margin-left: 2rem !important; */
    background: #FFF7F0;
}

@media (min-width: 941px) {
  .article-manual-page {
    width: clamp(300px, calc(100dvw - 220px), 670px);
    margin-left: 2.5dvw;
  }
}

@media (max-width: 940px) {
  .article-manual-page {
    width: 95dvw;
    max-width: 95dvw;
    margin-left: 2.5dvw;
    margin-right: 2.5dvw !important;
  }
}

@media (max-width: 768px) {
  .article-manual-page {
        width: clamp(300px, 95dvw, 670px);
        width: 95%;
        max-width: 95dvw;
        /* margin-left: auto; */
        margin-right: auto;
    }
    .fm-logo {
        width: 10rem !important;
    }
    .site-title {
        display: none;
    }
    .sidebar-container {
        max-width: 260px !important;
    }
}

@media (max-width: 767px) {
    .sidebar-container {
        background-color:#ff7f00 !important;
        transition: none;
        will-change: transform;
        contain: layout style;
        backface-visibility: hidden;
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0;
        z-index: 15;
        width: 100%;
        overscroll-behavior: contain;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-top: calc(var(--navbar-height));
    }
    .sidebar-container div ul li div ul::before {
        content: none !important;
    }
    aside div ul a:hover {
        background-color:gainsboro !important;
    }
    aside div ul li.open {
        gap: 0.25em;
    }
}

/* Sidebar section title (used for both left + right) */
.sidebar-section-title {
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Default (left sidebar stays grey if needed) */
aside .sidebar-section-title {
  color: var(--hx-color-gray-600);
}

/* Right TOC sidebar */
.toc-sidebar .sidebar-container {
  background-color: #ff7f00;
}

/* TOC title */
.toc-sidebar .sidebar-section-title {
  color: #ffffff;
}

/* Shared sidebar link base */
.sidebar-item {
  display: block;
  padding: 0.35rem 0.75rem 0.35rem 1.25rem;
  line-height: 1.25;
  font-size: 0.84rem;
  text-decoration: none;
}

/* Left sidebar links */
aside .sidebar-item {
  color: #ffffff;
  font-weight: 700;
}

/* Right TOC links */
.toc-sidebar .sidebar-item {
  color: #ffffff;
  font-weight: 600;
}

/* Hover (shared feel) */
.sidebar-item:hover,
.sidebar-item:focus {
  background-color: #A6998F;
}

/* TOC hierarchy */

/* h2 */
.toc-level-0 {
  font-weight: 600;
  padding-left: 1.25rem;
}

/* h3 */
.toc-level-1 {
  font-weight: 500;
  padding-left: 1.75rem;
  opacity: 0.95;
}

/* (kept just in case, but should not appear now) */
.toc-level-2 {
  font-weight: 400;
  padding-left: 2.25rem;
  opacity: 0.9;
}