/*
Theme Name:   DharmaSetu
Theme URI:    https://omhinducenter.org
Description:  DharmaSetu — the digital community platform of OM Hindu Center. A child theme of Twenty Twenty-Five carrying the OM Hindu Center brand system. Design tokens live in theme.json; this file holds only what the block editor cannot express.
Author:       OM Hindu Center
Author URI:   https://omhinducenter.org
Template:     twentytwentyfive
Version:      0.3.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dharmasetu
Tags:         block-patterns, full-site-editing, accessibility-ready
*/

/* ==========================================================================
   DharmaSetu child theme
   --------------------------------------------------------------------------
   Colors, typography, spacing and layout are defined in theme.json so that
   administrators can use them from the block editor. Do NOT hard-code brand
   values here — spec §43.10 requires that editors control presentation, and
   duplicated tokens drift.

   This file is reserved for what theme.json cannot express: focus states,
   motion, and small structural refinements.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessibility — visible focus.
   Spec §17 requires visible focus states throughout the booking flow.
   The default outline is easy to lose against cream backgrounds, so the
   focus ring is explicit and uses the navy from the logo wordmark.
   -------------------------------------------------------------------------- */

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

/* Never remove focus rings. Kept explicit so a future edit has to be deliberate. */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Skip link — keyboard users land here first.
   -------------------------------------------------------------------------- */

.skip-link:focus {
	background-color: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--navy);
	outline: 3px solid var(--wp--preset--color--saffron);
	z-index: 999999;
}

/* --------------------------------------------------------------------------
   Motion — respect the user's preference.
   Spec §17 / WCAG 2.2. Non-negotiable.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Hero.

   Block themes give every block its own vertical margin, so a section's
   padding is never the only vertical space — the columns block adds its own
   margin on top, and the first/last elements inside each column add theirs
   again. That compounding is what produces the dead space at the top and
   bottom of a section.

   Rather than keep shaving the padding to compensate (which breaks at other
   viewport widths), the padding is declared once here and the inner margins
   are collapsed to zero. The section padding then genuinely is the spacing.
   -------------------------------------------------------------------------- */

/* Every full-width band shares one rhythm. Sections declare no padding of
   their own — it lives here, so changing the page's vertical rhythm is one
   edit rather than one per template. */
.dharmasetu-hero,
.dharmasetu-section {
	padding-block: clamp(1.25rem, 2vw, 1.75rem);

	/* Kill the root blockGap margin that <main> (is-layout-flow) applies
	   between its children. For full-bleed colour bands the change of
	   background IS the separator — an extra margin between them just adds
	   dead space that is invisible in the template and only shows up in the
	   browser. This was the largest of the three stacked gaps. */
	margin-block: 0;
}

/* The hero sits directly under the header and carries the least weight. */
.dharmasetu-hero {
	padding-block: clamp(1rem, 1.75vw, 1.375rem);
}

.dharmasetu-hero > .wp-block-columns {
	margin-block: 0;
	align-items: center;
}

/* Collapse leading and trailing margins inside every band, so the first line
   of text sits on the section padding rather than below an inherited margin.
   Without this the padding and the block margin add up and the gap is roughly
   double what the padding says. */
.dharmasetu-hero .wp-block-column > :first-child,
.dharmasetu-section > :first-child,
.dharmasetu-section > :first-child > :first-child {
	margin-block-start: 0;
}

.dharmasetu-hero .wp-block-column > :last-child,
.dharmasetu-section > :last-child,
.dharmasetu-section > :last-child > :last-child {
	margin-block-end: 0;
}

.dharmasetu-hero figure {
	margin-block: 0;
}

/* On narrow screens the columns stack; restore a single gap between them
   without reintroducing the desktop dead space. */
@media (max-width: 781px) {
	.dharmasetu-hero > .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}

	.dharmasetu-hero .wp-block-column:last-child {
		display: none; /* the mark repeats the header logo; drop it on mobile */
	}
}

/* --------------------------------------------------------------------------
   Site logo — the mark is square with generous internal padding, so it needs
   a slightly larger display size than a typical wordmark to read clearly.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Link affordance — underline on hover rather than permanent decoration,
   so body copy stays readable while links remain discoverable.
   -------------------------------------------------------------------------- */

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}

/* --------------------------------------------------------------------------
   Buttons — a designed hover/active state rather than the library default.
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color 150ms ease-out, color 150ms ease-out,
		transform 150ms ease-out;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

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