/*
Theme Name: Children Mission
Theme URI: https://childrenmission.org
Description: Astra child theme for Children Mission NGO. Brand colors and typography overrides on top of Astra; all layout comes from Astra + native Gutenberg blocks.
Author: Children Mission Dev Team
Author URI: https://childrenmission.org
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: children-mission
Tags: charity, nonprofit, children, education, one-column, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   BRAND TOKENS (mirror theme.json palette as CSS vars for use
   in places where Gutenberg block colors aren't applied — e.g.
   the team-grid shortcode and Astra header/footer overrides)
   ============================================================ */
:root {
  --cm-red:    #E53935;
  --cm-yellow: #FBC02D;
  --cm-green:  #43A047;
  --cm-blue:   #1E88E5;
  --cm-purple: #8E24AA;

  --cm-dark:       #2D2D2D;
  --cm-gray:       #6B7280;
  --cm-light-gray: #F3F4F6;

  --cm-red-tint:    #FEF2F2;
  --cm-yellow-tint: #FFFDE7;
  --cm-green-tint:  #F1F8E9;
  --cm-blue-tint:   #E3F2FD;
  --cm-purple-tint: #F3E5F5;

  --cm-radius: 12px;
  --cm-button-radius: 999px; /* pill-style buttons */
}

/* ============================================================
   ASTRA TYPOGRAPHY OVERRIDES
   Use system stack to match the "Calibri-like" brief.
   Astra also reads typography from Customizer; this is a
   fallback so the look is consistent before any tweaks.
   ============================================================ */
body,
.ast-container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 22px;
  line-height: 1.6;
  color: var(--cm-dark);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
}

/* ============================================================
   ASTRA HEADER — hide site title (logo speaks for itself);
   give the logo enough breathing room.
   ============================================================ */
.ast-site-title-wrap,
.site-header .site-title,
.site-header .site-description {
  display: none !important;
}
.site-header .custom-logo {
  max-height: 64px;
  width: auto;
}

/* ============================================================
   ASTRA HEADER — Donate menu item styled as a button
   The .menu-item-donate class is added by cm_add_donate_menu_class()
   in functions.php.
   ============================================================ */
/* Header nav items: explicit font-size + tight horizontal padding so the
   whole menu fits in a single row even with body font-size:22px. */
.main-header-menu > li > a,
.ast-builder-menu > li > a {
  font-size: 16px !important;
  padding: 12px 14px !important;
  white-space: nowrap;
}

.main-header-menu .menu-item-donate > a,
.ast-builder-menu .menu-item-donate > a {
  background: var(--cm-purple);
  color: #fff !important;
  border-radius: 25% !important;
  padding: 10px 20px !important;
  margin: 8px 4px;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
  display: inline-block;
  line-height: 1.3;
}

.main-header-menu .menu-item-donate > a:hover,
.ast-builder-menu .menu-item-donate > a:hover {
  background: #6a1c84;
  transform: translateY(-1px);
}

/* Global link hover color: brand purple (matches Donate button background).
   Astra's default uses --ast-global-color-1 — we override on hover/focus. */
a:hover,
a:focus {
  color: var(--cm-purple);
}

/* Header menu items (non-Donate) on hover/active — also purple. */
.main-header-menu .menu-item:not(.menu-item-donate) > a:hover,
.main-header-menu .menu-item:not(.menu-item-donate) > a:focus,
.main-header-menu .menu-item:not(.menu-item-donate).current-menu-item > a,
.ast-builder-menu .menu-item:not(.menu-item-donate) > a:hover,
.ast-builder-menu .menu-item:not(.menu-item-donate) > a:focus,
.ast-builder-menu .menu-item:not(.menu-item-donate).current-menu-item > a {
  color: var(--cm-purple) !important;
}

/* Footer links keep their own (yellow) hover defined further below. */

/* Brush-style highlight for the active menu item (per design brief). */
.main-header-menu .current-menu-item > a:not(.menu-item-donate a),
.ast-builder-menu .current-menu-item > a:not(.menu-item-donate a) {
  position: relative;
}
.main-header-menu .current-menu-item > a:not(.menu-item-donate a)::after,
.ast-builder-menu .current-menu-item > a:not(.menu-item-donate a)::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 6px;
  background: var(--cm-yellow);
  border-radius: 4px;
  opacity: .7;
  z-index: -1;
}

