/*
Theme Name: Warn Everyone 2026
Description: Cover-forward comic shop design for Warn Everyone! Entertainment. Dark ink chrome, teal accent pulled from the house art, warning-yellow calls to action. Child theme of Twenty Nineteen.
Author: Warn Everyone! Entertainment
Template: twentynineteen
Version: 1.0.0
Text Domain: warn-everyone-2026
*/

:root {
	--wec-ink: #0e141b;
	--wec-ink-2: #151d27;
	--wec-ink-3: #1c2733;
	--wec-line: #26354a;
	--wec-paper: #f4efe6;
	--wec-paper-2: #ece5d8;
	--wec-paper-ink: #1a222c;
	--wec-muted: #9fb0c3;
	--wec-muted-dark: #5c6b7a;
	--wec-teal: #3ec6d8;
	--wec-teal-soft: #8fe3ee;
	--wec-teal-deep: #0f7482;
	--wec-yellow: #ffcf3f;
	--wec-yellow-hover: #ffdd6e;
	--wec-display: "Oswald", "Arial Narrow", sans-serif;
	--wec-body: "Inter", -apple-system, "Segoe UI", sans-serif;
	--wec-shadow: 8px 8px 0 rgba(8, 12, 17, 0.85);
	--wec-shadow-sm: 5px 5px 0 rgba(8, 12, 17, 0.85);
}

/* ---------- Base ---------- */

body {
	background: var(--wec-paper);
	color: var(--wec-paper-ink);
	font-family: var(--wec-body);
}

.entry .entry-content,
.entry .entry-summary,
.page-title,
.entry-title {
	font-family: var(--wec-body);
}

h1, h2, h3, h4, h5, h6,
.entry .entry-title,
.page-title {
	font-family: var(--wec-display);
	font-weight: 600;
	letter-spacing: 0.01em;
}

a {
	color: var(--wec-teal-deep);
}

a:hover {
	color: var(--wec-paper-ink);
}

::selection {
	background: var(--wec-yellow);
	color: var(--wec-ink);
}

/* ---------- Header (all pages) ---------- */

#masthead.site-header,
#masthead.site-header.featured-image {
	background: var(--wec-ink);
	min-height: 0;
	padding: 1rem 0 1.1rem;
	border-bottom: 3px solid var(--wec-ink);
	box-shadow: inset 0 -3px 0 var(--wec-teal);
}

.site-header .site-branding-container,
.site-header .site-branding {
	color: var(--wec-paper);
}

.site-title,
.site-header .site-title a,
.site-header.featured-image .site-title a {
	font-family: var(--wec-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
	font-size: 1.55em;
}

.site-header .site-title a:hover {
	color: var(--wec-teal-soft);
}

.site-description,
.site-header.featured-image .site-description {
	color: var(--wec-muted);
	font-family: var(--wec-body);
	font-size: 0.95em;
	letter-spacing: 0.01em;
}

.main-navigation a,
.site-header.featured-image .main-navigation a {
	color: var(--wec-paper);
	font-family: var(--wec-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: 0.82em;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
	color: var(--wec-teal);
}

.main-navigation .sub-menu,
.main-navigation .sub-menu a {
	background: var(--wec-ink-2);
	color: var(--wec-paper);
}

.main-navigation .main-menu > li {
	margin-right: 1.1rem;
}

/* ---------- Footer ---------- */

#colophon.site-footer {
	background: var(--wec-ink);
	color: var(--wec-muted);
	margin-top: 4rem;
	padding: 2rem 0;
	border-top: 3px solid var(--wec-teal);
}

body.home #colophon.site-footer {
	margin-top: 0;
}

.site-footer a,
.site-info a {
	color: var(--wec-muted);
}

.site-footer a:hover {
	color: var(--wec-teal-soft);
}

/* ---------- Buttons ---------- */

.wec-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.wc-block-components-button,
.entry .entry-content .wp-block-button .wp-block-button__link {
	display: inline-block;
	background: var(--wec-yellow);
	color: var(--wec-ink);
	font-family: var(--wec-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.88em;
	line-height: 1;
	padding: 0.95em 1.4em;
	border: 2px solid var(--wec-ink);
	border-radius: 2px;
	box-shadow: var(--wec-shadow-sm);
	text-decoration: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.wec-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--wec-yellow-hover);
	color: var(--wec-ink);
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 rgba(8, 12, 17, 0.85);
}

.wec-btn-ghost {
	background: transparent;
	color: var(--wec-paper);
	border-color: var(--wec-paper);
	box-shadow: none;
}

.wec-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--wec-teal-soft);
	border-color: var(--wec-teal-soft);
	transform: none;
	box-shadow: none;
}

/* ---------- Front page ---------- */

body.home .site-content {
	background: var(--wec-ink);
	color: var(--wec-paper);
	padding: 0;
}

