/* ==========================================================================
   Open Spaces Sanctuary — Design Tokens & Base Styles
   ========================================================================== */

/* Mellos — self-hosted display font used for all headings. */
@font-face {
	font-family: 'Mellos';
	src: url('../fonts/Mellos.ttf') format('truetype'),
	     url('../fonts/Mellos.otf') format('opentype');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--oss-bg: #F5F0E6;
	--oss-primary: #596B58;
	--oss-primary-dark: #46543F;
	--oss-brown: #755B45;
	--oss-gold: #B49A68;
	--oss-gold-light: #D3BE93;
	--oss-text: #353A35;
	--oss-white: #FFFFFF;

	--oss-font-heading: 'Mellos', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--oss-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--oss-section-space: clamp(3.5rem, 6vw, 7rem);
	--oss-container-max: 1300px;
	--oss-radius: 6px;
	--oss-radius-lg: 20px;
	--oss-radius-pill: 999px;

	--oss-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--oss-shadow-sm: 0 2px 10px rgba(53,58,53,0.06);
	--oss-shadow-md: 0 14px 34px rgba(53,58,53,0.10);
	--oss-shadow-lg: 0 26px 60px rgba(53,58,53,0.16);
	--oss-shadow-gold: 0 14px 34px rgba(180,154,104,0.28);
}

/* -------------------------------------------------------------------- */
/* Base                                                                  */
/* -------------------------------------------------------------------- */

/* Base type scaled down 1px (16px -> 15px); rem-based sizes follow. */
html { font-size: 15px; }

body {
	background-color: var(--oss-bg);
	color: var(--oss-text);
	font-family: var(--oss-font-body);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.oss-heading {
	font-family: var(--oss-font-heading);
	color: var(--oss-text);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); margin-bottom: 15px; }
h2 { font-size: clamp(1.95rem, 3.2vw, 3rem); margin-bottom: 20px; }
h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); margin-bottom: 15px; }

p { margin: 0 0 1.25em; }

a {
	color: var(--oss-primary);
	transition: color 0.25s ease;
}
a:hover,
a:focus { color: var(--oss-gold); }

::selection { background: var(--oss-gold); color: var(--oss-white); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.oss-btn:focus-visible {
	outline: 2px solid var(--oss-gold);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------- */
/* Eyebrow / label style                                                 */
/* -------------------------------------------------------------------- */

.oss-eyebrow {
	display: inline-block;
	font-family: var(--oss-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--oss-brown);
	margin-bottom: 0.85rem;
}

/* -------------------------------------------------------------------- */
/* Gold divider                                                          */
/* -------------------------------------------------------------------- */

.oss-divider {
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, var(--oss-gold) 0%, var(--oss-gold-light) 100%);
	border-radius: var(--oss-radius-pill);
	margin: 0.9rem 0 1.5rem;
}
.oss-divider--center { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------- */
/* Sections                                                               */
/* -------------------------------------------------------------------- */

.oss-section {
	padding-top: var(--oss-section-space);
	padding-bottom: var(--oss-section-space);
}
/* For a heading+content pair split across two adjacent .oss-section
   elements (so they can share one background), these remove the
   redundant inner gap — this class's padding otherwise always wins
   over Elementor's own per-section padding setting. */
.oss-section--tight-bottom { padding-bottom: 0 !important; }
.oss-section--tight-top { padding-top: 0 !important; }

.oss-section--sage {
	background-color: var(--oss-primary);
	color: var(--oss-bg);
}
.oss-section--sage h1,
.oss-section--sage h2,
.oss-section--sage h3,
.oss-section--sage p { color: var(--oss-bg); }

.oss-section--cream { background-color: var(--oss-bg); }

.oss-section--white { background-color: var(--oss-white); }

.oss-container {
	max-width: var(--oss-container-max);
	margin: 0 auto;
	padding-left: clamp(1.25rem, 4vw, 2.5rem);
	padding-right: clamp(1.25rem, 4vw, 2.5rem);
}

.oss-section-heading {
	max-width: 720px;
	margin-bottom: 2.5rem;
}
.oss-section-heading--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Utility                                                                */
/* -------------------------------------------------------------------- */

.oss-text-gold { color: var(--oss-gold) !important; }
.oss-text-brown { color: var(--oss-brown) !important; }
.oss-text-sage { color: var(--oss-primary) !important; }
.oss-uppercase { text-transform: uppercase; letter-spacing: 0.12em; }

img { height: auto; }

/* Let Elementor sections span true 100% width — Astra's own container
   would otherwise cap everything at its customizer "Container Width". */
.ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	display: block !important;
}
#primary,
.ast-container .site-content,
.ast-container #primary {
	margin: 0 !important;
	padding: 0 !important;
}

/* Elementor's own .elementor-container has no explicit width, so a single
   narrower child (e.g. our .oss-hero__inner max-width) can shrink-wrap the
   whole row instead of staying centered at the section's content_width. */
.elementor-section .elementor-container {
	width: 100%;
}

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
	width: 1px; word-wrap: normal !important;
}

/* -------------------------------------------------------------------- */
/* Scroll reveal                                                         */
/* -------------------------------------------------------------------- */

.oss-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--oss-ease), transform 0.8s var(--oss-ease);
}
.oss-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.oss-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}