/*
 * Lakshmi Narayan Ashram — supplementary theme styles.
 * @font-face is generated automatically by WordPress from the
 * typography.fontFamilies[].fontFace entries in theme.json — not
 * duplicated here. Everything below is what theme.json's block-level
 * color/typography/spacing system can't express on its own.
 */

:root {
	--lna-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--lna-transition-fast: color 0.2s var(--lna-ease), background-color 0.2s var(--lna-ease),
		border-color 0.2s var(--lna-ease);
}

/* Sitewide horizontal gutter: theme.json sets the mobile/tablet value
   (24px) directly since useRootPaddingAwareAlignments has no per-breakpoint
   support of its own. Widen to 48px on desktop here — matches the flat
   24px/48px two-tier breakpoint (at 1280px) used by jenclarkdesign.com,
   the reference the client pointed to for "not too close to the edges." */
@media (min-width: 1280px) {
	:root {
		--wp--style--root--padding-left: 3rem;
		--wp--style--root--padding-right: 3rem;
	}
}

/* Several template sections now use alignfull backgrounds; independent
   .alignfull elements each compute their own calc(50% - 50vw) bleed
   margin, and sub-pixel rounding differences between them can add up to
   a couple of stray pixels past the viewport edge with no single element
   visibly responsible. Trim that invisible sliver rather than chase it. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Widow/orphan control — free, additive, progressively enhancing. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* ---------------------------------------------------------------------
 * Links & focus — every interactive text element gets the same
 * transition and the same brand-tinted focus ring as buttons already had.
 * ------------------------------------------------------------------ */

a {
	transition: var(--lna-transition-fast);
}

a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-gold);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Accordion (wp:details) — Learn More / FAQ
 * ------------------------------------------------------------------ */

.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--background);
	padding: 1.1rem 1.4rem;
	margin-bottom: 0.75rem;
	transition: background-color 0.2s var(--lna-ease);
}

.wp-block-details:last-child {
	margin-bottom: 0;
}

.wp-block-details[open] {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	padding-right: 1.75rem;
	position: relative;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 0.15em;
	right: 0;
	width: 1rem;
	height: 1rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url("../images/icons/ui/chevron-down.svg");
	mask-image: url("../images/icons/ui/chevron-down.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform 0.2s var(--lna-ease);
}

.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-details > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
 * Photography — consistent aspect ratios + treatment across the site
 * ------------------------------------------------------------------ */

.lna-photo {
	/* Without this, grid/flex children default to min-width:auto, so an
	   image's intrinsic pixel size can blow out a narrow track (e.g. the
	   3-column photo strip on mobile) even though the image itself is
	   styled to width:100%. */
	min-width: 0;
}

.lna-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--wp--custom--radius--photo);
	border: 1px solid var(--wp--preset--color--line);
}

.lna-photo--wide {
	aspect-ratio: 16 / 9;
}

.lna-photo--portrait {
	aspect-ratio: 3 / 4;
}

.lna-photo--square {
	aspect-ratio: 1 / 1;
}

/* Anonymous priest-portrait preview strip (About Us — Priests and Teachers) */
.lna-photo-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Alternating photo+text wp:columns sections place the photo on the left
   or right at random for visual variety on desktop, but WordPress core
   always stacks columns in source order on mobile — so roughly half of
   these sections rendered text-before-photo on narrow screens, which
   reads wrong (the photo should lead). Rather than reordering markup
   per-section (breaking the already-correct half), target the column
   that actually contains a photo and force it first — a no-op wherever
   the photo is already first. */
@media (max-width: 781px) {
	.wp-block-column:has(.lna-photo) {
		order: -1;
	}
}

/* ---------------------------------------------------------------------
 * Navigation — header/footer link list + mobile overlay menu
 * ------------------------------------------------------------------ */

.wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-orange);
}

.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* The full-screen mobile menu (core-generated markup, unstyled by
   default — see AUDIT.md P1). Bring it onto the brand: cream background,
   Montserrat already inherited, generous scale-driven spacing, and the
   same hover/focus treatment as the rest of the site instead of browser
   defaults. */
