/* =========================================================
   SIDEBAR WIDGETS — Professional styling
   File: assets/css/sidebar.css
   -----------------------------------------------------------
   Restyles GeneratePress's default sidebar widget markup
   (.widget / .widget-title / <ul><li><a>) site-wide — the
   plain black-serif-heading-plus-blue-links look becomes a
   card matching the rest of the site (white card, navy
   heading with a gold underline, hover-highlighted rows).

   Targets the standard GP widget wrapper classes, so this
   covers any sidebar widget (Pages, Custom Menu, Categories,
   etc.), not just the "Staff" list it was designed for.
   ========================================================= */

.both-left .is-left-sidebar,
.both-sidebars .is-left-sidebar,
.left-sidebar .sidebar {
	background-color: white;
}

.widget-area .widget,
.sidebar .widget,
#right-sidebar .widget,
#left-sidebar .widget {
	background: #FFFFFF;
	border: 1px solid var(--endo-border);
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(10, 37, 89, 0.06);
	padding: 28px 26px;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.widget-area .widget-title,
.sidebar .widget-title,
#right-sidebar .widget-title,
#left-sidebar .widget-title {
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--endo-navy);
	letter-spacing: 0;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--endo-gold);
}

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

.widget-area .widget ul li,
.sidebar .widget ul li {
	border-bottom: 1px solid var(--endo-border);
	margin: 0;
	padding: 0;
}

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

.widget-area .widget ul li a,
.sidebar .widget ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 2px;
	color: var(--endo-text);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.widget-area .widget ul li a::after,
.sidebar .widget ul li a::after {
	content: "\203A";
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: var(--endo-border);
	transition: transform 0.2s ease, color 0.2s ease;
}

.widget-area .widget ul li a:hover,
.sidebar .widget ul li a:hover {
	color: var(--endo-blue-accent);
	padding-left: 6px;
}

.widget-area .widget ul li a:hover::after,
.sidebar .widget ul li a:hover::after {
	color: var(--endo-blue-accent);
	transform: translateX(3px);
}

/* Nested sub-menus (e.g. Custom Menu widget with children) */
.widget-area .widget ul ul,
.sidebar .widget ul ul {
	padding-left: 16px;
}

/* -------------------------------------------------------
   Currently-loaded page — highlighted row
   -------------------------------------------------------
   WordPress adds these classes automatically: "current_page_item"
   from wp_list_pages() (Pages widget), "current-menu-item" from
   wp_nav_menu() (Custom Menu widget). No markup changes needed —
   just style the classes WP already outputs.
   Ancestor classes (shown when viewing a *child* of a listed page)
   get a lighter treatment so only the true active row stands out.
   --------------------------------------------------------- */
.widget-area .widget ul li.current_page_item,
.widget-area .widget ul li.current-menu-item,
.sidebar .widget ul li.current_page_item,
.sidebar .widget ul li.current-menu-item {
	background: rgba(217, 160, 59, 0.10);
	border-left: 3px solid var(--endo-gold);
}

.widget-area .widget ul li.current_page_item > a,
.widget-area .widget ul li.current-menu-item > a,
.sidebar .widget ul li.current_page_item > a,
.sidebar .widget ul li.current-menu-item > a {
	color: var(--endo-navy);
	font-weight: 700;
	padding-left: 11px;
}

.widget-area .widget ul li.current_page_item > a::after,
.widget-area .widget ul li.current-menu-item > a::after,
.sidebar .widget ul li.current_page_item > a::after,
.sidebar .widget ul li.current-menu-item > a::after {
	color: var(--endo-gold);
}

.widget-area .widget ul li.current_page_ancestor > a,
.widget-area .widget ul li.current-menu-ancestor > a,
.sidebar .widget ul li.current_page_ancestor > a,
.sidebar .widget ul li.current-menu-ancestor > a {
	color: var(--endo-navy);
	font-weight: 700;
}

@media (max-width: 768px) {
	.widget-area .widget,
	.sidebar .widget {
		padding: 22px 20px;
		margin-bottom: 22px;
	}
}