.wec-front {
	width: 100%;
	margin: 0;
}

.wec-front section {
	position: relative;
	padding: 3.5rem 1.25rem;
}

.wec-front .wec-inner {
	max-width: 1140px;
	margin: 0 auto;
}

/* Hero */

.wec-hero {
	background: var(--wec-ink);
	overflow: hidden;
}

.wec-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(62, 198, 216, 0.16) 1.2px, transparent 1.4px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.9), transparent 55%);
	mask-image: linear-gradient(115deg, rgba(0,0,0,0.9), transparent 55%);
	pointer-events: none;
}

.wec-hero .wec-inner {
	display: grid;
	grid-template-columns: minmax(240px, 380px) 1fr;
	gap: 3rem;
	align-items: center;
}

.wec-hero-cover img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid #000;
	box-shadow: var(--wec-shadow);
	transform: rotate(-1.2deg);
	transition: transform 150ms ease;
}

.wec-hero-cover a:hover img {
	transform: rotate(0deg) translateY(-4px);
}

.wec-eyebrow {
	font-family: var(--wec-display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.85rem;
	color: var(--wec-teal);
	margin: 0 0 0.75rem;
}

.wec-hero-title {
	font-size: clamp(1.7rem, 4vw, 2.9rem);
	line-height: 1.12;
	color: #ffffff;
	margin: 0 0 1rem;
}

.wec-hero-price {
	font-family: var(--wec-display);
	font-size: 1.35rem;
	color: var(--wec-yellow);
	margin: 0 0 1.6rem;
}

.wec-hero-price del {
	color: var(--wec-muted);
	margin-right: 0.5em;
}

.wec-hero-price ins {
	text-decoration: none;
}

.wec-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
	align-items: center;
}

/* Cover wall */

.wec-wall {
	background: var(--wec-ink-2);
	border-top: 3px solid var(--wec-line);
	border-bottom: 3px solid var(--wec-line);
}

.wec-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1140px;
	margin: 0 auto 1.8rem;
}

.wec-section-head h2 {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.5rem;
	margin: 0;
}

.wec-section-head a {
	color: var(--wec-teal);
	font-family: var(--wec-display);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}

.wec-section-head a:hover {
	color: var(--wec-teal-soft);
}

.wec-wall-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1140px;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1.3rem;
}

.wec-wall-grid li {
	margin: 0;
}

.wec-wall-grid img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid #000;
	box-shadow: var(--wec-shadow-sm);
	transition: transform 130ms ease, box-shadow 130ms ease;
}

.wec-wall-grid a:hover img {
	transform: translate(-3px, -3px);
	box-shadow: 8px 8px 0 rgba(8, 12, 17, 0.85);
}

/* Studio strip */

.wec-studio {
	background: var(--wec-ink);
}

.wec-studio .wec-inner {
	display: grid;
	grid-template-columns: minmax(180px, 260px) 1fr;
	gap: 2.6rem;
	align-items: center;
}

.wec-studio-photo,
.wec-studio img {
	display: block;
	width: 100%;
	height: auto;
	border: 3px solid #000;
	box-shadow: var(--wec-shadow-sm);
	transform: rotate(1.1deg);
}

.wec-studio h2 {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.wec-studio-copy p {
	color: var(--wec-muted);
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 60ch;
}

.wec-studio-copy a {
	color: var(--wec-teal);
}

.wec-studio-copy a:hover {
	color: var(--wec-teal-soft);
}

.wec-studio-copy .has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wec-display);
	color: var(--wec-yellow);
	font-size: 3.4em;
	margin: 0.05em 0.12em 0 0;
}

/* Newsletter strip */

.wec-newsletter {
	background: var(--wec-ink-2);
	border-top: 3px solid var(--wec-line);
	text-align: center;
}

.wec-newsletter::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 90px;
	background-image: radial-gradient(rgba(255, 207, 63, 0.14) 1.2px, transparent 1.4px);
	background-size: 13px 13px;
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
	pointer-events: none;
}

.wec-newsletter h2 {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.6rem;
	margin: 0 0 0.6rem;
}

.wec-newsletter p {
	color: var(--wec-muted);
	max-width: 52ch;
	margin: 0 auto 1.7rem;
}

.wec-newsletter .wec-hero-actions {
	justify-content: center;
}

/* ---------- Inner pages ---------- */

body:not(.home) .site-content {
	background: var(--wec-paper);
}

body:not(.home) .entry .entry-title,
body:not(.home) .page-title {
	color: var(--wec-paper-ink);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.entry .entry-title::before,
.page-title::before {
	background: var(--wec-teal);
	height: 4px;
}

.entry .entry-content a,
.entry .entry-summary a {
	color: var(--wec-teal-deep);
	text-decoration-color: var(--wec-teal);
}

.entry .entry-content a:hover {
	color: var(--wec-paper-ink);
}

.entry .entry-content .has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wec-display);
	color: var(--wec-teal-deep);
}

