/*
 * Theme Name:  Low Noise Labs
 * Theme URI:   https://lownoiselabs.dev
 * Description: Child theme for Ollie — single-page portfolio for Low Noise Labs.
 * Author:      Kerry Putman
 * Author URI:  https://lownoiselabs.dev
 * Template:    ollie
 * Version:     1.0.1
 * License:     GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: lownoiselabs-dev
 */

/*
 * Design tokens live in theme.json.
 * Google Fonts are loaded via functions.php.
 * This stylesheet handles things theme.json cannot express,
 * and overrides Ollie parent styles where needed.
 */

/* ------------------------------------------------------------------
   Custom properties not expressible in theme.json
------------------------------------------------------------------ */

:root {
	--lnl-rule: rgba(34, 28, 22, 0.12);
}

/* ------------------------------------------------------------------
   Global
------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

body {
	/* Subtle paper grain — very low opacity so it reads as texture not noise */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Offset anchors below the sticky header. */
[id] {
	scroll-margin-top: 5rem;
}

/* ------------------------------------------------------------------
   Heading overrides
   Ollie's catch-all elements.heading forces Mona Sans onto all
   headings. These rules restore Cormorant Garamond.
------------------------------------------------------------------ */

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 600;
}

h1.wp-block-heading {
	font-size: clamp(2.5rem, 1.75rem + 3.75vw, 4rem);
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

h2.wp-block-heading {
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
	line-height: 1.25;
	letter-spacing: 0.02em;
}

h3.wp-block-heading {
	font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
	line-height: 1.2;
}

h4.wp-block-heading,
h5.wp-block-heading {
	font-family: var(--wp--preset--font-family--lora);
	font-weight: 500;
}

h6.wp-block-heading {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-weight: 400;
}

/* ------------------------------------------------------------------
   Section padding
------------------------------------------------------------------ */

.wp-block-group.alignfull {
	padding-inline: max(1.5rem, 5vw);
}


/* ------------------------------------------------------------------
   Section label / eyebrow
   Replaces the old Lora eyebrow with JetBrains Mono to match mockup.
------------------------------------------------------------------ */

.lnl-eyebrow {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aged-brass);
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Header — translucent parchment + blur
------------------------------------------------------------------ */

.lnl-header {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--lnl-rule);
	z-index: 100;
}

/* Nav link colour override — mid-tone warm brown, not full inkwell */
.lnl-header .wp-block-navigation a {
	color: var(--wp--preset--color--mid);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lnl-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--inkwell);
}

/* "Say hello" contact link — aged brass with arrow, dims to inkwell on hover */
.lnl-header .wp-block-navigation .lnl-nav-contact a {
	color: var(--wp--preset--color--aged-brass);
}

.lnl-header .wp-block-navigation .lnl-nav-contact a:hover {
	color: var(--wp--preset--color--inkwell);
}

.lnl-header .wp-block-navigation .lnl-nav-contact a::after {
	content: ' →';
}

/* ------------------------------------------------------------------
   Hero section
------------------------------------------------------------------ */

.lnl-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Warm radial glow — spotlights the logo on parchment */
.lnl-hero::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	width: 560px;
	height: 560px;
	background: radial-gradient(ellipse, rgba(160, 120, 64, 0.10) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Logo drop-shadow */
.lnl-hero .wp-block-site-logo img,
.lnl-hero .wp-block-image img {
	filter: drop-shadow(0 8px 32px rgba(34, 28, 22, 0.12)) drop-shadow(0 2px 6px rgba(34, 28, 22, 0.08));
	position: relative;
	z-index: 1;
}

/* Scroll indicator */
.lnl-hero-scroll {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 11px;
	color: var(--wp--preset--color--mid);
	letter-spacing: 0.08em;
	opacity: 0.6;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Section rule dividers
------------------------------------------------------------------ */

.lnl-section-rule.wp-block-separator {
	border: none;
	height: 1px;
	background-color: var(--lnl-rule);
	max-width: none;
	margin-inline: auto;
	opacity: 1;
}

/* ------------------------------------------------------------------
   Project card grid
   Override Columns flex layout with CSS grid to get 2px flush gaps.
------------------------------------------------------------------ */

.lnl-project-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px !important;
	flex-wrap: unset;
}

.lnl-project-grid .wp-block-column {
	flex: unset;
	width: auto;
	min-width: 0;
}

@media (max-width: 640px) {
	.lnl-project-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   Project cards
------------------------------------------------------------------ */

.lnl-project-card {
	background-color: var(--wp--preset--color--parchment);
	border: 1px solid var(--lnl-rule);
	padding: 40px 36px;
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lnl-project-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(34, 28, 22, 0.09);
	z-index: 1;
}

/* Hover reveal arrow */
.lnl-project-card::after {
	content: '→';
	position: absolute;
	bottom: 32px;
	right: 32px;
	font-size: 18px;
	color: var(--wp--preset--color--aged-brass);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lnl-project-card:hover::after {
	opacity: 1;
	transform: translateX(0);
}

/* Card text colours */
.lnl-project-card p {
	color: var(--wp--preset--color--mid);
	font-size: 15.5px;
	line-height: 1.6;
}

/* Coming-soon variant — transparent with dashed border, no hover arrow */
.lnl-project-card--soon {
	background-color: transparent !important;
	border: 1px dashed rgba(34, 28, 22, 0.15);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lnl-project-card--soon::after {
	display: none;
}

.lnl-project-card--soon h3.wp-block-heading,
.lnl-project-card--soon p {
	color: var(--wp--preset--color--mid);
	opacity: 0.5;
}

/* ------------------------------------------------------------------
   About — sticky left column
------------------------------------------------------------------ */

#about .wp-block-column:first-child {
	position: sticky;
	top: 90px;
	align-self: start;
}

/* ------------------------------------------------------------------
   CTA buttons
------------------------------------------------------------------ */

.wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--inkwell);
	color: var(--wp--preset--color--inkwell);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--inkwell);
	color: var(--wp--preset--color--parchment);
}

