/*
Theme Name: Telaar
Theme URI: https://telaar.de
Description: Telaar child theme based on Twenty Twenty-Five.
Author: Telaar
Author URI: https://telaar.de
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.2
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: telaar
*/

/* Site logo switches to 400px wide once the viewport narrows past 905px, and
   stays there until the fixed-position hamburger icon (44px wide, 1rem from
   the right edge) starts crowding it below ~510px. Below that, shrink the
   logo fluidly so a 20px gap to the icon is always kept: the icon's left
   edge sits at (100vw - 60px), the logo starts 30px from the left edge, so
   the logo's max width is (100vw - 110px). Floors out at 160px. */
@media (max-width: 905px) {
	.wp-block-site-logo img {
		width: clamp(160px, calc(100vw - 110px), 400px);
	}
}

/* All columns blocks otherwise stack at core's built-in 782px breakpoint,
   well below the 905px logo/nav switch above - so between 782px and 904px,
   columns everywhere (header included) are squeezed into a cramped row
   right up until they suddenly snap to stacked at 782px. Move every
   columns block's stacking point up to match the logo/nav switch instead,
   so the whole site transitions at once. */
@media (max-width: 904px) {
	.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* The header's nav column is empty at this breakpoint (the mobile menu
	   is a separate fixed-position drawer), so its row-gap to the logo
	   column would otherwise show as dead space. */
	header.wp-block-template-part .wp-block-columns {
		row-gap: 0 !important;
	}
}

/* Small hover effect for any image that's wrapped in a link: a slight zoom
   plus a translucent white overlay. */
a img {
	transition: transform .2s ease;
}

a:hover img,
a:focus-visible img {
	transform: scale(1.04);
}

a:has(> img) {
	position: relative;
	display: inline-block;
}

a:has(> img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0);
	transition: background-color .2s ease;
	pointer-events: none;
}

a:has(> img):hover::after,
a:has(> img):focus-visible::after {
	background-color: rgba(255, 255, 255, .35);
}

@media (prefers-reduced-motion: reduce) {
	a img {
		transition: none;
	}
	a:has(> img)::after {
		transition: none;
	}
}