/* =========================================================================
 * Responsive layout
 * Loaded after style.css. Breakpoints: 600px (phones), 640px (forms),
 * 781px (core columns stack), 1024px (desktop navigation).
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Top bar and accessibility toolbar
 * ---------------------------------------------------------------------- */

/* Phones: one compact row. Text links stay reachable and show on focus. */
@media (max-width: 600px) {
	.sc-topbar > .wp-block-group {
		flex-wrap: nowrap !important;
	}

	.sc-a11y__link:not(:focus) {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.sc-a11y__controls {
		border-left: 0;
		padding-left: 0;
	}

	.sc-topbar .sc-social {
		display: none;
	}

	/* Both language names stay whole; the text-size buttons give way first. */
	.sc-topbar .sc-lang {
		flex-shrink: 0;
		flex-wrap: nowrap;
	}

	.sc-topbar .sc-lang a {
		white-space: nowrap;
	}

	.sc-a11y {
		flex-wrap: nowrap;
		min-width: 0;
	}

	.sc-brand {
		gap: 0.625rem;
	}

	.sc-brand .wp-block-site-logo,
	.sc-brand .wp-block-site-logo img {
		flex-shrink: 0;
		width: 44px !important;
	}

	/* Keep the brand to two lines beside the menu button; a longer name or
	 * title ends in "…" instead of pushing the button off the screen. */
	.sc-brand > .wp-block-group {
		min-width: 0;
	}

	.sc-brand .wp-block-site-title {
		font-size: 1.125rem !important;
		white-space: nowrap;
	}

	.sc-brand :is(.wp-block-site-title, .wp-block-site-tagline) {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sc-brand .wp-block-site-title a {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sc-brand .wp-block-site-tagline {
		font-size: 0.75rem !important;
		letter-spacing: 0.06em;
		white-space: nowrap;
	}

	/* Finger-sized tap targets. */
	.sc-a11y button {
		height: 40px;
		min-width: 40px;
	}

	.sc-topbar .sc-lang a {
		align-items: center;
		display: inline-flex;
		min-height: 40px;
		padding-inline: 0.5rem;
	}
}

/* Very narrow phones (or large text): the menu button shows only its icon;
 * the word stays as its accessible name. */
@media (max-width: 359.98px) {
	.sc-a11y button {
		min-width: 30px;
		padding: 0;
	}

	.sc-a11y__controls {
		margin-right: 0.5rem;
	}

	.sc-topbar .sc-lang a {
		padding-inline: 0.375rem;
	}

	.js .sc-nav__toggle {
		padding-inline: 0.75rem;
	}

	.js .sc-nav__label {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

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

@media (min-width: 1024px) {
	header.wp-block-template-part {
		position: sticky;
		top: calc(var(--sc-admin-bar) - var(--sc-topbar-height) - 3px);
	}
}

/* -------------------------------------------------------------------------
 * Main navigation: desktop menu with dropdowns
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.sc-menu--primary {
		align-items: center;
		display: flex;
		gap: 0.5rem;
	}

	.sc-menu--primary > li {
		align-items: center;
		display: flex;
		position: relative;
	}

	.sc-menu--primary > li > a {
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0.005em;
		padding: 0.75rem 0.5rem;
		position: relative;
		transition: color 0.2s;
	}

	.sc-menu--primary > li.menu-item-has-children > a {
		padding-right: 0;
	}

	.sc-menu--primary > li > a::after {
		background: var(--wp--preset--color--accent);
		bottom: 0.35rem;
		content: "";
		height: 1px;
		left: 0.5rem;
		position: absolute;
		right: 0.5rem;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s var(--sc-ease);
	}

	.sc-menu--primary > li.menu-item-has-children > a::after {
		right: 0;
	}

	.sc-menu--primary > li > a:hover,
	.sc-menu--primary > li.current-menu-item > a,
	.sc-menu--primary > li.current-menu-ancestor > a,
	.sc-menu--primary > li.current-menu-parent > a {
		color: var(--wp--preset--color--primary);
	}

	.sc-menu--primary > li > a:hover::after,
	.sc-menu--primary > li.current-menu-item > a::after,
	.sc-menu--primary > li.current-menu-ancestor > a::after,
	.sc-menu--primary > li.current-menu-parent > a::after {
		transform: scaleX(1);
	}

	.sc-menu--primary .sub-menu {
		background: var(--wp--preset--color--white);
		border: var(--sc-hairline);
		border-radius: var(--sc-radius);
		border-top: 2px solid var(--wp--preset--color--accent);
		box-shadow: var(--sc-shadow);
		left: -0.5rem;
		min-width: 260px;
		opacity: 0;
		padding: 0.5rem 0;
		position: absolute;
		top: calc(100% + 0.25rem);
		transform: translateY(8px);
		transition: opacity 0.2s var(--sc-ease), transform 0.2s var(--sc-ease), visibility 0.2s;
		visibility: hidden;
		z-index: 60;
	}

	/* Dropdowns near the right edge open leftwards so they stay on screen. */
	.sc-menu--primary > li:nth-last-child(-n + 3) .sub-menu {
		left: auto;
		right: -0.5rem;
	}

	.sc-menu--primary li:hover > .sub-menu,
	.sc-menu--primary li:focus-within > .sub-menu,
	.sc-menu--primary li.is-open > .sub-menu {
		opacity: 1;
		transform: none;
		visibility: visible;
	}

	.sc-menu--primary .sub-menu a {
		display: block;
		font-size: 0.9375rem;
		padding: 0.6rem 1.25rem;
		transition: background-color 0.2s, color 0.2s, padding 0.2s;
	}

	/* Devanagari reads small at Latin sizes; there is room on wide screens. */
	.lang-hi .sc-menu--primary > li > a,
	.lang-hi .sc-menu--primary .sub-menu a {
		font-size: 1rem;
	}

	.sc-menu--primary .sub-menu a:hover,
	.sc-menu--primary .sub-menu .current-menu-item > a {
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--accent-dark);
		padding-left: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Main navigation: mobile toggle and panel
 * ---------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	.js .sc-nav__toggle {
		align-items: center;
		background: transparent;
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 4px;
		color: var(--wp--preset--color--primary);
		cursor: pointer;
		display: inline-flex;
		font: inherit;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
		gap: 0.625rem;
		padding: 0.5rem 0.875rem;
	}

	/* The button never gives up width to the brand: the brand ellipsises. */
	.sc-masthead__inner > .sc-nav {
		flex-shrink: 0;
	}

	.js .sc-nav__toggle {
		flex-shrink: 0;
		line-height: 1.2;
		min-height: 44px;
		white-space: nowrap;
	}

	.sc-nav__bars {
		flex-shrink: 0;
	}

	/* The page behind an open menu stays put. */
	body.sc-menu-open {
		overflow: hidden;
	}

	.sc-nav.is-open .sc-nav__toggle {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
	}

	.sc-nav__bars,
	.sc-nav__bars::before,
	.sc-nav__bars::after,
	.sc-nav__bars span {
		background: currentColor;
		display: block;
		height: 1.5px;
		position: relative;
		transition: transform 0.25s var(--sc-ease), opacity 0.2s;
		width: 18px;
	}

	.sc-nav__bars {
		background: transparent;
		height: 12px;
	}

	.sc-nav__bars::before,
	.sc-nav__bars::after {
		content: "";
		position: absolute;
	}

	.sc-nav__bars::before {
		top: 0;
	}

	.sc-nav__bars span {
		top: 5px;
	}

	.sc-nav__bars::after {
		top: 10px;
	}

	.sc-nav.is-open .sc-nav__bars::before {
		transform: translateY(5px) rotate(45deg);
	}

	.sc-nav.is-open .sc-nav__bars span {
		opacity: 0;
	}

	.sc-nav.is-open .sc-nav__bars::after {
		transform: translateY(-5px) rotate(-45deg);
	}

	.js .sc-nav__panel {
		background: var(--wp--preset--color--base);
		border-top: var(--sc-hairline);
		box-shadow: 0 24px 32px -16px rgba(110, 53, 0, 0.2);
		display: none;
		left: 0;
		max-height: calc(100vh - 140px);
		max-height: var(--sc-nav-max, calc(100dvh - 140px));
		overscroll-behavior: contain;
		overflow-y: auto;
		padding: 0.5rem var(--wp--preset--spacing--40) 1.5rem;
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 60;
	}

	.js .sc-nav.is-open .sc-nav__panel {
		animation: sc-drop 0.25s var(--sc-ease);
		display: block;
	}

	html:not(.js) .sc-masthead__inner {
		flex-wrap: wrap !important;
	}

	.sc-menu--primary > li {
		border-bottom: var(--sc-hairline);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sc-menu--primary a {
		display: block;
		flex: 1;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.0625rem;
		padding: 0.875rem 0;
	}

	.sc-menu--primary .sc-submenu-toggle {
		height: 48px;
		width: 44px;
	}

	.sc-menu--primary .sub-menu {
		border-left: 1px solid var(--wp--preset--color--accent);
		display: none;
		flex-basis: 100%;
		margin: 0 0 0.875rem 0.25rem;
		padding-left: 1rem;
	}

	.sc-menu--primary .sub-menu a {
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.9375rem;
		padding: 0.5rem 0;
	}

	.sc-menu--primary li.is-open > .sub-menu,
	html:not(.js) .sc-menu--primary .sub-menu {
		display: block;
	}

	.sc-menu--primary .current-menu-item > a {
		color: var(--wp--preset--color--accent-dark);
	}
}

@keyframes sc-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* -------------------------------------------------------------------------
 * Values strip
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.sc-value + .sc-value {
		border-left: 0;
		border-top: var(--sc-hairline);
		padding-top: var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

@media (min-width: 640px) {
	.sc-form__row,
	.sc-form__choices {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Home: split hero and key figures
 * ---------------------------------------------------------------------- */

/* Tablets and phones: the photo sits higher and the saffron rises from the
 * bottom, so the text keeps its full width. */
@media (max-width: 1023.98px) {
	.sc-hero--split {
		align-items: flex-end;
		min-height: min(88vh, 720px) !important;
	}

	.sc-hero--split:has(.wp-block-cover__image-background) .wp-block-cover__background {
		background: linear-gradient(0deg, rgba(110, 53, 0, 0.97) 0%, rgba(122, 59, 0, 0.9) 42%, rgba(122, 59, 0, 0.35) 72%, rgba(110, 53, 0, 0.1) 100%) !important;
	}

	.sc-hero--split .wp-block-cover__image-background {
		object-position: 30% 20% !important;
	}

	.sc-hero--split .sc-hero__content {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-stat:nth-child(3) {
		border-left: 0;
	}

	.sc-stat:nth-child(n + 3) {
		border-top: var(--sc-hairline);
	}
}

@media (max-width: 600px) {
	.sc-stat {
		padding: 1.5rem 0.75rem;
	}
}

/* Editors can add or remove figures. Desktop: fewer than four share the row,
 * more wrap in rows of four. Smaller screens: rows of two, an odd last one
 * across the full width. */
@media (min-width: 1024px) {
	.sc-stats:has(> .sc-stat:last-child:nth-child(1)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-stats:has(> .sc-stat:last-child:nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-stats:has(> .sc-stat:last-child:nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sc-stat:nth-child(4n + 1) {
		border-left: 0;
	}

	.sc-stat:nth-child(n + 5) {
		border-top: var(--sc-hairline);
	}
}

@media (max-width: 1023.98px) {
	.sc-stat:nth-child(odd) {
		border-left: 0;
	}

	.sc-stat:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* -------------------------------------------------------------------------
 * Home: get-involved tiles
 * ---------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	.sc-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-tile {
		min-height: 0;
	}
}

/* Editors can add or remove tiles: one or two share the row, four make two
 * rows of two, otherwise rows of three. */
@media (min-width: 1024px) {
	.sc-tiles:has(> .sc-tile:last-child:nth-child(1)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-tiles:has(> .sc-tile:last-child:nth-child(2)),
	.sc-tiles:has(> .sc-tile:last-child:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Home: framed portrait
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.sc-portrait--frame {
		margin-left: 14px;
		position: relative;
		top: 0;
	}

	.sc-portrait--frame::before {
		transform: translate(-14px, 14px);
	}
}

/* -------------------------------------------------------------------------
 * Home: split panel
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.sc-split {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--60);
	}

	.sc-split__media {
		aspect-ratio: 4 / 3 !important;
	}

	.sc-split__body .sc-newsletter-heading,
	.sc-split__body .sc-newsletter-heading + p,
	.sc-split__body .sc-newsletter {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------------------------
 * Home: news list
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.sc-news__item {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Home: contact strip
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.sc-contact-strip__item + .sc-contact-strip__item {
		border-left: 0;
		border-top: var(--sc-hairline);
		padding-top: var(--wp--preset--spacing--40);
	}
}


/* -------------------------------------------------------------------------
 * Timeline
 * ---------------------------------------------------------------------- */

/* Tablets and phones: photo above the text; no hover, so its description always shows. */
@media (max-width: 700px) {
	.sc-timeline {
		--sc-tl-rail: 0.5rem;
		--sc-tl-indent: 1.75rem;
	}

	.sc-timeline > .wp-block-group::after {
		display: none;
	}

	.sc-timeline > .sc-timeline__item {
		grid-template-columns: minmax(0, 1fr);
		padding: 0.75rem;
		row-gap: 1rem;
	}

	.sc-timeline > .sc-timeline__item::before {
		top: 1.5rem;
	}

	.sc-timeline__text {
		padding: 0 0.5rem 0.5rem;
	}

	.sc-timeline__photo img {
		aspect-ratio: 16 / 9;
	}

	.sc-timeline__photo figcaption {
		opacity: 1;
	}
}

/* Speech page: the "About this speech" card moves above the text. */
@media (max-width: 1023.98px) {
	.sc-speech-page {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-speech-page__main > .sc-share {
		display: flex;
	}

	.sc-speech-page__aside {
		order: -1;
		position: static;
	}

	.sc-speech-page__aside .sc-share {
		display: none;
	}
}

@media (max-width: 600px) {
	.sc-speech-text {
		font-size: 1.0625rem;
		line-height: 1.75;
	}

	.sc-speech-details {
		padding: 1.25rem;
	}

	.sc-speech-photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Content safety net (see the matching section in style.css)
 * ---------------------------------------------------------------------- */

/* Phones: a photo floated left or right in the text sits on its own line. */
@media (max-width: 600px) {
	:where(.wp-block-post-content, .entry-content) :where(.alignleft, .alignright):where(img, figure, .wp-caption) {
		display: block;
		float: none;
		margin-inline: auto;
	}
}

/* Videos page numbers: one row on phones; Previous/Next shrink to arrows
 * (the words stay for screen readers). */
@media (max-width: 600px) {
	.sc-video-grid__pages ul {
		gap: 0.375rem;
	}

	.sc-video-grid__pages li > .page-numbers {
		height: 2.25rem;
		min-width: 2.25rem;
		padding: 0 0.375rem;
	}

	.sc-video-grid__pages li > .prev,
	.sc-video-grid__pages li > .next {
		font-size: 0;
		gap: 0;
		padding: 0;
		width: 2.25rem;
	}

	.sc-video-grid__pages .prev::before,
	.sc-video-grid__pages .next::after {
		font-size: 1rem;
	}
}