/*

Theme Name: Holidays2025

Theme URI: http://thetrafficexchangescript.com/

Description: A winter holiday theme featuring San Francisco landmarks with purple sunset colors.

Version: 3.0

Author: Josh Abbott (customized)

*/


@charset "utf-8";

/* =====================================================
   Purple Sunset Winter San Francisco Color Palette
   ===================================================== */
:root {
	--sunset-deep-purple: #1a0a2e;
	--sunset-purple: #3d1a5c;
	--sunset-magenta: #5c2a7a;
	--sunset-pink: #9c4a8c;
	--sunset-light-pink: #c46ba3;
	--sunset-orange: #f5a623;
	--sunset-coral: #ff7e5f;
	--winter-ice: #a8d8ea;
	--winter-snow: #f0f4f8;
	--winter-frost: #d6e6f2;
	--text-light: #f8f4fc;
	--text-dark: #1a0a2e;
}

/* Main font settings */

body {
	font-size: 16px;
	font-weight: 400;
	color: var(--text-light);
	background: linear-gradient(180deg,
		#1a0a2e 0%,
		#3d1a5c 25%,
		#5c2a7a 50%,
		#9c4a8c 75%,
		#c46ba3 100%);
	background-attachment: fixed;
	min-height: 100vh;
}


/* Main page structure */

.lfm_outerdiv {
	display: flex;
	width: 100%;
	align-items: stretch;
}
.main {
	width: 100%;
}



/* Site logo styles */

.lfm_menu_logo {
	max-height: 35px;
	margin: 0.5rem 1.2rem 0.3rem 1.2rem;
}

/* Site name text in sidebar */
.lfm_menu_sitename {
	display: block;
	color: var(--winter-snow);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	padding: 0.8rem 1.2rem;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	border-bottom: 1px solid var(--sunset-magenta);
	transition: color 0.3s ease;
}

.lfm_menu_sitename:hover {
	color: var(--sunset-orange);
	text-decoration: none;
}


/* Styles for the top bar */

.lfm_topbar {
	background: linear-gradient(135deg, var(--sunset-deep-purple) 0%, var(--sunset-purple) 100%);
	color: var(--winter-snow);
	margin-bottom: 0;
	border-bottom: 2px solid var(--sunset-orange);
	box-shadow: 0 2px 15px rgba(156, 74, 140, 0.4);
}


/* Styles for the slidebar navigation */

.lfm_slidebar {
	min-width: 225px;
	max-width: 225px;
	min-height: 100vh;
	transition: all 0.4s ease-in-out;
	background: linear-gradient(180deg, var(--sunset-deep-purple) 0%, var(--sunset-purple) 100%);
	border-right: 2px solid var(--sunset-magenta);
}

/* Desktop View Settings - Expand the slidebar by default */
@media (min-width: 890px) {
	.lfm_slidebar {
		margin-left: 0px;
	}
	.lfm_slidebar.toggled {
		margin-left: -225px;
	}
}

/* Mobile View Settings - Collapse the slidebar by default */
@media (max-width: 889px) {
	.lfm_slidebar {
		margin-left: -225px;
	}
	.lfm_slidebar.toggled {
		margin-left: 0px;
	}
}

.lfm_slidebar_toggleswitch {
	cursor: pointer;
	font-size: 24px;
	color: var(--winter-snow);
	padding-right: 10px;
	transition: color 0.3s ease;
}
.lfm_slidebar_toggleswitch:hover {
	color: var(--sunset-orange);
}

.lfm_slidebar_mainmenu {
	list-style: none;
	padding-left: 0;
	overflow: auto;
}


/* This sets the style of the slidebar menu items */
.lfm_slidebar_mainmenu li > a {
	color: var(--winter-snow);
	background: linear-gradient(90deg, var(--sunset-purple) 0%, var(--sunset-magenta) 100%);
	border-bottom: 1px solid rgba(156, 74, 140, 0.5);
	text-decoration: none;
	display: block;
	margin: 0px;
	padding: 0.5rem 1.1rem 0.5rem 1.1rem;
	font-size: 16px;
	position: relative;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* This sets the colors of the slidebar menu links when you hover over them */
.lfm_slidebar_mainmenu li > a.active,
.lfm_slidebar_mainmenu li > a:hover {
	color: var(--sunset-orange);
	background: linear-gradient(90deg, var(--sunset-magenta) 0%, var(--sunset-pink) 100%);
	padding-left: 1.4rem;
}



/* Styles for the footer */

.lfm_footer {
	background: linear-gradient(135deg, var(--sunset-deep-purple) 0%, #0d0518 100%);
	border-top: 2px solid var(--sunset-magenta);
}


/* Icon settings */

.far, .fas {
	margin-right:3px;
}

.feedicon {
	color: var(--sunset-light-pink);
	font-size:20px;
	margin-right:5px;
}


/* Profile picture sizes */

.profilepic_small {
	width:40px;
	height:40px;
}

.profilepic_med {
	width:75px;
	height:75px;
}

.profilepic_large {
	width:200px;
	height:200px;
}


/* Various styles */

.buttonlink {
	/* This class defines <a> tag links that look like buttons */
	cursor: pointer;
	background: linear-gradient(135deg, var(--sunset-magenta) 0%, var(--sunset-pink) 100%);
	border-radius: 4px;
	border: 1px solid var(--sunset-light-pink);
	display:inline-block;
	cursor:pointer;
	color: var(--winter-snow);
	font-family: arial;
	font-size: 18px;
	font-weight: 500;
	padding: 4px 12px;
	margin: 2px 1px 2px 1px;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(156, 74, 140, 0.3);
	transition: all 0.3s ease;
}
.buttonlink:hover {
	/* This controls the button links when you hover over them */
	color: var(--winter-snow);
	background: linear-gradient(135deg, var(--sunset-pink) 0%, var(--sunset-light-pink) 100%);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(156, 74, 140, 0.4);
}


.infobar {
	/* This class defines sections that span the entire page width */
	width: 100%;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #333333;
	background: linear-gradient(135deg, rgba(220, 200, 240, 0.9) 0%, rgba(200, 180, 220, 0.9) 100%);
}
.infobar h2 {
	color: var(--sunset-deep-purple);
}


.vcenter {
	/* This is a class that can be used in Bootstrap rows to vertically center the content */
	display: flex;
	align-items: center;
}


/* The next 3 sections control various text styles used throughout the LFM Members Area */
.lfm_title {
	font-family: "Arial";
	color: var(--sunset-deep-purple);
	font-size: 32px;
	text-shadow: 1px 1px 2px rgba(26, 10, 46, 0.2);
}

.lfm_descr {
	font-family: "Arial";
	color: #333333;
	font-size: 16px;
}

.lfm_descr_bold {
	font-family: "Arial";
	color: #222222;
	font-size: 16px;
	font-weight: 700;
}


/* =====================================================
   Custom Header Banner - San Francisco Winter Skyline
   ===================================================== */

.sf-header-banner {
	position: relative;
	width: 100%;
	background: linear-gradient(180deg,
		#0d051a 0%,
		#1a0a2e 12%,
		#3d1a5c 30%,
		#5c2a7a 45%,
		#9c4a8c 60%,
		#c46ba3 75%,
		#ff7e5f 90%,
		#f5a623 100%);
	overflow: hidden;
	min-height: 240px;
}

/* Sunset glow effect */
.sf-header-banner::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: radial-gradient(ellipse at 50% 100%, rgba(245, 166, 35, 0.4) 0%, transparent 70%);
	pointer-events: none;
}

/* San Francisco Skyline - Created with CSS */
.sf-skyline {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 180px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Golden Gate Bridge */
.golden-gate {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;
	max-width: 90%;
}

/* Bridge towers */
.bridge-tower {
	position: absolute;
	width: 20px;
	height: 120px;
	background: linear-gradient(180deg, #1a0a2e 0%, #2d1845 100%);
	border-radius: 2px 2px 0 0;
}

.bridge-tower-left {
	left: 80px;
}

.bridge-tower-right {
	right: 80px;
}

/* Bridge deck */
.bridge-deck {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	height: 12px;
	background: #1a0a2e;
}

/* Bridge cables - main suspension */
.bridge-cable {
	position: absolute;
	width: 340px;
	height: 60px;
	border: 3px solid transparent;
	border-top-color: #1a0a2e;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	top: 60px;
	left: 50%;
	transform: translateX(-50%) rotate(180deg);
}

/* Vertical cables */
.vertical-cables {
	position: absolute;
	bottom: 42px;
	left: 100px;
	right: 100px;
	height: 80px;
	background: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 18px,
		#1a0a2e 18px,
		#1a0a2e 20px
	);
}

/* Transamerica Pyramid */
.transamerica {
	position: absolute;
	bottom: 20px;
	right: 15%;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 130px solid #1a0a2e;
}

.transamerica::before {
	content: '';
	position: absolute;
	top: 130px;
	left: -15px;
	width: 30px;
	height: 15px;
	background: #1a0a2e;
}

/* City buildings silhouette */
.city-buildings {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
}

.building {
	position: absolute;
	bottom: 0;
	background: #1a0a2e;
}

/* Header text/branding area */
.sf-header-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 20px 15px 100px 15px;
}

.sf-header-title {
	font-size: 28px;
	font-weight: 700;
	color: var(--winter-snow);
	text-shadow: 2px 2px 8px rgba(26, 10, 46, 0.8);
	margin: 0;
	letter-spacing: 2px;
}

.sf-header-tagline {
	font-size: 14px;
	color: var(--winter-frost);
	text-shadow: 1px 1px 4px rgba(26, 10, 46, 0.8);
	margin-top: 5px;
}


/* =====================================================
   Snowflakes Animation
   ===================================================== */

.snowflakes {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
}

.snowflake {
	position: absolute;
	top: -20px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	animation: snowfall linear infinite;
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(168, 216, 234, 0.5);
}

.snowflake:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; font-size: 12px; }
.snowflake:nth-child(2) { left: 15%; animation-duration: 10s; animation-delay: 1s; font-size: 18px; }
.snowflake:nth-child(3) { left: 25%; animation-duration: 7s; animation-delay: 2s; font-size: 14px; }
.snowflake:nth-child(4) { left: 35%; animation-duration: 9s; animation-delay: 0.5s; font-size: 20px; }
.snowflake:nth-child(5) { left: 45%; animation-duration: 11s; animation-delay: 3s; font-size: 10px; }
.snowflake:nth-child(6) { left: 55%; animation-duration: 8s; animation-delay: 1.5s; font-size: 16px; }
.snowflake:nth-child(7) { left: 65%; animation-duration: 10s; animation-delay: 2.5s; font-size: 22px; }
.snowflake:nth-child(8) { left: 75%; animation-duration: 6s; animation-delay: 0s; font-size: 14px; }
.snowflake:nth-child(9) { left: 85%; animation-duration: 9s; animation-delay: 1s; font-size: 18px; }
.snowflake:nth-child(10) { left: 95%; animation-duration: 7s; animation-delay: 2s; font-size: 12px; }

@keyframes snowfall {
	0% {
		transform: translateY(-20px) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(250px) rotate(360deg);
		opacity: 0.4;
	}
}


/* =====================================================
   Content Area Styling
   ===================================================== */

.content {
	background: #c86e88;
	border-radius: 0;
	margin: 0;
	padding: 20px 0;
	min-height: 60vh;
}

/* Card styling for content boxes */
.card {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 240, 250, 0.95) 100%);
	border: 1px solid var(--sunset-magenta);
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(26, 10, 46, 0.3);
}

