/* Chord & Canvas base: header, footer and helpers used on every page. Colors come from theme.json presets. */

:root { --cc-gutter: 1.5rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; scroll-padding-top: var(--wp--custom--header-height); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wp-site-blocks > *, .wp-site-blocks .wp-block-post-content > * { margin-block: 0; }
/* Plain editor content (not patterns) keeps a normal reading rhythm, since the global block gap is 0 */
.wp-block-post-content > :where(p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, figure, pre, table, .wp-block-buttons) { margin-block: 0 1.5rem; }
:where(.wp-site-blocks) { padding-inline: 0; }
img, video { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 2px; }
.has-navy-background-color :focus-visible,
.has-navy-deep-background-color :focus-visible,
.has-navy-footer-background-color :focus-visible { outline-color: var(--wp--preset--color--gold-light); }

/* Text measure and visually hidden helper */
.cc-measure { max-width: var(--wp--custom--measure); }
.cc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Script accent inside a heading: <span class="cc-script">Community</span> */
.cc-script { font-family: var(--wp--preset--font-family--script); font-weight: 400; color: var(--wp--preset--color--gold); letter-spacing: 0; text-transform: none; }

/* ---- Header (flat): plain cream bar, 1px line, centered logo. The arc variant adds header-arc.css ---- */
.wp-site-blocks > .wp-block-template-part:has(.cc-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > .wp-block-template-part:has(.cc-header) { top: var(--wp-admin--admin-bar--height, 0px); }
.cc-header { background: var(--wp--preset--color--parchment); box-shadow: inset 0 -1px 0 var(--wp--preset--color--line); position: relative; transition: transform .25s ease; }
.cc-header.is-hidden { transform: translateY(-100%); }
.cc-header__inner { max-width: 1200px !important; margin-inline: auto !important; padding-inline: 1.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--wp--custom--header-height-mobile); gap: 1rem; }
.cc-header .cc-header__inner > * { margin: 0 !important; }
.cc-header__left { justify-self: start; }
.cc-header .cc-header__right { justify-self: end; display: flex; align-items: center; gap: 1.5rem; }
.cc-header__right > *, .cc-header__left > * { margin: 0; }
.cc-header .wp-block-navigation { white-space: nowrap; }
.cc-header .wp-block-navigation__container { gap: 1.5rem; flex-wrap: nowrap; }
.cc-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 0; line-height: 1.3846; color: var(--wp--preset--color--muted); transition: color .2s; }
.cc-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }
.cc-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--wp--preset--color--ink); font-weight: 600; border-bottom: 2px solid var(--wp--preset--color--gold); padding-bottom: .25rem; }
.wp-block-navigation.cc-nav-desktop { display: none; }
.cc-header .cc-donate .wp-block-button__link { min-height: 2.5rem; padding-inline: 1rem; }
@media (min-width: 1280px) { .cc-header .cc-donate .wp-block-button__link { min-height: 3rem; padding-inline: 1.75rem; } }
.cc-logo { margin: 0; line-height: 0; }
.cc-logo a { display: inline-block; line-height: 0; }
.cc-logo img { display: block; width: auto; height: 2.5rem; }
.cc-footer .cc-logo img { height: 5.5rem; margin-inline: auto; }
@media (min-width: 1100px) {
  .cc-header__inner { min-height: var(--wp--custom--header-height); }
}
@media (min-width: 1280px) {
  .wp-block-navigation.cc-nav-desktop { display: flex; }
  .wp-block-navigation.cc-nav-mobile { display: none; }
  .cc-header--flat .cc-logo img { height: 3.75rem; }
  
}

/* ---- Footer ---- */
.cc-footer a { color: var(--wp--preset--color--on-navy-muted); text-decoration: none; transition: color .2s; }
.cc-footer a:hover { color: var(--wp--preset--color--on-navy); text-decoration: underline; }

/* ---- Forms (shared by custom form blocks) ---- */
.cc-field { display: block; width: 100%; min-height: 3rem; padding: 0 1rem; background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--field-border); border-radius: 0; font: inherit; color: var(--wp--preset--color--ink); }
.cc-field:focus-visible { outline: 2px solid var(--wp--preset--color--navy); outline-offset: 1px; border-color: var(--wp--preset--color--navy); }

