/* ============================================================
   Amrita SeRVe — Base layer
   Global typography, layout width fixes, buttons, utilities.
   ============================================================ */

/* ---- Typography ---------------------------------------------------- */
body {
	font-family: var(--as-font-body);
	font-size: var(--as-body);
	line-height: 1.72;
	color: var(--as-text);
	background: var(--as-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* safety net for full-bleed 100vw heroes */
}
html { overflow-x: clip; }

h1, h2, h3, h4, h5,
.entry-title,
.ast-archive-title {
	font-family: var(--as-font-head);
	color: var(--as-green-900);
	line-height: 1.14;
	letter-spacing: -0.012em;
	font-weight: 600;
}

h1 { font-size: var(--as-h1); }
h2 { font-size: var(--as-h2); }
h3 { font-size: var(--as-h3); }

p { margin: 0 0 1.15em; }

.entry-content p,
.as-prose p { color: var(--as-text-soft); }

a { color: var(--as-green-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--as-orange-600); }

/* Readable line length for long-form article bodies */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 72ch; }

/* ---- Layout width — fixes the "floating in huge empty space" issue -- */
.ast-container,
.site-content .ast-container {
	max-width: var(--as-container-wide);
	padding-left: var(--as-gutter);
	padding-right: var(--as-gutter);
}

.as-container {
	width: 100%;
	max-width: var(--as-container);
	margin-inline: auto;
	padding-inline: var(--as-gutter);
}
.as-container--wide { max-width: var(--as-container-wide); }

/* ---- Focus visibility (accessibility) ----------------------------- */
a:focus-visible,
button:focus-visible,
.menu-link:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--as-orange);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Buttons / CTAs ----------------------------------------------- */
.as-btn,
.entry-content .wp-block-button__link,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--as-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.1;
	padding: 0.9em 1.7em;
	border-radius: var(--as-radius-pill);
	background: var(--as-green);
	color: #fff !important;
	border: 2px solid var(--as-green);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s var(--as-ease), background 0.25s var(--as-ease),
		box-shadow 0.25s var(--as-ease), border-color 0.25s var(--as-ease);
}
.as-btn:hover,
.wp-block-button__link:hover {
	background: var(--as-green-900);
	border-color: var(--as-green-900);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--as-shadow);
}
.as-btn--orange { background: var(--as-orange-600); border-color: var(--as-orange-600); }
.as-btn--orange:hover { background: var(--as-orange-700); border-color: var(--as-orange-700); }
.as-btn--ghost {
	background: transparent;
	color: var(--as-green) !important;
	border-color: var(--as-green);
}
.as-btn--ghost:hover { background: var(--as-green); color: #fff !important; }
.as-btn--light {
	background: #fff; color: var(--as-green-900) !important; border-color: #fff;
}
.as-btn--light:hover { background: var(--as-beige); border-color: var(--as-beige); color: var(--as-green-900) !important; }

.as-arrow { transition: transform 0.25s var(--as-ease); display: inline-block; }
.as-btn:hover .as-arrow { transform: translateX(4px); }

/* ---- Utility ------------------------------------------------------- */
.as-eyebrow {
	display: inline-block;
	font-family: var(--as-font-body);
	font-weight: 700;
	font-size: var(--as-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--as-orange-600);
	margin-bottom: 0.6rem;
}
.as-lede { font-size: 1.2rem; color: var(--as-text-soft); line-height: 1.6; }
.as-center { text-align: center; }
.as-mt-0 { margin-top: 0; }

/* ---- Reveal-on-scroll animation (restrained) ----------------------- */
.as-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--as-ease), transform 0.7s var(--as-ease);
	will-change: opacity, transform;
}
.as-reveal.is-visible { opacity: 1; transform: none; }
.as-reveal[data-delay="1"] { transition-delay: 0.08s; }
.as-reveal[data-delay="2"] { transition-delay: 0.16s; }
.as-reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	.as-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	* { scroll-behavior: auto !important; }
}