/*
Theme Name: Comfort Mail Club
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: my-child-theme
Description: Child theme of Twenty Twenty-Five for Comfort Mail Club (snail mail subscription). Handmade, taped-paper look.
*/

/* Decorative layer only. Colors, fonts and sizes come from theme.json tokens. */

.cmc-section { padding-block: var(--wp--preset--spacing--60); }

/* Taped paper: used by papers, notes, cards */
.cmc-paper,
.cmc-note,
.cmc-card {
	position: relative;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border: 2px dashed var(--wp--preset--color--secondary);
	box-shadow: 6px 7px 0 color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent);
}
.cmc-paper::before,
.cmc-note::before,
.cmc-card::before {
	content: "";
	position: absolute;
	top: -13px;
	left: 50%;
	width: 76px;
	height: 24px;
	margin-left: -38px;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 85%, transparent);
	transform: rotate(-3deg);
}

/* Grids: wider gaps than the default */
.cmc-grid.is-layout-grid { gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.cmc-notes { margin-top: var(--wp--preset--spacing--60); }

.cmc-note:nth-child(3n+1) { transform: rotate(-2deg); }
.cmc-note:nth-child(3n+2) { transform: rotate(1.5deg); }
.cmc-note:nth-child(3n)   { transform: rotate(-1deg); }

.cmc-paper + .cmc-paper { margin-top: var(--wp--preset--spacing--50); }
.cmc-paper.has-blush-background-color { transform: rotate(-0.6deg); }
.cmc-paper.has-mint-background-color  { transform: rotate(0.6deg); }

.cmc-card { padding-top: var(--wp--preset--spacing--50); }
.cmc-card:nth-child(odd)  { transform: rotate(-0.7deg); }
.cmc-card:nth-child(even) { transform: rotate(0.7deg); }

/* English sub-labels under headings */
.cmc-en {
	margin-block-start: 0;
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	opacity: 0.8;
}

/* Number badge on cards */
.cmc-num {
	position: absolute;
	top: -22px;
	left: 22px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	border: 3px double var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 3px var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: 1.25rem;
	line-height: 1;
}

/* Hero closing line and band */
.cmc-close { margin-top: var(--wp--preset--spacing--60); line-height: 1.6; }
.cmc-close::after {
	content: "";
	display: block;
	width: 90px;
	margin: var(--wp--preset--spacing--30) auto 0;
	border-top: 3px dotted var(--wp--preset--color--secondary);
}
.cmc-band {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	border-block: 2px dashed var(--wp--preset--color--secondary);
	letter-spacing: 0.14em;
	line-height: 1.8;
}

/* Inside section */
.cmc-inside { border-block: 2px dotted var(--wp--preset--color--secondary); }

/* Join section: ticket and price stamp */
.cmc-cta { padding-block: var(--wp--preset--spacing--70); }
.cmc-ticket {
	position: relative;
	max-width: 27.5rem;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 2.9rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 2px dashed var(--wp--preset--color--secondary);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 35%, transparent);
	outline-offset: 8px;
	text-align: center;
}
.cmc-price {
	position: absolute;
	top: -38px;
	right: -24px;
	display: grid;
	place-content: center;
	width: 7rem;
	height: 7rem;
	border: 3px double var(--wp--preset--color--primary);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--wp--preset--color--secondary), 0 0 0 8px var(--wp--preset--color--primary);
	line-height: 1;
	transform: rotate(10deg);
}
.cmc-price > * { margin: 0; }
.cmc-price .cmc-price-num  { font-size: 2.125rem; }
.cmc-price .cmc-price-unit { margin-top: 0.25rem; font-size: 0.75rem; }

