/*
 * Theme Name: Noma Digital
 * Version: 0.2.2
 * Text Domain: noma-digital
*/

/* Dark mode — theme.json dark values are the base */
/* See styles.php for critical inlined :root variables */
.theme-dark .noma-modal {
	--button-modal-backdrop-background-color: rgba(var(--wp--custom--color-rgb--base-50), 0.8);
	--button-modal-border-color: var(--wp--preset--color--base-200);
	--button-modal-background-color: var(--wp--preset--color--base-100);
	--button-modal-color: var(--wp--preset--color--contrast-50);
}

.theme-dark .noma-modal .wpforms-container {
	--wpforms-field-background-color: var(--wp--preset--color--base-10) !important;
	--wpforms-field-background-color-alt: var(--wp--preset--color--secondary-500) !important;
	--wpforms-field-border-color: rgba(var(--wp--custom--color-rgb--contrast-500), 0.5) !important;
	--wpforms-field-border-color-spare: var(--wp--preset--color--contrast-500) !important;
	--wpforms-field-color: var(--wp--preset--color--contrast-500) !important;
	--wpforms-label-color: var(--wp--preset--color--contrast-300) !important;
	--wpforms-label-sublabel-color: var(--wp--preset--color--contrast-300) !important;
	--wpforms-label-error-color: var(--wp--preset--color--secondary-500) !important;
	--wpforms-page-break-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-field-text-color: var(--wp--preset--color--contrast-50) !important;
	--wpforms-field-menu-color: var(--wp--preset--color--base-100) !important;
	--wpforms-button-background-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-button-text-color: var(--wp--preset--color--base-10) !important;
	--wpforms-button-border-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-button-text-color-alt: var(--wp--preset--color--base-100) !important;
}

/* Light mode — theme.json dark values are the base; .theme-light overrides for light */
.noma-modal .wpforms-container {
	--wpforms-field-background-color: var(--wp--preset--color--base-10) !important;
	--wpforms-field-background-color-alt: var(--wp--preset--color--secondary-500) !important;
	--wpforms-field-border-color: rgba(var(--wp--custom--color-rgb--contrast-500), 0.5) !important;
	--wpforms-field-border-color-spare: var(--wp--preset--color--contrast-500) !important;
	--wpforms-field-color: var(--wp--preset--color--contrast-500) !important;
	--wpforms-label-color: var(--wp--preset--color--contrast-500) !important;
	--wpforms-label-sublabel-color: var(--wp--preset--color--contrast-300) !important;
	--wpforms-label-error-color: var(--wp--preset--color--secondary-500) !important;
	--wpforms-page-break-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-field-text-color: var(--wp--preset--color--contrast-50) !important;
	--wpforms-field-menu-color: var(--wp--preset--color--base-100) !important;
	--wpforms-button-background-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-button-text-color: var(--wp--preset--color--base-10) !important;
	--wpforms-button-border-color: var(--wp--preset--color--primary-500) !important;
	--wpforms-button-text-color-alt: var(--wp--preset--color--base-100) !important;
}

