/* 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;
}

/* Reverted the earlier 3px trim (61px) - .nav-brand/icons/"li a" below are all fixed at 64px
   with no spare padding to give up, so the shorter nav box was overflowing its own children by
   that 3px with nothing clipping it cleanly - the most likely cause of the logout icon reading
   as sitting "too high" on mobile. Back to matching the children's real 64px. */
.navbar-fixed {
	height: 64px !important;
}
nav {
	height: 64px !important;
	line-height: 64px !important;
}

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: transparent;
	box-shadow: none;
	color: black;
	/* 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);
	font-weight: 700;
}

/* Materialize's own .footer-copyright (the actual <div> the footer's content sits in) paints its
   own translucent grey background independent of "footer" itself - clearing footer's background
   above alone wouldn't remove this one. */
.footer-copyright {
	background-color: transparent;
}


#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;
}