/*
Theme Name: Sonapati
Author: Sonapati
Description: A block theme for gold and silver savings platforms, bullion dealers and precious-metal retailers. Presents rates and holdings the way a bullion house presents metal: weighed, stamped and certified. Ships a rate-board template part, assay-tag plan cards, an oxblood vault palette sampled from real gold, and three typefaces with full Devanagari coverage for Hindi and Marathi sites. Every colour pairing is verified against WCAG 2.1 contrast thresholds.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sonapati
Tags: blog, news, one-column, two-columns, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, translation-ready, wide-blocks

This theme, like WordPress, is licensed under the GPL.

Add "Theme URI:" and "Author URI:" above before submitting to WordPress.org.
Both are optional, but a reviewer will reject a placeholder or unreachable URL,
so they are left out rather than filled with something fake.
*/

/* -------------------------------------------------------------------------
 * Most styling lives in theme.json. This stylesheet carries only what
 * theme.json cannot express: component internals, focus behaviour, motion
 * preferences and script-specific line heights.
 *
 * Section padding is NOT set here. Patterns declare their own spacing through
 * block supports, so there is no theme-level section rule to collide with.
 *
 * Contents
 *   1. Base and accessibility
 *   2. Script-specific typography
 *   3. Eyebrow and board figures
 *   4. Rate board
 *   5. Assay-tag cards
 *   6. Gold-leaf rules
 *   7. Trust strip
 *   8. FAQ details
 *   9. Buttons on dark grounds
 *  10. Utilities
 *  11. Reduced motion
 * ---------------------------------------------------------------------- */

/* 1. Base and accessibility -------------------------------------------- */

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

/* Gold at 3.53:1 clears the large-text threshold only. Any heading that
   inherits the gold text colour must therefore stay at display sizes; the
   patterns never apply it below 1.5rem. */
h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* A visible focus ring on every interactive element. Gold-700 is 6.56:1 on
   paper; gold-soft is 9.65:1 on oxblood. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-text);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--xs);
}

.sonapati-on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-oxblood-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.has-oxblood-deep-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--gold-soft);
}

/* Touch targets never fall below 44px. */
.wp-block-button__link,
.wp-block-navigation a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Inputs use the 3.83:1 border, never the 1.78:1 hairline. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 1rem;
}

textarea {
	min-height: 8rem;
}

/* 2. Script-specific typography ---------------------------------------- */

/* Devanagari matras and conjuncts need vertical room that 1.65 does not give. */
:lang(hi),
:lang(mr),
:lang(ne),
:lang(sa),
:lang(kok) {
	line-height: 1.85;
}

/* Rupee amounts must never break from their figure. */
.sonapati-amount {
	white-space: nowrap;
}

/* 3. Eyebrow and board figures ----------------------------------------- */

/* An eyebrow states a fact — purity, weight, unit. It is not decoration. */
:is(.sonapati-eyebrow, .is-style-sonapati-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
	margin-block: 0;
}

.sonapati-on-dark :is(.sonapati-eyebrow, .is-style-sonapati-eyebrow),
.has-oxblood-background-color :is(.sonapati-eyebrow, .is-style-sonapati-eyebrow),
.has-oxblood-deep-background-color :is(.sonapati-eyebrow, .is-style-sonapati-eyebrow),
.has-oxblood-raised-background-color :is(.sonapati-eyebrow, .is-style-sonapati-eyebrow) {
	color: var(--wp--preset--color--gold-soft);
}

/* Khand, for rates and static figures. Khand ships no tabular-figure feature
   and its 1 is 32% narrower than its 0, so any figure that CHANGES must use
   the digit cells below — never bare Khand. */
:is(.sonapati-board-figure, .is-style-sonapati-board-figure) {
	font-family: var(--wp--preset--font-family--board);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	margin-block: 0;
}

