/* tpl_wikkelvoetjies - starter template styles
   Keep styles modular and compile from SCSS if you add a build step.
*/

:root {
  --site-max-width: 1200px;
  --color-primary: #ff8a00;
  --color-bg: #ffffff;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--color-bg);color:#222}
.container{max-width:var(--site-max-width);margin:0 auto;padding:1rem}

.site-header{background:#fff;border-bottom:1px solid #eee}
.site-header .brand{display:flex;align-items:center;gap:.5rem;padding:.75rem 0}
.site-header img{max-height:48px}

/* Basic grid for programs */
.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.programs__item{background:#fff;border:1px solid #eee;padding:1rem;border-radius:6px}

/* Footer */
.site-footer{background:#fafafa;padding:2rem 0;border-top:1px solid #eee}

/* Accessibility helpers */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto}

@media (min-width:768px){.container{padding:2rem}}

/* Debug */
.debug{font-size:.85rem;color:#666}