/*
Theme Name: Healthy Children's Fund
Theme URI: https://healthychildrensfund.org
Description: A child theme of Twenty Twenty-Five for Healthy Children's Fund
Author: HappyChap Creative Co
Author URI: https://happychap.co
Template: twentytwentyfive
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthy-childrens-fund
Tags: child-theme, custom, healthy, nonprofit
*/

/* Optional: base styles */
body {
  font-family: var(--wp--preset--font-family--system-sans-serif);
}

/* === Buttons: Rounded (Nunito-style) arrow on all buttons === */
.wp-block-button .wp-block-button__link {
  --arrow-size: 1.05em;         /* icon size */
  --arrow-gap: 0.5em;           /* space before icon */
  position: relative;
  padding-right: calc(1.2em + var(--arrow-gap) + var(--arrow-size));
}

.wp-block-button .wp-block-button__link::after {
  /* Heavy rounded arrow glyph = nice match for Nunito */
  content: "➜"; /* U+279C HEAVY ROUND-TIPPED RIGHTWARDS ARROW */
  display: inline-block;
  margin-left: var(--arrow-gap);
  line-height: 1;
  font-size: var(--arrow-size);
  font-weight: 800;
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: black;
  transform-origin: 50% 50%;
  transition: transform .2s ease, translate .2s ease;
  translate: 0 .02em; /* tiny optical nudge */
}

/* Hover nudge (subtle) */
.wp-block-button .wp-block-button__link:hover::after,
.subscribe-button:hover::after {
  transform: translateX(2px);
}

/* Outline buttons inherit color just fine */
.wp-block-button.is-style-outline .wp-block-button__link::after {
  color: currentColor;
}

/* === Optional helpers === */

/* 1) Disable arrow on a specific button (add class "no-arrow" to that Button) */
.wp-block-button.no-arrow .wp-block-button__link::after { content: none; }
.wp-block-button.no-arrow .wp-block-button__link { padding-right: 1.2em; }

/* 2) Arrow on the LEFT instead (add class "arrow-left") */
.wp-block-button.arrow-left .wp-block-button__link {
  padding-right: 1.2em;
  padding-left: calc(1.2em + var(--arrow-gap) + var(--arrow-size));
}
.wp-block-button.arrow-left .wp-block-button__link::after {
  margin-left: 0;
  margin-right: var(--arrow-gap);
  transform: rotate(180deg); /* flip to point left */
  order: -1;
}

/* 3) RTL: keep the arrow visually at the end */
[dir="rtl"] .wp-block-button .wp-block-button__link {
  padding-left: calc(1.2em + var(--arrow-gap) + var(--arrow-size));
  padding-right: 1.2em;
}
[dir="rtl"] .wp-block-button .wp-block-button__link::after {
  margin-left: 0;
  margin-right: var(--arrow-gap);
  transform: rotate(180deg); /* right arrow flips in RTL */
}

/* === DOWN ARROW selector ===
   Add "arrow-down" in the Button block's Advanced → Additional CSS class(es).
   Rotates the same rounded arrow glyph ↓ (keeps the heavy, rounded look). */
.wp-block-button.arrow-down .wp-block-button__link::after {
  transform: rotate(90deg);
}
.wp-block-button.arrow-down .wp-block-button__link:hover::after {
  transform: rotate(90deg) translateY(2px);
}


