/* SHM 2026 — supplementary theme styles (texture, layout helpers, responsive) */

body {
	background-image: url('../images/noise.png');
	background-repeat: repeat;
}

.shm-noise {
	background-image: url('../images/noise.png');
	background-repeat: repeat;
	background-blend-mode: normal;
}

/* --------------------------------------------------------------------------
 * Sticky header.
 *
 * The sticky MUST live on the <header> template-part wrapper, not on
 * .shm-header. .shm-header is the wrapper's only child, so the wrapper is
 * exactly as tall as it — a sticky element can't travel past its own parent,
 * so it scrolled away immediately. Moving it up one level gives it the whole
 * document to travel.
 * -------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.shm-header {
	position: static;
}

/* Clear the admin bar for logged-in users. Below 783px it scrolls away. */
@media (min-width: 783px) {
	.admin-bar header.wp-block-template-part {
		top: 32px;
	}
}

/*
 * Solid, slightly lighter than the page cream, and no paper grain — the
 * texture reads as noise once the bar is fixed in place while content moves
 * behind it. !important because WordPress emits its palette classes
 * (.has-background-background-color) with !important.
 */
.shm-header.has-background {
	background-image: none;
	background-color: #fbf7ef !important;
}

/*
 * Keep the header band full-bleed but align its contents to the same 1280px
 * container as the page content. Padding is set inline on the block, hence
 * the !important. Below ~1392px this falls back to the design's 56px gutter.
 */
.shm-header {
	padding-left: max(56px, calc((100% - 1280px) / 2)) !important;
	padding-right: max(56px, calc((100% - 1280px) / 2)) !important;
}

/*
 * Nav sits beside the logo rather than against the right edge.
 *
 * The block's own layout is space-between, which pushed the nav as far from
 * the wordmark as the 1280 container allowed — roughly 500px of empty cream
 * on a wide monitor. Overriding justify-content is what moves it; the auto
 * margin then belongs on the NAV, not the logo. An auto margin on the first
 * flex item absorbs the free space and pushes later siblings away from it,
 * which is the opposite of the intent.
 *
 * .shm-header.wp-block-group is two classes, so it outranks the single-class
 * .wp-container-* rule WordPress generates for the layout.
 *
 * The gap is fluid: a flat value that felt right on a laptop looked stuck to
 * the logo on a large display.
 */
.shm-header.wp-block-group {
	justify-content: flex-start;
}

.shm-header > .wp-block-navigation {
	margin-left: clamp(64px, 7vw, 112px);
	margin-right: auto;
}

/*
 * 56px of gutter each side costs 112px of a 390px screen. !important because
 * the padding is set inline on the block.
 */
@media (max-width: 782px) {
	.shm-header.wp-block-group {
		justify-content: space-between;
		align-items: center;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.shm-header > .wp-block-navigation {
		margin-left: 0;
		margin-right: 0;
	}
}

/* --------------------------------------------------------------------------
 * Site logo.
 *
 * core/site-logo writes its width as an inline style, which is a fixed pixel
 * value and therefore does not shrink on small screens. max-width overrides
 * it below the breakpoint; height:auto keeps the aspect ratio while it does.
 *
 * display:block on the img removes the few pixels of inline-baseline gap that
 * would otherwise make the header look unevenly padded top vs bottom.
 * -------------------------------------------------------------------------- */
.shm-header .wp-block-site-logo {
	line-height: 0;
}

.shm-header .wp-block-site-logo img {
	display: block;
	height: auto;
}

/*
 * Mobile caps raised with the desktop width. The dome sits to the left of the
 * wordmark, so a given pixel width now yields smaller lettering than the
 * text-only mark did — these are set so the words stay legible rather than to
 * hold the image at a particular size.
 */
@media (max-width: 900px) {
	.shm-header .wp-block-site-logo img {
		max-width: 215px;
	}
}

@media (max-width: 600px) {
	.shm-header .wp-block-site-logo img {
		max-width: 185px;
	}
}

/*
 * Visually hidden, still read aloud.
 *
 * Used for "(opens in a new window)" on links that leave the site. A sighted
 * user gets that cue from the tab appearing; a screen reader user gets
 * nothing unless it is stated. clip-path plus 1px box is the pattern that
 * survives without breaking text-to-speech, unlike display:none, which
 * removes the text from the accessibility tree entirely.
 */
.shm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
 * Home banner.
 *
 * Replaced a flat PNG that had the headline and a fake "PLAN YOUR VISIT"
 * button painted into its pixels. That button was not clickable, the text
 * could not reflow, translate or be read aloud, and nothing in it was
 * editable without Photoshop.
 *
 * Now a cover block: the artwork is the background and every word above it is
 * real markup.
 *
 * aspect-ratio rather than a fixed min-height so the whole composition is
 * always visible — the dome and the murti are placed deliberately and a
 * cropped hero would cut one of them. 1600/789 is the source ratio.
 * -------------------------------------------------------------------------- */
/*
 * CONTAINED, not edge to edge.
 *
 * The artwork is 2.03:1, so a full-bleed banner takes its height from the
 * viewport width — on a 2530px monitor that computes to 1247px tall, a hero
 * taller than the screen.
 *
 * Capping the height instead is not an option. Sampling a column down the
 * center of the artwork puts the crown at ~16% and the figure running to the
 * bottom edge, so there is almost no headroom and no footroom: any vertical
 * crop takes the top off the murti. Width is the only safe lever.
 *
 * 1280px matches the site's content container, so the banner lines up with
 * every other section, and it is what the original banner used.
 */
.shm-banner {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	/*
	 * 1600/690, not the artwork's own 1600/789 — the bottom 12% is trimmed.
	 *
	 * Sampling the murti's footprint puts the feet and the dark plinth between
	 * 82% and 88% of the height; everything under that is wooden floor. So the
	 * crop stops just below the toes and removes only floor. Paired with
	 * object-position 50% 0% so the cut comes off the bottom and never the
	 * crown.
	 */
	aspect-ratio: 1600 / 690;
	min-height: 280px;
	border-radius: 10px;
	overflow: hidden;
	padding: 0 !important;
}

.shm-banner img.wp-block-cover__image-background {
	object-position: 50% 0% !important;
}

/*
 * The text sits on the burgundy panel, over the dome watermark.
 *
 * A luminance sweep puts that panel at 0-40% of the width. The column starts
 * at 64px so the words overlay the watermark rather than clearing it, and is
 * capped at 44% — the longest line, the italic subtitle, then ends around 39%
 * and stays clear of the mural where contrast falls away.
 *
 * The cover uses layout "default" rather than "constrained" precisely so this
 * group is NOT centered; constrained layout was pushing the text to about 31%
 * and out onto the photograph.
 */
.shm-banner .wp-block-cover__inner-container {
	width: 100%;
	padding: 0 64px;
}

.shm-banner-inner {
	max-width: 44%;
}

.shm-banner-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #df8f48;
}

.shm-banner-title {
	font-family: var(--wp--preset--font-family--heading);
	/* Scales with the banner so it keeps its place in the composition rather
	   than stepping down at breakpoints. */
	font-size: clamp(28px, 3.6vw, 58px);
	line-height: 1.1;
	color: #f7efdf;
}

.shm-banner-sub {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: clamp(15px, 1.3vw, 21px);
	line-height: 1.4;
	color: #e8c9a0;
}

/*
 * Below the nav breakpoint the panel is too narrow to hold text at 42%, so
 * the image shifts left to keep the dark area under the words and the column
 * goes full width.
 */
@media (max-width: 782px) {
	.shm-banner {
		aspect-ratio: auto;
		min-height: 460px;
	}

	.shm-banner img.wp-block-cover__image-background {
		object-position: 30% 50% !important;
	}

	.shm-banner .wp-block-cover__inner-container {
		padding: 0 24px;
	}

	.shm-banner-inner {
		max-width: 100%;
	}
}

/* Centered narrow-content helpers */
.shm-max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.shm-max-680 { max-width: 680px; margin-left: auto; margin-right: auto; }
.shm-max-720 { max-width: 720px; margin-left: auto; margin-right: auto; }
.shm-max-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.shm-max-840 { max-width: 840px; margin-left: auto; margin-right: auto; }
.shm-max-1280 { max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%; }