/* ---- Shared section parts (patterns) ---- */
.cc-section { padding-block: 6rem; padding-inline: var(--cc-gutter); }
.cc-sechead.cc-sechead { text-align: center; margin-block: 0 4rem; }
.cc-sechead.cc-sechead > * { margin-block: 0; }
.cc-sechead.cc-sechead .is-style-eyebrow { margin-bottom: .5rem; line-height: 1.3333; }
.cc-sechead h2 { text-transform: none; }
.cc-sechead--narrow.cc-sechead { max-width: 36rem; margin-inline: auto; }
.cc-sechead .cc-rule, .cc-rule { width: 3rem; height: 0; margin: 1rem auto 0 !important; border: 0 !important; border-top: 1px solid var(--wp--preset--color--gold-deep) !important; opacity: 1 !important; }
.cc-tile-label { font-family: var(--wp--preset--font-family--label); }

/* ---- Mobile menu overlay (core Navigation block): big serif links, the same navy as the template ---- */
.cc-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem var(--cc-gutter) 2rem; }
.cc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding-block: .6rem; color: var(--wp--preset--color--on-navy); }
.cc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold-light); }
.cc-header .wp-block-navigation__responsive-container-open, .cc-header .wp-block-navigation__responsive-container-close { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.cc-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }

/* The menu slides in from the left (the core overlay only fades). Reduced motion: no animation. */
@keyframes cc-menu-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.cc-header .wp-block-navigation__responsive-container.is-menu-open { animation: cc-menu-slide .34s cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .cc-header .wp-block-navigation__responsive-container.is-menu-open { animation: none; } }

/* ---- Sticky mobile donate bar (in the footer part). Hidden on the Give and Thank you pages. ---- */
.cc-donate-bar.wp-block-group { display: none; }
@media (max-width: 781px) {
  .cc-donate-bar.wp-block-group { display: flex; align-items: center; position: fixed; inset: auto 0 0 0; z-index: 40; gap: 1rem; padding: .75rem var(--cc-gutter); background: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); border-top: 1px solid var(--wp--preset--color--navy-line); }
  .cc-donate-bar .cc-donate-bar__text { margin: 0; font: 600 .75rem/1.3 var(--wp--preset--font-family--label); letter-spacing: .1em; text-transform: uppercase; }
  .cc-donate-bar .wp-block-buttons { margin: 0; }
  .cc-donate-bar .wp-block-button__link { padding: .8rem 1.25rem; }
  body { padding-bottom: 4.5rem; }
  .cc-slug-give .cc-donate-bar, .cc-slug-thank-you .cc-donate-bar.wp-block-group { display: none; }
  .cc-slug-give, .cc-slug-thank-you { padding-bottom: 0; }
}

/* ---- Footer: logo, tagline and social icons on one row, then the links ---- */
.cc-footer .cc-footer__top { gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); }
.cc-footer .cc-footer__brand .cc-logo { margin: 0; }
.cc-footer .cc-footer__social .cc-social { justify-content: flex-end; }
.cc-footer .cc-footer__nav { gap: .5rem 1.75rem; margin-block: var(--wp--preset--spacing--30) 1.25rem; font: 500 .75rem/1.4 var(--wp--preset--font-family--label); letter-spacing: .14em; text-transform: uppercase; }
.cc-footer .cc-footer__nav a { color: var(--wp--preset--color--on-navy-muted); }
.cc-footer .cc-footer__nav a:hover { color: var(--wp--preset--color--on-navy); }
.cc-footer .cc-footer__legal { margin: 0; }
@media (max-width: 781px) {
  .cc-footer .cc-footer__brand .cc-logo, .cc-footer .cc-footer__brand .cc-logo figure { margin-inline: auto; text-align: center; }
  .cc-footer .cc-footer__social .cc-social { justify-content: center; }
}

/* Section heading, label style (Who We Serve, Gallery): small serif caps with wide tracking. */
.cc-sechead--label h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; color: var(--wp--preset--color--ink); }

