/*
Theme Name: Jansankalp
Description: Block theme for jansankalp.org. Colours, fonts and spacing live in theme.json; this file only holds what theme.json cannot express.
Author: Jansankalp Foundation
Version: 1.2.8
Requires at least: 6.6
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: jansankalp
*/

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

img {
	height: auto;
}

/* Long web addresses in text wrap instead of pushing the page sideways on phones. */
body {
	overflow-wrap: break-word;
}

/* Header, main and footer sit flush; each sets its own padding. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Header */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.site-topbar {
	font-size: var(--wp--preset--font-size--small);
}

.site-topbar a {
	color: inherit;
	text-decoration: none;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	padding: 0.35em 0;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* Desktop: a bar under the section you are in, which also previews under the item you point at. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:not(.jsk-nav-cta) > .wp-block-navigation-item__content {
	position: relative;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:not(.jsk-nav-cta) > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset: auto 0 -0.2em;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease-out;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > li:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Desktop dropdowns */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(75 47 38 / 14%);
	padding: 0.4rem !important;
	min-width: 230px !important;
	margin-top: 0.5rem;
}

/* An invisible strip over the gap, so the pointer can travel from the item into its dropdown. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset: -0.6rem 0 100%;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5em 0.8em !important;
	border-radius: 6px;
	font-weight: 400;
}

.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--tint);
}

/* Contact is the header's one call to action. */
.site-header .wp-block-navigation .jsk-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	color: var(--wp--preset--color--base) !important;
	padding: 0.45em 1.15em;
	transition: background-color 0.18s ease-out;
}

.site-header .wp-block-navigation .jsk-nav-cta > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .jsk-nav-cta.current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
}

/* WordPress switches to the full menu at 600px, but it only fits on one line from about 800px,
   so the phone menu stays up to 860px. */
@media (min-width: 600px) and (max-width: 860px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phone menu: one section per row, divided by hairlines, with its pages in two columns */
.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation .is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left;
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__container {
	font-size: 1.15rem;
	gap: 0;
	width: 100%;
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__container > li {
	width: 100%;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__container > li.jsk-nav-cta {
	border-bottom: 0;
	padding-top: 1.2rem;
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
	width: 100% !important;
	font-size: 1rem;
	font-weight: 400;
	padding: 0.3rem 0 0 !important;
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
	padding: 0.4em 0 !important;
}

.site-header .wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation-item__content,
	.site-header .wp-block-navigation-item__content::after {
		transition: none !important;
	}
}

/* Page title band */

.page-hero .wp-block-post-title,
.page-hero .wp-block-query-title {
	margin: 0;
}

/* Content marked jsk-left-axis shares the header's left edge: text keeps its readable width but
   starts where wide sections (columns, cards, post grids) start, instead of sitting centred
   between them. Full-width colour bands inside it still centre their own content. */
.jsk-left-axis.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)),
.wp-block-cover.jsk-left-axis > .wp-block-cover__inner-container > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
	margin-right: auto !important;
}

/* A page that opens with a full-width colour band sits right under the header. */
main:has(> .jsk-left-axis > .alignfull.has-background:first-child) {
	padding-top: 0 !important;
}

/* Headings in running text get more room above than below, so each one reads as part of what follows. */
main .wp-block-post-content :where(h2, h3, h4, h5, h6):not(:first-child) {
	margin-top: 1.8em;
}

main .wp-block-post-content :where(h2, h3, h4, h5, h6) + :where(p, ul, ol) {
	margin-top: 0.6em;
}

/* Cards: the "Card" group style and every post grid */

.wp-block-group.is-style-card,
.wp-block-post-template.is-layout-grid > .wp-block-post {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
}

.wp-block-group.is-style-card {
	padding: var(--wp--preset--spacing--30);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-group.is-style-card > :first-child {
	margin-top: 0;
}

.wp-block-group.is-style-card .wp-block-buttons {
	margin-top: auto;
}

.wp-block-post-template.is-layout-grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-post-template.is-layout-grid > .wp-block-post > :not(.wp-block-post-featured-image) {
	margin-left: var(--wp--preset--spacing--20);
	margin-right: var(--wp--preset--spacing--20);
}

.wp-block-post-template.is-layout-grid .wp-block-post-featured-image {
	margin: 0;
}

/* Posts without a featured image start with text, which needs breathing room. */
.wp-block-post-template.is-layout-grid > .wp-block-post > :first-child:not(.wp-block-post-featured-image) {
	margin-top: var(--wp--preset--spacing--20);
}

.wp-block-post-template.is-layout-grid .wp-block-post-featured-image img {
	border-radius: 0;
}

.wp-block-post-template.is-layout-grid .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.wp-block-post-template.is-layout-grid .wp-block-post-excerpt,
.wp-block-post-template.is-layout-grid .wp-block-post-excerpt__excerpt {
	margin-block: 0;
	color: var(--wp--preset--color--muted);
}

/* The date closes the card, so dates line up across a row whatever the title and excerpt length. */
.wp-block-post-template.is-layout-grid > .wp-block-post > .wp-block-post-date:last-child {
	margin-top: auto;
	padding-top: 0.25rem;
}

/* Page numbers under post grids */

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	padding: 0;
	min-width: 1.5rem;
}