/* Header: site title | flower menu | cat envelope */
.cmc-header {
	--cmc-kraft: #d8b48e;
	--cmc-kraft-dark: #c9a07a;
	--cmc-flower-daisy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%280 50 50%29'/%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%2860 50 50%29'/%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%28120 50 50%29'/%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%28180 50 50%29'/%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%28240 50 50%29'/%3E%3Cellipse cx='50' cy='23' rx='12' ry='21' transform='rotate%28300 50 50%29'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3C/svg%3E");
	--cmc-flower-blossom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='25' r='20' transform='rotate%280 50 50%29'/%3E%3Ccircle cx='50' cy='25' r='20' transform='rotate%2872 50 50%29'/%3E%3Ccircle cx='50' cy='25' r='20' transform='rotate%28144 50 50%29'/%3E%3Ccircle cx='50' cy='25' r='20' transform='rotate%28216 50 50%29'/%3E%3Ccircle cx='50' cy='25' r='20' transform='rotate%28288 50 50%29'/%3E%3Ccircle cx='50' cy='50' r='16'/%3E%3C/svg%3E");
	--cmc-flower-aster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%280 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%2845 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%2890 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%28135 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%28180 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%28225 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%28270 50 50%29'/%3E%3Cellipse cx='50' cy='22' rx='7' ry='22' transform='rotate%28315 50 50%29'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3C/svg%3E");
	--cmc-flower-clover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='27' rx='17' ry='24' transform='rotate%280 50 50%29'/%3E%3Cellipse cx='50' cy='27' rx='17' ry='24' transform='rotate%2890 50 50%29'/%3E%3Cellipse cx='50' cy='27' rx='17' ry='24' transform='rotate%28180 50 50%29'/%3E%3Cellipse cx='50' cy='27' rx='17' ry='24' transform='rotate%28270 50 50%29'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3C/svg%3E");
	padding-top: 3rem;
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 2px dashed var(--wp--preset--color--secondary);
}
.cmc-header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.cmc-header-inner > * { margin: 0; }
.cmc-header .wp-block-site-title { margin-left: clamp(0.75rem, 4vw, 3.5rem); }

/* Flower menu: every menu item is a flower; new items take the next flower and color */
.cmc-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.cmc-nav .wp-block-navigation-item {
	position: relative;
	width: 7.25rem;
	--bloom: var(--wp--preset--color--bloom-pink);
	--flower: var(--cmc-flower-daisy);
	--delay: 0s;
}
.cmc-nav .wp-block-navigation-item:nth-child(4n+2) { --bloom: var(--wp--preset--color--bloom-sun);   --flower: var(--cmc-flower-blossom); --delay: -1.2s; }
.cmc-nav .wp-block-navigation-item:nth-child(4n+3) { --bloom: var(--wp--preset--color--bloom-sage);  --flower: var(--cmc-flower-aster);    --delay: -2.4s; }
.cmc-nav .wp-block-navigation-item:nth-child(4n+4) { --bloom: var(--wp--preset--color--bloom-lilac); --flower: var(--cmc-flower-clover);   --delay: -3.6s; }
.cmc-nav .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: 4.6rem 0 0.25rem;
	color: var(--wp--preset--color--primary);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
.cmc-nav .wp-block-navigation-item::before,
.cmc-nav .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 4.25rem;
	height: 4.25rem;
	margin-left: -2.125rem;
	-webkit-mask: var(--flower) center / contain no-repeat;
	mask: var(--flower) center / contain no-repeat;
}
.cmc-nav .wp-block-navigation-item::before {
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 60%, transparent);
	translate: 4px 5px;
}
.cmc-nav .wp-block-navigation-item__content::before {
	background: var(--bloom);
	animation: cmc-sway 5s ease-in-out var(--delay) infinite;
	transition: scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), rotate 0.5s;
}
.cmc-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	top: 1.425rem;
	left: 50%;
	width: 1.4rem;
	height: 1.4rem;
	margin-left: -0.7rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--butter);
	animation: cmc-sway 5s ease-in-out var(--delay) infinite;
	transition: scale 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.cmc-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::before,
.cmc-nav .wp-block-navigation-item__content:focus-visible::before { animation-play-state: paused; scale: 1.18; rotate: 30deg; }
.cmc-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.cmc-nav .wp-block-navigation-item__content:focus-visible::after { animation-play-state: paused; scale: 1.3; }
.cmc-nav .wp-block-navigation-item:hover .wp-block-navigation-item__label,
.cmc-nav .wp-block-navigation-item__content:focus-visible .wp-block-navigation-item__label { text-decoration: underline dotted; text-underline-offset: 0.3em; }
.cmc-nav .wp-block-navigation-item__content:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.cmc-nav .current-menu-item .wp-block-navigation-item__content::after,
.cmc-nav .wp-block-navigation-item__content[aria-current="page"]::after { box-shadow: 0 0 0 3px var(--wp--preset--color--primary); }
@keyframes cmc-sway {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-5px) rotate(4deg); }
}

