@charset "UTF-8";

@import "common.css";

:root {
	--clr-bg-page: #FAFAFA; /* page background */
	/* Header / Footer background */
	--clr-bg-header: #2F1B1A;
	--clr-bg-footer: #2F1B1A;
	/* Primary accent – (cards, buttons, etc.) */
	--clr-primary: #ff9900;
	--clr-primary-hover: #e68a00;
	/* Header / Footer navigation links */
	--clr-header-link: #ffbb00;
	--clr-header-link-hover: #e69900; /* hover shade */
	--clr-body-link: MediumBlue;
	--clr-body-link-hover: #0000a0;
	--clr-breadcrumb-link: MediumBlue;
	--clr-breadcrumb-link-hover: #0000a0;
	/* Card styling – warm, sunny tones */
	--clr-card-bg: var(--clr-bg-page); /*#fff4cc*/
	--clr-card-inner: #ffd966; /* inner card header */
	/* Text and meta information */
	--clr-text: Black; /* main body text */
	--clr-meta: #dddddd; /* meta text on dark footer */
	/* Tooltip */
	--clr-tooltip-bg: #555555; /* tooltip background */
	--clr-tooltip-fg: #ffffff; /* tooltip text */
	/* Breadcrumb background & text */
	--clr-breadcrumb-bg: #d5d5d5;
	--clr-breadcrumb-text: Black;
	/* Form inputs */
	--clr-input-border: #cccccc;
	--clr-review-row-bg: #FFEFD5;
}

/* global */
html {
	font-family: Arial;
}

body {
	font-size: 1rem;
	background-color: var(--clr-bg-page);
	color: var(--clr-text);
}

/* Content links (inside the main area) */
a:link, a:visited {
	color: var(--clr-body-link);
}

a:hover {
	color: var(--clr-body-link-hover);
}

/* Header / Footer navigation links – high‑contrast white */
header a:link, header a:visited, header a:hover, footer a:link, footer a:visited,
	footer a:hover {
	color: var(--clr-header-link);
}

header a:hover, footer a:hover {
	color: var(--clr-header-link-hover);
}

/* container and positioning */
header {
	background-color: var(--clr-bg-header);
}

header>div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: auto;
}

@media screen and (max-width: 60rem) {
	header>div {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}
}

header>div>div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

header>div>div:first-child {
	justify-content: flex-start;
	min-height: 6rem;
	padding: 0;
	margin: 0;
}

header>div>div:first-child>a {
	padding: 0;
}

header>div>div:first-child>a>img {
	height: 6rem;
}

header>div>div:nth-child(2)>a>div, header>div>div:last-child>div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	min-height: 6rem;
	width: 9rem;
	font-size: 1.1rem;
	font-weight: bold;
}

footer {
	background-color: var(--clr-bg-footer);
	padding: 0rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0rem;
	justify-content: center;
}

footer>nav {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 2rem;
}

footer>nav>div>ul {
	list-style: none;
	margin: 0;
	margin-top: 1rem;
}

footer>nav>div>ul>li {
	padding: 0.2rem;
}

footer>div.meta {
	flex: 1 1 100%;
	text-align: center;
	font-size: .85rem;
	color: var(--clr-meta);
}

figcaption.photo-caption {
	width: 50rem;
	padding: 0.5rem 0.5rem;
	margin: auto;
	text-align: center;
	background-color: var(--clr-review-row-bg);
}

@media ( max-width : 50rem) {
	figcaption.photo-caption {
		width: 100%;
	}
}

@media ( min-width : 50rem) {
	figcaption.photo-caption {
		width: 50rem;
	}
}

div.index-grid {
	display: grid;
	justify-content: center;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 40rem),
		max-content));
	width: 100%;
	max-width: calc(2 * 40rem + 1rem);
	box-sizing: border-box;
}

div.index-grid>div {
	width: 100%;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: var(--clr-card-bg);
}