/* Two-up split bands (image + text) */
.shm-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: center;
}
.shm-split-rev {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* Modifier: top-align a split instead of centering it (e.g. a heading column
   beside a list column, where centering would float the heading oddly). */
.shm-align-start { align-items: start; }

/* --------------------------------------------------------------------------
 * Footer — dark plum base.
 *
 * The footer sits on plum-deep (#531120) so the page has a grounded base
 * rather than trailing off in cream. Everything inside has to invert:
 * the terracotta link color lands at 1.89:1 on this background and would be
 * unreadable, so links run cream and hover to amber.
 * -------------------------------------------------------------------------- */
.shm-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.shm-footer-bottom {
	text-align: center;
	border-top: 1px solid rgba(247, 239, 223, 0.18);
}

/* Column headings — amber, matching the page-title treatment. 5.56:1 here. */
.shm-footer-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #df8f48;
}

/* Links: cream by default, amber on hover. Never the palette accent here. */
.shm-footer a {
	color: #f0e6d2;
	text-decoration: none;
	transition: color 200ms ease;
}

.shm-footer a:hover,
.shm-footer a:focus-visible {
	color: #df8f48;
	text-decoration: underline;
}

/*
 * Social link — icon plus label.
 *
 * min-height 44px meets the WCAG 2.5.5 target size guideline. The footer is
 * where people tap when they have already scrolled to the bottom on a phone,
 * usually one-handed, so this is the worst place to have a small target.
 */
/*
 * Icon only — the visible "Facebook" label was removed.
 *
 * The <a> therefore carries aria-label="Facebook" in the markup. Without it
 * the link would have no accessible name at all, since the only thing inside
 * is an aria-hidden SVG: a screen reader would announce "link" and nothing
 * else. This is the one case where an icon-only link is still fine, because
 * the f mark is about as universally recognized as a glyph gets.
 *
 * Fixed 44x44 box rather than min-height alone. A 28px icon on its own is a
 * small target at the very bottom of a page, usually reached one-handed.
 */
.shm-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -10px;
	text-decoration: none;
}

.shm-social-icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	/* fill is currentColor in the markup, so the icon follows the link color
	   through its hover state without a separate rule. */
	transition: transform 180ms ease, color 200ms ease;
}

.shm-social-link:hover .shm-social-icon,
.shm-social-link:focus-visible .shm-social-icon {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.shm-social-icon {
		transition: none;
	}

	.shm-social-link:hover .shm-social-icon {
		transform: none;
	}
}

.shm-footer .shm-footer-cta a {
	color: #df8f48;
}

.shm-footer .shm-footer-cta a:hover {
	color: #f7efdf;
}

/* Card / photo grids */
.shm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.shm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.shm-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.shm-grid-exec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Photo frame — fixed-height crop with rounded corners */
.shm-photo {
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
}
.shm-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/*
 * Uncropped photo frame.
 *
 * .shm-photo is a fixed-height crop — height plus object-fit:cover — which is
 * what was slicing the top and bottom off the dome. This keeps the rounded
 * corners but lets the image keep its own proportions, so the whole gopuram
 * is visible.
 *
 * object-fit is reset explicitly rather than left unset: .shm-photo img sets
 * cover, and without overriding it an inherited cover would crop again.
 */
.shm-photo-full {
	/*
	 * Capped rather than filling its grid column. The dome is a near-square
	 * 1254x1235, so at the column's full 641px it stood 631px tall against a
	 * text block barely a third of that — the picture dominated the section.
	 *
	 * 540 was picked by rendering 500/540/580/620 in the real two-column
	 * layout and comparing. 460 left it looking stranded in its column; from
	 * 580 up the image starts closing the gap on the text and the section
	 * tightens. 540 fills the column without crowding.
	 *
	 * margin-right:auto rather than auto both sides: this sits in the LEFT
	 * column, so it should hug the outer edge and let the slack fall towards
	 * the text, not split either side of it.
	 */
	max-width: 540px;
	margin-left: 0;
	margin-right: auto;
	border-radius: 10px;
	overflow: hidden;
}

.shm-photo-full img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: initial;
}

/*
 * Murti portrait.
 *
 * Holds shm-about.jpg, a purpose-shot 1086x1368 portrait. That is 0.794:1
 * against the frame's 0.8, a difference under one percent, so cover trims
 * essentially nothing and the composition survives intact.
 *
 * object-position is centered, NOT the 66% used previously. That offset existed
 * to pull Hanumanji out of the middle of the wide hero image; this photograph
 * is already framed on him, so any offset would push him off center.
 */
.shm-photo-murti {
	max-width: 480px;
	aspect-ratio: 4 / 5;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	overflow: hidden;
}

.shm-photo-murti img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.shm-photo.is-h-220 { height: 220px; }
.shm-photo.is-h-340 { height: 340px; }
.shm-photo.is-h-360 { height: 360px; }
.shm-photo.is-h-380 { height: 380px; }
.shm-photo.is-h-420 { height: 420px; }
.shm-photo:empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--background-alt);
	border: 1px dashed oklch(70% 0.02 50);
}
.shm-photo:empty::after {
	content: "Add photo";
	font-size: 15px;
	color: var(--wp--preset--color--muted-light);
}

/*
 * Events list with no image beside it.
 *
 * TEMPORARY. The dome photo was removed from the Home events section pending
 * a Sunday puja flyer; .shm-split-rev came off with it, since a 1.1fr/1fr
 * grid with one child leaves half the row empty.
 *
 * Capped rather than full width: at 1280 the date badge and title sit at the
 * far left with a metre of empty cream to their right, and the divider rules
 * run the whole way across. No auto margins, so the list stays flush with the
 * "Upcoming Events" heading above it.
 *
 * WHEN THE FLYER ARRIVES: put the image back as the first child and swap this
 * class for shm-split-rev.
 */
.shm-events-full {
	max-width: 900px;
}

/* Event date-badge rows */
.shm-event-row {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.shm-event-row:last-child { border-bottom: none; }
.shm-event-date { text-align: center; min-width: 64px; flex-shrink: 0; }
.shm-event-date .shm-month {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.shm-event-date .shm-day {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.shm-event-date .shm-weekday {
	font-size: 14px;
	color: var(--wp--preset--color--muted-light);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
 * Palette slug collision guard.
 *
 * theme.json defines a palette color with the slug "border". WordPress
 * auto-generates a TEXT color utility for every palette slug, producing:
 *
 *   .has-border-color { color: var(--wp--preset--color--border) !important; }
 *
 * That class name is already reserved by WordPress's border block-supports,
 * so every bordered container forces its text to the hairline color and any
 * unstyled text inside becomes near-invisible.
 *
 * Proper fix: rename the palette slug from "border" to "rule" in theme.json
 * and update the var:preset|color|border references in parts/ and page
 * content. Until then, this restores inherited text color on bordered blocks.
 * -------------------------------------------------------------------------- */
:where(.wp-block-group, .wp-block-column, .wp-block-columns).has-border-color {
	color: var(--wp--preset--color--foreground) !important;
}

/*
 * The [shm_upcoming_events] shortcode emits bare <p> tags for the date badge,
 * so they inherit the theme's default paragraph margins. That inflated each
 * row from ~110px to ~190px and left the photo floating in dead space. The
 * hand-built block version carried inline margin:0 on every paragraph; this
 * is the equivalent for the generated markup.
 */
.shm-event-row p { margin: 0; }

.shm-event-row h3 { margin: 0 0 4px; }
.shm-event-row h3 a { color: inherit; text-decoration: none; }
.shm-event-row h3 a:hover { color: var(--wp--preset--color--accent); }
.shm-event-time {
	font-size: 16px;
	color: var(--wp--preset--color--muted-light);
	margin: 0;
}

/*
 * The design top-aligns the events split, but .shm-split-rev centers by
 * default because the hero needs it. :has() scopes this to the events
 * instance so no modifier class is needed in the page content.
 */
.shm-split-rev:has(.shm-event-row) {
	align-items: start;
}

/* Button style variations */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--foreground) !important;
	border: 1.5px solid oklch(70% 0.02 50);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent-dark) !important;
	border-color: var(--wp--preset--color--accent-dark);
}
.wp-block-button.is-style-on-cream .wp-block-button__link {
	background: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--headline) !important;
}
.wp-block-button.is-style-on-cream .wp-block-button__link:hover {
	background: var(--wp--preset--color--background-alt) !important;
}

