/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Roboto+Mono:wght@400;700&family=Roboto:ital,wght@0,300;0,400;0,700;1,100;1,400;1,700&display=swap');

/* Control Panel */
:root {
    /* Content widths */
    --max_width_normal: 750px;                                      /* Normal maximum width of content boxes */
    --max_width_expanded: max(min(62.5vw, 1200px), 750px);          /* Extended maximum width of content boxes — 62.5vw = 1200px on a 1080p screen */
    --max_width_navigation: calc(var(--max_width_normal) / 1.6180); /* Maximum width of the left-hand navigation menu */
    --button_size: 1.25rem;                                         /* Size of the menu button*/

    /* Colors */
    color: rgba(0,0,0,1);                                           /* Font color for normal text */
    --body_background: rgba(255,255,255,1);
    --tibbo_orange:  rgba(227,107,34,1);                            /* Tibbo Orange*/
    --font_color_header: rgba(0,0,0,0.55);                          /* Font color for headers in the main content */
    --header_background: rgba(255,255,255,1);                       /* Background color for the header */
    --button_background: rgba(240,240,248,1);                       /* Background color for the menu toggle button */
    --menu_links: rgba(0,0,0,1);
    --menu_highlight: rgba(245,245,255,1);                          /* Background color for highlighted items in the menu */   
    --scrollbar_track: rgba(0,0,0,0.3);
    --scrollbar_thumb: rgba(0,0,0,0.15);
    --table_border: rgba(0,0,0,1);
    --table_row_alt: rgba(0,0,0,0.05);
    --table_row_hover: rgba(227,107,34,0.1);
    --table_cell_hover: rgba(227,107,34,0.2);
    --notes_background: rgba(0,0,0,0.03);
    --code_example_border: rgba(0,0,0,0.45);
    --code_example_disabled: rgba(0,0,0,0.05);
    --terminal_example_text: rgba(255,255,255,1);
    --terminal_example_background: rgba(0,0,0,0.75);

    /* Text */
    font-size: 100%;                                                /* Fallback font-size declaration for older browsers */
    font-size: clamp(0.75rem, calc(1rem + 0.1vw), 5rem);            /* Fluid typography for optimal size */
    line-height: 1.618rem;                                          /* Golden Ratio */
    tab-size: 3;                                                    /* Sets the tab size */
    -moz-tab-size: 3;                                               /* Sets the tab size for Firefox */
    --font_main: "Open Sans", sans-serif;                           /* Primary font */
    --font_pair: "Roboto", sans-serif;                              /* Paired font */
    --font_data: "Roboto Mono", sans-serif;                         /* Font for terminal and data examples */

    /* Padding */
    --padding_article: 0 0.75rem;                                   /* Article padding */
    --padding_fig_cap: 0.25rem 0.5rem 0 0.5rem;                     /* Padding for image captions */
    --list_indent_menu: 1rem;                                       /* Indent for subtopics */

    /* Miscellaneous */
    --code_example_radius: 7px;
}

/* Settings for things on mobile */
@media screen and (max-width: 1199px) {
    :root {
        --hidden_mobile: none;                                      /* For elements that should be hidden when in a mobile browser */
        --hidden_initial: hidden;                                   /* For elements that should be hidden when in a mobile browser */
        --mobile_menu_width: calc(100% - 2rem);                     /* Width of the navigation menu in a mobile browser */
        --wrap: wrap-reverse;                                       /* Inverted wrap for optimized display in a mobile browser */
        --step_max: 100%;                                           /* Maximum value used to optimize content width in a mobile browser */
        --nav_menu_height: calc(100vh - 12.5rem);                   /* The height of the navigation menu in a mobile browser */
    }
}

/* Settings for things on desktop */
@media screen and (min-width: 1200px) {
    :root {
        --hidden_desktop: none;                                         /* For elements that should be hidden in a desktop browser */
        --desktop_menu_width: min(16vw, var(--max_width_navigation));   /* Width of the navigation menu in a desktop browser */
    }
}

/* Basic Site Layout */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

html {
    font-family: var(--font_main);
    overflow-x: hidden;                 /* This prevents a horizontal scrollbar */
}

body {
    display: flex;
    flex-flow: column nowrap;
    margin-left: calc(100vw - 100%);    /* Compensates for the vertical scrollbar */
    background-color: var(--body_background);
}

