/* Load fonts FIRST.
   If later self-host fonts are decided, this import can be replaced. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Lora:wght@400;600;700&display=swap");

/* Main stylesheet for the project. Uses brand palette as CSS variables. */

/* Responsive typography base - 16px root scales with viewport */
html {
  font-size: 16px;
}

body {
  /* text scaled a bit smaller than before so paragraphs don’t feel huge
     on a 13–15" laptop, but we leave the container max-widths alone
     (they still use 1200px/1320px) so content fills the screen horizontally. */
  font-size: clamp(16px, 1.2vw, 18px);
}

:root {
  /* Brand colors */
  --purple: #800080;
  --green: #007800;
  --pink: #f00078;
  /* switch the page background from off‑white to pure white */
  --neutral: #ffffff;
  --yellow: #c0a010;

  /* Text and layout tokens */
  --text: #1a1a1a;
  --muted: #3a3a3a;
  --white: #ffffff;
  --radius: 16px;
  --shadow: 0 10px 30px #00000014;
  --border: 1px solid #0000001f;

  /* Typography */
  --font-heading: "Lora", serif;
  --font-body: "Libre Baskerville", serif;

  /* Footer palette styling */
  --footer-bg: #800080;
  --footer-text: #ffffff;
  --footer-muted: #ffffffcc;

  /* Nav palette styling */
  --nav-bg: #800080;
  --nav-bg-alt: #f00078;
  --nav-text: #ffffff;
  --nav-text-muted: #ffffffcc;
  --nav-pill: #e8e8e0;
  --nav-pill-text: #2b1b2e;
}

body {
  /* Base styles for consistent rendering */
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text);
  /* Font size set above in responsive rule */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Make headings consistently use heading font and center them globally */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  text-align: center;    /* everywhere, e.g. FAQ headings, home values, etc. */
}

.h1--centered {
  text-align: center;
}

/* Page wrapper */
.page {
  /* Keep page readable on all screens */
  width: 100%;
}

/*
  Container usage:
  - We allow a wider max width so the desktop does not look underused.
  - We keep padding so content does not touch the edges.
*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* for the about page we want every block centered horizontally */
.about-page {
  text-align: center;
}
.about-page .card,
.about-page .grid {
  text-align: left; /* keep internal cards and grid items normal */
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.h1 {
  /* Simple header styling */
  margin: 8px 0 16px;
}

.text {
  /* Body text styling */
  line-height: 1.7;
  color: var(--muted);
}

.card {
  /* Reusable card container */
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.card--purple {
  background: #D9B3D9;
}

.card--summary {
  background: #f8bfd1;
}

.card--body {
  background: #f5edc4;
}

.label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 600;
  font-family: var(--font-heading);
}

.input {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #00000026;
  box-sizing: border-box;
  font-family: var(--font-body);
}

.button {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--purple);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-heading);
}

.link {
  color: var(--purple);
  text-decoration: none;
  font-weight: 600;
}

/* -------------------------
   Mobile top bar
   Fix: show logo and branding on mobile
-------------------------- */
.mobile-topbar {
  width: 100%;
  background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg-alt));
  color: var(--nav-text);
  border-bottom: 1px solid #ffffff26;
}

.mobile-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1400px) {
  .mobile-topbar__inner {
    max-width: 1320px;
  }
}

/* Hide mobile top bar on tablet and laptop */
@media (min-width: 768px) {
  .mobile-topbar {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  background: #ffffff;
  border-radius: 12px;
  padding: 6px;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* -------------------------
   Top navigation (tablet/laptop)
   Fix: make navbar bold and branded
-------------------------- */
.top-nav {
  /* Hidden by default (mobile). Shown via media query. */
  display: none;
  width: 100%;
  background: linear-gradient(90deg, var(--nav-bg), var(--nav-bg-alt));
  color: var(--nav-text);
  border-bottom: 1px solid #ffffff26;
}

.top-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1400px) {
  .top-nav__inner {
    max-width: 1320px;
  }
}

.top-nav__links {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--nav-text);
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 10px 12px;
  border-radius: 999px;
  background: #ffffff14;
}

.nav-link:hover {
  background: #ffffff26;
}

