.mph-row {
	display: flex;
	justify-content: center;
	padding-top: 2px;
	/* The header's own "constrained" block layout inserts a default gap (margin-block-start) between its
	   stacked children - this row is the header's second child (after .newsky-header-grid), so it inherits
	   that gap unless overridden here. */
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.mph-widget {
	position: relative;
	display: flex;
	align-items: center;
}

.mph-toggle {
	background: none;
	border: none;
	padding: 4px 2px;
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
	color: inherit;
	opacity: 0.8;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mph-toggle:hover {
	opacity: 1;
}

.mph-icon {
	flex: none;
}

.mph-inline-nameday {
	background: none;
	border: none;
	padding: 0;
	margin-left: 10px;
	font: inherit;
	font-size: 0.72rem;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
	white-space: nowrap;
}

.mph-inline-nameday:hover {
	opacity: 1;
}

.mph-inline-nameday::before {
	content: "\1F338"; /* 🌸 */
	margin-right: 6px;
}

.mph-inline-nameday:empty {
	display: none;
}

.mph-popup {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	width: 360px;
	max-width: 92vw;
	background: #fff;
	color: #1e1e1e;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.18);
	padding: 18px;
	font-size: 0.95rem;
	text-align: left;
	text-transform: none;
	font-weight: 400;
}

/* Dark mode - the theme's own dark-mode toggle adds this class to <html> (colors matched to its own
   --wp--preset--color--base / --contrast custom properties, not guessed). */
html.is-dark-mode .mph-popup {
	background: #16181d;
	color: #e5e7eb;
	border-color: #2a2d34;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}

html.is-dark-mode .mph-cal-nav {
	color: #e5e7eb;
}

html.is-dark-mode .mph-cal-nav:hover {
	background: #2a2d34;
	color: #6ea8dc;
}

html.is-dark-mode .mph-cal-day:hover {
	background: #2a2d34;
}

html.is-dark-mode .mph-cal-day.is-holiday {
	color: #ff8080;
}

html.is-dark-mode .mph-cal-day.is-today.is-holiday {
	background: #8f2424;
}

html.is-dark-mode .mph-cal-day.is-event {
	color: #b794f6;
}

html.is-dark-mode .mph-cal-day.is-today.is-event {
	background: #6d3fb0;
}

html.is-dark-mode .mph-headlines {
	border-top-color: #2a2d34;
}

html.is-dark-mode .mph-holiday-name {
	color: #ff8080;
}

html.is-dark-mode .mph-event {
	color: #b794f6;
}

html.is-dark-mode .mph-headlines a {
	color: #8fb4ff; /* same blue the theme uses for article headline links in dark mode */
}

.mph-popup[hidden] {
	display: none;
}

.mph-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	font-weight: 600;
	font-size: 1.05rem;
}

.mph-cal-nav {
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1e1e1e;
}

.mph-cal-nav:hover {
	background: #f0f0f1;
	color: #2271b1;
}

.mph-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	text-align: center;
}

.mph-cal-dow {
	font-size: 0.78rem;
	font-weight: 600;
	opacity: 0.6;
	padding-bottom: 6px;
}

.mph-cal-day {
	position: relative;
	padding: 9px 0;
	border-radius: 4px;
	cursor: pointer;
	background: none;
	border: none;
	font: inherit;
	font-size: 0.95rem;
	color: inherit;
}

.mph-cal-day:hover {
	background: #f0f0f1;
}

.mph-cal-day.is-empty {
	cursor: default;
	pointer-events: none;
}

.mph-cal-day.is-today {
	background: #2271b1;
	color: #fff;
	font-weight: 600;
}

.mph-cal-day.is-holiday {
	color: #b32d2e;
	font-weight: 600;
}

.mph-cal-day.is-today.is-holiday {
	background: #b32d2e;
	color: #fff;
}

/* Comes after .is-holiday so a day that is both a holiday and a user event shows the event's purple - the
   user specifically asked for events to be purple, and an event is the more specific, user-curated thing. */
.mph-cal-day.is-event {
	color: #8b5cf6;
	font-weight: 600;
}

.mph-cal-day.is-today.is-event {
	background: #8b5cf6;
	color: #fff;
}

.mph-moon-dot {
	display: block;
	font-size: 0.75rem;
	line-height: 1;
	margin-top: 2px;
}

.mph-cal-legend {
	margin-top: 8px;
	font-size: 0.72rem;
	opacity: 0.75;
	line-height: 1.5;
}

.mph-headlines {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e0e0e0;
}

.mph-nameday,
.mph-holiday-name,
.mph-event,
.mph-nameday-loading {
	margin: 0 0 4px;
	font-size: 0.85rem;
}

.mph-holiday-name {
	color: #b32d2e;
}

.mph-event {
	color: #8b5cf6;
}

.mph-event-description {
	margin: 0 0 8px;
	font-size: 0.82rem;
	opacity: 0.85;
	white-space: pre-wrap;
}

.mph-nameday-loading {
	opacity: 0.65;
	font-style: italic;
}

.mph-headlines h4 {
	margin: 14px 0 6px;
	font-size: 0.8rem;
}

.mph-headlines ul {
	margin: 0;
	padding-left: 18px;
	max-height: 180px;
	overflow-y: auto;
}

.mph-headlines li {
	margin-bottom: 4px;
}

.mph-headlines a {
	text-decoration: none;
	color: #162d4f; /* same blue the theme uses for article headline links in light mode */
}

.mph-headlines a:hover {
	text-decoration: underline;
}

.mph-headlines-empty {
	opacity: 0.65;
	font-style: italic;
}

/* ------------------------------------------------------------------------
 * Weather - bridged from the My Weathery plugin's own data. Same visual language as its dashboard widget
 * (day cards, current-conditions row) so the two feel like one system, but namespaced under mph- since this
 * lives in the header widget, not the dashboard.
 * ---------------------------------------------------------------------- */

.mph-weather-toggle {
	background: none;
	border: none;
	padding: 4px 2px;
	margin-left: 10px;
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
	color: inherit;
	opacity: 0.8;
	white-space: nowrap;
}

.mph-weather-toggle:hover {
	opacity: 1;
}

/* ------------------------------------------------------------------------
 * Meniny na 7 dní - the popup opened by clicking the inline meniny display itself.
 * ---------------------------------------------------------------------- */

.mph-nameday-week-head {
	margin-bottom: 10px;
	font-size: 1.05rem;
}

.mph-nameday-week-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid #e0e0e0;
	font-size: 0.88rem;
}

