/* ==========================================================================
   ROEYA TV — RESPONSIVE CSS
   Breakpoints:
     XL  : ≥ 1200px
     LG  : 992px – 1199px
     MD  : 768px – 991px
     SM  : 576px – 767px
     XS  : < 576px (mobile-first additions)
   ========================================================================== */

/* ─────────────────────────────────────────────
   GLOBAL HELPERS (all sizes)
───────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }


/* ==========================================================================
   LG — 992px to 1199px (Small Desktop / Large Laptop)
   ========================================================================== */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

    /* Header */
    .middle-header { height: auto; padding: 20px 0; }
    .logo-area a img { height: 40px; width: auto; }

    /* Hero Slider */
    .welcome-blog-post-slide .single-blog-post-slide { height: 460px; }
    .welcome-blog-post-slide .single-blog-post-slide .single-blog-post-content { top: 30px; left: 30px; }
    .single-blog-post-slide h3 a,
    .editorial-post-content h2 a,
    .roeya-welcome-post h2 { font-size: 36px; }

    /* Post layout */
    .dont-miss-post-thumb { margin-right: 15px; }

    /* Comments */
    .comment_area ol li ol li .comment-wrapper { margin-left: 80px; }

    /* Financial ticker */
    .roeya-finance-ticker-bar { font-size: 11px; }
    .ticker-badge-title { font-size: 10px; }

    /* Stock */
    .single-stock-report .stock-values span { padding-right: 10px; }
    .single-stock-report { margin-right: 10px; }
}


/* ==========================================================================
   MD — 768px to 991px (Tablet / iPad landscape)
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* ── Header ── */
    .top-header { height: auto; padding: 10px 0; }
    .middle-header { height: auto; padding: 15px 0; }
    .logo-area a img { height: 36px; width: auto; }

    /* Navbar */
    .navbar-toggler {
        padding: 0;
        font-size: 18px;
        background-color: #17b332;
        border: none;
        border-radius: 6px;
        width: 110px;
        height: 35px;
        color: #fff;
        line-height: 28px;
        margin: 8px 0;
    }
    #roeyaMenu {
        padding: 20px;
        background-color: #f4f2f8;
        z-index: 1002;
        border-radius: 0 0 8px 8px;
    }
    .main-menu .navbar.navbar-expand-lg .nav-link { padding: 10px 15px; }

    /* Search */
    .header-search-form form input { width: 100%; max-width: 500px; margin-bottom: 15px; }

    /* Hero Slider */
    .welcome-blog-post-slide .single-blog-post-slide { height: 400px; }
    .welcome-blog-post-slide .single-blog-post-slide .single-blog-post-content { top: 25px; left: 25px; right: 25px; }
    .single-blog-post-slide h3 a { font-size: 28px; }
    .single-blog-post-slide .date a { font-size: 15px; }

    /* Headings */
    .single-post-title-content h2,
    .editorial-post-content h2 a,
    .roeya-welcome-post h2 { font-size: 30px; }

    /* Post layout */
    .todays-post-thumb { margin-right: 15px; }
    .dont-miss-post-thumb { margin-right: 15px; }

    /* Sidebar — collapse to full width below content */
    .sidebar-area { margin-top: 50px; }

    /* Breaking news */
    #breakingNewsTicker.ticker ul li a { font-size: 12px; }

    /* Stock ticker */
    .single-stock-report .stock-values span { padding-right: 5px; font-size: 10px; }
    .single-stock-report { margin-right: 5px; }

    /* Financial ticker */
    .roeya-finance-ticker-bar { font-size: 11px; }
    .ticker-items-track { gap: 14px; }
    .ticker-badge-title { font-size: 10px; letter-spacing: 0; }

    /* Category nav */
    .cat-nav-link { padding: 12px 12px; font-size: 0.80rem; }

    /* Editorial */
    .editorial-post-content h2 a { font-size: 30px; }

    /* Comments */
    .comment-author { margin-right: 10px; }
    .comment_area ol li ol li .comment-wrapper { margin-left: 70px; }

    /* Footer */
    .single-footer-widget { margin-bottom: 40px; }
    .bottom-footer-area { height: auto; padding: 20px 0; text-align: center; }
    .bottom-footer-area .d-flex { flex-direction: column !important; gap: 10px; }
}


/* ==========================================================================
   SM — 576px to 767px (Large Mobile / Small Tablet portrait)
   ========================================================================== */
