/*
 * omnamahshivay.in — text-first reading design
 *
 * Rules sit ABOVE elements, never below. That is not a stylistic whim: in
 * Devanagari the shirorekha is the headline the letters hang from, so a rule
 * over a block reads as structure to this audience in a way an underline does not.
 *
 * Saffron and gold are used in small quantities against quiet space.
 * Typography does the work.
 */

/* ---------------------------------------------------------------- fonts  */
/* Split by unicode-range so a Gujarati reader never downloads the
   Devanagari face, and vice versa. ~123 KB for a Devanagari reader. */

@font-face {
	font-family: 'Tiro Devanagari Hindi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tiro-dev-devanagari-normal-400.woff2') format('woff2');
	unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
	font-family: 'Tiro Devanagari Hindi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tiro-dev-latin-normal-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Tiro Devanagari Hindi';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tiro-dev-latin-ext-normal-400.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Tiro Devanagari Hindi';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/tiro-dev-latin-italic-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Gujarati companion. Tiro has no Gujarati cut, so Noto Serif Gujarati
   carries the same serif, text-weight voice. */
/* One variable file covers the whole weight range -- Google serves byte-identical
   files for 400 and 600, so shipping both was 118 KB of duplicate. */
@font-face {
	font-family: 'Noto Serif Gujarati';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/noto-guj-gujarati-normal-400.woff2') format('woff2-variations'),
	     url('../fonts/noto-guj-gujarati-normal-400.woff2') format('woff2');
	unicode-range: U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}

/* ---------------------------------------------------------------- tokens */

:root {
	--ground:   #FDFBF6; /* sandalwood */
	--surface:  #F7F1E4; /* raised */
	--ink:      #1C1614; /* warm black */
	--ink-soft: #55443C;
	--kesari:   #C25E00; /* primary accent */
	--kumkum:   #7A1F1F; /* headings, verse numbers, dandas */
	--gold:     #B8860B; /* dividers, sparingly */
	--hairline: rgba(28, 22, 20, 0.14);

	/* Reader controls write --step; everything scales off it. */
	--step: 1;
	/* Tuned by measuring Tiro Devanagari on real verses: an average cluster
	   runs ~0.41em, so 15.5em lands at 36-38 characters. Setting it in em
	   means the measure holds when the reader bumps the text size. */
	--measure: 15.5em;
	--lh: 1.9;

	--serif-dev: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
	--serif-guj: 'Noto Serif Gujarati', 'Tiro Devanagari Hindi', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ground:   #17120E;
		--surface:  #201A15;
		--ink:      #F2EAE0;
		--ink-soft: #C3B4A6;
		--kesari:   #F0A04B;
		--kumkum:   #E8A08C; /* deep maroon cannot carry on dark ground; warm clay holds the rubrication role */
		--gold:     #D4AF37;
		--hairline: rgba(242, 234, 224, 0.16);
	}
}

:root[data-theme='dark'] {
	--ground:   #17120E;
	--surface:  #201A15;
	--ink:      #F2EAE0;
	--ink-soft: #C3B4A6;
	--kesari:   #F0A04B;
	--kumkum:   #E8A08C;
	--gold:     #D4AF37;
	--hairline: rgba(242, 234, 224, 0.16);
}

/* ---------------------------------------------------------------- base   */

html {
	background: var(--ground);
	-webkit-text-size-adjust: 100%;
}

body.onsh {
	background: var(--ground);
	color: var(--ink);
	font-family: var(--serif-dev);
	/* Devotional text read at arm's length on a phone wants to be larger than
	   article body copy. This is also the LCP element now that the artwork is
	   gone, so it should be unambiguous at first paint. */
	font-size: calc(clamp(1.15rem, 1.0rem + 1.7vw, 1.35rem) * var(--step));
	line-height: var(--lh);
	margin: 0;
}

body.onsh[data-script='guj'] {
	font-family: var(--serif-guj);
}

