/* ----  STANDARD CATALOG  ---- */
/*
USAGE:  Best use with the VADS Formation stylesheet, but may require minor adjustments from site to site.
        Can be used without VADS Formation but will require adjustments in layout and look/feel.
        Import at any point, including directly at the top of the page content area ([id$='innerContent'])
        Can be used for layout of various types of product catalog/gallery pages.
        Currently, it has three layout types: grid, list and fixed list.
        Fixed list layout is for items that don't require details or feature panels.

RELATED GENERAL STRUCTURE:

    #product-details-panel (container at top of content area to be loaded and displayed dynamically; hidden by default)

    #controls.ui-controls (container for all view controls and filters. Layout is currently controlled through VADS BEM classes.)
                          Note that some empty (filled with nbsp) blocks may exist with flexbox fill to force spacing.

    .products (overall container for all product blocks)
    -> .product (contains all product information and action in HTML elements, not data- attributes)
    -- -> .product-display (container for product display (default, grid|list))
    -- -- --> .product-image
    -- -- --> .product-actions (contains product title and action items (button and a elements))
    -- -> .product-details (hidden by default, but contents are used to populate the details panel or feature area)
    -- -- --> ul > li (each li has a class starting with details- and ending with the product info)
                      examples: .details-year, .details-category, .details-dimensions, etc.

CONSIDERATIONS:
    - The declarations are scoped for use within the existing VHA TeamSite page template
      using the portion of the template's lowest main content container id that is
      common to home page and content page templates.
    - When not within the VHA TeamSite templates (i.e., after new VADS framework roll-out)
      the scoping can be removed, but some adjustments to this stylesheet may be required.
*/



[id$="innerContent"] a .fas,
[id$="innerContent"] button .fas  {
    font-size: inherit !important;
    width: auto !important;
}



/* UI-CONTROLS ITEMS */

[id$="innerContent"] .ui-controls {
    color: #212121;
    font-size: 1rem !important;
    margin-bottom: 1rem;
}

[id$="innerContent"] button.ui {
    width: 4rem;
    margin: 0px;
    padding: 4px;
    margin: 0;
    background: none !important;
    border: none !important;
    color: #212121;
    font-size: inherit !important;
}
[id$="innerContent"] button.ui:hover,
[id$="innerContent"] button.ui:active {
    background-color: #fad980 !important;
    transition-property: background-color;
	-moz-transition-property: background-color;
	-webkit-transition-property: background-color;
	transition-duration: 0.25s;
}

[id$="innerContent"] .ui-controls label {
    margin: 0 0 ;
    padding: 0 0.5rem 0 0;
    font-size: inherit !important;
}

[id$="innerContent"] .ui-controls select {
    display:block;
    font-size:inherit !important;
    height:2rem;
    line-height:1rem;
    margin:.2em 0;
    max-width:32rem;
    padding:0.25rem .5em;
    width:100%;
    background-position: right 0.25rem center;
    font-size: 1rem;
    line-height: 1.1rem;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:.1rem solid #5b616b;
    border-radius:0;
    box-sizing:border-box;
    color:#212121;
}

[id$="innerContent"] .ui-controls.reset,
[id$="innerContent"] .ui-controls.showall {
    color: #212121;
    font-size: 0.85rem !important;
    margin-bottom: 1rem;
}

[id$="innerContent"] .ui-controls.reset button.ui,
[id$="innerContent"] .ui-controls.showall button.ui {
    width: 100%;
    padding: 0.5em 0;
    background-color: #f2f2f2 !important;
}

[id$="innerContent"] .ui-controls.reset button.ui:hover,
[id$="innerContent"] .ui-controls.reset button.ui:active,
[id$="innerContent"] .ui-controls.showall button.ui:hover,
[id$="innerContent"] .ui-controls.showall button.ui:active {
    background-color: #fad980 !important;
    transition-property: background-color;
	-moz-transition-property: background-color;
	-webkit-transition-property: background-color;
	transition-duration: 0.25s;
}


/* PRODUCTS CONTAINER */