/* --------------------------------------------------------------------------
 * Link underlines.
 *
 * Standalone CTA links (bold, alone in their paragraph, arrow suffix) carry
 * enough non-color signal to drop the underline, matching the design.
 *
 * Inline links inside body copy KEEP their underline on purpose: the accent
 * color only reaches 1.13:1 against muted body text and 2.21:1 against ink,
 * both well under the 3:1 that WCAG 2.1 SC 1.4.1 requires before color alone
 * may distinguish a link. Do not broaden this selector to all links.
 * -------------------------------------------------------------------------- */
.wp-block-post-content p > a:only-child { text-decoration: none; }
.wp-block-post-content p > a:only-child:hover { text-decoration: underline; }

/*
 * Contact phone numbers.
 *
 * Real tel: links, so behavior and appearance are identical on every device
 * rather than iOS auto-detecting bare numbers and restyling them blue.
 * Muted at rest to match the design; accent + underline on hover and focus
 * so the affordance is discoverable and keyboard users get a visible target.
 */
.shm-contact-phone a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

.shm-contact-phone a:hover,
.shm-contact-phone a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Page header band.
 *
 * Sits directly under the nav on interior pages and carries the page title.
 * The devanagari watermark is a CSS ::before rather than an image so it
 * scales cleanly, costs no request, and inherits the palette.
 *
 * content: "\0950" is ॐ. The " / \"\"" suffix gives it empty alternative
 * text so screen readers skip it — it is decoration, not content.
 *
 * To swap in a Hanuman silhouette later: drop the ::before content and set
 * a background-image on .shm-page-header::before instead.
 * -------------------------------------------------------------------------- */
.shm-page-header {
	position: relative;
	overflow: hidden;
}

.shm-page-header > * {
	position: relative;
	z-index: 1;
}

.shm-page-header::before {
	content: "\0950" / "";
	position: absolute;
	right: 4%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 200px;
	line-height: 1;
	color: var(--wp--preset--color--background);
	opacity: 0.12;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/*
 * Eyebrow sits on burgundy here, so it can't use the terracotta default —
 * accent on headline is roughly 1.8:1 and would disappear.
 *
 * Also dialled down: smaller with wider tracking. At this size the letter
 * spacing does the work of signalling "label" without needing size or weight.
 */
/*
 * Page titles use warm amber (#df8f48), NOT the terracotta accent. The palette
 * accent (#913814) sits at 1.84:1 against the burgundy band — effectively
 * invisible. Amber is the same hue family lifted in lightness: 5.41:1.
 *
 * Set inline on the heading block so it stays editable via the color picker.
 * If amber becomes a recurring color, promote it to a theme.json token.
 */

@media (max-width: 900px) {
	.shm-page-header::before {
		font-size: 200px;
		right: -24px;
		opacity: 0.08;
	}
}

/* --------------------------------------------------------------------------
 * Diya glow.
 *
 * A slow warm light behind the terracotta invocation bands — "Jai Hanuman"
 * and the Dharma quote. Reads as lamplight rather than decoration.
 *
 * Deliberately a glow rather than falling particles: these bands are only
 * ~150px tall, so anything falling would clip through in under a second.
 * Light doesn't need vertical travel.
 *
 * Pure CSS, no assets, no JS. Breathes over 5.5s. Under
 * prefers-reduced-motion the animation stops but the glow remains, so the
 * design intent survives without any movement.
 * -------------------------------------------------------------------------- */
.shm-noise.has-accent-background-color {
	position: relative;
	overflow: hidden;
}

.shm-noise.has-accent-background-color::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 78%;
	width: 560px;
	height: 560px;
	transform: translate(-50%, -50%);
	/*
	 * Tighter, hotter core than a soft even wash — the brightness has to fall
	 * off fast or the flicker is imperceptible.
	 */
	background: radial-gradient(circle,
		rgba(255, 236, 190, 0.55) 0%,
		rgba(255, 214, 150, 0.34) 18%,
		rgba(255, 190, 120, 0.12) 42%,
		rgba(255, 185, 115, 0) 70%);
	pointer-events: none;
	z-index: 0;
	animation: shm-diya 9s ease-in-out infinite;
	will-change: opacity, transform;
}

/*
 * Keep the content above the glow.
 *
 * :not(.shm-petal) matters. Without it this rule also matches the falling
 * petals — and at specificity (0,2,0) it beats .shm-petal (0,1,0), forcing
 * them to position:relative so they stack in normal flow instead of falling.
 */
.shm-noise.has-accent-background-color > *:not(.shm-petal) {
	position: relative;
	z-index: 1;
}

/*
 * Irregular steps on purpose. An even two-stop pulse reads as a slow fade;
 * a flame is jittery, so the stops are at uneven intervals with uneven
 * amplitude.
 */
@keyframes shm-diya {
	0%   { opacity: 0.62; transform: translate(-50%, -50%) scale(0.96); }
	18%  { opacity: 0.88; transform: translate(-50%, -50%) scale(1.05); }
	31%  { opacity: 0.70; transform: translate(-50%, -50%) scale(0.99); }
	46%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.11); }
	58%  { opacity: 0.75; transform: translate(-50%, -50%) scale(1.01); }
	72%  { opacity: 0.94; transform: translate(-50%, -50%) scale(1.07); }
	87%  { opacity: 0.66; transform: translate(-50%, -50%) scale(0.97); }
	100% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
	.shm-noise.has-accent-background-color::after {
		animation: none;
		opacity: 0.85;
	}
}

/* --------------------------------------------------------------------------
 * Diya lamp.
 *
 * An inline SVG sitting above the invocation text. The flame is a separate
 * path so it can be animated independently of the bowl.
 *
 * The flame flickers on a short cycle while the cast glow behind it breathes
 * slowly — that mismatch is deliberate and is what stops it reading as one
 * object pulsing.
 * -------------------------------------------------------------------------- */
.shm-diya {
	display: block;
	margin: 0 auto 16px;
	width: 58px;
	height: auto;
	overflow: visible;
}

.shm-diya-flame {
	transform-origin: 32px 48px;
	animation: shm-flame 2.8s ease-in-out infinite;
	will-change: transform, opacity;
}

.shm-diya-flame-core {
	transform-origin: 32px 46px;
	animation: shm-flame-core 2.8s ease-in-out infinite;
}

@keyframes shm-flame {
	0%   { transform: scale(1, 1)        rotate(0deg);    opacity: 0.92; }
	14%  { transform: scale(0.94, 1.07)  rotate(-2.5deg); opacity: 1; }
	29%  { transform: scale(1.04, 0.95)  rotate(1.5deg);  opacity: 0.88; }
	43%  { transform: scale(0.97, 1.05)  rotate(2.5deg);  opacity: 1; }
	58%  { transform: scale(1.02, 0.97)  rotate(-1deg);   opacity: 0.9; }
	72%  { transform: scale(0.95, 1.08)  rotate(-2deg);   opacity: 1; }
	87%  { transform: scale(1.03, 0.96)  rotate(1deg);    opacity: 0.93; }
	100% { transform: scale(1, 1)        rotate(0deg);    opacity: 0.92; }
}

