﻿/* =============================================
   PST Theme CSS for LearningCart Content Builder
   All styles scoped to #pst-header, #pst-footer,
   or PST-specific class names to avoid LC conflicts.
   ============================================= */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');

/* ── Force PST wrapper elements to be full-width blocks ── */
#pst-header,
#pst-footer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ── Base PST classes (renamed to avoid Bootstrap conflicts) ── */
/* Neutralize LC wrapper padding + sticky footer setup */
.is-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 100vh !important;
    flex-direction: column !important;
}

/* Push footer to bottom when content is short */
#pst-footer {
    margin-top: auto !important;
}

.pst-container {
    margin-right: auto !important;
    margin-left: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    max-width: 960px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

.pst-clearfix::before,
.pst-clearfix::after {
    display: table !important;
    content: " " !important;
}

.pst-clearfix::after {
    clear: both !important;
}

.pst-col_full {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* ── PST Header ── */
#pst-header {
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 18.2px !important;
    font-weight: 400 !important;
    color: #777 !important;
    border-top: 6px solid #3778e8 !important;
    background-color: #fff !important;
    position: relative !important;
    z-index: 9999 !important;
    overflow: visible !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#pst-header *,
#pst-header *::before,
#pst-header *::after {
    box-sizing: border-box !important;
}

#pst-header a {
    color: #555 !important;
    text-decoration: none !important;
}

#pst-header a:hover {
    color: #3498db !important;
}

/* ── Top Bar ── */
#pst-header .pst-top-bar {
    background-color: #f7f7f7 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    display: block !important;
    width: 100% !important;
}

#pst-header .pst-top-bar>.pst-container {
    max-width: 960px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Disable clearfix pseudo-elements inside flex containers — they become
   invisible flex items that push content to the right */
#pst-header .pst-top-bar>.pst-container::before,
#pst-header .pst-top-bar>.pst-container::after {
    display: none !important;
}

#pst-header .pst-top-bar .leftalign {
    display: flex !important;
    align-items: center !important;
}

#pst-header .pst-top-bar .rightalign {
    display: flex !important;
    align-items: center !important;
}

#pst-header #top-menu {
    font-size: 12px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
    color: #777 !important;
    line-height: 15.6px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#pst-header #top-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#pst-header #top-menu ul li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    min-height: 40px !important;
    line-height: 15.6px !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

#pst-header #top-menu .phone {
    display: inline !important;
    margin-right: 15px !important;
}

#pst-header #top-menu .contact_address {
    border-left: 1px solid #e8e8e8 !important;
    padding-left: 15px !important;
    display: inline !important;
}

#pst-header #top-menu ul li div,
#pst-header #top-menu li a,
#pst-header #top-menu li span,
#pst-header #top-menu ul li div.phone,
#pst-header #top-menu ul li div.contact_address {
    color: #777 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 15.6px !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}

#pst-header #top-menu li i {
    color: #777 !important;
}

#pst-header #top-menu li a:hover {
    color: #3498db !important;
}

#pst-header #top-menu .fa-phone-alt {
    font-size: 11px !important;
    margin-right: 5px !important;
}

#pst-header #top-menu .fa-map-marker-alt {
    font-size: 14px !important;
    width: 11px !important;
    margin-right: 5px !important;
}

#pst-header .taptocall {
    display: none !important;
}

/* Top Social */
#pst-header #top-social {
    line-height: 18.2px !important;
}

#pst-header #top-social ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#pst-header #top-social li {
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 18.2px !important;
    font-weight: 400 !important;
}

#pst-header #top-social li a {
    display: block !important;
    text-align: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    line-height: 40px !important;
    color: #4a4a4a !important;
    border-radius: 3px !important;
    transition: all 0.2s !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#pst-header #top-social li a:hover {
    background-color: #3498db !important;
    color: #fff !important;
}

#pst-header #top-social .ts-text {
    display: none !important;
}

/* ── Header Main (Logo + Nav combined) ── */
#pst-header .pst-header-main {
    background-color: #fff !important;
    border-bottom: none !important;
    display: block !important;
    width: 100% !important;
}

#pst-header .pst-header-main>.pst-container {
    max-width: 960px !important;
    display: block !important;
    border-bottom: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Top row: logo left, cart/account right */
#pst-header .pst-header-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

#pst-header #logo {
    max-height: 72px !important;
    text-align: left !important;
    float: none !important;
    margin-right: 30px !important;
}

#pst-header #logo img {
    height: 72px !important;
    width: auto !important;
    display: block !important;
}

#pst-header #logo a {
    display: inline-block !important;
}