@media only screen and (min-width: 576px) and (max-width: 767px) {

    /* ── Header ── */
    .top-header { height: auto; padding: 10px 0; }
    .middle-header { height: auto; padding: 15px 0; }
    .logo-area a img { height: 30px; width: auto; }

    /* Navbar */
    .navbar-toggler {
        padding: 0;
        font-size: 16px;
        background-color: #17b332;
        border: none;
        border-radius: 6px;
        width: 100px;
        height: 32px;
        color: #fff;
        line-height: 26px;
        margin: 8px 0;
    }
    #roeyaMenu {
        padding: 15px;
        background-color: #f4f2f8;
        z-index: 1002;
        border-radius: 0 0 8px 8px;
    }

    /* Search */
    .header-search-form form input { width: 100%; margin-bottom: 15px; }

    /* Hero Slider */
    .welcome-blog-post-slide .single-blog-post-slide { height: 320px; }
    .welcome-blog-post-slide .single-blog-post-slide .single-blog-post-content { top: 20px; left: 20px; right: 20px; }
    .single-blog-post-slide h3 a { font-size: 22px; }
    .single-blog-post-slide .date a { font-size: 13px; }

    /* Headings */
    .single-post-title-content h2,
    .roeya-welcome-post h2 { font-size: 26px; }
    .editorial-post-content h2 a { font-size: 26px; }

    /* Stock ticker */
    .single-stock-report .stock-values span { padding-right: 5px; font-size: 10px; }
    .single-stock-report { margin-right: 5px; }
    #breakingNewsTicker.ticker ul li a { font-size: 12px; }

    /* Financial ticker */
    .roeya-finance-ticker-bar { font-size: 10.5px; }
    .ticker-badge-title { font-size: 9.5px; }
    .ticker-items-track { gap: 12px; }

    /* Post share btn */
    .post-share-btn-group { margin-top: 0; }

    /* Today's posts — stack on SM */
    .todays-post-thumb,
    .todays-post-content { flex: 0 0 100%; max-width: 100%; margin-right: 0; }
    .todays-post-content { margin-top: 20px; }
    .todays-post-thumb { margin-right: 0; }

    /* Category split posts */
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .blog-post-thumbnail,
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .welcome-post-contents { flex: 0 0 100%; max-width: 100%; }
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .welcome-post-contents { margin-left: 0 !important; margin-top: 20px; }

    /* Comments */
    .comment_area ol li ol li .comment-wrapper { margin-left: 30px; }
    .comment-author { margin-right: 0; margin-bottom: 20px; }
    .comment-wrapper { margin-bottom: 30px; flex-direction: column; }

    /* Footer */
    .single-footer-widget { margin-bottom: 35px; }
    .bottom-footer-area { height: auto; padding: 20px 0; text-align: center; }
    .bottom-footer-area .d-flex { flex-direction: column !important; gap: 10px; }

    /* Sidebar */
    .sidebar-area { margin-top: 50px; }

    /* Pagination */
    .page-item .page-link { margin-right: 8px; }
}


/* ==========================================================================
   XS — < 576px  (Mobile Phone)
   ========================================================================== */
