/*
Theme Name:        Lens of Alex
Theme URI:         https://lensofalex.com
Author:            Serenichron
Author URI:        https://serenichron.com
Description:       Custom child theme of Twenty Twenty-Five for lensofalex.com. Photography portfolio with custom post types layered on top of imported posts and media.
Template:          twentytwentyfive
Version:           0.1.0
Text Domain:       lensofalex
Requires at least: 6.6
Tested up to:      6.9
Requires PHP:      8.0
License:           Proprietary
*/

/* ============================================================
   DESIGN TOKENS (CSS custom properties, mirrors theme.json)
   ============================================================ */
:root {
	--loa-gold:       #b8935a;
	--loa-rose:       #b0596b;
	--loa-ink:        #141414;
	--loa-ink-soft:   #3d3d3d;
	--loa-paper:      #faf9f5;
	--loa-cream:      #f5f1ea;
	--loa-cream-deep: #e8e2d6;
	--loa-muted:      #8c8478;
	--loa-line:       rgba(20,20,20,0.12);
	--loa-gold-light: rgba(184,147,90,0.18);
	--loa-gold-grad:  linear-gradient(135deg, #c9a96e 0%, #b8935a 50%, #9d7a42 100%);
	--loa-rose-grad:  linear-gradient(135deg, #c4687b 0%, #b0596b 50%, #944958 100%);

	--loa-easing:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--loa-dur:        0.28s;
}


/* ============================================================
   GLOBAL BASE OVERRIDES
   ============================================================ */

/* Remove TT5 default body padding that fights our layout */
body {
	margin: 0;
}

/* Smooth scroll for anchor links */
html {
	scroll-behavior: smooth;
}

/* Selection colour */
::selection {
	background: var(--loa-gold-light);
	color: var(--loa-ink);
}


/* ============================================================
   TYPOGRAPHY — ITALIC EM GRADIENT
   Applies gold gradient to <em> inside display headings.
   The .theme-rose class flips to rose gradient (Familie pages).
   ============================================================ */
.display-hero em,
.wp-block-heading.display-hero em,
.choice-title em,
h1 em,
h2 em {
	font-style: italic;
	background: var(--loa-gold-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.theme-rose .display-hero em,
.theme-rose .choice-title em,
.theme-rose h1 em,
.theme-rose h2 em {
	background: var(--loa-rose-grad);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Eyebrow gold line — pseudo-element before eyebrow text */
.eyebrow {
	position: relative;
	padding-left: 2rem;
}

.eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25rem;
	height: 1px;
	background: var(--loa-gold-grad);
}


/* ============================================================
   SITE NAV — FROSTED GLASS + BORDER
   ============================================================ */
.site-nav {
	backdrop-filter: blur(12px) saturate(1.4);
	-webkit-backdrop-filter: blur(12px) saturate(1.4);
	border-bottom: 1px solid var(--loa-line);
	z-index: 50;
}


/* ============================================================
   BUTTONS — HOVER STATES
   ============================================================ */

/* btn-ink: dark ink button with gold gradient hover overlay */
.btn-ink .wp-block-button__link,
.wp-block-button.btn-ink .wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: color var(--loa-dur) var(--loa-easing);
}

.btn-ink .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--loa-gold-grad);
	opacity: 0;
	transition: opacity var(--loa-dur) var(--loa-easing);
}

.btn-ink .wp-block-button__link:hover::before,
.btn-ink .wp-block-button__link:focus-visible::before {
	opacity: 1;
}

/* Arrow suffix on btn-arrow */
.btn-arrow .wp-block-button__link::after {
	content: " →";
	display: inline-block;
	transition: transform var(--loa-dur) var(--loa-easing);
}

.btn-arrow .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* btn-ghost: transparent border button with subtle fill on hover */
.btn-ghost .wp-block-button__link,
.wp-block-button.btn-ghost .wp-block-button__link {
	transition:
		background var(--loa-dur) var(--loa-easing),
		color var(--loa-dur) var(--loa-easing),
		border-color var(--loa-dur) var(--loa-easing);
}

.btn-ghost .wp-block-button__link:hover,
.btn-ghost .wp-block-button__link:focus-visible {
	background: var(--loa-gold-light) !important;
	border-color: var(--loa-gold) !important;
	color: var(--loa-ink);
}


/* ============================================================
   LANDING PAGE — CHOICE PANELS
   ============================================================ */

.landing-choice {
	flex: 1;
}

.choice {
	position: relative;
	transition: opacity var(--loa-dur) var(--loa-easing);
}

/* Subtle background image overlay per panel — images set via WP media or inline style */
.choice-business,
.choice-familie {
	background-size: cover;
	background-position: center;
}

/* Dim sibling on hover */
.landing-choice:has(.choice:hover) .choice:not(:hover) {
	opacity: 0.6;
}

/* CTA link arrow animation */
.choice-cta-link {
	text-decoration: none;
	transition: letter-spacing var(--loa-dur) var(--loa-easing);
}

.choice-cta-link:hover {
	letter-spacing: 0.3em;
}

.choice-cta .arrow {
	display: inline-block;
	transition: transform var(--loa-dur) var(--loa-easing);
}

.choice-cta-link:hover .arrow {
	transform: translateX(6px);
}


/* ============================================================
   HERO PORTRAIT — OFFSET GOLD FRAME
   ============================================================ */

.hero-portrait {
	position: relative;
}

/* Decorative gold border offset to top-right of image */
.hero-portrait::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 1.5rem;
	left: 1.5rem;
	border: 1.5px solid var(--loa-gold);
	z-index: 1;
	pointer-events: none;
}