/* ============================================================
   SECTION HEADING ACCENT — short underline below each section's
   <h2> in the heading's own brand color. This is the "What We Do"
   visual style applied uniformly across all sections.
   `currentColor` automatically picks up has-cm-red/blue/green/...-color.
   Skipped when heading is white-on-dark (Hero / Work With Us CTA).
   ============================================================ */
.entry-content .wp-block-group > .wp-block-heading.has-text-align-center,
.entry-content .wp-block-cover .wp-block-cover__inner-container > .wp-block-heading.has-text-align-center {
  position: relative;
  padding-bottom: 18px;
  margin-bottom: 28px;
}
.entry-content .wp-block-group > .wp-block-heading.has-text-align-center::after,
.entry-content .wp-block-cover .wp-block-cover__inner-container > .wp-block-heading.has-text-align-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  background: currentColor;
  border-radius: 2px;
  opacity: .85;
}
/* Don't draw the accent under white headings on dark/gradient backgrounds. */
.entry-content .wp-block-group > .wp-block-heading.has-white-color::after,
.entry-content .wp-block-cover__inner-container > .wp-block-heading.has-white-color::after {
  display: none;
}

/* ============================================================
   VALUES CARDS — brand-colored icon above each title.
   The SVG inside uses fill="currentColor" so it picks up the
   .has-cm-X-color text color set on the wrapper.
   ============================================================ */
.cm-value-icon {
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  display: block;
}
.cm-value-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Inline icon next to a heading (used in What We Do subsection titles). */
.cm-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.cm-inline-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Centered icon variant (partner cards) — overrides default left alignment. */
.cm-value-icon--center {
  margin-left: auto;
  margin-right: auto;
  width: 40px;
  height: 40px;
}

/* ============================================================
   CARD HOVER — every .cm-card lifts on hover with a soft shadow.
   Applied to Values cards, partner cards, training cards, etc.
   ============================================================ */
.cm-card {
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.14);
}
/* Card title sized larger than body to keep hierarchy after body 22px. */
.cm-card .wp-block-heading {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Impact story card: photo column ~1/3 of container, quote column ~2/3. */
.cm-impact-card .wp-block-columns {
  align-items: center;
}
@media (min-width: 782px) {
  .cm-impact-card .wp-block-column:first-child {
    flex-basis: 33% !important;
    flex-grow: 0 !important;
    max-width: 33%;
  }
  .cm-impact-card .wp-block-column:last-child {
    flex-basis: 67% !important;
  }
}
.cm-impact-card .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   GUTENBERG BLOCK TWEAKS
   ============================================================ */

/* Buttons: unified compact size matching hero "Support Our Work" outline
   button. Transparent 2px border on fill matches the 2px border on outline,
   so both styles are exactly the same height. Explicit px independent of
   body 22px. */
.wp-block-button .wp-block-button__link {
  border-radius: var(--cm-radius);
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  display: inline-block;
}
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.wp-block-button .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Kill the harsh blue outline drawn by WordPress core on .wp-element-button
   (declared in wp-includes/blocks/elements.scss as `:active { outline: 1px solid }`).
   Apply to every state so neither browser UA nor WP core can re-introduce it.
   Replace with a soft brand-coloured box-shadow ring for keyboard a11y. */
.wp-element-button,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.wp-element-button:active,
.wp-block-button__link,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:focus-visible,
.wp-block-button__link:active,
button,
button:hover,
button:focus,
button:focus-visible,
button:active,
input[type="submit"]:focus,
input[type="button"]:focus,
.wpcf7-submit:focus,
.wp-block-search__button:focus,
.main-header-menu .menu-item-donate > a:focus {
  outline: none !important;
  outline-offset: 0 !important;
}
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.wpcf7-submit:focus-visible,
.wp-block-search__button:focus-visible,
.main-header-menu .menu-item-donate > a:focus-visible {
  box-shadow: 0 0 0 3px rgba(142, 36, 170, .35) !important;
}

/* Outline button style (used in heroes — white border on dark/gradient bg). */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* ============================================================
   SCROLL FADE-IN ANIMATION
   Applied by assets/js/animations.js via IntersectionObserver
   to top-level alignfull/alignwide blocks.
   ============================================================ */
.cm-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  will-change: opacity, transform;
}
.cm-fade-in.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cm-fade-in { opacity: 1; transform: none; transition: none; }
}