.onsh a {
	color: var(--kesari);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.onsh-wrap {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Wider than the verse measure, for navigation and lists. */
.onsh-wrap--wide {
	max-width: 34em;
}

/* ---------------------------------------------------------------- header */

.onsh-header {
	background: var(--kumkum);
	color: #FDFBF6;
	padding-block: 0.5rem;
}

:root[data-theme='dark'] .onsh-header,
body.onsh[data-theme='dark'] .onsh-header {
	background: #2A1512;
}

.onsh-header__inner {
	max-width: 34em;
	margin-inline: auto;
	padding-inline: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.onsh-header a {
	color: inherit;
	text-decoration: none;
}

.onsh-brand {
	font-size: 1.15em;
	letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- title  */

.onsh-title {
	/* Rule above, per manuscript convention. */
	border-top: 2px solid var(--gold);
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	font-size: calc(1.5em);
	font-weight: 400;
	line-height: 1.45;
	color: var(--kumkum);
	text-align: center;
	text-wrap: balance;
}

.onsh-subtitle {
	margin: 0.4rem 0 0;
	text-align: center;
	color: var(--ink-soft);
	font-size: 0.82em;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- verse  */
/* The verse is the atomic unit: one column, no hero, no carousel. */

.onsh-verse {
	border-top: 1px solid var(--hairline);
	margin: 0;
	padding: 1.5rem 0 1.25rem;
}

.onsh-verse:first-of-type {
	border-top: none;
}

.onsh-verse__lines {
	margin: 0;
	/* Poetry: wrapped continuations hang, so the line structure survives
	   a 360px screen without the reader losing the verse boundary. */
	padding-left: 1.1em;
	text-indent: -1.1em;
}

.onsh-verse__line {
	display: block;
}

/* Rubrication: verse numbers and dandas carry the accent, the text stays black. */
.onsh-danda,
.onsh-verse__num {
	color: var(--kumkum);
	font-feature-settings: 'lnum';
}

/* The closing "॥ 12 ॥" cluster never breaks apart. */
.onsh-vnum {
	white-space: nowrap;
}

.onsh-verse__num {
	font-size: 0.9em;
	padding-inline: 0.15em;
}

/* --------------------------------------------------------------- meaning */

.onsh-meaning {
	margin-top: 0.9rem;
	font-size: 0.9em;
}

.onsh-meaning > summary {
	cursor: pointer;
	color: var(--kesari);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0;
	font-size: 0.95em;
}

.onsh-meaning > summary::-webkit-details-marker {
	display: none;
}

.onsh-meaning > summary::before {
	content: '+';
	display: inline-grid;
	place-items: center;
	width: 1.35em;
	height: 1.35em;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.85em;
	line-height: 1;
}

.onsh-meaning[open] > summary::before {
	content: '–';
}

.onsh-meaning__body {
	border-top: 1px solid var(--hairline);
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	color: var(--ink-soft);
	line-height: 1.75;
}

/* ----------------------------------------------------------- ad reserves */
/* Fixed heights, always. A collapsed slot that later fills is the single
   biggest CLS source on ad-funded pages, so the box exists from first paint. */

.onsh-ad {
	border-top: 1px solid var(--hairline);
	margin: 1.75rem 0;
	padding-top: 1rem;
	display: flow-root;
}

.onsh-ad__slot {
	display: block;
	width: 100%;
	margin-inline: auto;
	background: var(--surface);
	contain: strict;
}

.onsh-ad__slot--strip { height: 100px; }
.onsh-ad__slot--rect  { height: 250px; }

.onsh-ad__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.62em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	opacity: 0.65;
	text-align: center;
}

/* ------------------------------------------------------------- controls  */

.onsh-controls {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in srgb, var(--ground) 92%, transparent);
	backdrop-filter: saturate(150%) blur(8px);
	border-top: 1px solid var(--hairline);
}

.onsh-controls__inner {
	max-width: 34em;
	margin-inline: auto;
	padding: 0.4rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Six touch targets will not sit on one 360px row without either clipping
	   the labels or shrinking below a thumb-sized target. Wrapping to two
	   centred rows keeps both. */
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
}

@media (max-width: 27em) {
	.onsh-controls__inner {
		justify-content: center;
	}
}

.onsh-scripts {
	display: inline-flex;
	border: 1px solid var(--hairline);
	border-radius: 2px;
	overflow: hidden;
}

.onsh-scripts button {
	appearance: none;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--hairline);
	color: var(--ink-soft);
	/* Deliberately NOT the reading faces. The "ગુજરાતી" label is always on
	   screen, so inheriting the webfont stack made every Devanagari reader
	   download the 115 KB Gujarati face to render one button. The device's
	   own Gujarati font is perfectly good for a UI control. */
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 0.78em;
	padding: 0.4em 0.6em;
	cursor: pointer;
	min-height: 44px;
	white-space: nowrap;
}

.onsh-scripts button:first-child {
	border-left: 0;
}

.onsh-scripts button[aria-pressed='true'] {
	background: var(--kesari);
	color: #FDFBF6;
}

.onsh-tools {
	display: inline-flex;
	gap: 0.35rem;
}

.onsh-tools button {
	appearance: none;
	background: transparent;
	border: 1px solid var(--hairline);
	border-radius: 2px;
	color: var(--ink-soft);
	font: inherit;
	font-size: 0.75em;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
}

.onsh-tools button[disabled] {
	opacity: 0.35;
	cursor: default;
}

.onsh-tools button:hover,
.onsh-scripts button:hover {
	color: var(--ink);
}

/* Script variants: exactly one visible. Every variant stays in the DOM so
   search engines index the Roman spelling, which is what people actually type. */
.onsh-s { display: none; }
body.onsh[data-script='dev']  .onsh-s--dev  { display: revert; }
body.onsh[data-script='guj']  .onsh-s--guj  { display: revert; }
body.onsh[data-script='iast'] .onsh-s--iast { display: revert; }

body.onsh[data-script='iast'] .onsh-verse__lines { font-style: normal; }

/* --------------------------------------------------------------- share   */

.onsh-share {
	border-top: 1px solid var(--gold);
	margin-top: 2rem;
	padding-top: 1.25rem;
	text-align: center;
}

.onsh-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	min-height: 48px;
	padding: 0 1.4em;
	border-radius: 999px;
	background: #25D366;
	color: #06331A;
	font-size: 0.95em;
	text-decoration: none;
	font-weight: 600;
}

.onsh-share__btn svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.onsh-share__note {
	margin: 0.6rem 0 0;
	font-size: 0.78em;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- nav    */

.onsh-related {
	border-top: 1px solid var(--gold);
	margin-top: 2.5rem;
	padding-top: 1.25rem;
}

.onsh-related h2 {
	margin: 0 0 0.75rem;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--kumkum);
}

.onsh-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.onsh-related li {
	border-top: 1px solid var(--hairline);
}

.onsh-related li:first-child {
	border-top: 0;
}

.onsh-related a {
	display: block;
	padding: 0.75rem 0;
	text-decoration: none;
	color: var(--ink);
	min-height: 44px;
}

.onsh-related a:hover {
	color: var(--kesari);
}

.onsh-footer {
	border-top: 1px solid var(--hairline);
	margin-top: 3rem;
	padding: 1.5rem 0 3rem;
	text-align: center;
	font-size: 0.8em;
	color: var(--ink-soft);
}

/* ------------------------------------------------- parent theme overrides */
/*
 * This design layers on top of Astra rather than replacing it -- Astra's
 * stylesheet also carries the header, logo, breadcrumbs and mobile menu.
 * Astra styles bare <button> elements, so the reader controls need to win
 * explicitly. Scoped to .onsh-controls so nothing else on the site shifts.
 */
.onsh-controls .onsh-scripts button,
.onsh-controls .onsh-tools button {
	border-radius: 2px;
	box-shadow: none;
	text-shadow: none;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
	background-image: none;
}

.onsh-controls .onsh-scripts button {
	border-radius: 0;
	background-color: transparent;
	color: var(--ink-soft);
}

.onsh-controls .onsh-scripts button[aria-pressed='true'] {
	background-color: var(--kesari);
	color: #FDFBF6;
}

.onsh-controls .onsh-tools button {
	background-color: transparent;
	color: var(--ink-soft);
	padding: 0;
}

.onsh-controls .onsh-scripts button:hover,
.onsh-controls .onsh-tools button:hover {
	background-color: transparent;
	color: var(--ink);
}

/* Astra sets margins on <p> inside .entry-content that break the verse rhythm. */
.entry-content .onsh-verse__lines,
.entry-content .onsh-share__note {
	margin-block: 0;
}

.entry-content .onsh-text > .onsh-verse:first-of-type {
	border-top: none;
}

/* Astra constrains .entry-content width; the reading measure must still apply. */
.entry-content .onsh-wrap {
	max-width: var(--measure);
	margin-inline: auto;
}

/* ------------------------------------------------------ reduced motion   */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}