/*
Theme Name: Enrishi
Theme URI: https://enrishi.com
Author: Rishi Nadkarni
Author URI: https://enrishi.com
Description: A calm, academic block theme for EnRishi Tutoring. Serif headings on a parchment ground, one brass accent, translucent chrome, and motion used only where it earns its place.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: enrishi
Tags: education, one-column, custom-colors, custom-menu, editor-style, block-patterns, full-site-editing
*/

/* -------------------------------------------------------------------------
   Motion vocabulary

   Curves and durations are defined once, in theme.json, and surface here.
   Nothing below invents a value.

   --ease-out       strong ease-out for anything entering or responding
   --ease-in-out    for elements already on screen moving from A to B
   --duration-press 160ms, the press acknowledgement
   --duration-ui    200ms, the standard UI budget
   --duration-panel 250ms
   ---------------------------------------------------------------------- */

:root {
	--ease-out: var( --wp--custom--ease--out );
	--ease-in-out: var( --wp--custom--ease--in-out );
	--duration-press: var( --wp--custom--duration--press );
	--duration-ui: var( --wp--custom--duration--ui );
	--duration-panel: var( --wp--custom--duration--panel );

	/* Reveals are marketing motion, so they may exceed the 300ms UI budget. */
	--duration-reveal: 560ms;
}

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

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* Figures that change should not shift their neighbours. */
.enrishi-tabular,
.enrishi-stat,
.enrishi-price {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   Focus
   ---------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--brass );
	outline-offset: 3px;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
   Header — translucent chrome

   Content passes underneath rather than being pushed below an opaque bar.
   The separating edge appears only once something is actually behind it,
   which is why there is no permanent border.
   ---------------------------------------------------------------------- */

.enrishi-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba( 251, 248, 243, 0.72 );
	-webkit-backdrop-filter: saturate( 180% ) blur( 20px );
	backdrop-filter: saturate( 180% ) blur( 20px );
	border-bottom: 1px solid transparent;
	transition: border-color var( --duration-panel ) var( --ease-out ),
		background-color var( --duration-panel ) var( --ease-out );
}

.enrishi-header[ data-scrolled ] {
	background-color: rgba( 251, 248, 243, 0.86 );
	border-bottom-color: var( --wp--preset--color--rule );
}

/* Where backdrop-filter is unsupported, fall back to something opaque
   rather than illegible. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.enrishi-header {
		background-color: var( --wp--preset--color--parchment );
	}
}

/* -------------------------------------------------------------------------
   Navigation

   No open/close animation on the menu itself. It is a high-frequency
   action, and motion there reads as lag rather than polish. The only
   movement is an underline, and that is a colour change.
   ---------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.3rem;
	border-bottom: 1px solid transparent;
	transition: border-color var( --duration-ui ) var( --ease-out ),
		color var( --duration-ui ) var( --ease-out );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.wp-block-navigation .wp-block-navigation-item__content:hover {
		border-bottom-color: var( --wp--preset--color--brass );
		color: var( --wp--preset--color--brass );
	}
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var( --wp--preset--color--ink );
}

/* -------------------------------------------------------------------------
   Buttons

   Press feedback is instant and subtle. :active is a real press on touch
   as well as mouse, so this needs no pointer gating.
   ---------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
	transition: transform var( --duration-press ) var( --ease-out ),
		background-color var( --duration-press ) var( --ease-out ),
		box-shadow var( --duration-press ) var( --ease-out );
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: scale( 0.97 );
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var( --wp--preset--color--rule );
	color: var( --wp--preset--color--ink );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.wp-block-button:not( .is-style-outline ) .wp-block-button__link:hover {
		box-shadow: var( --wp--preset--shadow--lifted );
	}

	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background-color: var( --wp--preset--color--brass-light );
		border-color: var( --wp--preset--color--brass );
	}
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.enrishi-card,
.is-style-enrishi-card {
	background-color: var( --wp--preset--color--surface );
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 14px;
	height: 100%;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.enrishi-card,
	.is-style-enrishi-card {
		transition: transform var( --duration-panel ) var( --ease-out ),
			box-shadow var( --duration-panel ) var( --ease-out ),
			border-color var( --duration-panel ) var( --ease-out );
	}

	.enrishi-card:hover,
	.is-style-enrishi-card:hover {
		transform: translateY( -3px );
		border-color: var( --wp--preset--color--brass );
		box-shadow: var( --wp--preset--shadow--lifted );
	}
}

/* Accent card, for the headline offer. */
.enrishi-card-accent,
.is-style-enrishi-card-accent {
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--parchment );
	border-radius: 14px;
}

.enrishi-card-accent :where( h1, h2, h3, h4, p ),
.is-style-enrishi-card-accent :where( h1, h2, h3, h4, p ) {
	color: var( --wp--preset--color--parchment );
}

.enrishi-card-accent .wp-block-button__link,
.is-style-enrishi-card-accent .wp-block-button__link {
	background-color: var( --wp--preset--color--parchment );
	color: var( --wp--preset--color--ink );
}

