/* Coloring Pages (/coloring-pages/): page picker + tap-to-color studio (assets/js/coloring.js). Sara 2026-10-28:
   "Do it. Maybe kids would use it". Big buttons and swatches for fingers; works at 390 px. */
body.fsos-coloring-page main > .wp-block-post-title { margin-bottom: .5rem !important; }
.fsos-body > .fsos-color { width: min(1120px, calc(100vw - 32px)) !important; max-width: none !important;
	margin-left: calc(50% - min(560px, 50vw - 16px)) !important; margin-right: 0 !important; }
.fsos-color__intro { text-align: center; max-width: 640px; margin: 0 auto 1.5rem; color: #4a4743; }
.fsos-color__pages h2 { font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; margin: 1.5rem 0 .8rem; }
.fsos-color__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.fsos-color__thumb { background: #fff; border: 1px solid var(--wp--preset--color--rule, #E4E0D9); border-radius: 12px; padding: .5rem;
	cursor: pointer; text-align: center; font: 500 .9rem/1.3 var(--wp--preset--font-family--sans, sans-serif); color: var(--wp--preset--color--ink); }
.fsos-color__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; display: block; margin-bottom: .4rem; }
.fsos-color__thumb:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.fsos-color__studio { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start; }
.fsos-color__canvas { background: #fff; border: 1px solid var(--wp--preset--color--rule, #E4E0D9); border-radius: 12px; padding: .5rem; }
.fsos-color__canvas canvas { width: 100%; height: auto; display: block; touch-action: manipulation; cursor: pointer; }
.fsos-color__side { position: sticky; top: 80px; }
.fsos-color__title { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; margin: 0 0 .7rem; }
.fsos-color__swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-bottom: 1rem; }
.fsos-color__swatch--any { position: relative; overflow: hidden; background: conic-gradient(#E53935, #FDD835, #43A047, #1E88E5, #8E24AA, #E53935); }
.fsos-color__swatch--any.is-on { background: var(--any); }
.fsos-color__swatch--any input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.fsos-color__swatch { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.fsos-color__swatch.is-on { outline: 3px solid var(--wp--preset--color--forest, #1D3A25); outline-offset: 2px; }
.fsos-color__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fsos-color__buttons button { padding: .75rem .5rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--forest, #1D3A25);
	background: #fff; color: var(--wp--preset--color--forest, #1D3A25); font: 600 .95rem/1 var(--wp--preset--font-family--sans, sans-serif); cursor: pointer; }
.fsos-color__buttons button[data-act=save] { background: var(--wp--preset--color--forest, #1D3A25); color: #fff; }
.fsos-color__tip { font-size: .85rem; color: #6b665e; margin-top: .8rem; }
@media (max-width: 760px) {
	/* phones, like Hey Color (Sara 2026-10-28: "No hey color"): the picture fills the screen, one row of big color circles
	   fixed along the bottom (swipe for more), a small row of tools above the picture, zoom in the corner */
	.fsos-color__studio { grid-template-columns: 1fr; gap: .5rem; padding-bottom: 92px; }
	.fsos-color__side { position: static; order: -1; background: none; box-shadow: none; padding: 0; }
	.fsos-color__title { font-size: 1.05rem; margin-bottom: .4rem; text-align: center; }
	.fsos-color__swatches { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
		display: flex; gap: 12px; overflow-x: auto; background: #F3F1EC; border-top: 1px solid #E4E0D9; box-shadow: 0 -4px 14px rgba(0,0,0,.06);
		-webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.fsos-color__swatches::-webkit-scrollbar { display: none; }
	.fsos-color__swatch { flex: 0 0 56px; width: 56px; height: 56px; aspect-ratio: auto; border-width: 0; }
	.fsos-color__swatch.is-on { outline: 4px solid #fff; outline-offset: -8px; box-shadow: 0 0 0 3px var(--wp--preset--color--forest, #1D3A25); }
	.fsos-color__buttons { grid-template-columns: repeat(6, 1fr); gap: .3rem; }
	.fsos-color__buttons button { padding: .55rem .1rem; font-size: .72rem; }
	.fsos-color__tip { display: none; }
	.fsos-color__intro { font-size: .95rem; }
	.fsos-color__grid { grid-template-columns: repeat(2, 1fr); }
	.fsos-color__canvas { max-height: none; }
	.fsos-color__zoom { bottom: .8rem; right: .8rem; }
	body.fsos-coloring-page .fsos-labcopy, body.fsos-coloring-page [class*=lab-copy] { bottom: 96px !important; }
}
.fsos-color [hidden] { display: none !important; }
.fsos-color__studio > * { min-width: 0; }
.fsos-color__swatches { max-width: 100%; }
.fsos-color__buttons button[data-act=sound][aria-pressed=false] { color: #8A857D; border-color: #C9C3B8; }
/* zoom: the picture box scrolls when zoomed in */
.fsos-color__wrap { position: relative; min-width: 0; }
.fsos-color__canvas { overflow: auto; max-height: 82vh; -webkit-overflow-scrolling: touch; }
.fsos-color__canvas canvas { max-width: none; }
.fsos-color__canvas { touch-action: pan-x pan-y; }   /* a pinch on the picture does not zoom the whole page (use + and -) */
.fsos-color__zoom { position: absolute; bottom: .9rem; right: .9rem; display: flex; flex-direction: column; gap: .4rem; z-index: 2; }
.fsos-color__zoom button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--wp--preset--color--forest, #1D3A25);
	background: rgba(255,255,255,.94); color: var(--wp--preset--color--forest, #1D3A25); font: 600 1.6rem/1 var(--wp--preset--font-family--sans, sans-serif);
	cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 0; }
.fsos-color__zoom button:disabled { opacity: .35; cursor: default; }

/* phones: + and - sit side by side at the TOP of the picture (Sara 2026-10-28: "I expanded the coloring page ... But then
   no way to get it back to normal"); at the bottom the - could slip under the color row on an iPhone */
@media (max-width: 760px) {
	.fsos-color__zoom { top: .6rem; bottom: auto; right: .6rem; flex-direction: row; }
}