/* ==========================================================
   CSS GUIDE / TABLE OF CONTENTS

   1. Base article styles
   2. Tables and text content
   3. Images, captions, and carousels
   4. Dialogue boxes and dialogue slideshows
   5. Image maps
   6. Navigation and tab system
   7. Embeds and cookie consent messaging
   8. Scroll background and OSRS page chrome
   9. Local / UTC time component
   10. Event calendar component
   11. Game Status issue component
   12. Responsive rules

   Tip for editors:
   - HTML content should stay simple.
   - Styling should live here.
   - Behaviour should live in the script section.
   - Live-site selectors retain .news-article-content compatibility.
   - #newspost-content mirrors those rules for previews and Confluence.
========================================================== */

/* ==========================================================
   OSRS Newspost Style V6.4 Maintenance

   This version consolidates the mobile fixes that were added
   during testing and removes duplicate / competing overrides.
========================================================== */

/* ==========================================================
   1. BASE ARTICLE STYLES
========================================================== */
.news-article-content .header {
	font-family: Cinzel, 'Cinzel', serif;
	font-size: 22px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
}

.osrs-title {
	font-family: Cinzel, 'Cinzel', serif !important;
	font-size: 22px;
	font-weight: bold;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
	text-align: center;
	margin: 1.75em 0;
}

.osrs-subtitle {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-align: center;
	margin: 1.75em 0 0.75em 0;
}

.osrs-subheading {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 15px;
	font-weight: bold;
	color: #000000;
	text-align: left;
	margin: 1.5em 0 0.5em 0;
}

.osrs-notice {
    text-align: center;
    margin: 0 0 1.25em;
    font-size: 14px;
    font-style: italic;
	align-self: center;
	font-weight: 400;
}

.osrs-byline {
	text-align: center;
	font-style: italic;
	margin-top: -1.25em;
	margin-bottom: 1em;
	font-size: 14px;
}

.divider {
	text-align: center;
	padding: 1.5em 0;
	background: url("https://cdn.runescape.com/assets/img/external/oldschool/2017/common/hr.png") no-repeat center;
	background-size: auto 9px;
	height: 9px;
	margin: 0 auto;
}

.poll-box {
	padding: 5px 10px;
	background-color: rgba(245, 220, 108, 0.158);
	box-shadow: 0 0 3px #000;
	text-align: center;
}

.poll-box p {
	margin: 0.5em 0;
}

/* ==========================================================
   2. TABLES AND TEXT CONTENT
========================================================== */
table,
th,
td {
	border: 1px solid black;
	border-collapse: collapse;
}

/* Centre standard tables consistently on the live site, in Confluence,
   and in standalone/local previews. Component tables can still override
   their own width or layout rules below. */
.news-article-content table,
#newspost-content table,
#article-top table {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

th,
td {
	padding: 6px;
}

.news-article-content th,
.news-article-content td,
#newspost-content th,
#newspost-content td,
#article-top th,
#article-top td {
	text-align: center;
	padding: 0.5em;
	border: 1px solid black;
	color: #000000;
}

.news-article-content summary,
#newspost-content summary,
#article-top summary {
	font-family: Cinzel, 'Cinzel', serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
	text-shadow: 1px 1px #C0C0C0;
	cursor: pointer;
	padding: 8px 0;
}

.news-article-content details[open] summary,
#newspost-content details[open] summary,
#article-top details[open] summary {
	margin-bottom: 0.4em;
}

.news-article-content table,
#newspost-content table,
#article-top table {
	margin-bottom: 1em;
}

.news-article-content p,
#newspost-content p,
#article-top p {
	margin: 1.75em 0;
}

.news-article-content ul,
#newspost-content ul,
#article-top ul {
	padding-left: 1.25em !important;
	margin: 1.05em 0 !important;
}

.news-article-content ol,
#newspost-content ol,
#article-top ol {
	padding-left: 1.5em;
	margin: 1.25em 0;
}

.news-article-content li,
#newspost-content li,
#article-top li {
	margin: 0.35em 0;
	padding-left: 0.25em;
}

tr:nth-child(even) {
	background-color: #f0d7b760;
}

.table-container {
	display: flex;
	justify-content: center;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto 20px;
	box-sizing: border-box;
}

.table-container table {
	width: calc(50% - 10px);
}

