/* cspell: disable */

/* Spectrum tokens are loaded via global.css; no separate import needed here.
   Custom properties like --surface-2, --background-color etc. are defined in global.css. */

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@container style(--system: spectrum) {
	.spectrum-Calendar {
		--spectrum-calendar-day-background-color-selected-disabled: rgb(var(--spectrum-gray-100-rgb), 0.4);
	}
}

.spectrum-Calendar {
	--spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100));
	--spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100));
	--spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200));
	--spectrum-calendar-day-padding: var(--mod-calendar-day-padding, 4px);

	--spectrum-calendar-border-radius-reset: var(--mod-calendar-border-radius-reset, 0);
	--spectrum-calendar-border-width-reset: var(--mod-calendar-border-width-reset, 0);
	--spectrum-calendar-margin-y: var(--mod-calendar-margin-y, 24px);
	--spectrum-calendar-margin-x: var(--mod-calendar-margin-x, 32px);

	/* combines (day-width and day-padding x 2) x 7 days a week */
	--spectrum-calendar-width: var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7));

	/* Add letter spacing of 0.66px from Typography > Detail  issue #407 */
	--spectrum-calendar-title-text-letter-spacing: var(--mod-calendar-title-text-letter-spacing, 0.06em);
	--spectrum-calendar-title-height: var(--mod-calendar-title-height, 32px);
	--spectrum-calendar-title-text-size: var(--mod-calendar-title-text-size, var(--spectrum-font-size-300));

	--spectrum-calendar-title-text-font-weight: var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight));
	--spectrum-calendar-title-text-color: var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)));

	--spectrum-calendar-heading-text-size: var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50));

	--spectrum-calendar-button-icon-color: var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default));
}

.spectrum-Calendar:dir(rtl) {
		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
	}

.spectrum-Calendar-date {
	--spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent);
	--spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)));
	--spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)));
	--spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)));
	--spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)));
	--spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)));
	--spectrum-calendar-day-background-down: var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)));

	--spectrum-calendar-day-background-layer-color: var(--mod-calendar-day-background-layer-color, transparent);

	--spectrum-calendar-day-border-color: var(--mod-calendar-day-border-color, transparent);
	--spectrum-calendar-day-border-color-focus: var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)));

	--spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size, var(--spectrum-font-size-100));
	--spectrum-calendar-day-text-font-weight: var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight));
	--spectrum-calendar-day-text-font-weight-selected: var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight));
	--spectrum-calendar-day-text-font-weight-cap-selected: var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight));

	/* Styles specific to the today identifier */
	--spectrum-calendar-day-today-background-selected-hover: var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)));
	--spectrum-calendar-day-today-text-font-weight: var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight));
	--spectrum-calendar-day-today-text-color: var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)));
	/* @todo There's not a good semantic alias to map this to */
	--spectrum-calendar-day-today-border-color: var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)));

	/* Applied to both title-text-color and today-text-color */
	--spectrum-calendar-day-text-color: var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default));
	--spectrum-calendar-day-text-color-selected: var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)));
	--spectrum-calendar-day-text-color-cap-selected: var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)));
	--spectrum-calendar-day-text-color-hover: var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)));
	--spectrum-calendar-day-text-color-key-focus: var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)));

	/* Disabled state */
	--spectrum-calendar-day-text-color-disabled: var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color));
	--spectrum-calendar-day-today-border-color-disabled: var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color));
}

.spectrum-Calendar-date:lang(ja),.spectrum-Calendar-date:lang(zh),.spectrum-Calendar-date:lang(ko) {
		--spectrum-calendar-day-text-size: var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50));
	}