@keyframes shm-flame-core {
	0%, 100% { transform: scaleY(1);    opacity: 0.85; }
	38%      { transform: scaleY(1.12); opacity: 1; }
	64%      { transform: scaleY(0.92); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
	.shm-diya-flame,
	.shm-diya-flame-core {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
 * Marigold petals.
 *
 * Released by assets/js/shm-petals.js when an invocation band scrolls into
 * view. Each petal gets randomized size, drift, spin and duration via custom
 * properties, so no two falls look alike.
 *
 * The band already has overflow:hidden (set by the diya glow rule), which
 * clips the petals to the band — they don't spill into the sections above
 * or below.
 * -------------------------------------------------------------------------- */
.shm-petal {
	position: absolute;
	top: -20px;
	width: var(--size, 10px);
	height: calc(var(--size, 10px) * 1.35);
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: radial-gradient(ellipse at 50% 30%,
		#ffd77f 0%,
		#f5a03c 45%,
		#dd7a1c 100%);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	/*
	 * Two animations, deliberately separated.
	 *
	 * The fall accelerates — cubic-bezier approximating gravity, because a
	 * linear drop reads as floating rather than falling. The fade runs
	 * linear alongside it. If both lived in one set of keyframes the easing
	 * would apply per segment and the fall would lurch between stops.
	 */
	animation:
		shm-petal-fall var(--dur, 3s) cubic-bezier(0.45, 0, 0.9, 0.55) forwards,
		shm-petal-fade var(--dur, 3s) linear forwards;
}

@keyframes shm-petal-fall {
	from { transform: translate(0, 0) rotate(0deg); }
	to   { transform: translate(var(--drift, 0), 340px) rotate(var(--spin, 180deg)); }
}

@keyframes shm-petal-fade {
	0%   { opacity: 0; }
	10%  { opacity: 0.95; }
	78%  { opacity: 0.9; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.shm-petal { display: none; }
}

/* Eyebrow label.
   13px at 0.6px tracking. The old 15px / 1.5px combination read wide and cold
   next to the serif headings — uppercase at that tracking is the part that
   was shouting, not the size alone. */
.shm-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
 * Navigation — core/navigation block.
 *
 * Header and footer both render wp:navigation with ref 4 ("Main Menu"), so
 * the menu is edited at Appearance > Editor > Navigation rather than in the
 * template files. This replaced a hand-written <ul> of hardcoded links, which
 * the Site Editor could not see — drafting a page left a live link pointing
 * at a 404.
 *
 * WordPress supplies the markup, the responsive overlay, the toggle button,
 * focus trapping, Escape handling and .current-menu-item. Everything below is
 * appearance only.
 *
 * Selector note: core emits deep, generated class names. The ones used here
 * (.wp-block-navigation-item__content, .wp-block-navigation__responsive-*)
 * are the stable public ones. If a WordPress update changes them the nav
 * falls back to core defaults — plain but working, never broken.
 * -------------------------------------------------------------------------- */
.shm-nav-primary {
	font-size: 17px;
	font-weight: 600;
}

.shm-nav-primary .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	padding-bottom: 3px;
	/* Eases into the accent rather than snapping to it. */
	transition: color 200ms ease;
}

/*
 * Underline grows from the left on hover.
 *
 * A pseudo-element rather than text-decoration: it can be transitioned, and
 * it sits clear of the descenders in "Pujas & Services". 2px because a
 * hairline underline is the first thing to disappear for a reader with low
 * contrast sensitivity, which is much of this audience.
 */
.shm-nav-primary .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 200ms ease;
}

.shm-nav-primary .wp-block-navigation-item__content:hover,
.shm-nav-primary .wp-block-navigation-item__content:focus-visible,
.shm-nav-primary .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.shm-nav-primary .wp-block-navigation-item__content:hover::after,
.shm-nav-primary .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/*
 * Current page.
 *
 * Core adds .current-menu-item automatically, which retired a block of
 * body.page-slug-* rules that had to be updated by hand for every new page.
 */
.shm-nav-primary .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
 * Mobile overlay.
 *
 * Six items at 17px need 542px of row; on a 390px phone the old inline list
 * wrapped to five lines under a sticky header. Core collapses it behind a
 * button below 600px by default — the rules here only restyle it.
 * -------------------------------------------------------------------------- */
/*
 * Sizing and color only — display is deliberately NOT set here.
 *
 * Core hides the open button above 600px with a single-class rule. Declaring
 * display:flex on a two-class selector with no media query outranked it and
 * left the hamburger showing on desktop at every width.
 */
.shm-nav-primary .wp-block-navigation__responsive-container-open,
.shm-nav-primary .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--foreground);
}

/*
 * No paper grain behind the nav links.
 *
 * The site's custom CSS (Styles -> Additional CSS, stored in the database)
 * paints the noise tile on every .has-background-background-color element and
 * excludes .shm-header. Core puts that same class on the navigation block's
 * responsive container, which is a CHILD of the header — so the exclusion
 * missed it and a textured rectangle sat behind the five links on an
 * otherwise flat bar.
 *
 * Four classes, so it outranks that rule's three. Background color is left
 * alone: core sets the closed container to `inherit`, which already picks up
 * the header cream, and the open overlay is colored further down.
 */
.shm-header .wp-block-navigation.shm-nav-primary .wp-block-navigation__responsive-container {
	background-image: none;
}

/*
 * Collapse to the overlay at 782px rather than core's 600px.
 *
 * Five items plus the 215px logo and the gap need about 663px of header. At
 * core's breakpoint the nav would wrap for roughly 60px of viewport range
 * before the button appeared. 782px also matches the admin-bar breakpoint
 * used elsewhere in this file.
 */
@media (max-width: 782px) {
	.shm-nav-primary .wp-block-navigation__responsive-container-open {
		display: flex;
	}

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

.shm-nav-primary .wp-block-navigation__responsive-container-open svg,
.shm-nav-primary .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.shm-nav-primary .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
	background-color: #fbf7ef;
}

.shm-nav-primary .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	/* 48px rows. The old inline links were 47x26px — over the 24px WCAG 2.5.8
	   minimum but well under the 44px in 2.5.5, and stacked 27px rows are a
	   mis-tap waiting to happen for the readers this site serves. */
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding-bottom: 0;
	font-size: 19px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The desktop hover underline would sit under the whole row here. */
.shm-nav-primary .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

/* --------------------------------------------------------------------------
 * Footer navigation.
 * -------------------------------------------------------------------------- */
.shm-nav-footer {
	font-size: 16px;
}

.shm-nav-footer .wp-block-navigation-item__content {
	color: #f0e6d2;
	text-decoration: none;
	transition: color 200ms ease;
}

.shm-nav-footer .wp-block-navigation-item__content:hover,
.shm-nav-footer .wp-block-navigation-item__content:focus-visible {
	color: #df8f48;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.shm-nav-primary .wp-block-navigation-item__content,
	.shm-nav-primary .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Body text links.
 *
 * Color alone is not a sufficient affordance — WCAG 1.4.1 — and it is the
 * first cue to fail for readers with reduced contrast sensitivity or color
 * vision deficiency. These links carry a permanent underline, offset clear of
 * the descenders, that thickens on hover.
 *
 * Scoped to prose links only. Nav, buttons, footer, gallery tiles and the
 * calendar all handle their own states, and a blanket rule would underline
 * every one of them.
 * -------------------------------------------------------------------------- */
main :where(p, li) a:not(.shm-btn-back):not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-thickness 150ms ease, color 150ms ease;
}

main :where(p, li) a:not(.shm-btn-back):not(.wp-element-button):hover,
main :where(p, li) a:not(.shm-btn-back):not(.wp-element-button):focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Arrow links ("Learn about the Mandir →").
 *
 * The arrow is a literal character in the content, so it cannot be animated
 * directly. inline-block on the whole link lets it shift as a unit — a small
 * nudge in the direction of travel.
 */
.shm-footer-cta a,
main :where(p) a:not(.wp-element-button) {
	display: inline;
}

/*
 * The current-page accent used to live here as a list of
 * body.page-slug-* rules, one per page — which meant every new page needed a
 * matching CSS line, and the Pujas entry kept pointing at a drafted page.
 * core/navigation emits .current-menu-item on its own, so that block was
 * deleted; the rule now lives with the rest of the nav styles above.
 */

/* --------------------------------------------------------------------------
 * The Events Calendar — brand theming.
 *
 * DELIBERATELY variables only. No .tribe-* class selectors anywhere in this
 * block. TEC rewrote every class name in v6, which is what breaks themes that
 * style by selector. These --tec-* custom properties are TEC's supported
 * theming API and are far more stable.
 *
 * More importantly, this fails safely: if TEC renames a property, that single
 * value falls back to the plugin default — an off-brand color, not a broken
 * layout. Nothing here can collapse the calendar.
 *
 * AFTER A MAJOR TEC UPDATE: glance at /events/ and check this block. That is
 * the only place calendar theming lives.
 *
 * Known compromise: event titles render in Nunito Sans rather than Libre
 * Baskerville. TEC has no serif-heading variable, and targeting its heading
 * class would reintroduce exactly the fragility this block avoids.
 * -------------------------------------------------------------------------- */
/*
 * MUST be declared on the root element, not on .tribe-common.
 *
 * TEC defines derived properties at :root, e.g.
 *   --tec-color-button-primary: var(--tec-color-accent-primary);
 * Those resolve against the ROOT value and then inherit down already
 * computed, so overriding the base variable deeper in the tree never reaches
 * them — the accent changes but every button stays blue. html:root also
 * outranks TEC's own :root declaration without needing !important.
 */
html:root {
	/* Accent — cascades to buttons, links and active states */
	--tec-color-accent-primary: var(--wp--preset--color--accent);
	--tec-color-accent-primary-hover: var(--wp--preset--color--accent-dark);
	--tec-color-accent-primary-active: var(--wp--preset--color--accent-dark);
	--tec-color-accent-primary-background: var(--wp--preset--color--background-alt);
	--tec-color-accent-secondary: var(--wp--preset--color--foreground);
	--tec-color-accent-secondary-hover: var(--wp--preset--color--accent-dark);
	--tec-color-accent-secondary-active: var(--wp--preset--color--accent-dark);

	/* Text */
	--tec-color-text-primary: var(--wp--preset--color--foreground);
	--tec-color-text-primary-light: var(--wp--preset--color--muted-light);
	--tec-color-text-secondary: var(--wp--preset--color--muted);
	--tec-color-text-events-title: var(--wp--preset--color--headline);
	--tec-color-text-event-date: var(--wp--preset--color--accent);
	--tec-color-link-accent-hover: var(--wp--preset--color--accent-dark);

	/* Surfaces and rules */
	--tec-color-background: var(--wp--preset--color--background);
	--tec-color-background-secondary: var(--wp--preset--color--background-alt);
	--tec-color-background-secondary-hover: var(--wp--preset--color--background-alt);
	--tec-color-border-default: var(--wp--preset--color--border);
	--tec-color-border-secondary: var(--wp--preset--color--border);
	--tec-color-border-active: var(--wp--preset--color--accent);

	/* Search bar submit button — declared literally, not derived from accent */
	--tec-color-background-events-bar-submit-button: var(--wp--preset--color--accent);
	--tec-color-background-events-bar-submit-button-hover: var(--wp--preset--color--accent-dark);
	--tec-color-background-events-bar-submit-button-active: var(--wp--preset--color--accent-dark);

	/* Icons */
	--tec-color-event-icon-hover: var(--wp--preset--color--accent-dark);
	--tec-color-icon-focus: var(--wp--preset--color--accent);

	/* Multiday and Week-view tints (hard-coded alpha blends upstream) */
	--tec-color-accent-primary-week-event: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	--tec-color-accent-primary-week-event-hover: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
	--tec-color-accent-primary-week-event-featured: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
	--tec-color-accent-primary-week-event-featured-hover: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--accent) 34%, transparent);

	/* Typeface */
	--tec-font-family-sans-serif: var(--wp--preset--font-family--body);

	/*
	 * Type scale — lift the small end only.
	 *
	 * TEC ships event titles at 12px and event times at 11px, which is the
	 * most important text on the page and the hardest to read. Sizes 4–10
	 * (headings, month title) are left at plugin defaults, so this only
	 * affects the small text and keeps the scale strictly ascending.
	 *
	 * Was: 0=11 1=12 2=14 3=16
	 */
	--tec-font-size-0: 14px;
	--tec-font-size-1: 16px;
	--tec-font-size-2: 17px;
	--tec-font-size-3: 18px;
}

