/* ==========================================================================
   Abomination Forge — extra styles that theme.json can't express
   ========================================================================== */

:root {
	--af-ink: var(--wp--preset--color--ink, #111);
	--af-line: 4px solid var(--af-ink);
	--af-shadow-color: var(--af-ink);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

::selection { background: var(--wp--preset--color--slime); color: var(--af-ink); }

:where(a, button, input, .wp-element-button):focus-visible {
	outline: 4px dashed var(--wp--preset--color--pink);
	outline-offset: 3px;
}

/* Main sections butt up against each other so drips/flames line up */
.af-main { overflow-x: clip; }
.af-main > * + * { margin-block-start: 0; }
/* leave room for the footer flames */
.af-main > :last-child { padding-bottom: calc(var(--wp--preset--spacing--70) + 90px) !important; }
.af-main > .wp-block-post-content:last-child { padding-bottom: 0 !important; }
.af-main > .wp-block-post-content:last-child > :last-child { padding-bottom: calc(var(--wp--preset--spacing--70) + 90px) !important; }

/* --------------------------------------------------------------------------
   Warning ticker
   -------------------------------------------------------------------------- */
.af-ticker {
	overflow: hidden;
	white-space: nowrap;
	border-bottom: var(--af-line);
}
.af-ticker p {
	display: inline-block;
	margin: 0;
	padding-left: 100%;
	animation: af-ticker 38s linear infinite;
}
@keyframes af-ticker { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.af-header { border-bottom: var(--af-line); position: relative; z-index: 20; }
.af-header .wp-block-site-title a {
	color: var(--wp--preset--color--slime);
	-webkit-text-stroke: 2px var(--af-ink);
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 var(--af-ink);
}
.af-header .wp-block-site-logo img { transition: transform .25s ease; }
.af-header .wp-block-site-logo:hover img,
.af-header .af-logo-fiend:hover img { transform: rotate(-12deg) scale(1.08); }
.af-logo-fiend { margin: 0; }
.af-logo-fiend img { width: 42px; height: auto; display: block; transition: transform .25s ease; }

.af-header .wp-block-navigation-item__content { padding: .35em .75em; border-radius: 999px; border: 3px solid transparent; }
.af-header .wp-block-navigation-item__content:hover,
.af-header .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--yolk);
	border-color: var(--af-ink);
}
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--slime) !important;
	color: var(--af-ink) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.6rem; }

/* --------------------------------------------------------------------------
   Block style variations
   -------------------------------------------------------------------------- */
.is-style-sticker,
.is-style-sticker-tilt {
	border: var(--af-line);
	border-radius: 22px;
	box-shadow: 8px 8px 0 var(--af-shadow-color);
}
.is-style-sticker-tilt { transform: rotate(-1.6deg); }
.is-style-sticker-tilt:nth-child(even) { transform: rotate(1.4deg); }

.is-style-drips { position: relative; }
.is-style-drips::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: calc(100% - 1px);
	height: 52px;
	background-color: inherit;
	-webkit-mask: var(--af-drip) repeat-x top left / 240px 52px;
	mask: var(--af-drip) repeat-x top left / 240px 52px;
	z-index: 3;
	pointer-events: none;
}

.is-style-flames { position: relative; }
.is-style-flames::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: calc(100% - 2px);
	height: 90px;
	background: var(--af-flames) repeat-x bottom left / 320px 90px;
	pointer-events: none;
	z-index: 1;
}

.is-style-halftone {
	background-image: radial-gradient(rgba(17,17,17,.14) 22%, transparent 24%);
	background-size: 18px 18px;
}

.wp-block-image.is-style-specimen img {
	border: var(--af-line);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--af-shadow-color);
	background: var(--wp--preset--color--paper);
	transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-image.is-style-specimen:hover img {
	transform: rotate(-2deg) scale(1.02);
	box-shadow: 12px 12px 0 var(--wp--preset--color--pink);
}
.wp-block-image.is-style-specimen figcaption {
	font-family: var(--wp--preset--font-family--sign);
	text-transform: uppercase;
	font-size: .85rem;
	margin-top: 1rem;
	text-align: center;
}

.wp-block-heading.is-style-outlined,
.af-outlined {
	color: var(--wp--preset--color--yolk);
	-webkit-text-stroke: 3px var(--af-ink);
	paint-order: stroke fill;
	text-shadow: 5px 5px 0 var(--af-ink);
	letter-spacing: .01em;
}
.has-slime-color.is-style-outlined { color: var(--wp--preset--color--slime) !important; }
.has-pink-color.is-style-outlined { color: var(--wp--preset--color--pink) !important; }
.has-bone-color.is-style-outlined { color: var(--wp--preset--color--bone) !important; }

.wp-block-heading.is-style-drippy {
	font-family: var(--wp--preset--font-family--drip);
	text-transform: uppercase;
	line-height: 1.05;
}