a {
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* Header formatting */
#header {
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0.5rem 0;
    box-shadow: 0px 1px 5px 5px rgba(0,0,0,0.2);
    font-family: var(--font_pair);
    background-color: var(--header_background);
    color: var(--font_color_header);
    align-items: center;
    z-index: 10;
    line-height: initial;
}

#menu_button {
    flex: 0 1 35%;
    display: flex;
    padding-left: 1rem;
    flex-flow: row nowrap;
    align-content: flex-start;
    box-sizing: border-box;
}

#menu_button > div {
    display: flex;
    flex-flow: column nowrap;
    width: var(--button_size);
    height: var(--button_size);
    padding: calc(var(--button_size) / 8);
    justify-content: space-evenly;
    align-self: center;
    background-color: var(--button_background);
    border-radius: 3px;
}

.bar1, .bar2, .bar3 {
    width: 100%;
    height: 3px;
    background-color: var(--font_color_header);
    border-radius: 3px;
    transition: 0.5s;
}

#header_title {
    flex: 1 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    max-height: 52px;
}

#search {
    flex: 0 1 35%;
    display: var(--hidden_mobile, initial);
    margin: 0;
    padding: 0;
    padding-right: calc((100vw - 100%) + 1rem);
    margin-right: calc((100vw - 100%) * -1);
    box-sizing: border-box;
}

#search > div {
    max-width: max(50%, 400px);
    margin-left: auto;
    padding: 0;
}

#search > input {
    font-family: var(--font_pair);
    font-size: 110%;
    font-weight: 100;
    width: 50%;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 3px;
}

#search_mobile {
    flex: 0 1 35%;
    display: var(--hidden_desktop, flex);
    flex-flow: column wrap;
    padding-right: 1rem;
    box-sizing: border-box;
    align-content: flex-end;
}

#search_mobile > button {
    width: calc(var(--button_size) * 1.25);
    height: calc(var(--button_size) * 1.25);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 3px;
    background-color: var(--button_background);
}

#search_mobile > button > svg {
    max-width: 13px;
    max-height: 13px;
}

#search_bar {
    display: flex;
    position: absolute;
    top: 3rem;
    width: 100%;
    padding-top: 1rem;
    box-shadow: 0px 1px 5px 5px rgba(0,0,0,0.2);
    font-family: var(--font_pair);
    background-color: var(--header_background);
    color: var(--font_color_header);
    z-index: 9;
    visibility: var(--hidden_initial, hidden);
}

#search_bar > div {
    width: 100%;
}

#search_bar > div > div > div > div:first-of-type {
    top: 9% !important;
}

/* Content formatting */
#content {
    flex: 1 0 auto;
    margin-top: 4rem;
}

#article {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: var(--padding_article);
}

#article a {
    color: var(--tibbo_orange);
    border-bottom: 1px dotted var(--tibbo_orange);
}

#article a.anchor {
    display: block;
    border: none;
    height: 4.25rem;
    margin-top: -4.25rem;
    z-index: -1;
}

#article > * {
    min-width: min(calc(100vw - var(--padding_article)), var(--max_width_normal));  /* This sets a minimum width that a) provides padding on mobile or b) is fixed to the maximum content width on desktop */
    max-width: var(--max_width_normal);
    width: 100%;
}

#article > hr {
    max-width: var(--max_width_normal);
    margin: 2rem 0 1.75rem 0;
}

#article > h1, h2, h3 {
    font-family: var(--font_pair);
    line-height: initial;
    margin: 0.5rem 0;
    border-bottom: 1px dashed var(--font_color_header);
}

#article > h1 {
    margin: 2rem auto 1rem auto;
    padding-bottom: 0.75rem;
    max-width: var(--max_width_expanded);
    text-align: center;
}

#article > h2 {
    margin: 1.5rem 0 0.5rem 0;
    padding-bottom: 0.5rem;
}

#article p, figure, .image_row {
    margin: 0.5rem 0;
}

#article > figure {
    display: table;
    max-width: var(--max_width_expanded) !important;
    width: auto;
}

#article > figure > img {
    display: table-cell;
    margin: auto;
    width: auto;            /* This prevents images from scaling past their original size */
    max-width: 100%;        /* This prevents images from exceeding their parent container size */
    object-fit: scale-down;
}

