/* ===========================================================
   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) ----------- */
/* In a media query, em is relative to the root (html) font size—
   not the parent container—so 48em is typically 768px if the root 
   font size is 16px. 
   Only for a media query 'em' is same as 'rem'! */

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

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

/* above values were em not rem; I have changed those to rem */

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

@media (min-width: 48rem) {
    /* 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;
    }
}

/* following values need to be in em not rem; as these depend on pure-menu */

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