/* ==========================================================================
   Sidebar — Lee's Supper Club
   --------------------------------------------------------------------------
   Styles for sidebar.php: widget containers, widget titles, the "Meet Lee"
   widget, and sidebar list/link styles.
   ========================================================================== */


/* ==========================================================================
   1. Sidebar Container
   ========================================================================== */

.sidebar {
	padding-top: var(--space-lg);
}


/* ==========================================================================
   2. Widgets — General
   ========================================================================== */

.sidebar .widget {
	margin-bottom: var(--space-xl);
	padding: var(--space-md);
	background: var(--color-gray-light);
	border-radius: 8px;
}

.sidebar .widget:last-child {
	margin-bottom: 0;
}

.sidebar .widget-title {
	font-size: 1.1rem;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-xs);
	border-bottom: 2px solid var(--color-teal);
}


/* ==========================================================================
   3. Widget Lists
   ========================================================================== */

.sidebar .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar .widget ul li {
	padding: var(--space-xs) 0;
	border-bottom: 1px solid #e0e0e0;
}

.sidebar .widget ul li:last-child {
	border-bottom: none;
}

.sidebar .widget ul li a {
	color: var(--color-black);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.sidebar .widget ul li a:hover,
.sidebar .widget ul li a:focus-visible {
	color: var(--color-teal);
}

/* Nested lists (e.g., category hierarchies) */
.sidebar .widget ul ul {
	margin-top: var(--space-xs);
	padding-left: var(--space-sm);
}


/* ==========================================================================
   4. Meet Lee Widget
   ========================================================================== */

.sidebar .widget-meet-lee {
	background: var(--sidebar-meet-lee-bg, var(--color-pink));
	color: var(--sidebar-meet-lee-text, var(--color-white));
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.widget-meet-lee .widget-title {
	color: var(--sidebar-meet-lee-text, var(--color-white));
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.widget-meet-lee .widget-meet-lee__content {
	text-align: center;
	padding: var(--space-md);
	position: relative;
	z-index: 1;
}

.widget-meet-lee .widget-meet-lee__content p,
.widget-meet-lee .widget-meet-lee__bio {
	color: var(--sidebar-meet-lee-text, var(--color-white));
	opacity: 0.9;
}

.widget-meet-lee .widget-meet-lee__avatar {
	max-width: 150px;
	margin: 0 auto var(--space-md);
}

.widget-meet-lee .widget-meet-lee__avatar img,
.widget-meet-lee .widget-meet-lee__avatar svg {
	border-radius: 50%;
	width: 100%;
	height: auto;
	display: block;
}

.widget-meet-lee .widget-meet-lee__content p,
.widget-meet-lee .widget-meet-lee__bio {
	font-size: var(--sidebar-body-font-size, 0.9rem);
	line-height: 1.6;
	margin-bottom: var(--space-sm);
}

.widget-meet-lee .widget-meet-lee__name {
	text-align: center;
	font-family: var(--sidebar-heading-font, var(--font-accent, 'LadyClementineScript', Georgia, serif));
	font-weight: normal;
	font-size: 2rem;
	margin-bottom: var(--space-xs);
	color: var(--sidebar-meet-lee-text, var(--color-white));
}

.widget-meet-lee .widget-meet-lee__link {
	display: inline-block;
	color: var(--sidebar-meet-lee-link, var(--color-white));
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.widget-meet-lee .widget-meet-lee__link:hover,
.widget-meet-lee .widget-meet-lee__link:focus-visible {
	color: var(--sidebar-meet-lee-link-hover, var(--color-green));
}


/* ==========================================================================
   5. Widget Search Form
   ========================================================================== */

.sidebar .widget .search-form {
	display: flex;
	gap: 0;
}

.sidebar .widget .search-form .search-field {
	flex: 1;
	border-radius: 4px 0 0 4px;
	border-right: none;
}

.sidebar .widget .search-form .search-submit {
	border-radius: 0 4px 4px 0;
	padding: var(--space-xs) var(--space-sm);
}


/* ==========================================================================
   6. Widget — Tag Cloud
   ========================================================================== */

.sidebar .widget .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.sidebar .widget .tagcloud a {
	display: inline-block;
	background: var(--color-white);
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.85rem !important; /* Override WP inline sizes. */
	color: var(--color-gray-dark);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.sidebar .widget .tagcloud a:hover,
.sidebar .widget .tagcloud a:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
}


/* ==========================================================================
   7. Widget — Recent Posts with Thumbnails
   ========================================================================== */

.sidebar .widget .wp-block-latest-posts__featured-image {
	margin-bottom: var(--space-xs);
	border-radius: 4px;
	overflow: hidden;
}

.sidebar .widget .wp-block-latest-posts__featured-image img {
	border-radius: 4px;
}


/* ==========================================================================
   8. Sidebar — The Latest (thumbnail list)
   ========================================================================== */

.sidebar-latest__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-latest__item {
	padding: var(--space-xs) 0;
	border-bottom: 1px solid #e0e0e0;
}

.sidebar-latest__item:last-child {
	border-bottom: none;
}

.sidebar-latest__link {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	text-decoration: none;
	color: var(--color-black);
	transition: color var(--transition-fast);
}

.sidebar-latest__link:hover,
.sidebar-latest__link:focus-visible {
	color: var(--color-teal);
}

.sidebar-latest__thumb {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.sidebar-latest__title {
	font-size: 0.9rem;
	font-weight: var(--fw-medium);
	line-height: 1.4;
}


/* ==========================================================================
   9. Sidebar — Newsletter Subscribe
   ========================================================================== */

.sidebar-newsletter {
	text-align: center;
}

.sidebar-newsletter p {
	font-size: 0.9rem;
	color: var(--color-gray-dark);
	margin-bottom: var(--space-sm);
}

.sidebar-newsletter__btn {
	font-size: 0.85rem;
}

.sidebar-newsletter__placeholder {
	font-style: italic;
	opacity: 0.7;
}


/* ==========================================================================
   10. Sticky Sidebar (Desktop)
   ========================================================================== */

@media (min-width: 901px) {
	.sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-md));
		align-self: flex-start;
	}
}