/* Materialize's own .circle rule (collection avatars, profile pictures) forces every image into
   a fixed 42x42 box but never sets object-fit, so the browser falls back to its default
   ("fill") - a non-square source photo (most Google profile pictures aren't perfectly square)
   gets squashed/clipped unevenly depending on its own aspect ratio, which is why some avatars
   looked fine and others looked cropped oddly. object-fit: cover crops every one of them the
   same predictable way (fill the circle, keep aspect ratio, centered) regardless of the source
   image's shape. */
img.circle {
	object-fit: cover;
	object-position: center;
}

nav {
	background-color: white;
}

nav .nav-wrapper.container {
	width: 95%;
	max-width: 1600px;
}

nav .nav-wrapper li a {
	color: black;
	letter-spacing: 0.01rem;
	text-transform: uppercase;
	font-weight: 900;
}

nav .nav-wrapper li ul a {
	color: var(--main-theme-color)
}


/* Materialize's own "nav .nav-wrapper i{height:64px;line-height:64px}" rule forces every icon
   to a 64px line box (sized for the old 64px nav), but "nav li>a{height:48px;line-height:48px}"
   caps the anchor wrapping it at only 48px - the icon's own line overflows past its parent's
   box on hover, which is why the grey hover highlight around the settings/logout icons rendered
   taller than the nav bar itself instead of being contained by it. Flex-centering the anchor at
   the nav's real 64px height (matching the icon rule above, and .nav-brand's own 64px) instead
   of relying on Materialize's line-height math fixes the mismatch outright. */
nav .nav-wrapper li a {
	height: 64px;
	display: flex;
	align-items: center;
}

.nav-brand {
	height: 64px;
}

.nav-brand img {
	height: 64px;
}

footer {
	background-color: var(--main-theme-color);
	color: black;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
	/* Pinned to the viewport bottom and always visible while scrolling, rather than only showing
	   once you scroll all the way down (or, on a short page, sitting flush under a small amount
	   of content via body's flex/min-height:100vh trick - that pattern still holds it at the
	   bottom of a short page, but "fixed" now also keeps it there through a long page's scroll,
	   which is the actual ask). Sits above normal content (z-index) but below the weather/profile
	   hover popups (both z-index:1000) so a popup near the bottom of a day-card still renders on
	   top of the footer rather than under it. main's own padding-bottom below keeps real content
	   from ever sitting underneath this. */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
}

/* Footer links (Admin / NLC / Privacy Statement) had no color rule of their own, so they fell
   back to the browser's plain default link blue - the same "unstyled" blue the FOUC video frames
   caught elsewhere on the page, just permanent here instead of a flash. Requested for light mode
   specifically; left unscoped since dark-mode.css defines --secondary-theme-color to the exact
   same #ff3b00 for both themes (see its own "unchanged, already on-brand" comment) - if that ever
   diverges, this rule will need a light-mode guard added to match. */
footer a {
	color: var(--secondary-theme-color);
}


#mobile-nav .nav-brand img {
	height: 48px;
	padding-top: 0;
}

#mobile-nav .nav-brand:hover {
	background-color: unset;
}

/* Greeting text, dividers, and the weather display are decorative (cursor: default, not a
   real link) - Materialize's default nav hover shading still applies to them since they're
   <a> tags, which reads as a broken/dead click target. Kill it. */
.nav-static {
	cursor: default;
}

.nav-static:hover {
	background-color: unset !important;
}

/* Overrides "nav .nav-wrapper li a"'s uppercase/font-weight:900 - fine for the brand wordmark
   and the admin "Users" link (real nav actions), but the greeting/weather were reading as the
   loudest thing in the whole bar, louder than the app name itself. Same info, quieter.
   Selector has to mirror "nav .nav-wrapper li a"'s own specificity (nav/li/a type selectors,
   not just a class) - a bare ".nav-meta" rule loses to that more specific one regardless of
   source order, which is why the first attempt at this had no visible effect. */
nav .nav-wrapper li a.nav-meta {
	text-transform: none;
	font-weight: 400;
	color: var(--body-color);
	letter-spacing: normal;
}

.meerkat-text {
	font-size: 2rem;
}

.user-nav {
	color: #ff3b00 !important;
}

/* Was relying on Materialize's "white-text" utility class for color, which is invisible
   against this nav's white background (light mode) - explicit black instead, so the hamburger
   trigger is actually visible on mobile rather than an invisible tap target. */
.sidenav-trigger {
	color: black;
}

/* Weather hover card - used both by the nav bar's "today" indicator and each day's weather
   icon on the reservation overview grid. Shows on hover of whichever element wraps it; the
   wrapper needs "position: relative" for this to anchor correctly.

   Rebuilt with defensive resets (box-sizing, margin:0 on every child by default, explicit
   line-heights) after the first version rendered with large, unexplained gaps between rows on
   a phone browser - most likely caused by the lack of box-sizing: border-box (padding pushing
   the box wider than its declared width) and inherited margins with nothing to reset them.
   Layout borrows the common "icon + headline temp + condition, then a stat row" shape most
   weather apps use (Apple Weather, Google's weather card, etc.) rather than a plain list of
   labelled lines. */