@media (forced-colors: active) {
	.spectrum-Calendar-date {
		--highcontrast-calendar-day-title-text-color: CanvasText;

		--highcontrast-calendar-day-text-color-selected: HighlightText;
		--highcontrast-calendar-day-text-color-cap-selected: HighlightText;
		--highcontrast-calendar-day-text-color-hover: HighlightText;
		--highcontrast-calendar-day-text-color-key-focus: ButtonText;

		--highcontrast-calendar-day-background-selected: Highlight;
		--highcontrast-calendar-day-background-selected-hover: Highlight;
		--highcontrast-calendar-day-background-cap-selected: Highlight;
		--highcontrast-calendar-day-background-hover: Highlight;
		--highcontrast-calendar-day-background-focus: ButtonFace;
		--highcontrast-calendar-day-background-down: ButtonFace;

		--highcontrast-calendar-day-today-border-color: ButtonText;
		--highcontrast-calendar-day-border-color-focus: ButtonText;

		--highcontrast-calendar-day-today-text-color: ButtonText;
		--highcontrast-calendar-day-today-background-selected-hover: Highlight;

		forced-color-adjust: none;
	}

		.spectrum-Calendar-date::before {
			background: Transparent !important;
		}

		.spectrum-Calendar-date.is-selected {
			background: Highlight;
		}

		.spectrum-Calendar-date.is-disabled {
			--highcontrast-calendar-day-title-text-color: GrayText;

			--highcontrast-calendar-day-text-color-hover: GrayText;
			--highcontrast-calendar-day-text-color-key-focus: GrayText;

			--highcontrast-calendar-day-today-text-color: HighlightText;
			--highcontrast-calendar-day-today-border-color: HighlightText;
		}

		.spectrum-Calendar-date.is-range-selection.is-selection-start,.spectrum-Calendar-date.is-range-selection.is-selection-end {
			--mod-calendar-day-fill-content: none;
		}
}

.spectrum-Calendar {
	display: inline-block;
	inline-size: var(--spectrum-calendar-width);
}

.spectrum-Calendar--padded {
	margin: var(--spectrum-calendar-margin-x) var(--spectrum-calendar-margin-y);
}

.spectrum-Calendar-header {
	align-items: center;
	display: flex;
	inline-size: 100%;
}

.spectrum-Calendar-title {
	color: var(--spectrum-calendar-title-text-color);
	flex-grow: 1;
	font-size: var(--spectrum-calendar-title-text-size);
	font-weight: var(--spectrum-calendar-title-text-font-weight);

	line-height: var(--spectrum-calendar-title-height);
	margin: 0;
	order: 1;
	overflow: hidden;

	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth {
	/* @passthrough start */
	/* Mimic the placement and sizing of the dates in the grid below */
	--mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding);
	--mod-actionbutton-min-width: var(--spectrum-calendar-day-width);
	--mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color);
	/* @passthrough end */

	transform: var(--spectrum-logical-rotation,);
}

.spectrum-Calendar-prevMonth {
	order: 0;
}

.spectrum-Calendar-nextMonth {
	order: 2;
}

.spectrum-Calendar-dayOfWeek {
	block-size: 100%;

	border-block-end: none !important; /* override abbr styling from normalize.css */

	color: var(--spectrum-calendar-title-text-color);

	cursor: default;
	display: flex;
	flex-direction: column;
	font-size: var(--spectrum-calendar-heading-text-size);
	font-weight: var(--spectrum-calendar-title-text-font-weight);

	inline-size: var(--spectrum-calendar-day-width);
	justify-content: flex-end;
	text-decoration: none !important; /* override abbr styling from normalize.css */
	text-transform: uppercase;
}