#article > figure > figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: var(--padding_fig_cap);
    font-family: var(--font_pair);
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.15rem;
}

#article > .image_row {
    max-width: var(--max_width_expanded);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.image_row > div {
    max-width: var(--step_max, 48%);
    align-self: center;
    margin: 0 var(--hidden_mobile, 0.25rem);
}

.image_row > div:first-of-type {
    text-align: right;
}

.image_row > div:last-of-type {
    text-align: left;
}


#article > ul, ol {
    margin: 0;
    padding: 0;
}

#article > ul ul {
    margin: 0 0 0 1rem;
    padding: 0;
}

#article > ol ol {
    margin: 0 0 0 1rem;
    padding: 0;
    list-style-type: lower-latin;
}

#article > ol ol ol {
    list-style-type: lower-roman;
}

#article li {
    margin: 0 1.5rem;
    text-align: left;
}

#article .table_container {
    max-width: var(--max_width_expanded);
    overflow-x: auto;
    padding: 0 1px; /* This is required to prevent the borders from pushing the table wider than the container */
}

#article table > tbody p {
    margin: 0;
    line-height: 1.618rem;
}

.table_container table {
    width: auto;
    min-width: min(100%, var(--max_width_normal));
    margin: 0 auto;
    border: 1px solid var(--table_border);
    border-spacing: 0;
    border-collapse: collapse;
}

.table_container table > thead > tr > td {
    padding: 0;
    border: none;
    font-family: var(--font_pair);
    font-weight: bold;
}

.table_container table > tbody tr:nth-of-type(even) {
    background-color: var(--table_row_alt);
}

.table_container table > tbody tr:hover {
    background-color: var(--table_row_hover);
}

.table_container table > tbody tr td:hover {
    background-color: var(--table_cell_hover);
}

.table_container table > tbody td {
    margin: 0 !important;                       /* This is needed to prevent H+M settings from overriding the intended styles */
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--table_border);
    text-align: left;
    line-height: inherit !important;            /* This is needed to prevent H+M settings from overriding the intended styles */
}

.table_container table > tbody ul {
    margin: 0;
    padding-left: 0;
}

.table_container table > tbody ul ul {
    margin-left: 1rem;
}


/* Image lightbox */
#article .enlargeable:hover {
    cursor: zoom-in;
}

#article .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0,0,0,0.25);
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

#article .lightbox * {
    max-height: 90%;
    max-width: 90%;
}

#article .lightbox span {
    min-width: 1px;
}


/* Notes formatting */
#article > .notes {
    box-sizing: border-box;
    background-color: var(--notes_background);
    padding: 1rem;
    border-left: 5px solid var(--tibbo_orange);
}


/* Code example formatting */
#article > .code_example {
    max-width: var(--max_width_expanded);
    min-width: min(100%, var(--max_width_normal));
    width: var(--step_max, auto);
    margin: 0;
}

.code_example pre {
    white-space: pre;
    margin: 0;
}

.code_example .code_example_header {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: -1px;
}

.code_example .code_example_header * {
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid var(--code_example_border);
    border-bottom: 2px solid rgba(255,255,255,1);   /* This attempts to hide the overlapping border from the body for a more seamless look */
    font-weight: bold;
    z-index: 2;
}

.code_example .code_example_header > div:first-of-type {
    border-top-left-radius: var(--code_example_radius);
}

.code_example .code_example_header > div:last-of-type {
    border-top-right-radius: var(--code_example_radius);
}

.code_example .code_example_header_active {
    border-top: 3px solid var(--tibbo_orange);
}

.code_example .code_example_header_disabled {
    background-color: var(--code_example_disabled);
    border: 1px solid var(--code_example_disabled);
    border-top: 3px solid rgba(0,0,0,0.1);
    border-bottom: none;
    color: rgba(0,0,0,0.5);
}

.code_example .code_example_header_disabled:hover {
    cursor: pointer;
}

.code_example .code_example_body {
    width: auto;
    padding: 0.75rem 0.7rem;
    border: 1px solid var(--code_example_border);
    border-top-right-radius: var(--code_example_radius);
    border-bottom-left-radius: var(--code_example_radius);
    border-bottom-right-radius: var(--code_example_radius);
    box-sizing: border-box; 
    overflow-x: auto;
    z-index: 1;
}