/* ── LC Account Nav (Cart / My Account / Logout) ── */
#pst-header .pst-lc-nav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: right !important;
    margin-left: auto !important;
}

#pst-header .pst-nav-top {
    list-style: none !important;
    display: flex !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pst-header .pst-nav-top li a {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    transition: all 0.2s !important;
    background: transparent !important;
}

#pst-header .pst-nav-top li a:hover {
    background-color: #3498db !important;
    border-color: #3498db !important;
    color: #fff !important;
}

#pst-header .pst-nav-top li a i {
    margin-right: 4px !important;
}

#pst-header .pst-lc-navigation {
    margin-top: 5px !important;
    font-size: 12px !important;
}

/* ── Menu Bar: Separate full-width bar below logo (matches PST site) ── */
#pst-header .pst-menu-bar {
    border-top: none !important;
    background-color: #fff !important;
    display: block !important;
    width: 100% !important;
}

#pst-header .pst-menu-bar>.pst-container {
    max-width: 960px !important;
    border-top: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#pst-header .sf-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    float: none !important;
    border-top: 1px solid #e8e8e8 !important;
}

#pst-header .sf-menu>li {
    position: relative !important;
    overflow: visible !important;
    float: none !important;
}

#pst-header .pst-menu-bar .sf-menu>li>a {
    display: block !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 50px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #444 !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s !important;
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    background: transparent !important;
}

#pst-header .pst-menu-bar .sf-menu>li>a {
    margin-left: 1px !important;
    margin-right: 1px !important;
}

#pst-header .pst-menu-bar .sf-menu>li>a:hover,
#pst-header .pst-menu-bar .sf-menu>li.sfHover>a {
    color: #3498db !important;
    border-bottom-color: #3498db !important;
    background-color: #fff !important;
}

#pst-header .sf-menu .sf-sub-indicator {
    margin-left: 4px !important;
}

#pst-header .sf-menu .sf-sub-indicator i {
    font-size: 10px !important;
    color: #444 !important;
}

#pst-header .sf-menu>li:hover>a .sf-sub-indicator i {
    color: #3498db !important;
}

/* Dropdown Menus */
#pst-header .sf-menu ul.sub-menu {
    display: none !important;
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    min-width: 220px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e8e8e8 !important;
    border-top: 2px solid #3498db !important;
    z-index: 99999 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pst-header .sf-menu>li:hover>ul.sub-menu,
#pst-header .sf-menu>li.sfHover>ul.sub-menu {
    display: block !important;
}

#pst-header .sf-menu ul.sub-menu li {
    position: relative !important;
    float: none !important;
    width: 100% !important;
}

#pst-header .sf-menu ul.sub-menu li a {
    display: block !important;
    padding: 10px 15px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #444 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f2f2f2 !important;
    transition: all 0.2s !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

#pst-header .sf-menu ul.sub-menu li a:hover {
    background-color: rgba(49, 49, 49, 0.95) !important;
    color: #fff !important;
}

/* Nested sub-menus (e.g., Buzz / News) */
#pst-header .sf-menu ul.sub-menu ul.sub-menu {
    top: 0 !important;
    left: 100% !important;
}

#pst-header .sf-menu ul.sub-menu li:hover>ul.sub-menu {
    display: block !important;
}

/* ── PST Footer ── */
#pst-footer {
    font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#pst-footer *,
#pst-footer *::before,
#pst-footer *::after {
    box-sizing: border-box !important;
}

#pst-footer .copyrights-dark {
    background-color: #282A2B !important;
    color: #DDD !important;
    padding: 20px 0 !important;
    text-align: center !important;
    width: 100% !important;
}

#pst-footer .copyrights-dark a {
    color: #BFBFBF !important;
    text-decoration: none !important;
}

#pst-footer .copyrights-dark a:hover {
    color: #fff !important;
}

#pst-footer .pst-col_full {
    width: 100% !important;
    text-align: center !important;
}

#pst-footer .footer-menu {
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
}

#pst-footer .footer-menu li {
    list-style: none !important;
}

#pst-footer .footer-menu li a {
    color: #BFBFBF !important;
    text-decoration: none !important;
}

#pst-footer .footer-menu li a:hover {
    color: #fff !important;
}

/* ── Responsive ── */
@media only screen and (max-width: 979px) {
    #pst-header .pst-top-bar>.pst-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    #pst-header .pst-header-top-row {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    #pst-header .pst-lc-nav {
        margin-left: 0 !important;
    }

    #pst-header .sf-menu {
        flex-direction: column !important;
    }

    #pst-header .sf-menu>li>a {
        line-height: 40px !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    #pst-header .sf-menu ul.sub-menu {
        position: static !important;
        border: none !important;
    }
}