.mph-nameday-week-row:last-child {
	border-bottom: none;
}

.mph-nameday-week-label {
	font-weight: 600;
	opacity: 0.7;
}

html.is-dark-mode .mph-nameday-week-row {
	border-bottom-color: #2a2d34;
}

.mph-weather-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 1.05rem;
}

.mph-weather-more {
	font-size: 0.78rem;
	font-weight: 400;
	text-decoration: none;
	color: #162d4f;
}

.mph-weather-more:hover {
	text-decoration: underline;
}

html.is-dark-mode .mph-weather-more {
	color: #8fb4ff;
}

.mph-weather-current {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e0e0e0;
}

html.is-dark-mode .mph-weather-current {
	border-bottom-color: #2a2d34;
}

.mph-weather-current-icon {
	font-size: 32px;
	line-height: 1;
}

.mph-weather-current-temp {
	font-size: 1.3rem;
	font-weight: 600;
}

.mph-weather-current-temp span {
	font-weight: 400;
	font-size: 0.8rem;
	opacity: 0.7;
}

.mph-weather-current-desc {
	opacity: 0.7;
	font-size: 0.8rem;
}

.mph-weather-days {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.mph-weather-day {
	flex: 1;
	text-align: center;
	background: #f6f7f7;
	border-radius: 4px;
	padding: 8px 2px;
}

html.is-dark-mode .mph-weather-day {
	background: #2a2d34;
}

.mph-weather-day-label {
	font-weight: 600;
	font-size: 0.72rem;
	margin-bottom: 4px;
}

.mph-weather-day-icon {
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: 4px;
}

.mph-weather-day-temp {
	font-size: 0.75rem;
}

.mph-weather-day-rain {
	font-size: 0.68rem;
	opacity: 0.7;
}

.mph-weather-warnings-section h4 {
	margin: 0 0 8px;
	font-size: 0.8rem;
}

.mph-weather-warning {
	padding: 6px 8px;
	border-radius: 4px;
	font-size: 0.78rem;
	margin-bottom: 4px;
	background: #fff7e6;
	border-left: 3px solid #dba617;
}

.mph-weather-warning--orange {
	background: #fdf0e6;
	border-left-color: #d9730d;
}

.mph-weather-warning--red {
	background: #fbeaea;
	border-left-color: #b32d2e;
}

html.is-dark-mode .mph-weather-warning {
	background: rgba(219, 166, 23, 0.15);
}

html.is-dark-mode .mph-weather-warning--orange {
	background: rgba(217, 115, 13, 0.15);
}

html.is-dark-mode .mph-weather-warning--red {
	background: rgba(179, 45, 46, 0.2);
}