/* --------------------------------------------------------------------------
 * The Events Calendar — hiding unused chrome.
 *
 * This is the ONE place we target .tribe-* class names, and it's a considered
 * exception. There is no settings toggle for either of these, and the variable
 * API can't hide elements.
 *
 * It fails safely: if TEC renames these classes in a future version, the
 * hidden elements simply reappear. That's cosmetic, not broken layout — which
 * is why it's acceptable here and wasn't acceptable for theming.
 *
 * AFTER A MAJOR TEC UPDATE: check /events/ for a reappeared view switcher or
 * subscribe dropdown.
 *
 * - View selector: only Month is enabled, so it renders a single pointless
 *   button.
 * - Subscribe dropdown: not wanted on this site.
 * -------------------------------------------------------------------------- */
.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-subscribe-dropdown,
.tribe-events .tribe-events-c-subscribe-dropdown__container {
	display: none;
}

/*
 * Safety net for long event titles.
 *
 * If a whole description gets typed into the title field, this stops it
 * wrecking the month grid — clamped to two lines with an ellipsis. The full
 * title still shows on the event's own page, so nothing is lost.
 */
.tribe-events .tribe-events-calendar-month__calendar-event-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Contact page layout.
 *
 * Order was reversed: the form is now the first thing after the page header,
 * with the intro copy on the left and the form on the right. Visit details and
 * the member list sit below it, side by side.
 *
 * The rule between the two sections is a border rather than a separator block,
 * so it stays put no matter what gets added or removed above it.
 * -------------------------------------------------------------------------- */
.shm-contact-lower {
	border-top: 1px solid var(--wp--preset--color--border);
}

/*
 * The intro column is narrower than the grid gives it. Left to fill 583px the
 * paragraph runs to about 90 characters, which is past comfortable reading
 * measure — and it left the heading floating a long way from the form.
 */
.shm-contact-intro {
	max-width: 400px;
}

/*
 * Member list, replacing the five cards.
 *
 * The cards were doing no work: a box around a name and a number adds nothing
 * a line break doesn't. Two columns of plain rows reads faster and stops the
 * names being squeezed to a fifth of the width each.
 */
.shm-member-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 32px;
	margin-top: 20px;
}

.shm-member-list > * {
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.shm-member-list p {
	margin: 0;
}

.shm-member-list .shm-contact-phone {
	margin-top: 2px;
}

/* 44px minimum on the number itself — it is a tap target on a phone. */
.shm-member-list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 900px) {
	.shm-contact-intro {
		max-width: none;
	}

	.shm-member-list {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Contact Form 7.
 *
 * CF7 ships almost no styling, so everything below is ours. Scoped to
 * .shm-form-band rather than the CF7 classes broadly, so a second form
 * elsewhere can be styled differently without fighting these rules.
 *
 * Sizing is deliberately generous. This audience skews older: 18px input
 * text so it can be read while typing, 52px tall fields so they are easy to
 * hit on a phone, and visible borders rather than the fashionable
 * borderless look — a field you cannot see the edges of is a field some
 * people will not realise is a field.
 * -------------------------------------------------------------------------- */
.shm-form-band .wpcf7 label {
	display: block;
	margin-bottom: 18px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}

/*
 * Targeted by .wpcf7-form-control, NOT by input[type="text"].
 *
 * The anti-spam plugin injects unclassed honeypot inputs into the form. A
 * blanket type selector styled those too, rendering one as a visible 35px
 * box — which looks broken AND is worse than that: a real person filling in
 * a field they can see would trip the honeypot and have their message
 * silently discarded.
 *
 * CF7 puts .wpcf7-form-control on every control it generates; the honeypots
 * carry no class at all, so this cleanly separates them. :not([type=submit])
 * because the button shares that class and is styled separately below.
 */
.shm-form-band .wpcf7 .wpcf7-form-control:not([type="submit"]) {
	display: block;
	width: 100%;
	margin-top: 8px;
	/*
	 * 10px vertical padding with a 1.35 line-height lands each field at about
	 * 50px tall. The earlier 14px/1.5 combination rendered at 80px, which read
	 * as a text area rather than a single-line field. 50px still clears the
	 * 44px touch-target guideline comfortably.
	 */
	padding: 10px 14px;
	min-height: 48px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--wp--preset--color--foreground);
	background-color: #fbf7ef;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.shm-form-band .wpcf7 textarea.wpcf7-form-control {
	min-height: 160px;
	resize: vertical;
}

/*
 * Focus ring is a real outline, not just a color change. Color alone is
 * not enough to show focus for a keyboard user (WCAG 2.4.7), and this is
 * the one place on the site where losing your place actually costs data.
 */
.shm-form-band .wpcf7 .wpcf7-form-control:not([type="submit"]):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

.shm-form-band .wpcf7 .wpcf7-submit {
	display: inline-block;
	width: auto;
	min-height: 52px;
	margin-top: 8px;
	padding: 15px 34px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--background);
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.shm-form-band .wpcf7 .wpcf7-submit:hover,
.shm-form-band .wpcf7 .wpcf7-submit:focus-visible {
	background-color: var(--wp--preset--color--accent-dark);
}

.shm-form-band .wpcf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--headline);
	outline-offset: 3px;
}

/*
 * CF7's own response and validation messages.
 *
 * Left border plus background rather than color alone, again so the state
 * is not carried by hue by itself. Red on cream is about 4.8:1 here, which
 * clears AA for body text.
 */
.shm-form-band .wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 16px;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background-color: var(--wp--preset--color--background-alt);
}

.shm-form-band .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2e7d32;
}

.shm-form-band .wpcf7 form.invalid .wpcf7-response-output,
.shm-form-band .wpcf7 form.failed .wpcf7-response-output {
	border-left-color: #a3231c;
}

