/** * ============================================================================= * base.css — Global reset and defaults * ============================================================================= * Loaded 2nd on every page (after variables.css). * * Makes all pages share the same: * - dark background and white text * - RTL/LTR direction (class on from i18n.js) * - centered content via .container * ============================================================================= */ /* Remove default browser spacing; padding/border included in width */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Default look for every page */ body { font-family: var(--font-main); background: var(--bg-main); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } /* Arabic: right-to-left (set by setLanguage in i18n.js) */ body.rtl { direction: rtl; } /* English: left-to-right */ body.ltr { direction: ltr; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; } /* Forms inherit colors so they match dark theme */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } /** * .container — wraps main content; max 1200px centered. * Used in: header, footer, hero, services, emergency, etc. */ .container { width: min(100% - 2rem, var(--max-width)); margin-inline: auto; } /** * .page-main — padding under the sticky header for

content. */ .page-main { padding-block: 1.5rem 3rem; min-height: calc(100vh - var(--header-height) - 120px); } /* Accessibility: hide text visually but keep for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .flex-row { display: flex; flex-direction: row; gap: 1rem; } .flex-col { display: flex; flex-direction: column; gap: 1rem; } .justify-between { justify-content: space-between; }