.table-container.table-container--flex {
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.table-container.table-container--flex table {
	flex: 1 1 180px;
	width: auto;
}

/* ==========================================================
   3. IMAGES, CAPTIONS, AND CAROUSELS
========================================================== */
.news-article-content img,
#article-top img,
#newspost-content img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.auto-image-link,
.asset-link {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.imgContainer {
	float: center;
}

.image-caption,
.image-row-caption {
	font-style: italic;
	text-align: center;
	font-size: 13px;
	margin: 0.5em 0 1.25em 0;
	line-height: 1.4;
	min-height: 1.4em;
	box-sizing: border-box;
}

.image-caption--empty {
	visibility: hidden;
}

.asset-auto-sized {
	max-width: 100%;
	height: auto;
}

.soul-scroll .image-caption {
	display: none !important;
}

.image-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 1.5em 0;
}

.image-row .asset-link {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	text-align: center;
}

.osrs-carousel {
	margin: 16px auto;
	max-width: 650px;
	width: 100%;
	text-align: center;
}

.osrs-carousel__slide {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.osrs-carousel__slide[hidden] {
	display: none !important;
}

.osrs-carousel__slide img {
	max-width: 650px;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Carousel slides can contain images, native video, or consent-aware embeds. */
.osrs-carousel__slide > video,
.osrs-carousel__slide > .osrs-embed {
	display: block;
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	box-sizing: border-box;
}

.osrs-carousel__slide > video {
	height: auto;
	max-height: 650px;
	background: #000;
	object-fit: contain;
}

/* Standalone editor-friendly native video component. */
.osrs-video {
	display: block;
	width: 100%;
	max-width: 650px;
	margin: 1.5em auto;
	text-align: center;
	box-sizing: border-box;
}

.osrs-video > video {
	display: block;
	width: 100%;
	max-width: 650px;
	height: auto;
	max-height: 650px;
	margin: 0 auto;
	background: #000;
	object-fit: contain;
	box-sizing: border-box;
}

/* Editor-friendly data-video slides are generated into native video players. */
.osrs-carousel__slide.osrs-carousel__video,
.osrs-carousel__slide.osrs-carousel-video {
	width: 100%;
}

.osrs-carousel__slide > .osrs-embed {
	margin-top: 0;
	margin-bottom: 0;
}

/* Carousel thumbnails resize automatically as slides are added.
   JavaScript caps the row at 8 thumbnails on desktop and 4 on mobile. */
.osrs-carousel__thumbs {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 12px;
	padding-bottom: 16px;
	box-sizing: border-box;
}

.osrs-carousel__thumbs button {
	flex: 0 0 calc(
		(100% - (var(--carousel-thumb-columns, 5) - 1) * 8px)
		/ var(--carousel-thumb-columns, 5)
	);
	min-width: 0;
	max-width: 120px;
	aspect-ratio: 3 / 2;
	border: 1px solid #000;
	background: transparent;
	padding: 2px;
	cursor: pointer;
	opacity: 0.65;
	box-sizing: border-box;
}

.osrs-carousel__thumbs button.is-active {
	opacity: 1;
	outline: 2px solid #000;
}

.osrs-carousel__thumbs img,
#newspost-content .osrs-carousel__thumbs img,
.news-article-content .osrs-carousel__thumbs img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover;
}

.osrs-carousel__thumb-label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 42px;
	background: rgba(0, 0, 0, .12);
	color: #3b2f1f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Optional rich caption content stored inside an individual slide.
   JavaScript copies this into the visible caption when the slide is active. */
.osrs-carousel__slide > .osrs-carousel__caption,
.osrs-carousel__caption {
	display: none !important;
}

/* ==========================================================
   4. DIALOGUE BOXES AND DIALOGUE SLIDESHOWS
========================================================== */
.dialogue-box {
	position: relative;
	margin: 30px auto;
	width: 519px;
	height: 142px;
	background: url('https://cdn.runescape.com/assets/img/external/oldschool/2026/Newsposts/2026-02-10/chatbox.png') no-repeat center;
	background-size: cover;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	padding: 10px 15px;
	overflow: hidden;
}

.dialogue-box img {
	height: auto;
	object-fit: contain;
	margin-left: 20px;
	margin-right: 2cqw;
	border: none;
	background: none;
}

.dialogue-content {
	flex: 1;
	align-self: stretch;
	position: relative;
	box-sizing: border-box;
	padding: 24px 20px;
	color: #20180C;
	text-align: center;
}

.dialogue-name {
	position: absolute;
	top: 6px;
	left: 0;
	width: 100%;
	color: #7D2B20;
	text-align: center;
	font-family: 'Times New Roman', Times, serif;
	font-size: 14px;
}

.dialogue-text {
	height: 76px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.3;
	color: #1A0D00;
	word-wrap: break-word;
}

.dialogue-continue {
	position: absolute;
	bottom: 6px;
	left: 0;
	width: 100%;
	font-size: 14px;
	font-family: 'Times New Roman', Times, serif;
	line-height: 1.3;
	color: #0004e9;
	text-align: center;
}

.dialogue-slideshow {
	position: relative;
	width: 519px;
	height: 142px;
	margin: 30px auto;
	cursor: pointer;
}

.dialogue-slideshow .dialogue-box {
	margin: 0;
}

.dialogue-slideshow-caption {
	text-align: center;
	margin: 1em 0;
	font-style: italic;
}

.dialogue-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.dialogue-slide.active {
	opacity: 1;
	pointer-events: auto;
}

/* ==========================================================
   5. IMAGE MAPS
========================================================== */
.map-image,
.result-image {
	width: 650px;
	max-width: 100%;
	height: auto;
	display: block;
}

.result-image {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
}

.map-container {
	width: 650px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* ==========================================================
   6. NAVIGATION AND TAB SYSTEM
========================================================== */
/* Legacy #navbar styles removed. The current navigation uses .osrsTabNavigation. */

/* Main tab navigation
   - Add .osrsTabNavigation--sticky when it should follow the page.
   - The script creates the required placeholder automatically.
   - Desktop tab sizing lives here.
   - Mobile tab sizing lives in the 768px media query below.
========================================================== */
.osrsTabNavigation {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	padding: 6px 8px;
	margin: 10px auto 0;
	width: 100%;
	box-sizing: border-box;
	background: #6b5631;
	box-shadow: 0 0 3px 3px #4a381f;
}

.osrsTabNavigation__track {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
	box-sizing: border-box;
}

.osrsTabNavigation__track::-webkit-scrollbar {
	display: none;
}

.osrsTabNavigation__track > .osrsTabButton,
.osrsTabNavigation__track > .osrsTabDropdown {
	flex: 0 0 auto;
}

.osrsTabScrollButton {
	display: none;
	flex: 0 0 auto;
	min-width: 28px;
	height: 30px;
	padding: 0 7px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.osrsTabNavigation.has-tab-overflow .osrsTabScrollButton {
	display: block;
}

.osrsTabScrollButton:hover:not(:disabled),
.osrsTabScrollButton:focus-visible:not(:disabled) {
	color: #a8dc54;
	-webkit-text-fill-color: #a8dc54;
	filter: brightness(1.12);
}

.osrsTabScrollButton:disabled {
	opacity: 0.35;
	cursor: default;
}

.osrsTabNavigation button,
.osrsTabNavigation a {
	outline: none;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s, filter 0.2s, text-decoration-color 0.2s;
}

.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabDropButton,
.osrsTabDropdownMenu button,
.osrsTabDropdownMenu a {
	padding: 7px 9px;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-sizing: border-box;
}

.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabDropButton {
	flex: 0 0 auto;
	min-width: 0;
	max-width: 100%;
	float: none;
	border: 2px solid #382418;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
}

.osrsTabNavigation .osrsTabButton:hover,
.osrsTabNavigation .osrsTabDropButton:hover,
.osrsTabDropdownMenu button:hover,
.osrsTabDropdownMenu a:hover {
	color: #90c040;
	text-decoration: underline;
}

.osrsTabNavigation .osrsTabButton.active,
.osrsTabNavigation .osrsTabDropButton.active {
	background: #646464;
	color: white;
}

/* Keep navbar colours predictable without affecting normal article links. */
.osrsTabNavigation .osrsTabButton,
.osrsTabNavigation .osrsTabButton:link,
.osrsTabNavigation .osrsTabButton:visited,
.osrsTabNavigation .osrsTabDropButton,
.osrsTabNavigation .osrsTabDropdownMenu button,
.osrsTabNavigation .osrsTabDropdownMenu a {
	color: #90c040 !important;
	-webkit-text-fill-color: #90c040 !important;
	text-decoration-color: #90c040 !important;
}

.osrsTabNavigation .osrsTabButton:hover,
.osrsTabNavigation .osrsTabButton:focus-visible,
.osrsTabNavigation .osrsTabDropButton:hover,
.osrsTabNavigation .osrsTabDropButton:focus-visible,
.osrsTabNavigation .osrsTabDropdownMenu button:hover,
.osrsTabNavigation .osrsTabDropdownMenu button:focus-visible,
.osrsTabNavigation .osrsTabDropdownMenu a:hover,
.osrsTabNavigation .osrsTabDropdownMenu a:focus-visible {
	color: #a8dc54 !important;
	-webkit-text-fill-color: #a8dc54 !important;
	text-decoration: underline !important;
	text-decoration-color: #a8dc54 !important;
	filter: brightness(1.12);
}

.osrsTabNavigation .osrsTabButton.active,
.osrsTabNavigation .osrsTabDropButton.active,
.osrsTabNavigation .osrsTabButton.active:hover,
.osrsTabNavigation .osrsTabDropButton.active:hover {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-decoration-color: #ffffff !important;
}

/* Restore a clear hover response for links inside newspost content only. */
#newspost-content a:not(.osrsTabButton):not(.asset-link):hover,
#newspost-content a:not(.osrsTabButton):not(.asset-link):focus-visible,
.news-article-content a:not(.osrsTabButton):not(.asset-link):hover,
.news-article-content a:not(.osrsTabButton):not(.asset-link):focus-visible {
	text-decoration: underline !important;
	filter: brightness(1.18);
}

/* Clickable images stay visually static on hover and focus. */
#newspost-content a.asset-link,
#newspost-content a.asset-link:hover,
#newspost-content a.asset-link:focus-visible,
.news-article-content a.asset-link,
.news-article-content a.asset-link:hover,
.news-article-content a.asset-link:focus-visible {
	filter: none !important;
	transform: none !important;
	transition: none !important;
	text-decoration: none !important;
}

#newspost-content a.asset-link img,
#newspost-content a.asset-link:hover img,
#newspost-content a.asset-link:focus-visible img,
.news-article-content a.asset-link img,
.news-article-content a.asset-link:hover img,
.news-article-content a.asset-link:focus-visible img {
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.osrsTabDropdown {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

.osrsTabDropdown .osrsTabDropButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	height: auto;
	white-space: nowrap;
}

.osrsTabDropdownMenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1002;
	min-width: 100%;
	width: max-content;
	background: #0b0b0b;
	border: 2px solid #2b2418;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.osrsTabDropdown:hover .osrsTabDropdownMenu,
.osrsTabDropdown.is-open .osrsTabDropdownMenu {
	display: block;
}

.osrsTabDropdownMenu button,
.osrsTabDropdownMenu a {
	display: block;
	width: 100%;
	border: 0;
	box-sizing: border-box;
}


.dropdown-arrow {
	display: inline;
	font-size: 10px;
	line-height: 1;
	margin-top: 0;
}

.osrsTabPlaceholder {
	display: none;
	height: 0;
}

/* The script creates this automatically for sticky navigation. */
.osrsTabPlaceholder[data-generated-tab-placeholder="true"] {
	width: 100%;
}

.osrsTabPanel {
	display: none;
	width: 100%;
	padding: 20px 10px;
	border-top: none;
	box-sizing: border-box;
}

/* Leave room for the sticky one-line navigation when jumping to anchors. */
#newspost-content [id],
.news-article-content [id],
#article-top[id] {
	scroll-margin-top: 86px;
}

.osrsTabMenuToggle {
	display: none;
}

/* ==========================================================
   7. EMBEDS AND COOKIE CONSENT MESSAGING
========================================================== */
.osrs-embed {
	margin: 16px auto;
	width: 100%;
	max-width: 1000px;
}

.osrs-embed__frame {
	width: 100%;
	overflow: visible;
	border: 0;
	background: transparent;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.osrs-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: transparent !important;
}

.osrs-embed blockquote {
	margin: 0 auto !important;
}

.osrs-embed blockquote.twitter-tweet,
.osrs-embed blockquote.x-tweet {
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 0 !important;
}

.osrs-embed--video .osrs-embed__frame,
.osrs-embed--video .osrs-embed__consent {
	aspect-ratio: 16 / 9;
}

.osrs-embed--social .osrs-embed__frame {
	padding: 16px;
	min-height: 120px;
	padding-bottom: 0;
	margin-bottom: 0;
}

.osrs-embed__consent {
	align-items: center;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.osrs-embed__consent p {
	margin: 0;
}

.osrs-embed__fallback {
	font-style: italic;
	text-align: center;
	font-size: 13px;
	margin: 0.5em 0 1.25em 0;
	line-height: 1.4;
	min-height: 1.4em;
	box-sizing: border-box;
}

/* ==========================================================
   8. SCROLL BACKGROUND AND OSRS PAGE CHROME
========================================================== */
#scrollBackground {
	background: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif) repeat-y top;
	padding: 50px 75px;
	width: 665px;
	display: block;
}

.osrsTabNavigation--sticky.is-stuck,
#stickyNavigation.is-stuck {
	position: fixed !important;
	top: 0;
	z-index: 1000;
	font-family: Cinzel, 'Cinzel', serif;
}

#backToTopButton {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	padding: 7px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

#backToTopButton:hover {
	color: #90c040;
	text-decoration: underline;
}

.global-time-toggle-wrapper {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1.5em;
}


/* ==========================================================
   9. LOCAL / UTC TIME COMPONENT
========================================================== */
.local-time {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.35;
}

/* Keep local/UTC date and time inline within normal text and lists. */
p .local-time,
li .local-time {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	vertical-align: baseline;
}

.utc-date,
.utc-time,
.utc-datetime {
	white-space: nowrap;
}

.local-date {
	display: block;
	font-weight: bold;
}

.local-time-toggle {
	cursor: default;
}

.local-clock {
	display: block;
}

.timezone-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 18px;
	margin-left: 4px;
	padding: 0 4px;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 3px;
	background: rgba(0, 0, 0, .08);
	color: #3b2f1f;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	text-shadow: none;
	cursor: pointer;
	user-select: none;
	vertical-align: middle;
	box-sizing: border-box;
}