/* Matches core's own selector specificity (see wp-includes/blocks/navigation/style.css)
   rather than reaching for !important. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--background);
}

/* The responsive-overlay wrapper markup is always present in the DOM for
   any nav with overlayMenu set — it's just displayed inline (not as a
   fullscreen overlay) at desktop widths. Scoping to .is-menu-open (same
   as core's own overlay rules) is required or this bleeds into the
   normal horizontal desktop bar and forces it into a vertical column. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
	transition: var(--lna-transition-fast);
}

.wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------
 * Header — 3-zone layout (logo / centered nav / CTA button) and a
 * "Learn More" dropdown mirroring the reference template's nav-dropdown
 * pattern, built entirely on WP core's own hover/click/keyboard submenu
 * toggle — no new JS required.
 * ------------------------------------------------------------------ */

.lna-header-nav {
	flex: 1 1 auto;
}

.lna-header-nav .wp-block-navigation__container {
	justify-content: center;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow-md);
	border: 1px solid var(--wp--preset--color--line);
	background-color: var(--wp--preset--color--background);
	padding: 0.5rem;
	margin-top: 0.5rem;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1rem;
	border-radius: 8px;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------
 * Mobile/tablet header — extends WP core's overlay-menu breakpoint from
 * its hard-coded 600px up to this theme's own 782px tablet boundary
 * (already used elsewhere for mobile-only treatment), so the header
 * never renders the cramped 5-item horizontal nav in between. Replaces
 * the default 2-bar toggle icon with a proper 3-bar hamburger in the
 * brand red, right-aligned, and shrinks the header ~25%. Every rule here
 * is scoped to the same media query — desktop (>782px) is untouched.
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {
	/* Core hides the toggle button and shows the inline list at
	   min-width:600px via selectors of equal specificity to these —
	   matching that specificity (not !important) so ours wins on source
	   order within the same breakpoint core already uses as its cutoff. */
	.lna-header-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.lna-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Push the toggle to the header's right edge instead of the nav
	   block's own centered justifyContent. */
	header .lna-header-nav.wp-block-navigation {
		justify-content: flex-end;
	}

	/* Swap WP core's default 2-bar icon for a proper 3-bar hamburger,
	   reusing the .lna-icon mask-recolor technique already used sitewide
	   so it picks up the brand red via background-color instead of
	   needing a per-color SVG variant. The -close (X) button is a
	   different selector and is left untouched. */
	.lna-header-nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.lna-header-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		-webkit-mask-image: url("../images/icons/ui/menu.svg");
		mask-image: url("../images/icons/ui/menu.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
		background-color: var(--wp--preset--color--primary);
	}

	/* Shrink the header's top/bottom padding: redefine the padding token
	   scoped to <header> only (so nothing outside the header is
	   affected). The logo itself is sized independently below — it's
	   deliberately kept large on mobile (client-requested, twice) rather
	   than shrunk in proportion to this padding. */
	header {
		--wp--preset--spacing--30: 0.75rem;
	}

	header img {
		width: 72px;
		height: 72px;
	}
}

/* Hero and CTA-band text currently sit closer to the screen edge than a
   normal .lna-panel's text on mobile/tablet, since both are align:"full"
   and bypass the "wide" alignment's root-padding-aware gutter that
   normal panels get. Add matching horizontal padding so their text lines
   up with every other section's. Desktop already centers both correctly
   (margin:auto within their own max-width) and is untouched here. */
