/*
Theme Name: NeedleDroppr
Theme URI: https://needledroppr.com
Author: François-Pierre Grenier
Description: The NeedleDroppr app's look for its website: deep navy, teal, and the record logo whose lettering spins at 33⅓ rpm.
Version: 1.3
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: needledroppr
*/

/* Colors, type and spacing live in theme.json; this file holds what it can't express. */

/* The logo: the same image twice, masked apart like the app does it (DropLogo.swift). The
   lettering sits outside 40.7% of the width from the center, the record inside it. */
.nd-logo {
	position: relative;
	width: min(340px, 78vw);
	aspect-ratio: 1;
	margin-inline: auto;
}
.nd-logo span {
	position: absolute;
	inset: 0;
	background: url(assets/logo.png) center / contain no-repeat;
}
.nd-logo__record {
	-webkit-mask: radial-gradient(circle closest-side, #000 81.4%, transparent 81.5%);
	mask: radial-gradient(circle closest-side, #000 81.4%, transparent 81.5%);
}
.nd-logo__ring {
	-webkit-mask: radial-gradient(circle closest-side, transparent 81.4%, #000 81.5%);
	mask: radial-gradient(circle closest-side, transparent 81.4%, #000 81.5%);
	/* Rests for 2.5 seconds, then winds up like a turntable to 33⅓ rpm (a turn every 1.8
	   seconds). The wind-up is one turn with speed rising steadily (the curve is exactly t²),
	   so it ends at full speed after 2 × 1.8 = 3.6 seconds and hands over to the steady spin
	   without a jolt. */
	animation:
		nd-spin 3.6s cubic-bezier(0.333, 0, 0.667, 0.333) 2.5s both,
		nd-spin 1.8s linear 6.1s infinite;
}
@keyframes nd-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* The record alone, as a small mark next to the name in the header. */
.nd-mark {
	display: block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* Scaled so the record (81.4% of the image) fills the circle. */
	background: url(assets/logo.png) center / 122.9% no-repeat;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nd-logo__ring { animation: none; }
}

/* Header and footer links. */
.nd-nav a,
.nd-footer-links a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}
.nd-nav a:hover,
.nd-nav a:focus-visible,
.nd-footer-links a:hover,
.nd-footer-links a:focus-visible,
.nd-brand a:hover {
	color: var(--wp--preset--color--foreground);
}
.nd-brand a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

/* Buttons: the app's pill, with a gentle lift. */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 6px 18px rgba(23, 128, 165, 0.35);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	box-shadow: none;
}

/* A badge that looks like a button but isn't one, for "Coming soon". */
.nd-badge {
	display: inline-block;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: linear-gradient(#323444, #252738);
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}

/* App screenshots in a phone-like frame. */
.nd-screen img {
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Feature cards. */
.nd-card {
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.nd-card h3::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-bright);
	vertical-align: 0.1em;
}

/* FAQ answers (Details blocks). */
.wp-block-details {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: 0.9rem;
}
.wp-block-details summary {
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
	cursor: pointer;
}
.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

/* A soft teal glow behind the home page's logo. */
.nd-hero {
	background: radial-gradient(ellipse 60% 45% at 50% 30%, rgba(23, 128, 165, 0.22), transparent 70%);
}

/* Header: the mark and name, then the page links. */
.nd-brand {
	margin: 0;
}
.nd-brand a {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}
.nd-nav {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}
.nd-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}
.nd-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nd-center {
	text-align: center;
}

/* Room above section headings in page text, so a heading reads as the start of a section. */
.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
}
.wp-block-post-content > h2 + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* The coffee card: no dot before its heading, unlike the feature cards. */
.nd-coffee h3::before {
	display: none;
}