/*
Theme Name: Elite Pearl Charter
Theme URI: https://elitepearlcharter.com/
Author: Elite Pearl Charter
Description: Custom lightweight theme for Elite Pearl Charter. No page builder, no bloat.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elitepearl
*/

/* -------------------------------------------------------------
   Design tokens — extracted from the current live site.
   Change a brand colour here and it changes everywhere.
   ------------------------------------------------------------- */
:root {
	/*
	 * Monochrome brand palette, taken from what the live CSS actually renders.
	 * There is no gold and no navy in the real design — the #F4CF00 and #1D3557
	 * in the Elementor kit are unused saved swatches, not brand colours.
	 */

	/* Darks — backgrounds */
	--epc-black: #000000;
	--epc-ink-950: #0b0c10;
	--epc-ink-900: #181818;
	--epc-ink-850: #1e232d;
	--epc-ink-800: #242935;
	--epc-ink-700: #343842;

	/* Lights — text */
	--epc-white: #ffffff;
	--epc-silver: #8d8f8e;
	--epc-grey: #808080;
	--epc-grey-dark: #7c7c7c;

	/* Hairlines and washes over dark surfaces */
	/*
	 * The one colour on the site, and it earns its place: a live-offer signal
	 * means nothing in monochrome. Used only for the menu dot.
	 */
	--epc-live: #2fd07a;

	--epc-line: rgb(255 255 255 / 12%);
	--epc-line-soft: rgb(255 255 255 / 8%);
	--epc-wash: rgb(255 255 255 / 6%);
	--epc-nav-idle: rgb(255 255 255 / 82%);

	/*
	 * Signature gradient — this is the brand accent, in place of a colour.
	 * Same values as the existing .custom-title rule.
	 */
	--epc-gradient-title: linear-gradient(135deg, #ffffff, #8d8f8e);
	--epc-gradient-surface: linear-gradient(135deg, #000000, #242935, #8d8f8e);

	/*
	 * For wide surfaces. --epc-gradient-surface ends on #8d8f8e, which is a
	 * subtle sheen across a 376px card but lands its silver end inside anything
	 * much wider: it measured rgb(191,192,193) under the chips on the yacht
	 * panel, and it had washed out a rate table, a wide card and a price panel
	 * the same way. Same family and direction, kept dark the whole way across.
	 */
	--epc-gradient-panel: linear-gradient(150deg, #1e232d 0%, #0b0c10 55%, #000000 100%);
	--epc-gradient-fade: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, #000000 100%);

	/* Typography */
	--epc-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--epc-font-serif: "Cardo", ui-serif, Georgia, "Times New Roman", serif;

	/* Layout */
	--epc-container: 1280px;
	--epc-gutter: clamp(1rem, 4vw, 2.5rem);
	--epc-header-h: 64px;

	/* Motion */
	--epc-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/*
	 * Softer curve for hover states: moves off quickly then settles slowly, so
	 * it reads as gliding rather than snapping. Use this for anything the
	 * pointer triggers.
	 */
	--epc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
	--epc-speed: 220ms;

	/* Elevation */
	--epc-shadow-header: 0 2px 18px rgb(0 0 0 / 55%);
	--epc-shadow-menu: 0 18px 40px rgb(0 0 0 / 45%);

	--epc-z-header: 1000;
}

/*
 * Size tiers. The desktop nav needs roughly 1150px to lay out the logo, six
 * menu items and two buttons without crowding, so the horizontal bar starts at
 * 1200px and everything below that gets the drawer.
 */

/* Large phone */
@media (min-width: 480px) {
	:root {
		--epc-header-h: 72px;
	}
}

/* Tablet */
@media (min-width: 768px) {
	:root {
		--epc-header-h: 80px;
	}
}

/* Laptop and up — horizontal nav */
@media (min-width: 1200px) {
	:root {
		--epc-header-h: 88px;
	}
}

/* Large desktop */
@media (min-width: 1536px) {
	:root {
		--epc-container: 1440px;
		--epc-header-h: 96px;
	}
}

/* Minimal reset — scoped small on purpose, this is navbar-stage only. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The whole site is dark, so the page ground is black. It was white, which is
 * only ever visible as a mistake: beside a section that constrains its own
 * width, in the overscroll bounce, or for the instant before CSS paints.
 */
body {
	margin: 0;
	font-family: var(--epc-font-sans);
	color: var(--epc-silver);
	background: var(--epc-black);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

/*
 * Reusable version of the existing .custom-title rule. Use this class on any
 * heading instead of repeating the gradient — change the gradient once, in the
 * token above, and every title follows.
 */
.epc-gradient-text,
.custom-title {
	background: var(--epc-gradient-title);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}