/* Wilro Park Lions - site-specific styles.
   Background images are set here rather than in inline style="" attributes,
   because paths in a CSS file are relative to the CSS file itself and so work
   the same from the Templates folder and from every page. */

/* Home page hero picture */
.lions_hero {
	background-image: url(../img/bg/lionsBackground.jpg);
	background-size: cover;
	background-position: center center;
}

/* Band behind the menu on inner pages: plain white */
.inner_banner {
	position: relative;
	width: 100%;
	height: 250px;
	background-color: #ffffff;
}

/* Inner pages: black menu text on the white band.
   .inner_page is set on <body> by the template when HOME is off,
   so the Home page keeps its white menu over the hero picture.
   !important is needed because the theme sets the white menu colour
   more forcefully than a normal rule can override. */
.inner_page .site-navbar .site-menu > li > a,
.inner_page .site-navbar .site-menu > li > a.nav-link,
.inner_page .site-navbar .site-menu-toggle,
.inner_page .site-navbar .site-menu-toggle span {
	color: #000000 !important;
}
.inner_page .site-navbar .site-menu > li > a:hover,
.inner_page .site-navbar .site-menu > li > a.nav-link:hover {
	color: #00338d !important; /* Lions blue */
}

/* Footer background */
.footer {
	background-image: url(../img/bg/footer.png);
	background-size: cover;
}

/* ------------------------------------------------------------------
   Members' area (login, dashboard, users, my account)
   ------------------------------------------------------------------ */
.lions_members {
	background: #f5f6f8;
	min-height: 60vh;
}
.lions_members h2 {
	color: #00338d;
}
.lions_login {
	max-width: 440px;
	margin: 0 auto;
	background: #ffffff;
	border-top: 5px solid #ebb700; /* Lions gold */
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 35px 35px 25px;
}
.lions_login_icon {
	font-size: 40px;
	color: #00338d;
	margin-bottom: 10px;
}
.lions_login label,
.lions_panel label {
	font-weight: 600;
	color: #333333;
}
.lions_login_help {
	margin: 20px 0 0;
	font-size: 14px;
	text-align: center;
	color: #666666;
}
.lions_btn,
.lions_btn:focus {
	background: #00338d;
	border: 2px solid #00338d;
	color: #ffffff;
	font-weight: 600;
	padding: 10px 24px;
}
.lions_btn:hover {
	background: #ebb700;
	border-color: #ebb700;
	color: #000000;
}
.lions_btn_outline {
	background: #ffffff;
	border: 2px solid #00338d;
	color: #00338d;
	font-weight: 600;
	padding: 10px 24px;
}
.lions_btn_outline:hover {
	background: #00338d;
	color: #ffffff;
}

/* Bar across the top of members' pages: heading + who is logged in */
.member_bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 2px solid #ebb700;
	padding-bottom: 12px;
	margin-bottom: 25px;
}
.member_bar h2 {
	margin: 0;
	font-size: 28px;
}
.member_bar_user {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 15px;
}
.member_bar_user a {
	color: #00338d;
	font-weight: 600;
}
.lions_intro {
	font-size: 16px;
	margin-bottom: 25px;
}

