/* Post-it notes: every block with the Post-it option (class ek-card) becomes
   a note made from the paper scans in images/postit-*.webp. */

/* Classes (set in the block sidebar → "Post-it" panel):
     ek-postit-img-1 / -2 / -3   paper scan (none = varies automatically)
     ek-postit-s / -m / -l / -xl / -full   size (none = medium)
     ek-angle-0, ek-angle-n1 … ek-angle-n10, ek-angle-p1 … ek-angle-p10
                                 rotation in degrees (none = slight automatic angle) */

:root {
	--ekp-img-1: url("../images/postit-1.webp");
	--ekp-img-2: url("../images/postit-2.webp");
	--ekp-img-3: url("../images/postit-3.webp");
}

/* ---------- Automatic variety: paper scan + angle by position ---------- */

/* Front end: the theme wraps each post-it in .ek-postit-wrap (for the shadow).
   Editor: no wrapper, so count the post-it itself. */
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(3n+1) { --ekp-auto-img: var(--ekp-img-1); }
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(3n+2) { --ekp-auto-img: var(--ekp-img-2); }
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(3n+3) { --ekp-auto-img: var(--ekp-img-3); }

:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(4n+1) { --ekp-auto-angle: -2.5deg; }
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(4n+2) { --ekp-auto-angle: 1.8deg; }
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(4n+3) { --ekp-auto-angle: -1deg; }
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)):nth-child(4n+4) { --ekp-auto-angle: 3deg; }

/* ---------- Sizes (design pixels → grow on big screens like the rest) ---------- */

.ek-postit-s    { --ekp-size: calc(220 * var(--ek-u, 1px)); }
.ek-postit-m    { --ekp-size: calc(320 * var(--ek-u, 1px)); }
.ek-postit-l    { --ekp-size: calc(440 * var(--ek-u, 1px)); }
.ek-postit-xl   { --ekp-size: calc(600 * var(--ek-u, 1px)); }
.ek-postit-full { --ekp-size: 100%; }

.ek-postit-wrap {
	position: relative;
	width: var(--ekp-size, calc(320 * var(--ek-u, 1px)));
	max-width: calc(100% - 2rem);
	margin: 3rem auto;
}

/* Side by side in a Row / Columns block: let the layout place them. */
:is(.is-layout-flex) > .ek-postit-wrap {
	margin: 1rem;
}

/* Inside a column: centred in the column (not stuck to its left edge). */
.wp-block-column > .ek-postit-wrap {
	margin: 1rem auto;
}

/* Position option (Post-it panel → Position): left / right instead of centred.
   Front end: on the wrapper; editor: on the note itself. */
:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)).ek-postit-left {
	margin-left: 1rem !important;
	margin-right: auto !important;
}

:is(.ek-postit-wrap, .ek-card:not(.ek-postit-wrap > *)).ek-postit-right {
	margin-left: auto !important;
	margin-right: 1rem !important;
}

/* ---------- The post-it ---------- */

.ek-card.ek-card.ek-card:not(.wp-block-image, .wp-block-video, .wp-block-cover, .wp-block-embed, .wp-block-gallery) {
	--ekp-img-used: var(--ekp-img, var(--ekp-auto-img, var(--ekp-img-1)));
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	width: var(--ekp-size, calc(320 * var(--ek-u, 1px)));
	max-width: 100%;
	margin: 3rem auto;
	/* inner margin in % of the NOTE (CSS % would use the parent width) – set
	   in px by js/postit-fit.js; this is only the fallback */
	padding: calc(var(--ekp-pad, 13) * 1%);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: var(--ekp-font, var(--ek-font-heading));
	line-height: 1.25;
	/* never split words: the fitting then shrinks the text until the longest word fits */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	transform: rotate(var(--ekp-angle, var(--ekp-auto-angle, 0deg)));
	/* paper scan, coloured with soft-light (the scans are mid-grey, so the
	   colour stays exact and only shading / fibres show) + the page light */
	background-image:
		radial-gradient(
			circle at var(--ek-light-x, 50%) var(--ek-light-y, 30%),
			rgba(var(--ek-light-rgb, 255, 255, 255), calc(var(--ek-card-light, 0.7) * 0.25)) 0%,
			rgba(var(--ek-light-rgb, 255, 255, 255), 0) var(--ek-light-size, 75%)
		),
		var(--ekp-img-used);
	background-size: 100% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-blend-mode: normal, var(--ekp-blend, soft-light);
	-webkit-mask: var(--ekp-img-used) center / 100% 100% no-repeat;
	mask: var(--ekp-img-used) center / 100% 100% no-repeat;
}