.timezone-toggle:hover {
	background: rgba(0, 0, 0, .15);
}

.timezone-toggle:active {
	background: rgba(0, 0, 0, .22);
}

.timezone-toggle:focus {
	outline: 1px dotted #000;
	outline-offset: 2px;
}

td.local-time,
th.local-time {
	display: table-cell;
	width: auto;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}

td .local-date,
td .local-clock,
th .local-date,
th .local-clock {
	display: block;
}

td.utc-date,
td.utc-time,
td.utc-datetime,
th.utc-date,
th.utc-time,
th.utc-datetime {
	text-align: center;
	white-space: nowrap;
}

/* ==========================================================
   10. EVENT CALENDAR COMPONENT
   - Editors can keep using simple .event blocks.
   - JavaScript upgrades them into a month-style calendar.
   - Add data-type="maintenance", "update", "event", "newspost",
     "poll", or "livestream" for colour coding.
   - Optional fields: .event-title, .event-time-source,
     .event-downtime, .event-description, and .event-end-date.
   - Click a date box to open the full-screen day view.
========================================================== */
.event-calendar {
	max-width: 650px;
	margin: 1.5em auto;
}

.event-calendar.calendar-view {
	display: block;
}

.calendar-help {
	margin: 0.25em auto 0.75em;
	text-align: center;
	font-size: 12px;
	font-style: italic;
	color: #3b2f1f;
}