.wp-block-button.is-style-blood .wp-block-button__link { background: var(--wp--preset--color--blood); color: var(--wp--preset--color--bone); }
.wp-block-button.is-style-pink .wp-block-button__link { background: var(--wp--preset--color--pink); color: var(--af-ink); }
.wp-block-button.is-style-ink .wp-block-button__link { background: var(--af-ink); color: var(--wp--preset--color--bone); box-shadow: 6px 6px 0 var(--wp--preset--color--slime); }
.wp-block-button .wp-block-button__link { transition: transform .12s ease, box-shadow .12s ease; }
.wp-block-button .wp-block-button__link:hover { transform: translate(-2px, -2px) rotate(-1.5deg); }
.wp-block-button .wp-block-button__link:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--af-ink); }

ul.is-style-eyeballs { list-style: none; padding-left: 0; }
ul.is-style-eyeballs li { position: relative; padding-left: 2.1em; margin-bottom: .5em; }
ul.is-style-eyeballs li::before {
	content: "";
	position: absolute; left: 0; top: .1em;
	width: 1.45em; height: 1.45em;
	background: var(--af-eye) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.af-hero { overflow-x: clip; }
.af-hero .af-title.has-monster-font-size { font-size: clamp(2.5rem, 5.3vw, 4.8rem) !important; overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 781px) { .af-hero .af-title.has-monster-font-size { font-size: 10.4vw !important; } }
.af-hero .af-title {
	font-family: var(--wp--preset--font-family--drip);
	text-transform: uppercase;
	line-height: .92;
	color: var(--wp--preset--color--slime);
	-webkit-text-stroke: 4px var(--af-ink);
	paint-order: stroke fill;
	text-shadow: 7px 7px 0 var(--af-ink);
	margin: 0;
}
.af-hero .af-title .af-pink { color: var(--wp--preset--color--pink); }
.af-fiend-wrap { position: relative; }
.af-fiend-wrap::before {
	content: "";
	position: absolute; inset: -6% -4%;
	background: var(--af-burst) no-repeat center / contain;
	animation: af-spin 60s linear infinite;
	z-index: 0;
}
.af-fiend-wrap { text-align: center; }
.wp-block-image.af-fiend-wrap img { max-width: min(100%, 300px); filter: drop-shadow(8px 8px 0 rgba(17,17,17,.85)); position: relative; z-index: 1; animation: af-bob 3.4s ease-in-out infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
@keyframes af-bob { 50% { transform: translateY(-10px) rotate(-2deg); } }

.af-badges { gap: .6rem !important; }
.af-badge {
	display: inline-block;
	margin: 0 !important;
	padding: .35rem .9rem;
	border: 3px solid var(--af-ink);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sign);
	font-size: .8rem;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 var(--af-ink);
}
.af-badge:nth-child(odd) { transform: rotate(-3deg); }
.af-badge:nth-child(even) { transform: rotate(2deg); }

/* --------------------------------------------------------------------------
   Gallery grid + post cards
   -------------------------------------------------------------------------- */
.af-gallery.wp-block-columns { row-gap: 3rem; }
.af-gallery .wp-block-column:nth-child(3n+1) .wp-block-image { transform: rotate(-1.5deg); }
.af-gallery .wp-block-column:nth-child(3n+2) .wp-block-image { transform: rotate(1deg) translateY(10px); }
.af-gallery .wp-block-column:nth-child(3n) .wp-block-image { transform: rotate(-.5deg); }

.af-cards .wp-block-post { display: flex; }
.af-cards .wp-block-post > .wp-block-group { width: 100%; }
.af-card .wp-block-post-featured-image img { border-bottom: var(--af-line); }
.af-card { overflow: hidden; transition: transform .2s ease; }
.af-card:hover { transform: rotate(-1deg) translateY(-4px); }

.af-tag {
	display: inline-block;
	padding: .15rem .6rem;
	border: 3px solid var(--af-ink);
	border-radius: 6px;
	background: var(--wp--preset--color--yolk);
	font-family: var(--wp--preset--font-family--sign);
	font-size: .75rem;
	text-transform: uppercase;
	transform: rotate(-2deg);
}
.af-tag a { text-decoration: none; }

/* TV frame for YouTube */
.af-tv {
	border: 6px solid var(--af-ink);
	border-radius: 36px;
	padding: 18px;
	background: var(--wp--preset--color--grape);
	box-shadow: 10px 10px 0 var(--af-ink);
	position: relative;
}
.af-tv::before, .af-tv::after {
	content: "";
	position: absolute; top: -46px;
	width: 6px; height: 56px;
	background: var(--af-ink);
	border-radius: 3px;
}
.af-tv::before { left: 38%; transform: rotate(-28deg); }
.af-tv::after { right: 38%; transform: rotate(28deg); }
.af-tv .wp-block-embed, .af-tv .af-screen {
	margin: 0;
	border: 4px solid var(--af-ink);
	border-radius: 22px;
	overflow: hidden;
	background: #1d1d1d;
}
.af-screen {
	aspect-ratio: 16 / 9;
	display: grid !important;
	place-items: center;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
		radial-gradient(circle at 50% 45%, #3a3a3a, #111 70%) !important;
	color: var(--wp--preset--color--slime);
	text-align: center;
}
.af-screen p { margin: 0; }

/* Salt circle warning */
.af-salt {
	border: 4px dashed var(--af-ink);
	border-radius: 999px;
	padding: 1.25rem 2rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.af-footer a { color: inherit; }
.af-footer .wp-block-social-links .wp-social-link {
	border: 3px solid var(--wp--preset--color--bone);
	box-shadow: 3px 3px 0 var(--wp--preset--color--slime);
}

/* --------------------------------------------------------------------------
   Posts, comments, 404
   -------------------------------------------------------------------------- */
.af-single-title { word-break: break-word; }
.single-post .wp-block-post-content > p:first-of-type::first-letter {
	font-family: var(--wp--preset--font-family--drip);
	float: left;
	font-size: 4.2em;
	line-height: .8;
	padding: .08em .12em 0 0;
	color: var(--wp--preset--color--blood);
}
.wp-block-query-pagination a, .wp-block-query-pagination .current {
	font-family: var(--wp--preset--font-family--sign);
	padding: .3em .7em;
	border: 3px solid var(--af-ink);
	border-radius: 8px;
	text-decoration: none;
	background: var(--wp--preset--color--paper);
}
.wp-block-query-pagination .current { background: var(--wp--preset--color--slime); }

.wp-block-search__input {
	border: var(--af-line) !important;
	border-radius: 999px !important;
	padding: .7em 1.2em !important;
	background: var(--wp--preset--color--paper);
}
.wp-block-search__inside-wrapper { border: 0 !important; gap: .5rem; }

.wp-block-comment-template li { border-bottom: 3px dashed var(--af-ink); padding-bottom: 1rem; margin-bottom: 1rem; }
.comment-form textarea, .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] {
	border: var(--af-line); border-radius: 12px; padding: .7em; background: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------------------
   Mobile + motion
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.af-hero .af-title { -webkit-text-stroke-width: 3px; text-shadow: 4px 4px 0 var(--af-ink); }
	.af-gallery .wp-block-column .wp-block-image { transform: none !important; }
	.is-style-sticker-tilt, .is-style-sticker-tilt:nth-child(even) { transform: none; }
	.af-tv::before, .af-tv::after { display: none; }
	.af-fiend-wrap { max-width: 300px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.af-ticker p { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Gallery block as specimen grid
   -------------------------------------------------------------------------- */
.wp-block-gallery.af-gallery { overflow: visible; }
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image { flex-direction: column; overflow: visible; }
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image img {
	border: var(--af-line);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--af-shadow-color);
	aspect-ratio: 1;
	transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image:hover img {
	transform: rotate(-2deg) scale(1.02);
	box-shadow: 12px 12px 0 var(--wp--preset--color--pink);
}
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image:nth-child(3n+1) { transform: rotate(-1.5deg); }
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image:nth-child(3n+2) { transform: rotate(1deg) translateY(10px); }
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--af-ink);
	max-height: none;
	overflow: visible;
	padding: .9rem 0 0;
	font-family: var(--wp--preset--font-family--sign);
	font-size: .85rem;
	text-transform: uppercase;
	text-shadow: none;
}
.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image::before { display: none; }

/* Die-cut sticker */
.af-diecut { text-align: center; }
.af-diecut img {
	transform: rotate(8deg);
	filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(8px 10px 0 rgba(17,17,17,.9));
	max-width: min(240px, 70%) !important;
	transition: transform .3s ease;
}
.af-diecut:hover img { transform: rotate(-4deg) scale(1.04); }
.af-diecut figcaption { font-family: var(--wp--preset--font-family--sign); font-size: .75rem; text-transform: uppercase; margin-top: 1rem; }

@media (max-width: 781px) {
	.wp-block-gallery.af-gallery.has-nested-images figure.wp-block-image { transform: none !important; }
}

.af-screen a { color: var(--wp--preset--color--slime); text-decoration: none; text-shadow: 0 0 18px rgba(139,227,59,.6); }
.af-screen a:hover { color: var(--wp--preset--color--yolk); }
@media (min-width: 600px) and (max-width: 1100px) {
	.af-header .wp-block-navigation { font-size: .78rem; gap: .2rem; }
	.af-header .wp-block-navigation-item__content { padding: .3em .5em; }
}

@media (max-width: 599px) {
	.wp-block-image.af-fiend-wrap img { max-width: 210px; }
	.af-header .wp-block-site-title { font-size: 1.3rem !important; }
}