/* ===========================================================
   our-overrides-on-pure.css
   (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 main file of pure css
   i.e. pure.css (or pure-min.css) 
   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;
    }
}

/* above values are em not rem; following are rem ! will experiment and change eithe of these if required */

/* ----------- 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;
    }
}


.pure-menu p {
    padding: 0.5em 1em;
    margin: 0; /* optional, to align with menu items */
}