[id$="innerContent"] ul.products, 
[id$="innerContent"] ul.products.products--list, 
[id$="innerContent"] ul.products.products--grid,
[id$="innerContent"] ul.products.products--fixed,
[id$="innerContent"] ul.products.videos {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

[id$="innerContent"] .products {
    display: flex;
    min-height: 100%;
    height: 100%;
    overflow-y: visible;
}

[id$="innerContent"] .products--grid {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}

[id$="innerContent"] .products--list {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}



/* GENERAL PRODUCT STYLES */

[id$="innerContent"] .products h3 {
    flex-basis: 100%;
}

[id$="innerContent"] .products a[href]	{
    margin: 0;
    padding: 0;
    line-height: auto;
    background: none;
}



/* INDIVIDUAL PRODUCT CONTAINER */

[id$="innerContent"] ul.products li.product, 
[id$="innerContent"] ul.products.products--list li.product, 
[id$="innerContent"] ul.products.products--grid li.product,
[id$="innerContent"] ul.products.products--fixed li.product,
[id$="innerContent"] ul.products.videos li.product {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    margin-left: 0 !important;
}

[id$="innerContent"] .products .product {
    padding: 10px !important;
}
[id$="innerContent"] .products--grid .product {
    flex-basis: 33%;
    margin: 1pt 0;
    padding: 10pt !important;
    background-color: #f1f1f1;
}
[id$="innerContent"] .products--list .product {
    flex-basis: 100%;
    border-bottom: 1px solid #ddd;
    padding: 8pt 0pt;
    }

[id$="innerContent"] .products .product > .product-display {
    display: flex;
}
[id$="innerContent"] .products.products--grid .product > .product-display {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
}

[id$="innerContent"] .products.products--list .product > .product-display {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
[id$="innerContent"] .products.products--list.products--fixed .product > .product-display {
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
}

[id$="innerContent"] .products.products--list.products .product > .product-display > div:first-of-type {
    flex-basis: 33%;
}
[id$="innerContent"] .products.products--list.products .product > .product-display > div:last-of-type {
    flex-basis: 64%;
}

[id$="innerContent"] .products.products--list.products--fixed .product > .product-display > div:first-of-type {
    flex-basis: 25%;
}
[id$="innerContent"] .products.products--list.products--fixed .product > .product-display > div:last-of-type {
    flex-basis: 72%;
}



/* INDIVIDUAL PRODUCT CHILD ITEMS */


[id$="innerContent"] .products .product > .product-display .product-image img {
    width: 100%;
    height: auto;
}

[id$="innerContent"] .products.products--grid .product > .product-display > div {
    flex-grow: 1;
}
[id$="innerContent"] .products.products--grid .product > .product-display > div:nth-of-type(2) {
    flex-grow: 2;
}

[id$="innerContent"] .products.products--grid .product > .product-display .product-image {
    height: 100px;
    overflow-y: hidden;
    overflow-x: hidden;
    text-align: center;
}
[id$="innerContent"] .products.products--grid .product > .product-display .product-actions {
    height: auto;
}

[id$="innerContent"] .products.products--grid .product > .product-display .product-image img {
    width: 100%;
    height: auto;
}

[id$="innerContent"] .product .product-display .product-actions p {
    width: 100%;
    margin: 0;
    padding: 4px;
    font-family: Arial, sans-serif;
    color: #000;
}
[id$="innerContent"] .products.products--grid .product > .product-display .product-actions p {
    align-self: center;
    line-height: 1.25em;
}


[id$="innerContent"] .product .product-actions,
[id$="innerContent"] .products--grid .product .product-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    padding-top: 0.5em;
}

[id$="innerContent"] .products--grid.videos .product .product-actions {
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
}
[id$="innerContent"] .products--list .product .product-actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    padding-left: 16px;
    height: 100%;
}


[id$="innerContent"] .products.products--grid.videos .product > .product-display .product-image {
    height: auto;
    overflow: unset;
    text-align: center;
}

[id$="innerContent"] .products--list .product .product-actions a.btn-download {text-align: left!important;}

[id$="innerContent"] .product .product-display .product-actions p:first-of-type {font-weight: bold;}

[id$="innerContent"] .products--grid .product .product-actions p {text-align: center;}

[id$="innerContent"] .products--grid.videos .product .product-actions p {height: 100%;}



/* PRODUCT > product-display > PRODUCT-ACTIONS -- BUTTONS AND LINKS */

[id$="innerContent"] .product .product-actions a {
    text-decoration: none !important;
}

[id$="innerContent"] .product .product-actions button {
    width: 100%;
    margin: 2pt 0;
    padding: 8px;
    font-size: inherit !important;
}