.calendar-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin: 0.75em auto 0.5em;
}

.calendar-bottom-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0.85em auto 1.25em;
}

.calendar-nav-button,
.calendar-time-toggle {
	padding: 7px 9px;
	border: 2px solid #382418;
	background: #0b0b0b;
	color: #90c040;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	text-shadow: none;
	box-shadow:
		inset 0 0 0 1px #000,
		0 1px 0 rgba(255, 255, 255, .12);
	box-sizing: border-box;
	cursor: pointer;
}

.calendar-nav-button:hover,
.calendar-time-toggle:hover {
	color: #90c040;
	text-decoration: underline;
}

.calendar-nav-button:disabled {
	cursor: default;
	opacity: 0.45;
	text-decoration: none;
}

.calendar-modal-close {
	border-image: url("https://cdn.runescape.com/assets/img/external/oldschool/2025/newsposts/2025-00-00/Border-3.png") 3 / 3px 3px 3px 3px / 3px 3px 3px 3px round;
	background-color: #534a3e;
	color: #f0eae5;
	text-shadow: 1px 1px 1px #000000;
	cursor: pointer;
	padding: 8px 10px;
	font-size: 13px;
	font-family: Cinzel, 'Cinzel', serif;
}

.calendar-modal-close:hover {
	background-color: #9b8b75;
}

