/* webfonts */
:root {
    font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-feature-settings: 'liga' on, 'calt' on;

    /* fallback to slightly thinner font on browsers without variable 'wght' support */
    font-weight: 400;

    /* base rem = 16px by default, left as percentage for screen readers */
    font-size: 100%;

    --color-brand: #009639;
    --color-brand-300: #a6daba;
    --color-brand-200: #ccead7;
    --color-brand-100: #f2faf5;
    --color-background: #FFFFFF;
    --color-foreground: #000000;
    --color-shadow: #D2D2D2;
    --color-footer: #1D1D1D;
    --color-footer-text: #E2E2E2;
    --color-product-title: #8D8D8D;

    --sidebar-margin: 48px;
    --sidebar-line-box-side-length: 8px;
    --sidebar-line-box-top: 6px;
    --sidebar-line-box-left: 12px;
    --sidebar-width: 24rem;
    --side-gutter-width: 20rem;
    --text-content-width-iphone-13: 30rem;
    --text-content-width-mbp-14: 40rem;
    --text-content-width-mbp-16: 50rem;
    --text-content-width-4k-display: 60rem;
    --component-gap: 3.5rem;

}

@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }

    h1, h2, h3, h4, h5, h6, .breadcrumb {
        font-variation-settings: 'wght' 500;
    }
}

h1, h2, h3, h4, h5, h6, .breadcrumb {
    font-weight: 500;
}

/* header */
p {
    font-weight: 400;
}

/* layout */
header {
    margin: 2rem 2rem;

    .navbar {

    }

    .header-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between; 
        align-items: center;
        width: 100%;   
    }

    ul {
        list-style: none;
    }

    .dropdown-content {
        position: absolute;
        background-color: white;
        border: black 1px solid;
        box-shadow: 3px 3px 0px var(--color-shadow);
        z-index: 1;
        right: 0; 
        display: none;
        width: 400px;
        max-width: 80vw;
        margin-right: 2.5rem;
    }

    .dropdown-content ul {
        padding: 20px 10px;
    }

    .navbar-button {
        padding: 0.5rem 0.5rem;
        border: none;
        border-radius: 0.25rem;
        text-align: center;    
        text-decoration: none;  
        cursor: pointer;
    }

    .remove-bottom-radius {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* footer */
footer {
    background-color: var(--color-footer);
    padding: 1rem;
}

.footer-layout {
    display: grid;
    grid-template-columns: 1fr;
    font-size: 0.875rem;
    gap: 24px;
}

.footer-f5-trademark {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.footer-f5-trademark p {
    margin: 0;
    color: var(--color-footer-text);
}

.footer-useful-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.footer-useful-links a {
    color: var(--color-footer-text);
    text-decoration: none;
}

@media (min-width: 814px) {
    .footer-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        font-size: 0.875rem;
    }

    .footer-useful-links {
        gap: 4px;
    }
    
}

/* breadcrumbs */
nav {
    display: flex;
    align-items: center;

    .logo {
        height: 3rem;
        width: 3rem;
        
    }

    .links a {
        margin: 0 0 0 1rem;
    }
}

/* main content */
.docs-container * {
    box-sizing: border-box;
}

.content-layout {
    display: grid;
    grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); 
    column-gap: var(--component-gap);
}

.docs-container {
    min-width: 100%;
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr;
}

.sidebar-layout {
    display: flex;
    flex-direction: column;
    z-index: 9999;
}

@media (max-width: 1512px){
    .sidebar-layout {
        display: none;
    }
}

.text-content {
    grid-column-start: 1;
}

@media (min-width: 1512px) { /* Macbook Pro 14 */
    .main-layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        column-gap: var(--component-gap);
    }

    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }

    .content-layout .side-gutter {
        grid-column-start: 2;
    }

    .base-layout {
        display: grid;
        grid-template-rows: repeat(2, auto);
        column-gap: var(--component-gap);
    }

    .breadcrumb-layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        column-gap: var(--component-gap);
        align-items: center;
        margin: 0 2rem;
    }
}

@media (min-width: 1728px) { /* Macbook Pro 16 */
    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }
}

@media (min-width: 2560px) { /* 4k Desktop */
    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }
}