.nav-link--active {
  color: var(--nav-pill-text);
  background: var(--nav-pill);
}

.icon-button {
  border: 0;
  background: #ffffff14;
  color: var(--nav-text);
  font-size: 22px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 12px;
}

.icon-button:hover {
  background: #ffffff26;
}

.icon-button--mobile {
  background: #ffffff1f;
}

@media (min-width: 768px) {
  .icon-button--mobile {
    display: none;
  }

  .top-nav {
    display: block;
  }
}

/* -------------------------
   Bottom navigation (mobile)
-------------------------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--white);
  border-top: var(--border);
  z-index: 10;
}

.bottom-nav__item {
  text-decoration: none;
  color: #2b1b2ea6;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bottom-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: inherit;
}

.bottom-nav__label {
  display: block;
  line-height: 1;
  color: inherit;
}

.bottom-nav__item--active {
  color: var(--purple);
}

.bottom-nav-spacer {
  height: 76px;
}

/* Tablet/Laptop switch */
@media (min-width: 768px) {
  .bottom-nav {
    display: none;
  }

  .bottom-nav-spacer {
    display: none;
  }
}

/* -------------------------
   Grid system (for cards)
-------------------------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------------------------
   Home sections
-------------------------- */

/* Hero section - responsive image with overlay */
.hero {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
}

.hero--home .hero__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  gap: 8px;
}

.hero__title {
  margin: 0;
  font-size: clamp(1.375rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.1;
}

.hero__subtitle {
  display: none;
  margin: 0;
  font-size: clamp(0.75rem, 1.5vw, 1.125rem);
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1.4;
}

.pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.pill--pink {
  background: rgba(240, 0, 120, 0.25);
}

.home-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.home-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  color: var(--white);
  transition: opacity 0.2s ease;
}

.home-chip:hover {
  opacity: 0.9;
}

.home-chip--green {
  background: var(--green);
}

.home-chip--pink {
  background: var(--pink);
}

.home-chip--purple {
  background: var(--purple);
}

/* Tablet and up */
@media (min-width: 768px) {
  .hero__overlay {
    padding: 24px;
  }

  .hero__image {
    max-height: 400px;
  }

  .hero__title {
    font-size: 32px;
  }

  .hero__subtitle {
    display: block;
    font-size: 14px;
    max-width: 600px;
  }

  .pill {
    font-size: 12px;
    padding: 8px 14px;
  }

  .home-chip {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .hero__overlay {
    padding: 32px;
  }

  .hero__image {
    max-height: 500px;
  }

  .hero__title {
    font-size: 44px;
  }

  .hero__subtitle {
    display: block;
    font-size: 18px;
  }

  .pill {
    font-size: 13px;
    padding: 10px 16px;
  }

  .home-chip {
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* Home hero card for mobile */
.home-hero-card {
  background: #f5b5f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.home-hero-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
}

.home-hero-card__title {
  margin: 12px 0 8px;
  font-size: 30px;
  color: #3a003f;
}

.home-hero-card__text {
  margin: 0 0 16px;
  line-height: 1.7;
  color: #3a003fcc;
}

.home-hero-card__button {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  background: var(--purple);
  color: var(--white);
}

/* Desktop hero image section (matches your laptop screenshot structure)
   Fix: reduce hero height so it is not huge on home
*/
.home-hero-image {
  display: none;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.home-hero-image__wrap {
  position: relative;
  width: 100%;
  height: 380px;
}

.home-hero-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero-image__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.home-hero-image__overlay-inner {
  text-align: center;
  max-width: 900px;
}

.home-hero-image__title {
  margin: 0 0 10px;
  color: #71c771;
  font-size: 44px;
  line-height: 1.08;
  text-shadow: 0 10px 28px #0000005c;
}

.home-hero-image__subtitle {
  margin: 0;
  color: #ffffffd9;
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 0 10px 28px #0000005c;
}

/* Show the image hero earlier and keep it controlled */
@media (min-width: 900px) {
  .home-hero-card {
    display: none;
  }

  .home-hero-image {
    display: block;
  }
}

@media (min-width: 1200px) {
  .home-hero-image__wrap {
    height: 420px;
  }

  .home-hero-image__title {
    font-size: 50px;
  }
}

.home-section {
  margin-top: 18px;
}

.home-section__title {
  margin: 18px 0 12px;
  font-size: clamp(1.5rem, 3.5vw, 1.625rem);
  color: var(--text);
}

/* Value cards styled to match your mobile colorful design */
.value-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  background: var(--white);
}

.value-card__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.value-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.value-card__title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.value-card__text {
  margin: 0;
  line-height: 1.65;
  color: var(--muted);
  font-size: 14px;
}

.value-card--green {
  background: #bdf6bf;
}

.value-card--pink {
  background: #f8bfd1;
}

.value-card--purple {
  background: #D9B3D9;
}

.value-card--neutral {
  background: #f5edc4;
}

.value-card--yellow {
  background: #f5edc4;
}

/* Accessibility block should not be plain white */
.info-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  border: 1px solid #0000000f;
  background: var(--white);
}

.info-card__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.info-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--purple);
}

