html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a:not(.brand):not(.menu-link):not(.nav-link),
.btn-link:not(.brand):not(.menu-link):not(.nav-link) {
  color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Full-bleed reset */
html, body, #app {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: hidden; /* prevent page scroll; hero should handle overflow if needed */
}

/* Ensure page container fills viewport */
.page {
    min-height: 100vh;
    min-width: 100vw;
    box-sizing: border-box;
}

/* Remove default padding/gutters from content */
.content, article {
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
}

/* Hero: use full viewport area (minus safe area on top) and cover the background image */
.hero {
    width: calc(100vw);
    height: calc(100vh - env(safe-area-inset-top, 0px));
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-image: url('images/fairwayview.jpg'), url('_content/FairwayFinderMobile.Shared/images/fairwayview.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10;
}

/* Ensure hero content doesn't get cut by the rail */
.hero-content {
    padding: 1.25rem;
    max-width: 920px;
    width: 100%;
    margin-left: 8px; /* small spacing away from left rail */
    position: relative;
    z-index: 11;
}

/* Responsive heading sizing */
.hero h1 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-size: clamp(1.2rem, 3.5vw, 2.4rem);
    line-height: 1.05;
    text-shadow: 0 8px 26px rgba(0,0,0,0.58);
    color: rgba(250,250,250,0.96);
}

/* hero text: interesting/off-white with stronger shadow for legibility (web + mobile) */
.hero p {
    color: rgba(245,245,245,0.92);
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* On very small screens allow vertical scroll inside app only if content exceeds viewport */
@media (max-width: 640.98px) {
    html, body, #app { overflow: auto; }
    .hero { height: auto; min-height: 60vh; }
}

/* Ensure hero content sits below the mobile top bar when the rail becomes a top bar */
@media (max-width: 640.98px) {
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
    box-sizing: border-box;
    min-height: calc(60vh - 56px);
  }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Temporary: visually hide Blazor error overlay while debugging layout */
.blazor-error-boundary {
    display: none !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9LS40Njc4MiAyOS4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA7MiAAaW1wb3J0YW50IDAsMTsgLy8gbGV0

/* Force top area and rail chrome to be transparent/flat on mobile */
.top-row,
.status-bar-safe-area,
.nav-rail,
.sidebar,
.navbar,
.container-fluid,
.navbar-brand,
.toggler-icon,
.toggler-icon::before,
#navToggle + .toggler-icon,
.top-row * {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* If a wrapper has a white background or border, neutralize it */
.top-row,
.status-bar-safe-area {
  background-clip: padding-box !important;
  outline: none !important;
}

/* Ensure the visible burger and brand remain readable over the hero */
.brand,
.toggler-icon {
  color: #fff !important;
}

/* Mobile: be extra defensive about top-bar corners/outline */
@media (max-width: 640.98px) {
  .top-row, .status-bar-safe-area, .nav-rail {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Force nav menu links to the app "interesting white" (very specific + !important) */
:root #app .nav-panel a.menu-link,
:root #app .nav-rail a.menu-link,
:root .nav-panel a.menu-link,
:root .nav-rail a.menu-link {
  color: rgba(250,250,250,0.96) !important;
  -webkit-text-fill-color: rgba(250,250,250,0.96) !important;
  text-decoration: none !important;
}

/* Keep hover/active readable */
:root #app .nav-panel a.menu-link:hover,
:root #app .nav-rail a.menu-link:hover,
:root .nav-panel a.menu-link.active,
:root .nav-rail a.menu-link.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.04) !important;
}