.code_example_body::-webkit-scrollbar {
    width: 0.65rem;
}

.code_example_body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--scrollbar_track);
    border-radius: 10px;
}

.code_example_body::-webkit-scrollbar-thumb {
    background: var(--scrollbar_thumb);
    border-radius: 5px
}

.code_example_body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar_track);
}

.code_example .code_example_body_disabled {
    display: none;
}


/* Data example formatting */
#article .data_example {
    display: flex;
    flex-flow: row wrap;
    padding: 0.5rem;
    box-sizing: border-box;
    border: 1px solid var(--font_color_header);
    border-radius: var(--code_example_radius);
    background-color: rgba(0,0,0,0.03);
    font-family: var(--font_data);
    font-weight: 700;
    min-width: min(100%, var(--max_width_normal));
    max-width: var(--max_width_expanded);
    width: auto;
}

#article .data_example_table {
    display: flex;
    flex-flow: column nowrap;
    padding: 0.5rem;
    box-sizing: content-box;
    border: 1px solid var(--font_color_header);
    border-radius: var(--code_example_radius);
    background-color: rgba(0,0,0,0.03);
    font-family: var(--font_data);
}

.data_example_table .data_example_row {
    display: flex;
    flex-flow: row nowrap;
    padding: var(--hidden_desktop, 0.5rem) 0;
    border-bottom: var(--hidden_desktop, 1px dashed var(--font_color_header));
    justify-content: space-between;
}

.data_example_table .data_example_row:last-of-type {
    border-bottom: none;
}

.data_example_row > div:first-of-type {
    flex: 7 0 70%;
    padding-right: 1%;
    font-weight: 700;
    border-right: 1px dashed var(--font_color_header);
}

.data_example_row > div:last-of-type {
    flex: 3 2 28%;
    padding-left: 1%;
}


/* Terminal Example formatting */
#article .terminal_example {
    display: flex;
    flex-flow: column nowrap;
    padding: 0.75rem 0.5rem;
    box-sizing: border-box;
    border-radius: var(--code_example_radius);
    background-color: var(--terminal_example_background);
    color: var(--terminal_example_text);
    overflow-x: auto;
}

.terminal_example pre {
    white-space: pre;
    margin: 0;
    font-family: var(--font_data);
}


/* Instructions formatting */
#article .instructions {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    max-width: var(--max_width_expanded);
    margin: 0;
}

.instructions img {
    max-width: 100%;
    padding: 10px;
    width: min-content;
    align-self: center;
}

.instructions .instructions_row {
    display: flex;
    flex-flow: row var(--wrap, nowrap);
    width: 100%;
    justify-content: center;
    border-bottom: 1px solid var(--table_border);
}

.instructions .instructions_row:first-of-type {
    border-top: 1px solid var(--table_border);
}

.instructions .instructions_cell {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 auto;
    padding: 0.5rem 1rem;
    justify-content: center;
}

.instructions .instructions_cell:first-of-type {
    max-width: var(--max_width_normal) !important;
}

.instructions .instructions_cell:last-of-type {
    max-width: var(--step_max, 50%);
}


/* Embedded video formatting */
#article .video_container {
    max-width: var(--max_width_expanded);
}

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Main Navigation Menu */
#navigation {
    display: flex;
    flex-flow: column nowrap;
    position: fixed;
    width: 100%;
    max-width: var(--mobile_menu_width, var(--desktop_menu_width)); /* 16vw is the largest width allowable at the smallest viewport size before the breakpoint */
    height: var(--nav_menu_height, calc(100vh - 6rem));
    margin-top: 5rem;
    margin-left: 1rem; /* Fallback declaration for older browsers */
    margin-left: max(1rem, calc(50vw - (((var(--max_width_expanded) / 2) + var(--max_width_navigation)) + 1vw)));  /* This ensures the navigation box always has minimum padding, but otherwise will move towards the content on wider screens */
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 3px 5px 3px rgba(0,0,0,0.3);
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 80%;
    overflow-y: auto;
    line-height: initial;
    visibility: var(--hidden_initial, visible);
}

#navigation::-webkit-scrollbar, #topic_headers::-webkit-scrollbar {
    width: 0.65rem;
}