.shm-form-band .wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 400;
	color: #a3231c;
}

.shm-form-band .wpcf7 .wpcf7-not-valid {
	border-color: #a3231c;
}

.shm-form-band .wpcf7 .wpcf7-spinner {
	margin-left: 12px;
}

@media (max-width: 600px) {
	.shm-form-band {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.shm-form-band .wpcf7 .wpcf7-submit {
		width: 100%;
	}
}

/*
 * Defensive: keep the anti-spam honeypot out of sight even if the plugin's
 * own stylesheet fails to load or it changes its markup. A visible honeypot
 * silently eats real submissions.
 */
.shm-form-band .altEmail_container {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


/* --------------------------------------------------------------------------
 * Gallery grid.
 *
 * Four across, every tile 4:5, strict left-to-right numerical order.
 *
 * This replaced a CSS multi-column masonry. Multi-column fills top-to-bottom
 * down each column before moving right, so photos named 1-10 appeared as
 * 1,4,7,10 across the first row. There is no property that changes that fill
 * direction — ordered reading and multi-column are mutually exclusive.
 *
 * Portrait 4:5 photos fill a single tile with nothing trimmed.
 *
 * Wide shots — the ones framing several murtis across — carry .is-wide and
 * span two columns instead. They must NOT be cropped to portrait: doing so
 * would cut murtis out of the frame, which is the whole subject of the photo.
 *
 * cover rather than contain is deliberate: a wrong-ratio image should crop,
 * not letterbox. Letterboxing would leave uneven gaps that read as a bug,
 * whereas a crop still looks like a photograph.
 * -------------------------------------------------------------------------- */
.shm-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.shm-gallery-grid .shm-gallery-item {
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	/* Shows through while the image is still lazy-loading. */
	background-color: var(--wp--preset--color--background-alt);
}

/*
 * Wide shots spanning two columns.
 *
 * The aspect ratio is 33/20 rather than the photo's own 27/20 so the tile
 * matches the HEIGHT of the 4:5 portraits beside it and rows stay flush.
 *
 * Why a fixed ratio and not stretch-to-row: a row containing only wide tiles
 * has no portrait to establish its height, so a stretched tile would have
 * nothing to stretch against and collapse. 33/20 is the target ratio at a
 * 1280 container; across the range of column widths this grid actually hits,
 * the true value moves between 1.64 and 1.67, so rows land within a pixel or
 * two of each other at every breakpoint.
 *
 * The trade is roughly 9% off the top and bottom of a wide photo — sky mural
 * and floor. The murtis run left to right across the frame, so nothing that
 * matters is lost. If a particular shot needs it, nudge object-position on
 * that one image rather than changing this rule.
 */
.shm-gallery-grid .shm-gallery-item.is-wide {
	grid-column: span 2;
	aspect-ratio: 33 / 20;
}

.shm-gallery-grid .shm-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 260ms ease, opacity 260ms ease;
}

.shm-gallery-grid .shm-gallery-item:hover img {
	transform: scale(1.03);
	opacity: 0.94;
}

@media (prefers-reduced-motion: reduce) {
	.shm-gallery-grid .shm-gallery-item img {
		transition: none;
	}

	.shm-gallery-grid .shm-gallery-item:hover img {
		transform: none;
	}
}

@media (max-width: 1100px) {
	.shm-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 782px) {
	.shm-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
 * The Events Calendar — single event pages.
 *
 * Second considered exception to the "variables only" rule above. TEC's single
 * event view is legacy PHP markup that its CSS variable API doesn't reach, so
 * the only way to bring it in line with the rest of the site is by class.
 *
 * Everything here is scoped to body.single-tribe_events so the month grid on
 * /events/ is untouched.
 *
 * FAILS SAFELY: if TEC renames these classes, the hidden blocks reappear and
 * the typography falls back to plugin defaults. Ugly, not broken.
 * -------------------------------------------------------------------------- */

/*
 * Unconstrain the outer section and move the width limit onto the inner
 * content instead.
 *
 * This is what lets the injected bands run full-bleed. The alternative —
 * width:100vw with negative margins — overflows horizontally whenever a
 * scrollbar takes up layout space, and the usual fix for that
 * (overflow-x:hidden on html) breaks position:sticky, which would kill the
 * site header. Moving the constraint inward has neither problem.
 */
body.single-tribe_events #tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.single-tribe_events #tribe-events-content {
	max-width: 1048px;
	margin: 0 auto;
	padding: 64px 24px 80px;
}

body.single-tribe_events .tribe-events-before-html,
body.single-tribe_events .tribe-events-after-html {
	margin: 0;
	padding: 0;
}

/*
 * Title. TEC ships its own font stack and was rendering the event title in the
 * body face while every other heading on the site is the serif.
 */
body.single-tribe_events .tribe-events-single-event-title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.2;
	color: var(--wp--preset--color--headline);
}

/*
 * Date and time. Once the DETAILS block below is removed this is the only
 * fact left on the page, so it stops being caption-sized.
 */
body.single-tribe_events .tribe-events-schedule {
	margin: 0;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

body.single-tribe_events .tribe-events-schedule :where(div, span, h2, p) {
	font-size: inherit;
	color: inherit;
	margin: 0;
}

/*
 * Removals.
 *
 * - .tribe-events-event-meta ("DETAILS") only ever restated the date line
 *   directly above it.
 * - #tribe-events-header / #tribe-events-footer are the prev/next links. Every
 *   Sunday puja is a recurrence of the same event, so both arrows read
 *   "Sunday Morning Puja" and tell a visitor nothing.
 * - .tribe-events-back is TEC's "« All Events" text link, replaced by the
 *   button in the header band.
 */
body.single-tribe_events .tribe-events-event-meta,
body.single-tribe_events #tribe-events-header,
body.single-tribe_events #tribe-events-footer,
body.single-tribe_events .tribe-events-back {
	display: none;
}

/* TEC marks up dates with <abbr title>, which UAs underline with dots — it
 * reads as a spellcheck error rather than a date. */
body.single-tribe_events abbr[title] {
	text-decoration: none;
	border-bottom: 0;
	cursor: inherit;
}

/* Band padding. Set here rather than inline so it has a breakpoint. */
.shm-event-band {
	padding: 48px 56px;
}

.shm-event-invocation {
	padding: 56px;
}

.shm-event-kicker {
	margin: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 32px;
	line-height: 1.25;
	color: #df8f48;
}

.shm-event-back {
	margin: 20px 0 0;
	text-align: center;
}

.shm-invocation-title {
	margin: 0;
	text-align: center;
	font-size: 28px;
	color: var(--wp--preset--color--background);
}

/*
 * Back button. Cream on plum — the reverse of the site's default button, and
 * the same pairing as "Plan Your Visit".
 */
.shm-btn-back {
	display: inline-block;
	padding: 11px 24px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--plum-deep);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.shm-btn-back:hover,
.shm-btn-back:focus-visible {
	background-color: #fff;
	color: var(--wp--preset--color--plum-deep);
	text-decoration: none;
}

.shm-btn-back:focus-visible {
	outline: 2px solid #df8f48;
	outline-offset: 3px;
}

/*
 * The Notice on a single event page.
 *
 * Inherits .shm-card-notice for its color, background and the uppercase
 * "PLEASE NOTE" label, so the card and the event page cannot drift apart.
 * Only the scale changes: on a card this is a supporting line among four
 * events, but here it is usually the reason the page was opened, so it reads
 * at body size rather than 15px.
 *
 * align-self on the base rule is a flex property and simply does not apply
 * here — the event page is not a flex context — so it is left alone.
 */
.shm-event-notice {
	font-size: 18px;
	margin: 0 0 24px;
	padding: 16px 20px;
}

.shm-event-notice b {
	font-size: 14px;
	margin-bottom: 4px;
}

@media (max-width: 700px) {
	.shm-event-band {
		padding: 36px 24px;
	}

	.shm-event-invocation {
		padding: 44px 24px;
	}

	.shm-event-kicker {
		font-size: 26px;
	}

	body.single-tribe_events #tribe-events-content {
		padding: 44px 24px 56px;
	}
}

/* Responsive collapse */
@media (max-width: 900px) {
	.shm-split,
	.shm-split-rev,
	.shm-grid-2,
	.shm-grid-3,
	.shm-grid-4,
	.shm-grid-5,
	.shm-grid-exec,
	.shm-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.shm-photo.is-h-420,
	.shm-photo.is-h-380 { height: 300px; }
}