/* Cover heroes:
   - Inner container max 1200px, centered (so left edge aligns with rest of
     page content).
   - Hero content (heading, subtitle, buttons) is constrained to ~1/3 of the
     1200px container so the photo/gradient takes the right 2/3 visually. */
.wp-block-cover.alignfull .wp-block-cover__inner-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .wp-block-cover.alignfull .wp-block-cover__inner-container > * {
    max-width: 450px;
  }
  /* Buttons row should stay on one line — allow it to extend past the 450px
     text column so two hero buttons sit side-by-side, not stacked. */
  .wp-block-cover.alignfull .wp-block-cover__inner-container > .wp-block-buttons {
    max-width: none;
    flex-wrap: nowrap;
  }
}
.wp-block-cover.alignfull .wp-block-cover__inner-container .wp-block-buttons.is-content-justification-left {
  justify-content: flex-start;
}

/* Image blocks inside columns — round corners by default. */
.wp-block-columns .wp-block-image img {
  border-radius: var(--cm-radius);
}

/* Quote block — soft brand accent on left edge. */
.wp-block-quote {
  border-left: 4px solid var(--cm-blue);
  padding-left: 20px;
  font-style: italic;
}

/* ============================================================
   TEAM GRID — rendered by [cm_team_grid] shortcode
   Lives outside the Gutenberg editor so we style it here.
   ============================================================ */
.cm-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.cm-team-card {
  background: #fff;
  border-radius: var(--cm-radius);
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-align: center;
}

.cm-team-card__photo img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: block;
}

.cm-team-card__name {
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.cm-team-card__role {
  color: var(--cm-blue);
  font-size: .95rem;
  margin: 0 0 10px;
  font-weight: 600;
}

.cm-team-card__bio {
  font-size: .92rem;
  color: var(--cm-gray);
  margin: 0;
}

/* ============================================================
   FOOTER — 3-column widgets row rendered by cm_render_footer_widgets()
   into Astra's <footer> via astra_footer_content hook.
   ============================================================ */
.site-footer {
  background: #1f2937;
  color: #e5e7eb;
}
.site-footer a {
  color: #ffffff;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cm-yellow);
}

.cm-footer-widgets-row {
  padding: 56px 24px 32px;
}
/* Hard kill ALL borders + shadows on every footer descendant to remove
   the thin white seam Astra draws between gradient and footer. */
footer.site-footer,
footer.site-footer *:not(.cm-social-icons a) {
  border: 0 !important;
  box-shadow: none !important;
}
.cm-footer-widgets-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 768px) {
  .cm-footer-widgets-grid { grid-template-columns: 1fr; gap: 28px; }
}
.cm-footer-widget__title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 14px;
}
.cm-footer-widget p,
.cm-footer-widget ul {
  margin: 0 0 8px;
  font-size: .95rem;
  line-height: 1.7;
}
.cm-footer-widget ul {
  list-style: none;
  padding: 0;
}
.cm-footer-widget li { margin-bottom: 4px; }

/* Astra's bottom copyright bar */
.site-below-footer-wrap .ast-footer-copyright {
  text-align: center;
  font-size: .9rem;
  color: #9ca3af;
  padding: 16px 24px;
}

/* Hero headings — extra weight + soft drop shadow so the title stays
   crisp and readable on top of the photo + gradient overlay. */
.wp-block-cover .wp-block-cover__inner-container > .wp-block-heading,
.wp-block-cover .wp-block-heading.has-white-color {
  font-weight: 800;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.5);
  line-height: 1.15;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 20px; }
  .wp-block-cover.alignfull { min-height: 380px !important; }
  .wp-block-cover .wp-block-heading { font-size: 1.7rem !important; }
}

/* ============================================================
   FOOTER — compact copyright bar, hide Astra credit, social icons
   ============================================================ */