/* -------------------------------------------------------------------------
   Reveal on scroll

   Marketing motion, so it is allowed to run longer than the 300ms UI
   budget. transform and opacity only, so it stays on the GPU. Fires once.
   ---------------------------------------------------------------------- */

/* Scoped to .enrishi-js, a class set by an inline script before first paint.
   If JavaScript never runs, the class is never added and no content is ever
   hidden — the page simply renders, fully visible. */
.enrishi-js .enrishi-reveal {
	opacity: 0;
	transform: translateY( 14px );
	transition: opacity var( --duration-reveal ) var( --ease-out ),
		transform var( --duration-reveal ) var( --ease-out );
}

.enrishi-js .enrishi-reveal[ data-visible ] {
	opacity: 1;
	transform: none;
}

/* Stagger a group's children. 30–80ms between items; longer feels slow,
   and the stagger never blocks interaction. */
.enrishi-stagger[ data-visible ] > * {
	animation: enrishi-rise var( --duration-reveal ) var( --ease-out ) backwards;
}

.enrishi-stagger[ data-visible ] > *:nth-child( 2 ) {
	animation-delay: 70ms;
}

.enrishi-stagger[ data-visible ] > *:nth-child( 3 ) {
	animation-delay: 140ms;
}

.enrishi-stagger[ data-visible ] > *:nth-child( 4 ) {
	animation-delay: 210ms;
}

@keyframes enrishi-rise {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Editorial
   ---------------------------------------------------------------------- */

.enrishi-eyebrow,
.is-style-enrishi-eyebrow {
	font-size: var( --wp--preset--font-size--small );
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --wp--preset--color--brass );
}

.enrishi-lead,
.is-style-enrishi-lead {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

.enrishi-stat {
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--xx-large );
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.enrishi-price {
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--display );
	line-height: 1;
	letter-spacing: -0.03em;
}

.enrishi-rule-top {
	border-top: 1px solid var( --wp--preset--color--rule );
}

/* -------------------------------------------------------------------------
   Quotes
   ---------------------------------------------------------------------- */

.wp-block-quote {
	border-left: 2px solid var( --wp--preset--color--brass );
	padding-left: 1.5rem;
}

.wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--small );
	font-style: normal;
	color: var( --wp--preset--color--ink-soft );
}

/* -------------------------------------------------------------------------
   FAQ

   The accordion is the one height transition in the theme, because there
   is no transform equivalent. Kept short for that reason.
   ---------------------------------------------------------------------- */

.enrishi-faq details {
	border-bottom: 1px solid var( --wp--preset--color--rule );
	padding-block: 1.35rem;
}

.enrishi-faq summary {
	cursor: pointer;
	font-family: var( --wp--preset--font-family--serif );
	font-size: var( --wp--preset--font-size--large );
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	transition: color var( --duration-ui ) var( --ease-out );
}

.enrishi-faq summary::-webkit-details-marker {
	display: none;
}

.enrishi-faq summary::after {
	content: "+";
	font-family: var( --wp--preset--font-family--sans );
	font-size: 1.35rem;
	line-height: 1;
	color: var( --wp--preset--color--brass );
	transition: transform var( --duration-panel ) var( --ease-out );
}

.enrishi-faq details[ open ] summary::after {
	transform: rotate( 45deg );
}

.enrishi-faq details[ open ] > *:not( summary ) {
	animation: enrishi-rise var( --duration-ui ) var( --ease-out );
}

@media ( hover: hover ) and ( pointer: fine ) {
	.enrishi-faq summary:hover {
		color: var( --wp--preset--color--brass );
	}
}

/* -------------------------------------------------------------------------
   Booking embed
   ---------------------------------------------------------------------- */

.enrishi-booking {
	border: 1px solid var( --wp--preset--color--rule );
	border-radius: 14px;
	background-color: var( --wp--preset--color--surface );
	overflow: hidden;
	min-height: 520px;
}

.enrishi-booking iframe {
	display: block;
	width: 100%;
	min-height: 520px;
	border: 0;
}

/* -------------------------------------------------------------------------
   Reduced motion

   Fewer and gentler, not zero. Colour and opacity feedback survives;
   movement does not.
   ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	.enrishi-js .enrishi-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.enrishi-stagger[ data-visible ] > *,
	.enrishi-faq details[ open ] > *:not( summary ) {
		animation: none;
	}

	.wp-block-button__link:active,
	.wp-element-button:active {
		transform: none;
	}

	.enrishi-card:hover,
	.is-style-enrishi-card:hover {
		transform: none;
	}

	.enrishi-faq details[ open ] summary::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Print
   ---------------------------------------------------------------------- */

@media print {
	.enrishi-header,
	.enrishi-footer,
	.wp-block-navigation,
	.enrishi-booking {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}

	.enrishi-reveal {
		opacity: 1;
		transform: none;
	}
}