/* WordPress glue for the Community Works design system.
   Everything here exists because WordPress has no React <StrandStyle>
   and no <Button variant> — the same decisions, expressed as classes
   editors can pick from the block sidebar. */

/* ---------- Strand scopes ----------
   The design system's components read four custom properties: --strand,
   --strand-ink, --strand-on, --strand-tint. In React, <StrandStyle strand="skills">
   reassigns them. Here, one class per strand does the same job. Put it on the
   outermost group of a section, or on a single card, and everything inside
   picks up that strand's colour without any per-element colour choices. */
.cw-strand-children{--strand:var(--strand-children);--strand-ink:var(--strand-children-ink);--strand-on:var(--strand-children-on);--strand-tint:var(--strand-children-tint)}
.cw-strand-wellbeing{--strand:var(--strand-wellbeing);--strand-ink:var(--strand-wellbeing-ink);--strand-on:var(--strand-wellbeing-on);--strand-tint:var(--strand-wellbeing-tint)}
.cw-strand-older{--strand:var(--strand-older);--strand-ink:var(--strand-older-ink);--strand-on:var(--strand-older-on);--strand-tint:var(--strand-older-tint)}
.cw-strand-skills{--strand:var(--strand-skills);--strand-ink:var(--strand-skills-ink);--strand-on:var(--strand-skills-on);--strand-tint:var(--strand-skills-tint)}
.cw-strand-nursery,.strand-nursery{--strand:var(--strand-nursery);--strand-ink:var(--strand-nursery-ink);--strand-on:var(--strand-nursery-on);--strand-tint:var(--strand-nursery-tint)}
/* .strand-* classes are added by WordPress itself to every post in a Query Loop
   that has a Strand term, so activity cards colour themselves. */
.strand-children{--strand:var(--strand-children);--strand-ink:var(--strand-children-ink);--strand-on:var(--strand-children-on);--strand-tint:var(--strand-children-tint)}
.strand-wellbeing{--strand:var(--strand-wellbeing);--strand-ink:var(--strand-wellbeing-ink);--strand-on:var(--strand-wellbeing-on);--strand-tint:var(--strand-wellbeing-tint)}
.strand-older{--strand:var(--strand-older);--strand-ink:var(--strand-older-ink);--strand-on:var(--strand-older-on);--strand-tint:var(--strand-older-tint)}
.strand-skills{--strand:var(--strand-skills);--strand-ink:var(--strand-skills-ink);--strand-on:var(--strand-skills-on);--strand-tint:var(--strand-skills-tint)}

/* ---------- The five-colour strip ----------
   Fixed order: children, wellbeing, older, skills, nursery. Never reordered,
   recoloured or shortened. Printed once at the top of every page by
   cw_five_colour_strip() in functions.php. */
.cw-strip{display:flex;height:6px;width:100%}
.cw-strip i{flex:1}
.cw-strip i:nth-child(1){background:var(--strand-children)}
.cw-strip i:nth-child(2){background:var(--strand-wellbeing)}
.cw-strip i:nth-child(3){background:var(--strand-older)}
.cw-strip i:nth-child(4){background:var(--strand-skills)}
.cw-strip i:nth-child(5){background:var(--strand-nursery)}

/* ---------- Bands ----------
   80px of vertical air between sections, 48px on small screens. A band is the
   only thing allowed to carry a tint background, and no more than two tinted
   bands per page. */
.cw-band{padding-block:var(--band-y)}
.cw-band--tight{padding-block:var(--band-y-tight)}
.cw-band--tint{background:var(--strand-tint)}
.cw-band--paper{background:var(--surface-page-alt)}
.cw-band--ink{background:var(--surface-ink);color:var(--text-inverse)}
.cw-band--ink :is(h1,h2,h3,h4){color:var(--text-inverse)}
@media (max-width:900px){.cw-band{padding-block:var(--band-y-tight)}}

/* ---------- Grids ----------
   Core's grid layout with a minimum column width does what the design system's
   tile grid does: a 220px floor so a long strand name cannot inflate a column. */
