/* ==================================================================================================================
   MasterPageV4.css  --  REFERENCE MOCKUP (plain CSS Grid, no floats, no IE hacks)
   ------------------------------------------------------------------------------------------------------------------
   Layout summary:
     - Phone / small screens (default):  2 columns  -> [ sidebar | content ]
     - Desktop (>= 1100px):              3 columns  -> [ sidebar | content | announcements/ads ]
     - Optional tiny-phone stack (<= 480px) included at the bottom, commented out.
   Everything float-related from V3 is gone: no .column, no .divclear, no negative margins,
   no * html IE6 hack, no min-width:1024 requirement.
================================================================================================================== */

/* ------------------------------------------------------------------
   Page background & shell (same look as V3)
------------------------------------------------------------------ */
body {
    margin: 0;
    background-image: linear-gradient(to bottom, #B8DBFF, #8287c4);
    background-attachment: fixed;
    /* NOTE: V3's min-width:630px is intentionally removed so phones work */
}

#content-wrapper {
    max-width: 1280px;
    /* no min-width anymore -- the grid collapses instead */
    background-color: White;
    margin: 10px auto 0 auto;
    border: 1px solid white;
    border-radius: 18px;
    box-shadow: 0 0 20px #000000;
    overflow: hidden;   /* keeps children inside the rounded corners,
                           replaces the border-bottom-left/right-radius tricks on the columns */
}

/* ------------------------------------------------------------------
   HEADER  (was: div#topbar containing table#table_topbar)
   Flexbox row: logo | title + nav | cart
------------------------------------------------------------------ */
header#topbar {
    position: relative; /* anchor for the desktop cart placement */
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* lets the pieces stack politely on narrow screens */
    border-bottom: 3px ridge Navy;
    min-height: 100px;
    padding: 5px 12px 8px 5px;
}

#topbar_logo img {
    width: 230px;
    max-width: 40vw;              /* logo shrinks on phones instead of forcing scroll */
    height: auto;
    display: block;
}

#topbar_center {
    flex: 1 1 300px;              /* takes the leftover middle space */
    text-align: center;
}

#topbar_center .site-tagline {
    font-weight: bolder;
    font-size: clamp(18px, 2.5vw, 28px);   /* scales with screen size */
    display: block;
    margin-bottom: 6px;
}

/* Top menu -- same button look as V3, just flex instead of inline-block li's */
nav#topnav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center; /* keeps the cart button vertically centered
                            with the menu buttons (heights differ slightly) */
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
}

/* a little extra separation so the cart reads as "action", not "menu item" */
nav#topnav li.nav-cart {
    margin-left: 14px;
}
nav#topnav a {
    display: block;
    text-decoration: none;
    color: White;
}
nav#topnav a:hover  { color: White; }
nav#topnav a:active { color: #b8cfe1; }

/* .topMenuButton is unchanged -- keep using the V3 rule, or copy it here.
   Trimmed to the modern single declaration: */