@media ( max-width : calc(40rem + 1rem)) {
	div.index-grid>div {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		box-sizing: border-box;
	}
}

div.index-grid>div>div {
	width: 100%;
	padding: 0.5rem 0.5rem;
	background-color: var(--clr-card-inner);
	color: var(--clr-text);
}

div.index-grid>div>img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}

div.index-grid>div>a {
	margin: 0.5rem 0;
	text-decoration: none;
}

/* controls */
h1, h2, h3 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	text-align: center;
}

/* input row */
div.input-row>div:nth-child(3)>ul {
	color: OrangeRed;
}

label.required::after {
	color: Red;
}

/* tables */

/* -------------------------------------------------------------
   Flex‑table rows – uniform background, no hover effect
   ------------------------------------------------------------- */
div.flex-table>div {
	background-color: var(--clr-review-row-bg);
}

div.flex-table>div>div {
	padding: 1rem;
}

div.flex-table>div>div:first-child {
	font-weight: bold;
}

div.flex-table>div>div:last-child {
	white-space: preserve-breaks;
}

a.long-url {
	/* Make the element respect the width of its flex‑cell */
	display: inline-block; /* allows max‑width to take effect */
	max-width: 100%;
	/* Wrapping strategy for URLs */
	white-space: normal; /* normal wrapping for normal text */
	overflow-wrap: anywhere; /* break at any point if needed */
	word-break: break-word; /* fallback for older browsers */
}

/* display rows */
div.text-box {
	padding: 1rem;
	background-color: var(--clr-review-row-bg);
}

/* specific objects */
div#breadcrumb {
	background-color: var(--clr-breadcrumb-bg);
	color: var(--clr-breadcrumb-text);
}

div#breadcrumb a:link, div#breadcrumb a:visited {
	color: var(--clr-breadcrumb-link);
}

div#breadcrumb a:hover {
	color: var(--clr-breadcrumb-link-hover);
}

div#breadcrumb h1 {
	display: inline;
	font-size: 1rem;
	font-weight: bold;
}

div.announcement {
	background-color: #fff9c4; /* pale lemon‑yellow */
	color: #d50000; /* vivid scarlet red */
	padding: 0.75rem 1rem;
	text-align: center;
	font-weight: 600;
	font-size: 1.1rem;
	color: #d50000;
}

input#logout-button {
	color: var(--clr-header-link);
}

#language-selection {
	height: 2.5rem;
	width: 9rem;
	text-align: center;
	font: inherit;
}
/* -------------------------------------------------------------
   Site logo – image only, fills the full header height
   ------------------------------------------------------------- */
.site-logo {
	display: flex;
	align-items: center; /* vertical centering */
	height: 100%; /* match header height */
	padding: 0 1rem; /* optional horizontal spacing */
}

/* The <img> that loads the SVG */
.site-logo-img {
	height: 100%; /* fill header height */
	width: auto; /* keep aspect ratio */
}

div.airline-logo {
	margin: 0 0.5rem;
}

img.airline-logo {
	border-style: none;
	border-width: 0;
}

@media ( max-width : 30rem) {
	img.airline-logo {
		width: 100%;
		max-height: 100%;
	}
}

@media ( min-width : 30rem) {
	img.airline-logo {
		width: 30rem;
		max-height: 100%;
	}
}

.tooltip>.tooltiptext {
	background-color: var(--clr-tooltip-bg);
	color: var(--clr-tooltip-fg);
}

.tooltip>.tooltiptext::after {
	border-color: var(--clr-tooltip-bg) transparent transparent transparent;
}

div.state-PUBLIC {
	color: #008000;
	font-weight: bold;
}

div.state-PRIVATE {
	color: #FF0000;
	font-weight: bold;
}

div.state-HIDDEN_EDITABLE {
	color: #FF0000;
	font-weight: bold;
}

div.state-HIDDEN_LOCKED {
	color: #FF0000;
	font-weight: bold;
}