/* ------------------------------------------------------------------
   Inline code (outside a code block)
------------------------------------------------------------------ */

:not(pre) > code {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 0.875em;
	background-color: var(--wp--preset--color--inkwell);
	color: var(--wp--preset--color--parchment);
	padding: 0.15em 0.45em;
}

/* ------------------------------------------------------------------
   Contact section — sticky heading column (mirrors About's sticky left)
------------------------------------------------------------------ */

#contact .wp-block-column:last-child {
	position: sticky;
	top: 90px;
	align-self: start;
}

/* ------------------------------------------------------------------
   Contact form
------------------------------------------------------------------ */

.lnl-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.lnl-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.lnl-field label {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aged-brass);
}

.lnl-field input,
.lnl-field textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid rgba(34, 28, 22, 0.25);
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--wp--preset--color--inkwell);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.lnl-field input:focus,
.lnl-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--inkwell);
}

.lnl-field textarea {
	resize: vertical;
	min-height: 140px;
}

.lnl-submit {
	align-self: flex-start;
	background-color: var(--wp--preset--color--inkwell);
	color: var(--wp--preset--color--parchment);
	border: none;
	padding: 0.75rem 2rem;
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.lnl-submit:hover {
	background-color: var(--wp--preset--color--aged-brass);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Hero — boutique descriptor line
------------------------------------------------------------------ */

.lnl-hero-descriptor {
	color: var(--wp--preset--color--mid);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-top: 0.25rem;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Philosophy section — opener + pull quote
------------------------------------------------------------------ */

.lnl-philosophy-opener {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--inkwell);
}

.lnl-pull-quote {
	border-left: 2px solid var(--wp--preset--color--aged-brass);
	padding-left: 1.5rem;
	font-family: var(--wp--preset--font-family--lora);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--wp--preset--color--inkwell);
	line-height: 1.6;
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   Coming-soon card — pulsing label + deliberate placeholder
------------------------------------------------------------------ */

.lnl-coming-soon-label {
	font-family: var(--wp--preset--font-family--jetbrains-mono) !important;
	font-size: 10px !important;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aged-brass) !important;
	opacity: 0.8 !important;
	margin-bottom: 0.25rem;
}

.lnl-coming-soon-label::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--aged-brass);
	margin-right: 8px;
	vertical-align: middle;
	animation: lnl-pulse 2.5s ease-in-out infinite;
}

@keyframes lnl-pulse {
	0%, 100% { opacity: 0.2; }
	50%       { opacity: 0.7; }
}

/* Override the blanket opacity-0.5 rule — label has its own treatment */
.lnl-project-card--soon h3.wp-block-heading {
	color: var(--wp--preset--color--mid);
	opacity: 0.6;
}

.lnl-project-card--soon p:not(.lnl-coming-soon-label) {
	color: var(--wp--preset--color--mid) !important;
	opacity: 0.45 !important;
}

/* ------------------------------------------------------------------
   Footer — GitHub link style
------------------------------------------------------------------ */

.lnl-footer-meta a {
	color: rgba(244, 239, 228, 0.6);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.lnl-footer-meta a:hover {
	color: rgba(244, 239, 228, 0.9);
}

/* ------------------------------------------------------------------
   Mobile navigation — hamburger button + overlay
------------------------------------------------------------------ */

/* Hamburger open/close button colours */
.lnl-header .wp-block-navigation__responsive-container-open,
.lnl-header .wp-block-navigation__responsive-container-open svg {
	color: var(--wp--preset--color--inkwell);
	fill: var(--wp--preset--color--inkwell);
}

/* Full-screen overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #F4EFE4 !important;
	padding: 2rem max(1.5rem, 5vw);
}

/* Close button */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close svg {
	color: var(--wp--preset--color--inkwell);
}

/* Overlay nav links — large serif, on-brand */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cormorant-garamond) !important;
	font-size: clamp(2rem, 5vw, 3rem) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--inkwell) !important;
	text-decoration: none;
}

/* "Say hello" keeps its brass colour in the overlay */
.wp-block-navigation__responsive-container.is-menu-open
.lnl-nav-contact .wp-block-navigation-item__content {
	color: var(--wp--preset--color--aged-brass) !important;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */

.lnl-footer .wp-block-site-title a,
.lnl-footer .wp-block-site-title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--parchment);
	text-decoration: none;
}

.lnl-footer-meta {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: rgba(244, 239, 228, 0.6);
}