/* Cat envelope */
.cmc-env {
	position: relative;
	width: 14.4rem;
	height: 8.75rem;
	border-radius: 3px;
	background: var(--cmc-kraft);
	box-shadow: 0 12px 22px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	transform: rotate(3deg);
	transition: transform 0.2s;
}
.cmc-env::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4.9rem;
	background: var(--cmc-kraft-dark);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cmc-env::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom right, transparent 49.5%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent) 50%) 0 0 / 50% 100% no-repeat,
		linear-gradient(to bottom left, transparent 49.5%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent) 50%) 100% 0 / 50% 100% no-repeat;
}
.cmc-env:hover { transform: rotate(-1deg) scale(1.04); }
.cmc-cat {
	position: absolute;
	top: -38px;
	left: 50%;
	z-index: 3;
	width: 150px;
	margin: 0 0 0 -75px;
	pointer-events: none;
	filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent));
}
.cmc-cat img { display: block; width: 100%; height: auto; }
.cmc-env-text {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
	padding-bottom: 1rem;
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.2rem;
	line-height: 1.3;
}
.cmc-env-text a { color: var(--wp--preset--color--primary); text-decoration: none; }
.cmc-env-text a::after { content: ""; position: absolute; inset: 0; }
.cmc-env-text a:focus-visible::after { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.cmc-env-text::before {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 12px;
	width: 34px;
	height: 40px;
	border: 3px dotted var(--wp--preset--color--base);
	background: var(--wp--preset--color--secondary);
	transform: rotate(3deg);
}

/* Footer */
.cmc-footer { padding-block: var(--wp--preset--spacing--50); text-align: center; }
.cmc-footer a { color: inherit; }

/* Buttons: framed like a stamp; playful hover only if motion is welcome */
.wp-block-button:not(.is-style-outline) .wp-block-button__link { outline: 2px solid var(--wp--preset--color--secondary); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.cmc-cta .wp-block-button .wp-block-button__link:focus-visible { outline-color: var(--wp--preset--color--base); }
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link { transition: transform 0.15s; }
	.wp-block-button__link:hover { transform: rotate(-2deg) scale(1.03); }
}

@media (max-width: 600px) {
	.cmc-section { padding-block: var(--wp--preset--spacing--50); }
	.cmc-price { right: -8px; }
	.cmc-hero .wp-block-button { width: 100%; }
	.cmc-hero .wp-block-button__link { width: 100%; }
}

/* Single event (templates/single-event-cta.html) */
.cmc-event { padding-block: var(--wp--preset--spacing--50) 0; }
.cmc-ev-top { align-items: start; margin-top: var(--wp--preset--spacing--40); }
.cmc-ev-top .wp-block-post-featured-image { margin: 0; }
.cmc-ev-top .wp-block-post-featured-image img { display: block; width: 100%; height: auto; border: 2px dashed var(--wp--preset--color--secondary); }
.cmc-ev-card {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--paper);
	box-shadow: 6px 7px 0 color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent);
}
.cmc-ev-row { margin-bottom: var(--wp--preset--spacing--30); }
.cmc-ev-row > * { margin: 0; }
.cmc-ev-row:has(p:empty) { display: none; }
.cmc-ev-card .wp-block-button,
.cmc-ev-card .wp-block-button__link { width: 100%; text-align: center; }
.cmc-event .wp-block-button:has(a[href=""]),
.cmc-event .wp-block-button:has(a:not([href])) { display: none; }
.cmc-event .tribe-block__event-datetime,
.cmc-event .tribe-block__events-link { display: none; } /* shown in the card above instead */
.cmc-ev-band { margin-top: var(--wp--preset--spacing--60); padding-block: var(--wp--preset--spacing--60); }
@media (max-width: 600px) { .cmc-ev-card { position: static; } }

/* Header responsive */
@media (max-width: 900px) {
	.cmc-header-inner { grid-template-columns: 1fr auto; }
	.cmc-nav { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 600px) {
	.cmc-nav .wp-block-navigation__container { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: var(--wp--preset--spacing--30); }
	.cmc-env { width: 10.75rem; height: 6.6rem; }
	.cmc-env::before { height: 3.6rem; }
	.cmc-cat { top: -28px; width: 112px; margin-left: -56px; }
	.cmc-env-text { padding-bottom: 0.6rem; font-size: 0.9rem; }
	.cmc-env-text::before { right: 8px; bottom: 8px; width: 26px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.cmc-nav .wp-block-navigation-item__content::before,
	.cmc-nav .wp-block-navigation-item__content::after { animation: none; transition: none; }
	.cmc-env { transition: none; }
}