/* ============================================================
   ProReview Modern — Responsive overrides (Step 4)
   Mobile-first approach via max-width overrides on legacy CSS.
   Loaded AFTER style.css via header.php.
   Last updated: 2026-04-22
   ============================================================ */

/* ---- Global: images & media fluid ---- */
img, embed, iframe, object, video {
    max-width: 100%;
    height: auto;
}

/* ---- Hamburger toggle (hidden desktop, shown mobile) ---- */
.mobile-menu-toggle {
    display: none;
    background: #1d1d1d;
    color: #fff;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    padding: 14px 20px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    letter-spacing: 1px;
    font-family: inherit;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background: #373737;
    outline: none;
}

/* ============================================================
   TABLET + MOBILE — max 1023px
   ============================================================ */
@media (max-width: 1023px) {

    /* Containers: fluid width, stay within viewport */
    .top_list_in,
    #header,
    .page_wrapper {
        width: 100%;
        max-width: 960px;
        box-sizing: border-box;
    }

    /* Header padding cleanup */
    #header {
        height: auto;
        padding: 15px;
        overflow: hidden;
    }
    #header h1.logo,
    #header h2.logo {
        float: none;
        text-align: center;
        padding: 10px;
    }
    #header h1.logo img,
    #header h2.logo img {
        max-width: 100%;
        height: auto;
    }
    .header_banner {
        float: none;
        text-align: center;
        padding: 10px;
    }
    .header_banner img {
        max-width: 100%;
        height: auto;
    }

    /* Main content: single column, sidebar below */
    .main_content {
        padding: 0 15px;
    }
    #primary,
    #sidebar {
        float: none;
        width: 100% !important;
        margin-right: 0;
    }
    #primary {
        margin-bottom: 30px;
    }

    /* Hide decorative hardcoded banner (Digital Playground side strip) */
    .barra,
    .barra_left {
        display: none !important;
    }
}

/* ============================================================
   MOBILE — max 767px
   ============================================================ */
