/* ---------------------------------------------------------------------------
   Pi Kitchen & Bath Fairfax - base type + shared primitives.
   Loaded after tokens.css. Scoped to cooperate with Elementor containers.
--------------------------------------------------------------------------- */

/* Fonts ------------------------------------------------------------------ */
@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('../fonts/plusjakartasans-var.woff2') format('woff2-variations');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Instrument Sans';
	src: url('../fonts/instrumentsans-var.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Base ------------------------------------------------------------------- */
body {
	font-family: var(--pi-font-body);
	font-size: var(--pi-base);
	line-height: 1.7;
	color: var(--pi-body);
	background: var(--pi-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pi-font-display);
	color: var(--pi-ink);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.14;
	margin: 0 0 .5em;
}

/* Alexandria spec: 62px / lh 65.7 / ls -1.2 at desktop. */
h1 { font-size: var(--pi-h1); line-height: 1.06; letter-spacing: -.019em; }
h2 { font-size: var(--pi-h2); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: var(--pi-h3); font-weight: 700; letter-spacing: -.012em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--pi-red); color: #fff; }

:focus-visible {
	outline: 2px solid var(--pi-red);
	outline-offset: 3px;
	border-radius: 2px;
}

img { max-width: 100%; }

/* Elementor cooperation -------------------------------------------------- */
.pi-page h1, .pi-page h2, .pi-page h3 { text-wrap: balance; }

/* Shared primitives ------------------------------------------------------ */
.pi-lead {
	font-size: var(--pi-lead);
	line-height: 1.65;
	color: var(--pi-body);
	max-width: 60ch;
}

/* The Alexandria eyebrow: a small cross glyph, then a wide-tracked label. */
.pi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--pi-font-accent);
	font-size: var(--pi-eyebrow);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pi-red);
	margin-bottom: 1rem;
}
.pi-eyebrow::before {
	content: '✛';
	font-size: .9em;
	line-height: 1;
	opacity: .9;
}
.pi-eyebrow--plain::before { content: none; }
.pi-section--dark .pi-eyebrow { color: var(--pi-gold); }

/* Buttons ---------------------------------------------------------------- */
.pi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	white-space: nowrap;             /* labels never wrap to a second line */
	font-family: var(--pi-font-display);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	padding: 16px 30px;              /* Alexandria spec */
	border-radius: var(--pi-r-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .25s var(--pi-ease), color .25s var(--pi-ease),
	            border-color .25s var(--pi-ease), transform .18s var(--pi-ease);
}

.pi-btn:active { transform: translateY(1px); }

.pi-btn--primary {
	background: var(--pi-red);
	color: #fff;                     /* 4.9:1 on #e20e20 */
	border-color: var(--pi-red);
}
.pi-btn--primary:hover { background: var(--pi-red-hover); border-color: var(--pi-red-hover); }

.pi-btn--light {
	background: #fff;
	color: var(--pi-ink);
	border-color: #fff;
}
.pi-btn--light:hover { background: var(--pi-cream); border-color: var(--pi-cream); }

