/*
Theme Name: twentytwentyfive child
Template: twentytwentyfive
*/

/* Variables */
:root {
    --viewport-width-in-pixels: calc(100vw / 1px);
    }

/* to remove space between menu bar and slider */
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

:root :where(.is-layout-constrained) > * {
    margin-block-start: auto;
}

/* trying to style single post layout with css /*
:root :where(.is-layout-flow) > * {
    margin-block-start: auto;
	margin-block-end: 1.2rem;
}

.single h2 {
    position: relative;
    left: -33%;
    top: 1em;
}

.single main.wp-block-group > div.wp-block-group {
    margin-left: 25%;
} */

/* Single Header Text */
.is-single-header-heading {
	text-shadow: var(--wp--preset--shadow--natural);
}

/* Body */
body {
	min-width:360px;
}

/* trying to get orbs to fill space correctly 
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}
.wp-block-post-content {
    display: flex;
}

.fixed-background-container {
    flex-grow: 1;
}

.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
    flex-shrink: 0;
}*/
body {
    background-color: var(--wp--preset--color--contrast);
}


/* Background Colors */
.bg-cyan    { background-color: var(--wp--preset--color--custom-cyan); }
.bg-magenta { background-color: var(--wp--preset--color--custom-magenta); }
.bg-yellow  { background-color: var(--wp--preset--color--custom-yellow); }

/* Navigation */
.monogram {
}

/* Portrait/Hero */
div.portrait-mask {
    position: absolute;
	width: 360px;
	height: 360px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
}

@keyframes portrait-grayscale-to-color {
    0% { filter: grayscale(1) contrast(150%); }
    100% { filter: grayscale(0) contrast(100%); }
}

div.portrait-holder {
	position: relative;
    width: 360px;
    height: 360px;
	justify-self: center;
	filter: grayscale(1) contrast(150%);
	animation: portrait-grayscale-to-color 1s 1.5s 1 both;
}

div.circle {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
}

div.circle-cyan {
    background: var(--wp--preset--color--custom-cyan-60-opacity);
    top: -25px;
    left: 10px;
}
div.glow-cyan {
    box-shadow: 0 0 20px var(--wp--preset--color--custom-cyan-60-opacity), 0 0 40px var(--wp--preset--color--custom-cyan-40-opacity), 0 0 60px var(--wp--preset--color--custom-cyan-20-opacity);
	
}
div.circle-magenta {
    background: var(--wp--preset--color--custom-magenta-60-opacity);
    top: -10px;
    left: 0px;
}

div.glow-magenta {
    box-shadow: 0 0 20px var(--wp--preset--color--custom-magenta-60-opacity), 0 0 40px var(--wp--preset--color--custom-magenta-40-opacity), 0 0 60px var(--wp--preset--color--custom-magenta-20-opacity);
}

div.circle-yellow {
    background: var(--wp--preset--color--custom-yellow-60-opacity);
    top: -25px;
    left: -10px;
}

div.glow-yellow {
    box-shadow: 0 0 20px var(--wp--preset--color--custom-yellow-60-opacity), 0 0 40px var(--wp--preset--color--custom-yellow-40-opacity), 0 0 60px var(--wp--preset--color--custom-yellow-20-opacity);
}

h1.portfolio-mini-headline {
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
	font-size: clamp(56px, 6vw, 160px);
	justify-self: center;
}

.has-custom-magenta-color.has-inline-color {
	text-shadow: -2px -2px 2px var(--wp--preset--color--custom-cyan), 2px 2px 2px var(--wp--preset--color--custom-yellow);
	animation: text-default-to-magenta 1s 1s 1 both;
}

.has-custom-cyan-color.has-inline-color {
	text-shadow: -2px -2px 2px var(--wp--preset--color--custom-magenta), 2px 2px 2px var(--wp--preset--color--custom-yellow);
	animation: text-default-to-cyan 1s 0.5s 1 both;
}

/* Tried many ways to color shift from black to cyan, but removed */
@keyframes text-default-to-cyan {
    0% { text-shadow: none; }
    100% { text-shadow: -2px -2px 2px var(--wp--preset--color--custom-magenta), 2px 2px 2px var(--wp--preset--color--custom-yellow);}
}

@keyframes text-default-to-magenta {
    0% { text-shadow: none; }
    100% { text-shadow: -2px -2px 2px var(--wp--preset--color--custom-cyan), 2px 2px 2px var(--wp--preset--color--custom-yellow);}
}

