/* Accessibility additions shared by every page (GIGW 3.0 / WCAG 2.1): pause and play buttons for what moves by
   itself, the text size, the mark on links to non-government websites, the language selector's line height, the date
   of the last update in the footer, and tables that keep screen-reader notes inside their scrolling box. */

/* Pause and play (js/motion.js; the "pause" macro): the pause icon while it moves, the play icon while paused. */
.k-pp { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid currentColor;
  border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.k-pp svg { width: 14px; height: 14px; }
button[data-pause] svg { fill: currentColor; }
button[data-pause] .k-pp-r, button[data-pause].is-paused .k-pp-p { display: none; }
button[data-pause].is-paused .k-pp-r { display: block; }
.k-pp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Nothing moves by itself for visitors who ask for reduced motion, so its buttons are not needed. */
@media (prefers-reduced-motion: reduce) { .k-pp-motion { display: none !important; } }

/* Live-updates ticker. */
.k-adv .k-adv-pp { color: #FECF0A; border-color: rgba(254, 207, 10, .6); }
.k-marquee.k-stopped { animation-play-state: paused; }

/* Homepage photographs: the button beside the dots under the photo in front (the dots keep their place). */
.v2-hero .d2-car .d2-ctl { position: absolute; left: 50%; bottom: 49px; transform: translateX(-50%); z-index: 3; display: flex;
  align-items: center; gap: 12px; }
.v2-hero .d2-car .d2-ctl .k-dots { position: static; transform: none; }
.d2-car .d2-pp { width: 26px; height: 26px; color: #fff; background: rgba(31, 21, 18, .45); border-color: rgba(255, 255, 255, .85); }
.d2-car .d2-pp svg { width: 11px; height: 11px; }

/* Sacred-sites cards (phones and tablets, where they move): beside the arrows. */
.v8-pp svg { width: 16px; height: 16px; }

/* Links to non-government websites (js/ext-links.js): a small "opens elsewhere" mark after the words. */
a.k-nongov-t::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .3em; vertical-align: .02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Text size (A−, A, A+): --ts on <html> (static/js/00-text-size.js and the buttons). Inner pages scale their text
   through --m (their sizes are in rem). The homepage's sizes are fixed pixels, so its content is zoomed; the footer is
   zoomed on every page. The header and menus keep their size. */
:root { --m: var(--ts, 1); }
#main:not(:has(> .kumbh-inner)), #footer { zoom: var(--ts, 1); }

/* Language selector: a select clips its text to its line, and the Devanagari font needs 24 px for a 14 px line (the
   vowel signs above the letters of हिन्दी and मराठी reach its top), so the line is 26 px. The box is centred in the
   bar, so the text stays where it was. A little more room before the arrow. */
.n10-util .n10-sel select#langSel { line-height: 26px !important; padding: 0 22px 0 0 !important; }

/* Footer: the date of the last update. */
.n10-updated { margin-top: 12px; font-size: 15px; font-weight: 500; color: #FBF2E6; line-height: 1.4; }

/* A table that scrolls in its box holds the screen-reader notes of its links (absolutely placed), so they do not
   widen the page on phones. */
.kumbh-inner .table-wrap { position: relative; }