/* Access-level badges */
.role_badge,
.soon_badge,
.admin_only_badge,
.off_badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.role_admin       { background: #00338d; color: #ffffff; }
.role_agent       { background: #ebb700; color: #000000; }
.soon_badge       { background: #e1e4ea; color: #555555; }
.admin_only_badge { background: #ffffff; color: #00338d; border: 1px solid #00338d; }
.off_badge        { background: #f8d7da; color: #721c24; margin-left: 6px; }

/* Dashboard function tiles */
.function_tile {
	display: block;
	position: relative;
	background: #ffffff;
	border-radius: 4px;
	border-left: 4px solid #00338d;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 25px;
	margin-bottom: 25px;
	min-height: 190px;
	color: #444444;
	transition: transform 0.15s, box-shadow 0.15s;
}
a.function_tile:hover {
	text-decoration: none;
	color: #444444;
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.function_tile i {
	font-size: 30px;
	color: #00338d;
	margin-bottom: 12px;
}
.function_tile h4 {
	color: #00338d;
	font-size: 20px;
	margin-bottom: 8px;
}
.function_tile_soon {
	opacity: 0.7;
	border-left-color: #c5cad3;
}
.function_tile .soon_badge,
.function_tile .admin_only_badge {
	margin-right: 6px;
}

/* Panels, tables and account details */
.lions_panel {
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 25px;
	margin-bottom: 25px;
}
.lions_panel h4 {
	color: #00338d;
	margin-bottom: 18px;
}
.lions_table th {
	border-top: none;
	color: #00338d;
	font-size: 14px;
	white-space: nowrap;
}
.lions_table td {
	vertical-align: middle;
	font-size: 15px;
}
.lions_table td a {
	color: #00338d;
	font-weight: 600;
}
.lions_table tr.user_off td {
	color: #999999;
}
.account_details {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 8px 15px;
	margin: 0;
}
.account_details dt { color: #666666; font-weight: 600; }
.account_details dd { margin: 0; }

/* Member login link in the footer */
.footer_copyright .footer_login {
	white-space: nowrap;
}
.footer_copyright .footer_login i {
	margin-right: 4px;
}

@media (max-width: 575px) {
	.lions_login { padding: 25px 20px 20px; }
	.account_details { grid-template-columns: 1fr; }
}

/* Dashboard tiles in a row all take the same height */
.function_tiles > div {
	display: flex;
}
.function_tiles .function_tile {
	width: 100%;
}
.lions_login .btn-block {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------
   Events page
   ------------------------------------------------------------------ */
.events_area {
	padding: 40px 0 70px;
}
.events_heading {
	color: #00338d;
	font-size: 24px;
	border-bottom: 2px solid #ebb700;
	padding-bottom: 10px;
	margin-bottom: 25px;
}
.events_heading_past {
	margin-top: 45px;
}
.event_item {
	display: flex;
	align-items: flex-start;
	background: #ffffff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 20px;
	margin-bottom: 20px;
}
.event_date {
	flex: 0 0 80px;
	text-align: center;
	background: #00338d;
	color: #ffffff;
	border-radius: 4px;
	padding: 10px 0;
	margin-right: 20px;
	line-height: 1;
}
.event_day {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	font-weight: 500;
}
.event_month {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #ebb700;
}
.event_body {
	flex: 1 1 auto;
	min-width: 0;
}
.event_body h4 {
	color: #00338d;
	font-size: 20px;
	margin: 0 0 8px;
}
.event_tag {
	display: inline-block;
	vertical-align: middle;
	background: #ebb700;
	color: #000000;
	border-radius: 12px;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-left: 6px;
}
.event_meta {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	font-size: 14px;
	color: #666666;
}
.event_meta li {
	display: inline-block;
	margin-right: 18px;
}
.event_meta i {
	color: #00338d;
	margin-right: 6px;
}
.event_body p {
	margin: 0;
}
/* Past events are shown greyed out */
.events_past .event_date {
	background: #c5cad3;
	color: #333333;
}
.events_past .event_month {
	color: #333333;
}
.events_past .event_body h4 {
	color: #555555;
}
.events_sidebar .lions_panel {
	border-top: 4px solid #ebb700;
}
.events_meetings h4 i {
	margin-right: 6px;
}
.events_meetings_when {
	margin-bottom: 0;
}
.events_cta .btn {
	margin: 5px 5px 0 0;
}
@media (max-width: 991px) {
	.events_sidebar {
		margin-top: 40px;
	}
}
@media (max-width: 575px) {
	.event_item {
		padding: 15px;
	}
	.event_date {
		flex-basis: 64px;
		margin-right: 14px;
	}
	.event_day {
		font-size: 26px;
	}
}

/* ------------------------------------------------------------------
   Gallery page
   ------------------------------------------------------------------ */
.gallery_area {
	padding: 40px 0 70px;
}
.gallery_filter {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
}
.gallery_filter li {
	display: inline-block;
	margin: 0 4px 8px;
}
.gallery_filter button {
	background: #ffffff;
	border: 2px solid #00338d;
	border-radius: 20px;
	color: #00338d;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 18px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.gallery_filter button:hover,
.gallery_filter button.active {
	background: #00338d;
	color: #ffffff;
}
.gallery_filter button:focus {
	outline: 2px solid #ebb700;
	outline-offset: 2px;
}
.gallery_item {
	margin-bottom: 30px;
}
.gallery_item.gallery_hidden {
	display: none;
}
/* Square tiles: every photo is cropped to the same shape so the grid lines up */
.gallery_link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	padding-top: 75%; /* 4:3 tile */
	background: #e1e4ea url(../img/Lions-logo.png) no-repeat center center;
	background-size: 70px auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.gallery_link img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}
.gallery_link img.gallery_missing {
	display: none; /* photo not added yet - the grey placeholder shows instead */
}
.gallery_link:hover img {
	transform: scale(1.06);
}
.gallery_caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 15px 12px;
	background: linear-gradient(to top, rgba(0, 51, 141, 0.9), rgba(0, 51, 141, 0));
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
}
.gallery_link:hover .gallery_caption {
	border-bottom: 4px solid #ebb700;
}
.gallery_more {
	margin: 15px 0 0;
	color: #666666;
}
.gallery_more a {
	color: #00338d;
	font-weight: 600;
}
.gallery_none {
	color: #666666;
	font-size: 16px;
	padding: 20px 0 10px;
}

/* ------------------------------------------------------------------
   Members' area: Gallery photos (gallery_admin.php)
   ------------------------------------------------------------------ */
.gallery_upload {
	border-top: 4px solid #ebb700;
}
.gallery_upload h4 i {
	margin-right: 6px;
}
.upload_preview {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 13px;
	color: #666666;
}
.upload_preview img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 3px;
}
.upload_status {
	margin-top: 15px;
	font-weight: 600;
	color: #00338d;
}
.upload_status .alert {
	font-weight: normal;
	margin-bottom: 8px;
}
.gallery_tips {
	padding-left: 18px;
	margin: 0;
	font-size: 14px;
}
.gallery_tips li {
	margin-bottom: 8px;
}
.gallery_tips a {
	color: #00338d;
	font-weight: 600;
}
.gallery_admin_head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 18px;
}
.gallery_admin_head h4 {
	margin: 0;
}
.gallery_admin_head h4 small {
	color: #666666;
	font-size: 15px;
}
.gallery_empty {
	text-align: center;
	color: #888888;
	padding: 30px 0;
}
.gallery_empty i {
	font-size: 40px;
	color: #c5cad3;
	margin-bottom: 10px;
}
.photo_card {
	border: 1px solid #e1e4ea;
	border-radius: 4px;
	padding: 12px;
	margin-bottom: 20px;
	background: #ffffff;
}
.photo_card_img {
	display: block;
	position: relative;
	padding-top: 66%;
	overflow: hidden;
	border-radius: 3px;
	background: #e1e4ea;
	margin-bottom: 12px;
}
.photo_card_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.photo_card_img .off_badge {
	position: absolute;
	top: 8px;
	left: 8px;
	margin: 0;
}
.photo_hidden .photo_card_img img {
	opacity: 0.45;
}
.photo_card .form-group {
	margin-bottom: 8px;
}
.photo_delete {
	display: inline-block;
	float: right;
	margin-top: -36px;
}
.photo_meta {
	clear: both;
	margin: 8px 0 0;
	font-size: 12px;
	color: #888888;
}