.hero-portrait-img img {
	position: relative;
	z-index: 2;
	display: block;
}


/* ============================================================
   STATS ROW
   ============================================================ */

.hero-stats-row {
	container-type: inline-size;
}

.hero-stat .numeric .plus {
	font-size: 0.65em;
	vertical-align: super;
	color: var(--loa-gold);
}

@container (max-width: 480px) {
	.hero-stats-row {
		grid-template-columns: 1fr !important;
	}

	.hero-stat {
		border-left: none !important;
		padding-left: 0 !important;
		border-top: 1px solid var(--wp--preset--color--line);
		padding-top: 1.25rem;
	}
}


/* ============================================================
   SERVICE CARDS
   ============================================================ */

.service-card {
	transition: box-shadow var(--loa-dur) var(--loa-easing),
	            border-color var(--loa-dur) var(--loa-easing);
}

.service-card:hover {
	box-shadow: 0 8px 32px rgba(20,20,20,0.08);
	border-color: var(--loa-gold) !important;
}

.service-card--featured:hover {
	box-shadow: 0 8px 32px rgba(184,147,90,0.22);
}


/* ============================================================
   PAIN ROWS
   ============================================================ */

.pain-row {
	transition: background var(--loa-dur) var(--loa-easing);
}

.pain-row:hover {
	background: rgba(245,241,234,0.04);
}

.pain-number {
	flex-shrink: 0;
	min-width: 2.5rem;
}


/* ============================================================
   PROCESS STEPS
   ============================================================ */

.step-number {
	font-variant-numeric: tabular-nums;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */

.contact-form-wrap {
	transition: border-color var(--loa-dur) var(--loa-easing);
}

.contact-form-wrap:focus-within {
	border-color: var(--loa-gold) !important;
}

/* Fluent Forms reset — align with theme typography */
.contact-form-wrap .ff-el-input--label label,
.contact-form-wrap .ff-el-form-control {
	font-family: inherit;
	font-size: clamp(0.9rem, 1.2vw, 1rem);
	font-weight: 300;
}

.contact-form-wrap .ff-el-form-control {
	border-radius: 0;
	border: 1px solid var(--loa-line);
	padding: 0.75rem 1rem;
	background: transparent;
	transition: border-color var(--loa-dur) var(--loa-easing);
}

.contact-form-wrap .ff-el-form-control:focus {
	border-color: var(--loa-gold);
	outline: none;
	box-shadow: none;
}

.contact-form-wrap .ff_submit_btn_container .ff-btn {
	border-radius: 0;
	background: var(--loa-ink);
	color: var(--loa-cream);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 1rem 1.75rem;
	border: none;
	cursor: pointer;
	transition: background var(--loa-dur) var(--loa-easing);
}

.contact-form-wrap .ff_submit_btn_container .ff-btn:hover {
	background: var(--loa-gold);
}


/* ============================================================
   GALLERY CTA SECTION
   ============================================================ */

.gallery-cta-section {
	position: relative;
	isolation: isolate;
}

/* Optional: when a background image is set on the group,
   add a dark scrim so text remains readable */
.gallery-cta-section.has-background-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20,20,20,0.72);
	z-index: -1;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer a {
	text-decoration: none;
	transition: color var(--loa-dur) var(--loa-easing);
}

