/* ============================================================
   Web_Log_Styles.css
   Shared stylesheet for the RAC Web Log Submission System.

   This file holds styles that are REUSED across multiple pages:
   typography utilities, brand colours, shared UI components
   (banners, buttons, boxes), and the responsive site navigation.

   Anything specific to a single page's own layout - page margins,
   table widths, one-off element positioning, viewport sizing -
   stays in that page's own <style> block instead of here.
   ============================================================ */

/* ---------- Brand colours ----------
   Change a colour once here and it updates everywhere it's used
   (menus, banners, lines, and red/blue/etc. text). */
:root {
	--color-red: #AF0000;        /* standard RAC red - menus, banners, lines, red text */
	--color-blue: #0000FF;
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-nav-hover: #111111;  /* nav link hover background */
}

/* ============================================================
   BASE DEFAULTS
   ============================================================ */

p {
	line-height: 1;
}

/* Default readable text style applied to a page's main content
   wrapper (medium, bold, black). */
.default-text-style {
	font-size: medium;
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: var(--color-black);
}

/* ============================================================
   TEXT SIZE UTILITIES
   ============================================================ */

.text-small  { font-size: small; }
.text-medium { font-size: medium; }
.text-large  { font-size: large; }
.text-xlarge { font-size: x-large; }

/* ============================================================
   TEXT COLOUR UTILITIES
   ============================================================ */

.text-black { color: var(--color-black); }
.text-red   { color: var(--color-red); }
.text-blue  { color: var(--color-blue); }
.text-white { color: var(--color-white); }

/* ============================================================
   TEXT ALIGNMENT UTILITIES
   ============================================================ */

.text-left     { text-align: left; }
.text-center   { text-align: center; }
.valign-bottom { vertical-align: bottom; }

/* ============================================================
   TEXT WEIGHT / DECORATION UTILITIES
   ============================================================ */

.font-bold   { font-weight: bold; }
.font-normal { font-weight: normal; }
.underline   { text-decoration: underline; }
.small-caps  { font-variant: small-caps; }

/* ============================================================
   SPACING UTILITIES
   ============================================================ */

.tight-paragraph-spacing { margin-top: 3px; margin-bottom: 3px; }
.spaced-paragraph        { margin-top: 12px; margin-bottom: 12px; }
.spaced-block            { margin: 12px 25px; }

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Red title banner with white text, used at the top of each
   page's main content area. */
.page-title-banner {
	color: var(--color-white);
	border-style: solid;
	border-color: var(--color-white);
	background-color: var(--color-red);
	font-size: large;
	padding: 1px 10px 1px 10px;
}

/* Red footer bar at the bottom of each page. */
.footer-banner {
	padding: 4px;
	text-align: right;
	font-size: small;
	background-color: var(--color-red);
	color: var(--color-white);
}

/* Bordered white box used to highlight a section (e.g. the
   contest-selection area). */
.bordered-highlight-box {
	text-align: center;
	border: 1px solid var(--color-black);
	background-color: var(--color-white);
	vertical-align: middle;
	font-size: xx-large;
}

/* Grey submit/action button styling. */
.action-button {
	background-color: #C0C0C0;
	font-weight: bold;
	font-size: medium;
}

/* Makes an entire label (radio button + its text) clickable,
   with a pointer cursor as a visual hint. Used for choice lists
   such as the contest-selection radio buttons. */
.contest-choice {
	cursor: pointer;
	display: inline-block;
}

/* ============================================================
   LEGACY SIMPLE NAVIGATION
   Used by pages that haven't been upgraded to the responsive
   .rac-nav navigation yet (e.g. FR-index.php). Scoped to
   .legacy-nav-list rather than bare ul/li/li a so it can never
   collide with the responsive nav's ul.nav-links on pages that
   use that instead.
   ============================================================ */

.legacy-nav-list {
	list-style-type: none;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--color-red);
}

.legacy-nav-list li {
	float: left;
}

.legacy-nav-list li a {
	display: block;
	color: var(--color-white);
	text-align: center;
	padding: 7px 16px 7px 16px;
	text-decoration: none;
}

.legacy-nav-list li a:hover {
	background-color: var(--color-nav-hover);
}

/* ============================================================
   RESPONSIVE SITE NAVIGATION
   Shared header navigation bar used across all pages.
   ============================================================ */

nav.rac-nav {
	background-color: var(--color-red);
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

/* Hamburger button - hidden on desktop, shown on tablet/mobile */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 16px;
	width: 100%;
	text-align: left;
	color: var(--color-white);
	font-size: 1rem;
	align-items: center;
	gap: 10px;
}

/* The three-bar hamburger icon drawn with CSS */
.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-white);
	transition: transform 0.25s ease, opacity 0.25s ease;
	position: relative;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
	content: '';
	position: absolute;
	left: 0;
}
.nav-toggle .hamburger::before { top: -7px; }
.nav-toggle .hamburger::after  { top:  7px; }

/* Animate hamburger -> X when open */
.nav-toggle[aria-expanded=true] .hamburger {
	background: transparent;
}
.nav-toggle[aria-expanded=true] .hamburger::before {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded=true] .hamburger::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* Nav link list */
.nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.nav-links li {
	float: none;
}

/* Push right-side items to the end on desktop */
.nav-links li.nav-right {
	margin-left: auto;
}
/* Once the first right item has pushed itself right, subsequent
   right items sit next to it - reset margin so they don't each
   push further */
.nav-links li.nav-right ~ li.nav-right {
	margin-left: 0;
}

.nav-links li a {
	display: block;
	color: var(--color-white);
	text-align: center;
	padding: 7px 16px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.9rem;
}

.nav-links li a:hover {
	background-color: var(--color-nav-hover);
}

/* -- Tablet & mobile breakpoint -- */
@media (max-width: 768px) {

	.nav-toggle {
		display: flex;  /* show hamburger */
	}

	.nav-links {
		flex-direction: column;
		align-items: stretch;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}

	/* JS sets this class to open the menu */
	.nav-links.is-open {
		max-height: 500px; /* tall enough for all items */
	}

	.nav-links li,
	.nav-links li.nav-right {
		margin-left: 0;
		width: 100%;
		border-top: 1px solid rgba(255,255,255,0.15);
	}

	.nav-links li a {
		text-align: left;
		padding: 11px 20px;
		font-size: 1rem;
	}
}

/* -- Small phone tweaks -- */
@media (max-width: 480px) {
	.nav-links li a {
		padding: 12px 16px;
		font-size: 0.95rem;
	}
}