.topMenuButton {
    padding: 5px 8px;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid Navy;
    background: linear-gradient(135deg, #b8cfe1 0%, #3c90c7 22%, #3a6585 79%, #2e264c 100%);
}

/* -----------------------------------------------------------------
   CART BUTTON  (lives in the nav row; goes to the Keap hosted cart)
-------------------------------------------------------------------- */
a.cart-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: 17px;
    font-weight: bold;
    color: White;
    text-decoration: none !important;
    border: 2px solid Navy;
    border-radius: 9px;
    background: linear-gradient(to bottom, #2989d8, #1e5799);  /* site blues */
    white-space: nowrap;
}
a.cart-button:hover {
    background: linear-gradient(to bottom, #3c90c7, #2989d8);
    color: White;
}
a.cart-button svg {
    /* 18px keeps the icon shorter than the 17px text's line box, so the
       TEXT sets the button height -- same as the Products/menu buttons */
    width: 18px;
    height: 18px;
    stroke: currentColor; /* icon inherits the button's text color */
    fill: none;
}

/* ------------------------------------------------------------------
   PRODUCTS MENU TOGGLE + DRAWER BACKDROP
   The button only shows on phone widths (see the 640px block below);
   on bigger screens the sidebar is a normal open column.
------------------------------------------------------------------ */
button.menu-toggle {
    display: none; /* phone-only, enabled in the 640px block */
    padding: 7px 12px;
    font-size: 17px;
    font-weight: bold;
    color: White;
    border: 2px solid Navy;
    border-radius: 9px;
    background: linear-gradient(to bottom, #2989d8, #1e5799);
    cursor: pointer;
}

#menu-backdrop {
    display: none; /* only shown while the drawer is open on phones */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 999;
}

/* ------------------------------------------------------------------
   MAIN GRID  (was: the holy-grail float layout)
   Default = phone/tablet: 2 columns, ad column hidden
------------------------------------------------------------------ */
#container {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    /* three rows on the left: sidebar (products+login), announcements/ads,
       then contact; content spans all rows on the right.
       The last row is 1fr so the left column's white background
       stretches to the bottom of the page. */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "sidebar content"
        "ads     content"
        "contact content";
}

main#content {
    grid-area: content;
    padding: 10px;
    min-height: 600px;
    /* minmax(0,1fr) on the column already prevents wide content (tables!)
       from blowing the layout apart -- no more V3 'Warning!' comment needed */
}

aside#sidebar {
    grid-area: sidebar;
    background-color: White;
    border-right: 2px solid #dbdbff;
    padding-bottom: 10px;
}

aside#announcementsBar {
    grid-area: ads;
    background-color: White;
    /* narrow mode: it sits under the sidebar, so it matches the
       sidebar's right border instead of having a left one */
    border-right: 2px solid #dbdbff;
    border-top: 2px solid #dbdbff;
    padding-top: 15px;
}

/* Contact block -- its own grid item so it can sit below the ads on
   narrow screens but stay in the left column on desktop */
#contactArea {
    grid-area: contact;
    background-color: White;
    border-right: 2px solid #dbdbff;
    padding: 0 0 15px 0;
}

#contact_bar_table_contactus {
    /*text-align: center;*/
    margin-top: -6px;
}
/*#contact_bar_table_contactus.center {
    text-align: center;
}*/

/* Desktop: 3 columns, ads on the right, contact back under the sidebar */
@media (min-width: 1100px) {
    #container {
        grid-template-columns: 210px minmax(0, 1fr) 210px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "sidebar content ads"
            "contact content ads";
    }
    aside#announcementsBar {
        border-right: none;
        border-top: none;
        padding-top: 0;
        border-left: 2px solid #dbdbff;
    }

    /* Desktop: cart moves to the top-right corner of the header, where
       people expect a shopping cart. It leaves the nav row entirely
       (absolute), so HOME/SCHEDULES/MAPS stay perfectly centered. */
    nav#topnav li.nav-cart {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        margin-left: 0;
    }
}

/* Phones: single column with the sidebar as a slide-out DRAWER.
   Content is first and full-width; the products/login live in a
   fixed panel that slides in from the left via the ☰ Products button. */
@media (max-width: 640px) {
    #container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "content"
            "ads"
            "contact";
    }

    aside#announcementsBar {
        border-right: none;
    }

    #contactArea {
        border-right: none;
    }

    /* Products sits at the TOP of the header row (instead of vertically
       centered beside the logo)... */
    button.menu-toggle {
        display: inline-block;
        align-self: flex-start;
        margin-top: 10px;
    }
    /* ...and View Cart pins to the top-right at the same y:
       header's 5px top padding + the toggle's 10px margin = 15px.
       Same button heights, so their tops and bottoms both line up. */
    nav#topnav li.nav-cart {
        position: absolute;
        top: 15px;
        right: 12px;
        margin-left: 0;
    }

    /* the sidebar leaves the grid and becomes an off-canvas drawer,
       closed by default, opened by adding .menu-open to <body> */
    aside#sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 240px;
        overflow-y: auto;
        background-color: White;
        border-right: 2px solid Navy;
        box-shadow: 4px 0 14px rgba(0, 0, 0, .35);
        transform: translateX(-105%);
        transition: transform .25s ease;
        z-index: 1000;
        padding-top: 10px;
    }

    body.menu-open aside#sidebar {
        transform: translateX(0);
    }

    body.menu-open #menu-backdrop {
        display: block;
    }
}

