/* Humble Stories: WordPress adapters.
   Maps core blocks onto the Humble Stories components (components.css) and adds the page layouts. */

/* ---------- Base ---------- */
:root { color-scheme: light; }
body { background: var(--paper); color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--ink-muted); }
.wp-site-blocks { overflow-x: clip; }
.wp-block-image, .wp-block-post-featured-image { margin: 0; }
.wp-block-image img { height: auto; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hs-center { display: grid; justify-items: center; text-align: center; }
.hs-stack-24 { display: grid; gap: var(--space-6); align-content: start; }
.hs-stack-24 > .wp-block-buttons { margin-top: var(--space-2); }
.hs-band + .hs-section, .hs-band + .hs-ask-wrap { padding-top: var(--space-section); }
.hs-designed > :first-child.hs-section, .hs-main > .hs-section:first-child { padding-top: var(--space-section); }

/* ---------- Header (template part is the sticky element) ---------- */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 20; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.hs-header { position: relative; }
.hs-header-nav { display: flex; align-items: center; gap: var(--space-2); }
.hs-nav-wp { font-size: 14px; line-height: 20px; font-weight: 500; }
.hs-nav-wp .wp-block-navigation-item__content { color: var(--ink); text-decoration: none; padding: 14px var(--space-4); border-radius: var(--radius-sm); display: block; }
.hs-nav-wp .wp-block-navigation-item__content:hover { background: var(--paper-band); color: var(--ink); }
.hs-nav-wp .wp-block-navigation__container { gap: var(--space-1); }
.hs-header-cta { margin-left: var(--space-4); }
.hs-nav-wp .wp-block-navigation__responsive-container.is-menu-open { background: var(--paper); padding: var(--space-8) var(--gutter); }
.hs-nav-wp .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 700; padding: var(--space-3) 0; }
.hs-nav-wp .wp-block-navigation__responsive-container-open, .hs-nav-wp .wp-block-navigation__responsive-container-close { color: var(--ink); }
.hs-nav-wp .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
@media (max-width: 743px) {
  .hs-header-nav { flex-direction: row-reverse; gap: var(--space-3); }
  .hs-header-cta { margin-left: 0; }
  .hs-header-cta .wp-block-button__link { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
}

/* ---------- Buttons: default is ink; "Donate" style is marigold; "Light" is paper ---------- */
.wp-block-button .wp-block-button__link { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; height: var(--control-height); padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 0; text-decoration: none; white-space: nowrap; background: var(--ink); color: var(--on-ink); transition: background-color .15s ease; }
.wp-block-button .wp-block-button__link:hover { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); color: var(--on-ink); }
.wp-block-button.is-style-donate .wp-block-button__link { background: var(--marigold); color: var(--on-marigold); }
.wp-block-button.is-style-donate .wp-block-button__link:hover { background: var(--marigold-press); color: var(--on-marigold); }
.wp-block-button.is-style-light .wp-block-button__link { background: var(--paper); color: var(--ink); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hs-btn.hs-btn-donate:hover { color: var(--on-marigold); }

/* ---------- Paragraph and group styles ---------- */
.is-style-lead { font-size: 18px; line-height: 28px; }
.is-style-band { background: var(--paper-band); }

/* ---------- Hero polaroids (each is an Image block with the class hs-polaroid) ---------- */
.hs-wall .wp-block-image.hs-polaroid { background: var(--paper-raised); padding: 7px 7px 0; border-radius: 6px; box-shadow: 0 1px 2px rgb(34 31 28 / .08), 0 14px 30px -14px rgb(34 31 28 / .28); transform: rotate(var(--r)); }
.hs-wall .hs-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.hs-wall .hs-polaroid figcaption { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 30px; height: 30px; padding-inline: 2px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.hs-wall .hs-polaroid:not(:has(figcaption)) { padding-bottom: 22px; }
.hs-wall > :nth-child(1) { --x: 5%;  --y: 16%; --w: 176px; --r: -7deg; --k: 0; --d: 12s; --dx: -6px; --dy: 7px;  --tx: 80px; }
.hs-wall > :nth-child(2) { --x: 15%; --y: 62%; --w: 128px; --r: 5deg;  --k: 1; --d: 14s; --dx: 5px;  --dy: -8px; --tx: 80px; }
.hs-wall > :nth-child(3) { --x: 82%; --y: 8%;  --w: 184px; --r: 6deg;  --k: 2; --d: 16s; --dx: -6px; --dy: 7px;  --tx: -80px; }
.hs-wall > :nth-child(4) { --x: 74%; --y: 58%; --w: 140px; --r: -4deg; --k: 3; --d: 18s; --dx: 5px;  --dy: -8px; --tx: -80px; }
.hs-wall > :nth-child(5) { --x: 90%; --y: 64%; --w: 116px; --r: 9deg;  --k: 4; --d: 20s; --dx: -6px; --dy: 7px;  --tx: -80px; }
.hs-wall > :nth-child(6) { --x: 1%;  --y: 70%; --w: 112px; --r: -3deg; --k: 5; --d: 22s; --dx: 5px;  --dy: -8px; --tx: 80px; }
.hs-wall > :nth-child(n+7) { display: none; }
.js-motion .hs-wall .wp-block-image.hs-polaroid { animation: hs-toss-wp .9s cubic-bezier(.2,.8,.25,1.05) both, hs-drift var(--d, 14s) ease-in-out infinite alternate; animation-delay: calc(.15s + var(--k) * 110ms), calc(1.1s + var(--k) * 110ms); }
@keyframes hs-toss-wp { from { filter: opacity(0); transform: translate(var(--tx, 0px), 60px) rotate(calc(var(--r) * 3)) scale(.86); } to { filter: opacity(1); transform: rotate(var(--r)); } }
/* between phone and wide desktop only the two outer polaroids fit beside the text */
@media (max-width: 1279px) { .hs-wall > :nth-child(2), .hs-wall > :nth-child(4), .hs-wall > :nth-child(5), .hs-wall > :nth-child(6) { display: none; } }
@media (max-width: 743px) {
  .hs-wall > :nth-child(4) { display: block; }
  .hs-wall > :nth-child(n+5) { display: none; }
  .hs-wall .hs-polaroid figcaption { font-size: 11px; line-height: 22px; height: 22px; }
  .hs-wall .wp-block-image.hs-polaroid { padding: 5px 5px 0; }
  .hs-wall > :nth-child(3) { margin-top: 12px; }
}
.hs-hero-short { padding-bottom: var(--space-16); }

/* ---------- Film ---------- */
.wp-block-image.hs-film img, .wp-block-video.hs-film video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 30%); }
p.hs-film-credit { display: flex; }

