/*
 * Official index header/footer isolation layer.
 * The HTML markup above intentionally stays identical to index.html.
 * These selectors ONLY cancel collisions caused by the article system's
 * generic .container/.grid/img/body rules loaded after Tailwind.
 */
body{padding-top:80px!important}

/* Header direct child: restore Tailwind container geometry used by index. */
body>header{font-family:Tajawal,Arial,sans-serif!important;line-height:1.5!important;color:#044e23!important}
body>header>.container,
body>footer>.container{
  width:100%!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
}
@media (min-width:640px){body>header>.container,body>footer>.container{max-width:640px!important}}
@media (min-width:768px){body>header>.container,body>footer>.container{max-width:768px!important}}
@media (min-width:1024px){body>header>.container,body>footer>.container{max-width:1024px!important}}
@media (min-width:1280px){body>header>.container,body>footer>.container{max-width:1280px!important}}
@media (min-width:1536px){body>header>.container,body>footer>.container{max-width:1536px!important}}

/* Prevent legacy article image/anchor rules from altering the official shell. */
body>header img{max-width:none!important}
body>header a,body>footer a{text-decoration:none!important}

/* Footer generic article rules used .footer/.container/grid; keep index utilities authoritative. */
body>footer{margin-top:0!important;font-family:Tajawal,Arial,sans-serif!important;line-height:1.5!important}
body>footer>.container{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}
body>footer p{margin:0!important}
body>footer ul{margin-top:0!important;margin-bottom:0!important}
@media (min-width:768px){body>footer>.container{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* Mobile menu must sit under the 80px fixed header while preserving index markup. */
#mobileMenu{font-family:Tajawal,Arial,sans-serif!important}
#mobileMenu a{text-decoration:none!important}

/* The index page supplies the modal component styles from dist/output.css.
   These guards only ensure article-system generic rules do not override visibility. */
#privacyModal.hidden,#aboutPopup.hidden{display:none!important}