@media (max-width: 782px) {
	.lna-hero-split,
	.lna-cta-content {
		/* 1.5rem (24px) matches the root/panel gutter standard — was
		   2.125rem, tuned back when every panel (not just cream/surface
		   ones) carried its own extra 24px of padding on top of the root
		   gutter. That panel-side padding was later removed for non-
		   surface panels (see .lna-panel's own mobile rule), dropping
		   their effective total to 24px; this value needs to track that
		   same 24px so hero/CTA text keeps lining up with panel text. */
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Every .lna-hero-card, sitewide: replace
	   the desktop top padding (the Cover block's own spacing attribute,
	   --wp--preset--spacing--80) with a smaller fixed 48px on mobile — the
	   full desktop value reads as too much empty space before the
	   heading, but the text shouldn't sit flush against the header
	   either. Desktop keeps the original value via the block attribute
	   itself, untouched here.
	   Note: the block's own padding-top is an *inline* style, which no
	   external stylesheet rule can override regardless of specificity —
	   only !important could, and this codebase deliberately avoids that
	   (see the nav-overlay override above). Instead each hero template's
	   inline style references var(--lna-hero-top-pad, ...with a fallback
	   to the original preset), so redefining the custom property here
	   (a normal, non-!important declaration) is what actually takes
	   effect on the padding-top the inline style renders. */
	.lna-hero-card {
		--lna-hero-top-pad: 48px;
	}
}

/* ---------------------------------------------------------------------
 * Yagya calendar table
 * ------------------------------------------------------------------ */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	text-align: left;
	padding: 0.6em 0.8em;
}

.wp-block-table td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface-deep);
}

/* ---------------------------------------------------------------------
 * Cover block (hero / CTA band) — keep it from overwhelming small screens
 * ------------------------------------------------------------------ */

.wp-block-cover {
	min-height: unset;
	/* Core's own default is padding:1em on all sides. The 4 cover blocks
	   on this site (3 heroes + the CTA band) all set their own
	   padding-top/bottom via an inline style, but never touch left/right
	   — leaving that 1em to leak through unintentionally. Invisible on
	   desktop (centering math cancels a symmetric offset out) but a real,
	   uncompensated left shift on mobile, where nothing centers. */
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 480px) {
	.wp-block-cover {
		max-height: 70vh;
	}

	/* CTA band exemption: same bug as the hero originally had — this
	   block's content (heading + paragraph + italic line + two buttons,
	   all inside generous padding-top/bottom) is taller than 70vh on most
	   phones. The band isn't bottom-anchored (default core align-items:
	   center), so a capped height clips the heading at the top and the
	   buttons at the bottom symmetrically, confirmed live in wp-env.
	   Letting height stay auto restores the block's own intended padding
	   as real, guaranteed breathing room instead of clipped-away space. */
	main > .wp-block-cover:last-of-type {
		max-height: none;
	}
}

/* A quiet signature shape rather than a flat rectangle everywhere — the
   CTA band's top edge rises gently left-to-right, evoking a flame without
   being literal. Left unclipped above/below (hero, footer) so nothing has
   to be visually reconciled against it. */