#searchbox {
    width: 24rem;
    display:none;
    grid-column: 1;
}

/* main content */
.docs-container * {
    box-sizing: border-box;
}

.docs-container {
    min-width: 100%;
}

.breadcrumb-layout {
    margin: 0 2rem;
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr;
}

.sidebar-container {
    display: flex;
    flex-direction: column;
}

.content-layout {
    display: grid;
    grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); 
    column-gap: var(--component-gap);
}

.text-content {
    grid-column-start: 1;
}

@media (min-width: 1512px) { /* Macbook Pro 14 */
    .base-layout {
        display: grid;
        grid-template-rows: repeat(2, auto);
        column-gap: var(--component-gap);
    }

    .breadcrumb-layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        column-gap: var(--component-gap);
        align-items: center;
    }

    .main-layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        column-gap: var(--component-gap);
    }

    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }

    .content-layout .side-gutter {
        grid-column-start: 2;
    }
}

@media (min-width: 1728px) { /* Macbook Pro 16 */
    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }
}

@media (min-width: 2560px) { /* 4k Desktop */
    .content-layout {
        display: grid;
        grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); 
        column-gap: var(--component-gap);
    }
}

.main {
    display: flex;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 24rem;
    position: sticky;
    top: 0;
}

.sidebar .product-selector-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color:  var(--color-brand);
    color: var(--color-brand-100);
    border: none;
    font-size: 1.25rem;
    width: 100%;
    padding: 0.5rem;
    cursor: pointer;
}

.sidebar .product-selector-button .selector-icon {
    height:24px;
    width: 24px;
}

.product-selector {
    display: none;
    position: absolute;
    top: 0;
    min-width: 80%;
    margin-left: 46rem;
    padding: 1rem 1.5rem;
    background-color: white;
    border: black 1px solid;
    box-shadow: 3px 3px 0px var(--color-shadow);
}

.product-selector p {
    font-size: 0.75rem;
    color: var(--color-product-title);
    display: inline;
}

.product-selector ul {
    padding-left: 0;
    margin-top: 0;
    list-style-type: none;
}

.product-selector a {
    text-decoration: none;
    color: black;
    font-size: 1rem;
}

.sidebar .sidebar-navigation {
    width: 100%;
    margin-left: var(--sidebar-margin);
}

/* removes the built in ul padding/margin */
.sidebar .sidebar-navigation ul {
   margin-left: 0;
   padding-left: 0;
   list-style-type: none;
   padding-right: 1.5rem;
}

.sidebar ul :not(.sidebar-navigation) ul {
    padding-left: 16px;
}

.sidebar .sidebar-navigation li {
    margin-bottom: 16px;
}

.sidebar .sidebar-navigation a {
    text-decoration: none;
    color: black;
}

.sidebar .sidebar-navigation .collapsible-header {
    cursor: pointer;
}

.sidebar .sidebar-navigation .collapsible-content {
    display: none;
    position: relative;
}

.sidebar .sidebar-navigation .box.opened {
    display: none;
}

.toggle-checkbox:checked ~ .collapsible-header .box.expand {
    display: none; 
}

.toggle-checkbox:checked ~ .collapsible-content {
    display: block;
}

.toggle-checkbox:checked ~ .collapsible-header .box.opened {
    display: block;
}

/* Every other Sidebar Partial Vertical Line */
.toggle-checkbox:checked ~ .collapsible-content::before {
    content: '';
    position: absolute;
    border-left: black 1px solid;
    left: -8.5px;
    top: -21.5px;
    height: calc(100% + 12.5px);
}

/* Every other Sidebar Partial Horizontal Lines */
.toggle-checkbox:checked ~ .collapsible-content li {
    position: relative;
}

.collapsible-content .box::after {
    content: '';
    position: absolute;
    border-top: black 1px solid;
    left: -11.5px;
    width: 11.5px;
    top: 50%;
}

.collapsible-content .opened::after {
    content: '';
    position: absolute;
    border-top: black 1px solid;
    left: -12.5px;
    width: 11.5px;
    top: 50%;
}

.collapsible-content .box-link::after {
    content: '';
    position: absolute;
    border-top: black 1px solid;
    left: -11.5px;
    width: 11.5px;
    top: 50%;
}

