/*
Theme Name: Nietos AI Theme
Theme URI: https://github.com/villetoimela/nietos-ai-theme
Author: Ville Toimela
Author URI: https://github.com/villetoimela
Description: Nietos AI Theme builds on Twenty Twenty-Five to deliver a flexible, modern foundation for AI-assisted publishing. It retains the original pattern library and global style options while providing a clean starting point for bespoke customizations.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Force Literata font on all headings
 */
 h1, h2, h3, h4, h5, h6,
 .wp-block-heading,
 .editor-post-title__input {
	 font-family: var(--wp--preset--font-family--literata, 'Literata', serif) !important;
	 font-weight: 800 !important;
 }
 
 /*
  * Link styles
  * https://github.com/WordPress/gutenberg/issues/42319
  */
 :root {
	 --nietos-primary: var(--wp--preset--color--accent-1);
	 --nietos-primary-dark: var(--wp--preset--color--accent-2);
	 --nietos-primary-light: var(--wp--preset--color--accent-3);
	 --nietos-surface: var(--wp--preset--color--accent-5);
	 --nietos-border: var(--wp--preset--color--accent-6);
	 --nietos-text-primary: var(--wp--preset--color--contrast);
	 --nietos-text-secondary: var(--wp--preset--color--accent-4);
	 --nietos-text-tertiary: var(--wp--preset--color--accent-7);
	 --nietos-success: var(--wp--preset--color--accent-8);
	 --nietos-warning: var(--wp--preset--color--accent-9);
	 --nietos-danger: var(--wp--preset--color--accent-10);
	 --nietos-info: var(--wp--preset--color--accent-11);
	 --nietos-font-sans: var(--wp--preset--font-family--inter);
	 --nietos-font-mono: var(--wp--preset--font-family--jetbrains-mono);
	 --nietos-space-xs: var(--wp--preset--spacing--20);
	 --nietos-space-sm: var(--wp--preset--spacing--30);
	 --nietos-space-md: var(--wp--preset--spacing--40);
	 --nietos-space-lg: var(--wp--preset--spacing--50);
	 --nietos-space-xl: var(--wp--preset--spacing--60);
	 --nietos-space-2xl: var(--wp--preset--spacing--70);
	 --nietos-space-3xl: var(--wp--preset--spacing--80);
	 --nietos-radius-sm: 4px;
	 --nietos-radius-md: 6px;
	 --nietos-radius-lg: 8px;
	 --nietos-radius-xl: 12px;
	 --nietos-radius-pill: 9999px;
 }
 
 a {
	 text-decoration-thickness: 1px !important;
	 text-underline-offset: .1em;
 }
 
 /* Focus styles */
 :where(.wp-site-blocks *:focus) {
	 outline-width: 2px;
	 outline-style: solid;
 }
 
 /* Increase the bottom margin on submenus, so that the outline is visible. */
 .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	 margin-bottom: 3px;
 }
 
 /* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
 .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	 outline-offset: 4px;
 }
 
 /* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
 .wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	 outline-offset: 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;
 }
 
 /*
  * Change the position of the more block on the front, by making it a block level element.
  * https://github.com/WordPress/gutenberg/issues/65934
 */
 .more-link {
	 display: block;
 }
 
 /*
  * Hero Animated Background
  * Nietos AI brand colors with animated gradient and floating orbs
  */
 @keyframes nietos-gradient-shift {
	 0% {
		 background-position: 0% 50%;
	 }
	 50% {
		 background-position: 100% 50%;
	 }
	 100% {
		 background-position: 0% 50%;
	 }
 }
 
 @keyframes nietos-float-orb {
	 0%, 100% {
		 transform: translate(0, 0) scale(1);
		 opacity: 0.6;
	 }
	 33% {
		 transform: translate(30px, -30px) scale(1.1);
		 opacity: 0.8;
	 }
	 66% {
		 transform: translate(-20px, 20px) scale(0.9);
		 opacity: 0.5;
	 }
 }
 
 @keyframes nietos-pulse-glow {
	 0%, 100% {
		 opacity: 0.3;
		 transform: scale(1);
	 }
	 50% {
		 opacity: 0.6;
		 transform: scale(1.05);
	 }
 }
 
 .nietos-hero-animated {
	 position: relative;
	 overflow: hidden;
	 background: linear-gradient(135deg, #4433A6, #372696, #5644BC, #251D51);
	 background-size: 400% 400%;
	 animation: nietos-gradient-shift 15s ease infinite;
 }
 
 .nietos-hero-orbs {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 pointer-events: none;
	 z-index: 1;
 }
 
 .nietos-orb {
	 position: absolute;
	 border-radius: 50%;
	 filter: blur(40px);
	 mix-blend-mode: screen;
 }
 
 .nietos-orb-1 {
	 width: 300px;
	 height: 300px;
	 background: radial-gradient(circle, #79F3B1, transparent);
	 top: 10%;
	 left: 15%;
	 animation: nietos-float-orb 20s ease-in-out infinite;
 }
 
 .nietos-orb-2 {
	 width: 400px;
	 height: 400px;
	 background: radial-gradient(circle, #E8B7FF, transparent);
	 bottom: 15%;
	 right: 10%;
	 animation: nietos-float-orb 25s ease-in-out infinite reverse;
	 animation-delay: -5s;
 }
 
 .nietos-orb-3 {
	 width: 250px;
	 height: 250px;
	 background: radial-gradient(circle, #5644BC, transparent);
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 animation: nietos-pulse-glow 10s ease-in-out infinite;
 }
 
 .nietos-orb-4 {
	 width: 200px;
	 height: 200px;
	 background: radial-gradient(circle, rgba(121, 243, 177, 0.4), transparent);
	 top: 70%;
	 left: 25%;
	 animation: nietos-float-orb 18s ease-in-out infinite;
	 animation-delay: -8s;
 }
 
 .nietos-hero-content {
	 position: relative;
	 z-index: 10;
 }
 
 /*
  * Button Hover Effects
  * Smooth transitions with horizontal padding expansion
  */
 .wp-element-button,
 .wp-block-button__link {
	 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	 position: relative;
	 overflow: hidden;
 }
 
 .wp-element-button:hover,
 .wp-block-button__link:hover {
	 padding-left: calc(var(--wp--preset--spacing--40, .5rem) + 0.1rem);
	 padding-right: calc(var(--wp--preset--spacing--40, .5rem) + 0.2rem);
	 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
 }
 
 .wp-element-button:active,
 .wp-block-button__link:active {
	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* Subtle shimmer effect on hover */
 .wp-element-button::before,
 .wp-block-button__link::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: -100%;
	 width: 100%;
	 height: 100%;
	 background: linear-gradient(
		 90deg,
		 transparent,
		 rgba(255, 255, 255, 0.2),
		 transparent
	 );
	 transition: left 0.5s ease;
 }
 
 .wp-element-button:hover::before,
 .wp-block-button__link:hover::before {
	 left: 100%;
 }
 
 /* Primary button variations */
 .wp-block-button.is-style-fill .wp-block-button__link:hover {
	 filter: brightness(1.1);
 }
 
 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	 background-color: var(--wp--preset--color--accent-1, #4433A6);
	 color: var(--wp--preset--color--base, #fff);
	 border-color: var(--wp--preset--color--accent-1, #4433A6);
 }
 
 /*
  * Mobile Navigation Styles - Nietos AI Colors
  * Tummansininen tausta + mint-väriset linkit
  */
 
 /* Mobile menu overlay styling */
 .wp-block-navigation__responsive-container.is-menu-open {
	 background-color: var(--nietos-base, #4433A6) !important;
	 background: var(--nietos-base, #4433A6) !important;
 }
 
 /* Mobile menu close button */
 .wp-block-navigation__responsive-container-close {
	 color: var(--nietos-contrast, #79F3B1) !important;
 }
 
 .wp-block-navigation__responsive-container-close:hover {
	 color: var(--nietos-accent-5, #E8B7FF) !important;
 }
 
 /* Mobile navigation links */
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	 color: var(--nietos-contrast, #79F3B1) !important;
	 font-size: 1.25rem;
	 font-weight: 500;
	 padding: 0.75rem 1rem;
	 transition: all 0.3s ease;
 }
 
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	 color: var(--nietos-accent-5, #E8B7FF) !important;
	 background-color: rgba(121, 243, 177, 0.1);
	 border-radius: var(--nietos-radius-md, 6px);
 }
 
 /* Mobile navigation container background */
 .wp-block-navigation__responsive-container-content {
	 background-color: var(--nietos-base, #4433A6) !important;
 }
 
 /* Hamburger button colors */
 .wp-block-navigation__responsive-container-open {
	 color: var(--nietos-contrast, #79F3B1) !important;
 }
 
 .wp-block-navigation__responsive-container-open:hover {
	 color: var(--nietos-accent-5, #E8B7FF) !important;
 }
 
 /* Mobile submenu items */
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	 background-color: rgba(55, 38, 150, 0.8) !important;
	 border: 1px solid rgba(121, 243, 177, 0.2);
 }
 
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
	 color: var(--nietos-contrast, #79F3B1) !important;
 }
 
 /* Mobile menu button in navigation */
 .wp-block-navigation__responsive-container.is-menu-open button {
	 color: var(--nietos-contrast, #79F3B1) !important;
 }
 
 /*
  * Desktop Navigation Hover Effects
  * Sama hover-efekti kuin mobilessa
  */
 
 /* Desktop navigation links */
 .wp-block-navigation:not(.has-background) .wp-block-navigation-item a {
	 color: var(--nietos-contrast, #79F3B1) !important;
	 padding: 0.5rem 1rem;
	 border-radius: var(--nietos-radius-md, 6px);
	 transition: all 0.3s ease;
	 text-decoration: none !important;
 }
 
 .wp-block-navigation:not(.has-background) .wp-block-navigation-item a:hover {
	 color: var(--nietos-accent-5, #E8B7FF) !important;
	 background-color: rgba(121, 243, 177, 0.1);
 }
 
 /* Active/current page link */
 .wp-block-navigation:not(.has-background) .wp-block-navigation-item.current-menu-item a {
	 background-color: rgba(121, 243, 177, 0.15);
	 color: var(--nietos-accent-5, #E8B7FF) !important;
 }
 
 /*
  * Sticky Header
  * Header pysyy näkyvissä sivun scrollatessa (VAIN DESKTOP)
  */
 
 /* Sticky header only on desktop (> 782px) */
 @media (min-width: 783px) {
	 /* Target the first group in wp-site-blocks (typically the header) */
	 body > .wp-site-blocks > .wp-block-group:first-child,
	 body > .wp-site-blocks > header:first-child,
	 .wp-block-template-part[class*="header"] {
		 position: sticky;
		 top: 0;
		 z-index: 1000;
		 background: var(--nietos-base, #4433A6);
		 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	 }
 
	 /* Enhanced shadow when scrolled (JavaScript can add .scrolled class) */
	 body > .wp-site-blocks > .wp-block-group:first-child.scrolled,
	 body > .wp-site-blocks > header:first-child.scrolled,
	 .wp-block-template-part[class*="header"].scrolled {
		 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		 backdrop-filter: blur(10px);
	 }
 
	 /* Smooth scroll offset for anchor links */
	 html {
		 scroll-padding-top: 100px;
	 }
 }
 
 /* Mobile: header scrolls normally (no sticky) */
 @media (max-width: 782px) {
	 body > .wp-site-blocks > .wp-block-group:first-child,
	 body > .wp-site-blocks > header:first-child,
	 .wp-block-template-part[class*="header"] {
		 position: relative;
	 }
 
	 html {
		 scroll-padding-top: 0;
	 }
 }
 
 /*
  * Animated Blur Orbs
  * Subtle floating blur orbs
  * Usage: Add CSS class "floating-orb", "floating-orb-slow" or "floating-orb-reverse" to image block
  */
 
/* Base animation for floating orbs - SUBTLE SPECIAL EFFECTS */

/* Variation 1: Slow breathing + skew + 20° rotation */
 @keyframes float-gentle {
	 0% {
		 transform: translate(0, 0) scale(1) rotate(0deg) skew(0deg, 0deg);
		 opacity: 0.85;
	 }
	 25% {
		 transform: translate(8px, -6px) scale(1.03) rotate(7deg) skew(1deg, -1deg);
		 opacity: 0.9;
	 }
	 50% {
		 transform: translate(-5px, 10px) scale(1.02) rotate(15deg) skew(-1deg, 1deg);
		 opacity: 0.88;
	 }
	 75% {
		 transform: translate(-10px, -4px) scale(1.04) rotate(22deg) skew(0.5deg, -0.5deg);
		 opacity: 0.92;
	 }
	 100% {
		 transform: translate(0, 0) scale(1) rotate(0deg) skew(0deg, 0deg);
		 opacity: 0.85;
	 }
 }
 
 /* Variation 2: Floating + perspective + 20° rotation */
 @keyframes float-slow {
	 0% {
		 transform: translate(0, 0) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg);
	 }
	 20% {
		 transform: translate(-7px, 5px) scale(1.02) rotate(5deg) rotateX(3deg) rotateY(-2deg);
	 }
	 40% {
		 transform: translate(9px, -8px) scale(1.01) rotate(12deg) rotateX(-2deg) rotateY(3deg);
	 }
	 60% {
		 transform: translate(-6px, 11px) scale(1.03) rotate(18deg) rotateX(1deg) rotateY(-3deg);
	 }
	 80% {
		 transform: translate(8px, -5px) scale(1.01) rotate(21deg) rotateX(-3deg) rotateY(2deg);
	 }
	 100% {
		 transform: translate(0, 0) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg);
	 }
 }
 
 /* Variation 3: Pulse + opacity fade + 20° rotation */
 @keyframes float-reverse {
	 0% {
		 transform: translate(0, 0) scale(1) rotate(0deg);
		 opacity: 0.8;
	 }
	 16% {
		 transform: translate(6px, -7px) scale(1.02) rotate(4deg);
		 opacity: 0.88;
	 }
	 33% {
		 transform: translate(-8px, 6px) scale(1.04) rotate(10deg);
		 opacity: 0.95;
	 }
	 50% {
		 transform: translate(10px, 9px) scale(1.03) rotate(16deg);
		 opacity: 0.92;
	 }
	 66% {
		 transform: translate(-7px, -8px) scale(1.02) rotate(20deg);
		 opacity: 0.85;
	 }
	 83% {
		 transform: translate(5px, 4px) scale(1.01) rotate(12deg);
		 opacity: 0.9;
	 }
	 100% {
		 transform: translate(0, 0) scale(1) rotate(0deg);
		 opacity: 0.8;
	 }
 }
 
 @keyframes pulse-glow {
	 0%, 100% {
		 opacity: 0.8;
		 filter: blur(60px);
	 }
	 50% {
		 opacity: 1;
		 filter: blur(80px);
	 }
 }
 
/* Floating orb classes for Gutenberg images - THREE SUBTLE VARIATIONS */

/* Variation 1: Slow breathing + skew (30s) */
 .floating-orb,
 .wp-block-image.floating-orb,
 .wp-block-image.floating-orb img {
	 animation: float-gentle 30s ease-in-out infinite;
	 will-change: transform, filter, opacity;
	 transform-style: preserve-3d;
	 overflow: visible !important;
 }
 
 /* Variation 2: Floating + perspective (35s) */
 .floating-orb-slow,
 .wp-block-image.floating-orb-slow,
 .wp-block-image.floating-orb-slow img {
	 animation: float-slow 35s ease-in-out infinite;
	 will-change: transform, filter;
	 transform-style: preserve-3d;
	 perspective: 1000px;
	 overflow: visible !important;
 }
 
 /* Variation 3: Pulse + opacity fade (28s) */
 .floating-orb-reverse,
 .wp-block-image.floating-orb-reverse,
 .wp-block-image.floating-orb-reverse img {
	 animation: float-reverse 28s ease-in-out infinite;
	 will-change: transform, filter, opacity;
	 overflow: visible !important;
 }
 
 /* Ensure parent containers don't clip blur edges */
 .wp-block-image.floating-orb,
 .wp-block-image.floating-orb-slow,
 .wp-block-image.floating-orb-reverse {
	 overflow: visible !important;
	 padding: 20px;
	 margin: -20px;
 }
 
 /* Container overflow fix */
 .orb-container,
 .wp-block-group:has(.floating-orb),
 .wp-block-group:has(.floating-orb-slow),
 .wp-block-group:has(.floating-orb-reverse) {
	 overflow: visible !important;
 }
 
 /* Container for multiple orbs with staggered animations */
 .orb-container {
	 position: relative;
	 overflow: visible;
 }
 
 .orb-container .floating-orb:nth-child(1) {
	 animation-delay: 0s;
 }
 
 .orb-container .floating-orb:nth-child(2) {
	 animation-delay: -5s;
 }
 
 .orb-container .floating-orb:nth-child(3) {
	 animation-delay: -10s;
 }
 
 .orb-container .floating-orb:nth-child(4) {
	 animation-delay: -15s;
 }
 
 /* Reduce motion for accessibility */
 @media (prefers-reduced-motion: reduce) {
	 .floating-orb,
	 .floating-orb-slow,
	 .floating-orb-reverse,
	 .floating-orb-pulse,
	 .wp-block-image.floating-orb img,
	 .wp-block-image.floating-orb-slow img,
	 .wp-block-image.floating-orb-reverse img,
	 .wp-block-image.floating-orb-pulse img {
		 animation: none;
	 }
 }
 
 .header-logo-text a:where(:not(.wp-element-button)) {
	 color: var(--wp--preset--color--contrast);
	 font-weight: bold;
	 text-transform: capitalize;
 }
 
a:where(:not(.wp-element-button)) {
	 color: var(--wp--preset--color--accent-5);
	 text-decoration: underline;

	 &:hover {
		 color: var(--wp--preset--color--accent-5);
		 text-decoration: underline;
	 }
}

/*
 * Video Performance Optimization for 4K Displays
 * Limits video rendering size on 4K displays to prevent lag
 * Video still fills the cover block but renders at a smaller resolution
 */

/* General video optimization: use GPU acceleration */
.wp-block-cover video,
.wp-block-cover__video-background {
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Ensure cover block clips overflow */
.wp-block-cover {
	overflow: hidden;
	position: relative;
}

/* Video Performance Optimization for 4K Displays */
/* 
 * CSS cannot directly limit video decoding resolution, but
 * we can optimize video rendering using GPU acceleration
 * and other performance techniques. Video always fills the entire cover block.
 */

/* Optimize video rendering on large displays */
@media (min-width: 2560px) {
	.wp-block-cover video,
	.wp-block-cover__video-background {
		/* Ensure video fills the entire cover block */
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		
		/* GPU acceleration optimization */
		transform: translateZ(0);
		will-change: transform;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		
		/* Reduce rendering load */
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
	
	/* Optimize cover block rendering */
	.wp-block-cover:has(video),
	.wp-block-cover:has(.wp-block-cover__video-background) {
		/* Ensure cover block uses GPU acceleration */
		transform: translateZ(0);
		will-change: transform;
	}
}

/* Additional optimization for 4K displays */
@media (min-width: 3840px) {
	.wp-block-cover video,
	.wp-block-cover__video-background {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
		
		/* Additional GPU acceleration optimization */
		transform: translateZ(0);
		will-change: transform;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		
		/* Reduce rendering load even more */
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
	
	.wp-block-cover:has(video),
	.wp-block-cover:has(.wp-block-cover__video-background) {
		transform: translateZ(0);
		will-change: transform;
	}
}

/* Ensure video fills cover block correctly */
.wp-block-cover video,
.wp-block-cover__video-background {
	object-fit: cover;
	object-position: center;
}