@media (max-width: 767px) {

    body {
        font-size: 16px;
    }

    /* Top list (utility nav): hide on mobile, rarely critical */
    .top_list {
        display: none;
    }

    /* Main category nav: activate hamburger pattern */
    .mobile-menu-toggle {
        display: block;
    }
    .cat_nav {
        background: #1d1d1d;
        margin: 0;
    }
    .cat_nav > .menu-home-and-mobile-container,
    .cat_nav > ul,
    .cat_nav > div > ul {
        display: none;
    }
    body.mobile-menu-open .cat_nav > .menu-home-and-mobile-container,
    body.mobile-menu-open .cat_nav > ul,
    body.mobile-menu-open .cat_nav > div > ul {
        display: block;
    }
    .cat_nav ul {
        background: #1d1d1d;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .cat_nav ul li {
        float: none !important;
        display: block;
        border-bottom: 1px solid #373737;
    }
    .cat_nav ul li a {
        display: block;
        color: #fff !important;
        background: transparent !important;
        border: none !important;
        padding: 14px 20px !important;
        margin: 0 !important;
        font-size: 15px;
    }
    .cat_nav ul li a:hover,
    .cat_nav ul li.current-menu-item > a {
        background: #373737 !important;
        color: #fff !important;
    }
    /* Submenus: show inline indented (no hover dropdowns on mobile) */
    .cat_nav ul ul {
        display: block;
        position: static !important;
        width: auto !important;
        background: #0d0d0d;
    }
    .cat_nav ul ul li a {
        padding-left: 40px !important;
        font-size: 14px;
    }

    /* Review cards: single column */
    .single_review,
    #two_columns .single_review,
    #three_columns .single_review {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box;
    }
    .single_review .review_data {
        padding: 15px;
    }
    #pro_reviews .preload_image,
    .review_single .preload_image,
    .full_width .review_single .preload_image {
        float: none;
        width: 100% !important;
        margin: 0 0 15px 0;
        text-align: center;
    }
    .review_single .brief {
        float: none;
        width: auto;
    }
    .single_review p.prod_meta {
        padding-left: 0 !important;
        background: none !important;
    }

    /* Review bottom: stack rating + buttons */
    .single_review .review_bottom {
        text-align: center;
    }
    .single_review .review_bottom a.visit,
    .single_review .review_bottom a.read,
    .review_single .brief a.visit {
        float: none;
        display: inline-block;
        margin: 5px;
    }
    .review_rating {
        float: none;
        display: inline-block;
        margin: 10px auto;
    }

    /* Review bar (single review) */
    .review_bar {
        left: 0 !important;
        width: auto !important;
    }
    .review_bar h2 {
        width: auto !important;
        float: none;
        font-size: 16px !important;
        padding: 10px !important;
    }

    /* Conclusion table */
    .conclusion_table {
        width: 100% !important;
    }
    .conclusion_table .table_left {
        width: auto !important;
        float: none;
        border-right: 0;
        border-bottom: 1px solid #c5c5c5;
    }
    .conclusion_table .table_right {
        margin: 8px 0 !important;
    }

    /* Shortcode buttons: scale down proportionally */
    #primary a.check_out,
    #primary a.tell_more,
    #primary a.big_green,
    #primary a.big_red,
    #primary a.big_blue,
    #primary a.big_yellow,
    #primary a.download_blue,
    #primary a.download_red,
    #primary a.az_cart,
    #primary a.az_check,
    #primary a.az_prod,
    #primary a.az_visit,
    #primary a.visit_site {
        max-width: 100%;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    #primary blockquote {
        width: auto;
        margin: 0 0 20px 0;
    }

    /* Slider */
    .slides ul {
        width: 100% !important;
    }

    /* Comments */
    #comments_template {
        width: 100% !important;
        box-sizing: border-box;
    }
    #respond input[type=text],
    #respond textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
    div.column_left,
    div.column_right {
        width: 100% !important;
        float: none !important;
        margin: 0 0 10px 0 !important;
    }

    /* Contact form */
    #contactForm ul li,
    #contactForm ul li.textarea,
    #contactForm textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
    #contactForm ul li input[type=text] {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Widgets: fit full width */
    .widget_area_side,
    .optin_widget,
    .video_widget_in a.link {
        width: auto !important;
    }

    /* Footer */
    #footer .foot_top {
        height: auto;
        padding: 10px;
    }
    #footer .foot_top p,
    #footer .foot_top ul {
        float: none !important;
        display: block;
        text-align: center;
        padding: 5px 0;
    }
    #footer .foot_top ul li {
        float: none;
        display: inline-block;
    }

    /* Body background: solve the purple void issue */
    body {
        background-color: #1d1d1d;
    }
}

/* ============================================================
   SMALL MOBILE — max 480px
   ============================================================ */
@media (max-width: 480px) {

    .main_content {
        padding: 0 10px;
    }

    #primary h1 { font-size: 22px !important; line-height: 1.2em !important; }
    #primary h2 { font-size: 20px !important; }
    #primary h3 { font-size: 18px !important; }

    .single_review h2 a {
        font-size: 16px;
    }
    .review_single h1.prod_title {
        font-size: 20px !important;
    }
}

/* ============================================================
   Step 4 B.3 — Fixes after first mobile test (2026-04-22)
   ============================================================ */

/* ---- Force body/html background on mobile (override inline <style> in header.php) ---- */
@media (max-width: 767px) {
    html,
    body {
        background-image: none !important;
        background-color: #1d1d1d !important;
    }
}