main > .wp-block-cover:last-of-type {
	clip-path: polygon(0 clamp(20px, 4vw, 48px), 100% 0, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------------
 * Photo hover — small life, not a gimmick
 * ------------------------------------------------------------------ */

.lna-photo {
	overflow: hidden;
}

.lna-photo img {
	transition: transform 0.4s var(--lna-ease);
}

.lna-photo:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.lna-photo:hover img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Button polish — color transition already covered by the global `a`
 * rule; this adds the pressed/lifted feel the craft checklist calls for.
 * ------------------------------------------------------------------ */

.wp-block-button__link {
	transition: var(--lna-transition-fast), transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(43, 24, 21, 0.18);
}

.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Accordion open animation — the disclosure itself is native/instant
 * (animating <details> height smoothly needs JS most browsers can't do
 * for free), but the revealed answer can still fade+settle into place.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details[open] > :not(summary) {
		animation: lna-answer-in 0.35s var(--lna-ease);
	}
}

@keyframes lna-answer-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------------
 * Decorative lotus motif — a quiet echo of the logo mark, not a repeat
 * of it. Masked so it can be tinted per-context (light on the dimmed
 * hero/CTA photos, warm gold on the plain cream page-intro sections)
 * instead of needing separate color variants of the asset.
 * ------------------------------------------------------------------ */

main > .wp-block-group:first-child {
	/* Belt-and-braces: the decorative motif below is positioned near the
	   edge on purpose, but must never be able to create a scrollbar. */
	overflow: hidden;
}

.wp-block-cover::after,
main > .wp-block-group:first-child::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 3%;
	width: min(320px, 42vw);
	height: min(320px, 42vw);
	transform: translateY(-50%);
	-webkit-mask-image: url("../images/logo/motif-lotus.svg");
	mask-image: url("../images/logo/motif-lotus.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

.wp-block-cover::after {
	background-color: var(--wp--preset--color--background);
	opacity: 0.1;
}

main > .wp-block-group:first-child::after {
	background-color: var(--wp--preset--color--accent-gold);
	opacity: 0.12;
}

@media (max-width: 600px) {
	.wp-block-cover::after,
	main > .wp-block-group:first-child::after {
		width: min(220px, 50vw);
		height: min(220px, 50vw);
		right: 2%;
	}
}

/* ---------------------------------------------------------------------
 * Secondary decorative accent — same masked-shape technique as the lotus
 * motif above, generalised to the abstract organic shapes in
 * assets/images/vectors/ via a custom property, so placing one just
 * needs the class plus a --lna-blob-src value rather than new CSS per use.
 * overflow:hidden is self-contained here (not relying on a parent rule)
 * since this class gets applied to arbitrary sections one at a time.
 * ------------------------------------------------------------------ */

.lna-blob-accent {
	position: relative;
	overflow: hidden;
}

.lna-blob-accent::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 2%;
	width: min(240px, 32vw);
	height: min(240px, 32vw);
	transform: translateY(-50%);
	-webkit-mask-image: var(--lna-blob-src);
	mask-image: var(--lna-blob-src);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}

.lna-blob-accent > * {
	position: relative;
	z-index: 1;
}

/* Icon+photo two-column sections whose text (and the icon the accent
   echoes) sits in the LEFT column, photo in the right — the default
   right-2% position would land behind the photo, so mirror it. */
.lna-blob-accent--left::before {
	right: auto;
	left: 2%;
}

@media (max-width: 600px) {
	.lna-blob-accent::before {
		width: min(160px, 40vw);
		height: min(160px, 40vw);
	}
}

/* ---------------------------------------------------------------------
 * Scroll reveal — sections settle into place as they're reached instead
 * of the whole page just existing at once. Progressive enhancement: the
 * hide rule only applies once JS has confirmed it can also reveal
 * (`.lna-js` set at the very top of interactions.js), so content is never
 * hidden if JS fails to load. The hero/first section on every page is
 * excluded on purpose — it's already visible on arrival, and it carries
 * the LCP image, which must never be delayed or hidden.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.lna-js main > .wp-block-group:not(:first-child),
	.lna-js main > .wp-block-cover:not(:first-child) {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.7s var(--lna-ease), transform 0.7s var(--lna-ease);
	}

	.lna-js main > .wp-block-group.lna-in-view,
	.lna-js main > .wp-block-cover.lna-in-view {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------------
 * Floating WhatsApp widget — sitewide, injected via wp_footer (see
 * functions.php). Kept in WhatsApp's own brand green rather than
 * retinted to the site palette — recognizability matters more than
 * palette purity for a utility control like this.
 * ------------------------------------------------------------------ */

.lna-float-widget {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

.lna-float-widget__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.lna-float-widget__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(43, 24, 21, 0.28);
	transition: transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease);
}

.lna-float-widget__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(43, 24, 21, 0.34);
}

.lna-float-widget__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-gold);
	outline-offset: 2px;
}

.lna-float-widget__btn--whatsapp {
	background-color: #25d366;
}

@media (prefers-reduced-motion: reduce) {
	.lna-float-widget__btn:hover {
		transform: none;
	}
}

@media (max-width: 480px) {
	.lna-float-widget__btn {
		width: 50px;
		height: 50px;
	}
}

/* ---------------------------------------------------------------------
 * Yagya name chip grid — replaces a plain two-column bullet list with a
 * scannable grid of small cards (Yagyas page, "Benefits of Yagyas").
 * ------------------------------------------------------------------ */

.lna-chip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--40);
}

.lna-chip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 0.65rem 1rem;
	box-shadow: var(--wp--custom--shadow-sm);
	transition: var(--lna-transition-fast), transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease);
}