.info-card__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.info-card__text {
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--muted);
  font-size: 12px;
}

.info-card__text:last-child {
  margin-bottom: 0;
}

/* -------------------------
   Footer branding
-------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 22px 16px;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 0.8fr 1fr;
    align-items: start;
  }
}

@media (min-width: 1400px) {
  .site-footer__inner {
    max-width: 1320px;
  }
}

.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer__logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  background: var(--white);
  border-radius: 12px;
  padding: 6px;
}

.site-footer__brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
}

.site-footer__brand-text {
  margin: 10px 0 0;
  color: var(--footer-muted);
  line-height: 1.7;
}

.site-footer__title {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 8px;
}

.site-footer__link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--font-heading);
}

.site-footer__link:hover {
  text-decoration: underline;
}

.site-footer__socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.site-footer__credit {
  color: var(--white); /* solid white for contrast */
  font-size: 13px;
  line-height: 1.6;
  text-align: center;    /* center at bottom of footer */
  width: 100%;
  margin-top: 6px;
}

/* built-by part should wrap on narrow viewports, stay inline on larger screens */
.site-footer__built-by {
  display: inline;
}

@media (max-width: 767px) {
  .site-footer__built-by {
    display: block;
    margin-top: 2px;
  }
}

/* Social icon buttons */
.social-icon-link {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #ffffff33;
  box-shadow: 0 12px 20px #0000002b;
}

.social-icon-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.social-icon-link__icon svg {
  display: block;
}

.social-icon-link--x {
  background: #000000;
}

.social-icon-link--instagram {
  background: #e1306c;
}

.social-icon-link--tiktok {
  background: #000000;
}

.social-icon-link:focus {
  outline: 3px solid #ffffff4d;
  outline-offset: 3px;
}

.social-icon-link:hover {
  transform: translateY(-1px);
}

/* -------------------------
   Learn pages
-------------------------- */

.learn-header {
  text-align: center;
  margin-top: 10px;
}

.learn-header__title {
  margin: 8px 0 8px;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  color: var(--text);
}

.learn-header__subtitle {
  margin: 0 auto 16px;
  max-width: 760px;
  line-height: 1.7;
  color: var(--muted);
}

.learn-search {
  max-width: 640px;
  margin: 0 auto;
}

.learn-search--compact {
  max-width: 520px;
  margin: 0;
}

.learn-grid {
  margin-top: 18px;
}

.learn-tile {
  display: flex;
  gap: 14px;
  align-items: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  min-height: 130px;
}

.learn-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  flex: 0 0 auto;
}

.learn-tile__content {
  flex: 1 1 auto;
}

.learn-tile__title {
  margin: 0 0 6px;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.learn-tile__text {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.learn-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text);
}

.learn-tile--pink {
  background: #f8bfd1;
}

.learn-tile--green {
  background: #bdf6bf;
}

.learn-tile--neutral {
  background: #f5edc4;
}

.learn-tile--purple {
  background: #D9B3D9;
}

.learn-topic-header__row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .learn-topic-header__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 10px;
}

.learn-article-list__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.learn-article-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
}

.learn-article-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 8px;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.learn-article-card__summary {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

.learn-article-card__meta {
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple);
}

.learn-article-card--pink {
  background: #f8bfd1;
}