.pi-btn--outline {
	background: transparent;
	color: var(--pi-ink);
	border-color: var(--pi-line-2);
}
.pi-btn--outline:hover { background: var(--pi-ink); color: #fff; border-color: var(--pi-ink); }

/* Elementor kit override -------------------------------------------------- */
/*
 * The global kit emits `.elementor-kit-58 a { ... }` (0,1,1) and
 * `.elementor-kit-58 a:hover { ... }` (0,2,1). A bare component class loses to
 * both, and the hover rule paints link text brand-red, which on a red button
 * means red-on-red.
 *
 * So every interactive state is declared here explicitly, one level deeper than
 * the kit. Never rely on a component's own `color` alone for an <a>; always
 * pin :hover, :focus and :active too.
 */
.pi-page .pi-btn--primary,
.pi-page .pi-btn--primary:hover,
.pi-page .pi-btn--primary:focus,
.pi-page .pi-btn--primary:active,
.pi-page .pi-btn--primary:visited { color: #fff; }

.pi-page .pi-btn--light,
.pi-page .pi-btn--light:hover,
.pi-page .pi-btn--light:focus,
.pi-page .pi-btn--light:active,
.pi-page .pi-btn--light:visited { color: var(--pi-ink); }

.pi-page .pi-btn--outline,
.pi-page .pi-btn--outline:focus,
.pi-page .pi-btn--outline:visited { color: var(--pi-ink); }
.pi-page .pi-btn--outline:hover,
.pi-page .pi-btn--outline:active { color: #fff; }

/* Links on dark grounds: the kit would paint these near-black. */
.pi-page .pi-contact a,
.pi-page .pi-contact a:visited { color: #fff; }
.pi-page .pi-contact a:hover,
.pi-page .pi-contact a:focus { color: var(--pi-red); }

.pi-page .pi-footer a,
.pi-page .pi-footer a:visited { color: #b9b1a2; }
.pi-page .pi-footer a:hover,
.pi-page .pi-footer a:focus { color: #fff; }

.pi-page .pi-footer .pi-contact a,
.pi-page .pi-footer .pi-contact a:visited { color: #fff; }
.pi-page .pi-footer .pi-contact a:hover { color: var(--pi-red); }

.pi-page .pi-showrooms a,
.pi-page .pi-showrooms a:visited { color: var(--pi-on-dark-muted); }
.pi-page .pi-showrooms a:hover,
.pi-page .pi-showrooms a:focus { color: var(--pi-red); }

/* Drawer navigation. The drawer is a dark card, so these read light. */
.pi-page .pi-drawer__nav a,
.pi-page .pi-drawer__nav a:visited { color: #f3ecdd; }
.pi-page .pi-drawer__nav a:hover,
.pi-page .pi-drawer__nav a:focus { color: #fff; }
.pi-page .pi-drawer__phone,
.pi-page .pi-drawer__phone:visited,
.pi-page .pi-drawer__phone:hover { color: #fff; }

/* Header phone, on the dark capsule. */
.pi-page .pi-header__phone,
.pi-page .pi-header__phone:visited { color: #fff; }
.pi-page .pi-header__phone:hover b { color: var(--pi-red); }

/* Header navigation, on the dark capsule. Alexandria sets these in white. */
.pi-page .pi-header__nav .pi-header__item > a,
.pi-page .pi-header__nav .pi-header__item > a:visited { color: #fff; }
.pi-page .pi-header__nav .pi-header__item > a:hover { color: var(--pi-red); }

/* The drop-down is a white panel, so its rows stay dark. */
.pi-page .pi-header__sub a,
.pi-page .pi-header__sub a:visited { color: #33373d; }
.pi-page .pi-header__sub a:hover { color: var(--pi-red); }

/*
 * Chrome buttons: the kit paints every <button> with the brand fill and, on
 * `:hover`/`:focus`, white text at (0,2,1). These controls are outlined, not
 * filled, so every state has to be pinned or the glyph disappears the moment
 * the button takes focus.
 */
/* The carousel arrows still sit on light grounds. */
.pi-page .pi-rail__btn,
.pi-page .pi-rail__btn:focus,
.pi-page .pi-rail__btn:active {
	background: transparent;
	color: var(--pi-ink);
	border: 1px solid var(--pi-line);
	padding: 0;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
}

/* The burger and the drawer's close button sit on dark surfaces, so they are
   light discs. Every state is declared or the kit repaints them red. */
.pi-page .pi-header__toggle,
.pi-page .pi-header__toggle:hover,
.pi-page .pi-header__toggle:focus,
.pi-page .pi-header__toggle:focus-visible,
.pi-page .pi-header__toggle:active,
.pi-page .pi-drawer__close,
.pi-page .pi-drawer__close:hover,
.pi-page .pi-drawer__close:focus,
.pi-page .pi-drawer__close:focus-visible,
.pi-page .pi-drawer__close:active {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	padding: 0;
	box-shadow: none;
	min-height: 0;
	min-width: 0;
}

.pi-page .pi-header__toggle:hover,
.pi-page .pi-drawer__close:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

.pi-page .pi-rail__btn:hover:not([disabled]),
.pi-page .pi-rail__btn:focus:not([disabled]) {
	background: var(--pi-ink);
	border-color: var(--pi-ink);
	color: #fff;
}
.pi-page .pi-rail__btn[disabled],
.pi-page .pi-rail__btn[disabled]:hover {
	background: transparent;
	color: var(--pi-ink);
	border-color: var(--pi-line-2);
}

/* Reveal ----------------------------------------------------------------- */
/* Content is visible by default. The hidden state only ever applies once JS
   has confirmed it can run, so a script failure can never blank the page. */
html.pi-js .pi-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--pi-dur) var(--pi-ease), transform var(--pi-dur) var(--pi-ease);
	will-change: opacity, transform;
}

html.pi-js .pi-reveal.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	html.pi-js .pi-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* The header CTA is a touch smaller and heavier than a body button, matching
   the Alexandria capsule: 13/26 padding, 14px at 700. */
.pi-page .pi-header .pi-header__cta {
	padding: 13px 26px;
	font-size: .875rem;
	font-weight: 700;
	border-radius: 999px;
}