.cw-grid-tiles{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cw-grid-cards{display:grid;gap:var(--gap-grid);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- Strand tile ----------
   The homepage "where would you like to go?" tile. A whole-tile link, so the
   hover state belongs to the tile and not to the words inside it. */
.cw-tile{position:relative;display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-card);border:var(--border-regular) solid var(--border-subtle);border-top:6px solid var(--strand);border-radius:var(--radius-lg);padding:var(--pad-card);text-decoration:none;transition:border-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
:where(.cw-tile) :where(h2,h3,h4){color:var(--text-strong);margin:0}
.cw-tile p{font:var(--type-small);color:var(--text-body);margin:0}
.cw-tile__more{margin-top:auto;font:var(--weight-bold) var(--size-small)/1 var(--font-body);color:var(--strand-ink);text-decoration:none}
a.cw-tile:hover,.cw-tile:has(a:hover){border-color:var(--strand);transform:var(--lift-hover);box-shadow:var(--shadow-soft)}
a.cw-tile:hover .cw-tile__more{text-decoration:underline}

/* ---------- Links inside strand-coloured affordances ----------
   theme.json styles links with a rule on the anchor itself, which outranks the
   strand colour inherited from the paragraph. Without this, the "See what's on"
   link on a magenta tile renders in Skills blue. The affordance takes its
   colour from the strand, as it does in the design system. */
.cw-tile__more a,.cw-card__foot a,.cw-quote__by a{color:inherit;text-decoration:none}
.cw-tile__more a:hover,.cw-card__foot a:hover,.cw-quote__by a:hover{color:inherit;text-decoration:underline}

/* ---------- Block styles for core/button ----------
   Registered in functions.php so they appear as named styles in the sidebar.
   Orange is the action colour: one primary button per view. */
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--hit-min);border-radius:var(--radius-pill);border:var(--border-regular) solid transparent;font:var(--weight-bold) var(--size-body)/1 var(--font-body);text-decoration:none;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.wp-block-button .wp-block-button__link:hover{transform:var(--lift-hover)}
.wp-block-button .wp-block-button__link:active{transform:scale(var(--press-scale))}
.wp-block-button.is-style-cw-primary .wp-block-button__link{background:var(--action-primary);color:var(--action-primary-on)}
.wp-block-button.is-style-cw-primary .wp-block-button__link:hover{background:var(--action-primary-hover);color:var(--action-primary-on)}
.wp-block-button.is-style-cw-secondary .wp-block-button__link{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-strong)}
.wp-block-button.is-style-cw-secondary .wp-block-button__link:hover{background:var(--cw-ink);color:var(--text-inverse)}
.wp-block-button.is-style-cw-strand .wp-block-button__link{background:var(--strand);color:var(--strand-on)}
.wp-block-button.is-style-cw-strand .wp-block-button__link:hover{background:var(--strand-ink);color:var(--cw-paper)}
.wp-block-button.is-style-cw-ghost .wp-block-button__link{background:transparent;color:var(--strand-ink);padding-inline:var(--space-3)}
.wp-block-button.is-style-cw-ghost .wp-block-button__link:hover{background:var(--strand-tint);color:var(--strand-ink)}
.wp-block-buttons{gap:var(--gap-inline)}

/* ---------- Block styles for core/image ----------
   Rounded for features and heroes, Tile for grids. The pebble is not used on
   the website. */
.wp-block-image.is-style-cw-rect img{border-radius:var(--radius-lg)}
.wp-block-image.is-style-cw-tile img{border-radius:var(--radius-md)}
.wp-block-image.is-style-cw-framed img{box-shadow:0 0 0 var(--border-chunky) var(--strand)}

/* ---------- Block style for core/group: the callout ----------
   The bordered box is practical detail — times, prices, eligibility, phone
   numbers. A pill is a label. Marketing copy belongs in neither. */
