/*
Theme Name: Umbrella of Care
Theme URI: https://umbrellaofcare.tail3dc4b1.ts.net
Author: Siyabonga Mndaweni
Description: Custom classic theme for Umbrella of Care NPO. No block-editor Site Editor / FSE surface by design — logo, menus, and site identity live in Appearance > Customize, and all page/post content is edited through the standard Gutenberg content editor. Built to keep day-to-day editing (for both directors and the site owner) to "open a page, click the text, edit, save."
Version: 1.0.0
Text Domain: umbrellaofcare
*/

:root {
  /* Sampled directly from the director-made brand assets (logo.jpeg,
     Theory of Change graphic) rather than approximated. */
  --navy: #0B2450;
  --orange: #FF8B07;
  --purple: #7F3DA7;
  --green: #1FAD5B;
  --blue: #1A41A0;
  --coral: #FF5029;
  --cream: #FAF8F5;
  --text: #2A2A2A;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', -apple-system, sans-serif;
  color: var(--text);
  background: var(--cream);
  margin: 0;
  line-height: 1.65;
  font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Baloo 2', 'Nunito Sans', sans-serif;
  color: var(--navy);
  line-height: 1.25;
}

a { color: var(--navy); }
a:hover, a:focus { color: var(--orange); }

img { max-width: 100%; height: auto; }

.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* skip link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

/* header */
.site-header {
  background: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #eee;
}
.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-logo { display: inline-flex; text-decoration: none; }
.site-logo img { max-height: 64px; width: auto; }
.site-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.4rem;
  color: var(--navy);
  text-decoration: none;
}
.site-nav__list {
  display: flex;
  list-style: none;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav__list a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}

/* page content */
.page-content, .home-content { padding: 48px 24px 24px; }
.page-content .entry-content,
.home-content .entry-content { max-width: 900px; margin: 0 auto; }
.page-title { font-size: 2.25rem; margin-bottom: 24px; }
.post-meta { color: #777; font-size: 0.9rem; margin-top: -12px; }

/* buttons */
.wp-block-button__link {
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
}
.wp-block-buttons { gap: 12px !important; flex-wrap: wrap; }

/* lists */
.entry-content ul { padding-left: 1.3em; }
.entry-content li { margin-bottom: 8px; }

/* theory of change step cards */
.toc-steps {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0;
}
.toc-step {
  flex: 1 1 180px;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
}
.toc-step__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
}
.toc-step--purple { background: #EDE3F2; }
.toc-step--purple .toc-step__icon { background: var(--purple); }
.toc-step--green { background: #DFF3E8; }
.toc-step--green .toc-step__icon { background: var(--green); }
.toc-step--orange { background: #FFEEDC; }
.toc-step--orange .toc-step__icon { background: var(--orange); }
.toc-step--blue { background: #DEE4F1; }
.toc-step--blue .toc-step__icon { background: var(--blue); }
.toc-step--coral { background: #FFE6E1; }
.toc-step--coral .toc-step__icon { background: var(--coral); }
.toc-step__title { font-size: 1rem; margin: 8px 0; }

/* banner strip + tagline */
.banner-strip {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 20px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 40px 0 12px;
}
.tagline {
  text-align: center;
  font-style: italic;
  color: var(--navy);
  margin: 0 0 40px;
}

/* footer */
.site-footer {
  background: #fff;
  padding: 32px 24px 12px;
  margin-top: 48px;
  border-top: 4px solid var(--navy);
}
.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.site-footer__col { flex: 1 1 220px; font-size: 0.9rem; }
.site-footer a { color: var(--navy); }
.site-footer__tagline {
  text-align: center;
  font-style: italic;
  color: var(--navy);
  margin-top: 24px;
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; }
  .toc-steps { flex-direction: column; }
}