.calendar-month-label {
	flex: 1;
	text-align: center;
	font-family: Cinzel, 'Cinzel', serif;
	font-weight: bold;
	font-size: 18px;
	color: #FFFFFF;
	text-shadow: 1px 1px #121212;
}

.calendar-legend {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 11px;
	text-align: center;
}

.calendar-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.calendar-legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 1px solid #000;
}

.calendar-month {
	display: none;
	margin-bottom: 1.75em;
}

.calendar-month.is-active {
	display: block;
}

.calendar-week {
	position: relative;
	margin-bottom: 4px;
}

.calendar-day-headings,
.calendar-week-days,
.calendar-span-row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.calendar-day-headings {
	margin-bottom: 4px;
}

.calendar-week-days {
	margin-bottom: 0;
}

.calendar-day-name {
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	padding: 6px 2px;
	background: #534a3e;
	color: #f0eae5;
	text-shadow: 1px 1px #000;
}

.calendar-day {
	position: relative;
	min-height: 92px;
	padding: 5px 5px 30px 5px;
	border: 1px solid #3b2f1f;
	background: #f0d7b760;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	min-width: 0;
	cursor: pointer;
	transition: none;
}

.calendar-day:hover {
	background: rgba(240, 215, 183, 0.55);
}

.calendar-day.is-empty {
	background: rgba(0, 0, 0, 0.08);
	box-shadow: none;
}

