/*
Theme Name: Trinity Prairie Co.
Theme URI: https://trinityprairieco.com/
Author: Fathom Dev
Description: Lightweight single-page theme for Trinity Prairie Co. Rebuilt from the June 2025 archive snapshot, with layout and type ported from the original theme stylesheet. Replaces the previous Twenty Twenty-One fork.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trinityprairieco
*/

/* ---------------------------------------------------------------
   Tokens
   Every value below is copied from the original theme stylesheet
   (recovered from the archive by fetch-assets.sh), odd decimals
   included.
   --------------------------------------------------------------- */

:root {
	--tpc-black: #000000;
	--tpc-cream: #fdfae2;
	--tpc-mint: #afeccf;
	--tpc-moss: #1e271c;

	/* Unica77 LL only loads once the licensed file is in assets/fonts/
	   (see tpc_assets()); until then the grotesque fallbacks stand in. */
	--tpc-font: "Unica77-LL", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--tpc-edge: 24px;
	--tpc-fade: 1500ms;
}

/* ---------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

body {
	min-height: 100vh;
	background-color: var(--tpc-black);
	color: var(--tpc-cream);
	font-family: var(--tpc-font);
	line-height: 1.5;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

/* Visible keyboard focus everywhere. */
a:focus-visible {
	outline: 2px solid var(--tpc-mint);
	outline-offset: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: var(--tpc-edge);
	left: var(--tpc-edge);
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75em 1.25em;
	overflow: visible;
	clip: auto;
	background: var(--tpc-black);
	color: var(--tpc-cream);
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Hero
   Everything is pinned to the viewport: the photograph behind, the
   wordmark / mark / tagline row across the middle, the social links
   centred at the bottom and the consult button in the corner.
   --------------------------------------------------------------- */

#page {
	width: 100%;
	overflow: auto;
	background: var(--tpc-black);
}

.home_hero {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: var(--tpc-black);
}

/* front-page.php sets --tpc-hero (and --tpc-hero-mobile) from the
   Customizer. */
.background_video {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background-image: var(--tpc-hero, none);
	background-position: top;
	background-size: cover;
}

/* Only used if the hero video is restored (see README). */
.background_video video,
.background_video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.home_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100vh;
	height: 100dvh;
	padding: 5vh var(--tpc-edge);
}

.home_content_middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.text_logo,
.copy {
	width: 387.563px;
}

/* --- Tagline --- */

.copy {
	color: var(--tpc-cream);
	font-family: var(--tpc-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 105%;
	letter-spacing: -0.4px;
}

/* --- Social links --- */

a.social_link {
	margin: 5px;
	color: var(--tpc-cream);
	font-family: var(--tpc-font);
	font-size: 16.446px;
	font-weight: 400;
	line-height: 111%;
	letter-spacing: 0.329px;
	text-decoration-line: underline;
}

/* The original only declared the transition on hover, so the colour
   eases in and snaps back. */
a.social_link:hover,
a.social_link:focus-visible {
	color: var(--tpc-mint);
	transition: color 500ms;
}

/* --- Book a consult ---
   The original drew the pill on the wrapper div, so only the text
   inside it was clickable. Here the link itself is the pill and the
   wrapper just pins it to the corner. */

.book_a_consult {
	position: fixed;
	right: var(--tpc-edge);
	bottom: 5vh;
	display: flex;
}

.book_a_consult a {
	padding: 15px 17px 12px;
	border: 2px solid var(--tpc-mint);
	border-radius: 37.591px;
	color: var(--tpc-mint);
	font-family: var(--tpc-font);
	font-size: 18.796px;
	font-weight: 400;
	line-height: 118%;
	letter-spacing: -0.188px;
	text-decoration: none;
	transition: background-color 500ms, color 500ms;
}

.book_a_consult a:hover,
.book_a_consult a:focus-visible {
	background-color: var(--tpc-mint);
	color: var(--tpc-moss);
}

/* ---------------------------------------------------------------
   1000px and below
   The row breaks up: tagline pinned top-left, mark stacked above the
   wordmark, consult button bottom-left, social links bottom-right.
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
	.home_content {
		padding: 7.5vh 5vw 15vh;
	}

	.home_content_middle {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.copy {
		position: fixed;
		top: 5%;
		left: 5%;
		width: 85%;
	}

	.mark_logo {
		order: 1;
		width: 65px;
		margin-bottom: 20px;
	}

	.text_logo {
		order: 2;
		max-width: 100%;
	}

	.book_a_consult {
		right: auto;
		left: var(--tpc-edge);
	}

	.social {
		position: fixed;
		right: 10%;
		bottom: 7.5%;
	}
}

/* ---------------------------------------------------------------
   800px and below
   Smaller logos, and the portrait background if one is set.
   --------------------------------------------------------------- */

@media (max-width: 800px) {
	.background_video {
		background-image: var(--tpc-hero-mobile, var(--tpc-hero, none));
		background-position: center;
	}

	.mark_logo {
		width: 35px;
	}

	.text_logo {
		width: 200px;
	}
}

/* ---------------------------------------------------------------
   Load-in
   site.js adds `ready` to <body> on window load and the whole page
   fades up from black.
   --------------------------------------------------------------- */

#main {
	opacity: 0;
}

body.ready #main {
	opacity: 1;
	transition: opacity var(--tpc-fade);
}

body.no-js #main {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	#main {
		opacity: 1;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------
   Footer
   Empty in the archived markup, kept for wp_footer().
   --------------------------------------------------------------- */

.site-footer:empty {
	display: none;
}