/* Section Landing Page Styles */

.sp-section-landing {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

/* Header */
.sp-landing-header {
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom: 3px solid #688664;
}

.sp-landing-title {
	font-size: 2.5em;
	margin: 0 0 10px 0;
	color: #333;
}

.sp-landing-section {
	font-size: 1.2em;
	color: #666;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Current Meeting */
.sp-current-meeting {
	background: #385435;
	color: white;
	padding: 30px;
	border-radius: 12px;
	margin-bottom: 40px;
	box-shadow: 0 4px 20px rgba(56, 84, 53, 0.3);
}

.sp-current-meeting.sp-meeting-today {
	background: #ff9800;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 4px 20px rgba(255, 152, 0, 0.3); }
	50% { box-shadow: 0 4px 30px rgba(255, 152, 0, 0.6); }
}

.sp-current-meeting h2 {
	margin: 0 0 20px 0;
	font-size: 1.8em;
	color: white;
}

.sp-no-meeting {
	background: #f5f5f5;
	color: #666;
	text-align: center;
}

.sp-no-meeting h2 {
	color: #666;
}

/* Meeting Summary */
.sp-meeting-summary {
	background: rgba(255, 255, 255, 0.95);
	color: #333;
	padding: 25px;
	border-radius: 8px;
}

.sp-meeting-summary-title {
	margin: 0 0 15px 0;
	font-size: 1.6em;
}

.sp-meeting-summary-title a {
	color: #385435;
	text-decoration: none;
	transition: color 0.3s;
}

.sp-meeting-summary-title a:hover {
	color: #688664;
}

.sp-meeting-summary-meta {
	margin-bottom: 20px;
}

.sp-meeting-summary-meta > div {
	margin-bottom: 10px;
	font-size: 1.1em;
}

.sp-icon {
	display: inline-block;
	margin-right: 8px;
	font-size: 1.2em;
}

.sp-full-date {
	color: #666;
	font-size: 0.9em;
	font-weight: normal;
}

/* Bring Items */
.sp-meeting-bring-items {
	background: #fffbf0;
	border-left: 4px solid #ffc107;
	padding: 15px;
	margin: 20px 0;
	border-radius: 4px;
}

.sp-meeting-bring-items h4 {
	margin: 0 0 10px 0;
	color: #f57c00;
	font-size: 1.1em;
}

.sp-bring-items-content {
	margin: 0;
}

.sp-bring-items-content p {
	margin: 0.5em 0;
}

/* Actions */
.sp-meeting-actions {
	margin-top: 20px;
	text-align: center;
}

.sp-button {
	display: inline-block;
	padding: 12px 30px;
	font-size: 1.1em;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.3s;
	font-weight: 600;
}

.sp-button-primary {
	background: #688664;
	color: white;
}

.sp-button-primary:hover {
	background: #385435;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(104, 134, 100, 0.4);
}

/* Upcoming Meetings */
.sp-upcoming-meetings {
	margin-bottom: 40px;
}

.sp-upcoming-meetings h2 {
	font-size: 2em;
	margin: 0 0 25px 0;
	color: #333;
}

.sp-meetings-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* Meeting Cards */
.sp-meeting-card {
	display: flex;
	background: white;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}

/* Interactive - entire card is clickable link */
.sp-meeting-card:hover {
	border-color: #688664;
	box-shadow: 0 4px 12px rgba(104, 134, 100, 0.2);
	transform: translateY(-2px);
	text-decoration: none;
}

.sp-meeting-card-date {
	background: #688664;
	color: white;
	padding: 15px;
	text-align: center;
	min-width: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sp-date-month {
	font-size: 0.9em;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
}

.sp-date-day {
	font-size: 2.5em;
	font-weight: 700;
	line-height: 1;
	margin-top: 5px;
}

.sp-meeting-card-content {
	padding: 15px;
	flex: 1;
}

.sp-meeting-card-content h3 {
	margin: 0 0 10px 0;
	font-size: 1.2em;
	line-height: 1.3;
	color: #333;
	transition: color 0.3s;
}

.sp-meeting-card:hover h3 {
	color: #688664;
}

.sp-meeting-card-meta {
	font-size: 0.95em;
	color: #666;
}

.sp-meeting-card-meta span {
	display: block;
	margin-bottom: 5px;
}

.sp-meeting-card-meta .sp-time::before {
	content: "🕐 ";
}

.sp-meeting-card-meta .sp-location::before {
	content: "📍 ";
}

/* Error State */
.sp-error {
	background: #ffebee;
	color: #c62828;
	padding: 15px;
	border-left: 4px solid #c62828;
	border-radius: 4px;
}

/* Upcoming Camps */
.sp-upcoming-camps {
	margin-bottom: 40px;
}

.sp-upcoming-camps h2 {
	font-size: 2em;
	margin: 0 0 25px 0;
	color: #333;
}

.sp-camps-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 25px;
}

/* Camp Cards */
.sp-camp-card {
	background: white;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Note: Hover removed - card itself not clickable, only button inside it */

.sp-camp-card-header {
	background: linear-gradient(135deg, #688664 0%, #385435 100%);
	color: white;
	padding: 20px;
}

.sp-camp-title {
	margin: 0 0 10px 0;
	font-size: 1.4em;
	line-height: 1.3;
}

.sp-camp-title a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.sp-camp-title a:hover {
	opacity: 0.9;
}

.sp-camp-countdown {
	margin-top: 10px;
	font-size: 0.95em;
}

/* Countdown Badges - Using CSS variables with WCAG AA contrast */
.sp-countdown-today {
	display: inline-block;
	background: var(--sp-badge-today-bg, #ff5722);
	color: var(--sp-badge-today-text, #fff);
	padding: var(--sp-space-1, 5px) var(--sp-space-3, 12px);
	border-radius: var(--sp-radius-full, 20px);
	font-weight: var(--sp-font-semibold, 600);
	font-size: var(--sp-text-sm, 0.875rem);
	animation: pulse 2s ease-in-out infinite;
}

.sp-countdown-soon {
	display: inline-block;
	background: var(--sp-badge-soon-bg, #ff9800);
	color: var(--sp-badge-soon-text, #fff);
	padding: var(--sp-space-1, 5px) var(--sp-space-3, 12px);
	border-radius: var(--sp-radius-full, 20px);
	font-weight: var(--sp-font-semibold, 600);
	font-size: var(--sp-text-sm, 0.875rem);
}

.sp-countdown-urgent {
	display: inline-block;
	background: var(--sp-badge-urgent-bg, #ffc107);
	color: var(--sp-badge-urgent-text, #333);
	padding: var(--sp-space-1, 5px) var(--sp-space-3, 12px);
	border-radius: var(--sp-radius-full, 20px);
	font-weight: var(--sp-font-semibold, 600);
	font-size: var(--sp-text-sm, 0.875rem);
}

/* FIXED: Was white text on 20% white background - now dark gray with white text */
.sp-countdown-normal {
	display: inline-block;
	background: var(--sp-badge-normal-bg, #6b7280);
	color: var(--sp-badge-normal-text, #fff);
	padding: var(--sp-space-1, 5px) var(--sp-space-3, 12px);
	border-radius: var(--sp-radius-full, 20px);
	font-weight: var(--sp-font-semibold, 600);
	font-size: var(--sp-text-sm, 0.875rem);
}

.sp-camp-card-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sp-camp-description {
	color: #555;
	line-height: 1.6;
	margin-bottom: 15px;
}

.sp-camp-description p {
	margin: 0;
}

.sp-camp-meta {
	margin-top: auto;
	padding-top: 15px;
	border-top: 1px solid #e0e0e0;
}

.sp-camp-meta > div {
	margin-bottom: 8px;
	font-size: 0.95em;
	color: #666;
}

.sp-camp-meta > div:last-child {
	margin-bottom: 0;
}

.sp-camp-meta strong {
	color: #333;
}

.sp-camp-card-footer {
	padding: 15px 20px 20px;
}

.sp-camp-card-footer .sp-button {
	width: 100%;
	text-align: center;
	display: block;
	padding: 12px 20px;
}

/* Responsive */
@media (max-width: 768px) {
	.sp-landing-title {
		font-size: 2em;
	}
	
	.sp-current-meeting h2 {
		font-size: 1.5em;
	}
	
	.sp-meetings-list {
		grid-template-columns: 1fr;
	}
	
	.sp-meeting-card-date {
		min-width: 70px;
		padding: 12px;
	}
	
	.sp-date-day {
		font-size: 2em;
	}
	
	.sp-camps-grid {
		grid-template-columns: 1fr;
	}
}