.wp-block-group.is-style-cw-callout{border-radius:var(--radius-lg);padding:var(--pad-card);background:var(--surface-card);border:var(--border-regular) solid var(--strand);color:var(--text-body)}
:where(.wp-block-group.is-style-cw-callout) :where(h2,h3,h4){color:var(--text-strong);margin:0 0 var(--space-2)}
.wp-block-group.is-style-cw-callout-tint{border-radius:var(--radius-lg);padding:var(--pad-card);background:var(--strand-tint);color:var(--strand-ink)}
:where(.wp-block-group.is-style-cw-callout-tint) :where(h2,h3,h4){margin:0 0 var(--space-2)}
.wp-block-group.is-style-cw-callout-tint :is(h2,h3,h4){color:var(--strand-ink)}
.wp-block-group.is-style-cw-card{background:var(--surface-card);border:var(--border-regular) solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--pad-card)}

/* ---------- Block style for core/paragraph: the pill ----------
   Labels only: category, age range, status, day. Up to about 24 characters.
   Never a heading, never a paragraph of prose. */
.wp-block-group.is-style-cw-pill,p.is-style-cw-pill{display:inline-flex;align-items:center;gap:var(--space-2);width:auto;border-radius:var(--radius-pill);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:7px var(--space-4);margin:0;background:var(--strand-tint);color:var(--strand-ink)}
p.is-style-cw-pill-strand{display:inline-flex;align-items:center;border-radius:var(--radius-pill);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:7px var(--space-4);margin:0;background:var(--strand);color:var(--strand-on)}

/* ---------- Eyebrow ----------
   The only letter-spaced text in the system, alongside the pill. */
p.is-style-cw-eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--strand-ink);margin:0 0 var(--space-3)}

/* ---------- Measure ----------
   Body text caps at 62 characters. Applied by hand because WordPress has no
   concept of a reading measure. */
.cw-measure{max-width:var(--measure-body)}
.cw-lead{font:var(--type-lead);color:var(--text-body);max-width:var(--measure-body)}

/* ---------- Focus ----------
   3px solid blue, 2px offset, on every interactive element. Never removed. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--border-chunky) solid var(--focus-ring);outline-offset:2px}

/* ---------- Site header ----------
   parts/header.html. Same lockup as SiteHeader: logomark, name, strapline, then
   navigation pills and one Donate button. The strip above it is printed by
   functions.php, so it cannot be deleted in the Site Editor. */
.cw-site-header{background:var(--surface-card);border-bottom:var(--border-regular) solid var(--border-subtle)}
.cw-site-header__bar{max-width:var(--page-max);margin:0 auto;padding:var(--space-4) var(--page-gutter);gap:var(--space-8)}
.cw-site-header__mark{gap:var(--space-3);flex:none}
.cw-site-header__mark .wp-block-site-logo img{height:44px;width:auto}
.cw-site-header__name{gap:2px}
.cw-site-header .wp-block-site-title{font:var(--weight-bold) 1.375rem/1 var(--font-display);letter-spacing:-0.01em;margin:0}
.cw-site-header .wp-block-site-title a{color:var(--text-strong);text-decoration:none}
.cw-site-header .wp-block-site-tagline{font:var(--weight-regular) 0.75rem/1 var(--font-body);color:var(--text-muted);margin:0}
.cw-site-header__nav{gap:var(--space-3)}
.cw-site-header .wp-block-navigation{gap:var(--space-1)}
.cw-site-header .wp-block-navigation-item__content{font:var(--weight-semibold) var(--size-small)/1 var(--font-body);color:var(--text-strong);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);text-decoration:none}
.cw-site-header .wp-block-navigation-item__content:hover{background:var(--cw-paper-warm);text-decoration:none}
.cw-site-header .current-menu-item>.wp-block-navigation-item__content,.cw-site-header .wp-block-navigation-item__content[aria-current="page"]{background:var(--strand-tint);color:var(--strand-ink)}
.cw-site-header .wp-block-navigation__responsive-container.is-menu-open{background:var(--surface-card);padding:var(--space-8) var(--page-gutter)}
.cw-site-header .is-menu-open .wp-block-navigation-item__content{font-size:var(--size-lead);padding:var(--space-4)}
.cw-site-header .wp-block-navigation__responsive-container-open,.cw-site-header .wp-block-navigation__responsive-container-close{min-width:var(--hit-min);min-height:var(--hit-min);align-items:center;justify-content:center}
.cw-btn-sm .wp-block-button__link{min-height:40px;padding:10px 18px;font-size:var(--size-small)}
@media (max-width:900px){.cw-site-header__bar{gap:var(--space-4)}.cw-site-header .wp-block-site-tagline{display:none}}
@media (max-width:480px){.cw-site-header__nav .wp-block-buttons{display:none}}
/* Menu icon on mobile only. Core's Navigation stylesheet does this, but some
   caching and "remove unused CSS" plugins drop it for logged-out visitors,
   which puts the hamburger on desktop. Restated here so it can't go missing. */
