/* Where Friends Grow: the small global stylesheet. Tokens come from theme.json (the --wp--preset-- and --wp--custom-- variables). */

:root {
	/* Short names for the tokens the hand-written CSS uses most */
	--wfg-bg: var(--wp--preset--color--bg);
	--wfg-cream: var(--wp--preset--color--cream);
	--wfg-primary: var(--wp--preset--color--primary);
	--wfg-primary-2: var(--wp--preset--color--primary-2);
	--wfg-on-primary: var(--wp--preset--color--on-primary);
	--wfg-accent: var(--wp--preset--color--accent);
	--wfg-on-accent: var(--wp--preset--color--on-accent);
	--wfg-pop: var(--wp--preset--color--pop);
	--wfg-soft: var(--wp--preset--color--soft);
	--wfg-ink: var(--wp--preset--color--ink);
	--wfg-muted: var(--wp--preset--color--muted);
	--wfg-line: var(--wp--preset--color--line);
	--wfg-font-body: var(--wp--preset--font-family--body);
	--wfg-font-hero: var(--wp--preset--font-family--hero);
	--wfg-font-display: var(--wp--preset--font-family--display);
	--wfg-gutter: var(--wp--custom--gutter);
	--wfg-pill: var(--wp--custom--radius--pill);
	/* The faint leaf pattern (a nod to the NPLB site), used as a mask so it takes any colour */
	--wfg-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 46c8-17 30-19 36-6-9 15-29 17-36 6zM20 46l32-6'/%3E%3Cpath d='M92 104c3-17 22-27 32-18-5 17-24 25-32 18zM94 104l28-16'/%3E%3Cpath d='M100 18v20M100 38c-8-9-17-7-19 0M100 38c8-9 17-7 19 0'/%3E%3Cpath d='M28 104c6 0 9 4 9 9s-4 9-9 9-9-4-9-9'/%3E%3Ccircle cx='64' cy='80' r='2.5'/%3E%3C/svg%3E");
	/* The hand-drawn underline */
	--wfg-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13C30 6 55 15 82 10S140 5 168 11C180 13 190 9 197 7' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	/* The torn paper edges between blocks: three shapes so they don't repeat */
	--wfg-tear-h: clamp(14px, 2vw, 28px);
	--wfg-tear-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 15L33 14L61 8L93 25L127 29L149 24L182 8L208 11L230 8L244 18L274 8L289 9L306 19L339 5L366 28L392 10L425 22L452 25L470 21L499 8L515 27L535 8L561 21L595 16L611 26L631 16L652 18L678 12L697 15L721 12L753 11L788 16L813 8L839 9L869 18L895 14L909 15L926 21L952 21L982 17L999 20L1019 26L1035 17L1068 26L1102 25L1125 9L1156 15L1173 5L1195 24L1220 23L1246 21L1270 8L1297 27L1330 18L1358 15L1380 23L1408 26L1434 27L1440 13V40H0Z'/%3E%3C/svg%3E");
	--wfg-tear-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18L26 25L52 21L87 25L106 16L129 9L154 13L172 26L205 9L226 22L259 20L284 19L312 5L332 7L352 5L369 25L388 13L405 24L434 24L453 27L468 25L501 26L522 14L557 26L575 30L592 26L620 18L637 15L660 9L685 29L699 9L719 11L734 9L761 7L775 8L805 5L835 17L859 19L875 15L889 27L907 11L924 12L954 26L978 22L1002 10L1032 16L1058 27L1072 11L1093 14L1121 11L1153 27L1170 25L1190 26L1204 26L1222 13L1253 8L1272 16L1304 17L1319 8L1350 26L1365 22L1395 13L1415 14L1439 27L1440 21V40H0Z'/%3E%3C/svg%3E");
	--wfg-tear-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 15L31 16L50 10L64 29L84 23L117 14L132 9L153 20L182 14L202 4L235 24L258 28L275 9L303 26L317 24L346 31L367 22L400 8L426 23L447 17L463 9L487 16L516 19L533 16L548 32L576 23L608 14L642 26L673 22L690 19L714 11L745 12L774 16L791 11L815 22L842 18L861 25L890 14L921 19L937 27L967 15L985 12L1011 12L1033 25L1053 23L1076 11L1094 12L1128 23L1158 25L1172 22L1199 18L1221 24L1240 4L1260 28L1295 20L1323 6L1345 20L1374 10L1406 15L1420 15L1435 22L1440 25V40H0Z'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* Focus: always visible, the same everywhere (DESIGN.md 3.10) */
:focus-visible { outline: 3px solid var(--wfg-primary); outline-offset: 3px; box-shadow: 0 0 0 7px var(--wfg-accent); border-radius: 6px; }
.wfg-on-dark :focus-visible, .has-primary-background-color :focus-visible { outline-color: var(--wfg-accent); box-shadow: 0 0 0 7px var(--wfg-primary); }

/* Skip link */
.wfg-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--wfg-accent); color: var(--wfg-on-accent); padding: .6em 1em; border-radius: 10px; text-decoration: none; font-weight: 600; }
.wfg-skip:focus { left: 16px; }

