/* ===========================================================
   our-overrides-on-pure.css  (Side-menu layout)
   (c) Akhilesh Gupta.   Used chatGPT to create it.

   These styles override defaults from Pure.css (vX.X.X)
   Ensure this file is loaded AFTER the Pure.css main file.
   2025-08-12
   =========================================================== */

/* generally 1rem = 16px */


/* ----------- Mobile First (below 48em / ~768px) ----------- */

@media (max-width: 48em) {
    /* Header on small screens */
    #layout .header {
        padding-left: 1em;    /* Match visual balance from desktop */
        padding-right: 0.7em; /* Slightly tighter right side */
    }

    /* Content on small screens */
    #layout .content {
        padding-left: 1em;
        padding-right: 0.7em;
    }
}

/* ----------- Tablet & Larger Screens (min-width: 48em) ----------- */

@media (min-width: 48em) {
    /* Default header padding for larger screens */
    #layout .header {
        padding-left: 1.4rem;  /* Comfortable left space */
        padding-right: 0.7rem; /* Slightly tighter right side */
    }

    /* When menu is pinned open on desktop */
    #layout.active .header {
        padding-left: 2rem;    /* Extra space from menu border */
        padding-right: 1rem;
    }

    /* Default content padding for larger screens */
    #layout .content {
        padding-left: 1.4rem;
        padding-right: 0.7rem;
    }

    /* When menu is pinned open on desktop */
    #layout.active .content {
        padding-left: 2rem;
        padding-right: 1rem;
    }
}