/*
Theme Name:        The Eclipse
Theme URI:         https://eclipseliving.ca/
Author:            The Eclipse Stony Plain
Description:       Custom theme for The Eclipse, a rental community in Stony Plain, Alberta. Provides the header, footer, design tokens and base styles. Page layouts are built in Elementor; custom widgets live in the Eclipse Core plugin.
Version:           1.0.0
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       the-eclipse
Tags:              custom-logo, custom-menu, featured-images, full-width-template, one-column, translation-ready
*/

/*
 * Contents
 * 1. Design tokens
 * 2. Base
 * 3. Accessibility helpers
 * 4. WordPress core classes
 */

/* ==========================================================================
   1. Design tokens
   The single source of truth for colours, type, spacing and radii.
   The Eclipse Core widgets read these with fallbacks, so they still render
   if the theme is ever switched.
   ========================================================================== */

:root {
	/* Brand */
	--ecl-navy: #0e1d2e;
	--ecl-navy-deep: #0a1521;
	--ecl-navy-hover: #1a2f47;
	--ecl-gold: #c4964e;
	--ecl-gold-hover: #d4a862;
	--ecl-gold-text: #86632a; /* Gold for small text on light backgrounds (WCAG AA). */

	/* Surfaces */
	--ecl-white: #fff;
	--ecl-cream: #f6f2ea;
	--ecl-sand: #f2efe9;
	--ecl-sand-light: #f7f5f0;
	--ecl-sand-hover: #fbf8f2;

	/* Lines */
	--ecl-line: #e2dbce;
	--ecl-line-soft: #ece7de;
	--ecl-line-input: #dcd6cb;

	/* Text on light backgrounds */
	--ecl-heading: var(--ecl-navy);
	--ecl-text: #2a2f36;
	--ecl-text-copy: #3c434c;
	--ecl-text-soft: #4a525c;
	--ecl-text-muted: #5b6470; /* Labels and captions (WCAG AA). */
	--ecl-text-warm: #6e685a; /* Warm labels, e.g. stats strip (WCAG AA). */

	/* Text on dark backgrounds */
	--ecl-on-dark: #fff;
	--ecl-on-dark-nav: #e8e3da;
	--ecl-on-dark-lead: #d8dee5;
	--ecl-on-dark-copy: #c3ccd6;
	--ecl-on-dark-muted: #8c97a3;

	/* Feedback */
	--ecl-error: #b4543f;

	/* Typography */
	--ecl-font: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ecl-fw-light: 300;
	--ecl-fw-regular: 400;
	--ecl-fw-medium: 500;
	--ecl-fw-semibold: 600;

	--ecl-fs-h1-home: clamp(2.5rem, 6.4vw, 5.125rem);   /* 40 → 82px */
	--ecl-fs-h1: clamp(2.25rem, 5vw, 3.75rem);          /* 36 → 60px */
	--ecl-fs-display: clamp(2.125rem, 4.6vw, 3.625rem); /* 34 → 58px */
	--ecl-fs-h2: clamp(1.875rem, 3.8vw, 3rem);          /* 30 → 48px */
	--ecl-fs-h2-alt: clamp(1.75rem, 3.4vw, 2.75rem);    /* 28 → 44px */
	--ecl-fs-h2-light: clamp(1.75rem, 3.4vw, 2.625rem); /* 28 → 42px */
	--ecl-fs-statement: clamp(1.5rem, 2.6vw, 2.125rem); /* 24 → 34px */
	--ecl-fs-lead: 1.0625rem;  /* 17px */
	--ecl-fs-body: 1rem;       /* 16px */
	--ecl-fs-body-lg: 1.125rem; /* 18px */
	--ecl-fs-small: 0.875rem;  /* 14px */
	--ecl-fs-nav: 0.75rem;     /* 12px */
	--ecl-fs-eyebrow: 0.6875rem; /* 11px */

	--ecl-ls-eyebrow: 0.3em;
	--ecl-ls-label: 0.2em;
	--ecl-ls-nav: 0.16em;

	--ecl-lh-tight: 1.1;
	--ecl-lh-heading: 1.15;
	--ecl-lh-body: 1.7;

	/* Layout */
	--ecl-container: 1280px;
	--ecl-container-md: 1180px;
	--ecl-container-sm: 1080px;
	--ecl-container-xs: 900px;
	--ecl-gutter: 28px;
	--ecl-header-h: 70px; /* 94px from 900px up, see media query below. */

	/* Spacing scale */
	--ecl-space-xs: 8px;
	--ecl-space-sm: 16px;
	--ecl-space-md: 28px;
	--ecl-space-lg: 56px;
	--ecl-space-xl: clamp(64px, 8vw, 104px);
	--ecl-space-2xl: clamp(88px, 10vw, 144px);

	/* Radii */
	--ecl-radius-xs: 2px;
	--ecl-radius-sm: 12px;
	--ecl-radius-md: 16px;
	--ecl-radius-lg: 20px;
	--ecl-radius-xl: 24px;
	--ecl-radius-pill: 999px;

	/* Shadows */
	--ecl-shadow-card: 0 8px 28px -12px rgba(10, 21, 33, 0.18);
	--ecl-shadow-gold: 0 14px 30px -14px rgba(196, 150, 78, 0.9);
	--ecl-shadow-drawer: 12px 0 40px rgba(0, 0, 0, 0.25);

	/* Motion */
	--ecl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ecl-duration: 0.3s;

	/* Focus ring: dark gold on light surfaces; dark areas override to --ecl-gold. */
	--ecl-focus: var(--ecl-gold-text);
}

/* The design's only fixed breakpoint: header switches from burger to full nav. */
@media (min-width: 900px) {
	:root {
		--ecl-header-h: 94px;
	}
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ecl-cream);
	color: var(--ecl-text);
	font-family: var(--ecl-font);
	font-size: var(--ecl-fs-body);
	line-height: var(--ecl-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* The design uses white behind the home page and cream behind inner pages. */
body.home {
	background: var(--ecl-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--ecl-heading);
	font-weight: var(--ecl-fw-medium);
	line-height: var(--ecl-lh-heading);
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--ecl-navy);
	text-decoration: none;
	transition: color var(--ecl-duration);
}

a:hover {
	color: var(--ecl-gold-text);
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: middle;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--ecl-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */

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

.screen-reader-text:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 14px 20px;
	clip: auto !important;
	clip-path: none;
	background: var(--ecl-white);
	color: var(--ecl-navy);
	font-size: var(--ecl-fs-small);
	font-weight: var(--ecl-fw-semibold);
	box-shadow: var(--ecl-shadow-card);
}

/* ==========================================================================
   4. WordPress core classes
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

.wp-caption-text,
.gallery-caption {
	margin-top: 0.5em;
	color: var(--ecl-text-muted);
	font-size: var(--ecl-fs-small);
}

.sticky,
.bypostauthor {
	display: block;
}