/**
 * Responsive CSS för ravaror.se
 * Anpassat för det faktiska temat (Matt's Semantic WP Theme)
 * VIKTIGT: Alla stilar är inuti media queries!
 * Version: 2026-10-28c
 */

/* ==========================================================================
   TABLET LAYOUT (max 1200px) - Börja anpassa tidigare
   ========================================================================== */

@media screen and (max-width: 1200px) {
    #page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    #header {
        width: 100% !important;
    }
    
    #main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   MOBIL LAYOUT (max 900px) - Single column
   ========================================================================== */

@media screen and (max-width: 900px) {
    
    /* FORCE single column layout */
    * {
        box-sizing: border-box !important;
    }
    
    body {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    #page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    #header {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 10px !important;
    }
    
    #header > table,
    #header table {
        display: block !important;
        width: 100% !important;
    }
    
    #header table tr,
    #header table td {
        display: block !important;
        width: 100% !important;
    }
    
    #navigations {
        width: 100% !important;
        height: auto !important;
    }
    
    ul#nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    ul#nav li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    
    ul#nav li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 15px !important;
        background: rgba(0,0,0,0.3) !important;
    }
    
    ul#nav li a span {
        background: none !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    /* ========================================
       CRITICAL: Force single column layout
       ======================================== */
    
    #main {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        padding: 10px !important;
        background-size: contain !important;
        overflow-x: hidden !important;
    }
    
    #left-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        margin: 0 0 20px 0 !important;
        padding: 10px !important;
        min-height: 0 !important;
    }
    
    #fpcontent,
    #content {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        margin: 0 0 20px 0 !important;
        padding: 10px !important;
    }
    
    #sidebar {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        display: block !important;
        margin: 0 0 20px 0 !important;
        padding: 10px !important;
    }
    
    /* Sidebar boxes */
    #left-sidebar ul li.overblick,
    #left-sidebar ul li.overblick div,
    #left-sidebar ul li.overblick div div {
        width: 100% !important;
        max-width: 100% !important;
        background-size: contain !important;
    }
    
    #left-sidebar ul li.overblick div div table {
        width: 100% !important;
    }
    
    /* ========================================
       Tables - full width, scrollable
       ======================================== */
    
    table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
    }
    
    table[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #image-container,
    #image-container table,
    .hero-table {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 120px !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    #image-container h2 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    /* ========================================
       Images - responsive
       ======================================== */
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    iframe {
        max-width: 100% !important;
    }
    
    /* ========================================
       Typography
       ======================================== */
    
    body, p, li, td, div {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    
    h1 { font-size: 22px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    
    /* ========================================
       Footer
       ======================================== */
    
    #footer {
        width: 100% !important;
        padding: 15px !important;
    }
    
    #footer table,
    #footer tr,
    #footer td {
        display: block !important;
        width: 100% !important;
    }
    
    /* ========================================
       Widgets and boxes
       ======================================== */
    
    .orangebox,
    .bluebox,
    .whitebox {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
    }
    
    /* Plus500/Skilling widgets */
    iframe[src*="plus500"],
    iframe[src*="marketools"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   SMALL MOBILE (max 600px)
   ========================================================================== */

@media screen and (max-width: 600px) {
    
    body {
        font-size: 14px !important;
    }
    
    #header #logo2 {
        max-width: 180px !important;
    }
    
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    
    ul#nav li a {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    #image-container h2 {
        font-size: 14px !important;
    }
    
    table td,
    table th {
        font-size: 12px !important;
        padding: 5px !important;
    }
}