/* ==========================================================================
   responsive.css
   Added during cleanup. The original site was a fixed 1000px table layout
   with no viewport meta tag and no media queries at all.

   This file is additive only - it is loaded last and never edits the
   original stylesheets, so the desktop design is untouched above 1024px.
   ========================================================================== */

/* --------------------------------------------------------------- 1. safety */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

img, video, embed, object {
    max-width: 100%;
    height: auto;
}

/* images the old CSS pinned to an exact box - let them shrink, keep the crop */
ul.reportDesign li img,
ul.contentList li img.mainImg_1,
ul.contentList li img.mainImg_2,
.subWorks img {
    max-width: 100%;
    object-fit: cover;
}

iframe {
    max-width: 100%;
    border: 0;
}

/* long unbroken strings (URLs, IDs) used to force horizontal page scroll */
body {
    overflow-wrap: break-word;
}

/* --------------------------------------------- 2. accessibility floor */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #624d7d;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------- 3. the "every page is linked" bar */

.site-index-link {
    clear: both;
    margin: 0;
    padding: 14px 16px;
    background: #f4f4f4;
    border-top: 1px solid #dfe5e6;
    font-size: 13px;
    text-align: center;
    line-height: 2;
}
.site-index-link a {
    display: inline-block;
    margin: 0 10px;
    color: #624d7d;
    text-decoration: none;
    white-space: nowrap;
}
.site-index-link a:hover,
.site-index-link a:focus { text-decoration: underline !important; }

/* ============================================================ TIDCA layout
   Everything below is scoped to the legacy TIDCA classes, so the phpshop
   pages (which ship their own Bootstrap theme) are left alone.
   ========================================================================== */

/* ------------------------------------------------- 4. fluid shell <= 1024px */

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

    .fullWidth {
        width: 100%;
        max-width: 1000px;
    }

    /* the 1005px page-edge shadow strip stops lining up once we go fluid */
    .pageShadow { background-image: none; }

    .fullWidth > table,
    .fullWidth > table > tbody > tr > td,
    .fullWidth > table > tr > td { max-width: 100%; }

    /* header band: 1000x200 artwork, scale it instead of cropping it */
    .headerTd {
        width: auto;
        height: auto;
        min-height: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left top;
        aspect-ratio: 5 / 1;
    }

    .contentTd  { width: auto; }
    .sideBarTd  { width: 230px; }

    /* every fixed-px content box in main.css */
    .contentDiv,
    div.contentDiv,
    .contentFull,
    .contentFrame,
    .shareItem,
    .subContents,
    .historyWorksDiv,
    ul.reports,
    div.contentTitle,
    .nextButton,
    #showWorks,
    .SurveyBody {
        width: auto !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    div.contentTitle {
        background-size: 100% 100%;
        height: auto;
        min-height: 35px;
        padding: 6px 10px;
        margin: 10px 0;
    }
    div.contentTitle .title { margin-left: 0; }
    div.contentTitle .date  { margin-top: 0; }

    .contentDiv, div.contentDiv, .subContents, .historyWorksDiv { padding: 0 12px; }
    .subContents { margin-top: 0; }

    /* two-up teaser columns */
    .contentHalf {
        width: 48%;
        max-width: 100%;
    }

    /* share icons were nailed to left:755px / top:-170px */
    .mainPage_Share {
        position: static;
        left: auto;
        top: auto;
        color: inherit;
        text-align: right;
        padding: 4px 12px;
    }

    ul.reports li div.works,
    ul.reports li div.info {
        width: auto;
        max-width: 100%;
        float: none;
    }

    .filedName { width: 100%; max-width: 280px; }
    .loginW    { width: auto; float: none; }
}

/* ------------------------------- 5. stack the layout table <= 900px (tablet) */

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

    /* the outer layout table only - nested content tables keep their shape */
    .fullWidth > table,
    .fullWidth > table > tbody,
    .fullWidth > table > tbody > tr,
    .fullWidth > table > tbody > tr > td,
    .fullWidth > table > tr,
    .fullWidth > table > tr > td {
        display: block;
        width: 100% !important;
        height: auto;
    }

    /* once the table stacks, the nav is the header cell's only child - reserve
       the banner's own strip as padding (header.jpg is 1000x200, so 20%)
       and let the nav flow underneath it instead of painting over it */
    .headerTd {
        aspect-ratio: auto;
        height: auto !important;
        padding: 20% 0 0 !important;
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
    }

    .sideBarTd {
        background-image: none;
        border-bottom: 1px solid #dfe5e6;
        padding-bottom: 10px;
    }

    .sideBar {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        padding: 0 12px;
    }
    .loginDiv { width: auto; }

    /* image nav sat 50px below the header on a 730px rail - let it wrap */
    .menuDiv {
        position: static;
        bottom: auto;
        width: auto;
        height: auto;
        margin: 0;
        padding: 6px 8px;
        float: none !important;
        text-align: center;
        background: #fff;
    }
    .menuDiv ul { margin: 0; padding: 0; }
    .menuDiv ul li {
        display: inline-block;
        margin: 2px;
    }
    .menuDiv ul li img { max-height: 36px; width: auto; }

    /* wide data tables inside article bodies scroll instead of overflowing */
    .contentDiv table,
    div.contentDiv table,
    .subContents table,
    .historyWorksDiv table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .footerDiv { height: auto; margin-left: 0; padding: 0 12px; }
    .footerTd  { padding-left: 12px !important; background-size: 100% auto; }
}

/* --------------------------------------------------- 6. phones <= 640px */

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

    body { font-size: 15px; }

    .contentHalf {
        width: 100%;
        float: none !important;
        margin-bottom: 16px;
    }

    /* awarded-works grid: 2 up instead of a 169px float row */
    ul.reportDesign { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
    ul.reportDesign li {
        display: block;
        float: none;
        width: calc(50% - 10px);
        height: auto;
        margin: 5px;
        padding-bottom: 8px;
    }
    ul.reportDesign li img {
        width: 100%;
        height: auto;
        aspect-ratio: 159 / 188;
        margin: 0 0 4px;
    }

    #showWorks li { float: none; display: inline-block; }

    ul.subList li div.title { padding-left: 8px; }
    ul.contentList li div.info .summary { margin: 8px 4px; }
    ul.contentList li div.info .summary img { max-width: 100%; }

    .h5_title { text-align: left; }
    input.login { width: 100%; max-width: 160px; }

    .nextButton input { width: 100%; max-width: 180px; font-size: 20px; height: 52px; }

    /* footer contact block was a 2-column table */
    .footerTd table,
    .footerTd tbody,
    .footerTd tr,
    .footerTd td {
        display: block;
        width: 100% !important;
        text-align: left;
    }
    ul.footer { margin-top: 4px; padding-left: 0; }
    ul.footer li { list-style: none; margin-bottom: 4px; }

    ul.logo { padding-left: 0; text-align: center; }
    ul.logo li.rline { border-left: 0; }

    .site-index-link a { margin: 0 6px; }
}

/* --------------------------------------------------- 7. phpshop pages only */

@media screen and (max-width: 900px) {
    /* the shop theme's own CSS is remote; keep its tables from forcing
       a horizontal scrollbar if that stylesheet fails to load */
    .table-responsive,
    .shopping-cart table,
    .member-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}