/*
Theme Name: FitNot Games
Theme URI: https://fitnotgames.com
Author: FitNot Games
Description: One-page block theme for FitNot Games. Hero, alternating game rows with video + screenshot carousel and configurable platform buttons, and a contact section.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fitnot
Tags: one-column, block-patterns, full-site-editing, custom-colors
*/

/* ==========================================================================
   Header
   ========================================================================== */

.fitnot-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(10px);
	background-color: rgba(251, 246, 238, 0.86);
	border-bottom: 1px solid rgba(46, 42, 38, 0.08);
}

/* Wordmark fallback — used when no logo image is set */
.fitnot-logo a,
.fitnot-logo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
	letter-spacing: 0.01em;
}

/* LOGO IMAGE
   Constrains any image dropped into the header, whatever its intrinsic size.
   Adjust --fitnot-logo-height to resize; everything else follows. */
.fitnot-header {
	/* Tuned for a SQUARE logo (512×512) with internal padding.
	   A wide/horizontal lockup can go smaller — try 40–44px. */
	--fitnot-logo-height: 56px;
}

/* WHITE-BACKGROUND LOGO
   A square PNG/JPG with a white background shows as a visible box on the
   cream header. Two options — pick one:

   1) BEST: export the logo as a transparent PNG or SVG, then delete this
      whole block. Nothing else needed.

   2) QUICK FIX: uncomment below to blend a white background into the cream
      header. Works because the mark is pure black on pure white; it will
      also lighten the black slightly. */
/*
.fitnot-header .fitnot-logo img {
	mix-blend-mode: multiply;
}
*/

.fitnot-header .wp-block-site-logo,
.fitnot-header .fitnot-logo,
.fitnot-header .wp-block-image {
	margin: 0;
	line-height: 0;
}

/* Catch-all: ANY image anywhere in the header, however it was inserted
   (Image block, Site Logo block, Cover, or raw <img>). !important is
   deliberate — the Site Logo and Image blocks emit inline width/height
   attributes and per-block CSS that otherwise win. */
.fitnot-header img,
.fitnot-header .wp-block-image img,
.fitnot-header .wp-block-site-logo img,
.fitnot-header .fitnot-logo img,
.fitnot-header figure img,
.fitnot-header a img {
	height: var(--fitnot-logo-height) !important;
	width: auto !important;
	max-width: 240px !important;
	min-width: 0 !important;
	object-fit: contain;
	display: block;
}

/* Wrappers must not impose their own height or width either */
.fitnot-header figure,
.fitnot-header .wp-block-image,
.fitnot-header .wp-block-site-logo,
.fitnot-header .wp-block-site-logo a,
.fitnot-header .fitnot-logo,
.fitnot-header .fitnot-logo a {
	height: auto !important;
	width: auto !important;
	max-width: 240px;
	margin: 0;
	line-height: 0;
	display: flex;
	align-items: center;
}

/* Keep the header row itself compact regardless of logo intrinsic size */
.fitnot-header > .wp-block-group,
.fitnot-header .wp-block-group.is-nowrap {
	align-items: center;
}

@media (max-width: 781px) {
	.fitnot-header {
		--fitnot-logo-height: 34px;
	}
}

.fitnot-header .wp-block-navigation {
	font-weight: 600;
	font-size: 0.95rem;
}

/* Nav "Contact" pill — the last nav item reads as a button */
.fitnot-nav .wp-block-navigation-item:last-child a {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
}

.fitnot-nav .wp-block-navigation-item:last-child a:hover {
	background-color: var(--wp--preset--color--terracotta-dark);
	text-decoration: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Hero is a Cover block — use its toolbar/sidebar to upload the background image. */
.fitnot-hero {
	position: relative;
	text-align: center;
}

/* Keeps the focal point on the artwork's subject when cropped narrow */
.fitnot-hero img.wp-block-cover__image-background {
	object-position: 50% 40%;
}

.fitnot-hero .wp-block-cover__inner-container {
	max-width: 1280px;
	margin-inline: auto;
	width: 100%;
}

.fitnot-hero .fitnot-hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	font-weight: 700;
	opacity: 0.9;
}

/* ==========================================================================
   Game rows
   ========================================================================== */

.fitnot-game-row {
	scroll-margin-top: 90px; /* clears the sticky header on anchor jumps */
}

.fitnot-game-row .wp-block-columns,
.fitnot-game-row .wp-block-columns.are-vertically-aligned-center {
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* Columns must not stretch — WordPress sets align-self on the column itself */
.fitnot-game-row .wp-block-column.is-vertically-aligned-center {
	align-self: center;
}

.fitnot-game-title {
	margin-bottom: 0.35rem;
}

.fitnot-game-meta {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--wp--preset--color--sage);
	margin-bottom: 1rem;
}

/* --- Trailer: uploaded video OR embedded YouTube/Vimeo -------------------
   Both must fill the column at a clean 16:9. Embeds nest an extra wrapper
   (.wp-block-embed__wrapper) that needs the aspect ratio applied to it. */

.fitnot-game-media .wp-block-video,
.fitnot-game-media .wp-block-embed,
.fitnot-game-media figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.fitnot-game-media .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--plum);
	box-shadow: 0 18px 40px -18px rgba(46, 42, 38, 0.45);
}

.fitnot-game-media .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Uploaded video.
   WordPress writes an inline aspect-ratio from the file's own dimensions, so
   portrait clips (e.g. 382×850 mobile capture) would otherwise render ~1500px
   tall. Cap the height and letterbox instead of stretching. */