/* ------------------------------------------------------------------
   SIDEBAR pieces (product bar / login / contact) -- mostly V3 styles,
   plus the login controls that moved over from the top-right
------------------------------------------------------------------ */
#product-bar {
    margin: 0 auto 10px auto;
    padding: 5px;
    text-align: center;
}
#ul_product_bar {
    list-style: none;
    padding: 0;
    margin: 0;
}
#ul_product_bar li { margin-bottom: 5px; }
#ul_product_bar a  { text-decoration: none; }
#ul_product_bar li a img { width: 195px; max-width: 100%; }

/* Login block, now in the sidebar under the product buttons */
#sidebar_login {
    text-align: center;
    padding: 10px 5px;
    border-top: 1px solid #dbdbff;
    border-bottom: 1px solid #dbdbff;
    margin: 0 5px 10px 5px;
}
.imgLogin {
    width: 135px;
    height: 48px;
    cursor: pointer;
}
#sidebar_login .btnMyReports {
    display: inline-block;
    margin-top: 6px;
    color: Yellow;
    text-decoration: none;
}

#contact-bar {
    width: 180px;
    padding: 5px;
    border: 2px solid #8287c4;
    margin: 20px auto 0 auto;
    border-radius: 9px;
    background-color: White;
    white-space: nowrap;
}
#contact_bar_header a {
    padding: 3px 10px;
    position: relative;
    top: -17px;
    left: 10px;
    font-weight: bold;
    border: 2px solid #8287c4;
    border-radius: 9px;
    background-color: White;
}

/* Announcements column bits (unchanged from V3 behavior) */
.divGenericAnnouncement { width: 200px; margin: 0 auto 15px auto; }
.divGenericAnnouncement img { max-width: 100%; }
.divGenericAnnouncement_Text {
    text-align: center;
    font-size: 1.1em;
    width: 200px;
    margin: 0 auto 15px auto;
    padding: 5px 0;
    border-top: 1px solid #A4BBE9;
    border-bottom: 1px solid #A4BBE9;
}

/* ------------------------------------------------------------------
   FOOTER  (was: div#pagefooter)
------------------------------------------------------------------ */
footer#pagefooter {
    margin: 10px auto;
    min-height: 100px;
    text-align: center;
    font-weight: 600;
    max-width: 750px;             /* was fixed width:750px -- now shrinks on phones */
    padding: 15px;
    background-image: url('/img/MasterPages/pattern-blue-texture.png');
    background-repeat: repeat;
    border: 1px solid Navy;
    border-radius: 18px;
    box-shadow: 0 0 20px #000000;
}

/* ==================================================================================================================
   Free Report Button, Dialog, & All Related Controls
================================================================================================================== */

.freereps_modalBackground {
    background-color: WindowFrame;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.freereps_modalPopup {
    background-color: White;
    border-width: 3px;
    border-style: solid;
    border-color: #E68A00;
    padding: 5px 5px 10px 5px;
    width: 700px;
    font-weight: normal;
    background-color: #FFC670;
    line-height: normal;
}

#tblFreeReport_Input {
    margin: 10px 0px 0px 10px;
    width: 670px;
    vertical-align: top;
    text-align: left;
}

#tblFreeReport_Input2 {
    margin: 0px 0px 10px 10px;
    width: 670px;
    vertical-align: top;
    text-align: left;
}

.tdFreeRep_InputLabel {
    width: 125px;
}

.divFreeReports {
    border: 1px solid #E68A00;
    background-color: #FFFFB2;
}

/* this table holds the list of reports */
#tblFreeReports {
    margin: 6px;
    width: 660px;
}

.ulFreeReports {
    /* this holds all the reports listed in the free reports div */
    margin: 0px 0px 0px 5px;
    padding: 0px;
    list-style-position: inside;
    width: 310px;
}

