/*----------------------------------------------------------------
	Canvas Demo: Gaming

	Design stylesheet for the Gaming demo. Ported as-authored;
	only the relative url() paths are rewritten so they resolve
	next to this file (gaming/images/). Loaded only while the
	Gaming demo is active.
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #e62429;
	--cnvs-themecolor-rgb: 230, 36, 41;

	--cnvs-dark-themecolor: #0a131d;
	--cnvs-dark-themecolor-rgb: 10, 19, 29;

	--cnvs-body-bg: transparent;
	--cnvs-body-image: linear-gradient(to bottom, rgba(var(--cnvs-dark-themecolor-rgb), 0.9), rgba(var(--cnvs-dark-themecolor-rgb), 0.95)), url('gaming/images/body-bg.jpg');

	--cnvs-primary-font: "timonium", sans-serif;
	--cnvs-body-font: "tenon", sans-serif;
	--cnvs-secondary-font: var(--cnvs-primary-font);

	--cnvs-slider-arrows-bg-color: transparent;
}

body {
	background-image: var(--cnvs-body-image);
	background-size: cover;
	background-position: top;
	background-repeat: repeat;
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#header {
	--cnvs-primary-menu-font-size: 1rem;
	--cnvs-primary-menu-color: 1rem;
	--cnvs-header-sticky-bg: transparent;
}

.is-expanded-menu #header.transparent-header:not(.sticky-header) #header-wrap {
	--cnvs-header-bg: transparent;

}

.is-expanded-menu #header.transparent-header #header-wrap .container {
	transition: margin .2s ease;
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container {
	margin-top: 20px;
	--cnvs-primary-menu-hover-color: #000;
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .button-gaming {
	--cnvs-btn-gaming-color: var(--cnvs-themecolor);
	--cnvs-btn-gaming-bg: #FFF;
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .menu-container {
	margin-left: 20px;
}

.text-shadow-effect,
.h-text-shadow-effect:hover {
	--cnvs-text-shadow-size: 2px;
	text-shadow: var(--cnvs-text-shadow-size) var(--cnvs-text-shadow-size) var(--cnvs-themecolor);
	transition: text-shadow 0.5s ease;
}

.text-shadow-effect-size-1,
.h-text-shadow-effect-size-1:hover {
	--cnvs-text-shadow-size: 1px;
}

.text-shadow-effect-size-2,
.h-text-shadow-effect-size-2:hover {
	--cnvs-text-shadow-size: 2px;
}

.text-shadow-effect-size-3,
.h-text-shadow-effect-size-3:hover {
	--cnvs-text-shadow-size: 3px;
}

.text-shadow-effect-size-4,
.h-text-shadow-effect-size-4:hover {
	--cnvs-text-shadow-size: 4px;
}

.text-shadow-effect-size-0,
.h-text-shadow-effect-size-0:hover {
	--cnvs-text-shadow-size: 0px;
}

/* button-gaming */
.button-gaming {
	--cnvs-btn-gaming-bg: var(--cnvs-themecolor);
	--cnvs-btn-gaming-color: #FFF;
	--cnvs-btn-gaming-size: 14px;
	--cnvs-btn-gaming-padding: 30px;
	--cnvs-btn-gaming-transition: all .3s ease;
    position: relative;
    padding: 0;
}

.button-gaming:hover {
	--cnvs-btn-gaming-color: var(--cnvs-themecolor);
	--cnvs-btn-gaming-bg: #FFF;
}