.entry .entry-content h2,
.entry .entry-content h3 {
	color: var(--wec-paper-ink);
}

.entry .entry-content img,
.entry .entry-content .wp-block-image img {
	border: 3px solid var(--wec-paper-ink);
	box-shadow: var(--wec-shadow-sm);
}

/* ---------- WooCommerce ---------- */

.woocommerce-breadcrumb {
	font-size: 0.85em;
	color: var(--wec-muted-dark);
}

.woocommerce ul.products li.product {
	background: #ffffff;
	border: 2px solid var(--wec-paper-ink);
	box-shadow: var(--wec-shadow-sm);
	padding: 0.9rem 0.9rem 1.2rem;
	transition: transform 130ms ease, box-shadow 130ms ease;
}

.woocommerce ul.products li.product:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 rgba(8, 12, 17, 0.85);
}

.woocommerce ul.products li.product a img {
	border: 1px solid var(--wec-paper-ink);
	margin-bottom: 0.8rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wec-body);
	font-weight: 600;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--wec-paper-ink);
}

.woocommerce ul.products li.product .price {
	font-family: var(--wec-display);
	color: var(--wec-teal-deep);
	font-size: 1.05em;
	font-weight: 600;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wec-display);
	color: var(--wec-teal-deep);
	font-size: 1.5em;
}

.woocommerce div.product .product_title {
	font-family: var(--wec-display);
	font-weight: 600;
}

.woocommerce div.product div.images img {
	border: 3px solid var(--wec-paper-ink);
	box-shadow: var(--wec-shadow);
}

.woocommerce .woocommerce-ordering select {
	border: 2px solid var(--wec-paper-ink);
	background: #ffffff;
	padding: 0.45em 0.6em;
	font-family: var(--wec-body);
}

.woocommerce nav.woocommerce-pagination ul {
	border: 2px solid var(--wec-paper-ink);
}

.woocommerce nav.woocommerce-pagination ul li {
	border-right: 2px solid var(--wec-paper-ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--wec-yellow);
	color: var(--wec-ink);
}

.woocommerce-store-notice,
p.demo_store {
	background: var(--wec-yellow);
	color: var(--wec-ink);
}

.woocommerce span.onsale {
	background: var(--wec-teal-deep);
	font-family: var(--wec-display);
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
	.wec-wall-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.wec-hero .wec-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.wec-hero-cover {
		max-width: 300px;
		margin: 0 auto;
	}

	.wec-studio .wec-inner {
		grid-template-columns: 1fr;
	}

	.wec-studio-photo,
	.wec-studio img {
		max-width: 240px;
	}

	.wec-wall-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 0.9rem;
	}

	.wec-section-head {
		flex-direction: column;
		gap: 0.3rem;
	}
}

@media (max-width: 480px) {
	.wec-wall-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- v1.0.1 fixes ---------- */

body.home {
	background: var(--wec-ink);
}

body.home .site-featured-image .entry-header,
body.home .site-featured-image .entry-title {
	display: none;
}

.main-navigation .main-menu > li > a,
.main-navigation ul.main-menu > li > a,
.site-header .main-navigation a:link,
.site-header .main-navigation a:visited {
	color: var(--wec-paper);
}

.site-header .main-navigation a:hover,
.main-navigation .main-menu > li > a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--wec-teal);
}

.main-navigation button.main-menu-more-toggle,
.site-header .main-navigation .mobile-parent-nav-menu-button {
	color: var(--wec-paper);
}

@media (max-width: 599px) {
	.site-title,
	.site-header .site-title a {
		font-size: 1.1em;
	}

	.site-description {
		font-size: 0.85em;
	}
}

/* Variations table */

.woocommerce div.product form.cart .variations th.label {
	white-space: nowrap;
	vertical-align: middle;
	padding-right: 1em;
	font-family: var(--wec-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85em;
}

.woocommerce div.product form.cart .variations td.value {
	width: 100%;
}

.woocommerce div.product form.cart .variations select {
	border: 2px solid var(--wec-paper-ink);
	background: #ffffff;
	padding: 0.5em 0.7em;
	font-family: var(--wec-body);
	max-width: 100%;
}

/* Product gallery: full-cover thumbnails */

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.7rem;
	margin-top: 0.9rem;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--wec-paper-ink);
	opacity: 0.7;
	transition: opacity 120ms ease, box-shadow 120ms ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	opacity: 1;
	box-shadow: 3px 3px 0 rgba(8, 12, 17, 0.5);
}

@media (max-width: 767px) {
	.woocommerce div.product div.images .flex-control-thumbs {
		grid-template-columns: repeat(3, 1fr);
	}
}