.lna-chip:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(43, 24, 21, 0.14);
}

.lna-chip__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-deep);
	font-size: 0.95rem;
}

.lna-chip__icon img {
	width: 18px;
	height: 18px;
	display: block;
}

/* ---------------------------------------------------------------------
 * "What We Offer" summary row — homepage only, right after the hero.
 * Each item pairs a label with a small supporting photo (replaced an
 * earlier icon-over-label look) so visitors get an actual visual sense
 * of each offering, not just an abstract glyph — also helps visitors who
 * don't read English. Reuses the sitewide .lna-photo/.lna-photo--square
 * treatment (cover-fit, themed radius/border, hover zoom) rather than
 * one-off image styling; .lna-chip__text is still reused for the label.
 * Each item is a single <a> (photo + label both press to the relevant
 * page) reusing the "whole element is one link" language already
 * established by .lna-card (page-consultations.html's 6-card grid) —
 * plain color/no-underline reset plus a small hover lift, same idea.
 * ------------------------------------------------------------------ */

.lna-offer-row {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
}

.lna-offer-row__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s var(--lna-ease);
}

.lna-offer-row__item:hover {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.lna-offer-row__item:hover {
		transform: none;
	}
}

.lna-offer-row__item .lna-photo {
	width: 120px;
}

.lna-offer-row__item .lna-chip__text {
	font-size: 1.05rem;
}

@media (max-width: 782px) {
	.lna-offer-row {
		flex-direction: column;
		gap: 1.25rem;
	}

	.lna-offer-row__item {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 1rem;
		text-align: left;
		width: 100%;
	}

	.lna-offer-row__item .lna-photo {
		width: 92px;
		flex-shrink: 0;
	}

	.lna-offer-row__item .lna-chip__text {
		font-size: 1.2rem;
	}
}

/* ---------------------------------------------------------------------
 * Heading icon badges — small circular accents pairing the custom
 * line-icons (assets/images/icons/) with a section heading, reusing
 * .lna-chip__icon's circular-badge language rather than a new visual
 * style. Decorative only: the heading text itself still carries the
 * meaning, so the icon is aria-hidden and never the only label.
 * ------------------------------------------------------------------ */

.lna-heading-icon {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.lna-heading-icon__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
}

.lna-heading-icon__badge img {
	width: 54px;
	height: 54px;
	display: block;
}

.lna-heading-icon h2,
.lna-heading-icon h3 {
	margin: 0;
}

/* Two specific sections (Introduction to the Ashram, Introduction to
   Jyotish Consultations) hide their small heading badge on mobile/tablet
   only — the .lna-blob-accent background watermark is a separate element
   and stays untouched at every breakpoint. */
@media (max-width: 782px) {
	.lna-hide-badge-mobile .lna-heading-icon__badge {
		display: none;
	}
}

.lna-chip__text {
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.lna-chip:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Monthly Yagya calendar — grouped by date rather than one row/card per
 * observance (the original per-event card version repeated a heavy
 * solid-red date badge 20 times down the page, reading as a wall of
 * alert boxes rather than a calendar). Same-day observances now nest
 * under one shared date heading, reusing the site's existing "eyebrow"
 * heading language (h3/h4: uppercase, tracked, primary-colored — see
 * theme.json styles.elements.h3) instead of inventing a new heavy motif,
 * and events themselves are a quiet left-bordered card matching
 * .lna-chip's language rather than a solid color block.
 * ------------------------------------------------------------------ */

.lna-calendar {
	margin-top: var(--wp--preset--spacing--40);
}

.lna-calendar__group {
	margin-bottom: var(--wp--preset--spacing--40);
}

.lna-calendar__group:last-child {
	margin-bottom: 0;
}

.lna-calendar__date {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.lna-calendar__event {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 0.85rem 1.1rem;
	box-shadow: var(--wp--custom--shadow-sm);
	transition: transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease);
}

.lna-calendar__event:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.lna-calendar__event:hover {
		transform: none;
	}
}

.lna-calendar__event + .lna-calendar__event {
	margin-top: 0.6rem;
}

.lna-calendar__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}

