/* CubeSmith - based on the mystersmith.info design, with the CubeSmith colours */
:root {
  /* Primary (header, tabs) */
  --md-primary-fg-color:        #1b1b1b;
  --md-primary-fg-color--light: #3a3a3a;
  --md-primary-fg-color--dark:  #000000;

  /* Accent (links, highlights) */
  --md-accent-fg-color:         #d32f2f;
  --md-accent-fg-color--transparent: rgba(211, 47, 47, 0.1);

  /* Site colours used below */
  --ms-accent:       #d32f2f;
  --ms-accent-dark:  #a31515;
  --ms-accent-rgb:   211, 47, 47;
  --ms-heading:      #1b5fae;
  --ms-dark:         #1b1b1b;
  --ms-page-bg:      #f2f2f2;
}

/* --- PAGE BACKGROUND, WHITE CONTENT BOX --- */
body, .md-main {
    background-color: var(--ms-page-bg) !important;
}

.md-content__inner {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* --- SIDEBAR TITLES (transparent background) --- */
.md-sidebar .md-nav__title[for=__toc] {
    background-color: transparent !important;
    box-shadow: none !important;
}

.md-nav--primary .md-nav__title[for=__toc] {
    background: transparent !important;
}

.md-nav--primary .md-nav__title {
    background-color: var(--md-default-fg-color--lightest);
    color: var(--ms-accent);
    cursor: pointer;
    height: 5.6rem;
    line-height: 2.4rem;
    padding: 3rem .8rem .2rem;
    position: relative;
    white-space: normal;
}

.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    background: transparent !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}

/* --- LINKS --- */
.md-typeset a {
  color: var(--ms-accent);
}
.md-typeset a:hover {
  color: var(--ms-accent-dark);
}

.md-typeset .md-button--primary {
    background-color: var(--ms-accent) !important;
    border-color: var(--ms-accent) !important;
    color: white !important;
}
.md-typeset .md-button--primary:hover {
    background-color: var(--ms-accent-dark) !important;
    border-color: var(--ms-accent-dark) !important;
}

/* --- LOGO AND HEADER --- */

/* the site name is in the logo */
.md-header__title .md-header__topic {
    display: none;
}

.md-header__button.md-logo img {
    height: auto;
    max-height: 85px;
    width: auto;
    margin-top: 2px;
}

/* --- SIDEBAR HEADINGS --- */