.card-header {
	background: linear-gradient(135deg, var(--sunset-magenta) 0%, var(--sunset-pink) 100%);
	border-bottom: 1px solid var(--sunset-light-pink);
	color: var(--winter-snow);
}

.card-body {
	color: #333333;
}

/* Table styling */
.table {
	color: #333333;
}

.table thead th {
	background: var(--sunset-purple);
	color: var(--winter-snow);
	border-bottom: 2px solid var(--sunset-magenta);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(200, 180, 220, 0.4);
}

.table-striped tbody tr:nth-of-type(even) {
	background-color: rgba(220, 200, 240, 0.3);
}

.table td, .table th {
	border-color: rgba(156, 74, 140, 0.3);
}

/* Form styling */
.form-control {
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid var(--sunset-magenta);
	color: #333333;
}

.form-control:focus {
	background: rgba(255, 255, 255, 1);
	border-color: var(--sunset-orange);
	color: #333333;
	box-shadow: 0 0 0 0.2rem rgba(245, 166, 35, 0.25);
}

.form-control::placeholder {
	color: rgba(100, 100, 100, 0.6);
}

/* Button overrides */
.btn-primary {
	background: linear-gradient(135deg, var(--sunset-magenta) 0%, var(--sunset-pink) 100%);
	border-color: var(--sunset-light-pink);
}