/* Visually hidden, read by screen readers */
.wfg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Links: underlined in sunflower */
.entry-content a:not(.wp-block-button__link), .wfg-prose a { text-decoration-color: var(--wfg-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* A torn paper edge along the top of a block: add .wfg-tear and set --wfg-sec-bg (its background) and --wfg-edge (which tear) on the block */
.wfg-tear { position: relative; background: var(--wfg-sec-bg, var(--wfg-bg)); }
.wfg-tear::before { content: ""; position: absolute; left: 0; right: 0; top: calc(1px - var(--wfg-tear-h)); height: var(--wfg-tear-h); background: var(--wfg-sec-bg, var(--wfg-bg)); -webkit-mask-image: var(--wfg-edge, var(--wfg-tear-a)); mask-image: var(--wfg-edge, var(--wfg-tear-a)); -webkit-mask-size: max(100%, 1100px) 100%; mask-size: max(100%, 1100px) 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; pointer-events: none; z-index: 1; }
.wfg-tear--b { --wfg-edge: var(--wfg-tear-b); }
.wfg-tear--c { --wfg-edge: var(--wfg-tear-c); }
/* The block's own background colour sets the tear's colour too, so a Group with a background and .wfg-tear just works */
.wfg-tear.has-bg-background-color { --wfg-sec-bg: var(--wfg-bg); }
.wfg-tear.has-cream-background-color { --wfg-sec-bg: var(--wfg-cream); }
.wfg-tear.has-primary-background-color { --wfg-sec-bg: var(--wfg-primary); }
.wfg-tear.has-accent-background-color { --wfg-sec-bg: var(--wfg-accent); }
/* The faint leaf pattern behind a block: add .wfg-leaves to a Group */
.wfg-leaves { position: relative; isolation: isolate; }
.wfg-leaves::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wfg-soft, #F8E5B7); opacity: .5; -webkit-mask-image: var(--wfg-doodle); mask-image: var(--wfg-doodle); -webkit-mask-size: 140px; mask-size: 140px; pointer-events: none; }
.wfg-leaves.wfg-tear::before { z-index: 1; }
.wfg-on-dark.wfg-leaves::after { background: #fff; opacity: .07; }
/* A block of the page (cosy spacing, DESIGN.md 3.5) */
.wfg-sec { padding-block: var(--wp--preset--spacing--70); }
/* A section whose only block had nothing to show (for example More merch with one product) leaves no empty band behind */
.wfg-sec:not(:has(*)) { display: none; }

/* ---------- Header ---------- */
.wfg-header { position: sticky; top: 0; z-index: 40; padding: 0; background: var(--wfg-primary); color: var(--wfg-on-primary); box-shadow: 0 1px 0 rgb(0 0 0 / .15); }
.wfg-header > .wfg-header__row { display: flex; align-items: center; gap: 20px; min-height: 76px; width: 100%; max-width: calc(1200px + 2 * var(--wfg-gutter)); margin-inline: auto; padding-inline: var(--wfg-gutter); }
.wfg-header .wfg-brand { margin-right: auto; }
.wfg-header .wp-block-button { flex: none; }
/* "Join an event" is a small sunflower ticket: notches on the sides and a dashed tear-off line near the left */
.wfg-header .wfg-cta .wp-block-button__link { position: relative; isolation: isolate; background: none; border: 0; border-radius: 10px; --notch: 7px; padding: .8em calc(var(--notch) + .8em) .8em 1.55em; color: var(--wfg-on-accent); font-weight: 600; white-space: nowrap; transition: rotate .25s cubic-bezier(.3,1.5,.5,1), translate .25s cubic-bezier(.3,1.5,.5,1); }
.wfg-header .wfg-cta .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: var(--wfg-accent); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .1); -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--notch) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.wfg-header .wfg-cta .wp-block-button__link::after { content: ""; position: absolute; left: .75em; top: 7px; bottom: 7px; border-left: 2px dashed rgb(30 50 38 / .35); }
.wfg-header .wfg-cta .wp-block-button__link:hover { rotate: -1deg; translate: 0 -2px; }
@media (width < 640px) {
	/* Phones: the header tightens so brand, Menu and the ticket fit on a 360px screen */
	.wfg-header > .wfg-header__row { gap: 8px; min-height: 64px; }
	.wfg-header .wfg-cta .wp-block-button__link { font-size: .84rem; padding: .7em calc(var(--notch) + .5em) .7em 1.25em; }
	.wfg-header .wfg-cta .wp-block-button__link::after { left: .6em; }
}

/* ---------- Footer ---------- */
.wfg-footer { padding: 0; background: var(--wfg-primary); color: var(--wfg-on-primary); --wfg-sec-bg: var(--wfg-primary); --wfg-edge: var(--wfg-tear-b); }
.wfg-footer > .wfg-footer__in { max-width: calc(1200px + 2 * var(--wfg-gutter)); margin-inline: auto; padding: 64px var(--wfg-gutter) 28px; }
.wfg-footer h3, .wfg-footer .wp-block-heading { font-family: var(--wfg-font-display); font-weight: 650; letter-spacing: -0.01em; font-size: 1.15rem; line-height: 1.2; color: var(--wfg-accent); margin: 0 0 12px; }
.wfg-footer a { color: inherit; text-decoration: none; opacity: .9; }
.wfg-footer a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--wfg-accent); }
.wfg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.wfg-footer .wfg-footer__brand { display: grid; gap: 14px; align-content: start; }
.wfg-footer .wfg-footer__brand p { opacity: .85; font-size: .95rem; max-width: 36ch; margin: 0; }
.wfg-footer .wp-block-columns { gap: 32px; }
.wfg-footer .wfg-footer__legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .82rem; opacity: .85; }
.wfg-footer .wfg-footer__legal p { max-width: 70ch; margin: 0; }
.wfg-footer .wfg-footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wfg-footer .wfg-footer__credit { margin-left: auto; }
.wfg-footer .wfg-footer__credit a { display: inline-flex; align-items: center; gap: .3em; }
.wfg-footer .wfg-footer__heart { width: 1em; height: 1em; fill: var(--wfg-pop); }
@media (width < 940px) {
	.wfg-footer .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.wfg-footer .wfg-footer__brand { flex-basis: 100%; }
	.wfg-footer .wfg-footer__col { flex-basis: calc(50% - 16px) !important; flex-grow: 0 !important; }
}
@media (width < 782px) {
	/* Two link columns side by side keeps the footer short on phones (DESIGN.md 3.11) */
	.wfg-footer .wp-block-columns:not(.is-not-stacked-on-mobile) > .wfg-footer__col { flex-basis: calc(50% - 16px) !important; }
	.wfg-footer .wfg-footer__credit { margin-left: 0; }
}

/* Motion: everything stays still when the visitor asks for less motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}