/*
Theme Name: Midtown Boise Simple
Theme URI: https://github.com/reynoldsandmyers/river-shore-theme
Template: rm-splash
Author: Reynolds and Myers
Description: Single-page splash site for Midtown Boise.
Requires at least: 6.6
Tested up to: 7.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: midtown-boise-simple
Tags: block-theme, one-column, full-site-editing, block-patterns
*/

/*
 * Brand colours and the Lato face are in theme.json. This file holds the
 * ornament unique to Midtown: a cream disc behind the logo and a translucent
 * card behind the contact details.
 */

.mt-splash {
	/* Lato renders the address at 16.47px of width per 1px of font size;
	   17.4 leaves ~5% slack so rounding cannot overflow. */
	--rs-contact-divisor: 17.4;
	--rs-contact-max: 1.125rem;
	--rs-contact-gap: 6px;
}

/*
 * The logo ships as a black JPEG tile. The disc behind it is design, not part
 * of the asset, so it is drawn here.
 */
.mt-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--plate);
}

.mt-plate img {
	display: block;
	width: 83px;
	height: auto;
}

/*
 * Contact card: frosted glass.
 *
 * The comp is not a flat wash over the photo. Measuring it shows three things:
 * a 1px stroke that solves to white at 0.23 alpha once composited over the
 * fill, a dark green tint, and a real blur - high-frequency detail in the
 * photograph drops about 40% inside the card versus immediately outside it.
 * Fill alpha and stroke alpha were then tuned by sampling the comp's interior
 * at matched relative positions rather than by eye.
 *
 * Without backdrop-filter the photo would read through sharply and the card
 * would look like a dirty pane, so the fallback fill is markedly more opaque
 * and only the blurred version is allowed to be translucent.
 */
.mt-panel {
	border: 1px solid rgba( 255, 255, 255, 0.23 );
	border-radius: 24px;
	background: rgba( 26, 35, 29, 0.88 );
}

@supports ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) {
	.mt-panel {
		background: rgba( 26, 35, 29, 0.64 );
		-webkit-backdrop-filter: blur( 18px ) saturate( 1.1 );
		backdrop-filter: blur( 18px ) saturate( 1.1 );
	}
}

.mt-label {
	margin: 0;
	/* Georgia matches the comp's ink width only by shrinking to 15px, which
	   leaves the label visibly short. Times New Roman bold italic at 18.8px
	   hits the width and the cap-to-descender height together. */
	font-family: var(--wp--preset--font-family--brand-serif);
	font-style: italic;
	font-weight: 700;
}

.mt-splash .rs-contact a {
	text-decoration: underline;
	/*
	 * The rule is the text colour at about a third strength, not the text
	 * colour itself. Solved against the comp it gives alpha 0.35 with only
	 * 0.004 spread across channels; against white the spread is 0.023, so the
	 * underline is tinted cream like the text rather than plain white.
	 */
	text-decoration-color: rgba( 244, 239, 227, 0.35 );
	text-decoration-thickness: 1px;
	/* Comp sits the rule 5px under an 18px baseline. */
	text-underline-offset: 0.28em;
}

.mt-splash .rs-contact a:hover,
.mt-splash .rs-contact a:focus-visible {
	color: var(--wp--preset--color--accent);
}