/* Figures that change on the client use Mukta, which does ship tnum. */
:is(.sonapati-figure, .is-style-sonapati-figure) {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	line-height: 1.1;
	margin-block: 0;
}

/* 4. Rate board -------------------------------------------------------- */

/* A shopfront board spans the frontage, so this is a full-bleed bar rather than
   a card: no radius, and a hairline underneath to separate it from the page.
   Its inner content sits on the wide measure. */
:is(.sonapati-rate-board, .is-style-sonapati-rate-board) {
	position: relative;
	border-bottom: 1px solid var(--wp--custom--ink--600);
	background-color: var(--wp--custom--ink--800);
	color: var(--wp--preset--color--paper);
}

/* Gold leaf is microns thick, so ours is 2px. Never an area fill. */
:is(.sonapati-rate-board, .is-style-sonapati-rate-board)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--wp--preset--gradient--gold-leaf);
}

/* Arrangement comes from the block's own flex layout (which already centres
   items, wraps and applies blockGap) so it is not restated here. This rule
   owns padding only — two sources of flex would fight over the same axis. */
.sonapati-rate-board__inner {
	padding: 1.15rem 1.35rem;
}

.sonapati-live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-soft);
}

/* The board is always oxblood, so its semantic colours are the dark-ground
   steps — not the theme colour tokens, which flip with the surface. */
.sonapati-live::before {
	content: "";
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background-color: var(--wp--custom--on-dark--gain);
	animation: sonapati-pulse 2s var(--wp--custom--ease) infinite;
}

@keyframes sonapati-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.45;
		transform: scale(0.8);
	}
}

.sonapati-quote {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.sonapati-quote__metal {
	align-self: center;
	margin-block: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-soft);
}

.sonapati-quote__fig {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--board);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--paper);
}

.sonapati-quote__unit {
	margin-block: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--custom--silver--300);
}

/* Digit cells. A dynamic rate block should emit one .sonapati-d per character
   so the row cannot reflow when a digit changes; separators get a narrow cell.
   Khand's widest digit is 0.475em, so 0.52em holds every glyph. */
.sonapati-d {
	display: inline-block;
	width: var(--wp--custom--digit-cell);
	text-align: center;
}

.sonapati-d--sep {
	width: 0.3em;
}

/* Gain and loss are never colour-alone: the pattern supplies a ▲ or ▼ glyph
   and a signed value alongside the colour. */
.sonapati-delta {
	margin-block: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sonapati-delta.is-up {
	color: var(--wp--custom--on-dark--gain);
}

.sonapati-delta.is-down {
	color: var(--wp--custom--on-dark--loss);
}

/* A rate with no timestamp is a lie.
   Scoped through the parent because core's `.is-layout-flex > :is(*, div)
   { margin: 0 }` outranks a lone class selector and would zero this out. */
.sonapati-rate-board__inner > .sonapati-rate-board__stamp {
	margin-inline-start: auto;
	text-align: end;
	display: grid;
	gap: 0.15rem;
}

.sonapati-rate-board__stamp p {
	margin-block: 0;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--custom--silver--300);
}

@media (max-width: 781px) {
	.sonapati-rate-board__inner > .sonapati-rate-board__stamp {
		margin-inline-start: 0;
		text-align: start;
	}
}

/* 5. Assay-tag cards --------------------------------------------------- */

/* A jeweller's price tag: one clipped corner. Used on plan and price cards
   and nowhere else — a second flourish would make both invisible. */
:is(.sonapati-tag-card, .is-style-sonapati-tag-card) {
	position: relative;
	clip-path: polygon(
		0 0,
		calc(100% - var(--wp--custom--notch)) 0,
		100% var(--wp--custom--notch),
		100% 100%,
		0 100%
	);
}

/* 6. Gold-leaf rules --------------------------------------------------- */

:is(.sonapati-gold-leaf, .is-style-sonapati-gold-leaf) {
	height: 2px;
	border: 0;
	opacity: 1;
	background: var(--wp--preset--gradient--gold-leaf);
}