.weather-hover-wrapper {
	position: relative;
}

.weather-hover-card {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 6px;
	background: white;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 14px;
	width: 190px;
	max-width: 80vw;
	box-sizing: border-box;
	text-align: center;
	z-index: 1000;
	text-transform: none;
	font-weight: normal;
	letter-spacing: normal;
	font-size: 0.8rem;
	line-height: 1.3;
	cursor: default;
}

.weather-hover-card * {
	box-sizing: border-box;
	margin: 0;
}

.weather-hover-wrapper:hover .weather-hover-card {
	display: block;
}

.weather-hover-card-title {
	font-size: 0.7rem;
	font-weight: 700;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.weather-hover-card-icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 2px auto 0 !important;
}

.weather-hover-card-temp-main {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1;
	color: #222;
}

.weather-hover-card-desc {
	text-transform: capitalize;
	font-size: 0.85rem;
	color: #555;
	margin-top: 2px !important;
}

.weather-hover-card-range {
	font-size: 0.75rem;
	color: #888;
	margin-top: 8px !important;
}

.weather-hover-card-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	font-size: 0.72rem;
	color: #666;
	margin-top: 10px !important;
	padding-top: 8px !important;
	border-top: 1px solid #eee;
}

/* Nav bar weather icon + hover card - KNMI (or other national agency) alert indicator. The glow
   is a drop-shadow (not box-shadow) specifically because the icon is a transparent-background
   PNG - drop-shadow hugs the actual glyph's silhouette instead of drawing a shadow around its
   rectangular bounding box. Pulses gently rather than sitting static, so it's noticeable without
   being an epilepsy-risk flashing alert. */
.weather-alert-glow {
	filter: drop-shadow(0 0 4px #ff9800);
	animation: weather-alert-pulse 2.4s ease-in-out infinite;
}

@keyframes weather-alert-pulse {
	0%, 100% { filter: drop-shadow(0 0 3px #ff9800); }
	50% { filter: drop-shadow(0 0 9px #ff9800); }
}

.weather-hover-card-alert {
	margin-top: 10px !important;
	margin-bottom: 4px !important;
	padding: 8px !important;
	background: #fff3e0;
	border-left: 3px solid #ff9800;
	border-radius: 6px;
	text-align: left;
	font-size: 0.72rem;
	line-height: 1.35;
	color: #7a4a00;
}

.weather-hover-card-alert strong {
	display: block;
	margin-bottom: 2px !important;
	font-size: 0.75rem;
}

.a {
	color: black !important;
}

/* ===================== Profile hover card (reservation grid) =====================
   Kept intentionally minimal for now (picture, name, title, Slack + email link) - it's one
   shared fragment (fragment/profileCard.html), so a later field (phone, LinkedIn, pod/team) is
   a single place to add it rather than a per-page change.

   Unlike .weather-hover-wrapper/.weather-hover-card, this one can't use plain CSS ":hover
   reveals an absolutely-positioned card" - the row lives inside <ul class="collection">, and
   Materialize's own .collection rule sets "overflow: hidden" (for its rounded corners), which
   clips any absolutely-positioned descendant that overflows the list, cutting the bottom off
   the card. "position: fixed" escapes that clipping (a fixed element's containing block is the
   viewport, not any clipped ancestor), but fixed positioning has no useful default placement of
   its own, so overview.html's $(document).ready computes top/left from the trigger's
   getBoundingClientRect() on mouseenter/mouseleave instead of relying on :hover here. */
.profile-avatar {
	cursor: pointer;
}

.profile-hover-card {
	display: none;
	position: fixed;
	background: white;
	color: #222;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	padding: 14px;
	width: 200px;
	max-width: 80vw;
	box-sizing: border-box;
	text-align: center;
	z-index: 1000;
	font-size: 0.8rem;
	line-height: 1.3;
	cursor: default;
}

.profile-hover-card * {
	box-sizing: border-box;
	margin: 0;
}

.profile-hover-card-img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto !important;
	object-fit: cover;
}

.profile-hover-card-name {
	font-weight: 700;
	font-size: 0.95rem;
	color: #222;
	margin-top: 8px !important;
}

.profile-hover-card-title {
	font-size: 0.75rem;
	color: #888;
	margin-top: 2px !important;
}

.profile-hover-card-department {
	font-size: 0.7rem;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 2px !important;
}

.profile-hover-card-links {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 10px !important;
	padding-top: 8px !important;
	border-top: 1px solid #eee;
}

.profile-hover-card-link {
	color: #666;
	cursor: pointer;
	display: inline-flex;
}

.profile-hover-card-link:hover {
	color: #222;
}