/* Custom site styles */

/* Hero background for public pages (unauthenticated) */
.hero-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: url('/images/hero_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% dark overlay to fade the image */
}

/* Light hero background for authenticated pages (dashboards) */
.hero-background-light {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: url('/images/hero_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-background-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75); /* Heavy white overlay - subtle image hint */
}

/* Content above the light background - no z-index to avoid trapping modals in stacking context */

body.has-hero-background-light footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.5);
}

/* Add padding at bottom of content to prevent footer overlap */
body.has-hero-background-light main.pb-3 {
    padding-bottom: 40px;
}

/* When hero background is active, adjust content styling */
body.has-hero-background {
    min-height: 100vh;
}

body.has-hero-background .container {
    position: relative;
    z-index: 1;
}

body.has-hero-background footer {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
    border-top: none !important;
}

body.has-hero-background footer,
body.has-hero-background footer a {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Semi-transparent card for forms on hero background */
.glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.glass-card .card-title,
.glass-card .card-text,
.glass-card p,
.glass-card li,
.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card h4,
.glass-card h5,
.glass-card h6 {
    color: white !important;
}

.glass-card .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.glass-card .form-label,
.glass-card .form-check-label {
    color: white !important;
}

.glass-card .text-primary {
    color: #8ecfff !important;
}

/* More transparent version for larger content like Privacy page */
.glass-card-light {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    border-radius: 12px;
}

.glass-card-light h1,
.glass-card-light h2,
.glass-card-light h3,
.glass-card-light h4,
.glass-card-light h5,
.glass-card-light h6,
.glass-card-light p,
.glass-card-light li,
.glass-card-light strong {
    color: white !important;
}

.glass-card-light .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.glass-card-light a:not(.btn) {
    color: #8ecfff !important;
}

/* Keep text dark inside Bootstrap alerts on glass cards */
.glass-card-light .alert h1,
.glass-card-light .alert h2,
.glass-card-light .alert h3,
.glass-card-light .alert h4,
.glass-card-light .alert h5,
.glass-card-light .alert h6,
.glass-card-light .alert p,
.glass-card-light .alert strong,
.glass-card-light .alert li {
    color: inherit !important;
}

/* Brand styling for hero pages */
.hero-brand {
    text-align: center;
    margin-bottom: 2rem;
}

.hero-brand-title {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}

.hero-brand-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;
}

/* Transparent navbar for hero pages */
body.has-hero-background .navbar {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(5px);
}

/* Center content vertically on hero pages */
.hero-content {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

/* Ensure Bootstrap modals appear above all other content */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}