.lna-calendar__desc {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------------
 * Icon utility — mask-based recoloring for the self-hosted Lucide UI
 * icons (assets/images/icons/ui/, ISC-licensed), so one SVG file can
 * render in any palette color via background-color instead of needing
 * per-color file variants. Same masking technique the lotus motif and
 * blob accents above already use. Decorative only — aria-hidden wherever
 * used, accessible names stay on visible link text.
 * ------------------------------------------------------------------ */

.lna-icon {
	display: inline-block;
	flex: 0 0 auto;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: currentColor;
}

.lna-icon--chevron-down {
	-webkit-mask-image: url("../images/icons/ui/chevron-down.svg");
	mask-image: url("../images/icons/ui/chevron-down.svg");
}

.lna-icon--check {
	-webkit-mask-image: url("../images/icons/ui/check.svg");
	mask-image: url("../images/icons/ui/check.svg");
}

.lna-icon--instagram {
	-webkit-mask-image: url("../images/icons/ui/instagram.svg");
	mask-image: url("../images/icons/ui/instagram.svg");
}

.lna-icon--facebook {
	-webkit-mask-image: url("../images/icons/ui/facebook.svg");
	mask-image: url("../images/icons/ui/facebook.svg");
}

.lna-icon--youtube {
	-webkit-mask-image: url("../images/icons/ui/youtube.svg");
	mask-image: url("../images/icons/ui/youtube.svg");
}

.lna-icon--telegram {
	-webkit-mask-image: url("../images/icons/ui/telegram.svg");
	mask-image: url("../images/icons/ui/telegram.svg");
}

/* Sized for inline use next to button/link text (e.g. the social buttons
   on the Contact page) rather than as a standalone badge. */
.lna-icon--inline {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-right: 0.4em;
}

/* ---------------------------------------------------------------------
 * Section head — a rule-flanked label pairing echoing the reference
 * template's section-label/section-title signature, but built entirely
 * from whichever heading a section already has (the existing uppercase
 * "eyebrow" h3 from theme.json, or a plain h2 where no eyebrow exists) —
 * no new label copy is ever invented. .lna-heading-icon (icon badge + h2)
 * stays a separate, sibling pattern for sections with a real content icon.
 * ------------------------------------------------------------------ */

.lna-section-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.lna-section-head > * {
	margin: 0;
}

.lna-section-head__rule {
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--wp--preset--color--line);
}