/* ---- Review single page: stop float overlap on brief box ---- */
@media (max-width: 767px) {
    .review_single {
        overflow: hidden;
    }
    .review_single .preload_image,
    .full_width .review_single .preload_image {
        float: none !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        text-align: center;
    }
    .review_single .preload_image img {
        max-width: 100%;
        height: auto;
    }
    .review_single .brief,
    .full_width .review_single .brief {
        float: none !important;
        width: auto !important;
        clear: both;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box;
    }
    .review_single .brief a.visit {
        margin: 10px auto 0 !important;
    }
    .review_single > p,
    .review_single p {
        clear: both;
    }
    .review_single h3,
    .single_review h3 {
        font-size: 16px !important;
        line-height: 1.3em;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .review_single h1.prod_title {
        float: none !important;
        width: 100% !important;
        font-size: 22px !important;
    }
}

/* ---- Home intro "welcome_text" + misc content boxes: fluid ---- */
@media (max-width: 767px) {
    .welcome_text {
        margin: 0 0 20px 0;
    }
    .welcome_text .author_image {
        float: none;
        display: block;
        margin: 15px auto;
    }
    .welcome_text a.read_more {
        margin: 10px 0;
    }
    .reviews_banner,
    .uni_banner {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---- Generic word break for long titles / URLs ---- */
@media (max-width: 767px) {
    .single_review h2 a,
    .review_single h1.prod_title,
    #primary h1, #primary h2, #primary h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ============================================================
   Step 4 B.4 — Nuclear background + body_wrapper reset
   ============================================================ */
@media (max-width: 767px) {
    html, body, #body_wrapper {
        background: #1d1d1d !important;
        background-color: #1d1d1d !important;
        background-image: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   Step 4 B.5 — Fix trial_data/mese/trial overlap on home cards
   ============================================================ */
@media (max-width: 767px) {
    /* Container review cell must clear floats */
    .single_review,
    .single_review .review_data {
        overflow: hidden;
    }

    /* Price/trial boxes: stop float, stack full-width under text */
    #trial_data,
    #trial,
    #mese,
    .single_review #trial_data,
    .single_review #trial,
    .single_review #mese {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        margin: 10px 0 !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
        position: static !important;
        text-align: left !important;
    }

    /* Inner spans/strong inside trial boxes: keep inline on same row */
    #trial span,
    #mese span,
    #trial strong,
    #mese strong {
        display: inline !important;
        float: none !important;
    }

    /* Any paragraph that follows trial boxes must clear */
    #trial_data ~ p,
    .single_review .review_data > p {
        clear: both !important;
    }
}

/* ============================================================
   Step 4 B.6 — Brute-force reset for trial_data layout
   ============================================================ */
@media (max-width: 767px) {
    #trial_data {
        display: block !important;
        float: none !important;
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        clear: both !important;
        margin: 15px 0 !important;
        padding: 10px !important;
        background: #f0f0f0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }
    #trial_data #trial,
    #trial_data #mese {
        display: block !important;
        float: none !important;
        position: static !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        clear: both !important;
    }
    /* Ensure paragraph after trial_data clears and sits below */
    #trial_data + p,
    #trial_data + div,
    .review_data > p,
    .single_review > p {
        clear: both !important;
        display: block !important;
        margin-top: 0 !important;
    }
}

/* ============================================================
   Step 4 B.7 — Slider homepage: hide on mobile
   ============================================================ */
@media (max-width: 767px) {
    /* Home page slider (jQuery Cycle) — hide, duplicated by cards below */
    .slider,
    #slider,

    .nivo-slider,
    .slider-wrapper,
    #featured {
        display: none !important;
    }
}

/* ============================================================
   Step 4 B.8 — Force wrap on h3 review titles (fix "consi..." crop)
   ============================================================ */
@media (max-width: 767px) {
    .single_review,
    .single_review .review_data,
    .single_review h3,
    .single_review h2 {
        overflow: visible !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .single_review h3 {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto;
        padding-right: 15px;
    }
    /* Parent #primary must not overflow horizontally */
    #primary {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   Step 4 B.9 — Trial data visibility: force dark text on light bg
   ============================================================ */
@media (max-width: 767px) {
    #trial_data,
    #trial_data #trial,
    #trial_data #mese,
    #trial_data span,
    #trial_data strong {
        color: #222 !important;
    }
    #trial_data strong {
        color: #c00 !important; /* red for price highlight like original */
    }
    #trial_data #trial {
        color: #0a7a0a !important; /* green for trial like original */
    }
}

