/* ================================================================================================================
Responsive design - Desktop (1536px) (Changes pushed live on 30-mar-2021)
================================================================================================================ */

@media only screen and (max-width: 1536px) {
    
    /* ---------------------------------------------------
    Homepage Module Selector
    --------------------------------------------------- */
    
    .module-selector {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin-bottom: 2rem;
    }
    
    /* ---------------------------------------------------
    Documentation Selector
    --------------------------------------------------- */
    
    .documentation-selector {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .document-container .documentation-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
}

@media only screen and (max-width: 1224px) {
    .document-container .documentation-selector {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ================================================================================================================
Responsive design - Desktop (1024px) 
================================================================================================================ */

@media only screen and (max-width: 1024px) {
    
    /* ---------------------------------------------------
    Page Header
    --------------------------------------------------- */

    .page-title {
        margin-left: 0.5rem;
    }
    
    header.navigation > nav#desktop-nav {
        width: 100% !important;
        margin: 0% !important;
    }

    main {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #search-documentation {
        margin-top: 2rem;
    }
    
    #module-content {
        padding-top: 2rem !important;
    }
    
    #page-content {
        display: none !important;
    }
    
    aside.module-nav-container {
        height: calc(100vh - 65px - 58px) !important;
        top: calc(65px + 58px) !important;
        padding-top: 2rem !important;
        left: 0 !important;
    }
    
    .document-container-column {
        padding-right: 1rem;
    }
    
    form#desktop-search {
        margin-right: 0;
        width: 35%;
    }
    
    header > h1 {
        margin-left: 0;
    }
    
    .card-body {
        min-height: 250px !important;
    }
    
    .request-help {
        display: none !important;
    }
    
    div.document-body {
        min-height: calc(100vh - 74px - 4rem) !important;
        margin-top: calc(64px + 60px);
    }
    
    .video-container {
        width: 100% !important;
        padding-top: 56.65% !important;
    }
  
    /* ---------------------------------------------------
    Accordion Form
    --------------------------------------------------- */

    #accordion.accordion-form > .collapse > .accordion-body {
        flex-direction: column-reverse;
    }
    
    #accordion.accordion-form > .collapse > .accordion-body > .accordion-body-content {
        width: 100%;
        padding: 0;
    }
    
    #accordion.accordion-form > .collapse > .accordion-body > .accordion-video {
        width: 100%;
        padding-top: 56.25%;
    }
    
    /* ---------------------------------------------------
    (Module Documentation) Main Body Navigation Offset
    --------------------------------------------------- */
    
    #module-documentation {
        margin-top: calc(74px + 58px + 2rem);
    }
    
    .document-container .documentation-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
}

/* ================================================================================================================
Responsive design - Desktop (962px)
================================================================================================================ */

@media only screen and (max-width: 962px) {
    
    /* ---------------------------------------------------
    Homepage Module Selector
    --------------------------------------------------- */
    
    .module-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 2rem;
    }
    
    /* ---------------------------------------------------
    Latest Updates
    --------------------------------------------------- */
    
    .latest-release {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 0fr;
        row-gap: 1rem;
    }
    
    .latest-release-cell:nth-child(3) {
        grid-column: 1 / 3;
        height: fit-content;
    }
    
    .latest-release-cell:nth-child(3) .latest-release-item {
        align-content: center;
    }
    
    /* ---------------------------------------------------
    Documentation Selector
    --------------------------------------------------- */
    
    .documentation-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
}

/* ================================================================================================================
Responsive design - Tablets (768px)
================================================================================================================ */

@media only screen and (max-width: 768px) {

    /* ---------------------------------------------------
    Page Header
    --------------------------------------------------- */
    
    header {
        justify-content: flex-start;
    }
    
    header > button {
        margin-right: 2.5rem !important;
    }
    
    header > #module-menu {
        display: inline-block;
    }
    
    .h5.page-title {
        margin-left: 2.5%;
    }
    
    .navigation {
        padding: 1rem 1.25rem;
    }
    
    .navigation h2.h1 {
        padding: 0 1rem;
    }
    
    #mobile-search-form {
        display: block;
        width: 95%;
        margin: 0 auto;
    }
    
    /* ---------------------------------------------------
    Desktop Navigation - Menu & Search
    --------------------------------------------------- */
    
    header.navigation > nav#desktop-nav {
        display: none !important;
    }
    
    header > form#desktop-search {
        display: none !important;
    }
    
    /* ---------------------------------------------------
    Mobile Navigation - Search
    --------------------------------------------------- */
    
    #mobile-search-form {
        display: flex;
    }

    /* ---------------------------------------------------
    Main Content - Body & content
    --------------------------------------------------- */
    
    .document-container-column {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    
    .document-body > h2.h3 {
        margin-left: 10px;
    }
  
    main > .container-fluid.h-100 > .row > .content-container {
        width: 95%;
    }
    
    aside#module-content {
        display: none !important;
    }
    
    div.document-body {
        box-shadow: none;
        padding: 2rem 0.5rem;
        margin-top: calc(64px + 45px);
    }
    
    .document-container .documentation-selector {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  
}

/* ================================================================================================================
Responsive design - Smart Phones (500px)
================================================================================================================ */

@media only screen and (max-width: 500px) {

    /* ---------------------------------------------------
    General Styling
    --------------------------------------------------- */
    
    main > .container-fluid.h-100 > .row > .content-container {
        width: 100%;
    }
    
    .content-container .col-sm-12 {
        width: 100%;
        margin: 0;
        padding: 0;
        padding-left: 0;
        padding-right: 0;
    }
  
    /* ---------------------------------------------------
    Mobile Navigation - Menu Panel
    --------------------------------------------------- */
    
    .page-title {
        margin-bottom: 0; 
    }
    
    .menu-panel {
        width: 75% !important;
    }
    
    /* ---------------------------------------------------
    (Homepage) Homepage Module Selector
    --------------------------------------------------- */
    
    .module-selector {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 2rem;
    }
    
    .module-cell {
        padding: 1rem 0;
    }
    
    .module {
        width: 100%;
        margin: auto;
    }
    
    .module-link {
        margin: 0;
    }
    
    .module-icon {
        margin-bottom: 1.5rem;
    }
    
    .module-name {
        margin-bottom: 0;
    }
    
    .module-link .module-summary {
        padding: 1rem 0.5rem !important;
    }
    
    /* ---------------------------------------------------
    (Homepage) Latest Releases
    --------------------------------------------------- */
    
    .latest-release {
        grid-template-columns: 1fr;
        column-gap: 0;
        grid-auto-rows: unset;
    }
    
    .latest-release-cell {
        grid-column: 1;
    }
    
    /* ---------------------------------------------------
    (Module Documentation) Documentation Selector
    --------------------------------------------------- */
    
    .documentation-selector {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    /* ---------------------------------------------------
    Main Content - Body & content
    --------------------------------------------------- */
    
    #root-body article {
        padding: 1.5rem !important;
    }
    
    .download-btn {
        margin-right: 15px;
    }
    
    h1.h5 {
        font-size: 1rem !important;
    }
  
}