/* Saudi Utility Hub — shared site header and footer.
   Injected on every page by scripts/normalize_layout.py. Every selector is
   prefixed with .suh- so it cannot collide with each page's own inline CSS. */

.suh-header, .suh-header *, .suh-footer, .suh-footer * { box-sizing: border-box; }

.suh-header {
  background: #0b3d20;
  border-bottom: 3px solid #d4a017;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  z-index: 50;
}
.suh-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.suh-header .suh-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.suh-header a.suh-brand {
  color: #fff; font-size: 1.25rem; font-weight: 800; text-decoration: none;
  letter-spacing: -0.01em; white-space: nowrap; line-height: 1;
}
.suh-header a.suh-brand span { color: #f5c542; }
.suh-nav { display: flex; align-items: center; gap: 0.25rem; }
.suh-header .suh-nav a {
  color: rgba(255,255,255,0.88); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; padding: 0.45rem 0.65rem; border-radius: 6px;
  white-space: nowrap; line-height: 1.2;
}
.suh-header .suh-nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.suh-header .suh-nav a[aria-current="page"] { background: rgba(255,255,255,0.14); color: #fff; }
.suh-header .suh-nav a.suh-lang { font-family: Tahoma, "Segoe UI", sans-serif; border: 1px solid rgba(255,255,255,0.3); }

@media (max-width: 900px) {
  .suh-header .suh-wrap { flex-direction: column; align-items: stretch; gap: 0.35rem; padding-top: 0.7rem; padding-bottom: 0.4rem; }
  .suh-header a.suh-brand { text-align: center; }
  .suh-nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    justify-content: flex-start; padding-bottom: 0.2rem;
  }
  .suh-nav::-webkit-scrollbar { display: none; }
  .suh-header .suh-nav a { font-size: 0.86rem; padding: 0.4rem 0.55rem; }
}

.suh-footer {
  background: #0f1f17; color: rgba(255,255,255,0.72);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9rem; line-height: 1.55; margin-top: 3rem; padding: 2.5rem 0 1.5rem;
  text-align: left;
}
.suh-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.suh-footer .suh-fh {
  color: #fff; font-weight: 700; font-size: 0.95rem; margin: 0 0 0.7rem; padding: 0;
}
.suh-footer ul { list-style: none; margin: 0; padding: 0; }
.suh-footer li { margin: 0 0 0.4rem; padding: 0; }
.suh-footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.suh-footer a:hover { color: #f5c542; text-decoration: underline; }
.suh-fnote {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2rem; padding-top: 1.25rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.6);
}
.suh-fnote p { margin: 0 0 0.4rem; }
@media (max-width: 900px) { .suh-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .suh-fgrid { grid-template-columns: 1fr; } }

/* Wide data tables scroll inside their own box on phones instead of
   pushing the whole page sideways. */
@media (max-width: 700px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Long email addresses and URLs may break onto the next line on small screens. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  li { overflow-wrap: anywhere; }
  li:has(> a[href^="mailto:"]) { flex-wrap: wrap; }
}