.calendar-day.is-today {
	outline: 1px solid rgba(1, 199, 77, 0.856);
	outline-offset: -2px;
	background: #bcf0b760;
}

.calendar-date-number {
	position: relative;
	z-index: 5;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 4px;
}

.calendar-day.is-empty .calendar-date-number {
	opacity: 0.45;
}

.calendar-today-label {
	float: right;
	font-size: 9px;
	font-weight: bold;
	color: #3b2f1f;
	background: rgba(1, 199, 77, 0.856);
	border: 1px solid rgba(59, 47, 31, 0.45);
	border-radius: 3px;
	padding: 0 3px;
	text-transform: uppercase;
}

.calendar-event {
	display: block;
	padding: 3px 4px;
	border: 1px solid #000;
	background: rgba(255, 255, 255, 0.25);
	font-size: 11px;
	line-height: 1.25;
	cursor: pointer;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	overflow: hidden;
	min-width: 0;
	max-width: 100%;
	transition: none;
}

.calendar-event:hover,
.calendar-event.is-open {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.calendar-event + .calendar-event {
	margin-top: 3px;
}

.calendar-event-title {
	display: block;
	font-weight: bold;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.calendar-event.is-title-cutoff .calendar-event-title,
.calendar-event.is-compact .calendar-event-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar-event.is-compact {
	min-height: 20px;
	white-space: nowrap;
}

.calendar-event-details {
	display: none;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.3;
}

.calendar-event.is-open {
	height: auto;
	min-height: 20px;
	white-space: normal;
	overflow: visible;
}

.calendar-event.is-open .calendar-event-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.calendar-event.is-open .calendar-event-details {
	display: block;
}

.calendar-event-time,
.calendar-event-downtime,
.calendar-event-range,
.calendar-event-date,
.calendar-event-description {
	display: block;
	margin-top: 2px;
}

.calendar-event-link {
	display: block;
	margin-top: 8px;
}

.calendar-event-link a {
	display: inline-block;
	padding: 4px 7px;
	background: #ffffff70;
	border: 1px solid rgba(59, 47, 31, 0.45);
	color: #3b2f1f;
	text-decoration: none;
	font-weight: bold;
	font-size: 11px;
	line-height: 1.2;
	cursor: pointer;
}

.calendar-event-link a:hover,
.calendar-event-link a:focus {
	background: #ffffff85;
	border-color: #3b2f1f;
	color: #3b2f1f;
	text-decoration: underline;
}

.calendar-week.has-spans .calendar-week-days .calendar-day .calendar-event:first-of-type {
	margin-top: 31px;
}

.calendar-span-row {
	position: absolute;
	left: 0;
	right: 0;
	top: 28px;
	z-index: 3;
	pointer-events: none;
	margin: 0;
}

.calendar-span-row .calendar-event {
	min-height: 20px;
	white-space: nowrap;
	margin-top: 0 !important;
	margin-left: 5px;
	margin-right: 5px;
	width: auto;
	pointer-events: auto;
}

.calendar-span-row .calendar-event.is-open {
	height: auto;
	white-space: normal;
	overflow: visible;
}

.calendar-span-row .calendar-event.is-span-continues-before {
	margin-left: 0;
}

.calendar-span-row .calendar-event.is-span-continues-after {
	margin-right: 0;
}

.calendar-event[data-type="maintenance"],
.calendar-legend-swatch[data-type="maintenance"] {
	background: #f2c879;
}

.calendar-event[data-type="update"],
.calendar-legend-swatch[data-type="update"] {
	background: #a9d3ff;
}

.calendar-event[data-type="event"],
.calendar-legend-swatch[data-type="event"] {
	background: #b7e3a1;
}

.calendar-event[data-type="newspost"],
.calendar-legend-swatch[data-type="newspost"] {
	background: #ffb0a8;
}

.calendar-event[data-type="livestream"],
.calendar-legend-swatch[data-type="livestream"] {
	background: #d7b7ff;
}

.calendar-event[data-type="poll"],
.calendar-legend-swatch[data-type="poll"] {
	background: #ffe28a;
}

.calendar-modal-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.55);
	padding: 24px;
	box-sizing: border-box;
}

.calendar-modal-backdrop.is-open {
	display: flex;
	align-items: center;
	justify-content: center;
}

.calendar-modal {
	width: min(620px, 100%);
	max-height: 86vh;
	overflow: auto;
	border: 2px solid #3b2f1f;
	background: #e8d2aa;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
	padding: 14px;
	box-sizing: border-box;
}