@media (max-width: 600px) {
	.shm-grid-4 { grid-template-columns: repeat(2, 1fr); }

	/* Section padding is set inline on the blocks, so it needs !important here. */
	.wp-block-post-content > .alignfull {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* ==========================================================================
   MOBILE FIX — paste this at the very END of
   wp-content/themes/shm2026/assets/css/style.css
   Append only. Nothing above needs to be edited or deleted.
   18 Aug 2026
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Collapse the layout grids to one column on phones.
   The existing 900px query stops at two columns; nothing took them to one.
   -------------------------------------------------------------------------- */

.shm-split > *,
.shm-split-rev > *,
.shm-grid-2 > *,
.shm-grid-3 > *,
.shm-grid-4 > *,
.shm-grid-5 > *,
.shm-grid-exec > *,
.shm-footer-grid > * {
  min-width: 0;
}

@media (max-width: 782px) {
  .shm-split,
  .shm-split-rev {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .shm-split,
  .shm-split-rev,
  .shm-grid-2,
  .shm-grid-3,
  .shm-grid-4,
  .shm-grid-5,
  .shm-grid-exec {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* --------------------------------------------------------------------------
   2. Contact form.
   The theme's form styling is scoped to .shm-form-band, which isn't in the
   markup anywhere — the form ships inside .shm-contact-formcol, so none of it
   applies. These are the same rules, rescoped, plus box-sizing (the theme
   has no border-box reset, so width:100% + padding would overflow without it).
   -------------------------------------------------------------------------- */

.shm-contact-formcol .wpcf7 label {
  display: block;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--foreground);
}

.shm-contact-formcol .wpcf7 .wpcf7-form-control:not([type="submit"]) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  min-height: 48px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--wp--preset--color--foreground);
  background-color: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.shm-contact-formcol .wpcf7 textarea.wpcf7-form-control {
  min-height: 160px;
  resize: vertical;
}

.shm-contact-formcol .wpcf7 .wpcf7-form-control:not([type="submit"]):focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-color: var(--wp--preset--color--accent);
}

.shm-contact-formcol .wpcf7 .wpcf7-submit {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  min-height: 52px;
  margin-top: 8px;
  padding: 15px 34px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--accent);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.shm-contact-formcol .wpcf7 .wpcf7-submit:hover,
.shm-contact-formcol .wpcf7 .wpcf7-submit:focus-visible {
  background-color: var(--wp--preset--color--accent-dark);
}

.shm-contact-formcol .wpcf7 .wpcf7-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--headline);
  outline-offset: 3px;
}

.shm-contact-formcol .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 18px;
  font-size: 16px;
  border: 0;
  border-left: 4px solid var(--wp--preset--color--accent);
  border-radius: 4px;
  background-color: var(--wp--preset--color--background-alt);
}

.shm-contact-formcol .wpcf7 form.sent .wpcf7-response-output {
  border-left-color: #2e7d32;
}

.shm-contact-formcol .wpcf7 form.invalid .wpcf7-response-output,
.shm-contact-formcol .wpcf7 form.failed .wpcf7-response-output {
  border-left-color: #a3231c;
}

.shm-contact-formcol .wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  color: #a3231c;
}

.shm-contact-formcol .wpcf7 .wpcf7-not-valid {
  border-color: #a3231c;
}

.shm-contact-formcol .wpcf7 .wpcf7-spinner {
  margin-left: 12px;
}

/* Honeypot — currently visible to screen readers as a stray "Alternative:" field */
.shm-contact-formcol .altEmail_container {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 600px) {
  .shm-contact-formcol .wpcf7 .wpcf7-submit {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   3. Executive members read as a list, not cards.
   Same pattern as .shm-member-list on Contact. The border, radius and padding
   on each card come from block editor settings on the group, so they need
   !important to unset.
   -------------------------------------------------------------------------- */

.shm-grid-exec {
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 32px;
}

.shm-grid-exec > * {
  border: 0 !important;
  border-bottom: 1px solid var(--wp--preset--color--border) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  background: none !important;
}

.shm-grid-exec p { margin: 0; }

.shm-grid-exec .shm-contact-phone { margin-top: 2px; }

@media (max-width: 900px) {
  .shm-grid-exec { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   4. Heading scale override.
   Every heading from the original build carries a hardcoded inline font-size
   in its block markup (h1 32px; h2 28 / 30 / 32px), which beats theme.json.
   On About and Contact the h1 and the h2 below it were both 32px, so there
   was no hierarchy to read.

   h2 only. h1 is deliberately left at its inline 32px — overriding it would
   push it up to 40px, which is the wrong direction.

   DELETE THIS BLOCK once the inline sizes are cleared from the blocks in the
   page editor. It is a bridge, not the fix: the editor will keep showing the
   old value while the site shows this one.
   -------------------------------------------------------------------------- */

.entry-content h2 {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem) !important;
  line-height: 1.25 !important;
}


/* --------------------------------------------------------------------------
   5. About - leadership section as two columns.
   LEFT  : eyebrow, h2, intro, then the three pandits (.shm-split, unstacked
           to a single column so its two children sit one above the other)
   RIGHT : "Executive Members" + the member list

   The section wrapper has no class of its own, so it is selected by what it
   contains. :has() is the only reason this needs no markup change - if the
   block structure of this section changes, this rule stops matching and the
   layout falls back to stacked, which is safe.

   Single column below 783px is inherited, not set here.
   -------------------------------------------------------------------------- */

@media (min-width: 783px) {
  .wp-block-group:has(> .shm-grid-exec) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: start;
  }

  .wp-block-group:has(> .shm-grid-exec) > .shm-split {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }

  .wp-block-group:has(> .shm-grid-exec) > p {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .wp-block-group:has(> .shm-grid-exec) > .shm-grid-exec {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Upcoming Events — card layout
   Replaces the .shm-event-row list on the homepage.

   Tokens only. No new colors: the section sits on `background-alt` and the
   cards sit on `background`, which is the existing tonal pair used in
   reverse so the card reads lighter than the field behind it.

   Ornaments inherit `currentColor`, so retinting them is one declaration
   once a gold token exists in theme.json.
   ========================================================================== */

/* --- section -------------------------------------------------------------- */

.shm-events {
	background-color: var(--wp--preset--color--background-alt);
	background-image: url("../images/noise.png");
	background-repeat: repeat;
	padding: 56px 0 64px;
}

.shm-events-head {
	text-align: center;
	margin: 0 0 40px;
}

.shm-events-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 6px;
}

.shm-events-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--wp--preset--color--headline);
	margin: 0;
}

.shm-events-sub {
	font-size: 18px;
	color: var(--wp--preset--color--muted);
	margin: 8px 0 0;
}

/*
 * Ornament color.
 *
 * `gold` #b78336 is ornament-only and must stay that way. It measures ~2.5:1
 * on background-alt and ~2.7:1 on background — well under the 4.5:1 text
 * threshold. As decoration it has no threshold to meet; as a label or a link
 * it would fail. Text stays on `accent`.
 *
 * Requires this in theme.json settings.color.palette:
 *   { "slug": "gold", "name": "Gold", "color": "#b78336" }
 */

/* Ornamental rules flanking the eyebrow and the section title. */
.shm-flourish {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--wp--preset--color--gold);
}
.shm-flourish::before,
.shm-flourish::after {
	content: "";
	height: 1px;
	width: clamp(40px, 12vw, 150px);
	background: currentColor;
	opacity: .45;
}
.shm-flourish svg {
	display: block;
	flex-shrink: 0;
	/* The mark's ink sits above its geometric base, so centering on the box
	   drops it below the rules. Nudged to align optically, not numerically. */
	transform: translateY(-3px);
}

/*
 * Solid, not outlined. As a terminal CTA after the cards it has to close the
 * section; a hollow box on cream reads as an empty container, which is what it
 * looked like on a phone. Auto width — never full bleed.
 */
.shm-events-viewall {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* 44px is the floor, not a preference — below it the tap target fails. */
	min-height: 44px;
	padding: 11px 24px;
	border: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(83, 17, 32, .10), 0 4px 10px rgba(83, 17, 32, .10);
}
.shm-events-viewall:hover {
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--background);
}
.shm-events-viewall:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-dark);
	outline-offset: 3px;
}

/* --- card grid ------------------------------------------------------------ */

.shm-event-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	/* Cards are free to differ in height. Deliberate — it removes any need to
	   truncate a long title to keep a row even. */
	align-items: start;
}

