/*
  File: calendarB.css (Refactored)

  This file contains the styles for the calendar and event listings.
  It has been refactored for better organization, readability, and maintainability.
*/

/* --- General Styles --- */

:root {
	--fs-xl: clamp(3.5rem, 12vw + 1rem, 12rem);
	--fs-600: 1.2rem;
	--fs-400: 0.8rem;
	--fs-300: 0.6rem;
}

@media (min-width: 40em) {
	:root {
		--fs-600: 3rem;
		--fs-400: 1.3rem;
	}
}



body {
	scroll-behavior: smooth;
	line-height: 1.4;
	margin: 20px auto;
	padding: 0 10px;
	word-wrap: break-word;
	font-size: var(--fs-600);
}

details {
	font-size: var(--fs-400);
}

details.ratings pre {
	font-size: clamp(0.5rem, 3.4vw, 1.6rem);
}

details.placings pre {
	font-size: clamp(0.5rem, 3.8vw, 2rem);
}

summary {
	font-size: var(--fs-600);
}



/* --- Sections: Recent & Upcoming --- */

#recent {
	width: min(95%, 15em);
}

#upcoming {
	width: min(95%,15em);
}

#recent,
#upcoming {
	margin: 0 auto;
	padding: 4px 4px 10px;
	background-color: cornsilk;
	border-radius: 15px;
	box-shadow: 1px 7px 15px rgba(0, 0, 0, 0.8),
		inset 3px 0 2px rgba(255, 255, 255, 0.4),
		inset 0 3px 0px rgba(255, 255, 255, 0.5),
		inset -2px -3px 0px rgba(143, 128, 82, 0.6);
}

.event {
	/* width: min(90vw, 14em); */
	width:95%;
	overflow: hidden;
	white-space: nowrap;
	/* font-size: 80%; */
	text-overflow: ellipsis;
	
}

dd {
	font-size: 90%;
	margin-left: 15px;
	/* --- default is 40px --- */
}

/* --- Event Status Styles --- */

.cancelled,
.postponed,
.waiting {
	opacity: 0.25;
}

.waiting {
	opacity: 0.5;
}

.waiting td:nth-child(2)::before {
	content: "WAITING";
	color: red;
	display: block;
}

.cancelled td:nth-child(2)::after {
	content: "CANCELLED";
	font-size: 140%;
	color: red;
	display: block;
}

.postponed td:nth-child(2)::after {
	content: "POSTPONED";
	font-size: 140%;
	color: red;
	display: block;
}

/* --- Event and Date Styles --- */

span {
	display: inline-block;
}

date {
	background-color: red;
	width: 65px;
	color: white;
	font-size: 80%;
}

.event {
	font-weight: bold;
	border: 1px solid green;
	padding-left: 2px;
}

.secname {
	font-style: oblique;
}

/* --- Aside (Links) Styles --- */

aside {
	text-align: center;
}

aside a:link,
aside a:visited {
	background-color: cornsilk;
	color: black;
	font-family: Tahoma, sans-serif;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	border: 1px solid green;
	padding: 0 5px;
}

aside a:hover,
aside a:active {
	background-color: red;
}

/* --- Table Styles --- */

td {
	border-bottom: 1px solid gray;
	vertical-align: top;
}

tr td:nth-child(1) {
  font-size:80%;
}

/* --- Special Star Class Style --- */
.star :nth-child(2) {
	border: 3px dashed red;
	border-radius: 10px;
	color: red;
	font-size: 120%;
}

/* --- State/Region Background Colors --- */

.vic {
	background: #C4FFBC;
}

.sa {
	background: #FFC4C4;
}

.qld {
	background: #FFFF99;
}

.wa {
	background: #F8C89C;
}

.tas {
	background: #C0FAE7;
}

.act {
	background: #E3B6FF;
}

.nsw {
	background: #D2D2FF;
}

.aus {
	background: lightcyan;
}

.int,
.os {
	background: greenyellow;
}

/* --- State/Region Abbreviations --- */

/* Use attribute selectors for better performance and maintainability */
tr[class="qld"] td:nth-child(1)::before {
	content: "QLD";
	display: block;
	color: darkslategray;
}

tr[class="nsw"] td:nth-child(1)::before {
	content: "NSW";
	display: block;
	color: darkslategray;
}

tr[class="act"] td:nth-child(1)::before {
	content: "ACT";
	display: block;
	color: darkslategray;
}

tr[class="vic"] td:nth-child(1)::before {
	content: "VIC";
	display: block;
	color: darkslategray;
}

tr[class="tas"] td:nth-child(1)::before {
	content: "TAS";
	display: block;
	color: darkslategray;
}

tr[class="sa"] td:nth-child(1)::before {
	content: "SA";
	display: block;
	color: darkslategray;
}

tr[class="wa"] td:nth-child(1)::before {
	content: "WA";
	display: block;
	color: darkslategray;
}

tr[class="os"] td:nth-child(1)::before {
	content: "OS";
	display: block;
	color: darkslategray;
}

/* --- WESPA Rating --- */

.wespa::before {
	content: "WESPA rated";
	background: darkgreen;
	color: white;
	display: block;
	text-align: center;
	border-radius: 7px;
}

.youth::after {
   content: "YOUTH";
  display: block;
  background-color: darkgray;
  color:white;
  font-size: var(--main-font-size);
  	display: block;
	text-align: center;
	border-radius: 7px;
}
/* --- Links within Pre and Go-to section ---*/
pre a,
.goto a {
	text-decoration: none;
}

/* --- Registration Link --- */

.register a:link,
.register a:visited {
	background-color: white;
	color: black;
	border: 2px solid green;
	padding: 2px 4px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

/* --- Media Queries --- */

@media only screen and (max-width: 1026px) {
	#ratdat {
		display: none;
	}
}