/* ---- Footer (template FTR-01): centered stack, then legal row ---- */
.cc-footer { text-align: center; }
.cc-footer > * { margin-block: 0; }
.cc-footer .cc-logo { margin: 0 auto 1.5rem; }
.cc-footer .cc-footer__tagline { width: fit-content; max-width: 36rem; margin: 0 auto 3rem; line-height: 1.625; letter-spacing: .18em; }
.cc-footer .cc-social { justify-content: center; margin-bottom: 3rem; }
.cc-footer .cc-footer__rule { width: 4rem; margin: 0 auto 1.5rem !important; opacity: 1; border: 0; border-top: 1px solid var(--wp--preset--color--navy-line); background: none; height: 0; }
.cc-footer .cc-footer__bottom { text-align: left; align-items: center; padding-top: .5rem; }
.cc-footer .cc-footer__legal { margin: 0; }
.cc-footer .cc-footer__nav { margin: 0; gap: 1.5rem; font: 500 .8125rem/1.4 var(--wp--preset--font-family--label); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 781px) { .cc-footer .cc-footer__bottom { flex-direction: column; text-align: center; } }

/* ---- Buttons: 48px tall like the template (h-12), label centered ---- */
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding-block: 0; box-sizing: border-box; text-align: center; }

/* ---- Icons (Material Symbols as masks, colored by the text color). Class `cc-i-<name>` sets the glyph, see icons.css ---- */
.cc-ico::before, .cc-ico-after::after, .cc-has-icon::before { content: ""; display: inline-block; flex: none; width: var(--cc-icon-size, 1.5rem); height: var(--cc-icon-size, 1.5rem); background: currentColor; -webkit-mask: var(--cc-icon) center / contain no-repeat; mask: var(--cc-icon) center / contain no-repeat; vertical-align: middle; }

/* ---- Watercolor wash at a section edge (template: wash-l, wash-r). A section with class cc-has-wash holds an Image block cc-wash cc-wash--l or --r. ---- */
:is(.cc-has-wash, .wp-block-group.is-style-wash) { position: relative; overflow: hidden; isolation: isolate; }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash { position: absolute; top: 0; bottom: 0; z-index: -1; margin: 0 !important; pointer-events: none; }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--l { left: 0; width: min(24%, 340px); opacity: .7; transform: scaleX(-1); }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--l img { object-position: right top; }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--r { right: 0; width: min(32%, 460px); }
:is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--r img { object-position: right bottom; }
@media (max-width: 767px) { :is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--l { width: 40%; opacity: .45; } :is(.cc-has-wash, .wp-block-group.is-style-wash) > .cc-wash--r { width: 48%; opacity: .55; } }

:root { --cc-icon-add: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z%22%2F%3E%3C%2Fsvg%3E"); --cc-icon-remove: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M200-440v-80h560v80H200Z%22%2F%3E%3C%2Fsvg%3E"); }

/* Mobile: buttons never wrap their label */
.wp-block-button__link { white-space: nowrap; }
.cc-p-hero-01 .wp-block-button__link, .cc-fev__btns .wp-block-button__link { white-space: nowrap; }

/* Footer: 96px above and below like the template, square 40px social tiles in gold */
.cc-footer.cc-footer { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.cc-footer .cc-social a { box-sizing: border-box; color: var(--wp--preset--color--gold-light); }
.cc-footer .cc-social a:hover { color: var(--wp--preset--color--on-navy); }
@media (max-width: 781px) { .cc-footer.cc-footer { padding-top: 4rem !important; padding-bottom: 4rem !important; } }

/* Outline buttons: on hover the fill goes navy and the label turns light, in every pattern */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background: var(--wp--preset--color--navy) !important; border-color: var(--wp--preset--color--navy) !important; color: var(--wp--preset--color--on-navy) !important; }
.wp-block-button.is-style-outline .wp-block-button__link { transition: background-color .2s, color .2s, border-color .2s; }

/* Watercolor wash placement: pick "CC Watercolor on the left / right" in the image block's Styles panel. The image itself is replaced
   from the Media Library as usual. Works inside any group set to "CC Section with watercolor" (or a CC section that already has one). */
.wp-block-image.cc-wash.cc-wash.is-style-wash-right { left: auto; right: 0; width: min(32%, 460px); opacity: 1; transform: none; }
.wp-block-image.cc-wash.cc-wash.is-style-wash-right img { object-position: right bottom; }
.wp-block-image.cc-wash.cc-wash.is-style-wash-left { right: auto; left: 0; width: min(24%, 340px); opacity: .7; transform: scaleX(-1); }
.wp-block-image.cc-wash.cc-wash.is-style-wash-left img { object-position: right top; }