/*
Theme Name: Inclina
Theme URI: https://inclina.app/
Update URI: https://inclina.app/
Author: Inclina
Description: The brand site for Inclina, motorcycle maps made for riders. Colours, font and mark come from the apps' own tokens (sites/wordpress/scripts/theme.mjs), so the site and the app look the same.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.0
License: Proprietary
Text Domain: inclina
*/

/* Most of the look is theme.json; this is only what blocks can't say. */

/* The header, the page's bands and the footer meet edge to edge, without the block gap between them */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* A card: the features, the live data */
.is-style-inclina-card {
	background: var(--wp--preset--color--surface);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--40);
}

/* The hero and other midnight bands keep their own colours in dark mode */
.inclina-band {
	color: var(--wp--preset--color--road);
}
.inclina-band a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--road);
}
.inclina-band .wp-element-button {
	background: var(--wp--preset--color--road);
	color: var(--wp--preset--color--midnight);
}
.inclina-band .wp-element-button:hover {
	background: var(--wp--preset--color--amber);
}
.inclina-band .is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--road);
	border: 2px solid currentColor;
}

.inclina-eyebrow {
	color: var(--wp--preset--color--amber);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* "Coming to the App Store": a pill that isn't a link yet */
.inclina-soon {
	display: inline-block;
	border: 2px solid currentColor;
	border-radius: 999px;
	padding: 0.65rem 1.4rem;
	font-weight: 600;
	opacity: 0.85;
}

.inclina-mark img {
	width: min(320px, 70vw);
	height: auto;
	filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}

/* Live data (the inclina-live plugin) */
.inclina-live-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inclina-live-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.inclina-live-list li:last-child {
	border-bottom: 0;
}
.inclina-live-meta,
.inclina-live-credit {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
/* As text, the map's teal and the app's red need to be darker on white and lighter on dark to stay readable */
.inclina-live-open {
	color: #0f766e;
	font-weight: 600;
	white-space: nowrap;
}
.inclina-live-closed {
	color: #dc2626;
	font-weight: 600;
	white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
	.inclina-live-open {
		color: var(--wp--preset--color--teal);
	}
	.inclina-live-closed {
		color: #f87171;
	}
}
.inclina-live-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.inclina-live-stats strong {
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

/* The terms and the privacy policy (the inclina-live plugin): a card over the page, a sheet from the bottom on a phone */
.inclina-legal {
	width: min(720px, calc(100vw - 32px));
	max-height: min(86vh, 900px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
.inclina-legal[open] {
	display: flex;
	flex-direction: column;
}
.inclina-legal::backdrop {
	background: rgba(20, 26, 42, 0.6);
	backdrop-filter: blur(2px);
}
.inclina-legal-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.inclina-legal-head h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}
.inclina-legal-head p {
	margin: 0.25rem 0 0;
}
.inclina-legal-close {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
.inclina-legal-close:focus-visible {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 2px;
}
.inclina-legal-body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.5rem 1.5rem 1.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}
.inclina-legal-body h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}
.inclina-legal-body ul {
	padding-left: 1.2rem;
}
.inclina-legal-body li + li {
	margin-top: 0.4rem;
}
.inclina-legal-body blockquote {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}
@media (max-width: 600px) {
	.inclina-legal {
		width: 100vw;
		max-width: 100vw;
		max-height: 92vh;
		margin: auto 0 0;
		border-radius: 20px 20px 0 0;
	}
}

/* Never wider than the screen on a phone */
body {
	overflow-x: hidden;
}