.lna-section-head--center {
	justify-content: center;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Panel — insets a full-width section into a rounded, softly-shadowed
 * card instead of a flat edge-to-edge band. Pair with align:"wide" (not
 * "full") on the block — useRootPaddingAwareAlignments already keeps the
 * sitewide root-padding gutter around wide-aligned blocks, which is what
 * makes the rounded corners visible instead of sitting at the viewport
 * edge. Same background-color alternation each section already had; it's
 * just no longer a flat full-bleed rectangle.
 * ------------------------------------------------------------------ */

.lna-panel {
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow-sm);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

/* WordPress core adds automatic spacing between top-level template blocks
   (header, main, footer) via a zero-specificity :where(.wp-site-blocks) > *
   rule (margin-block-start: 1rem) — <main> is never .wp-site-blocks' first
   child (header always is), so every page carries this 16px gap between
   the header and whatever starts main, regardless of what that first
   element is. This is a separate mechanism from .lna-panel's own
   margin-top below, and from the header's own bottom padding — discovered
   via a live audit after a hero/header gap fix turned out incomplete. */
main {
	margin-top: 0;
}

main > .lna-panel:first-child {
	margin-top: 0;
}

main > .lna-panel:last-child {
	margin-bottom: 0;
}

/* On mobile, only panels on the visible cream "surface" (#F5F3EB)
   background need their own 24px inset — white panels blend into the
   page background and aren't a visible container, so their own copy of
   the 24px just reads as unwanted extra indent. Desktop keeps the 24px
   on every panel regardless of color. */
@media (max-width: 782px) {
	.lna-panel:not(.has-surface-background-color) {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------
 * Hero card — full-bleed cover rounded into a soft card with a bottom-
 * anchored gradient (rather than a flat dimRatio overlay), matching the
 * reference template's .hero-card. Applies identically on every page —
 * home and every other page's hero share the exact same look, height,
 * and content structure (heading+rule, paragraph+scroll-cue), just
 * different copy/photo. When applied to a wp:cover, that block's
 * dimRatio should be set to 0
 * (or omitted) since this gradient replaces its job. The gradient blends
 * in the brand red (--wp--preset--color--primary) rather than plain
 * brown, plus a brightness filter on the photo itself, further down.
 * ------------------------------------------------------------------ */

.lna-hero-card {
	position: relative;
	border-radius: var(--wp--custom--radius--hero);
	overflow: hidden;
	min-height: 80vh;
}

.lna-hero-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(95, 26, 25, 0.92) 0%,
		rgba(95, 26, 25, 0.48) 55%,
		rgba(95, 26, 25, 0.08) 100%
	);
	pointer-events: none;
}

.lna-hero-card > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

@media (max-width: 480px) {
	.lna-hero-card {
		min-height: 60vh;
		/* Overrides the generic .wp-block-cover{max-height:70vh} rule
		   above (style.css:397-401), added to stop plain/short-copy
		   covers from overwhelming small screens. This hero's own
		   content stack (eyebrow + H1 + rule + paragraph + two stacked
		   buttons + scroll cue, all with real vertical padding) is
		   taller than 70vh on most phone screens, so that generic cap
		   was clipping the top and bottom of the hero's own content via
		   its overflow:hidden — confirmed by measuring the hero content
		   overflowing its own box at a 375x800 viewport in wp-env.
		   Letting height stay auto (bounded only by min-height/content)
		   fixes the clipping; a slightly taller hero on short phones is
		   the correct trade-off over cut-off text/buttons. */
		max-height: none;
	}
}

/* Full-bleed, flat treatment for every .lna-hero-card, sitewide — no
 * rounded corners, no shadow, edge-to-edge. Originally scoped to .home
 * only (so the shorter hero on other pages kept its own rounded-card
 * look and its own height); the client asked for every page's hero to
 * fully match the homepage's, so both the flat treatment and the height
 * (the old --compact modifier, now removed everywhere) are unscoped. */
.lna-hero-card {
	box-shadow: none;
	border-radius: 0;
}

/* The lotus watermark (present on every .wp-block-cover but normally
   z-index:0, invisible under this card's z-index:1 gradient) was
   previously raised above the gradient into the top-right corner here —
   removed at the client's request, sitewide. */
.lna-hero-card::after {
	display: none;
}

/* Client asked for "a little red accent" on the hero photo plus a ~20%
   brightness reduction, so white hero text reads more clearly. Brightness
   is a plain filter on the photo itself; the red accent is the gradient
   above (blended toward --wp--preset--color--primary instead of plain
   brown) rather than a second overlay layer (avoids the dimRatio/gradient
   double-stack bug fixed 2026-07-27). Applies sitewide, same as the
   gradient above. */
.lna-hero-card .wp-block-cover__image-background {
	filter: brightness(0.8);
}

.lna-hero-eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-gold);
	margin-bottom: var(--wp--preset--spacing--20);
}

.lna-hero-rule {
	display: block;
	width: 64px;
	height: 3px;
	margin-top: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--accent-gold);
	border-radius: 999px;
}

/* Small circular scroll cue below the hero CTAs — same size/shadow/hover
   language as .lna-float-widget__btn, but a separate hero-scoped
   component (it sits inline in the flow, not fixed to the viewport). */
.lna-hero-scroll {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: var(--wp--preset--spacing--30);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 4px 14px rgba(43, 24, 21, 0.28);
	transition: transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease),
		background-color 0.15s var(--lna-ease);
}

.lna-hero-scroll .lna-icon {
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--background);
}

.lna-hero-scroll:hover {
	transform: translateY(2px);
	background-color: rgba(255, 255, 255, 0.22);
	box-shadow: 0 6px 18px rgba(43, 24, 21, 0.34);
}

