/**
 * MASTER CLASSIC LAYOUT RESTORATION - VEEWOM QUESTION & ANSWER
 * Matches Screenshot 2 (Classic VeeWom Q&A Design)
 */

/* ==========================================================================
   1. GLOBAL PAGE & BACKGROUND (Section 4, 10)
   ========================================================================== */
body {
    background-color: #eeeeee !important;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.qa-body-wrapper {
    background: transparent !important;
    margin-bottom: 40px !important;
}

/* Main Container (Section 4: max-width 1400px, width 92%, centered) */
.veewom-content-container,
.qa-body-wrapper > .container {
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   2. TOP INFORMATION BAR (Section 3)
   ========================================================================== */
#top-header {
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #666666 !important;
    min-height: 34px !important;
    line-height: 34px !important;
}

#top-header .container {
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

#top-header .top-nav-links a {
    color: #666666 !important;
    margin-right: 16px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

#top-header .top-nav-links a:hover {
    color: #d33b36 !important;
}

#top-header .top-nav-links a i {
    color: #777777 !important;
    margin-right: 4px !important;
}

#top-header .top-nav-links a:hover i {
    color: #d33b36 !important;
}

#top-header .social-links a {
    color: #777777 !important;
    margin-left: 14px !important;
    font-size: 13px !important;
    display: inline-block !important;
    transition: color 0.2s ease !important;
}

#top-header .social-links a:hover {
    color: #d33b36 !important;
}

/* ==========================================================================
   3. MAIN HEADER & NAVIGATION (Section 3)
   ========================================================================== */
#nav-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0 !important;
}

#nav-header .navbar {
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: 68px !important;
    height: 68px !important;
}

.veewom-header-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 68px !important;
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

/* Left Section: Logo (150-180px, aligned left) */
.veewom-header-left {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: 180px !important;
}

.logo-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

.qa-logo-link,
.qa-logo a {
    color: #d33b36 !important;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.qa-logo img {
    max-width: 180px !important;
    height: auto !important;
    display: block !important;
}

/* Center Section: Main Nav Links (Single horizontal row) */
.veewom-header-center {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
}