.button-gaming::before,
.button-gaming::after {
    content: "";
    display: block;
    height: var(--cnvs-btn-gaming-size);
	border-style: solid;
    border-color: var(--cnvs-btn-gaming-bg);
	background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.button-gaming::before {
	border-width: 0 0 var(--cnvs-btn-gaming-size) var(--cnvs-btn-gaming-size);
    margin-left: var(--cnvs-btn-gaming-size);
}

.button-gaming::after {
    margin-right: var(--cnvs-btn-gaming-size);
}

.button-gaming::after {
    border-color: var(--cnvs-btn-gaming-bg);
	background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.button-gaming .button-span-text:before,
.button-gaming .button-span-text:after {
	content: "";
    display: block;
    position: absolute;
    border-width: 0 0 var(--cnvs-btn-gaming-size) var(--cnvs-btn-gaming-size);
    border-style: solid;
	border-color: var(--cnvs-btn-gaming-bg) transparent;
	transition: var(--cnvs-btn-gaming-transition);
}

.button-gaming .button-span-text {
	display: block;
    text-align: center;
    padding: 0 var(--cnvs-btn-gaming-padding);
	color: var(--cnvs-btn-gaming-color);
    background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.button-gaming .button-span-text::before {
	left: 0;
    top: 0;
	border-color: var(--cnvs-btn-gaming-bg) transparent;
	transition: var(--cnvs-btn-gaming-transition);
}

.button-gaming .button-span-text:after {
	bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

/* button-gaming */
.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container {
	--cnvs-btn-gaming-bg: var(--cnvs-themecolor);
	--cnvs-btn-gaming-color: #FFF;
	--cnvs-btn-gaming-size: 14px;
	--cnvs-btn-gaming-padding: 30px;
	--cnvs-btn-gaming-transition: all .3s ease;
    position: relative;
    padding: 0;
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container::before,
.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container::after {
    content: "";
    display: block;
    height: var(--cnvs-btn-gaming-size);
	border-style: solid;
    border-color: var(--cnvs-btn-gaming-bg);
	background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container::before {
	border-width: 0 0 var(--cnvs-btn-gaming-size) var(--cnvs-btn-gaming-size);
    margin-left: var(--cnvs-btn-gaming-size);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container::after {
    margin-right: var(--cnvs-btn-gaming-size);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container::after {
    border-color: var(--cnvs-btn-gaming-bg);
	background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .header-row:before,
.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .header-row:after {
	content: "";
    display: block;
    position: absolute;
    border-width: 0 0 var(--cnvs-btn-gaming-size) var(--cnvs-btn-gaming-size);
    border-style: solid;
	border-color: var(--cnvs-btn-gaming-bg) transparent;
	transition: var(--cnvs-btn-gaming-transition);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .header-row {
	background-color: var(--cnvs-btn-gaming-bg);
	transition: var(--cnvs-btn-gaming-transition);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .header-row::before {
	left: 0;
    top: 0;
	border-color: var(--cnvs-btn-gaming-bg) transparent;
	transition: var(--cnvs-btn-gaming-transition);
}

.is-expanded-menu #header.transparent-header.sticky-header #header-wrap .container .header-row:after {
	bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

.media-wrap {
	padding: 13px;
}


.media-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(gaming/images/frame.svg);
}

.media-wrap.media-is-playing:not(:hover) .media-trigger-playback {
	opacity: 0;
}

.swiper-slide {
	width: 80%;
	padding-left: 10px;
	padding-right: 10px;
}

.swiper-slide:not(.swiper-slide-active) {
	opacity: .3;
}

.slider-arrow-left,
.slider-arrow-right {
	--cnvs-slider-arrows-size: 64px;
	--cnvs-slider-arrows-offset: 30px;
    left: var(--cnvs-slider-arrows-offset);
    transform: translateY(-50%);
	border: 0;
	text-align: center;
	transition: all .3s;
}

.slider-arrow-left svg,
.slider-arrow-right svg {
	width: var(--cnvs-slider-arrows-size);
	height: var(--cnvs-slider-arrows-size);
	text-align: center;
	fill: #FFF;
}

.slider-arrow-left:hover,
.slider-arrow-right:hover {
	--cnvs-slider-arrows-bg-hover-color: transparent;
	transform: translateY(-50%) scale(1.25);
}
.slider-arrow-left:hover svg,
.slider-arrow-right:hover svg {
	fill: #D9851A;
}

.slider-arrow-right {
	left: auto;
	right: var(--cnvs-slider-arrows-offset);
}

.swiper-button-disabled {
	display: none;
}

@media (max-width: 767px) {
	.slider-arrow-left,
	.slider-arrow-right {
		--cnvs-slider-arrows-size: 34px;
		--cnvs-slider-arrows-offset: 20px;
	}
}


/* Page Loaders */
.css3-spinner {
	background: var(--cnvs-dark-themecolor);
}

.css3-spinner > div {
	--cnvs-loader-width: 80px;
	aspect-ratio: 1;
	display: grid;
	color: var(--cnvs-themecolor);
	background:
		conic-gradient(from -153deg at right,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% + 5px) 0   /10px 50%,
		conic-gradient(from   27deg at left ,#0000,currentColor 1deg 126deg,#0000 127deg) calc(50% - 5px) 100%/10px 50%,
		linear-gradient(to top    right,currentColor 50%,#0000 0%) calc(50% + 10px) calc(50% - 10px) /20px 20px,
		linear-gradient(to bottom left ,currentColor 50%,#0000 0%) calc(50% - 10px) calc(50% + 10px) /20px 20px;
	background-repeat: no-repeat;
	-webkit-mask: radial-gradient(circle 5px,#0000 90%,#000);
	animation: loader_spin 1.5s infinite linear;
}
.css3-spinner > div:before,
.css3-spinner > div:after {
	content: "";
	grid-area: 1/1;
	background: inherit; 
	transform: rotate(60deg);
}
.css3-spinner > div:after {
	transform: rotate(120deg);
}
@keyframes loader_spin { 
	100% {
		transform: rotate(1turn);
	}
}

.award-svg {
	width: 128px !important;
	height: auto !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADDITIVE: beyond the design's own stylesheet.

   The design ships one page. Everything below dresses the parts a complete
   website needs and that single page never shows: the inner-page bands, the
   news archive and single, the match records, the pre-order store, the cart
   and checkout, and the sidebar widgets WordPress renders as core blocks.
   Everything uses the design's own tokens, and every rule is scoped so it can
   never reach a site that is not running this demo.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─ Inner page bands ─ */
.gaming-band {
	position: relative;
	overflow: hidden;
	padding: 10rem 0 5rem;
	background: linear-gradient(to bottom, rgba(var(--cnvs-dark-themecolor-rgb), 0.4), var(--cnvs-dark-themecolor));
}

.gaming-band::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 70%;
	height: 2px;
	transform: translateX(-50%);
	background: linear-gradient(to right, transparent, rgba(var(--cnvs-themecolor-rgb), 0.7), transparent);
}

.gaming-band-title {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ─ Stat / spec tiles ─ */
.gaming-tile {
	height: 100%;
	padding: 2rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.gaming-tile-figure {
	display: block;
	font-family: var(--cnvs-primary-font);
	font-size: 2.75rem;
	line-height: 1;
	color: var(--cnvs-themecolor);
}

.gaming-tile-label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
	.gaming-tile:hover {
		border-color: rgba(var(--cnvs-themecolor-rgb), 0.55);
		background: rgba(var(--cnvs-themecolor-rgb), 0.06);
	}
}

/* ─ Match records ─ */
.gaming-fixture {
	display: block;
	height: 100%;
	padding: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.gaming-fixture-event {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

.gaming-fixture-teams {
	margin: 0.6rem 0 0.35rem;
	font-family: var(--cnvs-primary-font);
	font-size: 1.35rem;
	line-height: 1.25;
	text-transform: uppercase;
}

.gaming-fixture-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: 0;
	font-size: 0.82rem;
	opacity: 0.7;
}

.gaming-fixture-status {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.2rem 0.75rem;
	border-radius: 100px;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: rgba(var(--cnvs-themecolor-rgb), 0.14);
	color: var(--cnvs-themecolor);
}

@media (hover: hover) and (pointer: fine) {
	.gaming-fixture:hover {
		border-color: rgba(var(--cnvs-themecolor-rgb), 0.55);
		transform: translateY(-4px);
	}
}

/* ─ News archive and single ─ */
.gaming-archive .entry,
.gaming-post .entry,
.gaming-match .entry {
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.gaming-archive .entry-title h2,
.gaming-archive .entry-title h3,
.gaming-post .entry-title h1,
.gaming-post .entry-title h2 {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gaming-archive .entry-title h2 a,
.gaming-archive .entry-title h3 a {
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.gaming-archive .entry-title h2 a:hover,
	.gaming-archive .entry-title h3 a:hover {
		color: var(--cnvs-themecolor);
	}
}

.gaming-archive .entry-meta li,
.gaming-post .entry-meta li {
	font-size: 0.8rem;
	opacity: 0.65;
}

.gaming-post .entry-content {
	font-size: 1rem;
	line-height: 1.85;
}

/* The blog templates hardcode `text-dark` on their post-navigation and author
   links, which is right on a light design and invisible on this one. Chips that
   pair it with `bg-light` keep their dark text. */
.gaming-archive a.text-dark:not(.bg-light),
.gaming-post a.text-dark:not(.bg-light),
.gaming-match a.text-dark:not(.bg-light),
.gaming-store a.text-dark:not(.bg-light) {
	color: var(--cnvs-contrast-900) !important;
}

@media (hover: hover) and (pointer: fine) {
	.gaming-archive a.text-dark:not(.bg-light):hover,
	.gaming-post a.text-dark:not(.bg-light):hover,
	.gaming-match a.text-dark:not(.bg-light):hover,
	.gaming-store a.text-dark:not(.bg-light):hover {
		color: var(--cnvs-themecolor) !important;
	}
}

/* Feature images mix portrait character art with landscape scenes, so an
   unpinned card image renders several times the height of its neighbours and
   pulls its whole grid row — and the article's own lede — apart. */
.gaming-archive #posts .entry-image img,
.gaming-post .entry-image img.wp-post-image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.gaming-post .related-posts .entry-image img.wp-post-image {
	width: auto;
	aspect-ratio: 1 / 1;
}

/* ─ Sidebar widgets (WordPress renders these as core blocks) ─ */
.gaming-post .sidebar .widget,
.gaming-archive .sidebar .widget {
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
}

.gaming-post .sidebar .widget-title,
.gaming-post .sidebar h4,
.gaming-archive .sidebar .widget-title,
.gaming-archive .sidebar h4 {
	margin-bottom: 1rem;
	font-family: var(--cnvs-primary-font);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

.gaming-post .sidebar .wp-block-latest-posts__list,
.gaming-post .sidebar .wp-block-categories,
.gaming-archive .sidebar .wp-block-latest-posts__list,
.gaming-archive .sidebar .wp-block-categories {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gaming-post .sidebar .wp-block-latest-posts__list li,
.gaming-post .sidebar .wp-block-categories li,
.gaming-archive .sidebar .wp-block-latest-posts__list li,
.gaming-archive .sidebar .wp-block-categories li {
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.9rem;
}

.gaming-post .sidebar a,
.gaming-archive .sidebar a {
	color: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
	.gaming-post .sidebar a:hover,
	.gaming-archive .sidebar a:hover {
		color: var(--cnvs-themecolor);
	}
}

.gaming-post .sidebar .tag-cloud-link,
.gaming-archive .sidebar .tag-cloud-link {
	display: inline-block;
	margin: 0 0.3rem 0.5rem 0;
	padding: 0.25rem 0.8rem;
	border-radius: 100px;
	font-size: 0.78rem !important;
	background: rgba(var(--cnvs-themecolor-rgb), 0.12);
	color: var(--cnvs-themecolor);
}

/* ─ Store: pre-order grid, product single, cart, checkout ─ */
.gaming-shop .product-image {
	border-radius: 0.75rem;
	overflow: hidden;
}

.gaming-shop .product-title h3,
.gaming-shop .product-title h3 a {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.gaming-shop .product-title h3 a:hover {
		color: var(--cnvs-themecolor);
	}
}

.gaming-shop .product-price,
.gaming-shop .product-price ins,
.gaming-single .price,
.gaming-single .price .woocommerce-Price-amount {
	color: var(--cnvs-themecolor);
	font-family: var(--cnvs-primary-font);
}

.gaming-shop .bg-overlay .btn,
.gaming-single .single_add_to_cart_button,
.gaming-cart a.button,
.gaming-checkout #place_order {
	border: 0;
	border-radius: 0;
	font-family: var(--cnvs-primary-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	background-color: var(--cnvs-themecolor);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.gaming-shop .bg-overlay .btn:hover,
	.gaming-single .single_add_to_cart_button:hover,
	.gaming-cart a.button:hover,
	.gaming-checkout #place_order:hover {
		background-color: #fff;
		color: var(--cnvs-themecolor);
	}
}

.gaming-single .entry,
.gaming-single .product {
	box-shadow: none;
}

.gaming-single h1,
.gaming-single .product_title,
.gaming-cart h1,
.gaming-checkout h1 {
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gaming-cart .canvas-cart-table,
.gaming-cart .canvas-cart-totals,
.gaming-checkout .canvas-checkout-billing,
.gaming-checkout .canvas-checkout-order {
	padding: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.03);
}

.gaming-cart .canvas-cart-totals .order-total .amount,
.gaming-checkout .canvas-checkout-order .order-total .amount {
	color: var(--cnvs-themecolor);
	font-family: var(--cnvs-primary-font);
}

.gaming-cart input.form-control:focus,
.gaming-checkout input.form-control:focus,
.gaming-checkout textarea.form-control:focus,
.gaming-checkout select.form-select:focus {
	border-color: var(--cnvs-themecolor);
	box-shadow: 0 0 0 0.2rem rgba(var(--cnvs-themecolor-rgb), 0.2);
}

/* ─ Fixture record page ─ */
.single-match-meta {
	margin-bottom: 2rem;
}

.gaming-fixture-attributes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.75rem;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.gaming-fixture-attributes li {
	padding: 1rem 1.25rem;
	background: var(--cnvs-dark-themecolor);
}

.gaming-fixture-attributes .attr-label {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.6;
}

.gaming-fixture-attributes .attr-value {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--cnvs-primary-font);
	font-size: 1.05rem;
}

.single-match-cta,
.single-match-footer {
	margin-top: 2.5rem;
}

.single-match-watch,
.single-match-back {
	border: 0;
	border-radius: 0;
	font-family: var(--cnvs-primary-font);
	text-transform: uppercase;
	letter-spacing: 1px;
	background-color: var(--cnvs-themecolor);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	.single-match-watch:hover,
	.single-match-back:hover {
		background-color: #fff;
		color: var(--cnvs-themecolor);
	}
}

.gaming-match-related {
	margin-top: 3rem;
}

.gaming-match-related-title {
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
}