/*
Theme Name: OOC
Theme URI: https://originsofcreativity.org
Author: Origins of Creativity
Description: Single-page application theme with directional navigation, video background, and slide-based content.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ooc
*/

/* ========================================================================
   CASCADE LAYERS (order defines priority: later layers override earlier)
   ======================================================================== */

@layer reset, base, layout, components, utilities;

/* ========================================================================
   CSS CUSTOM PROPERTIES
   ======================================================================== */

:root {
	--ooc-font: "Inter Tight", sans-serif;
	--ooc-black: #000000;
	--ooc-white: #ffffff;
	--ooc-transition-page: 0.5s ease;
	--ooc-transition-slide: 0.45s ease;
	--ooc-transition-fade: 0.25s ease;
	--ooc-spacing-tight: 0.25rem;
	--ooc-spacing-base: 2rem;
	--ooc-spacing-wide: 2rem;
	--ooc-spacing-content: 6rem;
	--ooc-block-gap: 1rem;
	--ooc-z-bg: 0;
	--ooc-z-overlay: 1;
	--ooc-z-viewport: 10;
	--ooc-z-nav: 90;
	--ooc-z-tabs: 95;
	--ooc-z-header: 100;
	--ooc-media-radius: 0.35rem;
}

/* Root font size: sets the rem scale per viewport (all typography uses rem). */
html {
	font-size: 18px; /* mobile */
}
@media (min-width: 1024px) {
	html {
		font-size: 20px; /* desktop */
	}
}
@media (min-width: 1600px) {
	html {
		font-size: 22px; /* large desktop */
	}
}
@media (min-width: 2000px) {
	html {
		font-size: 24px; /* huge desktop */
	}
}

/* ========================================================================
   RESET & BASE
   ======================================================================== */

@layer reset {
	:where(*, *::before, *::after) {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

@layer base {
	body {
		font-family: var(--ooc-font);
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.6;
		margin: 0;
		overflow: hidden;
		background: var(--ooc-black);
		transition: color 0.4s ease;
	}

	body[data-text-color="black"] {
		color: var(--ooc-black);
	}

	body[data-text-color="white"] {
		color: var(--ooc-white);
	}

	a {
		color: currentColor;
	}

	h1, h2 {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
	}

	h3 {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
	}
}

/* ========================================================================
   LAYOUT — VIDEO, OVERLAY, VIEWPORT, PAGES
   ======================================================================== */

@layer layout {
	#ooc-bg {
		position: fixed;
		inset: 0;
		z-index: var(--ooc-z-bg);
		overflow: hidden;
	}

	#ooc-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: auto;
		min-height: 100vh;
		object-fit: cover;
		transition: top 0.5s ease-out;
	}

	#ooc-overlay {
		position: fixed;
		inset: 0;
		z-index: var(--ooc-z-overlay);
		background-color: transparent;
		transition: background-color 0.4s ease;
		pointer-events: none;
	}

	#ooc-viewport {
		position: fixed;
		inset: 0;
		z-index: var(--ooc-z-viewport);
		overflow: hidden;
	}

	.ooc-page {
		position: absolute;
		inset: 0;
		width: 100vw;
		height: 100vh;
	}
}

/* ========================================================================
   COMPONENTS — HEADER, TABS, NAV, SLIDES
   ======================================================================== */