p.portfolio-headline:nth-child(1) {
	position: absolute;
	animation: headline-to-position 1s 3s 1 both;
}

p.portfolio-headline:nth-child(2) {
	position: absolute;
	top: calc(var(--wp--preset--font-size--large) * 1.6);
	animation: headline-to-position 1s 3.5s 1 both;
}

p.portfolio-headline:nth-child(3) {
	position: absolute;
	top: calc(var(--wp--preset--font-size--large) * 3.2);
	animation: headline-to-position 1s 4s 2 both;
}

@keyframes headline-to-position {
    0% { transform: translate(40px, 0); color: color-mix(in srgb, currentColor 0%, transparent 100%); }
    100% { transform: translate(0, 0); color: color-mix(in srgb, currentColor 100%, transparent 0%); }
}

@media (max-width: 781px) {
    }

.remove-margins {
    max-width: none;
    margin: 0 !important;
}

/* Glitch Text */
.glitch-text {
	text-shadow: 
		2px 0px 0px #00ffff,
		-2px 0px 0px #ff00ff,
		0px 2px 0px #ffff00;
	animation: glitch 0.5s infinite alternate;
}
.glitch-text-lg {
	text-shadow: 
		2px -2px 0px #00ffff,
		-2px 2px 0px #ff00ff,
		0px 2px 0px #ffff00;
	animation: glitch-lg 0.5s infinite alternate;
}
        
@keyframes glitch {
	0% { text-shadow: 2px 0px 0px #00ffff, -2px 0px 0px #ff00ff, 0px 2px 0px #ffff00; }
	100% { text-shadow: -2px 0px 0px #00ffff, 2px 0px 0px #ff00ff, 0px -2px 0px #ffff00; }
}
        
@keyframes glitch-lg {
	0% { text-shadow: 2px -2px 0px #00ffff, -2px 2px 0px #ff00ff, 0px 2px 0px #ffff00; }
	100% { text-shadow: -2px 2px 0px #00ffff, 2px -2px 0px #ff00ff, 0px -2px 0px #ffff00; }
}

/* Orb Animations */

.fixed-background-container {
    position: fixed; /* Fixes the container to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* overflow-y: clip;*/
    /*z-index: -1;  Ensures it stays behind other content--worked before lunch, after lunch had to take this out??? */
    /*overflow: hidden; /* Hides elements that move outside the container / makes container not full width */
}

/* Define keyframe animations for each element */
@keyframes float-cyan {
    0% { transform: translate(0, 0); }
    25% { transform: translate(80vw, 70vh); }
    50% { transform: translate(10vw, 50vh); }
    75% { transform: translate(55vw, 60vh); }
    100% { transform: translate(0, 0); }
}

@keyframes float-magenta {
	0% { transform: translate(0, 0); }
    25% { transform: translate(-20vw, -30vh); }
    50% { transform: translate(-55vw, 50vh); }
    75% { transform: translate(20vw, -40vh); }
    100% { transform: translate(0, 0); }
}

@keyframes float-yellow {
	0% { transform: translate(0, 0); }
    25% { transform: translate(-5vw, 45vh); }
    50% { transform: translate(50vw, 10vh); }
    75% { transform: translate(20vw, -60vh); }
    100% { transform: translate(0, 0); }
}

.floating-orb {
	position: absolute;
	width: clamp(75px, 15vw, 150px);
	height: clamp(75px, 15vw, 150px);
	border-radius: 50%;
	filter: blur(7vw);
  	/* optional performance hint for animated objects */
  	will-change: filter;
	opacity: calc(var(--viewport-width-in-pixels) / 800 - 0.1);
    transition: opacity 0.3s ease-in-out;
}

.orb-cyan {
	background: var(--wp--preset--color--custom-cyan);
    top: 10%;
    left: 10%;
    animation: float-cyan 40s infinite ease-in-out;
}

.orb-magenta {
	background: var(--wp--preset--color--custom-magenta);
    top: 50%;
    left: 80%;
    animation: float-magenta 44s infinite ease-in-out;
    animation-delay: 0.5s; /* temp */
}

.orb-yellow {
	background: var(--wp--preset--color--custom-yellow);
    top: 80%;
    left: 30%;
    animation: float-yellow 48s infinite ease-in-out;
    animation-delay: 1s;
}

/* Positioning Utilities */
.absolute { position: absolute; }
.relative { position: relative; }

/* Border Radius */
.rounded-full { border-radius: 9999px; }

/* Cards */

/* Tag Buttons */
:root :where(.is-style-post-terms-1--2 a:where(:not(.wp-element-button))){
	background-color: var(--wp--preset--color--base);
	border: none;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--space-grotesk);
	padding: 0.5rem 1rem;
}

.is-card > li:nth-child(3n) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a {
	color: var(--wp--preset--color--custom-cyan-dark);
}

.is-card > li:nth-child(3n+1) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a {
	color: var(--wp--preset--color--custom-magenta-dark);
}

.is-card > li:nth-child(3n+2) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a {
	color: var(--wp--preset--color--custom-yellow-dark);
}

.is-card > li:nth-child(3n+1) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--custom-cyan-dark);
	border: none;
}

.is-card > li:nth-child(3n+1) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--custom-magenta-dark);
	border: none;
}

