/*
Theme Name: IWSFF 2k26
Template: twentytwentyfive
Theme URI: https://iwsff.org/
Author: jeremy buller
Author URI: https://jeremybuller.com/
Description: theme for IWSFF 2026
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: iwsff2k26
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.
*/




/**
 * theme color palette:
 *

#e3d2bb	base		beige
#231f20	contrast	black
#57567f	accent 1	purple
#f4878a	accent 2	pink
#ce592b	accent 3	orange
	accent 4	yellow

 *
 */
:root {
	--color-beige: #e3d2bb;
	--color-black: #231f20;
	--color-purple: #57567f;
	--color-pink: #f4878a;
	--color-orange: #ce592b;
	--color-yellow: #f3b84e;
	--color-base: var(--color-beige);
	--color-contrast: var(--color-black);
	--color-accent-1: var(--color-purple);
	--color-accent-2: var(--color-pink);
	--color-accent-3: var(--color-orange);
	--color-accent-4: var(--color-yellow);
}




/**
 * previously: additional css
 */




/**
 * main / section margins / layout etc.
 */

main,
.entry-content,
footer {
	margin-block-start: unset !important;
}




/**
  * buttons
  */
.wp-block-button>a,
a.wp-block-button__link {
	--bg: var(--color-accent-1);
	--border: var(--color-accent-4);
	--shadow: var(--border);
	--color: var(--color-base);

	/* needed to override unsetting of padding by wp mobile menu defaults */
	padding: .5em 1.25em !important;

	background: var(--bg);
	border: .125em solid var(--border);
	border-radius: 1em;
	box-shadow: -.05em .05em 0px var(--shadow), -.1em .1em var(--shadow), -.15em .15em var(--shadow), -.2em .2em var(--shadow);
	color: var(--color);
	font-weight: bold;
	text-transform: uppercase;
	transition: .2s ease-in-out;
}

/* fix for nav menu button links */
.wp-block-button>a>span {
	color: var(--color);
}

.wp-block-button>a:focus,
.wp-block-button>a:hover {
	/* setting color with variable (whether by redefining variable or setting property to a different variable) does not seem to play nicely with child element's `color: inherit` */
	--color: var(--border);

	box-shadow: none;
	text-decoration: none;
}

/* if on purple background */
.has-accent-1-background-color .wp-block-button>a {
	--bg: var(--color-accent-4);
	--border: var(--color-accent-2);
	--color: var(--color-accent-1);
}

/* if on yellow background */
.has-accent-4-background-color .wp-block-button>a {
	--border: var(--color-accent-2);
}




/**
 * header nav: submenus
 */
.buttons-nav .wp-block-navigation__submenu-container a {
	--color: var(--color-accent-1);
	color: var(--color);
	font-size: .75em;
}

/**
 * header nav: mobile
 */
.is-menu-open .wp-block-navigation__responsive-container-content,
.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--color-accent-1) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--color-base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	padding-block-start: 1em;
	padding-block-end: .5em;
	font-size: 125%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item+.wp-block-navigation-item {
	border-top: 1px solid var(--color-base);
}




/**
  * hero
  */
/* .hero {
	overflow: hidden;
}

.hero figure {
	width: 200% !important;
	margin-left: -50% !important;
} */




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

main {
	--100vw: 100vw;
	--hero-expander: 2.75;
	--hero-aspect-ratio: 2048/660;
}

.wp-block-group.hero figure {
	aspect-ratio: calc(var(--hero-aspect-ratio) / var(--hero-expander));
	overflow: hidden;
}

.wp-block-group.hero img {
	width: calc(100% * var(--hero-expander));
	max-width: none;
	margin-inline-start: calc((100% - (100% * var(--hero-expander))) / 2);
}

@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 (??? is that true??? - anyway the last value here should be the original --hero-expander minus 1, but automating that here creates circular logic that yields an undefined --hero-expander) */
		--hero-expander: calc(1 + var(--normalizeddiff) * 1.75);
	}
}

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





/**
 * footer / footer nav
 */
.footer-nav a {
	font-weight: bold;
	text-transform: uppercase;
}

.footer-nav a[href*="instagram.com"] {
	text-transform: none;
}

/**
 * instagram-specific stuff
 */
.wp-block-navigation-item:has(a[href*="instagram.com"]):before {
	content: "";
}




/**
 * utilities
 */
body:not(.wp-admin) .display-none {
	display: none;
}

@media (max-width: 781px) {
	.mobile-order-1 {
		order: 1;
	}

	body:not(.wp-admin) .display-none-mobile {
		display: none;
	}
}

body:not(.wp-admin) .wp-block-post-title,
body:not(.wp-admin) .screen-reader-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal !important;
}