.btn-primary:hover {
	background: linear-gradient(135deg, var(--sunset-pink) 0%, var(--sunset-light-pink) 100%);
	border-color: var(--sunset-light-pink);
}

.btn-success {
	background: linear-gradient(135deg, #2d8a4e 0%, #38a169 100%);
	border-color: #38a169;
}

.btn-success:hover {
	background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
}

/* Alert styling */
.alert-info {
	background: rgba(168, 216, 234, 0.2);
	border-color: var(--winter-ice);
	color: var(--winter-frost);
}

.alert-success {
	background: rgba(56, 161, 105, 0.2);
	border-color: #38a169;
	color: #9ae6b4;
}

.alert-warning {
	background: rgba(245, 166, 35, 0.2);
	border-color: var(--sunset-orange);
	color: #fbd38d;
}

.alert-danger {
	background: rgba(255, 126, 95, 0.2);
	border-color: var(--sunset-coral);
	color: #feb2b2;
}

/* Link styling */
a {
	color: var(--winter-ice);
	transition: color 0.3s ease;
}

a:hover {
	color: var(--sunset-orange);
	text-decoration: none;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
	color: var(--sunset-deep-purple);
}

/* Content area text - ensure dark text on light background */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
	color: var(--sunset-deep-purple);
}

.content p, .content span, .content div {
	color: #333333;
}