@media only screen and (max-width: 575px) {

    /* ── Base ── */
    body { font-size: 15px; }
    .container { padding-left: 15px; padding-right: 15px; }
    .section_padding_100 { padding: 50px 0; }
    .section_padding_100_70 { padding: 50px 0 40px; }
    .section_padding_100_50 { padding: 50px 0 30px; }
    .section_padding_100_0 { padding: 50px 0 0; }
    .section_padding_0_100 { padding: 0 0 50px; }

    /* ── Financial Ticker ── */
    .roeya-finance-ticker-bar { font-size: 10px; }
    .ticker-badge-col { padding: 6px 8px 6px 0; }
    .ticker-badge-title { font-size: 8.5px; letter-spacing: 0; }
    .ticker-badge-time { display: none !important; }
    .ticker-items-track { gap: 10px; padding: 5px 0; }
    .ticker-pill { padding: 2px 6px; gap: 4px; }
    .pill-price { font-size: 10.5px; }
    .pill-symbol { font-size: 9.5px; }
    .pill-change { font-size: 9px; }

    /* ── Top Header / Breaking News ── */
    .top-header { height: auto; padding: 8px 0; }
    #breakingNewsTicker.ticker ul li a { font-size: 10px; }
    .single-stock-report .stock-values span { padding-right: 2px; font-size: 9px; }
    .single-stock-report { margin-right: 2px; }
    .single-stock-report .stock-index h4 { font-size: 18px; }
    .stock-news-area { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.5); padding-top: 12px; }

    /* ── Middle Header / Logo ── */
    .middle-header { height: auto; padding: 12px 0; }
    .logo-area a img { height: 26px; width: auto; }
    .logo-area { flex: 1; }

    /* ── Navbar (Mobile Menu) ── */
    .navbar-toggler {
        padding: 0;
        font-size: 14px;
        background-color: #17b332;
        border: none;
        border-radius: 6px;
        width: 90px;
        height: 30px;
        color: #fff;
        line-height: 24px;
        margin: 6px 0;
    }
    #roeyaMenu {
        padding: 15px;
        background-color: #f4f2f8;
        z-index: 1002;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 20px rgba(0,0,0,.12);
    }
    .main-menu .navbar.navbar-expand-lg .nav-link {
        padding: 10px 0;
        border-bottom: 1px solid rgba(0,0,0,.05);
        font-size: 14px;
    }
    .header-search-form form input { width: 100%; margin-bottom: 12px; }

    /* ── Category Nav Bar ── */
    .cat-nav-link { padding: 10px 12px; font-size: 0.75rem; }
    #category-nav-bar { overflow-x: auto; }

    /* ── Hero Slider ── */
    .welcome-blog-post-slide .single-blog-post-slide { height: 260px; }
    .welcome-blog-post-slide .single-blog-post-slide .single-blog-post-content { top: 15px; left: 15px; right: 15px; }
    .single-blog-post-slide h3 a { font-size: 18px; margin-bottom: 8px; }
    .single-blog-post-slide .tags > a { font-size: 10px; letter-spacing: 1px; margin-bottom: 8px; }
    .single-blog-post-slide .date a { font-size: 12px; }

    /* ── Section headings ── */
    .roeya-heading h4 { font-size: 16px; margin-bottom: 30px; }

    /* ── Today's Posts ── */
    .todays-post-thumb { flex: 0 0 100%; max-width: 100%; margin-right: 0; margin-bottom: 15px; }
    .todays-post-content { flex: 0 0 100%; max-width: 100%; margin-top: 15px; }
    .todays-post-content h3 a { font-size: 22px; }
    .todays-post-content p { font-size: 13px; }

    /* ── Welcome / Feature Posts ── */
    .roeya-welcome-post h2 { font-size: 22px; margin-bottom: 10px; }
    .roeya-welcome-post p { font-size: 15px; }
    .roeya-post-tag a { font-size: 12px; padding: 4px 8px; }

    /* ── "Don't Miss" Sidebar Posts ── */
    .dont-miss-post-thumb { flex: 0 0 60px; max-width: 60px; margin-right: 15px; }
    .dont-miss-post-content { flex: 0 0 calc(100% - 75px); max-width: calc(100% - 75px); }
    .dont-miss-post-content a { font-size: 13px; }

    /* ── Category welcome area ── */
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .blog-post-thumbnail,
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .welcome-post-contents { flex: 0 0 100%; max-width: 100%; }
    .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .welcome-post-contents { margin-left: 0 !important; margin-top: 20px; }
    .catagory-welcome-post-area .roeya-welcome-post { margin-bottom: 50px; }

    /* ── Single Post / Article ── */
    .single-post-title { height: auto; min-height: 220px; }
    .single-post-title-content h2 { font-size: 22px; line-height: 1.3; }
    .single-post-title-content p { font-size: 13px; }
    .single-post-text { padding: 35px 0; }

    /* Editorial */
    .editorial-post-content h2 a { font-size: 24px; }
    .editorial-post-content { margin-top: 30px; }

    /* ── Video Section ── */
    .single-video-post h5 a { font-size: 15px; }

    /* ── Sidebar ── */
    .sidebar-area { margin-top: 40px; }
    .widget-title h5 { font-size: 15px; padding-bottom: 15px; margin-bottom: 20px; }

    /* ── Comments ── */
    .comment-wrapper {
        padding: 15px;
        flex-direction: column;
        margin-bottom: 25px;
    }
    .comment-author { flex: 0 0 50px; max-width: 50px; margin-right: 0; margin-bottom: 15px; }
    .comment-content { flex: 0 0 100%; max-width: 100%; }
    .comment-content h5 { font-size: 15px; }
    .comment_area ol li ol li .comment-wrapper { margin-left: 15px; }
    .comment-content p { font-size: 13px; margin: 15px 0; }

    /* ── Marquee / Live Ticker ── */
    .marquee-content-items li a { font-size: 14px; }
    .simple-marquee-container { height: 55px; }
    .marquee-content-items { height: 55px; }
    .marquee-content-items li { height: 55px; padding: 0 14px; }

    /* ── Pagination ── */
    .page-item .page-link { margin-right: 6px; width: 32px; line-height: 32px; font-size: 12px; }

    /* ── Forms ── */
    .form-control { padding: 12px 15px; font-size: 13px; }
    textarea.form-control { height: 160px; }
    .leave-comment-btn, .contact-btn { font-size: 15px; height: 44px; }

    /* ── Post share ── */
    .post-share-btn-group { margin-top: 20px; }
    .post-share-btn-group a { font-size: 18px; padding: 0 7px; }

    /* ── Contact area ── */
    .roeya-contact-area form { margin-bottom: 40px; }
    #googleMap { height: 280px; }

    /* ── Footer ── */
    .single-footer-widget { margin-bottom: 30px; }
    .single-footer-widget .footer-widget-title h4 { font-size: 16px; margin-bottom: 25px; }
    .bottom-footer-area { height: auto; padding: 18px 0; text-align: center; }
    .bottom-footer-area .d-flex { flex-direction: column !important; gap: 10px; }
    .copywrite-text p { font-size: 11px; }

    /* ── Bottom Mobile Nav (if present) ── */
    .hespress-bottom-nav { display: flex !important; }

    /* ── Coming Soon Overlay (mobile) ── */
    .logo-assembly { transform: scale(0.75); }
    .cs-content h1 { font-size: 2.2rem !important; }
    .cs-content h2 { font-size: 0.85rem !important; }
    .cs-countdown { gap: 10px !important; }
    .cs-num { font-size: 2rem !important; min-width: 55px !important; }
    .cs-label { font-size: 0.65rem !important; }
    .cs-subscribe-area { padding: 0 15px; width: 100%; }
    #cs-email { width: 100%; }
}