/* right side: "On this page" */
.md-nav--secondary label.md-nav__title {
    color: var(--ms-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    line-height: 1.4;
    margin-bottom: 10px;
}

.md-nav--secondary .md-nav__title .md-nav__icon {
    color: var(--ms-dark) !important;
}

/* left side: section titles */
.md-nav--primary .md-nav__item--nested > .md-nav__link,
.md-nav--primary .md-nav__item--nested > label.md-nav__link {
    color: var(--ms-accent) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

.md-nav__item .md-nav__link--active {
    color: var(--ms-dark);
    font-weight: 700;
}

.md-nav--primary .md-nav__item--nested > .md-nav__link:hover {
    color: var(--ms-accent-dark) !important;
}

/* --- HEADER IMAGE OF THE PAGE (hero) --- */

.ms-banner-wrapper {
    margin-top: 10px;
    margin-bottom: 20px;
    border-top: 10px var(--ms-accent) solid;
    padding: 0;
}

.ms-hero-content {
    background-size: cover;
    background-position: center;
    height: 300px;
    width: 100%;
}

/* --- ADMONITIONS --- */

.md-typeset .admonition.note,
.md-typeset .admonition.info {
    border-color: var(--ms-dark) !important;
}
.md-typeset .admonition.note > .admonition__title,
.md-typeset .admonition.info > .admonition__title {
    background-color: rgba(0, 0, 0, 0.06) !important;
    border-color: var(--ms-dark) !important;
    color: var(--ms-dark) !important;
    font-weight: bold;
}
.md-typeset .admonition.note > .admonition__title::before,
.md-typeset .admonition.info > .admonition__title::before {
    background-color: var(--ms-dark) !important;
    -webkit-mask-image: var(--md-admonition-icon--note);
    mask-image: var(--md-admonition-icon--note);
}

.md-typeset .admonition.warning,
.md-typeset .admonition.failure,
.md-typeset .admonition.danger {
    border-color: var(--ms-accent) !important;
}
.md-typeset .admonition.warning > .admonition__title,
.md-typeset .admonition.failure > .admonition__title,
.md-typeset .admonition.danger > .admonition__title {
    background-color: rgba(var(--ms-accent-rgb), 0.1) !important;
    border-color: var(--ms-accent) !important;
    color: var(--ms-accent) !important;
    font-weight: bold;
}
.md-typeset .admonition.warning > .admonition__title::before,
.md-typeset .admonition.failure > .admonition__title::before,
.md-typeset .admonition.danger > .admonition__title::before {
    background-color: var(--ms-accent) !important;
}

/* --- CODE BLOCKS --- */

.md-typeset pre > code {
    border: 1px solid var(--ms-dark);
    border-radius: 4px;
    background-color: #f5f8fa;
}

html body .md-typeset .md-code__nav {
    opacity: 1 !important;
    transition: none !important;
}

html body .md-typeset .md-code__button {
    color: var(--ms-dark) !important;
    opacity: 1 !important;
    background-color: transparent !important;
    transition: none !important;
}

html body .md-typeset .md-code__button:hover {
    color: var(--ms-accent) !important;
    background-color: transparent !important;
}

/* --- BACK TO TOP BUTTON --- */
.md-top {
    color: white !important;
    background-color: var(--ms-accent) !important;
}

/* --- IMAGES --- */

/* an image with a 'height' attribute keeps it */
.md-typeset img[height] {
   height: revert-layer;
}

/* centred / floating images of the old pages */
.md-typeset img.center {
    display: block;
    margin: 0 auto;
}
.md-typeset img.img-left {
    float: left;
    margin: 0 1em 1em 0;
}
.md-typeset img.img-right {
    float: right;
    margin: 0 0 1em 1em;
}

/* --- MOBILE --- */
@media screen and (max-width: 76.1875em) {

    .ms-hero-content {
        height: 0 !important;
        padding-bottom: 25% !important;
        background-size: cover !important;
        background-position: center center !important;
        width: 100% !important;
    }

    .md-nav--primary .md-nav__item--nested > .md-nav__link,
    .md-nav--primary .md-nav__item--nested > label.md-nav__link {
        color: black !important;
        font-size: 1rem !important;
        font-weight: normal !important;
        opacity: 1 !important;
    }

}

/* --- BOXES BELOW THE TABLE OF CONTENTS --- */
.ms-toc-custom-box {
    margin-top: 1rem;
    padding: 0.8rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    font-size: 0.8rem;
    line-height: 1.4;
}
.ms-toc-custom-box .ms-box-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--ms-accent);
}
.ms-toc-custom-box p {
    font-size: 0.8rem;
    margin: 0 0 10px;
    line-height: 1.4;
    color: #444;
}
.ms-toc-custom-box img {
    width: 100%;
    margin-bottom: 6px;
}

/* below 76.25em the table of contents moves into the menu drawer: the boxes stay out of it */
.md-nav--primary .ms-toc-custom-box {
    display: none;
}

/* --- INVISIBLE SCROLLBAR IN THE SIDEBARS --- */
.md-sidebar__scrollwrap::-webkit-scrollbar {
    display: none;
}
.md-sidebar__scrollwrap {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- GALLERIES (lightbox thumbnails) --- */
.gallery-grid > p,
.gallery-grid:not(:has(> p)) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin: 20px 0;
}
.gallery-grid figure {
    display: block;
    width: 100%;
    margin: 0;
}
.gallery-grid figure > p {
    margin: 0;
}
.gallery-grid figcaption {
    font-size: .75em;
    margin-top: 4px;
}
.gallery-grid img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    cursor: zoom-in;
}

a.glightbox img {
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    padding: 2px !important;
    background-color: white !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
a.glightbox:hover img {
    border-color: #aaa !important;
    transform: translateY(-2px);
}

/* --- VIDEOS --- */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 20px;
}
.video-embed--4x3 {
    aspect-ratio: 4 / 3;
}
.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.md-typeset iframe.video-small {
    border: 0;
    max-width: 100%;
}

/* tutorial video thumbnails */
.tutorial-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 10px 0 20px;
}
/* rem, not px: Material enlarges the root font on wide screens, the box grows with the text */
.tutorial-item {
    flex: 0 1 14.4rem;
    max-width: 100%;
    text-align: center;
}
.tutorial-item b {
    display: block;
    font-size: 1em;
    line-height: 1.3;
}
.tutorial-item img {
    width: 100%;
    border: 2px solid var(--ms-accent);
    border-radius: 10px;
    margin: 10px 0;
}

/* --- TITLES --- */
article h1 {
    font-weight: 600 !important;
    color: var(--ms-accent) !important;
    margin-bottom: 20px !important;
}

article h2 {
    font-weight: 400 !important;
    color: var(--ms-heading) !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}