.learn-article-card--green {
  background: #bdf6bf;
}

.learn-article-card--neutral {
  background: #f5edc4;
}

@media (min-width: 768px) {
  .learn-article-list__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.learn-article-header__title {
  margin: 0 0 10px;
  font-size: 28px;
}

.learn-article-header__summary {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.7;
}

.learn-article-body {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  line-height: 1.8;
  color: var(--text);
}

/* -------------------------
   Resources page
-------------------------- */

.resources-header {
  text-align: center;
  padding-top: 10px;
}

.resources-header__title {
  margin: 10px 0 10px;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  color: var(--text);
}

.resources-header__subtitle {
  margin: 0 auto 14px;
  max-width: 760px;
  line-height: 1.7;
  color: var(--muted);
}

.resources-search {
  max-width: 720px;
  margin: 0 auto 18px;
}

.resources-search__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0 0 8px;
  text-align: left;
}

.resources-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

.resources-search__icon {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.resources-search__input {
  border: 0;
  outline: none;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text);
  background: transparent;
}

.resources-sections {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.resources-section {
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.resources-section__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 12px;
  color: var(--white);
}

.resources-section--purple {
  background: var(--purple);
}

.resources-section--green {
  background: var(--green);
}

.resources-section--pink {
  background: var(--pink);
}

.resources-section--yellow {
  background: var(--yellow);
}

.resources-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .resources-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .resources-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.resource-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid #00000012;
  box-shadow: 0 10px 22px #00000012;
}

.resource-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}

.resource-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.resource-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-heading);
  background: #e8e8e0;
  color: #2b1b2e;
}

.resource-pill--muted {
  background: #f2f2ef;
  color: #2b1b2ecc;
}

/* when a pill appears inside a coloured section, even the "muted" variant
   should adopt the section tint so locations like "Coastal Kenya" don’t
   stand out as off‑white */
.resources-section--purple .resource-pill--muted {
  background: #D9B3D9;
  color: var(--text);
}
.resources-section--green .resource-pill--muted {
  background: #bdf6bf;
  color: var(--text);
}
.resources-section--pink .resource-pill--muted {
  background: #f8bfd1;
  color: var(--text);
}
.resources-section--yellow .resource-pill--muted {
  background: #f5edc4;
  color: var(--text);
}

/* colored variants matching section tints */
.resource-pill--purple {
  background: #D9B3D9;
  color: var(--text);
}
.resource-pill--green {
  background: #bdf6bf;
  color: var(--text);
}
.resource-pill--pink {
  background: #f8bfd1;
  color: var(--text);
}
.resource-pill--yellow {
  background: #f5edc4;
  color: var(--text);
}
.resource-pill--pink {
  background: #f8bfd1;
  color: var(--text);
}
.resource-pill--yellow {
  background: #f5edc4;
  color: var(--text);
}

.resource-card__text {
  margin: 12px 0 0;
  line-height: 1.7;
  color: var(--muted);
  font-size: 14px;
}

.resource-card__links {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.resource-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: var(--purple);
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 13px;
  word-break: break-word;
}

.resource-link__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.resource-card__actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}

.resource-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  background: #80008014;
  color: var(--purple);
}

.resource-action__arrow {
  font-size: 18px;
  line-height: 1;
}

.resource-action--primary {
  background: var(--purple);
  color: var(--white);
}

/* override primary button color inside other sections so actions match
   the section background rather than always using brand purple */
.resources-section--green .resource-action--primary {
  background: var(--green);
}
.resources-section--pink .resource-action--primary {
  background: var(--pink);
}
.resources-section--yellow .resource-action--primary {
  background: var(--yellow);
}

/* disabled buttons should also respect section color for placeholders */
.resources-section--green .resource-action--disabled {
  background: var(--green);
}
.resources-section--pink .resource-action--disabled {
  background: var(--pink);
}
.resources-section--yellow .resource-action--disabled {
  background: var(--yellow);
  /* disabled placeholders in yellow should still appear at full strength
     so the colour doesn’t look faded/tinted */
  opacity: 1;
}

.resource-action--disabled {
  /* match brand purple even when not yet actionable; opacity hints disabled state */
  background: var(--purple);
  color: var(--white);
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 767px) {
  .resources-header {
    text-align: left;
  }

  .resources-search__label {
    display: none;
  }
}

