/*
Theme Name:        Isle of Wight Stock
Theme URI:         https://isleofwightstock.com
Author:            Isle of Wight Stock Ltd
Author URI:        https://isleofwightstock.com
Description:       Custom block theme for the Isle of Wight Stock asset library. Server-rendered, light + dark mode, designed to host WooCommerce + the iow-* plugin suite. Replaces the Base44 site.
Version:           0.6.2
Tested up to:      6.6
Requires at least: 6.4
Requires PHP:      8.2
License:           Proprietary
License URI:       https://isleofwightstock.com/licence
Text Domain:       iow-stock
Tags:              full-site-editing, block-theme, woocommerce
*/

/*
 * The bulk of the design system is in theme.json — that's the canonical token
 * source. This file holds:
 *   1. A handful of base resets WP doesn't ship
 *   2. Dark-mode token overrides scoped under .dark and prefers-color-scheme
 *   3. Motion utility classes (keyframe animations)
 *   4. Tiny utility classes for things the block editor doesn't express well
 *
 * Keep this file SMALL. If something can live in theme.json, put it there.
 * The block editor only sees tokens that are in theme.json.
 */

/* === Base reset for the things WP doesn't === */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--foreground);
	background-color: var(--wp--preset--color--background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/*
 * Asset images: discourage casual saving.
 * Drag + right-click are also blocked from PHP/JS on asset detail pages.
 */
.iow-asset-media img,
.iow-asset-media video {
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* === Dark mode token overrides ===
 *
 * theme.json holds the light palette (canonical). The dark palette overrides
 * the CSS custom properties WP generates. The .dark class is added by
 * dark-mode-init.js before render to prevent flash-of-light.
 *
 * The variable names match WP's preset:color generator output:
 *   --wp--preset--color--{slug}
 */
.dark {
	/* Charcoal black palette — neutral greyscale, no navy tint. */
	--wp--preset--color--background: hsl(0 0% 7%);
	--wp--preset--color--foreground: hsl(0 0% 95%);
	--wp--preset--color--card: hsl(0 0% 11%);
	--wp--preset--color--card-foreground: hsl(0 0% 95%);
	--wp--preset--color--primary: hsl(0 0% 100%);
	--wp--preset--color--primary-foreground: hsl(0 0% 7%);
	--wp--preset--color--secondary: hsl(0 0% 14%);
	--wp--preset--color--secondary-foreground: hsl(0 0% 92%);
	--wp--preset--color--muted: hsl(0 0% 12%);
	--wp--preset--color--muted-foreground: hsl(0 0% 60%);
	--wp--preset--color--accent: hsl(24 88% 14%);
	--wp--preset--color--accent-foreground: hsl(24 88% 78%);
	--wp--preset--color--warm: hsl(24 88% 67%);
	--wp--preset--color--warm-foreground: hsl(0 0% 7%);
	--wp--preset--color--border: hsl(0 0% 18%);
	--wp--preset--color--input: hsl(0 0% 18%);
	--wp--preset--color--ring: hsl(0 0% 100%);

	--wp--preset--color--exclusive-bg: hsl(30 50% 12%);
	--wp--preset--color--exclusive-border: hsl(30 50% 30%);
	--wp--preset--color--exclusive-text: hsl(45 93% 75%);
	--wp--preset--color--success-bg: hsl(142 30% 12%);
	--wp--preset--color--success-text: hsl(142 50% 70%);
}

/* === Motion utilities ===
 *
 * Framer Motion-style entrance animations as CSS keyframes (cheaper than JS).
 * Trigger by adding the class on render. Stagger delays via -delay-N variants.
 */
.iow-fade-in-up {
	animation: iow-fade-in-up 0.6s ease-out both;
}

.iow-fade-in-up-delay-1 { animation-delay: 0.05s; }
.iow-fade-in-up-delay-2 { animation-delay: 0.10s; }
.iow-fade-in-up-delay-3 { animation-delay: 0.15s; }
.iow-fade-in-up-delay-4 { animation-delay: 0.20s; }

@keyframes iow-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.iow-scroll-indicator {
	animation: iow-scroll-bounce 2s ease-in-out infinite;
}

@keyframes iow-scroll-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(8px); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === Tiny utility classes ===
 *
 * Things the block editor can't express but the templates need.
 * Keep this list short — if it grows, reconsider whether the design system
 * needs another token or pattern.
 */
.iow-screen-reader-only {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.iow-container {
	width: 100%;
	max-width: 80rem; /* 1280px — matches Base44's max-w-7xl */
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (min-width: 640px) {
	.iow-container { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.iow-container { padding-inline: 2rem; }
}

/* === Sticky header ===
 *
 * Moved from block-style attribute to CSS class in v0.1.1 because WP's block
 * parser was rejecting style.position on wp:group as "unexpected content."
 */
.iow-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--background);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* === Stats bar bottom border === */
.iow-stats-bar {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* === Section spacing === */
.iow-section {
	width: 100%;
}

/* === Hero (legacy — used by non-scroll-controlled templates) === */
.iow-hero {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* === Page fade-in (first session load only) ===
 *
 * JS adds .iow-first-load to body on first session visit, then .iow-loaded
 * on window load. CSS transition between the two gives a premium fade-in.
 * Subsequent navigations skip the fade entirely so it doesn't get annoying.
 */
body.iow-first-load {
	opacity: 0;
}
body.iow-first-load.iow-loaded {
	opacity: 1;
	transition: opacity 600ms ease-out;
}

/* === Section reveal-on-scroll ===
 *
 * Any element with [data-iow-reveal] starts hidden and fades up when
 * scrolled into view. IntersectionObserver adds .iow-revealed.
 *
 * Runs every page visit. Reduced-motion users get instant reveals.
 */
[data-iow-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}
[data-iow-reveal].iow-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	body.iow-first-load,
	body.iow-first-load.iow-loaded {
		opacity: 1 !important;
		transition: none !important;
	}
	[data-iow-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}