.content a {
	color: var(--sunset-magenta);
}

.content a:hover {
	color: var(--sunset-purple);
}


/* =====================================================
   Holiday Decorations - Holly and Lights
   ===================================================== */

/* Twinkling lights effect on top bar */
.lfm_topbar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: repeating-linear-gradient(
		90deg,
		transparent 0px,
		transparent 20px,
		#ff6b6b 20px,
		#ff6b6b 25px,
		transparent 25px,
		transparent 45px,
		#4ecdc4 45px,
		#4ecdc4 50px,
		transparent 50px,
		transparent 70px,
		#f5a623 70px,
		#f5a623 75px,
		transparent 75px,
		transparent 95px,
		#a8d8ea 95px,
		#a8d8ea 100px
	);
	animation: twinkle 2s ease-in-out infinite alternate;
}

@keyframes twinkle {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}


/* =====================================================
   Responsive Adjustments
   ===================================================== */

@media (max-width: 768px) {
	.sf-header-banner {
		min-height: 150px;
	}

	.sf-header-title {
		font-size: 20px;
	}

	.sf-header-content {
		padding: 15px 10px 80px 10px;
	}

	.golden-gate {
		width: 300px;
	}

	.bridge-tower {
		width: 12px;
		height: 80px;
	}

	.bridge-tower-left {
		left: 50px;
	}

	.bridge-tower-right {
		right: 50px;
	}

	.bridge-cable {
		width: 200px;
		height: 40px;
		top: 40px;
	}

	.vertical-cables {
		left: 60px;
		right: 60px;
		height: 50px;
	}

	.transamerica {
		border-left-width: 15px;
		border-right-width: 15px;
		border-bottom-width: 80px;
		right: 10%;
	}
}

@media (max-width: 480px) {
	.sf-header-title {
		font-size: 16px;
		letter-spacing: 1px;
	}

	.sf-header-tagline {
		font-size: 12px;
	}

	.golden-gate {
		width: 250px;
	}
}


/* =====================================================
   Water Reflection Effect
   ===================================================== */

.water-reflection {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 25px;
	background: linear-gradient(180deg,
		rgba(26, 10, 46, 0.8) 0%,
		rgba(168, 216, 234, 0.3) 50%,
		rgba(168, 216, 234, 0.1) 100%);
	animation: waterShimmer 3s ease-in-out infinite;
}

@keyframes waterShimmer {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.8; }
}


/* =====================================================
   SVG Skyline Styling (for header)
   ===================================================== */

.sf-skyline-svg {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
}

.sf-skyline-svg path {
	fill: #1a0a2e;
}