/*
Theme Name: Ikoyi Marble and Ink
Author: WordPress Telex
Description: A dark luxury real estate theme inspired by the refined aesthetic of Lagos's most exclusive neighborhoods. Features gold accent typography, cinematic hero imagery, and elegant property card layouts.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: ikoyi-marble-and-ink
Tags: block-theme, full-site-editing, dark, luxury, real-estate
*/

/* === RESET & BASE === */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* === STICKY HEADER === */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	transition: background 0.4s ease;
}

.site-header,
.site-header.wp-block-group,
.site-header.wp-block-group.has-background,
.wp-site-blocks > header,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .wp-block-template-part > .site-header,
.wp-site-blocks > header .site-header,
.wp-block-template-part > .site-header,
.editor-styles-wrapper .site-header,
.editor-styles-wrapper .site-header.wp-block-group,
.editor-styles-wrapper header[data-type="core/template-part"],
.editor-styles-wrapper [data-type="core/template-part"][data-area="header"],
.editor-styles-wrapper [data-type="core/template-part"][data-area="header"] > div {
	background: transparent !important;
	background-color: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.wp-site-blocks > header {
	background: transparent !important;
	background-color: transparent !important;
}

.site-header .wp-block-site-title a {
	font-family: 'Aboreto', cursive;
	font-size: 1.1rem;
	color: #d4ae62 !important;
	letter-spacing: 4px;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
}

.site-header .wp-block-navigation a {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #d1d1d1 !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-header .wp-block-navigation a:hover {
	color: #d4ae62 !important;
}

/* === HERO SECTION === */
.hero-cover .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hero-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.65rem;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #d1d1d1;
	opacity: 0.7;
}

.hero-headline {
	font-family: 'Aboreto', cursive;
	color: #d4ae62;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
}

.hero-subtitle {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	letter-spacing: 0.5px;
	line-height: 1.6;
}

.hero-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.hero-rule-line {
	width: 60px;
	height: 1px;
	background-color: #d4ae62;
	opacity: 0.5;
}

.hero-rule-diamond {
	width: 6px;
	height: 6px;
	border: 1px solid #d4ae62;
	transform: rotate(45deg);
	margin: 0 14px;
	opacity: 0.5;
}

.hero-cta a {
	font-family: 'Inter', sans-serif;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 10px;
	color: #ffffff !important;
	text-decoration: none !important;
	background: none !important;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-cta a:hover {
	color: #d4ae62 !important;
	border-bottom-color: #d4ae62;
}

/* === SECTION HEADINGS === */
.section-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.6rem;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #d4ae62;
}

.section-headline {
	font-family: 'Aboreto', cursive;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.section-subtitle {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	color: #d1d1d1;
}

/* === GOLD SEPARATOR === */
.gold-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.gold-separator .wp-block-separator {
	border-color: rgba(212, 174, 98, 0.3) !important;
	width: 60px;
}

/* === PROPERTY CARDS === */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.property-card {
	background: #141414;
	border: 1px solid rgba(212, 174, 98, 0.12);
	overflow: hidden;
	transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.property-card:hover {
	border-color: rgba(212, 174, 98, 0.35);
	transform: translateY(-4px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 174, 98, 0.05);
}

.property-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.property-card:hover img {
	transform: scale(1.05);
}

.property-card .card-image-wrapper {
	overflow: hidden;
}

.property-tag {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.55rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #d4ae62;
	background: rgba(212, 174, 98, 0.1);
	border: 1px solid rgba(212, 174, 98, 0.2);
	padding: 4px 12px;
	display: inline-block;
}

.property-title {
	font-family: 'Aboreto', cursive;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.property-location {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.7rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #d1d1d1;
	opacity: 0.7;
}

.property-price {
	font-family: 'Playfair Display', serif;
	color: #d4ae62;
}

.property-meta {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.property-meta-item {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.72rem;
	color: #d1d1d1;
	letter-spacing: 0.5px;
}

.property-card .wp-block-button a {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.7rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	background: transparent !important;
	color: #d4ae62 !important;
	border: 1px solid rgba(212, 174, 98, 0.4);
	transition: background 0.3s ease, border-color 0.3s ease;
}

.property-card .wp-block-button a:hover {
	background: rgba(212, 174, 98, 0.1) !important;
	border-color: #d4ae62;
}

.equal-cards .cta-bottom {
	margin-top: auto;
	justify-content: center;
}

/* === NEIGHBORHOOD CARDS === */
.neighborhood-card {
	position: relative;
	overflow: hidden;
}

.neighborhood-card img {
	transition: transform 0.8s ease;
}

.neighborhood-card:hover img {
	transform: scale(1.08);
}

.neighborhood-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem 1.5rem;
}

/* === STATS BAR === */
.stats-bar {
	border-top: 1px solid rgba(212, 174, 98, 0.15);
	border-bottom: 1px solid rgba(212, 174, 98, 0.15);
}

.stat-number {
	font-family: 'Playfair Display', serif;
	color: #d4ae62;
}

.stat-label {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.6rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #d1d1d1;
	opacity: 0.7;
}

/* === TESTIMONIAL === */
.testimonial-quote {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	line-height: 1.7;
}

.testimonial-author {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.65rem;
	letter-spacing: 4px;
	text-transform: uppercase;
}

/* === CTA SECTION === */
.cta-section {
	border-top: 1px solid rgba(212, 174, 98, 0.1);
	border-bottom: 1px solid rgba(212, 174, 98, 0.1);
}

.cta-button a {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	background: #d4ae62 !important;
	color: #0a0a0a !important;
	padding: 18px 48px !important;
	transition: background 0.3s ease;
}

.cta-button a:hover {
	background: #e3c076 !important;
}

/* === FOOTER === */
.site-footer {
	border-top: 1px solid rgba(212, 174, 98, 0.12);
}

.site-footer a {
	color: #d1d1d1 !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

.site-footer a:hover {
	color: #d4ae62 !important;
}

.footer-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.6rem;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: #d4ae62;
}

.footer-credit {
	border-top: 1px solid rgba(212, 174, 98, 0.08);
}

.footer-credit a {
	color: #d4ae62 !important;
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.animate-fade-in-up {
	animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in {
	animation: fadeIn 1s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* === TEXTURE OVERLAY === */
.texture-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.03;
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(212, 174, 98, 0.15) 2px,
			rgba(212, 174, 98, 0.15) 3px
		);
	pointer-events: none;
	z-index: 1;
}

/* === SCROLL MARGIN FOR ANCHORED SECTIONS === */
[id] {
	scroll-margin-top: 80px;
}

/* === SITE BLOCKS FOOTER FIX === */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* === RESPONSIVE === */
@media (max-width: 782px) {
	.property-meta {
		gap: 0.75rem;
	}

	.hero-headline {
		font-size: 1.5rem !important;
		letter-spacing: 1px;
	}

	.hero-eyebrow {
		font-size: 0.55rem;
		letter-spacing: 4px;
	}

	.stats-bar .wp-block-columns {
		gap: 2rem;
	}
}