.veewom-main-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.veewom-main-menu > li > a {
    color: #333333 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}

.veewom-main-menu > li > a:hover,
.veewom-main-menu > li.active > a {
    color: #d33b36 !important;
    background: transparent !important;
}

.veewom-main-menu > li > a i.fa {
    margin-right: 6px !important;
    font-size: 14px !important;
    color: #333333 !important;
}

.veewom-main-menu > li > a:hover i.fa,
.veewom-main-menu > li.active > a i.fa {
    color: #d33b36 !important;
}

/* Ask a Question Pill Button */
.main-nav .nav > li.qa-nav-main-ask > a,
.btn-ask-question {
    display: inline-block !important;
    border: 2px solid #d33b36 !important;
    border-radius: 20px !important;
    color: #d33b36 !important;
    background: #ffffff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 5px 16px !important;
    margin-left: 12px !important;
    transition: all 0.2s ease !important;
    line-height: normal !important;
    text-decoration: none !important;
}

.main-nav .nav > li.qa-nav-main-ask > a:hover,
.btn-ask-question:hover {
    background: #d33b36 !important;
    color: #ffffff !important;
}

/* Right Section: Login Button (Far Right) */
.veewom-header-right {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: 15px !important;
}

.donut-navigation {
    padding: 0 !important;
    margin: 0 !important;
}

.login-nav,
.user-nav {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.login-nav > li,
.user-nav > li {
    float: none !important;
    display: inline-block !important;
}

.navbar-login-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    width: 38px !important;
    height: 34px !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #555555 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.navbar-login-button:hover,
.navbar-login-button:focus {
    background: #fbfbfb !important;
    border-color: #d33b36 !important;
    color: #d33b36 !important;
}

.navbar-login-button span.fa {
    font-size: 16px !important;
    color: #555555 !important;
}

.navbar-login-button:hover span.fa {
    color: #d33b36 !important;
}

.navbar-user-img {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px !important;
    height: 34px !important;
    padding: 2px 8px !important;
    background: #ffffff !important;
}

/* Suppress redundant Donut masthead & breadcrumbs */
.donut-masthead {
    display: none !important;
}

.donut-breadcrumb {
    display: none !important;
}

/* ==========================================================================
   4. FULL-WIDTH PAGE TITLE SECTION (Section 5)
   ========================================================================== */
.veewom-fullwidth-title-section {
    background: #ffffff !important;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.veewom-fullwidth-title-section h1,
.veewom-fullwidth-title-section .veewom-page-title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 28px !important;
    font-weight: normal !important;
    color: #d33b36 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.2px !important;
}

/* ==========================================================================
   5. TWO-COLUMN MAIN CONTENT LAYOUT (Section 6)
   ========================================================================== */
.veewom-main-layout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Left Column: Question Listing (~75% of content width) */
.qa-main {
    flex: 1 1 calc(100% - 330px) !important;
    width: calc(100% - 330px) !important;
    max-width: calc(100% - 330px) !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Right Column: Search Box & Advertisement (25% / 300px) */
.qa-sidepanel {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. QUESTION LISTING & CARDS (Section 7)
   ========================================================================== */
.question-card,
.qa-q-list-item {
    background: #ffffff !important;
    padding: 14px 18px !important;
    margin-bottom: 10px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    transition: box-shadow 0.2s ease !important;
}

.question-card:hover,
.qa-q-list-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* Question Title: Georgia / Times New Roman, 21-24px, dark gray / nearly black */
.qa-q-item-main {
    flex: 1 1 auto !important;
    float: none !important;
    width: auto !important;
    padding-right: 15px !important;
    padding-left: 0 !important;
}

.qa-q-item-title {
    margin-bottom: 4px !important;
}

.qa-q-item-title a {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    transition: color 0.2s ease !important;
}

.qa-q-item-title a:hover {
    color: #d33b36 !important;
}

/* Question Metadata: Arial, 13px, muted gray with red accents */
.qa-q-item-meta {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    color: #777777 !important;
    margin-top: 4px !important;
    display: block !important;
}

.qa-q-item-where a,
.qa-category-link {
    color: #d33b36 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.qa-q-item-where a:hover,
.qa-category-link:hover {
    text-decoration: underline !important;
}

.qa-q-item-who a {
    color: #d33b36 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.qa-q-item-who a:hover {
    text-decoration: underline !important;
}

.qa-q-item-who-points {
    color: #777777 !important;
    font-weight: normal !important;
}

/* Hide user avatar in question list as per Screenshot 2 */
.qa-q-item-avatar-meta .qa-avatar-link,
.qa-q-item-avatar-meta .qa-avatar-image,
.qa-q-item-avatar-warp {
    display: none !important;
}

/* ==========================================================================
   7. VOTING AND ANSWER COUNTERS (Section 8)
   ========================================================================== */
.qa-q-item-stats {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}

.veewom-stat-box {
    background: #ffffff !important;
    text-align: center !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Voting Counter: light blue border, white background, ~65-75px wide, 56px high */
.veewom-stat-box.vote-box {
    width: 65px !important;
    height: 56px !important;
    border: 1px solid #b0d5e5 !important;
    background: #fbfdfe !important;
}

.veewom-stat-box .vote-arrow {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.veewom-stat-box .vote-arrow.up {
    color: #65b8d4 !important;
    font-size: 11px !important;
}

.veewom-stat-box .vote-arrow.down {
    color: #d33b36 !important;
    font-size: 11px !important;
}

.veewom-stat-box.vote-box .qa-netvote-count-data {
    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    line-height: 18px !important;
}

.veewom-stat-box.vote-box .qa-netvote-count-pad {
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    color: #777777 !important;
    line-height: 11px !important;
}

/* Answer Counter: light red border, answer count in red, ~65-75px wide, 56px high */
.veewom-stat-box.answer-box {
    width: 65px !important;
    height: 56px !important;
    border: 1px solid #fadbd8 !important;
}

.veewom-stat-box.answer-box.has-answers {
    border-color: #f5c6cb !important;
}

.veewom-stat-box.answer-box .qa-a-count-data {
    font-family: Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #d33b36 !important;
    line-height: 22px !important;
}

.veewom-stat-box.answer-box .qa-a-count-pad {
    font-family: Arial, sans-serif !important;
    font-size: 10px !important;
    color: #777777 !important;
    line-height: 11px !important;
}

/* ==========================================================================
   8. RIGHT SIDEBAR (Section 9)
   ========================================================================== */
/* Search Box: Height 40px, full sidebar width */
.side-search-bar {
    width: 300px !important;
    margin-bottom: 15px !important;
}

.side-search-bar .input-group {
    width: 100% !important;
    height: 40px !important;
}

.side-search-bar .search-form .form-control,
.side-search-bar .qa-search-field,
.qa-sidepanel .qa-search-field {
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    height: 40px !important;
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: none !important;
}

.side-search-bar .qa-search-button,
.qa-sidepanel .btn.qa-search-button {
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-left: none !important;
    border-radius: 0 !important;
    height: 40px !important;
    color: #666666 !important;
    box-shadow: none !important;
    padding: 6px 14px !important;
}

.side-search-bar .qa-search-button:hover,
.qa-sidepanel .btn.qa-search-button:hover {
    color: #d33b36 !important;
    background: #fdfdfd !important;
}

/* Advertisement Section: 300px x 600px Skyscraper Ad */
.veewom-sidebar-ad {
    width: 300px !important;
    min-height: 600px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
    box-sizing: content-box !important;
    overflow: hidden !important;
}

/* Suppress sidebar category widget that distorts the layout */
.qa-sidepanel .qa-nav-cat,
.qa-sidepanel .qa-nav-cat-list,
.qa-sidepanel .qa-widget-side {
    display: none !important;
}

/* Hide Sub-Navigation Row and Left Sidebar on question/home pages */
.subnav-row {
    display: none !important;
}

/* ==========================================================================
   9. FOOTER & CREDITS REMOVAL (Section 13)
   ========================================================================== */
.qa-attribution,
.donut-attribution,
.donut-copyright,
.qa-nav-footer {
    display: none !important;
}

footer.veewom-main-footer {
    background: #282828 !important;
    padding: 60px 0 50px !important;
    color: #878787 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    margin-top: 50px !important;
    width: 100% !important;
}

footer.veewom-main-footer .container {
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

footer.veewom-main-footer h4 {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 0 22px 0 !important;
    font-weight: normal !important;
}

footer.veewom-main-footer p {
    color: #999999 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    margin-bottom: 15px !important;
}

footer.veewom-main-footer b {
    color: #ffffff !important;
}

footer.veewom-main-footer ul.f-posts {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

footer.veewom-main-footer ul.f-posts li {
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #383838 !important;
}

footer.veewom-main-footer ul.f-posts li:last-child {
    border-bottom: none !important;
}

footer.veewom-main-footer ul.f-posts li a {
    color: #cfcfcf !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-size: 13px !important;
}

footer.veewom-main-footer ul.f-posts li a:hover {
    color: #d33b36 !important;
}

footer.veewom-main-footer ul.c-info {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

footer.veewom-main-footer ul.c-info li {
    position: relative !important;
    padding-left: 24px !important;
    color: #999999 !important;
    margin-bottom: 10px !important;
    line-height: 22px !important;
    font-size: 13px !important;
}

footer.veewom-main-footer ul.c-info li i {
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    color: #d33b36 !important;
    font-size: 14px !important;
}

footer.veewom-main-footer ul.c-info li a {
    color: #cfcfcf !important;
    text-decoration: none !important;
}

footer.veewom-main-footer ul.c-info li a:hover {
    color: #d33b36 !important;
}

/* Footer Bottom DMCA Bar */
.footer-bottom {
    background: #1f1f1f !important;
    padding: 18px 0 !important;
    color: #888888 !important;
    font-size: 13px !important;
    border-top: 1px solid #333333 !important;
    top: 0 !important;
    position: static !important;
    margin: 0 !important;
}

.footer-bottom .container {
    max-width: 1400px !important;
    width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

.footer-bottom p {
    margin: 0 !important;
    padding-top: 6px !important;
    color: #888888 !important;
}

.footer-bottom a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.footer-bottom a:hover {
    color: #d33b36 !important;
}

#dmca-right {
    text-align: right !important;
}

/* ==========================================================================
   10. RESPONSIVE DESIGN (Section 12)
   ========================================================================== */
/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .veewom-header-container,
    .veewom-content-container,
    .qa-body-wrapper > .container,
    #top-header .container,
    footer.veewom-main-footer .container,
    .footer-bottom .container {
        width: 95% !important;
    }

    .veewom-main-layout {
        gap: 20px !important;
    }

    .qa-main {
        flex: 1 1 calc(100% - 310px) !important;
        width: calc(100% - 310px) !important;
        max-width: calc(100% - 310px) !important;
    }

    .qa-sidepanel {
        flex: 0 0 290px !important;
        width: 290px !important;
    }

    .side-search-bar {
        width: 100% !important;
    }

    .veewom-main-menu > li > a {
        padding: 8px 8px !important;
        font-size: 13px !important;
    }
}

/* Mobile (below 768px) */
@media (max-width: 767px) {
    .veewom-header-container {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 56px !important;
        padding: 10px 15px !important;
    }

    .veewom-header-left {
        width: auto !important;
    }

    .veewom-header-center {
        width: 100% !important;
        order: 3 !important;
        justify-content: flex-start !important;
    }

    .veewom-header-right {
        order: 2 !important;
        margin-left: auto !important;
    }

    .veewom-main-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding-top: 10px !important;
    }

    .veewom-main-menu > li {
        width: 100% !important;
    }

    .veewom-main-menu > li > a {
        padding: 10px 0 !important;
        width: 100% !important;
    }

    .btn-ask-question {
        margin: 10px 0 !important;
        display: inline-block !important;
    }

    .veewom-main-layout {
        display: block !important;
    }

    .qa-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .qa-sidepanel {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 25px !important;
    }

    .side-search-bar {
        width: 100% !important;
    }

    .veewom-sidebar-ad {
        margin: 15px auto !important;
    }

    .question-card,
    .qa-q-list-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .qa-q-item-stats {
        margin-top: 12px !important;
        align-self: flex-start !important;
    }
}