@media (max-width: 1100px) { .shm-event-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  782px) { .shm-event-cards { grid-template-columns: 1fr; gap: 14px; } }

.shm-event-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--wp--preset--color--background);
	background-image: url("../images/noise.png");
	background-repeat: repeat;
	border-radius: 14px;
	overflow: hidden;
	/* Warm-tinted shadow off plum-deep. A neutral black shadow reads gray and
	   dead against cream. */
	box-shadow: 0 1px 2px rgba(83, 17, 32, .05), 0 6px 18px rgba(83, 17, 32, .07);
}

/* --- media ---------------------------------------------------------------- */

.shm-card-media {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--background-alt);
	overflow: hidden;
	flex-shrink: 0;
}
/* Shorter crop again once stacked — same structure, less scrolling. */
@media (max-width: 782px) {
	.shm-card-media { aspect-ratio: 21 / 9; }
}
.shm-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- body ----------------------------------------------------------------- */

.shm-card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 22px 22px 26px;
	flex: 1;
	min-width: 0;
}

.shm-card-when {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shm-card-weekday {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 2px;
}

.shm-card-date {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--headline);
	margin: 0;
}

.shm-card-rule {
	display: block;
	color: var(--wp--preset--color--gold);
	margin: 12px 0 14px;
}

.shm-card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--wp--preset--color--headline);
	margin: 0;
	overflow-wrap: break-word;
}

.shm-card-desc {
	font-size: 17px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	margin: 10px 0 0;
	/* Guardrail, not a content rule. Full text lives on the event page, which
	   is what gives "More Info" something to deliver. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shm-card-notice {
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-dark);
	background-color: var(--wp--preset--color--background-alt);
	border-radius: 8px;
	padding: 10px 14px;
	margin: 14px 0 0;
	text-align: left;
	align-self: stretch;
}
/* Label carries the meaning so the notice is not signalled by color alone. */
.shm-card-notice b {
	display: block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.shm-card-time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .2px;
	color: var(--wp--preset--color--foreground);
	margin: 16px 0 0;
}
.shm-card-time svg { color: var(--wp--preset--color--accent); flex-shrink: 0; }

.shm-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 4px;          /* keeps the target at 44px without a visible box */
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-dark);
	/* Underline rather than a border, so the rule tracks the text baseline
	   instead of sitting at the bottom of the 44px target box. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}
.shm-card-link:hover { color: var(--wp--preset--color--headline); }
.shm-card-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* --- closing flourish ----------------------------------------------------- */

.shm-events-foot {
	margin: 44px 0 0;
	text-align: center;
}
.shm-events-foot .shm-flourish {
	margin-bottom: 22px;
}

@media (prefers-reduced-motion: no-preference) {
	.shm-event-card { transition: box-shadow .25s ease, transform .25s ease; }
	.shm-event-card:hover {
		box-shadow: 0 2px 4px rgba(83, 17, 32, .07), 0 12px 28px rgba(83, 17, 32, .10);
		transform: translateY(-2px);
	}
}


/* --- stacked: next event leads, the rest are rows -------------------------- */
/*
 * No JS. The query is ordered by start date and past events fall out of it, so
 * :first-child is always the next event — the promotion happens on its own as
 * dates pass.
 *
 * Rows keep the notice. Dropping it here would hide the exact thing the card
 * was built to surface, for the reader most likely to be caught out by it.
 *
 * Rows keep the description too, clamped to two lines. One line of date and a
 * title was not enough to tell two pujas apart, and the full card above is
 * still the one carrying the flyer and the link.
 */
@media (max-width: 782px) {

	.shm-event-card:not(:first-child) {
		box-shadow: none;
		border-radius: 12px;
	}

	.shm-event-card:not(:first-child) .shm-card-media,
	.shm-event-card:not(:first-child) .shm-card-rule,
	.shm-event-card:not(:first-child) .shm-card-link {
		display: none;
	}

	/* Two lines, not the card's three: the row is a scan, not a read. */
	.shm-event-card:not(:first-child) .shm-card-desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-align: left;
		margin: 6px 0 0;
	}

	.shm-event-card:not(:first-child) .shm-card-body {
		align-items: flex-start;
		text-align: left;
		padding: 16px 18px;
	}

	.shm-event-card:not(:first-child) .shm-card-when    { align-items: flex-start; }
	.shm-event-card:not(:first-child) .shm-card-weekday { font-size: 13px; margin: 0 0 1px; }
	.shm-event-card:not(:first-child) .shm-card-date    { font-size: 17px; }

	.shm-event-card:not(:first-child) .shm-card-title {
		font-size: 18px;
		margin-top: 5px;
	}

	.shm-event-card:not(:first-child) .shm-card-time {
		justify-content: flex-start;
		font-size: 15px;
		margin-top: 8px;
	}

	.shm-event-card:not(:first-child) .shm-card-notice { margin-top: 10px; }
}


/* --------------------------------------------------------------------------
 * .shm-events-full caps the section at 900px. That was right for the row
 * list — a single column of date-badge rows at 1280 left a metre of empty
 * cream to the right and stretched the divider rules across the whole page.
 *
 * A four-across card grid wants the opposite. The cap is released only when
 * the section also carries .shm-events, so any other use of
 * .shm-events-full keeps its original width.
 * -------------------------------------------------------------------------- */

.shm-events.shm-events-full,
.shm-events .shm-events-full {
	max-width: none;
}


/* ==========================================================================
   Home — the dharma band, slimmed
   ==========================================================================

   The invocation band ran 255px tall to carry one line of italic. That is a
   lot of scroll for a decorative statement sitting between the welcome and
   the events, and it read as a section rather than an ornament.

   This is the ornament version: 120px, 17px type, a lamp and a hairline rule
   running out to each edge.

   Scoped to .shm-dharma on purpose. The single event pages use the same
   .shm-noise.has-accent-background-color band (see shm2026_event_invocation
   in functions.php) and are deliberately left alone — matching them is a
   separate decision.
   ========================================================================== */

.shm-dharma {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	min-height: 120px;
	padding: 0 40px;
}

/*
 * The tall band's glow is a 560px animated radial tuned for 255px of height.
 * At 120px it is wider than the band is tall, so it reads as a bright smear
 * rather than lamplight. Removed here only — the event pages keep it.
 */
.shm-dharma.has-accent-background-color::after {
	display: none;
}

.shm-dharma-rule {
	flex: 0 1 190px;
	height: 1px;
	background: rgba(255, 236, 190, .45);
}

/* margin:0 overrides the base .shm-diya, which carries `margin: 0 auto 16px`
   from the tall band where it sat centered above the line. */
.shm-dharma .shm-diya {
	flex: 0 0 auto;
	margin: 0;
	width: 26px;
	height: 29px;
	display: block;
}

.shm-dharma p {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 17px;
	line-height: 1.3;
	text-align: center;
}

/*
 * Narrow: the rules have nowhere to run, so they go rather than squeeze to a
 * stub. The line wraps and the lamps sit either side of the whole block.
 */
@media (max-width: 600px) {
	.shm-dharma {
		gap: 12px;
		padding: 0 18px;
	}

	.shm-dharma-rule { display: none; }

	.shm-dharma p {
		flex: 0 1 auto;
		min-width: 0;
	}

	.shm-dharma .shm-diya {
		width: 20px;
		height: 23px;
	}
}


/* ==========================================================================
   Home — the Sunday block inside the welcome band
   ==========================================================================

   Sits under the About button, separated by a lotus rule. The lamp does the
   separating work that a box or a border would otherwise have to do, so the
   band keeps its open, uncontained feel.
   ========================================================================== */

/* Hairline rule with the lotus centered in it. Same mark as the events
   section header, not a new ornament. */
.shm-rule {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 520px;
	margin: 32px 0 26px;
	color: var(--wp--preset--color--gold);
}

.shm-rule::before,
.shm-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.shm-rule svg { flex: 0 0 auto; }

.shm-sunday {
	display: flex;
	align-items: center;
	gap: 22px;
}

.shm-sunday .shm-diya {
	flex: 0 0 auto;
	margin: 0;
	width: 54px;
	height: 61px;
}

.shm-sunday-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	color: var(--wp--preset--color--headline);
}

.shm-sunday-time {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .4px;
}

.shm-sunday-note {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 17px;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 600px) {
	.shm-rule { max-width: none; }
	.shm-sunday { gap: 16px; }
}