.ulFreeReports > li {
    margin-bottom: 3px;
}

/* These are the input fields */
.FR_Label {
    font-weight: bold;
    display: inline-block;
    width: 125px;
}

.spanRequiredStar {
    font-weight: bold;
    color: #CC3399;
}

.FR_TextEntry {
    width: 190px;
}

.FR_TextEntry_FullRow {
    width: 525px;
}

.spanFreeReport_HeaderMain {
    color: #1a1a4c; /* was a dark purple (#5C00B8) */
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
}

.spanFreeReport_HeaderBlack {
    color: #853385;
    font-weight: bold;
    font-size: 16px;
    font-variant: small-caps;
}

.spanFreeReport_HeaderFREE {
    color: #FFFF00;
    font-weight: bold;
    font-size: 18px;
    padding-left: 3px;
    padding-right: 3px;
    border-bottom: 2px solid #FFFF00;
}

.spanFreeReport_HeaderReport {
    color: #333399;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 5px;
}

.spanFreeReport_ErrorMsg {
    color: #CC3399;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 2px;
}

/* Button Styles
   ------------- */

/* show the free report dialog, button */
#ctl00_btnShowFreeReports {
    width: 200px;
    border: 2px solid #FF8533;
    background: #ffab03;
    background: -webkit-gradient(linear, left top, left bottom, from(#3C8ABD), to(#A8A8CE));
    background: -webkit-linear-gradient(top, #3C8ABD, #A8A8CE);
    background: -moz-linear-gradient(top, #3C8ABD, #A8A8CE);
    background: -ms-linear-gradient(top, #3C8ABD, #A8A8CE);
    background: -o-linear-gradient(top, #3C8ABD, #A8A8CE);
    padding: 6px 11px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: Yellow;
    font-size: 22px;
    font-family: Georgia, Serif;
    text-decoration: none;
    vertical-align: middle;
    line-height: normal;
}
#ctl00_btnShowFreeReports:hover {
    border-top-color: #5d2878;
    background: #3B6F94;
    color: #ccc;
}
#ctl00_btnShowFreeReports:active {
    border-top-color: #3c1b5c;
    background: #356485;
}


/* this is the Ok & Cancel dialog buttons for the free reps dialog */
.btnFR_Ok {
    width: 75px;
}
.btnFR_Cancel {
    width: 75px;
}

.buttonOnRight {
    float: right;
    display: inline-block;
    margin-left: 10px;
}

.buttonPurpleBox {
    /* http://www.colorzilla.com/gradient-editor/ */
    display: inline-block; /* IE is so silly */
    font-family: Arial;
    color: #FFFF00;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 6px 5px 6px;
    text-decoration: none;
    -webkit-box-shadow: 1px 1px 3px #666666;
    -moz-box-shadow: 1px 1px 3px #666666;
    text-shadow: 1px 1px 3px #666666;
    border: solid #003366 2px;
    background: #c8b5f4;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4YjVmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzg5ODliYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcxJSIgc3RvcC1jb2xvcj0iIzg5ODliYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Nzc3YjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #c8b5f4 0%, #8989ba 28%, #8989ba 71%, #7777b7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8b5f4), color-stop(28%,#8989ba), color-stop(71%,#8989ba), color-stop(100%,#7777b7));
    background: -webkit-linear-gradient(top, #c8b5f4 0%,#8989ba 28%,#8989ba 71%,#7777b7 100%);
    background: -o-linear-gradient(top, #c8b5f4 0%,#8989ba 28%,#8989ba 71%,#7777b7 100%);
    background: -ms-linear-gradient(top, #c8b5f4 0%,#8989ba 28%,#8989ba 71%,#7777b7 100%);
    background: linear-gradient(to bottom, #c8b5f4 0%,#8989ba 28%,#8989ba 71%,#7777b7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8b5f4', endColorstr='#7777b7',GradientType=0 );
}
.buttonPurpleBox:hover {
    background: #AD85FF;
}