/*
 Theme Name:   Twenty Twenty-Five Child
 Description:  A child theme for my personal website.
 Author:       Evgenii Davydenko
 Template:     twentytwentyfive
 Version:      1.0.0
*/

.text-no-wrap {
	white-space: nowrap;
}

html {
	scrollbar-gutter: stable;
}

/* --- Force My Font as Code typeface --------------------------------------------------------------------------------------- */
:not(.wp-block-kevinbatdorf-code-block-pro) code,
:not(.wp-block-kevinbatdorf-code-block-pro) kbd,
:not(.wp-block-kevinbatdorf-code-block-pro) samp {
    font-family: var(--wp--preset--font-family--monospace) !important;
	font-weight: 500;
	font-size: 0.85em;

	background-color: #f2f2f2;
	padding: 0.15em 0.3em;
	border-radius: 3px;
}

/* --- Main menu buttons ---------------------------------------------------------------------------------------------------- */
.main-menu-buttons .wp-block-button__link{
	white-space: nowrap;
	font-size: clamp(1rem, 3vw, 1.563rem) !important;
}

/* --- Separators ----------------------------------------------------------------------------------------------------------- */
hr.wp-block-separator {
	border: none;
	border-bottom: 2px solid currentColor;
	opacity: 1;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.vertical-separator {
	width: 0px;
	border-left: 2px solid currentColor;
	background-color: transparent;
	height: auto;
	align-self: stretch;
	/* margin: 0 50px; */
	opacity: 1;
}

/* --- Links behavior ------------------------------------------------------------------------------------------------------- */
:root {
    --hover-transition-time: 0.3s;
}

a, 
a:visited, 
.wp-block-group a, 
.wp-block-group a:visited {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: color var(--hover-transition-time) ease;
}

p a, li a, .clickable-container a {
    color: inherit;
}

a:hover {
    color: var(--wp--preset--color--accent) !important;
    text-decoration: none !important;
}

a img {
	filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1);
    transition: filter var(--hover-transition-time) ease !important;
}

a:hover img {
    filter: grayscale(1) sepia(1) hue-rotate(-43deg) saturate(3) brightness(1.0);
    opacity: 1 !important;
}

.clickable-container {
    transition: color var(--hover-transition-time) ease;
    color: inherit;
}

.clickable-container:hover {
    opacity: 1 !important; 
    cursor: pointer;
    color: var(--wp--preset--color--accent) !important;
}

.clickable-container a {
    color: inherit !important;
    transition: none !important; 
}

.clickable-container svg {
    pointer-events: none;
}

.clickable-container svg path {
    fill: currentColor;
    transition: fill var(--hover-transition-time) ease;
}

.main-menu-buttons .wp-block-button__link,
.main-menu-buttons .wp-block-button__link:hover {
    color: var(--wp--preset--color--base) !important; 
    text-decoration: none !important;
    opacity: 1 !important;
    transition: background-color var(--hover-transition-time) ease !important;
}

.main-menu-buttons .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--accent) !important;
    cursor: pointer;
}


/* subsection targeted to query posts and hover groups */
.query_post:hover a,
.hover-group:hover a {
    color: var(--wp--preset--color--accent) !important;
    transition: color var(--hover-transition-time) ease !important;
}

.query_post:hover a img,
.hover-group:hover a img {
    filter: grayscale(1) sepia(1) hue-rotate(-43deg) saturate(3) brightness(1.0) !important;
}

.vertical-separator {
    transition: color var(--hover-transition-time) ease;
}

.query_post:hover .vertical-separator,
.hover-group:hover .vertical-separator {
    color: var(--wp--preset--color--accent) !important;
}

.query_post:hover svg path,
.hover-group:hover svg path {
    fill: var(--wp--preset--color--accent) !important;
    transition: fill var(--hover-transition-time) ease !important;
}

.query_post:hover .clickable-container,
.hover-group:hover .clickable-container {
    color: var(--wp--preset--color--accent) !important;
    transition: color var(--hover-transition-time) ease !important;
}


/* --- Make Home Grid 3 -> 2 -> 1 when scaling down ------------------------------------------------------------------------- */
.query-post-grid .wp-block-post-template {
	grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)) !important;
	flex-wrap: nowrap !important;
}


/* --- Hide first separator if it belongs to hide-first-separator class in the query loop ----------------------------------- */
.wp-block-post-template li:first-child .wp-block-separator.hide-first-separator {
	display: none !important;
}