/* ---------- Story cards (Query Loop of Stories) ---------- */
.hs-story-loop .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.hs-story-loop .wp-block-post { margin: 0; }
.hs-story-loop .hs-story { height: 100%; }
.hs-story .wp-block-post-featured-image { height: 100%; }
.hs-story .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hs-story:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.hs-story .wp-block-post-featured-image a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.hs-story .wp-block-post-featured-image a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
.hs-story .hs-story-place:empty, .hs-story .hs-story-name:empty { display: none; }
.hs-story .hs-story-name::after { content: ""; width: 16px; height: 16px; margin-left: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.hs-story:not(:has(img)) { background: var(--paper-band); }
.hs-pagination { margin-top: var(--space-12); gap: var(--space-4); font-weight: 600; }
#stories { scroll-margin-top: var(--header-height); }

/* ---------- Quote ---------- */
.hs-quote-block { display: grid; gap: var(--space-4); max-width: 30ch; }
.hs-center .hs-quote-block { justify-items: center; text-align: center; }
.hs-quote-block .quote { color: var(--ink); text-wrap: balance; }
.hs-quote-cite { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.hs-quote-cite strong, .hs-quote-cite b { color: var(--ink); font-weight: 600; }

/* ---------- Media cards ---------- */
.wp-block-image.hs-media { aspect-ratio: 4 / 3; }
.wp-block-image.hs-media img { width: 100%; height: 100%; object-fit: cover; }
.pg-card-text { display: grid; gap: 8px; padding-top: 16px; }

/* ---------- Page layouts ---------- */
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; align-items: start; }
.pg-split-form-first { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 80px; }
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.pg-list { display: grid; gap: 32px; }
.pg-list > div { display: grid; gap: 8px; }
.pg-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.pg-faq > div { display: grid; gap: 8px; }
.pg-care { margin: 0 auto; max-width: 640px; display: grid; gap: 24px; }
.pg-care-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: start; }
.pg-care-item svg { width: 24px; height: 24px; margin-top: 2px; }
.pg-care-item strong { color: var(--ink); font-weight: 600; }
.hs-donate-main { padding-bottom: var(--space-section); }
.hs-other-label { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
@media (max-width: 743px) {
  .pg-split, .pg-split-form-first, .pg-two, .pg-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- Story page ---------- */
.hs-story-head { padding: var(--space-16) 0 var(--space-12); }
.hs-story-head .hs-story-title { max-width: var(--width-headline); text-wrap: balance; }
.hs-story-section { padding-top: 0; }
.hs-story-body { width: min(var(--width-text), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: var(--space-6); }
.hs-story-body > .wp-block-embed, .hs-story-body > .wp-block-video, .hs-story-body > .hs-story-film { width: min(var(--width-content), 100vw - 2 * var(--gutter)); justify-self: center; margin: 0 0 var(--space-8); }
.hs-story-body .wp-block-embed__wrapper iframe, .hs-story-body .wp-block-embed iframe { border-radius: var(--radius-md); }
.hs-story-body .hs-quote-block { margin: var(--space-6) 0; }
.hs-story-body p:not([class]) { font-family: var(--font-serif); font-size: 18px; line-height: 30px; }

/* ---------- Plain pages and posts ---------- */
.hs-read-width { width: min(var(--width-text), 100% - 2 * var(--gutter)); }
.hs-page-title { margin-bottom: var(--space-8); text-wrap: balance; }
.hs-prose { display: grid; gap: var(--space-4); }
.hs-prose h2 { font-size: 28px; line-height: 1.2; margin-top: var(--space-6); }
.hs-prose h3 { font-size: 20px; line-height: 26px; margin-top: var(--space-4); }
.hs-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-12); }

/* ---------- Footer ---------- */
.hs-footer { margin: 0; }
.pg-foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.hs-foot-brand { display: grid; gap: 16px; align-content: start; }
.hs-foot-title { margin: 0 0 12px; color: var(--ink); font-weight: 600; }
.hs-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hs-foot-col a { color: var(--ink-muted); text-decoration: none; }
.hs-foot-col a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 743px) { .pg-foot { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Floating ask: not on the Donate page ---------- */
.page-slug-donate .hs-float { display: none; }
body .hs-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }