/* Joomla oldwaydogfields style sheet 
 * user.css in cassiopeia_oldwaydogfields template
 * Bob Briscoe, Jun 2026
 *
 * CONTENTS
 * 1. Modifications to Joomla
 * 2. Additions to Joomla
 */

/* 
 * 1. MODIFICATIONS TO JOOMLA
 * ========================================
 */

:root { /* added */
	--body-font-family:			"URW Bookman L", "URW Bookman", "Bookman Old Style", "Bookman", "Georgia", serif;
	--headings-font-family:		var(--body-font-family);
	--body-color:				var(--color-text-dark);
	--heading-color:			var(--color-text-dark);
	--body-background:			var(--color-background-light);
	--body-bg:					var(--color-background-light);
	--color-background-light:	Ivory;
	--color-background-dark:	DarkOliveGreen;
	--color-background-medium-dark:	DarkGoldenrod;
	--color-background-medium:	Wheat;
	--color-background-medium-light:	#fcf8e3;
	--color-background-light-gray: 	#e8e8e8;
	--color-background-vlight-gray: #f0f0f0;
	--color-background-highlight:	#d9534f;
	--color-text-light:			Wheat;
	--color-text-dark:			Black;
	--color-text-medium:		DarkOliveGreen;
	--color-text-dark-gray:		DimGray; /* Not DarkGray which is lighter than Gray */
	--color-text-gray:			Gray;
	--color-text-highlight:		Salmon;
	--color-link-text:			MidnightBlue;
	--color-link-text-visited:	Indigo;
	--color-link-text-hover:	CornflowerBlue;
	--color-link-background-dark:	OliveDrab;
	--color-border-dark:		DarkSlateGray;
	--color-border-medium:		Silver;
	--color-border-light:		Gainsboro;
	--color-border-highlight:	Salmon;
	--color-button:				DarkGoldenrod;
	--color-button-hover:		Goldenrod;
	--color-button-inactive:	#B7860B66; /* 40% DarkGoldenrod + Transparent */
	--color-button-border:		#B8860B; /* DarkGoldenrod + 20% Black */
	--color-gmaps-pending:		var(--color-background-medium-light); /* cream */
	--color-gmaps-ok:			#dff0d8; /* light green */
	--color-gmaps-failure:		#f2dede; /* pink */
	--color-picker-reserved:	#f0c2c2; /* close to Pink */
	--color-picker-available:	#c2dfd0; /* close to LightGreen */
	--color-picker-vacation:	#ffd699; /* close to apricot */
	--color-picker-medium:		#3D83A8; /* close to OliveDrab */
	--color-picker-violent-pink:	#ff0033; /* violent pink */
	--color-picker-dark-gray:	#a0a0a0; /* close to DarkGray */
	--color-picker-mid-gray:	#bbbbbb; /* mid-gray */
	--color-picker-medium-gray:	#c5c5c5; /* close to Silver */
	--color-picker-light-gray:	#e8e8e8; /* very light gray */
	--color-ulayout-light-gray:	#DDD; /* close to LightGray */
	--color-cart-light-gray:	#2533401c; /* 10% DarkSlateGray + Transparent	*/
}

.footer {
	color: var(--color-text-light);
	background-image: none;
	text-align: center;
}
.footer .mod-footer {
	margin: 0 auto;
}

.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
	color: var(--color-background-light);
}

.container-header {
	background-image: none;
}

.container-header .navbar-brand {
	color: var(--color-text-light);
	font-weight: bold;
}

.container-header .navbar-brand .brand-logo { /* added */
	font-size: 2.4rem;
}

.container-header .navbar-brand.custom-page-brand { /* added */
	font-size: 1.7rem;
}

.container-header .navbar-brand a {
	color: var(--color-text-light);
}

.container-header .navbar-brand a.brand-logo {
	text-decoration: none;
}

.container-header .navbar-brand:hover, .container-header .navbar-brand:focus {
	color: var(--color-text-light);
}

.container-header .navbar-brand a:hover, .container-header .navbar-brand a:focus { /* added */
	color: var(--color-background-light);
}

.container-header .mod-menu {
	color: var(--color-text-light);
}

.back-to-top-link {
	background-color: var(--color-background-light);
}

.back-to-top-link:hover, .back-to-top-link:focus {
	color: var(--color-text-light);
	background-color: var(--color-button-hover);
	border-color: var(--color-background-light);
}

/* 
 * 2. ADDITIONS TO JOOMLA
 * ========================================
 */

/* Reservation Steps (0)-(1)-(2)-(3)-(4)-(5)
 * _________________________________________
 * Copied from https://www.planyo.com/schemes/?calendar=70662&detect_mobile=auto&sel=scheme_css
 * Then colours modified
 */
.reservation_steps {
	margin: 0 8vw;
	padding: 9.8px;
} 
span.reservation_step, span.reservation_step_current {
	display:inline-block; 
	margin-right: 25px; 
	max-width:80px; 
	vertical-align:top;
}
.reservation_step .reservation_step_img, .reservation_step_current .reservation_step_img {
	margin-left: auto;
	margin-right: auto;
	margin-bottom:5px;
	padding-top:1px;
	width: 40px;
	height: 40px;
	text-align:center;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	line-height: initial;
}
.reservation_step_current .reservation_step_name {
	color: var(--color-button); /* reservation_form_steps:active-label-color */
}
.reservation_step .reservation_step_name {
	color: var(--color-button-inactive); /* reservation_form_steps:inactive-label-color */
}
.reservation_step .reservation_step_img {
	background-color:var(--color-button-inactive); /* reservation_form_steps:inactive-background-color */
}
.reservation_step_current .reservation_step_img {
	background-color:var(--color-button); /* reservation_form_steps:active-background-color */
}
.reservation_step .reservation_step_name, .reservation_step_current .reservation_step_name {
/*	font-family:sans-serif;*/
	font-size: 12px;
	font-weight: bold;
	text-align:center;
	margin-bottom:8px;
}
.reservation_step_current .reservation_step_img_text, #steps-desktop .reservation_steps .reservation_step .reservation_step_img_text strong, div.reservation_step_img_text {
	padding-top: 9px; 
	font-size: 16px; 
	color: var(--color-background-light); /* reservation_form_steps:step-number-color */
	text-align:center;
}
.reservation_step_current .reservation_step_img_text {
	color: var(--color-background-light); /* reservation_form_steps:step-number-color */
}
html .with-status-border-error {
	border:1px solid var(--color-border-highlight) !important;
}
/* BB Added 3-May-2026 to force-enable reservation steps on mobile */
.planyo .reservation_steps {
	display: block !important;
} 
.planyo .reservation_steps .reservation_step
{
	display: inline-block !important;
}
.planyo .reservation_steps .reservation_step_name
{
	font-size:14px !important;
}

/* Button Bar
 * _________________________________________
 */
/* Layout */
.reservation_steps .button-bar {
	display:inline-block;
	margin: 9px auto;
	height: auto;
	vertical-align: middle;
}
/* General Button */
.reservation_steps .button {
	position: relative;
	margin: 0;
	padding: 0.2rem 3px;
	background-color: var(--color-button);
	color: var(--color-background-light);
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
}
.reservation_steps .button:hover {
	background-color: var(--color-button-hover);
	color: var(--color-background-light);
}
.reservation_steps a.button {
	text-decoration: none;
}
/* Arrow Buttons 
 * (border of a 0x0 box consists of 4 triangles pointing to the centre)
 */
.reservation_steps .button::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.86rem; /* (1.32rem + 2×0.2rem)/2 */
}
/* Next Button */
.reservation_steps .next::after {
	right: -1.68rem;
	border-color: transparent transparent transparent var(--color-button);
}
.reservation_steps .next:hover::after {
	border-left-color: var(--color-button-hover);
}
/* Prev Button */
.reservation_steps .prev::after {
	left: -1.68rem;
	border-color: transparent var(--color-button) transparent transparent;
}
.reservation_steps .prev:hover::after {
	border-right-color: var(--color-button-hover);
}

/* Planyo iframe wrapper
 * _________________________________________
 */
#wrap_planyo_iframe {
	width: 100%;
	min-height: 600px; /* Safe height for "Login required" messages */
	border: none;
	display: block;
}
body.contentpane.component {
	padding: 0;
}

/* Stripey tables
 * _________________________________________
 */
table.stripey, table.stripey th, table.stripey td {
	border: 7px solid var(--color-background-light);
	padding: 4px 0.7em;
	font-size: 1.1rem;
	vertical-align: bottom;
}
table.stripey tr:nth-child(odd) {
	background-color: var(--color-text-light);
}

table.stripey th {
	background-color: var(--color-background-medium-dark);
	color: var(--color-text-light);
}
table.stripey .heading {
	font-weight: bold;
	color: var(--color-button);
}
table.stripey .ndogs {
	text-align: right;
}
table.stripey .price {
	text-align: center;
}

/* Misc
 * _________________________________________
 */
.hr_note {
	width: 20%;
	text-align: left;
	margin-left: 0;
}
table.centered {
	margin: 0 auto;
}
div.centered {
	text-align: center;
}
img {
	padding: 2em 0;
}