﻿/* ===== TradingBlueChip — Responsive Styles ===== */

/* Mobile: < 768px */
@media (max-width:768px) {
    .nav-links, .nav-search { display:none; }
    .nav-search-icon { display:flex; align-items:center; }
    .hamburger { display:flex; }
    .nav-links.active { display:flex; flex-direction:column; position:absolute; top:60px; right:0; left:auto; width:auto; min-width:200px; max-width:320px; background:#fff; border:1px solid #E8EAED; border-top:none; padding:8px 0; box-shadow:0 8px 24px rgba(0,0,0,0.15); max-height:calc(100vh - 60px); overflow-y:auto; z-index:200; }
    .nav-links.active > li { display:block; }
    .nav-links.active a { display:flex; align-items:center; padding:8px 24px; border-bottom:none !important; position:relative; }
    .nav-links.active a:hover { border-bottom:none !important; }
    .nav-links.active .menu-item-has-children > a { padding-left:28px; }
    .nav-links.active .menu-item-has-children > a::before { content:"▾"; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:13px; color:#0047AB; font-weight:700; transition:transform 0.2s; }
    .nav-links.active .menu-item-has-children.open > a::before { transform:translateY(-50%) rotate(180deg); }
    .nav-links.active .sub-menu { display:none; position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:#F5F6F8; padding:4px 0; border-radius:0; }
    .nav-links.active .menu-item-has-children.open .sub-menu { display:block; }
    .nav-links.active .sub-menu a { padding:10px 24px 10px 28px; font-size:13px; color:#6B7280; }
    .nav-links.active .sub-menu a:hover { background:transparent; color:#0047AB; }

    .hero h1 { font-size:28px; padding:0 16px; }
    .hero p { padding:0 16px; }
    .hero-search { flex-direction:column; padding:0 16px; }
    .hero-stats { gap:24px; padding:0 16px; }
    .hero-stat .num { font-size:22px; }
    .trust-bar-inner { padding:0 16px; }
    .crypto-mobile { padding:0 16px; }
    .newsletter-inner { padding:0 16px; }

    .broker-grid { grid-template-columns:1fr; }
    .news-grid { grid-template-columns:1fr; }
    .why-row { grid-template-columns:1fr 1fr; }
    .cat-grid { grid-template-columns:1fr 1fr; }
    .compare-row { grid-template-columns:1fr; }
    .comp-grid { grid-template-columns:1fr; }
    .comparison-card { padding:16px; }
    .comparison-card .cc-header { flex-wrap:wrap; gap:8px; }
    .comparison-card .cwinner { white-space:normal; font-size:10px; padding:2px 8px; }
    .featured-comparison { padding:24px 16px; }
    .featured-comparison h2 { font-size:20px; }
    .featured-comparison .fc-brokers { flex-wrap:wrap; }
    .footer-inner { grid-template-columns:1fr; gap:24px; }

    .cookie-inner { flex-direction:column; text-align:center; }
    .crypto-table-wrap { display:none; }
    .crypto-mobile { display:flex; }
    .section-why { padding:40px 0; border-radius:0; }

    .page.with-sidebar { grid-template-columns:1fr; }
    .page .sidebar { position:static; }
    .page-wrap { grid-template-columns:1fr; }
    .page-wrap .sidebar { position:static; }

    .review-header { flex-direction:column; align-items:stretch; gap:16px; }
    .review-header-info { margin-left:0; }
    .review-actions { min-width:auto; }
    .review-actions .btn-primary, .review-actions .btn-secondary { text-align:center; }
    .pros-cons { grid-template-columns:1fr; }
    .related-brokers { grid-template-columns:1fr; }

    .vs-row { flex-direction:row; gap:8px; }
    .vs-center { font-size:16px; }
    .vs-col .logo { width:48px; height:48px; font-size:8px; }
    .vs-col .name { font-size:14px; }
    .vs-col .stars { font-size:14px; letter-spacing:1px; }
    .vs-col .rating-num { font-size:11px; }
    .vs-col .badge { font-size:10px; padding:3px 10px; }
    .vs-header { padding:16px; }
    .vs-header h1 { font-size:17px; margin-bottom:16px; }
    .vs-actions { flex-direction:column; align-items:center; }
    .choice-grid { grid-template-columns:1fr; }
    .related-compacts { grid-template-columns:1fr; }
    .comp-table th:first-child { width:110px; }
    .comp-table { font-size:13px; }

    .guide-grid { grid-template-columns:1fr; }
    .featured-guide { flex-direction:column; padding:24px; text-align:center; }
	    .featured-guide .fg-meta { justify-content:center; }
    .featured-guide .fg-illustration { width:120px; height:100px; font-size:36px; }
    .featured-guide p { max-width:100%; }
    .page-header h1 { font-size:26px; }
    .broker-archive-header { text-align:center; }
    .broker-archive-header h1 { font-size:26px; }
    .broker-archive-header .line { margin-left:auto; margin-right:auto; }
    .archive-header h1 { font-size:26px; }

    .newsletter-form { flex-direction:column; }

    .archive-header-top { flex-direction:column; align-items:center; text-align:center; }
    .archive-header-meta { font-size:12px; gap:10px; }

    .glance-section { padding:16px; }
    .glance-table { font-size:13px; min-width:400px; }
    .glance-table td, .glance-table th { padding:10px 8px; }
    .glance-stars { font-size:12px; letter-spacing:0; }
    .glance-broker .glance-name { font-size:13px; }

    .broker-featured-badge { left:16px; font-size:9px; padding:3px 10px; }
    .nav-actions #navSearchForm { display:none; position:absolute; top:60px; left:0; right:0; background:#fff; border-bottom:1px solid #E8EAED; padding:12px 16px; box-shadow:0 8px 24px rgba(0,0,0,0.1); z-index:150; }
    .nav-actions #navSearchForm.active { display:block; }
    .nav-actions #navSearchForm .nav-search { width:100%; }
    .nav-actions #navSearchForm.active .nav-search { display:block; }

    .compare-bar { padding:12px 16px; }
    .compare-bar-inner { flex-direction:column; align-items:stretch; text-align:center; }
    .compare-bar .cmp-items { justify-content:center; min-width:0; }
    .compare-bar .cmp-btn { width:100%; }
    .disclaimer-box { padding:0 24px; }

    .nfi-title { font-size:16px; }
    .nfi-excerpt { font-size:13px; }
    .post-title { font-size:24px; }
}

/* Tablet: 769px - 1024px */
@media (min-width:769px) and (max-width:1024px) {
    .broker-grid { grid-template-columns:repeat(2,1fr); }
    .news-grid { grid-template-columns:repeat(2,1fr); }
    .why-row { grid-template-columns:repeat(2,1fr); }
    .cat-grid { grid-template-columns:repeat(2,1fr); }
    .glance-table { min-width:auto; }
}

/* Print */
@media print {
    .nav, .footer, .compare-bar, .cookie-banner, .reading-progress-wrap,
    .social-share, .sidebar, .newsletter, .btn-primary, .btn-secondary, .broker-actions { display:none !important; }
    .page.with-sidebar { display:block; }
    .page-wrap { display:block; }
    body { background:#fff; color:#000; font-size:12pt; }
    a { color:#000; text-decoration:underline; }
}
