/*
Theme Name: Goodlark Theme
Description: Theme for the Goodlark Educational Foundation. Light header bar, two-column pages, grey footer bar. Menus, logo and footer text are all editable from the WordPress admin.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: mysite-theme
*/

:root {
  --color-bg: #ffffff;
  --color-text: #212529;
  --color-muted: #565e64;
  --color-link: #0a58ca;
  --color-bar: #f8f9fa;
  --color-footer: #e9ecef;
  --color-rule: #dee2e6;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 72rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--color-link); }
a:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Header */
.site-header { background: var(--color-bar); }
.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  padding-block: .75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #000;
  text-decoration: none;
  font-size: 1.375rem;
  line-height: 1.2;
}
.brand-logo { height: 2rem; width: auto; display: block; }

.menu { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; }
.menu a { color: var(--color-muted); text-decoration: none; padding-block: .25rem; display: inline-block; }
.menu a:hover, .menu .current-menu-item > a { color: var(--color-text); text-decoration: underline; }
.menu .sub-menu { list-style: none; margin: 0; padding-left: 1rem; }
.nav-primary { margin-right: auto; }

/* Main */
.site-main { flex: 1; padding-block: 3rem; }

.page-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3rem; }
@media (min-width: 52rem) {
  .page-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.page-title { font-size: 1.875rem; font-weight: 500; line-height: 1.2; margin: 0; }
.entry-content > :first-child { margin-top: 0; }
.entry-content { max-width: 44rem; }
.entry-content h2, .entry-content h3 { line-height: 1.25; margin-top: 2rem; }

.entry-meta { color: var(--color-muted); font-size: .9rem; margin: .25rem 0 1rem; }

.section-title { font-size: 1.5rem; font-weight: 500; margin: 3rem 0 1rem; }
.news-item { padding-block: 1.25rem; border-top: 1px solid var(--color-rule); max-width: 44rem; }
.news-item:last-of-type { border-bottom: 1px solid var(--color-rule); }
.news-item h2, .news-item h3 { font-size: 1.25rem; margin: 0; line-height: 1.3; }
.news-item h2 a, .news-item h3 a { color: inherit; text-decoration: none; }
.news-item h2 a:hover, .news-item h3 a:hover { text-decoration: underline; }
.news-item p { margin: .5rem 0 0; }

/* Footer */
.site-footer { background: var(--color-footer); color: #343a40; padding-block: .85rem; text-align: center; font-size: .95rem; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: .25rem; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}