.calendar-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.calendar-modal-title {
	flex: 1;
	padding: 7px 10px;
	border: 1px solid #3b2f1f;
	background: #534a3e;
	font-family: Cinzel, 'Cinzel', serif;
	font-weight: bold;
	font-size: 18px;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 1px 1px #121212;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.calendar-modal-close {
	padding: 6px 8px;
}

.calendar-modal-event {
	font-size: 14px;
	line-height: 1.5;
}

.calendar-modal-event .calendar-event-title {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 6px;
}

.calendar-modal-event .calendar-event-time,
.calendar-modal-event .calendar-event-downtime,
.calendar-modal-event .calendar-event-range {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #3b2f1f;
	margin-top: 6px;
}

.calendar-modal-event .calendar-event-description {
	display: block;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.6;
	margin-top: 10px;
}

.calendar-modal-empty {
	margin: 1em 0;
	font-style: italic;
	text-align: center;
}

.event-fields {
	display: none;
}

/* ==========================================================
   11. GAME STATUS ISSUE COMPONENT
========================================================== */
.issue-list {
	max-width: 650px;
	margin: 1.5em auto;
}

/*
	Editable issue HTML should use this shape:

	<div class="issue">
		<div class="issue-title">Title</div>
		<div class="issue-status">Investigating</div>
		<div class="issue-date">30 June</div>
		<div class="issue-time">11:00 UTC</div>
		<div class="issue-last-updated">11:15 UTC</div>
		<div class="issue-downtime">~30 mins</div>
		<div class="issue-description">Optional longer details.</div>
	</div>
*/
.issue {
	border: 1px solid #3b2f1f;
	background: #f0d7b760;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.issue-button {
	width: 100%;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}

.issue-summary {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"title status"
		"meta meta";
	gap: 6px 10px;
	align-items: center;
}

.issue-title {
	grid-area: title;
	font-weight: bold;
	line-height: 1.3;
}

.issue-status {
	grid-area: status;
	justify-self: end;
	white-space: nowrap;
	padding: 1px 8px;
	border: 1px solid #000;
	border-radius: 4px;
	font-size: 12px;
	text-transform: uppercase;
	color: #fffffffd;
	text-shadow: 1px 1px 1px #000;
}

.issue-meta {
	grid-area: meta;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: #3b2f1f;
}