[id$="innerContent"] .product .product-actions > a,
[id$="innerContent"] #product-details-panel a.btn-download {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 100%;
    margin: 2pt 0 !important;
    padding: 2pt 0 !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    color: #0071bb;
    font-size: inherit !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
}

[id$="innerContent"] .product .product-actions > a:hover,
[id$="innerContent"] .product .product-actions > a.active:hover,
[id$="innerContent"] #product-details-panel a.btn-download:hover,
[id$="innerContent"] #product-details-panel a.btn-download.active:hover {
    background-color: #ededed !important;
    color: #004270;
}

[id$="innerContent"] .product .product-actions > *.active {
    background-color: #ededed !important;
    color: #ff3333;
    border-radius: 8px 8px 0px 0px;
}

[id$="innerContent"] .product .product-actions > *.active:hover {
    border-radius: 8px 8px 0px 0px
}


[id$="innerContent"] .products.products--grid .product > .product-display .product-actions button.btn-details { margin-top: 0.75em;}




/* PRODUCT > PRODUCT-DETAILS CONTAINER -- hidden by default */

[id$="innerContent"] .product .product-details {
    display: none;
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px;
    background-color: rgba(0,0,0,0.95);
}

[id$="innerContent"] .product .product-details.active {
    color: rgba(255,255,255,1.0);
    padding-top: calc((100vh / 2));
}

[id$="innerContent"] .products .product .product-details ul {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: none !important;
    margin: 1em 0 0 0 !important;
    padding: 0 !important;
}

[id$="innerContent"] .products .product .product-details ul li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: none !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 1em !important;
}


/* PRODUCT-DETAILS PANEL -- default empty container loaded with content on demand */

[id$="innerContent"] #product-details-panel {
    display: none;
    position:absolute;
    top:0;
    left:0;
    z-index: 12;
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color: rgba(255,255,255,0.95);
}

[id$="innerContent"] #product-details-panel.videos {
    display: block;
    position: unset !important;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    padding: 0px;
    background-color: rgba(255,255,255,1.0);
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
}

[id$="innerContent"] #product-details-panel.videos iframe {
    width: 100%;
    height: calc(480px * (9 / 16));
    margin-left: auto;
    margin-right: auto;
}

[id$="innerContent"] #product-details-panel.videos p {
    width: 100%;
    margin: 0 0 1rem 0;
    padding: 0.1rem 0.5rem;
    font-size: inherit !important;
    font-weight: normal;
    text-align: left;
}

[id$="innerContent"] #product-details-panel.videos p:first-of-type {
    width: 100%;
    margin: 0;
    padding: 0.1rem 0 0.5rem 0.5rem;
    font-size: 1.25rem !important;
    text-align: left;
}

[id$="innerContent"] #product-details-panel .details-download-buttons > * {
    flex-basis: auto;
    margin: 0 0.5em;
}

[id$="innerContent"] #product-details-panel a.btn-download {
    margin: 0pt 1pt !important;
    padding: 1em 0 !important;
    color: #fff;
    background-color: #0071bb !important;
    border-radius: 5pt;
}

[id$="innerContent"] #product-details-panel p:first-of-type {
    margin: 0;
    padding: 1em 0.5rem;
    font-size: 1rem !important;
    font-weight: bold;
}



/* ---- MEDIA QUERIES ---- */

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

    [id$="innerContent"] #product-details-panel.videos iframe {
        width: 100%;
        height: calc(95vw * (9 / 16));
    }

    [id$="innerContent"] .products.products--grid .product > .product-display .product-image {
        flex-shrink: 2;
        height: calc(25vw * (3/4));
    }
}



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

    [id$="innerContent"] .products .product,
    [id$="innerContent"] .products.products--grid .product  {
        flex-basis: 49%;
        margin: 2pt auto;
        padding: 10px;
    }

    [id$="innerContent"] .products.products--grid .product > .product-display .product-image {
        flex-shrink: 0;
        flex-grow: 2;
        height: calc(33vw * (3/4));
    }

    [id$="innerContent"] .product .product-actions > a,
    [id$="innerContent"] .product .product-actions > button {
        width: 100%;
    }

    [id$="innerContent"] .ui-controls {flex-wrap: wrap !important;}

    [id$="innerContent"] .ui-controls > div[class^="vads-"] {
        flex-basis: 95% !important;
        margin: 4pt 0;
        order: 1;
    }

    [id$="innerContent"] .ui-controls > button {
        order: 2;
        margin-top: 8pt;
    }

}