/* --- Do not scale images more that its actual physical size --------------------------------------------------------------- */
img {
	width: unset !important;
	max-width: 100% !important;
	height: auto !important;
}

/* --- Clickable container -------------------------------------------------------------------------------------------------- */
.clickable-container {
	position: relative;
	display: inline-flex !important; 
	width: auto !important;
	align-items: center;
}
.clickable-container p, 
.clickable-container a {
	position: static !important; 
}
.clickable-container a::after {
	content: ""; 
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	z-index: 10;
	cursor: pointer;
}

/* --- Scaling the arrow svg marked with "follow-text-size" to the size of the text on the left ----------------------------- */
:root {
	--arrlink-scale-global: 0.75;
	--arrlink-nudge-standard: 0.04em;
	--arrlink-nudge-h1: clamp(-0.07em, calc(-0.1vw - 0.01em), 0.0em);
	--arrlink-nudge-h3: 0.03em;
	--arrlink-nudge-h6: 0.01em;
	--arrlink-nudge-p: -0.04em;
	--arrlink-wh-h1: calc(var(--wp--preset--font-size--h-1) * var(--arrlink-scale-global));
	--arrlink-wh-h2: calc(var(--wp--preset--font-size--h-2) * var(--arrlink-scale-global));
	--arrlink-wh-h3: calc(var(--wp--preset--font-size--h-3) * var(--arrlink-scale-global));
	--arrlink-wh-h4: calc(var(--wp--preset--font-size--h-4) * var(--arrlink-scale-global));
	--arrlink-wh-h5: calc(var(--wp--preset--font-size--h-5) * var(--arrlink-scale-global));
	--arrlink-wh-h6: calc(var(--wp--preset--font-size--h-6) * var(--arrlink-scale-global));
	--arrlink-wh-p: calc(var(--wp--preset--font-size--medium) * var(--arrlink-scale-global));
}

.follow-text-size .icon-container {
	width: auto !important;
	height: auto !important;
}

.follow-text-size svg {
	position: relative;
	display: inline-block;
}

h1 + .follow-text-size svg { width: var(--arrlink-wh-h1); height: var(--arrlink-wh-h1); top: var(--arrlink-nudge-h1); }
h2 + .follow-text-size svg { width: var(--arrlink-wh-h2); height: var(--arrlink-wh-h2); top: var(--arrlink-nudge-standard); }
h3 + .follow-text-size svg { width: var(--arrlink-wh-h3); height: var(--arrlink-wh-h3); top: var(--arrlink-nudge-h3); }
h4 + .follow-text-size svg { width: var(--arrlink-wh-h4); height: var(--arrlink-wh-h4); top: var(--arrlink-nudge-standard); }
h5 + .follow-text-size svg { width: var(--arrlink-wh-h5); height: var(--arrlink-wh-h5); top: var(--arrlink-nudge-standard); }
h6 + .follow-text-size svg { width: var(--arrlink-wh-h6); height: var(--arrlink-wh-h6); top: var(--arrlink-nudge-h6); }
p + .follow-text-size svg  { width: var(--arrlink-wh-p); height: var(--arrlink-wh-p); top: var(--arrlink-nudge-p); }

.wp-block-read-more.has-h-6-font-size + .follow-text-size svg { 
	width: var(--arrlink-wh-h6); 
	height: var(--arrlink-wh-h6); 
	top: var(--arrlink-nudge-h6); 
}

/* --- Projects Completed Grid - cells aligned to the right, 4 columns and other stuff -------------------------------------- */
.projects-completed-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.projects-completed-grid > * {
	flex: 0 0 calc(25% - (1.5rem * 3 / 4)); /* 1.5rem - it depends on what you've set up in the editor */
	min-width: 160px;
}

/* --- Back to Top ---------------------------------------------------------------------------------------------------------- */
.hide-on-short-pages {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
}

.hide-on-short-pages.is-visible {
    opacity: 1;
    visibility: visible;
}




/* --- TEST ----------------------------------------------------------------------------------------------------------------- */
.test-row {
	background-color: rgb(98, 180, 247) !important;
	align-items: stretch !important;
}

.test-image {
	background-color: rgb(98, 247, 111) !important;
	margin: 0;
	display: flex;
	height: auto;
	width: auto !important;
	max-width: none !important;
	flex-basis: auto !important; 
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

.test-image img {
	height: 100% !important;
	width: auto !important;
	display: block;
	object-fit: contain;
	aspect-ratio: auto !important; 
	object-fit: contain !important;
	max-width: none !important;
}