/* ----------------------------------------------------------------------------------------------------------
Media queries -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion) {
    main                                { animation:none; }
    *[data-animation="fade-up"]         { opacity:1; transition:none; transform:none; }
}

@media screen and (max-width: 1300px) {
    #pageContent                            { overflow-x:auto; }
}

@media screen and (max-width: 1200px) {
    :root, html                         { font-size:14px; }
}

@media screen and (max-width: 1000px) {
    #mainWrapper                        { width:calc(100% - 5rem); }
    #headerBanner #toggleBtnMenu        { display:none; }
    #sideNav                            { width:5rem; }
    #sideNav header                     { padding:0; margin-bottom:0.625rem; text-align:center; font-size:0.625rem; }
    #sideNav .iconBefore a::before      { transform:none; }
    #sideNav nav ul li a                { flex-direction:column; row-gap:0.5rem; font-size:0.75rem; word-break:break-word; hyphens:auto; }
    #sideNav[data-collapsed="true"] nav ul li a { color:var(--light-level-1) !important; }
    #pageContent article.row,
    #pageContent .article.row           { flex-direction:column; }
    article.row                         { flex-wrap:wrap; }
}

@media screen and (max-width: 800px) {
    #pageHeader                  { flex-direction:column-reverse; }
    h1                                  { font-size:1.875rem; }
    #headerBanner                       { justify-content:space-between; flex-direction:row-reverse; }
    #headerBanner #quick_search_form    { display:none; }
    #headerBanner .button               { padding:0.75rem 1.25rem !important; border-width:0 1px 0 0; }
    #headerBanner #toggleBtnMenu        { display:block; }
    #userControls                       { flex-direction:row-reverse; }
    #userControls section               { left:0; right:auto; }

    #headerBanner #toggleBtnMenu[aria-expanded="true"] .icon { background-color:transparent !important; }
    #headerBanner #toggleBtnMenu[aria-expanded="true"] .icon::before { transform:rotate(45deg); position:absolute; top:0; right:0; }
    #headerBanner #toggleBtnMenu[aria-expanded="true"] .icon::after { transform:rotate(-45deg); position:absolute; top:0; right:0; }

    .row, #pageHeader > .row,
    #pageContent.row, article.row,
    .article.row                        { padding:1.25rem; }

    #pageContent.row                    { row-gap:1.25rem; }

    #sideNav[data-collapsed="true"]        { width:0; }
    #sideNav[data-collapsed="false"]       { width:10rem; position:fixed; }
    #sideNav[data-collapsed="true"] + #mainWrapper,
    #sideNav[data-collapsed="false"] + #mainWrapper { width:calc(100%); }
    #sideNav[data-collapsed="true"] *      { display:none; }

    table[data-table-type="results"],
    table[data-table-type="results"] thead,
    table[data-table-type="results"] tbody,
    table[data-table-type="results"] th,
    table[data-table-type="results"] tr,
    table[data-table-type="results"] td { display:block; }

    table[data-table-type="results"] th,
    table[data-table-type="results"] td { mask:none; }

    table[data-table-type="results"] th { position:absolute; top:-9999px; left:-9999px; }
    table[data-table-type="results"] td { border-bottom:1px solid var(--light-level-3); position:relative; padding-left:50%; white-space:normal; word-break:break-word; hyphens:auto; }
    table[data-table-type="results"] td::before { content:attr(data-table-row-title); position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight:bold; }

    table[data-table-type="results"] td:nth-child(2) { mask:unset; max-width:100%; white-space:normal; }
    table[data-table-type="results"] tr:nth-child(even) { background-color:var(--light-level-3); }
    table[data-table-type="results"] tr:nth-child(even) td { border-color:var(--light-level-1); }
    table[data-table-type="results"] tr:nth-child(even) td:last-of-type { border-bottom:0; }

    #metaInformation                    { padding:0; flex-wrap:wrap; flex-direction:unset; row-gap:0; }
    #metaInformation .column            { border-width:0 1px 1px 0; flex:1 1 auto; display:flex; justify-content:center; }
    main aside .row                     { flex-direction:column; padding:0 1.25rem; }
    main aside .button                  { width:100%; border-bottom:1px solid var(--light-level-6); text-align:left; }
    main aside header .button           { width:100%; }
    .metaSectionContainer .button       { width:auto; }
    .metaSectionContainer .tableOrderResults,
    .metaSectionContainer .tableRowsPerPage,
    .metaSectionContainer select        { width:100%; }

    .tablePageControllers             { flex-direction:column; }
    #table_page_navigation              { order:2; flex:1 1 100%; }
    .tableOrderResults,
   .tableRowsPerPage                { order:1; text-align:left; }

    #searchSection[role="search"] .column:nth-child(2) { flex:auto; }
    
    #editorButtons .button              { flex:1 1; }

    *[data-theme="dark"] #metaInformation       { flex-direction:row; flex-wrap:wrap; row-gap:0; }
    *[data-theme="dark"] main aside .column     { flex:1 1 auto; }
    *[data-theme="dark"] main aside .button     { border-bottom:1px solid var(--dark-level-7); }
    *[data-theme="dark"] table tbody tr:hover td { background-color:var(--dark-level-7); border-color:var(--dark-level-1); }
    *[data-theme="dark"] table[data-table-type="results"] td { border-color:var(--dark-level-7); }
    *[data-theme="dark"] table[data-table-type="results"] td:hover { border-color:var(--dark-level-1); }

    *[data-theme="dark"] table[data-table-type="results"] tr:nth-child(even) { background-color:var(--dark-level-6); }
    *[data-theme="dark"] table[data-table-type="results"] tr:nth-child(even) td { border-color:var(--dark-level-4); }

    *[data-theme="dark"] table thead tr:first-child,
    *[data-theme="dark"] table tr:nth-child(2n),
    *[data-theme="dark"] table tr:nth-child(2n+1)   { border-width:0; }
}

@media screen and (max-width: 500px) {
    h1                                      { font-size:1.5rem; }
    h2                                      { font-size:1.375rem; }
    main aside .button                      { text-align:center; }
    table th, td                            { padding:0.5rem; }

    section.notification .column:last-of-type { flex: 1 1 100%; }

    footer#mainFooter .column               { flex:1 1 100%; row-gap:1rem; padding:1rem 0; }
    footer#mainFooter .column:first-of-type { flex:1 1 100%; row-gap:1rem; padding:2rem 0; background-color:light-dark(var(--light-level-1),var(--dark-level-3)) !important; }
    footer#mainFooter .column:first-of-type img { max-width:10rem; }

    #copyright                              { position:relative; right:auto; }
    #copyright p                            { text-align:center; }
}