.spectrum-Calendar-dayOfWeek[title] {
		/* Normalize abbr[title] */
		/* Remove the bottom border in Chrome 57- and Firefox 39-. */
		border-block-end: none;

		letter-spacing: var(--spectrum-calendar-title-text-letter-spacing);

		/* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
		text-decoration: underline;
		-webkit-text-decoration: underline dotted;
		        text-decoration: underline dotted;
	}

.spectrum-Calendar-body {
	outline: none;
}

.spectrum-Calendar-table {

	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;

	-webkit-user-select: none;

	   -moz-user-select: none;

	        user-select: none;
}

.spectrum-Calendar-tableCell {

	block-size: var(--spectrum-calendar-day-height);
	box-sizing: content-box;
	inline-size: var(--spectrum-calendar-day-width);
	padding: var(--spectrum-calendar-day-padding);

	position: relative;
	text-align: center;
}

.spectrum-Calendar-tableCell:focus {
		outline: 0;
	}

.spectrum-Calendar-date {
	background: var(--spectrum-calendar-day-background-layer-color);

	block-size: var(--spectrum-calendar-day-height);
	border-color: var(--spectrum-calendar-day-border-color);
	border-radius: var(--spectrum-calendar-day-width);
	border-style: solid;

	border-width: var(--spectrum-calendar-day-border-size);

	box-sizing: border-box;

	color: var(--spectrum-calendar-day-text-color);

	cursor: pointer;
	display: var(--mod-calendar-day-visibility, block);

	font-size: var(--spectrum-calendar-day-text-size);
	font-weight: var(--spectrum-calendar-day-text-font-weight);
	inline-size: var(--spectrum-calendar-day-width);
	inset-block-start: 0;
	inset-inline-start: 0;
	line-height: calc(var(--spectrum-calendar-day-width) - var(--spectrum-calendar-day-border-size) * 2);
	margin: var(--spectrum-calendar-day-padding);
	/* This is fun, but we need to trick the table so it doesn't size itself in a weird way */
	position: absolute;
	white-space: nowrap;
}

.spectrum-Calendar-date::before {

		background: var(--spectrum-calendar-day-background);
		block-size: var(--spectrum-calendar-day-height);
		border-color: var(--mod-calendar-day-border-color, transparent);

		border-radius: var(--spectrum-calendar-day-width);
		border-style: solid;

		border-width: var(--spectrum-calendar-day-border-size);

		box-sizing: border-box;
		content: "";
		inline-size: var(--spectrum-calendar-day-width);
		inset-block-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
		inset-inline-start: calc(50% - var(--spectrum-calendar-day-width) / 2);
		position: absolute;
	}

.spectrum-Calendar-date::after {
		background: transparent;

		block-size: var(--spectrum-calendar-day-height);

		border-radius: var(--spectrum-calendar-day-width);

		content: var(--mod-calendar-day-fill-content, "");

		display: var(--mod-calendar-day-fill-display, none);
		inline-size: var(--spectrum-calendar-day-width);
		inset-block-start: 0;
		position: absolute;
	}

.spectrum-Calendar-date:hover {
		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-hover);
	}

.spectrum-Calendar-date:hover:not(.is-selection-end,.is-selection-start) {
			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-hover);
		}

.spectrum-Calendar-date.is-selected:hover:not(.is-selection-end,.is-selection-start),.spectrum-Calendar-date.is-range-selection:hover {
			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected-hover);
		}

.spectrum-Calendar-date:active {
		/* Applied behind the selected circle around the date */
		--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-down);
	}

.spectrum-Calendar-date.is-focused {
		--mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
	}

.spectrum-Calendar-date.is-focused.is-selected,.spectrum-Calendar-date.is-focused.is-range-selection {
			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-selected);
		}

.spectrum-Calendar-date.is-outsideMonth {
		--mod-calendar-day-visibility: none;
	}

.spectrum-Calendar-date.is-range-selection {
		border-radius: var(--spectrum-calendar-border-radius-reset);

		border-width: var(--spectrum-calendar-border-width-reset);
		inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2);

		line-height: var(--spectrum-calendar-day-height);

		/* overrides to make the cells appear connected */
		margin: var(--spectrum-calendar-day-padding) 0;
	}

.spectrum-Calendar-date.is-range-selection.is-selection-start,.spectrum-Calendar-date.is-range-selection.is-selection-end,.spectrum-Calendar-date.is-range-selection.is-range-start,.spectrum-Calendar-date.is-range-selection.is-selection-start {
			inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
		}

.spectrum-Calendar-date.is-range-selection.is-selection-start,.spectrum-Calendar-date.is-range-selection.is-selection-end {
			--mod-calendar-day-fill-display: block;
			--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-selected);
			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
		}

