/*
Theme Name: River Shore Development Simple
Theme URI: https://github.com/reynoldsandmyers/river-shore-theme
Author: Reynolds and Myers
Description: A single-page WordPress block theme for River Shore Development.
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: river-shore-development-simple
Tags: block-theme, one-column, full-site-editing, block-patterns, editor-style
*/

/*
 * Design tokens live in theme.json. Only rules theme.json cannot express
 * belong here.
 */

/*
 * Hairline rule. Core renders the separator as a 2px bottom border; the comp
 * calls for a 1px top rule. `is-style-wide` on the block lifts core's 100px
 * width cap so the line spans the content column.
 */
.wp-block-separator.rs-rule {
	width: 100%;
	height: 0;
	margin: 0 auto;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent);
	opacity: 1;
}

/* Letter-spaced caps label above the contact details. */
.rs-eyebrow {
	margin: 0;
	font-weight: 400;
	/* 11.4px x 0.195em reproduces the comp's cap height and its 156px ink
	   width at the same time. */
	letter-spacing: 0.195em;
	/* Tracking adds trailing space that breaks optical centering. */
	text-indent: 0.195em;
	text-transform: uppercase;
}

.rs-contact {
	margin: 0;
	font-weight: 300;
	line-height: 1.5;
	/*
	 * The email is 338px wide at its 18px design size, so it overflows a
	 * 390px viewport. Scale it down with the viewport instead of wrapping
	 * an address mid-string; the max keeps the design size on desktop.
	 *
	 * The address measures 18.78px of width per 1px of font size, and the
	 * column is 100vw minus the 3.5rem of root padding. Dividing by 19.6
	 * rather than 18.78 keeps ~4% slack so rounding cannot overflow.
	 */
	font-size: clamp(0.75rem, calc((100vw - 3.5rem) / 19.6), 1.125rem);
}

.rs-contact a {
	text-decoration: none;
}

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

/* The logo ships as a JPEG with a baked-in white plate. */
.rs-logo {
	margin: 0 auto;
}

.rs-logo img {
	display: block;
}

/* The two contact lines read as one block; the comp sets them tighter than
   the surrounding rhythm. */
.rs-contact + .rs-contact {
	margin-top: 6px;
}