/*
Theme Name: IWSFF 2k25
Theme URI: https://iwsff.org/
Author: jeremy buller
Author URI: https://jeremybuller.com/
Description: placeholder theme for IWSFF pre-launch
Tags: 
Version: 0.1
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iwsff2k25
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

* {
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: inherit;
}

html,
body {
	min-height: 100vh;
}

body {
	margin: 0;
	background: #e4d1b1 url(/wp-content/themes/iwsff2k25/img/background.avif) left center / cover no-repeat;
}

main {
	/* height: 100vh;
	display: grid;
	place-items: center; */
}

img {
	max-width: 100%;
	vertical-align: middle;
}




/**
 * main / aside layout
 *
 * - flexible and vertically centered main
 * - set height of aside containing sponsor logos
 */
body {
	display: grid;
	/* gap: 1rem; */
	/* grid-template-rows: 1fr 100px; */
}

main {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
}

@media (min-width: 600px) {
	aside {
		flex-direction: row;
		justify-content: center;
	}
}





/**
 * sponsor logos
 */
a.sponsor-logo {
	display: grid;
	place-items: center;
	max-height: 120px;
}

a.sponsor-logo img {
	object-fit: scale-down;
}




/**
 * dynamic sizing of title imagery
 */
@property --100vw {
	syntax: "<length>";
	initial-value: 0px;
	inherits: true;
}

main {
	--100vw: 100vw;
	--bg-expander: 1.25;
	--keyart-aspect-ratio: 1440/868;
}

h1.title {
	/* hide text, make full width */
	width: 100%;
	display: grid;
	place-items: center;
	aspect-ratio: calc(var(--keyart-aspect-ratio) / var(--bg-expander));
	background-color: transparent;
	background-image: url(/wp-content/themes/iwsff2k25/img/international-womens-sports-film-festival.avif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: calc(100% * var(--bg-expander));
}

@media (min-width: 360px) and (max-width: 1120px) {
	main {
		/* using this instead of 100vw in further calculations lets us math! @link https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j */
		/* would be tan(atan2(var(--100vw), 1px)) but we need workarounds for safari and firefox bugs: @link https://bugs.webkit.org/show_bug.cgi?id=263000, @link https://bugzilla.mozilla.org/show_bug.cgi?id=1939353 */
		--screenwidth: calc(10000 * tan(atan2(var(--100vw), 10000px)));

		/* difference between screen width and our media query max-width... */
		--diff: calc(var(--screenwidth) - 1120);

		/* ...positivized... */
		--absdiff: calc(var(--diff) * -1);

		/* ...and normalized to difference between media query endpoints */
		--normalizeddiff: calc(var(--absdiff) / (1120 - 360));

		/* result should be a number between 1 and 2 */
		--bg-expander: calc(1 + var(--normalizeddiff) * .25);
	}
}

@media (min-width: 1120px) {
	main {
		--bg-expander: 1;
	}
}




/**
 * utilities
 */
.visually-hidden {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}