.spectrum-Calendar-date.is-range-selection.is-range-start,.spectrum-Calendar-date.is-range-selection.is-selection-start {
			border-end-start-radius: var(--spectrum-calendar-day-width);

			border-start-start-radius: var(--spectrum-calendar-day-width);
			margin-inline-start: var(--spectrum-calendar-day-padding);
			padding-inline-end: var(--spectrum-calendar-day-padding);
		}

:is(.spectrum-Calendar-date.is-range-selection.is-range-start,.spectrum-Calendar-date.is-range-selection.is-selection-start)::before,:is(.spectrum-Calendar-date.is-range-selection.is-range-start,.spectrum-Calendar-date.is-range-selection.is-selection-start)::after {
				inset-inline-start: 0;
			}

.spectrum-Calendar-date.is-range-selection.is-range-end,.spectrum-Calendar-date.is-range-selection.is-selection-end {
			border-end-end-radius: var(--spectrum-calendar-day-width);

			border-start-end-radius: var(--spectrum-calendar-day-width);
			inline-size: calc(var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding));
			margin-inline-end: var(--spectrum-calendar-day-padding);
			padding-inline-start: var(--spectrum-calendar-day-padding);
		}

:is(.spectrum-Calendar-date.is-range-selection.is-range-end,.spectrum-Calendar-date.is-range-selection.is-selection-end)::before,:is(.spectrum-Calendar-date.is-range-selection.is-range-end,.spectrum-Calendar-date.is-range-selection.is-selection-end)::after {
				inset-inline-end: 0;
				inset-inline-start: auto;
			}

/* dates that are both start & end */

.spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end,.spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end,.spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start,.spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end {
			border-radius: var(--spectrum-calendar-day-width);
			inline-size: var(--spectrum-calendar-day-width);
		}

.spectrum-Calendar-date.is-focused:not(.is-range-selection):active,.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection) {
			--mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-cap-selected);
			--mod-calendar-day-background-color-key-focus: var(--spectrum-calendar-day-background-cap-selected);
		}

.spectrum-Calendar-date.is-focused:not(.is-range-selection) {
			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-key-focus);
			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-focus);
			--mod-calendar-day-border-color: var(--spectrum-calendar-day-border-color-focus);
		}

.spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection) {
			--mod-calendar-day-background-color-hover: var(--spectrum-calendar-day-today-background-selected-hover);
		}

.spectrum-Calendar-date.is-selected:not(.is-range-selection) {
			--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-cap-selected);
			--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
			--mod-calendar-day-background-layer-color: transparent;
			--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-text-font-weight-cap-selected);
		}

.spectrum-Calendar-date.is-selected {
		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-selected);

		/* Applied behind the selected circle around the date */
		--mod-calendar-day-background-color: var(--spectrum-calendar-day-background-cap-selected);
		--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
	}

.spectrum-Calendar-date.is-today {
		--mod-calendar-day-text-color: var(--spectrum-calendar-day-today-text-color);
		--mod-calendar-day-border-color: var(--spectrum-calendar-day-today-border-color);
		--mod-calendar-day-text-font-weight: var(--spectrum-calendar-day-today-text-font-weight);
	}

.spectrum-Calendar-date.is-disabled {
		--mod-calendar-day-text-color: var(--spectrum-calendar-day-text-color-disabled);
		--mod-calendar-day-text-color-selected: var(--spectrum-calendar-day-text-color-disabled);
		--mod-calendar-day-text-color-cap-selected: var(--spectrum-calendar-day-text-color-disabled);
		--mod-calendar-day-text-color-hover: var(--spectrum-calendar-day-text-color-disabled);
		--mod-calendar-day-text-color-key-focus: var(--spectrum-calendar-day-text-color-disabled);

		--mod-calendar-day-today-border-color: var(--spectrum-calendar-day-today-border-color-disabled);
		--mod-calendar-day-border-color-key-focus: transparent;

		--mod-calendar-day-background-color-selected: var(--spectrum-calendar-day-background-color-selected-disabled);
		--mod-calendar-day-background-color-selected-hover: transparent;
		--mod-calendar-day-background-color-cap-selected: transparent;
		--mod-calendar-day-background-color-hover: transparent;
		--mod-calendar-day-background-color-focus: transparent;
		--mod-calendar-day-background-color-down: transparent;

		--mod-calendar-day-text-font-weight: normal;
		--mod-calendar-day-text-font-weight-selected: normal;
		--mod-calendar-day-text-font-weight-cap-selected: normal;

		pointer-events: none;
	}