/* ============================================================
   Step 4 B.9 — Trial data visibility on light bg
   ============================================================ */
@media (max-width: 767px) {
    #trial_data,
    #trial_data #trial,
    #trial_data #mese,
    #trial_data span,
    #trial_data strong {
        color: #222 !important;
    }
    #trial_data strong {
        color: #c00 !important;
    }
    #trial_data #trial {
        color: #0a7a0a !important;
    }
}

/* ============================================================
   Step 4 B.12 — ROLLBACK B.11 approach.
   Keep original text colors, force light backgrounds on mobile
   so dark text stays readable.
   ============================================================ */
@media (max-width: 767px) {

    /* Force page_wrapper and primary/sidebar containers to white bg */
    .page_wrapper {
        background: #ffffff !important;
    }
    #primary,
    #sidebar,
    .main_content {
        background: #ffffff !important;
        color: inherit !important;
    }

    /* Kill all the B.11 text color overrides: reset to initial/inherit */
    body,
    #primary,
    #primary p,
    #primary li,
    #primary ul,
    #primary ol,
    #primary strong,
    #primary b,
    #primary h1,
    #primary h2,
    #primary h3,
    #primary h4,
    #primary h5,
    #primary h6,
    #sidebar,
    #sidebar p,
    #sidebar li,
    #sidebar ul,
    #sidebar h1,
    #sidebar h2,
    #sidebar h3,
    #sidebar h4,
    #sidebar strong,
    #sidebar a,
    .widget_area_side,
    .widget_area_side p,
    .widget_area_side li,
    .widget_area_side ul,
    .widget_area_side h3,
    .widget_area_side a,
    .widget_area_contact,
    .main_content,
    .main_content p,
    .welcome_text,
    .welcome_text p,
    .welcome_text h1,
    .welcome_text h2,
    .welcome_text a.read_more,
    .standard_post_content,
    .standard_post_content p,
    .standard_post_items,
    .standard_post_items p,
    .post_item,
    .post_item p,
    .post_item a,
    .post_item h2.title a,
    .standard_post_items .post_item h2.title a,
    .standard_post_content .post_item .title a,
    .single_review,
    .single_review p,
    .single_review h2,
    .single_review h2 a,
    .single_review h3,
    .single_review a,
    .single_review .review_data,
    .single_review p.prod_meta,
    .comment-body,
    #comments_template,
    #comments_template h3,
    #respond,
    #primary a,
    #sidebar a,
    .main_content a,
    .widget_area_side a,
    #primary a:hover,
    #sidebar a:hover,
    .main_content a:hover {
        color: unset !important;
    }

    /* Footer keeps light text on dark original footer bg - leave alone */
    #footer,
    #footer p,
    #footer span,
    #footer .foot_bottom,
    #footer .foot_bottom p {
        color: unset !important;
    }
}

/* ============================================================
   Step 4 B.13 — Hide home slider on tablet/mobile (cycle.js
   uses fixed 960px widths, breaks below desktop breakpoints).
   Desktop-only: visible ≥1200px
   ============================================================ */
@media (max-width: 1199px) {
    .slider_wrapper {
        display: none !important;
    }
}

/* ============================================================
   Step 4 B.14 — Hide header banner (XBIZ 728x90) on tablet/mobile
   Same reasoning as slider: fixed IAB dimensions break responsive.
   Desktop-only: visible ≥1200px
   ============================================================ */
@media (max-width: 1199px) {
    .header_banner {
        display: none !important;
    }
}

/* ============================================================
   Step 4 B.15 — Remove header background-image on tablet/mobile
   Bg PNG is a wide bitmap (backnew.png) with logo + XBIZ banner baked in.
   On narrow viewports only a cropped portion is visible → ugly.
   The <img> logo inside .logo still renders cleanly.
   ============================================================ */
@media (max-width: 1199px) {
    #header {
        background-image: none !important;
        background: transparent !important;
    }
}