/* Shared header and footer for every public page. */
.site-wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Header */
.site-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(38, 58, 50, .1); background: color-mix(in srgb, #FBF2DC 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); color: #263A32; font: 500 16px/1.6 "Noto Sans Arabic", system-ui, sans-serif; text-align: start; }
.site-top .site-wrap { display: flex; align-items: center; justify-content: center; min-height: 72px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; font-size: 23px; font-weight: 850; letter-spacing: 0; text-decoration: none; }
.site-brand img { display: block; width: 38px; height: 38px; margin: 0; border-radius: 11px; box-shadow: 0 0 0 1px rgba(38, 58, 50, .12); }
.site-brand i { color: #33705C; font-style: normal; }
.site-brand:hover { text-decoration: none; }
.site-top a:focus-visible { outline: 3px solid #33705C; outline-offset: 3px; }

/* Footer */
.site-bottom { padding-block: 28px 22px; background: #22352D; color: #B9C3B7; font: 500 14px/1.8 "Noto Sans Arabic", system-ui, sans-serif; text-align: center; }
.site-bottom .site-wrap { display: grid; justify-items: center; gap: 4px; }
.site-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; }
.site-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; touch-action: manipulation; }
.site-bottom a:hover { color: #FFFBF2; }
.site-bottom a:focus-visible { outline: 3px solid #9BD7B8; outline-offset: 3px; border-radius: 4px; }
.site-credit, .site-copy { margin: 0; }
.site-credit a { color: #F4ECD8; font-weight: 700; }
.site-credit a:hover { color: #9BD7B8; }
.site-copy { font-size: 13px; }

.skip, .skip-link { position: fixed; z-index: 30; }

@media (max-width: 620px) {
  .site-top .site-wrap { min-height: 62px; }
  .site-brand { font-size: 21px; }
  .site-brand img { width: 34px; height: 34px; }
}