#navigation::-webkit-scrollbar-track, #topic_headers::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--scrollbar_track);
    border-radius: 10px;
}

#navigation::-webkit-scrollbar-thumb, #topic_headers::-webkit-scrollbar-thumb {
    background: var(--scrollbar_thumb);
    border-radius: 5px;
}

#navigation::-webkit-scrollbar-thumb:hover, #topic_headers::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar_track);
}

#navigation a {
    font-weight: normal;
    color: var(--menu_links);
}

#navigation a.nav_current {
    font-weight: bold;
}

.fade-out {
    visibility: hidden;
    opacity: 0; 
    transition: visibility 0s linear 300ms, opacity 300ms;
}

.fade-in {
    visibility: visible !important;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 300ms;
}

#navigation div:hover {
    background-color: var(--menu_highlight);
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation ul ul {
    display: none;
    padding-left: 0.5rem;
}

#navigation ul.nav_expanded {
    display: initial;
}

#navigation > ul > li {
    padding-left: 0;
}

#navigation li {
    padding: 0.5rem 0 0 0.5rem;
}

#navigation li:hover {
    background-color: rgba(227,107,34,0.05);
}

#navigation button {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    color: var(--font_color_header);
    margin-right: 0.25rem;
    width: 17px;
    font-weight: bold;
    text-align: center;
    padding: 0;
}

#navigation button:disabled {
    border: none;
    background-color: initial;
    height: 17px;
}

#navigation button:hover {
    cursor: pointer;
}


/* In-topic content menu */
#topic_headers {
    display: var(--hidden_mobile, flex);
    flex-flow: column nowrap;
    position: fixed;
    width: 100%;
    max-width: calc(var(--mobile_menu_width, var(--desktop_menu_width)) - 1rem);
    max-height: calc(100vh - calc(5rem + 1rem));
    margin-top: 5rem;
    right: 1rem;
    right: max(1rem, calc(50vw - (((var(--max_width_expanded) / 2) + var(--max_width_navigation)) + 1vw)));  /* This ensures the navigation box always has minimum padding, but otherwise will move towards the content on wider screens */
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 3px 5px 3px rgba(0,0,0,0.3);
    box-sizing: border-box;
    border-radius: 5px;
    overflow-y: auto;
}

#topic_headers * {
    margin: 0;
    font-family: var(--font_pair);
    font-weight: normal;
    border-left: 1px solid var(--font_color_header);
    border-bottom: none;
    padding-bottom: 0.5rem;
}

#topic_headers h1 {
    font-size: 1.25rem;
    padding-left: 0.5rem;
}

#topic_headers h2 {
    font-size: 1.1rem;
    padding-left: 0.75rem;
}

#topic_headers h3 {
    font-size: 0.9rem;
    padding-left: 1.5rem;
}

#topic_headers a {
    color: var(--font_color_header);
    border-left: none;
}

.hidden {                   /* Used to hide the in-topic navigation menu if it's too short */
    visibility: hidden;
}


/* Sticky Footer — The body is a flex-box where #content expands to fill all available space not taken by #header and #footer */
#footer {
    flex: 0 0 auto;
    margin-top: 2rem;
}

#footer > p {
    margin: 0 0 0.25rem 0;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1rem;
}


/* Text formatting */
sub, sup {                      /* These keep subscript and superscript text from breaking the line height */
    vertical-align: baseline;
    position: relative;
    font-size: 0.7rem;
}

sub {
    top: 0.4em;
}

sup {
    top: -0.4em;
}

/* Image formatting */
img {
    width: auto;
    max-width: 100%;
}

img.inline {
    width: auto;
    max-width: 100%;
    float: left;
    margin-right: 0.5rem;
    padding-top: 0.5rem;
}

img.inline_large {
    margin-top: -1rem !important;
}

img.svg {
    object-fit: cover !important;
    background-color: var(--body_background);
    width: 100% !important;
}

img.framed {
    padding: 10px;
    border: 2px solid rgba(0,51,102,0.4);
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #ffffff;
    background-clip: border-box;
}

img.nopad {
    padding: 0;
}

#logo {
    width: 100%;
    max-height: 52px;
    object-fit: contain;
}

#enlarged {
    object-fit: contain !important;
}

#enlarged:hover {
    cursor: zoom-out !important;
}