@media (min-width:600px){
.cw-site-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:none}
.cw-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:block;position:relative;inset:auto;width:100%;z-index:auto;background:inherit}
.cw-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{display:none}
.cw-site-header .wp-block-navigation__container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
}
@media (max-width:599px){.cw-site-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none}}

/* ---------- Site footer ----------
   parts/footer.html reuses the design system's .cw-footer classes. Core adds a
   block gap between groups; the footer grid owns its own spacing. */
.cw-footer{margin-block-start:0}
/* The five-colour strip again, across the top edge of the footer, so the page
   opens and closes on it. Drawn by CSS, so it can't be deleted in the Site Editor. */
.cw-footer::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--strand-children) 0 20%,var(--strand-wellbeing) 20% 40%,var(--strand-older) 40% 60%,var(--strand-skills) 60% 80%,var(--strand-nursery) 80% 100%)}
.cw-footer :where(p,ul,h4){margin-block-start:0}
.cw-footer__mark{margin:0}
.cw-footer__address{color:#d5d6d9;font:var(--type-small)}
.cw-footer__legal p{margin:0;font:var(--type-small);color:#c9cacd}
@media (max-width:900px){.cw-footer__inner{grid-template-columns:1fr}}

/* ---------- Templates ----------
   Full-width bands sit flush against each other; no block gap between them,
   and none between the header, main and footer (core adds 24px there, on the
   template-part wrapper rather than on .cw-footer). */
:root .wp-site-blocks>*{margin-block-start:0;margin-block-end:0}
.wp-block-post-content>:is(.alignfull,.cw-band),.wp-block-post-content>:is(.alignfull,.cw-band)+*{margin-block-start:0}
.cw-main{margin-block-start:0}
.cw-page-head{padding-block-end:var(--space-8)}
.cw-band--flush-top{padding-block-start:0}
.cw-main>.wp-block-post-content>.alignfull:first-child{margin-block-start:0}
.cw-search .wp-block-search__input{min-height:var(--hit-min);border:var(--border-regular) solid var(--border-strong);border-radius:var(--radius-pill);padding:0 var(--space-5);font:var(--type-body)}
.cw-search .wp-block-search__button{border-radius:var(--radius-pill);background:var(--action-primary);color:var(--action-primary-on);font-weight:var(--weight-bold);border:0;padding:0 var(--space-6)}
.wp-block-query-pagination a,.wp-block-query-pagination .current{display:inline-flex;align-items:center;justify-content:center;min-width:var(--hit-min);min-height:var(--hit-min);border-radius:var(--radius-pill);text-decoration:none;font-weight:var(--weight-semibold)}
.wp-block-query-pagination .current{background:var(--strand-tint);color:var(--strand-ink)}

/* ---------- Arrow on buttons and links ----------
   Core buttons have no icon setting. Type cw-arrow into Advanced → Additional
   CSS class(es) on a Button, or on a Paragraph holding a link, and an arrow is
   drawn after the text in the text colour. */
.cw-arrow .wp-block-button__link::after,.cw-arrow>a::after,a.cw-arrow::after,p.cw-arrow:not(:has(a))::after{content:"";display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:url(icons/arrow-right.svg) center/contain no-repeat;mask:url(icons/arrow-right.svg) center/contain no-repeat;transition:transform var(--duration-base) var(--ease-out)}
.cw-arrow>a,a.cw-arrow{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none}
.cw-arrow>a:hover,a.cw-arrow:hover{text-decoration:underline}
.cw-arrow .wp-block-button__link:hover::after,.cw-arrow>a:hover::after,.cw-lift:hover .cw-arrow::after,.cw-lift:hover .cw-arrow>a::after{transform:translateX(3px)}

/* ---------- Hover lift ----------
   Type cw-lift into Additional CSS class(es) on any Group (strand tiles, cards,
   Query Loop cards). The whole card lifts, and a link inside it covers the
   card so the whole card is clickable. */
.cw-lift{position:relative;overflow:hidden;transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}
.cw-lift:hover{transform:var(--lift-hover);box-shadow:var(--shadow-soft)}
.cw-lift:is(.has-border-color,[style*="border"]):hover{border-color:var(--strand)!important}
.cw-lift :is(h2,h3,h4) a::before,.cw-lift>.cw-arrow:last-child a::before{content:"";position:absolute;inset:0;z-index:1}
.cw-lift :is(h2,h3,h4) a{text-decoration:none;color:inherit}
.cw-lift :is(h2,h3,h4) a:hover{text-decoration:underline}
.cw-lift .wp-block-post-featured-image{margin:0;width:100%}
.cw-lift>.cw-arrow:last-child,.cw-lift .wp-block-read-more{margin-top:auto}
.cw-lift>.wp-block-group:last-child{flex:1}
.wp-block-post-template>li{display:flex}.wp-block-post-template>li>.cw-lift{width:100%}
.cw-lift .wp-block-post-featured-image img{display:block}

/* ---------- Strand colours from the post's Strand term ----------
   In a Query Loop, blocks with these classes read the colour of the post's
   strand. cw-bar-top = 6px bar across the card; cw-ink = text in the strand's
   text colour; cw-tagpill = tinted pill (Post Terms block); cw-when, cw-where,
   cw-who, cw-cost = the clock, map-pin, people and price-tag icons before activity facts. */
.cw-bar-top{border-top:6px solid var(--strand)!important}
.cw-ink,.cw-ink a{color:var(--strand-ink)!important}
.cw-tagpill a{display:inline-flex;border-radius:var(--radius-pill);font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;padding:7px var(--space-4);background:var(--strand-tint);color:var(--strand-ink);text-decoration:none}
.cw-tagpill .wp-block-post-terms__separator{display:none}
:is(.cw-when,.cw-where,.cw-who,.cw-cost){display:flex;align-items:center;gap:var(--space-2);margin:0}
:is(.cw-when,.cw-where,.cw-who,.cw-cost)::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--cw-i) center/contain no-repeat;mask:var(--cw-i) center/contain no-repeat}
.cw-when{--cw-i:url(icons/clock.svg)}.cw-where{--cw-i:url(icons/map-pin.svg)}.cw-who{--cw-i:url(icons/users.svg)}.cw-cost{--cw-i:url(icons/tag.svg)}
:is(.cw-when,.cw-where,.cw-who,.cw-cost):empty{display:none}

/* ---------- Staff cards ----------
   patterns-pages/team-staff.php. The photo sits on the person's strand tint
   (Strand panel on the person; Skills blue if none). */
.wp-block-post-template>li>.cw-staff-card{width:100%}
.cw-staff-card{background:var(--surface-card);border:var(--border-regular) solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.cw-staff-card__photo{margin:0;width:100%;background:var(--strand-tint);padding:var(--space-6) var(--space-6) 0;box-sizing:border-box}
.cw-staff-card__photo img{display:block}
.cw-staff-card__body{padding:var(--pad-card)}
.cw-staff-card__body>*{margin:0}
.cw-staff-card__role{font-weight:var(--weight-bold)}
.cw-staff-card .wp-block-post-excerpt__excerpt{margin:0;font:var(--type-small)}
.cw-person__name{margin:0;font-weight:var(--weight-bold);color:var(--text-strong)}

/* ---------- Partner logos ---------- */
.cw-logos .wp-block-post-featured-image img{height:64px;width:auto;max-width:180px;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}
.cw-logos .wp-block-post-featured-image a:hover img{filter:none;opacity:1}