.spectrum-Calendar-date.is-disabled.is-selected {
			--mod-calendar-day-background-layer-color: var(--spectrum-calendar-day-background-selected);
		}

.archives {
  width: min(-moz-fit-content, 10%);
  width: min(fit-content, 10%);
}

.calendar {
  /* Calendar will set the effective width */
  margin-bottom: 1rem;
}

.archive-links ul {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(4em, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;

  /* Make sure it doesn't exceed calendar width */
  width: 100%;
}

.archive-links li {
  text-align: center;
}

.archive-links a {
  display: block;
  padding: 0.25rem;
  text-decoration: none;
}

aside {
  border: var(--spectrum-border-width-100) solid;
  border-radius: var(--spectrum-corner-radius-100);
  clear: right;
  flex: 1 1 auto;
  float: right;
  font-size: var(--spectrum-font-size-100);
  height: -moz-fit-content;
  height: fit-content;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding: 0.5ch;
}

/* This targets all elements inside the aside */

aside * {
  font-size: inherit; /* Makes all child elements inherit the reduced font size */
}

aside h3 {
  text-align: center;
}

aside h2 {
  font-size: var(--spectrum-font-size-200);
  margin: 0 1em; /* ensure the curved borders do not shift this element */
  text-align: center;
}

aside .spectrum-Calendar {
  --mod-calendar-day-text-color: var(--text-3);
  --mod-calendar-day-text-color-hover: var(--text-2);
  --mod-calendar-day-text-color-disabled: var(--text-1);
  --mod-calendar-day-title-text-color: var(--text-1);
  --mod-calendar-day-border-color: var(--surface-2);
  --mod-calendar-day-border-size: 2px;
  --mod-calendar-width: 95%;
}

aside .spectrum-Calendar table.spectrum-Calendar-table {
  border: 2px solid var(--surface-2);
  border-radius: var(--spectrum-corner-radius-100); /* match aside */
  margin: 1.5ch 0;
}

table.tag-summary {
  margin: 0 auto;
}

main {
  flex-direction: row;
  overflow: auto; /* Ensures main content contains the float */
}

/* Make sure the aside appears below the header */

header {
  clear: both;
}

header div.site-title-section {
  width: 80%;
}

header div.page-title {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 0 var(--spectrum-spacing-300) var(--spectrum-spacing-100);
  width: 90vw;
}

img.toplogo {
  display: block;
  height: auto;
  max-width: 100%;
}

article {
  --mod-body-font-size: 16px;

  flex: 3 1 auto;
}

article p {
  width: 100%;
}

/* Archive pages styling */

article[data-archive-type] h2 {
  font-size: var(--spectrum-font-size-700);
}

article[data-archive-type] ul {
  list-style: none;
  padding: 0;
}

article[data-archive-type] ul li {
  font-size: var(--spectrum-font-size-100);
  margin: var(--spectrum-spacing-100) 0;
}

article[data-archive-type] ul li a {
  color: var(--spectrum-accent-content-color-default);
}

.tooltip {
  border-bottom: 1px dotted; /* Optional: adds a dotted underline */
  display: inline-block;
  position: relative;
}

/* Tooltip text */

.tooltip .tooltiptext {
  border-radius: 6px;
  bottom: 125%;
  color: var(--background-color);
  left: 50%;

  /* Fade in tooltip */
  opacity: 0;
  padding: 5px;

  /* Position the tooltip text */
  position: absolute;
  right: 0;
  text-align: center;
  transition: opacity 0.3s;
  visibility: hidden;
  width: 200px;
  z-index: 1;
}

/* Tooltip arrow */

.tooltip .tooltiptext::after {
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: 5%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

/* Show the tooltip when hovering */

.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

/* Style for the last-edited section */

.last-edited {
  font-size: 0.9em;
  margin-top: 10px;
}