.is-card > li:nth-child(3n+1) > main.wp-block-group > div.wp-block-group > div.wp-block-columns > div.card-column-2 > div.wp-block-group > div.is-tags > div.taxonomy-post_tag > a:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--custom-yellow-dark);
	border: none;
}

/* Card Backgrounds */
.is-card > li:nth-child(3n) > main.wp-block-group > div.wp-block-group {
	 background: var(--wp--preset--gradient--custom-cyan-to-dark-cyan) !important;
}
.is-card > li:nth-child(3n+1) > main.wp-block-group > div.wp-block-group {
	 background: var(--wp--preset--gradient--custom-magenta-to-dark-magenta) !important;
}
.is-card > li:nth-child(3n+2) > main.wp-block-group > div.wp-block-group {
	 background: var(--wp--preset--gradient--custom-yellow-to-dark-yellow) !important;
}

/* Utilities */
.display-none {
	display:none !important;
}

/* Font Awesome */
.wp-container-core-group-is-layout-ac6a916b > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1em;
}
.icon-disc {
	width: 40px; /* (h/w of disc behind icon) */
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
svg.svg-inline--fa {
	font-size: 1.5em;
}

element.style {
    font-size: 2.5em;
}

/* Form */

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
	max-width: 100%!important;
}

div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label {
	text-transform: uppercase;
}

div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
	background: linear-gradient(90deg, #00FFFF, #FF00FF)!important;
}

/* Slider */

ol.flex-control-nav:not(.flex-control-thumbs) li a.flex-active, 
ol.flex-control-nav:not(.flex-control-thumbs) li a:not(.flex-active):not(:hover), 
ol.flex-control-nav:not(.flex-control-thumbs) li a:not(.flex-active):hover {
	color: #ffffff00!important;
}

ol.flex-control-nav:not(.flex-control-thumbs) li a {
	border-width: 1px!important;
}

.metaslider.ms-theme-bubble .flexslider ol.flex-control-nav:not(.flex-control-thumbs) li a {
	width: 15px;
	height: 15px;
}

.flexslider ul.flex-direction-nav li a {
    background: rgba(255, 255, 255, 0.5);
}

.flexslider ul.flex-direction-nav li a:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Navigation */
:root :where(.wp-block-navigation) {
    font-size: var(--wp--preset--font-size--medium);
    font-family: var(--wp--preset--font-family--space-grotesk);
    font-weight: 200;
	text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--custom-magenta);
}

.wp-block-navigation__submenu-container {
    text-transform: lowercase;
}

:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover) {
    text-decoration: none;
	color: var(--wp--preset--color--custom-magenta)
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
    height: 1.5em;
    width: 1.5em;
}

.wp-block-navigation .wp-block-navigation__submenu-icon:hover {
    color: var(--wp--preset--color--custom-magenta);
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
    margin-top: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: calc(2rem + 24px);
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1em;
}

.wp-block-navigation ul li {
    padding: 0.5em;
}

:where(.wp-site-blocks *:focus) {
    padding: 1dm;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding-left: 0.5em;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg path {
	stroke-width: 1;
}

/* Header */
.header-z-index {
	position: relative;
	z-index: 20;
}

/* Pullquote */
.wp-block-quote {
	margin-left: -20vw;
	border-color: var(--wp--preset--color--custom-magenta-dark);
    border-width: 0 0 0 5vw;
    font-size: var(--wp--preset--font-size--x-large);
}

/* Scroll Fades */
div.columns-fade-in > * {
	opacity: 0;
	animation: fade-in linear forwards;
	animation-timeline: view();
	animation-range-start: 0%;
	animation-range-end: 15%;
}

@keyframes fade-in {
	to { opacity: 1 }	
}