/* Astra renders the copyright in .site-below-footer-wrap; that wrapper
   has its own padding which dominates over the inner element padding.
   Squash the WHOLE row to ~1/3 of its default height. */
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.site-below-footer-inner-wrap,
.site-footer .ast-builder-grid-row {
  padding-top: 4px !important;
  padding-bottom: 12px !important;
  min-height: 0 !important;
  background: #1f2937 !important;
  color: #9ca3af !important;
}
.site-footer .ast-footer-copyright {
  padding: 0 !important;
  font-size: 13px;
}
.site-footer .ast-footer-copyright p {
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Defensive — hide any wpastra.com credit link if it still renders. */
.site-footer a[href*="wpastra.com"] {
  display: none !important;
}

/* Scroll-to-top button — brand purple. */
#ast-scroll-top,
.ast-scroll-to-top,
a.ast-scroll-to-top {
  background-color: var(--cm-purple) !important;
  color: #fff !important;
  border-color: var(--cm-purple) !important;
  border-radius: 6px !important;
}
#ast-scroll-top:hover,
.ast-scroll-to-top:hover {
  background-color: #6a1d80 !important;
}

/* Social icons (footer Contact column). */
.cm-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cm-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.cm-social-icons a:hover {
  background: var(--cm-purple);
  transform: translateY(-2px);
  color: #fff;
}
.cm-social-icons svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* ============================================================
   PILL BUTTONS — fully rounded corners on every button on the
   site (Gutenberg, header Donate, form submits, search button).
   Cards keep --cm-radius (12px); only buttons get pill shape.
   ============================================================ */
/* Donate button is excluded — it has its own border-radius:25% rule above. */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
.wpcf7-submit,
.wp-block-search__button {
  border-radius: var(--cm-button-radius) !important;
}

/* ============================================================
   FINAL HARD OVERRIDE — no blue outline / border on ANY button state.
   Placed last in the file to win the cascade against WP core's
   `.wp-element-button:active { outline: 1px solid }` and any Astra rules.
   Also pins border-color: transparent on fill buttons so the 2px transparent
   border we add for height-matching never becomes visible on hover/focus.
   ============================================================ */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button .wp-block-button__link:active,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-element-button:focus-visible,
.wp-element-button:active {
  outline: 0 none !important;
  outline-offset: 0 !important;
  border-color: transparent !important;
}
/* Outline-style buttons keep their white border across states. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:active {
  border-color: #fff !important;
}

/* Eliminate the 1px white seam between gradient block and dark footer caused
   by sub-pixel rendering: pull footer up 2px and pad it back so it visually
   overlaps the previous block. Body background stays white. */
footer.site-footer {
  margin-top: -2px !important;
  padding-top: 2px !important;
  position: relative;
  z-index: 1;
}

/* ============================================================
   IMPACT STORIES — query loop cards on /impact-stories/
   ============================================================ */
/* Featured image: full card width, fixed 16:9 ratio, rounded top */
.wp-block-query .wp-block-post .wp-block-post-featured-image {
  margin: 0 0 12px;
}
.wp-block-query .wp-block-post .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.wp-block-query .wp-block-post-date {
  font-size: .9rem;
  opacity: .7;
  margin-bottom: 4px;
}
/* Tighten the gap between the excerpt paragraph and the Read story button. */
.wp-block-query .wp-block-post-excerpt p,
.wp-block-query .wp-block-post-excerpt__excerpt {
  margin-bottom: 6px;
}

/* Post excerpt "more" link → styled pill button (purple, like other CTAs). */
.wp-block-query .wp-block-post-excerpt__more-link {
  display: inline-block;
  background: var(--cm-purple);
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 22px;
  border-radius: var(--cm-button-radius);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0;
  transition: background .2s ease, transform .2s ease;
}
.wp-block-query p.wp-block-post-excerpt__more-text {
  margin-top: 1em;
  margin-bottom: 0;
}
.wp-block-query .wp-block-post-excerpt__more-link:hover {
  background: #6a1c84;
  transform: translateY(-1px);
}

/* ============================================================
   ABOUT US — team rows: 1/3 photo + 2/3 bio text. Photos are
   limited in height to keep the rhythm consistent.
   ============================================================ */
.cm-team-row .wp-block-columns {
  gap: 24px;
  align-items: center;
}
.cm-team-row .wp-block-column:first-child {
  flex: 0 0 28%;
}
.cm-team-row .wp-block-column:nth-child(2) {
  flex: 1;
}
.cm-team-row .wp-block-image,
.cm-team-row .wp-block-image figure {
  margin: 0;
}
.cm-team-row .wp-block-image img {
  width: 100%;
  max-height: 430px;
  object-fit: cover;
  border-radius: 12px;
}