.lna-hero-scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lna-hero-scroll:hover {
		transform: none;
	}
}

/* Core's contentPosition CSS expects is-position-bottom-left and
   has-custom-content-position on .wp-block-cover itself; once correctly
   placed there (see the hero markup), core's own combo rule also flips
   .wp-block-cover__inner-container from its default width:100% to
   width:auto — which leaves .lna-hero-split's max-width:760px/margin:auto
   centering trick with no extra space to center within, collapsing it to
   the flush-left edge. Restore width:100% so the split still centers as
   intended. Matches core's own selector specificity (real classes present
   on the element, not !important) so this wins on source order alone. */
.wp-block-cover.lna-hero-card.has-custom-content-position.is-position-bottom-left > .wp-block-cover__inner-container {
	width: 100%;
}

/* Front-page only: 2-column bottom-anchored hero content (tagline+H1 /
   intro+CTAs), matching the reference template's hero split. No avatar-
   stack/star-rating widget — that's social-proof chrome with no real
   testimonial data behind it on this site. */
.lna-hero-split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--50);
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.lna-hero-split > * {
	flex: 0 0 auto;
}

.lna-hero-split .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

.lna-crumb {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--20);
}

.lna-crumb a {
	color: var(--wp--preset--color--muted);
}

.lna-crumb a:hover {
	color: var(--wp--preset--color--primary);
}

.lna-crumb__sep {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* ---------------------------------------------------------------------
 * Checklist bullets — replaces the default list marker with a brand-
 * colored checkmark. The reference template's own highlight-list colors
 * its checkmark with its primary color the same way, so this is a
 * faithful match rather than an invented embellishment.
 * ------------------------------------------------------------------ */

.lna-list-check {
	list-style: none;
	padding: 0;
	margin: 0;
}

.lna-list-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.75rem;
}

.lna-list-check li:last-child {
	margin-bottom: 0;
}

.lna-list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url("../images/icons/ui/check.svg");
	mask-image: url("../images/icons/ui/check.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------------------------------------------------------------------
 * Card grid — the one place in this rebuild that adopts the reference
 * template's signature 3-up card-grid treatment (Consultations overview,
 * one card per consultation type, anchor-linked to its full section).
 * ------------------------------------------------------------------ */

.lna-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 900px) {
	.lna-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.lna-card-grid {
		grid-template-columns: 1fr;
	}
}

.lna-card {
	display: block;
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow-sm);
	padding: var(--wp--preset--spacing--40);
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	transition: transform 0.15s var(--lna-ease), box-shadow 0.15s var(--lna-ease);
}

.lna-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--shadow-md);
	color: var(--wp--preset--color--foreground);
}

.lna-card__badge {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--20);
}

.lna-card__badge img {
	width: 28px;
	height: 28px;
	display: block;
}

.lna-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
}

.lna-card__teaser {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.lna-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Footer — 4-column grid (About / Quick Links / Contact / Social)
 * replacing the previous single thin bar. No newsletter band: no email/
 * marketing service exists on this site, so nothing is invented here.
 * ------------------------------------------------------------------ */

.lna-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.lna-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.lna-footer-grid {
		grid-template-columns: 1fr;
	}
}

.lna-footer-grid h4 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.95rem;
}

.lna-footer-about__logo {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
}

.lna-footer-links,
.lna-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lna-footer-links li,
.lna-footer-contact li {
	margin-bottom: 0.6rem;
}

.lna-footer-links a,
.lna-footer-contact a {
	color: var(--wp--preset--color--muted);
}

.lna-footer-links a:hover,
.lna-footer-contact a:hover {
	color: var(--wp--preset--color--primary);
}

.lna-footer-social {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.lna-footer-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-deep);
	transition: var(--lna-transition-fast), transform 0.15s var(--lna-ease);
}

.lna-footer-social__link .lna-icon {
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--foreground);
}

.lna-footer-social__link:hover {
	background-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

.lna-footer-social__link:hover .lna-icon {
	background-color: var(--wp--preset--color--background);
}

.lna-footer-copyright {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.lna-footer-social__link:hover {
		transform: none;
	}
}