/* =========================================================
   BASIC RESPONSIVENESS (SAFE FOR ALL SIZES)
   ========================================================= */

/* Images scale down on smaller screens */
img {
    max-width: 100%;
    height: auto;
}

/* Try to avoid horizontal scrolling */
body {
    overflow-x: hidden;
}

/* =========================================================
   UP TO 1024px: GENERAL FLUID LAYOUT
   (Desktop > 1024px remains unchanged)
   ========================================================= */
@media (max-width: 1024px) {

    /* Main wrapper can shrink with the screen */
    #wrapper {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 10px !important;   /* small side margins */
    }

    /* Main content blocks full-width instead of fixed widths/floats */
    #container_middle,
    #container_wrapper,
    #container_text {
        width: 100% !important;
        float: none !important;
    }

    /* Footer spans full width and wraps nicely */
    #footer,
    #footer_main,
    #footer_text {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        padding: 10px 10px;
    }
}

/* =========================================================
   UP TO 768px: HEADER & MENU STACK + BLUE MENU BACKGROUND
   ========================================================= */
@media (max-width: 768px) {

    /* Header blocks one per line on small screens */
    #top,
    #top_logo,
    #top_logo_under,
    #top_menu {
        width: 100% !important;
        float: none !important;
        display: block;
    }

    #top_logo h1 {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0.4em 0;
    }

    /* -------- TABLE-BASED MENU: STACK VERTICALLY -------- */

    /* Make the outer table full width */
    #outertable {
        width: 100% !important;
    }

    #outertable tr,
    #outertable td {
        display: block;
        width: 100% !important;
    }

    #swmenu {
        width: 100% !important;
        border-collapse: collapse;
    }

    #swmenu tr,
    #swmenu td {
        display: block;
        width: 100% !important;
    }

    /* -------- MENU BACKGROUND (BLUE-ISH, LIKE ACTIVE ITEM) -------- */

    /* Area behind the stacked menu */
    #top_menu,
    #outertable,
    #outerwrap,
    #swmenu {
        background-color: rgba(26, 48, 82, 0.85) !important;   /* blue-grey strip */
        z-index: 10;
    }

    /* Each menu link as a blue bar with white text */
    #swmenu a.item1,
    #swmenu a.item1.last {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        text-align: left;
        text-decoration: none;
        background-color: rgba(32, 60, 100, 0.96) !important;  /* slightly lighter than strip */
        color: #ffffff !important;
    }

    /* Subtle divider between items */
    #swmenu td + td a.item1,
    #swmenu td + td a.item1.last {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    /* Remove any stray borders from original table styling */
    #swmenu td {
        border: none !important;
    }

    /* -------- CONTENT TYPOGRAPHY & WRAPPING -------- */

    .item-page [itemprop="articleBody"] {
        font-size: 1rem;
        line-height: 1.6;
    }

    .page-header h2 {
        font-size: 1.3rem;
    }

    .item-page h3 {
        font-size: 1.1rem;
    }

    /* Long links/text don’t run off the side */
    .item-page [itemprop="articleBody"],
    .item-page [itemprop="articleBody"] a,
    #footer_text {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* =========================================================
   VERY SMALL PHONES (OPTIONAL)
   ========================================================= */
@media (max-width: 480px) {
    body {
        font-size: 15px;
    }

    .page-header h2 {
        font-size: 1.2rem;
    }

    .item-page h3 {
        font-size: 1.05rem;
    }
}

/* skip links */
.skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

/* Hidden off-screen by default */
.skip-links a {
    position: absolute;
    left: -9999px;
    padding: 8px 12px;
    background: #1e3b70;   /* or your menu blue */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

/* Visible when focused (keyboard users) */
.skip-links a:focus {
    left: 10px;
    top: 10px;
    outline: 2px solid #ffffff;
}