@layer components {
	/* Header */
	#ooc-header {
		position: fixed;
		inset-block-start: 0;
		inset-inline-start: 0;
		z-index: var(--ooc-z-header);
		padding: var(--ooc-spacing-base);
	}

	#ooc-site-title {
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		text-decoration: none;
		color: currentColor;
		opacity: 0;
		transition: opacity 0.5s ease;
		text-decoration: none!important;
	}

	body:not(.ooc-on-home) #ooc-site-title {
		opacity: 1;
	}

	/* Tabs — same vertical position as header title, right-aligned */
	.ooc-tabs {
		position: fixed;
		inset-block-start: 0;
		inset-inline-end: 0;
		padding: var(--ooc-spacing-base);
		z-index: var(--ooc-z-tabs);
		display: flex;
		flex-direction: row;
		gap: var(--ooc-spacing-wide);
		align-items: center;
	}

	.ooc-tabs[hidden] {
		display: none;
	}

	.ooc-tab {
		background: none;
		border: none;
		font-family: var(--ooc-font);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 600;
		color: currentColor;
		cursor: pointer;
		padding-block: var(--ooc-spacing-tight);
		padding-inline: 0;
		filter: blur(1.5px);
		opacity: 0.6;
		transition: filter 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;
		white-space: nowrap;
	}

	.ooc-tab:hover {
		filter: blur(0);
		opacity: 0.9;
	}

	.ooc-tab--active {
		filter: blur(0);
		opacity: 1;
	}

	/* Navigation arrows */
	#ooc-nav {
		position: fixed;
		inset: 0;
		z-index: var(--ooc-z-nav);
		pointer-events: none;
	}

	.ooc-arrow {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: none;
		color: currentColor;
		cursor: pointer;
		pointer-events: auto;
		padding: 1rem 2rem;
		min-width: 5rem;
		min-height: 5rem;
		transition: none;
	}

	.ooc-arrow svg {
		width: 2rem;
		height: 2rem;
		stroke: currentColor;
		transition: transform 0.25s ease;
	}

	.ooc-arrow--up svg {
		transform-origin: center bottom;
	}

	.ooc-arrow--down svg {
		transform-origin: center top;
	}

	.ooc-arrow--left svg {
		transform-origin: right center;
	}

	.ooc-arrow--right svg {
		transform-origin: left center;
	}

	.ooc-arrow:hover {
		background-color: var(--ooc-arrow-target-color, currentColor);
	}

	.ooc-arrow--up {
		inset-block-start: 0;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		flex-direction: column;
		padding-top: 1rem;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		overflow: visible;
	}
	.ooc-arrow--up:hover {
		background: none;
	}
	.ooc-arrow--up svg {
		position: relative;
		z-index: 1;
	}
	.ooc-arrow--up .ooc-arrow__label {
		position: absolute;
		inset-inline-start: 50%;
		top: 4rem;
		transform: translate(-50%, -100%);
		margin-top: 0;
		background-color: transparent;
		border-radius: var(--ooc-media-radius);
		transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
		white-space: nowrap;
	}
	.ooc-arrow--up:hover .ooc-arrow__label {
		transform: translate(-50%, 0);
		background-color: var(--ooc-arrow-target-color, currentColor);
		color: var(--ooc-arrow-target-text-color, currentColor);
	}

	.ooc-arrow--down {
		inset-block-end: 0;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		flex-direction: column-reverse;
		padding-bottom: 1rem;
		overflow: visible;
	}
	.ooc-arrow--down:hover {
		background: none;
	}
	.ooc-arrow--down svg {
		position: relative;
		z-index: 1;
	}
	.ooc-arrow--down .ooc-arrow__label {
		position: absolute;
		inset-inline-start: 50%;
		bottom: 4rem;
		transform: translate(-50%, 100%);
		margin-bottom: 0;
		background-color: transparent;
		border-radius: var(--ooc-media-radius);
		transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
		white-space: nowrap;
	}
	.ooc-arrow--down:hover .ooc-arrow__label {
		transform: translate(-50%, 0);
		background-color: var(--ooc-arrow-target-color, currentColor);
		color: var(--ooc-arrow-target-text-color, currentColor);
	}

	.ooc-arrow--left {
		inset-inline-start: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
		flex-direction: row;
		padding-left: 1rem;
		overflow: visible;
	}
	.ooc-arrow--left:hover {
		background: none;
	}
	.ooc-arrow--left svg {
		position: relative;
		z-index: 1;
	}
	.ooc-arrow--left .ooc-arrow__label {
		position: absolute;
		inset-block-start: 50%;
		left: 4rem;
		transform: translate(-100%, -50%);
		margin-left: 0;
		background-color: transparent;
		border-radius: var(--ooc-media-radius);
		transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
		white-space: nowrap;
	}
	.ooc-arrow--left:hover .ooc-arrow__label {
		transform: translate(0, -50%);
		background-color: var(--ooc-arrow-target-color, currentColor);
		color: var(--ooc-arrow-target-text-color, currentColor);
	}

	.ooc-arrow--right {
		inset-inline-end: 0;
		inset-block-start: 50%;
		transform: translateY(-50%);
		flex-direction: row-reverse;
		padding-right: 1rem;
		overflow: visible;
	}
	.ooc-arrow--right:hover {
		background: none;
	}
	.ooc-arrow--right svg {
		position: relative;
		z-index: 1;
	}
	.ooc-arrow--right .ooc-arrow__label {
		position: absolute;
		inset-block-start: 50%;
		right: 4rem;
		transform: translate(100%, -50%);
		margin-right: 0;
		background-color: transparent;
		border-radius: var(--ooc-media-radius);
		transition: transform 0.25s ease, opacity 0.3s ease, background-color 0.2s ease;
		white-space: nowrap;
	}
	.ooc-arrow--right:hover .ooc-arrow__label {
		transform: translate(0, -50%);
		background-color: var(--ooc-arrow-target-color, currentColor);
		color: var(--ooc-arrow-target-text-color, currentColor);
	}

	.ooc-arrow__label {
		font-size: var(--wp--preset--font-size--small);
		opacity: 0;
		transition: opacity 0.3s ease;
		pointer-events: none;
		max-width: 12rem;
		padding: 0.35rem 0.35rem;
	}

	.ooc-arrow:hover .ooc-arrow__label {
		opacity: 1;
	}

	/* Page transitions */
	.ooc-page--enter-left {
		transform: translateX(-100%);
		opacity: 0;
	}

	.ooc-page--enter-right {
		transform: translateX(100%);
		opacity: 0;
	}

	.ooc-page--enter-up {
		transform: translateY(-100%);
		opacity: 0;
	}

	.ooc-page--enter-down {
		transform: translateY(100%);
		opacity: 0;
	}

	.ooc-page--active {
		transform: translate(0, 0);
		opacity: 1;
		transition: transform var(--ooc-transition-page), opacity var(--ooc-transition-page);
	}

	.ooc-page--exit {
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	/* Slides */
	.ooc-slide {
		position: absolute;
		inset: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		gap: var(--ooc-block-gap);
		align-items: center;
		justify-content: center;
		padding-block: var(--ooc-spacing-wide);
		padding-inline: var(--ooc-spacing-wide);
		opacity: 0;
		pointer-events: none;
		transition: transform var(--ooc-transition-slide), opacity var(--ooc-transition-slide);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ooc-slide--active {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.ooc-slide--exit-up {
		transform: translateY(-100%);
		opacity: 0;
	}

	.ooc-slide--exit-down {
		transform: translateY(100%);
		opacity: 0;
	}

	/* Vertical align content (ACF: top / center / bottom). */
	.ooc-page--align-top .ooc-slide {
		justify-content: flex-start;
		padding-block-start: var(--ooc-spacing-content);
		padding-block-end: var(--ooc-spacing-content);
	}

	.ooc-page--align-center .ooc-slide {
		justify-content: center;
	}

	.ooc-page--align-bottom .ooc-slide {
		justify-content: flex-end;
	}

	/* Single flex child: content wrapper; blocks inside use normal block flow. */
	.ooc-slide__content {
		max-width: 40rem;
		width: 100%;
	}
	/* Space below each block (like the block editor). */
	.ooc-slide__content > * {
		margin-block-end: var(--ooc-block-gap);
	}
	.ooc-slide__content > *:last-child {
		margin-block-end: 0;
	}

	/* Page title in first slide; hidden variant for SEO/accessibility when "Hide" is on */
	.ooc-page-title {
		margin: 0 0 0.5rem 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
	}

	.ooc-page-title--hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ========================================================================
   UTILITIES — FADE STATES, BLOCK COLORS, PAGE DIVIDER
   ======================================================================== */

@layer utilities {
	.ooc-page--child-fade-out {
		opacity: 0;
		transition: opacity var(--ooc-transition-fade);
	}

	.ooc-page--child-fade-in {
		opacity: 1;
		transition: opacity var(--ooc-transition-fade);
	}

	.ooc-slide .has-black-color {
		color: var(--ooc-black);
	}

	.ooc-slide .has-white-color {
		color: var(--ooc-white);
	}

	.ooc-slide .has-black-background-color {
		background-color: var(--ooc-black);
	}

	.ooc-slide .has-white-background-color {
		background-color: var(--ooc-white);
	}

	.ooc-slide .has-small-font-size {
		font-size: var(--wp--preset--font-size--small);
	}

	.ooc-slide .has-medium-font-size {
		font-size: var(--wp--preset--font-size--medium);
	}

	.ooc-slide .has-large-font-size {
		font-size: var(--wp--preset--font-size--large);
	}

	.ooc-page-divider {
		display: none;
	}

	/* Image with Audio — play overlay (white circle, black icon) */
	.ooc-image-with-audio {
		position: relative;
		display: block;
		line-height: 0;
		border-radius: var(--ooc-media-radius);
		overflow: hidden;
	}

	.ooc-image-with-audio__img {
		width: 100%;
		height: auto;
		display: block;
		vertical-align: middle;
		border-radius: var(--ooc-media-radius);
	}

	.ooc-image-with-audio__audio {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		pointer-events: none;
	}

	.ooc-image-with-audio .ooc-media-play-overlay,
	.ooc-video-with-overlay .ooc-media-play-overlay {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		color: var(--ooc-black);
	}

	.ooc-image-with-audio .ooc-media-play-overlay:hover,
	.ooc-video-with-overlay .ooc-media-play-overlay:hover {
		background: rgba(0, 0, 0, 0.05);
	}

	.ooc-image-with-audio .ooc-media-play-overlay .ooc-play-icon,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-play-icon,
	.ooc-image-with-audio .ooc-media-play-overlay .ooc-stop-icon,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-stop-icon {
		position: absolute;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--ooc-white);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	}

	.ooc-image-with-audio .ooc-media-play-overlay .ooc-play-icon svg,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-play-icon svg {
		width: 24px;
		height: 24px;
		margin-left: 3px;
	}

	.ooc-image-with-audio .ooc-media-play-overlay .ooc-stop-icon svg,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-stop-icon svg {
		width: 24px;
		height: 24px;
	}

	.ooc-image-with-audio .ooc-media-play-overlay .ooc-audio-lines-corner,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-audio-lines-corner {
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--ooc-white);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}

	.ooc-image-with-audio .ooc-media-play-overlay .ooc-audio-lines-corner svg,
	.ooc-video-with-overlay .ooc-media-play-overlay .ooc-audio-lines-corner svg {
		width: 16px;
		height: 16px;
	}

	/* Video block with overlay. Height from padding-bottom % (16:9) so figure keeps
	   aspect ratio; blocks live in .ooc-slide__content (block flow), not flex. */
	.wp-block-video,
	.ooc-video-with-overlay {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		border-radius: var(--ooc-media-radius);
		overflow: hidden;
		margin-top: calc(2 * var(--ooc-block-gap))!important;
		margin-bottom: calc(2 * var(--ooc-block-gap))!important;
	}

	.ooc-video-with-overlay video {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: var(--ooc-media-radius);
	}

	/* Image and video blocks — shared border radius */
	.wp-block-image,
	.wp-block-image img,
	.wp-block-video,
	.wp-block-video video {
		border-radius: var(--ooc-media-radius);
	}
	.wp-block-image,
	.wp-block-video {
		overflow: hidden;
	}

	/* All figcaptions use the small font size (core image, video, embed, custom blocks). */
	:where(figcaption) {
		font-size: var(--wp--preset--font-size--small)!important;
	}

	.wp-block-ooc-image-with-audio figcaption,
	.ooc-image-with-audio__caption {
		display: block;
		margin-top: 0.5em;
		text-align: center;
		color: inherit;
	}

	/* Embed block — full width, responsive iframe */

	.wp-block-embed__wrapper {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.wp-block-embed iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: none;
	}
}

/* ========================================================================
   ACF TEXT COLOR — unlayered so it wins over @layer and third-party CSS.
   Ensures header, arrows, tabs, and content use the page text color.
   ======================================================================== */

body[data-text-color="black"] {
	color: var(--ooc-black);
}

body[data-text-color="black"] .wp-block-image figcaption {
	color: var(--ooc-black);
}

body[data-text-color="white"] {
	color: var(--ooc-white);
}

body[data-text-color="white"] .wp-block-image figcaption {
	color: var(--ooc-white);
}

body[data-text-color="black"] .wp-block-ooc-image-with-audio figcaption {
	color: var(--ooc-black);
}

body[data-text-color="white"] .wp-block-ooc-image-with-audio figcaption {
	color: var(--ooc-white);
}