html {
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible {
	clip-path: inset(-4px);
	outline: 2px dotted rgba(var(--wp--custom--color-rgb--tertiary-500), 0.9) !important;
	outline-offset: 2px;
}

main {
	min-height: 50vh;
	position: relative;
	z-index: 1;
}

main + footer {
	overflow: hidden;
	position: sticky;
	bottom: 0;
	left: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.footer-logo-wrap {
	overflow: hidden;
}

.footer-logo {
	color: var(--wp--preset--color--contrast-50) !important;
	display: block !important;
	height: auto !important;
	margin-bottom: -10vh;
	margin-left: -2%;
	max-width: none !important;
	opacity: 0.1;
	overflow: hidden;
	position: relative;
	width: 106% !important;
}

.noisy-background {
	background-image: url('./assets/images/nnnoise.svg');
	background-repeat: repeat;
	opacity: 0.8;
}

/* Scanline overlay for hero and sections */
.noma-scanlines {
	position: relative;
	overflow: hidden;
}

.noma-scanlines > .wp-block-cover__inner-container,
.noma-scanlines > .wp-block-group__inner-container {
	position: relative;
	z-index: 3;
}

.noma-scanlines::after {
	background:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(var(--wp--custom--color-rgb--scanlines), 0.02) 2px,
			rgba(var(--wp--custom--color-rgb--scanlines), 0.02) 4px
		);
	content: '';
	display: block;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

/* Work cards */
.noma-card {
	overflow: hidden;
	position: relative;
	transition: transform 0.3s ease;
}
.noma-card img {
	transition: transform 0.5s ease, filter 0.5s ease;
}

.noma-card:hover img {
	transform: scale(1.05);
}

.noma-card .wp-block-post-title a::before {
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.noma-card :where(.wp-block-group.wp-block-group-is-layout-constrained) {
	position: static;
}

/* Status dots */
:where(.is-style-status-list li)::before {
	--pulse-size: 5px;

	animation: pulsing 3s infinite;
	background-color: var(--baseTransparentColor, rgba(255, 255, 255, 0.5));
	box-shadow: 0 0 0 0 var(--transparentColor, rgba(255, 255, 255, 0.5));
	color: var(--baseTransparentColor, rgba(255, 255, 255, 0.5));
	height: var(--pulse-size);
	margin-right: 0.3rem;
	transition: all 0.3s;
	width: var(--pulse-size);
}

.is-style-status-list li:nth-child(1)::before {
	--baseTransparentColor: rgba(var(--wp--custom--color-rgb--primary-500), 0.7);
	--transparentColor: rgba(0, 229, 255, 0);
}
.is-style-status-list li:nth-child(2)::before {
	--baseTransparentColor: rgba(var(--wp--custom--color-rgb--secondary-500), 0.7);
	--transparentColor: rgba(255, 45, 120, 0);
}
.is-style-status-list li:nth-child(3)::before {
	--baseTransparentColor: rgba(var(--wp--custom--color-rgb--tertiary-500), 0.7);
	--transparentColor: rgba(255, 255, 0, 0);
}

@keyframes pulsing {
	from {
		box-shadow: 0 0 0 0 currentColor;
	}
	70% {
		box-shadow: 0 0 0 var(--pulse-size) var(--transparentColor);
	}
	to {
		box-shadow: 0 0 0 0 var(--transparentColor);
	}
}

/* Grid noise texture overlay */
.noma-grid-texture {
	position: relative !important;
}

.noma-grid-texture::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
	z-index: 0 !important;
	background:
		linear-gradient(90deg, rgba(var(--wp--custom--color-rgb--contrast-300), 0.08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(var(--wp--custom--color-rgb--contrast-300), 0.08) 1px, transparent 1px) !important;
	background-size: 80px 80px !important;
}
.noma-grid-texture > * {
	position: relative;
	z-index: 1;
}

/* Equal cards layout */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Archive post list */
.noma-post-item {
	border-bottom: 1px solid rgba(var(--wp--custom--color-rgb--primary-500), 0.06) !important;
	transition: border-color 0.3s ease !important;
}
.noma-post-item:hover {
	border-bottom-color: rgba(var(--wp--custom--color-rgb--primary-500), 0.2) !important;
}

/* Noise texture overlay */
.noma-noise {
	position: relative !important;
}
.noma-noise::before {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	pointer-events: none !important;
	opacity: 0.04 !important;
	background-image:
		repeating-conic-gradient(
			rgba(255,255,255,0.4) 0% 25%,
			transparent 0% 50%
		) !important;
	background-size: 3px 3px !important;
}

.hero > * {
	animation: fadeUp 0.8s ease-out 0.5s both;
}

.hero-status {
	color: var(--wp--preset--color--primary-500);
	transition: opacity 0.4s ease;
}

.hero-status.is-fading {
	opacity: 0;
}

@keyframes fadeDown {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* :::SECTION:Scroll Animations::: */
.animate-on-scroll {
	opacity: 1;
	transform: translateY(0);
}

.js .animate-on-scroll:not(.is-visible) {
	opacity: 0;
	transform: translateY(30px);
}

.js .animate-on-scroll {
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.js .animate-on-scroll:nth-child(2) { transition-delay: 0.12s; }
.js .animate-on-scroll:nth-child(3) { transition-delay: 0.24s; }
.js .animate-on-scroll:nth-child(4) { transition-delay: 0.36s; }
.js .animate-on-scroll:nth-child(5) { transition-delay: 0.48s; }

/* :::SECTION:Modal::: */
.noma-modal__header {
	border-bottom: 1px solid var(--wp--preset--color--base-200);
}

.noma-modal__title {
	font-family: var(--wp--preset--font-family--heading) !important;
}

/* :::SECTION:WP Forms::: */
.noma-modal__content .wpforms-submit {
	border: none !important;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	font-family: var(--wp--preset--font-family--heading) !important;
	letter-spacing: 0.15em !important;
	font-size: 0.8rem !important;
	margin-bottom: var(--wp--preset--spacing--50) !important;
	padding: 1rem 2.25rem !important;
	text-transform: uppercase !important;
	width: 100%;
}

.wpforms-confirmation-container-full {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--contrast-50) !important;
	padding: 0 !important;
}

.wpforms-confirmation-container-full p {
	color: var(--wp--preset--color--contrast-50) !important;
}

.wpforms-container .wpforms-field {
	padding: 10px 0 !important;
}

@media (max-width: 768px) {
	.wpforms-container .wpforms-field.wpforms-one-half {
		float: none;
		margin-left: 0 !important;
		width: 100%;
	}
}

/* :::SECTION:Two Column Layout::: */
@media (max-width: 781px) {
	.noma-columns.wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	.noma-columns.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
	}
}

/* :::SECTION:Post Template Grid overrides::: */
@media (min-width: 601px) and (max-width: 1023px) {
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		gap: var(--wp--preset--spacing--50) !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}