/* ==========================================================================
   EXTRA SMALL — < 380px (Very small phones: iPhone SE, Galaxy A01…)
   ========================================================================== */
@media only screen and (max-width: 380px) {

    .welcome-blog-post-slide .single-blog-post-slide { height: 220px; }
    .single-blog-post-slide h3 a { font-size: 15px; }
    .logo-area a img { height: 22px; }
    .navbar-toggler { width: 78px; font-size: 12px; }

    /* Financial ticker — ultra compact */
    .roeya-finance-ticker-bar { font-size: 9.5px; }
    .ticker-badge-title { display: none; }
    .live-dot-pulse { width: 6px; height: 6px; }
    .ticker-pill { padding: 2px 5px; }
    .pill-price { font-size: 9.5px; }

    /* Coming Soon */
    .cs-num { font-size: 1.8rem !important; min-width: 45px !important; }
    .logo-assembly { transform: scale(0.65); }
}


/* ==========================================================================
   RTL (Arabic) responsive overrides
   ========================================================================== */
@media only screen and (max-width: 991px) {
    [dir="rtl"] .navbar-toggler { margin-left: 0; margin-right: auto; }
    [dir="rtl"] .dont-miss-post-thumb { margin-right: 0; margin-left: 15px; }
    [dir="rtl"] .todays-post-thumb { margin-right: 0; margin-left: 0; }
    [dir="rtl"] .comment-author { margin-right: 0; margin-left: 15px; }
    [dir="rtl"] .ticker-badge-col {
        padding: 6px 0 6px 8px;
        border-right: none;
        border-left: 1px solid rgba(255,255,255,0.1);
        margin-right: 0;
        margin-left: 10px;
    }
}

@media only screen and (max-width: 575px) {
    [dir="rtl"] .comment_area ol li ol li .comment-wrapper { margin-left: 0; margin-right: 15px; }
    [dir="rtl"] .dont-miss-post-thumb { margin-right: 0; margin-left: 15px; }
    [dir="rtl"] .catagory-welcome-post-area .col-12:last-child .roeya-welcome-post .welcome-post-contents { margin-right: 0 !important; }
}


/* ==========================================================================
   PRINT — hide unnecessary elements
   ========================================================================== */
@media print {
    .roeya-finance-ticker-bar,
    #category-nav-bar,
    .top-header,
    .hespress-bottom-nav,
    .sidebar-area,
    footer { display: none !important; }
    .single-post-text { padding: 20px 0; }
    body { font-size: 12pt; }
}