.ek-card.ek-card.ek-card:not(.wp-block-image, .wp-block-video, .wp-block-cover, .wp-block-embed, .wp-block-gallery):not(.has-background) {
	background-color: var(--ekp-color, #f5d94a);
}

.ek-card.ek-card.ek-card:not(.wp-block-image, .wp-block-video, .wp-block-cover, .wp-block-embed, .wp-block-gallery):not(.has-text-color) {
	color: var(--ekp-text, #2b2b2b);
}

/* Inside the wrapper the wrapper does sizing / spacing. The wrapper is a
   size container, so margin and text are set as a share of the note's width
   (cqw): when the note grows or shrinks (window, zoom, phone rotation) the
   text scales with it instantly – pure CSS, no re-fitting needed.
   --ekp-fit is measured once by js/postit-fit.js. */
.ek-postit-wrap {
	container-type: inline-size;
}

.ek-postit-wrap > .ek-card.ek-card.ek-card:not(.wp-block-image, .wp-block-video, .wp-block-cover, .wp-block-embed, .wp-block-gallery) {
	width: 100%;
	margin: 0;
	padding: calc(var(--ekp-pad, 13) * 1cqw);
	/* !important: beats WordPress size presets (has-medium-font-size …) – the
	   size of a note is always the fitted one */
	font-size: calc(var(--ekp-fit, 8) * 1cqw) !important;
}

/* Font per note (block sidebar → Post-it → Font). No class = the default from
   Customize → Post-its. Bundled fonts are only downloaded when used. */
.ek-card.ek-pfont-heading { --ekp-font: var(--ek-font-heading); }
.ek-card.ek-pfont-body    { --ekp-font: var(--ek-font-body); }
.ek-card.ek-pfont-cinzel  { --ekp-font: "Cinzel", serif; }
.ek-card.ek-pfont-sunrise { --ekp-font: "Waiting for the Sunrise", cursive; }
.ek-card.ek-pfont-roboto  { --ekp-font: "Roboto", sans-serif; }
.ek-card.ek-pfont-oswald  { --ekp-font: "Oswald", sans-serif; }
.ek-card.ek-pfont-georgia { --ekp-font: Georgia, "Times New Roman", serif; }
.ek-card.ek-pfont-system  { --ekp-font: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ek-card.ek-pfont-own1    { --ekp-font: var(--ekp-font-own-1); }
.ek-card.ek-pfont-own2    { --ekp-font: var(--ekp-font-own-2); }

/* Headings inside a note follow the note's font too. */
.ek-card.ek-card :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
}

/* Chosen paper scan */
.ek-card.ek-postit-img-1 { --ekp-img: var(--ekp-img-1); }
.ek-card.ek-postit-img-2 { --ekp-img: var(--ekp-img-2); }
.ek-card.ek-postit-img-3 { --ekp-img: var(--ekp-img-3); }

/* Card textures from the parent theme are replaced by the paper scan. */
.ek-card.ek-card.has-paper::before {
	display: none;
}

/* ---------- Text: sizes relative to the note (the script fits the note) ---------- */

.ek-card.ek-card :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) {
	padding: 0;
	margin: 0 0 0.45em;
	max-width: none;
}

/* Whole words only – also against the editor's own "break-word" on text
   fields, so editor and live site fit the text the same way. */
.ek-card.ek-card :is(p, h1, h2, h3, h4, h5, h6, li, blockquote) {
	overflow-wrap: normal !important;
	word-break: normal !important;
}

.ek-card.ek-card p { font-size: 1em; }

/* WordPress size presets INSIDE a note become relative emphasis (they'd
   otherwise be fixed px with !important and break the fitting). */
.ek-card.ek-card .has-small-font-size { font-size: 0.8em !important; }
.ek-card.ek-card .has-medium-font-size { font-size: 1.1em !important; }
.ek-card.ek-card .has-large-font-size { font-size: 1.45em !important; }
.ek-card.ek-card :is(.has-x-large-font-size, .has-huge-font-size) { font-size: 1.8em !important; }
.ek-card.ek-card :is(h1, h2) { font-size: 1.45em; line-height: 1.1; }
.ek-card.ek-card h3 { font-size: 1.25em; line-height: 1.15; }
.ek-card.ek-card :is(h4, h5, h6) { font-size: 1.1em; }
.ek-card.ek-card :is(ul, ol) { padding-left: 1.1em; }

.ek-card.ek-card > :last-child,
.ek-card.ek-card > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

/* While the script measures: top-aligned, so overflow is measurable. */
.ek-card.ek-card.ek-fitting {
	justify-content: flex-start;
}

/* ---------- Angles: ek-angle-0, -n1 … -n10, -p1 … -p10 ---------- */

.ek-card.ek-angle-0 { --ekp-angle: 0deg; }
.ek-card.ek-angle-n1 { --ekp-angle: -1deg; }
.ek-card.ek-angle-n2 { --ekp-angle: -2deg; }
.ek-card.ek-angle-n3 { --ekp-angle: -3deg; }
.ek-card.ek-angle-n4 { --ekp-angle: -4deg; }
.ek-card.ek-angle-n5 { --ekp-angle: -5deg; }
.ek-card.ek-angle-n6 { --ekp-angle: -6deg; }
.ek-card.ek-angle-n7 { --ekp-angle: -7deg; }
.ek-card.ek-angle-n8 { --ekp-angle: -8deg; }
.ek-card.ek-angle-n9 { --ekp-angle: -9deg; }
.ek-card.ek-angle-n10 { --ekp-angle: -10deg; }
.ek-card.ek-angle-p1 { --ekp-angle: 1deg; }
.ek-card.ek-angle-p2 { --ekp-angle: 2deg; }
.ek-card.ek-angle-p3 { --ekp-angle: 3deg; }
.ek-card.ek-angle-p4 { --ekp-angle: 4deg; }
.ek-card.ek-angle-p5 { --ekp-angle: 5deg; }
.ek-card.ek-angle-p6 { --ekp-angle: 6deg; }
.ek-card.ek-angle-p7 { --ekp-angle: 7deg; }
.ek-card.ek-angle-p8 { --ekp-angle: 8deg; }
.ek-card.ek-angle-p9 { --ekp-angle: 9deg; }
.ek-card.ek-angle-p10 { --ekp-angle: 10deg; }

/* ---------- Phones ---------- */

@media (max-width: 700px) {
	.ek-postit-xl,
	.ek-postit-l {
		--ekp-size: calc(100% - 2rem);
	}
}