.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* The "Statistic" group style */

.wp-block-group.is-style-stat .jsk-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* Brand-coloured bands keep headings and links readable */

.has-brand-background-color :where(h1, h2, h3, h4, h5, h6),
.has-primary-dark-background-color :where(h1, h2, h3, h4, h5, h6),
.has-brand-background-color a:where(:not(.wp-element-button)),
.has-primary-dark-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* Share links on articles */

.jsk-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.jsk-share a {
	display: inline-block;
	padding: 0.3em 0.9em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	text-decoration: none;
}

.jsk-share a:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Footer */

.site-footer .footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .footer-links li {
	margin: 0.35em 0;
}

.site-footer .footer-links a {
	text-decoration: none;
}

.site-footer .footer-links a:hover {
	text-decoration: underline;
}

.site-footer .site-legal a {
	color: inherit;
}

/* Newsletter form (Mailchimp) */

.jsk-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.jsk-newsletter input[type="email"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.65em 1em;
	font: inherit;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.jsk-newsletter button {
	cursor: pointer;
	border: 0;
}

/* Search boxes match the newsletter field */

.wp-block-search__input {
	padding: 0.65em 1.1em;
	font: inherit;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__button {
	margin-left: 0;
}

/* Documentation index (weDocs): as wide as other grids, in the theme's colours */

.wp-block-post-content > .wedocs-shortcode-wrap {
	max-width: var(--wp--style--global--wide-size);
}

.wedocs-shortcode-wrap h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--primary-dark);
}

.wedocs-shortcode-wrap h3 a:hover {
	color: var(--wp--preset--color--primary);
}

/* Same selector chain as the plugin, plus the element, so the theme wins. */
.wedocs-shortcode-wrap ul.wedocs-docs-list li.wedocs-docs-single .wedocs-doc-link a.wedocs-view-details-btn {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.wedocs-shortcode-wrap ul.wedocs-docs-list li.wedocs-docs-single .wedocs-doc-link a.wedocs-view-details-btn:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

@media (max-width: 781px) {
	/* The plugin's half-width search box is too small to type in on a phone. */
	.wedocs-shortcode-wrap .wedocs-search-form .wedocs-search-input {
		width: 100%;
	}

	/* On a phone the doc itself comes first; the search and contents tree follow it. */
	.jsk-docs-layout > .wp-block-column:first-child {
		order: 2;
	}
}

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

/* Tables: striped rows in the theme's sand colour */

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--tint);
}

.wp-block-table :where(th) {
	font-family: var(--wp--preset--font-family--heading);
	text-align: left;
	vertical-align: bottom;
}

.wp-block-table :where(td) {
	vertical-align: top;
}

@media (max-width: 781px) {
	/* A wide table scrolls sideways inside its own box. Columns keep a readable width and the
	   first column stays in view, so each row can still be told apart while scrolling. */
	.wp-block-table table {
		width: max-content;
		max-width: none;
		font-size: var(--wp--preset--font-size--small);
	}

	.wp-block-table :where(th, td) {
		min-width: 6rem;
		max-width: 18rem;
	}

	.wp-block-table :where(th, td):first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--wp--preset--color--base);
		font-weight: 600;
	}

	.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td:first-child {
		background: var(--wp--preset--color--tint);
	}

	/* Tables with a heading row (their cells carry data-label, see functions.php) become one
	   card per row instead: the first cell is the card's title, every other value sits under
	   its column heading. */
	.wp-block-table table:has(td[data-label]) {
		width: 100%;
		font-size: inherit;
	}

	.wp-block-table table:has(td[data-label]) :is(tbody, tr, td) {
		display: block;
	}

	.wp-block-table table:has(td[data-label]) thead {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.wp-block-table table:has(td[data-label]) tr {
		padding: 0.9rem 1rem;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.wp-block-table table:has(td[data-label]) td {
		position: static;
		min-width: 0;
		max-width: none;
		padding: 0.2rem 0;
		border: 0;
		background: none;
		font-weight: 400;
	}

	.wp-block-table table:has(td[data-label]) td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--wp--preset--color--muted);
	}

	.wp-block-table table:has(td[data-label]) td:first-child {
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		color: var(--wp--preset--color--primary-dark);
	}

	.wp-block-table table:has(td[data-label]) td:first-child::before,
	.wp-block-table table:has(td[data-label]) td:empty {
		display: none;
	}
}

/* Gallery and video grids */

.jsk-video-grid .wp-block-embed {
	margin: 0;
}

/* Social icons follow the surrounding text colour instead of each network's brand colour */

.site-topbar .wp-social-link,
.site-footer .wp-social-link {
	color: inherit;
}

.site-topbar p {
	margin: 0;
}

@media (max-width: 781px) {
	.site-topbar {
		display: none;
	}
}