/* -------------------------
   Page head + search (Learn/Resources/FAQ/Support)
-------------------------- */
.page-head {
  margin-top: 18px;
}

.page-head__title {
  margin: 8px 0 10px;
  font-size: clamp(1.75rem, 3.5vw, 1.875rem);
  color: var(--text);
}

.page-head__subtitle {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--muted);
}

.page-search {
  margin-top: 10px;
}

.page-search__input {
  margin-top: 6px;
}

/* FAQ */
.faq-q {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text);
  font-family: var(--font-heading);
}

.faq-a {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

/* -------------------------
   FAQ cards
-------------------------- */

.faq-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
  background: var(--white);
}

.faq-card--purple {
  background: #D9B3D9;
}

.faq-card--green {
  background: #bdf6bf;
}

.faq-card--yellow {
  background: #f5edc4;
}

.faq-card--pink {
  background: #f8bfd1;
}

.faq-card__question {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  margin: 0 0 10px;
  color: var(--text);
}

.faq-card__answer {
  margin: 0;
  line-height: 1.7;
  color: var(--text);
  font-size: 14px;
}

/* -------------------------
   Mobile menu (top-right "More/☰")
-------------------------- */

.no-scroll {
  overflow: hidden;
}

.mobile-menu {
  display: none;
}

.mobile-menu--open {
  display: block;
}

.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: #00000066;
  z-index: 40;
}

.mobile-menu__panel {
  position: fixed;
  top: 12px;
  right: 12px;
  left: 12px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
  overflow: hidden;
  border: 1px solid #00000014;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid #00000014;
}

.mobile-menu__title {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text);
}

.mobile-menu__close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: #00000008;
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
}

.mobile-menu__links {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--white);
  padding: 12px 12px;
  border-radius: 14px;
  background: var(--purple);
}

.mobile-menu__link--primary {
  background: var(--purple);
  color: var(--white);
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

/* -------------------------
   Get Support page
-------------------------- */

.support-head {
  margin-top: 10px;
}

.support-head__title {
  margin: 8px 0 10px;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  color: var(--text);
  text-align: center;
}

.support-head__subtitle {
  margin: 0 auto 14px;
  max-width: 760px;
  line-height: 1.7;
  color: var(--muted);
  text-align: center;
}

.support-layout {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

@media (min-width: 900px) {
  .support-layout {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

.support-hero {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-purple-soft);
  padding: 14px;
}

.support-hero__inner {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px #00000012;
  padding: 16px;
}

.support-hero__title {
  margin: 0 0 10px;
  font-size: 20px;
  color: var(--text);
}

.support-hero__text {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--muted);
  font-size: 14px;
}

.support-hero__callout {
  border-radius: 16px;
  border: 1px solid #00000012;
  padding: 14px;
  background: #ffffff;
}

.support-hero__callout-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.support-hero__callout-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5edc4;
  color: var(--text);
  font-weight: 900;
}

.support-hero__callout-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 18px;
  color: var(--text);
}

.support-hero__callout-note {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.support-hero__button {
  margin-top: 12px;
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 800;
  background: var(--purple);
  color: var(--white);
}

.support-hero__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.support-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  border: 1px solid #00000012;
}

.support-badge--yellow {
  background: #f5edc4;
  color: var(--text);
}

.support-badge--green {
  background: #bdf6bf;
  color: var(--text);
}

.support-badge--pink {
  background: #f8bfd1;
  color: var(--text);
}

.support-list {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-pink-soft);
  padding: 14px;
}

.support-list__title {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 900;
  padding: 4px 6px;
}

.support-cards {
  display: grid;
  gap: 12px;
}

.support-card {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 22px #00000012;
  padding: 14px;
  border: 1px solid #00000012;
  color: var(--text);
}

.support-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00000008;
  font-weight: 900;
}

.support-card__content {
  flex: 1 1 auto;
}

.support-card__title {
  font-family: var(--font-heading);
  font-weight: 900;
  margin: 0 0 6px;
}

.support-card__text {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.support-card__chev {
  font-size: 22px;
  color: #2b1b2ea6;
}