.selected {
    font-weight: 800;
}

.sidebar .sidebar-navigation li:first-child {
    margin-top: 16px;
}

.sidebar .sidebar-navigation ul li .box-link {
    content: '';
    background-color: black;
    position: absolute;
    width: 1px;
    height: var(--sidebar-line-box-side-length);  
    margin-top: var(--sidebar-line-box-top);
    left: var(--sidebar-line-box-left);
}

.sidebar .sidebar-navigation ul li .box { 
    content: '';
    position: absolute;
    width: var(--sidebar-line-box-side-length);
    height: var(--sidebar-line-box-side-length);  
    margin-top: var(--sidebar-line-box-top);
    left: var(--sidebar-line-box-left);
}

.sidebar .sidebar-navigation ul li .expand { 
    background-color: black;
}

.sidebar .sidebar-navigation ul li .opened { 
    border: black 1px solid;
}

.sidebar .sidebar-navigation ul li .current { 
    background-color: var(--color-brand);
    z-index: 999;
}

.sidebar .sidebar-navigation ul li .partial-box {
    margin-left: -24px;
}

.sidebar .sidebar-navigation ul li .partial {
    margin-top: 0;
    top: calc(50% - 3.5px);
    left: -13px;
}

/* First Sidebar Nav Vertical Line */
.sidebar .sidebar-navigation .parent-collapsible-content::before{
    content: '';
    position: absolute;
    border-left: black 1px solid;
    left: 0;
    bottom: 1.55rem;
    height: calc(100% - 5.65rem);
}

/* First Sidebar Nav Horizontal Lines */
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::before, 
.sidebar .sidebar-navigation .parent-collapsible-content .parent-collapsible-content-item::after {
    content: '';
    position: absolute;
    border-top: black 1px solid;
    left: 0;
    margin-top: 0.6rem;
    width: 0.75rem; 
}

.row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

/* content */
main {
    flex: 1;
    max-width: 50rem;
    min-width: 40rem;
    margin: 2rem 2rem;
}

p {
    margin: 0 0 1.5rem 0;
    line-height: 1.5rem;
}

.breadcrumb {
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.875rem;
    grid-column: 2 / -1;
}

.breadcrumb .active {
    font-weight: 600;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    display: flex;
}

.breadcrumb li:after {
    padding: 0 0.25rem;
    content: "\E1D7";
}


a {
    color: var(--color-brand);
}

h1 {
    font-size: 2rem;
    margin: 0 0 2rem 0;
}

h2 {
    font-size: 1.5rem;
    margin: 3rem 0 1rem 0;
}

/* callouts */
blockquote {
    border: 1px solid var(--color-foreground);
    padding: 1rem;
    margin: 3rem -1rem;

    /* solid 3px drop shadow */
    box-shadow: 3px 3px 0px var(--color-shadow);
}

blockquote.note:before{
    content: "Note";
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    font-variation-settings: 'wght' 600;

    position: absolute;
    margin: -1.625rem 0 0 -0.25rem;
    padding: 0 0.25rem;
    display: block;
    background-color: var(--color-background);
}

blockquote p:first-child {
    margin: 0 auto 1rem auto;
}

blockquote p:last-child {
    margin: 0 auto;
}

code {
    font-weight: light;
    font-family: 'JetBrains Mono', monospace;
}

pre.chroma {
    overflow-x: auto;
    box-sizing: border-box;
}

.f5-logo-footer {
    height: 32px;
    width: 32px;
}

.nginx-logo-footer {
    height: 72x;
    width: 156px;
}

.f5-logo-footer {
    height: 32px;
    width: 32px;
}

.nginx-logo-footer {
    height: 72x;
    width: 156px;
}

/* FILTHY HACKS BEGIN */

/* Override logo with black text version */
.navbar-brand {
    height: 3.5rem;
    display: block;

    /* non-tiling background logo */
    background-image: url(/images/icons/NGINX-Docs-horiz-black-type.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    width: 200px; /* Adjust the width as needed to fit the logo */
    background-size: contain;
    background-position: left center;
    width: 200px; /* Adjust the width as needed to fit the logo */

    img {
        display: none;
    }
}

/* FILTHY HACKS END */

/* Hidden temporarily */
.code-copy {
    display: none;
}