.issue-meta-left {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.issue-meta-updated {
	margin-left: auto;
	white-space: nowrap;
	font-style: italic;
}

.issue-time-toggle {
	cursor: pointer;
}

.issue-timezone-badge {
	display: inline-block;
	margin-left: 5px;
	padding: 0 4px;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 3px;
	background: rgba(0, 0, 0, .08);
	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}

.issue-details {
	display: none;
	padding: 0 12px 10px 12px;
	border-top: 1px solid rgba(0, 0, 0, .15);
}

.issue.is-open .issue-details {
	display: block;
}

.issue.is-open .issue-button {
	background: rgba(255, 255, 255, .14);
}

.issue-description {
	margin: .75em 0 0;
}

/* Compact dropdowns used inside issue descriptions. */
.issue-description details {
	margin: 0.5em 0 0;
}

.issue-description details > p:first-of-type {
	margin-top: 0;
}

.issue-description details > p:last-child {
	margin-bottom: 0;
}

.issue-fields {
	display: none;
}

/* ==========================================================
   12. RESPONSIVE RULES
========================================================== */
@media (max-width: 768px) {
	/* Legacy mobile #navbar styles removed. */

	#newspost-content,
	.news-article-content {
		font-size: 18px;
		line-height: 1.55;
	}

	#newspost-content p,
	#newspost-content li,
	.news-article-content p,
	.news-article-content li {
		font-size: 18px;
		line-height: 1.55;
	}

	.osrs-title {
		font-size: 28px;
		line-height: 1.25;
	}

	.osrs-embed {
		max-width: 100%;
	}

	.news-article-content img,
	.news-article-content iframe,
	.news-article-content table,
	#newspost-content img,
	#newspost-content iframe,
	#newspost-content table,
	#article-top img,
	#article-top iframe,
	#article-top table {
		max-width: 100%;
	}

	#JMods table,
	#jmod-target table,
	.news-article-content table,
	#newspost-content table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
	}

	#JMods th,
	#JMods td,
	#jmod-target th,
	#jmod-target td {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Mobile tab navigation becomes one collapsible menu. */
	.osrsTabNavigation {
		display: block !important;
		overflow: visible !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.osrsTabMenuToggle {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 14px 16px 14px 46px !important;
		box-sizing: border-box !important;
		border: none !important;
		background-color: #6b5631 !important;
		color: #f0eae5 !important;
		font-family: Cinzel, 'Cinzel', serif !important;
		font-size: 18px !important;
		text-align: left !important;
		text-shadow: 1px 1px 1px #000000 !important;
		cursor: pointer !important;
		float: none !important;
		position: relative !important;
	}

	.osrsTabMenuToggle:hover {
		background-color: #9b8b75 !important;
	}

	.osrsTabMenuToggle::before {
		content: "";
		position: absolute;
		left: 18px;
		top: 50%;
		width: 16px;
		height: 2px;
		background: #f0eae5;
		box-shadow: 0 -5px 0 #f0eae5, 0 5px 0 #f0eae5;
		transform: translateY(-50%);
	}

	.osrsTabNavigation__track {
		display: block !important;
		overflow: visible !important;
		width: 100% !important;
	}

	.osrsTabNavigation__track > .osrsTabButton,
	.osrsTabNavigation__track > .osrsTabDropdown {
		display: none !important;
	}

	.osrsTabNavigation.is-open .osrsTabNavigation__track > .osrsTabButton,
	.osrsTabNavigation.is-open .osrsTabNavigation__track > .osrsTabDropdown {
		display: block !important;
		width: 100% !important;
		margin-top: 6px !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	.osrsTabScrollButton {
		display: none !important;
	}

	.osrsTabNavigation.is-open .osrsTabButton,
	.osrsTabNavigation.is-open .osrsTabDropButton,
	.osrsTabNavigation.is-open .osrsTabDropdownMenu button,
	.osrsTabNavigation.is-open .osrsTabDropdownMenu a {
		display: block !important;
		width: 100% !important;
		padding: 10px 12px !important;
		font-size: 12px !important;
		line-height: 1.2 !important;
		text-align: left !important;
		white-space: normal !important;
		box-sizing: border-box !important;
		float: none !important;
	}

	.osrsTabDropdown {
		position: relative !important;
		min-width: 0;
	}

	.osrsTabDropdown .osrsTabDropButton {
		display: block !important;
	}

	.osrsTabDropdownMenu {
		position: static !important;
		display: none !important;
		width: 100% !important;
		box-shadow: none !important;
		margin-top: 4px !important;
		border-left: 0;
		border-right: 0;
	}

	.osrsTabDropdown:hover .osrsTabDropdownMenu {
		display: none !important;
	}

	.osrsTabDropdown.is-open .osrsTabDropdownMenu {
		display: block !important;
	}

	.issue-title {
		font-size: 18px;
	}

	.issue-status {
		justify-self: end;
		margin: 0;
		font-size: 12px;
	}

	.issue-meta,
	.issue-description {
		font-size: 16px;
		line-height: 1.45;
	}

	.issue-meta {
		display: block;
	}

	.issue-meta-left,
	.issue-meta-updated {
		display: block;
		margin-top: 4px;
	}
}

@media (min-width: 769px) {
	.osrsTabMenuToggle {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.dialogue-box,
	.dialogue-slideshow {
		width: 100%;
		max-width: 519px;
	}

	.issue-summary {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title status"
			"meta meta";
		gap: 6px 10px;
		align-items: center;
	}

	.issue-meta {
		margin-top: 6px;
	}

	/* Keep calendar as a compact month grid on mobile. */
	.event-calendar .calendar-day-headings,
	.event-calendar .calendar-week-days,
	.event-calendar .calendar-span-row {
		display: grid !important;
		grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
		gap: 4px !important;
	}

	.event-calendar .calendar-week {
		position: relative !important;
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-day-headings {
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-day-name {
		font-size: 10px;
		padding: 5px 1px;
	}

	.event-calendar .calendar-day,
	.event-calendar .calendar-day.is-empty {
		display: block !important;
		min-height: 92px !important;
		padding: 5px 5px 30px 5px !important;
	}

	.event-calendar .calendar-date-number {
		font-size: 13px;
		margin-bottom: 4px !important;
	}

	.event-calendar .calendar-today-label {
		display: none !important;
	}

	.event-calendar .calendar-event {
		font-size: 10px;
		line-height: 1.15;
		padding: 2px 3px;
		min-height: 18px;
	}

	.event-calendar .calendar-span-row {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 28px !important;
		z-index: 3 !important;
		pointer-events: none !important;
		margin: 0 !important;
	}

	.event-calendar .calendar-span-row .calendar-event {
		display: block !important;
		pointer-events: auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-top: 0 !important;
		margin-left: 5px !important;
		margin-right: 5px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.event-calendar .calendar-week.has-spans .calendar-week-days .calendar-day .calendar-event:first-of-type {
		margin-top: 26px !important;
	}

	.calendar-bottom-controls {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		text-align: center;
	}

	.calendar-legend {
		justify-content: center;
		margin-top: 0;
		text-align: center;
	}
}