.footer a:hover {
	color: var(--loa-gold);
}

.fine a {
	text-decoration: none;
}

.fine a:hover {
	color: var(--loa-gold);
}


/* ============================================================
   RESPONSIVE — MOBILE PATCHES
   ============================================================ */

@media (max-width: 600px) {
	/* Stack hero columns vertically on phones */
	.hero .wp-block-columns {
		flex-direction: column;
	}

	/* Landing choice panels stack */
	.landing-choice {
		flex-direction: column;
	}

	/* Pain rows: number sits above, not inline */
	.pain-row.wp-block-group {
		flex-direction: column;
		gap: 0.75rem;
	}

	.pain-number {
		min-width: auto;
	}
}

@media (max-width: 782px) {
	/* Process steps: remove right border on mobile stacked columns */
	.wp-block-column[style*="border-right"] {
		border-right: none !important;
		padding-right: 0 !important;
		border-bottom: 1px solid rgba(245,241,234,0.12);
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}
}


/* ============================================================
   ARTICLE SINGLE (templates/single.html)
   ============================================================ */

.article-hero .wp-block-post-terms a {
	color: var(--loa-gold);
	text-decoration: none;
}

.article-title {
	max-width: 36ch;
}

.article-meta .wp-block-post-date,
.article-readtime {
	opacity: 0.7;
}

/* Editorial body typography */
.article-content {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	color: var(--loa-ink-soft);
}

.article-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-top: 3rem;
	margin-bottom: 1rem;
}

.article-content h3 {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.article-content p {
	margin-bottom: 1.5rem;
}

/* Pull quotes */
.article-content blockquote {
	border-left: 3px solid var(--loa-gold);
	padding: 0.5rem 0 0.5rem 2rem;
	margin: 2.5rem 0;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--loa-ink);
}

/* Inline images */
.article-content .wp-block-image {
	margin: 2.5rem 0;
}

.article-content .wp-block-image figcaption {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--loa-muted);
	margin-top: 0.75rem;
}

/* Featured image — flush, no gap */
.article-featured-image img {
	width: 100%;
	max-height: 56vh;
	object-fit: cover;
	display: block;
}

.article-back a:hover {
	opacity: 0.7;
}


/* ============================================================
   BLOG ARCHIVE (templates/archive.html)
   ============================================================ */

.archive-header .wp-block-query-title {
	color: var(--wp--preset--color--paper, #fff);
}

/* Card hover lift */
.archive-card {
	transition: transform var(--loa-dur) var(--loa-easing),
	            box-shadow var(--loa-dur) var(--loa-easing);
}

.archive-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(20,20,20,0.12);
}

.archive-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--loa-easing);
}

.archive-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.archive-card .wp-block-post-title a {
	color: var(--loa-ink);
	text-decoration: none;
}

.archive-card .wp-block-post-title a:hover {
	color: var(--loa-gold);
}

/* Pagination */
.archive-pagination .wp-block-query-pagination-next,
.archive-pagination .wp-block-query-pagination-previous,
.archive-pagination .page-numbers {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--loa-ink);
	text-decoration: none;
	padding: 0.6rem 1rem;
	border: 1px solid var(--loa-line);
}

.archive-pagination .page-numbers.current {
	background: var(--loa-ink);
	color: var(--loa-cream);
	border-color: var(--loa-ink);
}

@media (max-width: 768px) {
	.archive-grid {
		grid-template-columns: 1fr !important;
	}

	.article-title {
		max-width: 100%;
	}
}