.fitnot-game-media .wp-block-video video,
.fitnot-game-media > figure.wp-block-video video {
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	max-height: 70vh;
	display: block;
	border-radius: 14px;
	background: var(--wp--preset--color--plum);
	box-shadow: 0 18px 40px -18px rgba(46, 42, 38, 0.45);
	/* contain, not cover — never crop gameplay footage */
	object-fit: contain;
}

/* --- Screenshot carousel: CSS scroll-snap, no JavaScript, no plugin ------
   Works with EITHER a Gallery block or loose Image blocks inside
   .fitnot-carousel, because WordPress inserts them differently depending
   on how the images were added. */

.fitnot-carousel {
	margin-top: 1rem;
}

.fitnot-carousel,
.fitnot-carousel .wp-block-gallery {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 0.75rem;
	padding-bottom: 0.6rem;
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: rgba(184, 92, 56, 0.5) transparent;
	-webkit-overflow-scrolling: touch;
}

/* If a Gallery block is present it becomes the scroller, so the outer
   wrapper must not scroll as well. */
.fitnot-carousel:has(.wp-block-gallery) {
	display: block;
	overflow: visible;
	padding-bottom: 0;
}

/* Thumbnails — same sizing whichever structure is used */
.fitnot-carousel .wp-block-image,
.fitnot-carousel .wp-block-gallery .wp-block-image,
.fitnot-carousel > figure {
	flex: 0 0 clamp(140px, 31%, 220px);
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
}

.fitnot-carousel .wp-block-image img,
.fitnot-carousel .wp-block-gallery .wp-block-image img,
.fitnot-carousel > figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 9px;
	display: block;
}

.fitnot-carousel::-webkit-scrollbar,
.fitnot-carousel .wp-block-gallery::-webkit-scrollbar {
	height: 7px;
}

.fitnot-carousel::-webkit-scrollbar-track,
.fitnot-carousel .wp-block-gallery::-webkit-scrollbar-track {
	background: rgba(46, 42, 38, 0.07);
	border-radius: 99px;
}

.fitnot-carousel::-webkit-scrollbar-thumb,
.fitnot-carousel .wp-block-gallery::-webkit-scrollbar-thumb {
	background: rgba(184, 92, 56, 0.55);
	border-radius: 99px;
}

/* The media column must never be widened by its contents (embeds report
   their own intrinsic width, which is what made the YouTube frame narrow). */
.fitnot-game-media {
	min-width: 0;
}

.fitnot-game-media > * {
	max-width: 100%;
}

/* --- Platform buttons: add or remove freely, they wrap ------------------- */

.fitnot-platforms {
	margin-top: 1.75rem;
}

.fitnot-platforms .wp-block-buttons {
	gap: 0.6rem;
	flex-wrap: wrap;
}

.fitnot-platforms .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Outline variant for secondary stores */
.fitnot-platforms .is-style-outline .wp-block-button__link,
.fitnot-platforms .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--terracotta);
	border: 1.5px solid var(--wp--preset--color--terracotta);
}

.fitnot-platforms .is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.fitnot-contact {
	background-color: var(--wp--preset--color--sand);
}

.fitnot-contact input[type="text"],
.fitnot-contact input[type="email"],
.fitnot-contact textarea,
.fitnot-contact .wp-block-form-input__input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1.5px solid rgba(46, 42, 38, 0.16);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}

.fitnot-contact label {
	font-weight: 600;
	font-size: 0.9rem;
	display: block;
	margin-bottom: 0.35rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fitnot-footer {
	background-color: var(--wp--preset--color--plum);
	color: rgba(251, 246, 238, 0.75);
	font-size: 0.9rem;
}

.fitnot-footer a {
	color: rgba(251, 246, 238, 0.9);
}

.fitnot-footer p {
	margin: 0;
}

/* Social icons — circular, tinted to match the footer */
.fitnot-footer .wp-block-social-links {
	gap: 0.5rem;
	margin: 0;
}

.fitnot-footer .wp-block-social-link {
	background-color: rgba(251, 246, 238, 0.12);
	border-radius: 999px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.fitnot-footer .wp-block-social-link:hover {
	background-color: var(--wp--preset--color--terracotta);
	transform: translateY(-2px);
}

.fitnot-footer .wp-block-social-link a {
	padding: 0.5rem;
}

.fitnot-footer .wp-block-social-link svg {
	width: 1.15em;
	height: 1.15em;
	fill: var(--wp--preset--color--cream);
}

@media (prefers-reduced-motion: reduce) {
	.fitnot-footer .wp-block-social-link:hover {
		transform: none;
	}
}

/* ==========================================================================
   Accessibility & motion
   ========================================================================== */

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2.5px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.fitnot-carousel .wp-block-gallery {
		scroll-behavior: auto;
	}
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Responsive — game rows collapse to media-on-top, single column
   ========================================================================== */

@media (max-width: 781px) {
	.fitnot-game-row .wp-block-columns {
		gap: 1.75rem;
	}

	/* Media always leads on mobile, regardless of desktop side */
	.fitnot-game-row.is-media-right .wp-block-columns {
		flex-direction: column-reverse;
	}

	.fitnot-carousel .wp-block-gallery .wp-block-image {
		flex-basis: 44%;
	}

	.fitnot-header .fitnot-logo a {
		font-size: 1.25rem;
	}
}