:is(.sonapati-gold-leaf, .is-style-sonapati-gold-leaf).wp-block-separator {
	max-width: none;
}

/* 7. Trust strip ------------------------------------------------------- */

/* Partner marks read as evidence, not decoration: muted until hovered. */
.sonapati-trust-strip img {
	max-height: 28px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--wp--custom--duration--fast) var(--wp--custom--ease),
		opacity var(--wp--custom--duration--fast) var(--wp--custom--ease);
}

.sonapati-trust-strip img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* 8. FAQ details ------------------------------------------------------- */

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

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	list-style: none;
}

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

.wp-block-details summary::after {
	content: "";
	float: inline-end;
	width: 0.6em;
	height: 0.6em;
	margin-block-start: 0.35em;
	border-right: 2px solid var(--wp--preset--color--gold-text);
	border-bottom: 2px solid var(--wp--preset--color--gold-text);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--duration--mid) var(--wp--custom--ease);
}

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

/* 9. Buttons on dark grounds ------------------------------------------- */

/* White on gold is 3.53:1 and fails. The primary button therefore carries
   oxblood text at 5.37:1, which theme.json sets. This variation is the
   outline button for oxblood grounds. */
.wp-block-button.is-style-sonapati-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--gold-text);
	border: 1px solid var(--wp--preset--color--gold);
}

.wp-block-button.is-style-sonapati-outline .wp-block-button__link:hover,
.wp-block-button.is-style-sonapati-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--gold-tint);
	color: var(--wp--preset--color--gold-text);
}

.sonapati-on-dark .wp-block-button.is-style-sonapati-outline .wp-block-button__link,
.has-oxblood-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link,
.has-oxblood-deep-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link {
	color: var(--wp--preset--color--gold-soft);
	border-color: var(--wp--custom--gold--400);
}

.sonapati-on-dark .wp-block-button.is-style-sonapati-outline .wp-block-button__link:hover,
.sonapati-on-dark .wp-block-button.is-style-sonapati-outline .wp-block-button__link:focus,
.has-oxblood-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link:hover,
.has-oxblood-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link:focus,
.has-oxblood-deep-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link:hover,
.has-oxblood-deep-background-color .wp-block-button.is-style-sonapati-outline .wp-block-button__link:focus {
	background-color: var(--wp--custom--gold--tint-dark);
	color: var(--wp--preset--color--gold-soft);
}

/* 10. Utilities -------------------------------------------------------- */

/* Marks a light-on-dark region so nested components pick the dark-ground
   steps for accents, focus rings and eyebrows. */
.sonapati-on-dark {
	color: var(--wp--preset--color--paper);
}

.sonapati-on-dark a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--gold-soft);
}

/* Wide content must scroll inside its own container; the page body never
   scrolls sideways. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	min-width: 32rem;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--hairline);
}

.wp-block-table th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	background-color: var(--wp--preset--color--paper-alt);
}

/* Numbers that line up in columns get tabular figures. */
.sonapati-tabular,
.wp-block-table td {
	font-variant-numeric: tabular-nums;
}

/* A narrowed reading measure must stay flush with the start edge, or it reads as
   an indent against the full-width heading above it. Core's constrained-layout
   rule sets `margin-left/right: auto !important` on every child, so !important
   here is not a shortcut — it is the only weight that can answer it. */
.sonapati-measure {
	max-width: var(--wp--custom--measure);
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Required disclosures stay legible. Low-contrast fine print is a regulatory
   risk, not a design choice. */
.sonapati-disclosure {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--silver--300);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	border-radius: var(--wp--custom--radius--sm);
	box-shadow: 0 0 2px 2px rgba(26, 20, 22, 0.6);
	clip-path: none;
	color: var(--wp--preset--color--gold-text);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* 11. Reduced motion --------------------------------------------------- */

@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;
	}
}