/* Make Yoast FAQs look/behave like WP Details block */
.yoast-faq-details {
  margin: 0 0 12px;
  border: 1px solid var(--wp--preset--color--contrast-3, #d9d9d9);
  border-radius: 8px;
  background: var(--wp--preset--color--base, #fff);
  overflow: hidden;
}

.yoast-faq-summary {
  cursor: pointer;
  list-style: none;            /* remove default marker for safety */
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.yoast-faq-summary::-webkit-details-marker { display: none; }

/* Chevron indicator like Details */
.yoast-faq-summary::after {
  content: "";
  margin-left: auto;
  width: 1em;
  height: 1em;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5'/></svg>") center/contain no-repeat;
  transition: transform .2s ease;
}

.yoast-faq-details[open] > .yoast-faq-summary::after {
  transform: rotate(180deg);
}

.yoast-faq-answer-wrap {
  padding: 0 1rem 1rem 1rem;
}

/* Smooth open/close like Details block (for non-Chrome engines) */
@supports not (-webkit-touch-callout: none) {
  @media (prefers-reduced-motion: no-preference) {
    .yoast-faq-details .yoast-faq-answer-wrap {
      transition: opacity .2s ease, padding-top .2s ease;
    }
    .yoast-faq-details:not([open]) .yoast-faq-answer-wrap {
      opacity: 0;
      padding-top: 0;
    }
    .yoast-faq-details[open] .yoast-faq-answer-wrap {
      opacity: 1;
      padding-top: .5rem;
    }
  }
}

/* Tidy inner content */
.yoast-faq-answer-wrap p { margin: 0 0 .8em; }
.yoast-faq-answer-wrap ol,
.yoast-faq-answer-wrap ul { margin: .6em 0 .8em 1.2em; }


.wp-block-details {
  margin: 0 0 12px;
  border: 5px solid var(--wp--preset--color--black);
  /* border-radius: 8px; */
  /* background: var(--wp--preset--color--base, #fff); */
  overflow: hidden;
}
.wp-block-details {
  padding: 1.5rem;
}
.wp-block-details summary {
  /* cursor: pointer; */
  /* list-style: none;            remove default marker for safety */
  /* display: flex; */
  /* align-items: center; */
  /* gap: .5rem; */
  /* padding: .9rem 1rem; */
  /* font-weight: 600; */
  /* line-height: 1.3; */
  font-family: var(--wp--preset--font-family--nunito);
}

.wp-block-details.is-style-faq-schema p {
  padding: 0 1em .5em!important;
}

.iframe-full-width {
  width: 100%;
  min-height: 900px;
}

strong, a:where(:not(.wp-element-button)) {
  font-weight: 700;
}

.wp-block-media-text > .wp-block-media-text__content {
  padding: 0;
}


/* ===== Custom highlight (selected text) ===== */
::selection {
  background: var(--wp--preset--color--coral, #f16364);
  color: #fff;  /* text color while selected */
}

::-moz-selection {
  background: var(--wp--preset--color--coral, #f16364);
  color: #fff;
}

/* ===== Centered Single-Column Timeline with Circle Nodes ===== */
:root{
  --tl-spine: var(--wp--preset--color--coral, #f16364);
  --tl-spine-w: 5px;          /* spine thickness */
  --tl-node: var(--wp--preset--color--coral, #f16364);
  --tl-node-size: 14px;       /* circle diameter */
  --tl-node-ring: #fff;       /* small white ring to pop on light BGs */
  --tl-row-gap: 48px;         /* vertical spacing between items */
  --tl-maxw: 760px;           /* content width */
}

.is-style-timeline {
  position: relative;
  display: grid;
  row-gap: var(--tl-row-gap);
  justify-items: center;
  padding: 8px 0;
}

/* vertical center spine */
.is-style-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: var(--tl-spine-w);
  transform: translateX(-50%);
  background: var(--tl-spine);
  border-radius: calc(var(--tl-spine-w) / 2);
}

/* each entry */
.is-style-timeline > .timeline-item {
  position: relative;
  width: min(100%, var(--tl-maxw));
  padding-top: calc(var(--tl-node-size) / 2 + 8px); /* room for the node */
  text-align: left; /* keep body text left-aligned */
}

/* circle node sitting on the spine at the top of each item */
.is-style-timeline > .timeline-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--tl-node-size);
  height: var(--tl-node-size);
  transform: translate(-50%, -50%); /* center over item top, intersects spine */
  background: var(--tl-node);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px var(--tl-node-ring),        /* white ring */
    0 0 0 4px var(--tl-spine);            /* thin halo that blends with spine */
}

/* tidy typography (optional) */
.is-style-timeline .timeline-title { margin: 0 0 4px; }
.is-style-timeline .timeline-meta  { margin: 0 0 10px; opacity: .75; font-size: .925em; }
.is-style-timeline .timeline-body  { margin: 0; }
.is-style-timeline a { text-decoration: underline; text-underline-offset: .12em; }

/* mobile stays centered naturally; no special rules needed */


.subscribe-and-share-container {
  text-align: center;
}

input#email {
  /* max-width: 300px; */
  width: 100%;
  height: 2.5em;
  /* display: block; */
  margin: 0 20px 0;
  text-align: center;
  font-size: 1.25em;
  position: relative;
  top: 3px;
  border-radius: 9999px;
}

.sr-button {
  background-color: var(--wp--preset--color--black);
    border-width: 0;
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--nunito);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 700;
    line-height: inherit;
    padding-top: 1rem;
    padding-right: 2.25rem;
    padding-bottom: 1rem;
    padding-left: 2.25rem;
    margin-top: 1rem;
    text-decoration: none;
    text-decoration-thickness: auto;
    text-transform: uppercase;
  /* --arrow-size: 1.05em;
    --arrow-gap: .5em; */
    /* position: relative; */
    /* padding-right: calc(1.2em + var(--arrow-gap) + var(--arrow-size)); */
    border-radius: 9999px;
    cursor: pointer;
  }
  
  .sr-button:hover {
    background-color: var(--wp--preset--color--teal);
  }

  .wp-block-separator.is-style-thick-rounded.alignfull {
    margin: 2em auto!important;
    width: 100%;
    max-width: 100%;
  }

  .wpnbha.image-alignbehind .post-has-image .post-thumbnail::after {
  background: rgba(0,0,0,.25)!important;
  }


/* Paragraph: White BG style */
.is-style-white-bg {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    padding: var(--wp--preset--spacing--small, 1rem);
    border-radius: 0.35rem;
}

/* Ensure headings within pick up black text */
.is-style-white-bg h1,
.is-style-white-bg h2,
.is-style-white-bg h3,
.is-style-white-bg h4,
.is-style-white-bg h5,
.is-style-white-bg h6 {
    color: var(--wp--preset--color--black);
}

.resources-nav .wp-block-navigation-item.wp-block-navigation-link img {
  position: relative;
  opacity: .5;
}

.resources-nav.top-small-nav .wp-block-navigation-item.wp-block-navigation-link img {
  top: 0.2em;
  width: 20px;
  height: 17px;
}
.resources-nav.top-small-nav .wp-block-navigation-item.wp-block-navigation-link svg path {
  fill: var(--wp--preset--color--white);
}

.resources-nav.bottom-small-nav .wp-block-navigation-item.wp-block-navigation-link img {
  top: 0.2em; 
  margin-right: .1em
  /* width: 20px;
  height: 17px; */
}

.taxonomy-category.wp-block-post-terms a {
  background-color: var(--wp--preset--color--black);
  padding:.35em 1em;
  margin-left:.5em;
  color: var(--wp--preset--color--white);
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
}

.wp-block-post-date {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 700;
}

.hc-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem;
}
.hc-breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.hc-breadcrumbs a { text-decoration: none; }
.hc-breadcrumbs .current { opacity: .75; }
.hc-breadcrumbs .hc-bc-sep { opacity: .45; margin: 0 .25rem; }

/* Kill stray line breaks from Shortcode block output */
.wp-block-shortcode .hc-breadcrumbs br,
.hc-breadcrumbs br {
  display: none;
}
.hc-bc-home-icon, .style-svg {
  position: relative;
  top: .2em;
  padding-right: .1em;
}

/* Fallback */
:root {
  --cat-accent: var(--wp--preset--color--black);
}

/* Category → accent map */
body.category-get-funding { --cat-accent: var(--wp--preset--color--coral); }
body.category-supported-programs { --cat-accent: var(--wp--preset--color--blue); }
body.category-fund-planning-strategy { --cat-accent: var(--wp--preset--color--eggplant); }
body.category-resources-info { --cat-accent: var(--wp--preset--color--green); }
body.category-uncategorized { --cat-accent: var(--wp--preset--color--teal); }

.wp-block-post.category-get-funding { --cat-accent: var(--wp--preset--color--coral); }
.wp-block-post.category-supported-programs { --cat-accent: var(--wp--preset--color--blue); }
.wp-block-post.category-fund-planning-strategy { --cat-accent: var(--wp--preset--color--eggplant); }
.wp-block-post.category-resources-info { --cat-accent: var(--wp--preset--color--green); }
.wp-block-post.category-uncategorized { --cat-accent: var(--wp--preset--color--teal); } 

/* Headlines on category and single post screens only */
body[class*="category-"] h1,
body[class*="category-"] .entry-content h2,
body[class*="category-"] .entry-content h3 {
  color: var(--cat-accent)!important;
}

/* Category badges text only */
body[class*="category-"] .taxonomy-category a,
.wp-block-post[class*="category-"] .taxonomy-category a {
  background-color: var(--cat-accent);
    &:hover {
    opacity: .7;
  }
}

/* Breadcrumb link colors */
body[class*="category-"] .hc-breadcrumbs a {
  color: var(--wp--preset--color--black);
  border-bottom: 3px solid var(--cat-accent);
    &:hover {
    opacity: .7;
  }
}

/* Separator color */
body[class*="category-"] .entry-content .wp-block-separator,
body[class*="category-"] .entry-content  hr.wp-block-separator,
.wp-block-post[class*="category-"] hr.wp-block-separator{
  background-color: var(--cat-accent)!important;
}

/* Content links */
body[class*="category-"] .entry-content a,
body[class*="category-"] .post-content a,
.wp-block-post[class*="category-"] a.wp-block-post-excerpt__more-link {
  color: var(--cat-accent);
  &:hover {
    opacity: .7;
  }
}

.wp-block-post[class*="category-"] .news-column-feat-img {
  background-color: var(--cat-accent);
}

.archive figure.wp-block-post-featured-image iframe,
.page-id-90 figure.wp-block-post-featured-image iframe {
  max-width: 100%;
}

.single-video .wp-block-post-featured-image,
.single-video .wp-block-post-featured-image iframe {
    width: 100% !important;
    max-width: 100%;
}

.single-video .wp-block-post-featured-image {
    aspect-ratio: 16 / 9;
}
.single-video .wp-block-post-featured-image iframe {
    height: 100%;
}

.inline-image {
    position: relative;
    top: 6px;
}

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none!important;
  }
}

@media (min-width: 768px) {
  .hide-on-desktop {
    display: none!important;
  }
}