/* ============================================
   Modern Login Page CSS
   Matches Welcome Page Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-primary: #025747;
    --color-primary-dark: #1B4332;
    --color-accent: #d0f5a3;
    --color-accent-hover: #c0e893;
    --color-cream: #F5F3EE;
    --color-white: #FFFFFF;
    --color-text: #1e1e1e;
    --color-text-muted: #5c5c5c;
    --color-border: #1e1e1e;
    --color-error: #c00;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.2s ease;
    --border-radius: 9999px;
    --border-radius-input: 8px;
}

/* ============================================
   LOGIN ERROR STATE - Prevent Flash
   When there's a login error, show login form 
   immediately without showing welcome page first
   ============================================ */
body#login.has-login-error #main-content,
body#login.has-login-error #welcome-header-container,
body#login.has-login-error #brandingwrapper-welcome,
body#login.has-login-error #hero-container,
body#login.has-login-error .maintenance-alert-banner {
    display: none !important;
}

body#login.has-login-error #brandingwrapper-login,
body#login.has-login-error #loginwrapper {
    display: block !important;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, body#login {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.6;
    background-color: var(--color-cream);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Page Layout */
#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-cream);
    border: none !important;
}

/* Hide any color bars/stripes from external CSS */
#wrapper > div:first-child:not(#toprow):not(#maincontainer) {
    display: none !important;
}

#toprow {
    display: none !important;
    height: 0 !important;
    background: none !important;
}

/* Hide any color stripe/bar elements that may come from company palette CSS */
.colorbar,
.stripe,
.header-stripe,
#colorbar,
#stripe,
.boxcontent > div:first-child:not(#brandingwrapper):not(.welcome-hero-section):not(#loginwrapper):not(header):not(#welcome-header-container):not(.maintenance-alert-banner) {
    display: none !important;
}

#maincontainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: none !important;
    background-color: transparent !important;
    position: relative;
    border: none !important;
}

/* Override company color palette backgrounds */
#maincontainer::before,
#maincontainer::after,
#wrapper::before,
#wrapper::after {
    display: none !important;
    background: none !important;
}

.boxcontent {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    position: relative;
    background: transparent !important;
    border: none !important;
}

/* Override any company color palette backgrounds on welcome page */
.boxcontent::before,
.boxcontent::after {
    display: none !important;
}

.settextsize {
    font-size: 1rem;
    background: transparent !important;
    border: none !important;
}

/* Hide any horizontal rules or dividers */
.boxcontent hr,
#maincontainer hr,
.settextsize hr {
    display: none !important;
}

/* Hide old rounded corners */
.b1, .b2, .b3, .b4 {
    display: none !important;
}

/* ============================================
   WELCOME SIMPLE HEADER (transparent overlay)
   Single logo with "Log in" button
   ============================================ */

/* Container for the welcome header */
#welcome-header-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    overflow: visible !important;
}

.welcome-simple-header,
#welcome-header-container .welcome-simple-header,
body#login .welcome-simple-header {
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background-color: transparent;
    padding: 1.5rem 5rem; /* Match content-area horizontal padding */
    overflow: visible !important;
}

.welcome-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0;
    width: 100%;
    overflow: visible !important;
}

.welcome-logo,
#welcome-header .welcome-logo,
#welcome-header-container .welcome-logo,
body#login .welcome-logo {
    display: flex;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    flex-shrink: 0;
}

.welcome-logo a,
#welcome-header .welcome-logo a,
#welcome-header-container .welcome-logo a,
body#login .welcome-logo a {
    display: flex;
    align-items: center;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    /* Fallback styling when image fails to load */
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.125rem;
}

.welcome-logo img,
#welcome-header .welcome-logo img,
#welcome-header-container .welcome-logo img,
body#login .welcome-logo img {
    height: 48px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override any company palette CSS that might add backgrounds to logo */
body#login #welcome-header-container,
body#login #welcome-header-container *,
body#login #welcome-header,
body#login #welcome-header *,
body#login .welcome-simple-header,
body#login .welcome-simple-header *,
body#login .welcome-logo,
body#login .welcome-logo *,
body#login .welcome-logo a,
body#login .welcome-logo a *,
body#login .welcome-logo img,
#welcome-header-container .welcome-logo,
#welcome-header-container .welcome-logo a,
#welcome-header-container .welcome-logo img {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Reset any padding/margin that might create white space */
body#login .welcome-logo,
body#login .welcome-logo a {
    padding: 0 !important;
    margin: 0 !important;
}

.welcome-header-actions {
    display: flex;
    align-items: center;
}

/* ============================================
   LOGIN HEADER (3-logo layout, white background)
   Shows when user clicks "Log in"
   ============================================ */
#brandingwrapper {
    width: 100%;
    padding: 1.25rem 2.5rem;
    margin: 0;
    background-color: white;
    background: white;
    position: relative;
    z-index: 100;
    border: none !important;
    overflow: visible !important;
}

/* When used as login header */
#brandingwrapper.login-header {
    background-color: white !important;
    background: white !important;
    position: relative;
}

/* 3-logo header for welcome page - transparent with logos on left */
#brandingwrapper-welcome {
    width: 100%;
    padding: 1.5rem 2.5rem;
    margin: 0;
    background-color: transparent !important;
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    border: none !important;
    overflow: visible !important;
}

#brandingwrapper-welcome #innertube-welcome {
    width: 100%;
    margin: 0 auto;
    overflow: visible !important;
}

#brandingwrapper-welcome .logos-left-aligned {
    gap: 2rem !important;
}

#brandingwrapper-welcome .logoleft img,
#brandingwrapper-welcome .logomid img,
#brandingwrapper-welcome .logoright img {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

#brandingwrapper-welcome .header-login-btn {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

/* White header variant for logout page */
#brandingwrapper-welcome.white-header {
    background-color: white !important;
    background: white !important;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

/* Login form header - white header with all logos (worklife4you, CBP etc.) */
#brandingwrapper-login {
    width: 100%;
    padding: 1.5rem 2.5rem;
    margin: 0;
    background-color: white !important;
    background: white !important;
    position: relative;
    border: none !important;
    border-bottom: 1px solid #e0e0e0;
    overflow: visible !important;
    display: none; /* hidden by default; shown server-side or via JS */
}

#brandingwrapper-login .logoleft img,
#brandingwrapper-login .logomid img,
#brandingwrapper-login .logoright img {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

/* Logo layout on the login form header - matches VHP left-aligned layout */
#brandingwrapper-login .logo-container,
#brandingwrapper-login .logos-left-aligned {
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
    gap: 2rem !important;
}

#brandingwrapper-login .logoleft {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
}

#brandingwrapper-login .logomid {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
}

#brandingwrapper-login .logoright {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

#brandingwrapper-login .welcome-header-actions {
    display: none !important;
}

/* Add padding for absolute positioned header on visitor home page */
body#login .welcome-hero-section .content-area {
    padding-top: 6rem !important;
}

body#login .welcome-hero-section .hero-background {
    top: 0 !important;
}

/* Branding nav with login button - logos left, button right */
.branding-nav-with-button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
}

/* All logos left-aligned together */
.logos-left-aligned {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    flex: 0 1 auto;
    overflow: visible !important;
    flex-wrap: nowrap !important;
}

/* Override the margin-left auto on logoright when inside logos-left-aligned */
.logos-left-aligned .logoright {
    margin-left: 0 !important;
    justify-content: flex-start !important;
}

/* Login button in 3-logo header */
.branding-nav-with-button .welcome-header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Simple single-logo nav for login form */
.branding-nav-simple {
    width: auto !important;
}

.branding-nav-simple .logo-container {
    justify-content: flex-start;
}

#brandingwrapper #innertube {
    width: 100%;
    margin: 0 auto;
    overflow: visible !important;
}

/* New flexbox-based branding nav (replaces table layout for better accessibility) */
.branding-nav,
#tblbranding {
    width: 100%;
    overflow: visible !important;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 1rem;
    background: transparent !important;
    overflow: visible !important;
    flex-wrap: nowrap;
}

/* Legacy table styles for backwards compatibility */
#tblbranding table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#tblbranding td {
    background: transparent;
    padding: 0.5rem;
}

/* Three logo positions */
.logoleft {
    background: transparent !important;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible !important;
    flex-shrink: 1;
    min-width: 0;
}

.logomid {
    background: transparent !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoright {
    background: transparent !important;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

/* Logo images */
.logoleft img,
.logomid img,
.logoright img,
#logoleft,
#logomid,
#logoright {
    height: 60px;
    width: auto;
    max-height: 60px;
    max-width: 200px;
    min-width: 0;
    object-fit: contain;
    flex-shrink: 1;
}

/* Logo links */
.logoleft a,
.logomid a,
.logoright a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
    transition: var(--transition);
}

.logoleft a:focus,
.logomid a:focus,
.logoright a:focus,
.logoleft a:focus-visible,
.logomid a:focus-visible,
.logoright a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* ============================================
   Login Content Wrapper
   ============================================ */
#loginwrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    margin: 0;
    width: 100%;
    background: transparent;
}

/* Hide leftcolumn by default - content shown in welcome hero section */
#leftcolumn {
    display: none;
}

/* ============================================
   Login Form Card
   ============================================ */
#loginRow {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
    float: none !important;
}

#login #loginRow {
    float: none !important;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}

.login_title, .txtcolor.login_title,
#login .login_title, #login .txtcolor.login_title,
body#login .login_title, body#login .txtcolor.login_title,
body#login h1.txtcolor.login_title {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 600;
    color: #1e1e1e !important;
    margin-bottom: 2rem;
    display: block;
    text-align: left;
}

#loginformwrapper, #login #loginformwrapper {
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    width: 100%;
    float: none;
}

/* Form Fields */
#screenname, #password {
    margin-bottom: 1.25rem;
    float: none;
    width: 100%;
}

#login #screenname {
    margin-bottom: 1.25rem;
}

#login #password {
    margin-right: 0;
    float: none;
}

#loginformwrapper label,
#CL label, #DP label {
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    float: none;
    width: auto;
}

#loginformwrapper input[type="text"],
#loginformwrapper input[type="password"],
#ScreenNamebox,
#Passwordbox {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-input);
    outline: none;
    transition: var(--transition);
    height: auto;
    margin: 0;
}

#loginformwrapper input[type="text"]:focus,
#loginformwrapper input[type="password"]:focus,
#ScreenNamebox:focus,
#Passwordbox:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(2, 87, 71, 0.1);
}

/* Forgot Password Link */
#forgotpw {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 1.5rem;
    text-align: left;
}

#forgotpw a,
#forgotpw a:link,
#forgotpw a:visited {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

#forgotpw a:hover {
    opacity: 0.8;
}

/* Clear floats */
br.clear {
    display: none;
}

/* ============================================
   Buttons
   ============================================ */
.buttonSpan,
.buttonSpan[type="submit"],
#login .buttonSpan,
input[type="submit"].buttonSpan {
    width: 100%;
    height: 52px;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: var(--border-radius);
	cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.buttonSpan:hover,
#login .buttonSpan:hover {
    background-color: var(--color-primary-dark) !important;
}

.buttonSpan:focus,
#login .buttonSpan:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Not Registered Section */
#loginRow p.bold,
.bold {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    text-align: center;
    margin: 1.5rem 0 0.75rem;
}

/* Start Now Button (outline style) */
#loginRow a[href*="register"],
#loginRow a[href*="register"]:hover,
#loginRow a[href*="register"]:focus,
#loginRow a[href*="register"]:visited,
a.start-now-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition);
}

#loginRow a[href*="register"]:hover {
    background-color: rgba(2, 87, 71, 0.05);
    text-decoration: none !important;
}

/* ============================================
   Error Messages
   ============================================ */
.error,
p.error,
#loginRow p.error {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-error);
    margin: 0 0 1rem;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    text-align: left;
}

/* ============================================
   Footer - Styled to match design
   ============================================ */
#footer_container {
    background-color: var(--color-cream);
    padding: 2.5rem 2rem;
	text-align: center;
    width: 100%;
    margin: 0;
    float: none;
    height: auto;
    border-top: 1px solid #d1d5db;
}

/* Style the footer links wrapper - handles old footer structure */
#footer_links,
.boxcontent + .b4 + .b3 + .b2 + .b1 + script + noscript,
#wrapper > script + noscript {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.25rem;
    float: none;
    width: 100%;
    padding: 0;
    font-size: 0;  /* Hide pipe separators */
}

/* Footer wrapper for old footer structure */
#wrapper > script ~ a.logbotlnk,
.boxcontent ~ script ~ a.logbotlnk {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition);
}

#footer_links a,
#footer_links a.footerlnk,
#footer_links a.logbotlnk,
a.logbotlnk,
a.footerlnk {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition);
}

#footer_links a:hover,
a.logbotlnk:hover,
a.footerlnk:hover {
    opacity: 0.7;
}

#copyright {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    float: none;
    width: 100%;
    margin: 0;
    text-align: center;
}

#copyright .footertxt {
    float: none;
    width: 100%;
    margin: 0;
}

#watchdog {
  	display: none;
}

/* Welcome Page Footer - Wrapper styling */
.welcome-page-footer {
    background-color: var(--color-cream);
    padding: 2.5rem 2rem;
    text-align: center;
    width: 100%;
    border-top: 1px solid #d1d5db;
    margin-top: 0 !important;
}

.welcome-page-footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

.welcome-page-footer .footer-links a,
.welcome-page-footer .footer-links .footer-link {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e !important; /* Dark/black text */
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition);
    cursor: pointer;
}

.welcome-page-footer .footer-links a:hover,
.welcome-page-footer .footer-links .footer-link:hover {
    opacity: 0.7;
    color: #1e1e1e !important;
}

.welcome-page-footer .footer-links a:visited,
.welcome-page-footer .footer-links .footer-link:visited {
    color: #1e1e1e !important;
}

.welcome-page-footer .copyright {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: #1e1e1e !important; /* Dark/black text */
    margin: 0;
}

/* ============================================
   Links
   ============================================ */
a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

#login a,
#login a:link,
#login a:visited {
    color: var(--color-primary);
    text-decoration: underline;
}

#login a:hover {
    opacity: 0.8;
}

/* Override generic link color for Register Now and Log In buttons */
#login a.register-btn,
#login a.register-btn:link,
#login a.register-btn:visited {
    color: #c8f5a3 !important;
    text-decoration: none !important;
}

#login a.header-login-btn,
#login a.header-login-btn:link,
#login a.header-login-btn:visited,
#login a#show-login-btn,
#login a#show-login-btn-welcome {
    color: #1B4332 !important;
    text-decoration: none !important;
}

/* ============================================
   Hidden Elements
   ============================================ */
#textoptions,
#textsize,
#textincrease,
.textreset {
    display: none;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    body, body#login {
        position: relative;
    }
    
    /* Dark sidebar for mobile - matches the design */
    body#login::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 20px;
        height: 100%;
        background-color: #3d3d3d;
        z-index: 1000;
    }
    
    #wrapper {
        margin-left: 20px;
        width: calc(100% - 20px);
    }
    
    #brandingwrapper {
        padding: 1rem 1.5rem;
    }
    
    /* Three logos on tablet/mobile */
    .logoleft img, .logomid img, .logoright img,
    #logoleft, #logomid, #logoright {
        height: 45px;
        max-height: 45px;
        max-width: 150px;
        object-fit: contain;
    }
    
    #tblbranding td {
        padding: 0.25rem;
    }
    
    #loginwrapper {
        padding: 1.5rem;
    }
    
    #loginRow,
    #login #loginRow {
        max-width: 100%;
		padding: 0;
    }
    
    .login_title, .txtcolor.login_title {
        font-size: 24px;
        margin-bottom: 1.5rem;
    }
    
	#footer_container {
        padding: 1.5rem;
    }
    
	#footer_links {
        flex-direction: column;
        gap: 0.75rem;
	}
    
    #footer_links a,
    #footer_links a.footerlnk,
	#copyright {
        font-size: 16px;
    }
    
}

@media (max-width: 480px) {
    body#login::before {
        width: 16px;
    }
    
    #wrapper {
        margin-left: 16px;
        width: calc(100% - 16px);
    }
    
    #brandingwrapper {
        padding: 0.75rem;
    }
    
    /* Three logos on small mobile */
    .logoleft img, .logomid img, .logoright img,
    #logoleft, #logomid, #logoright {
        height: 32px;
        max-height: 32px;
        max-width: 100px;
        object-fit: contain;
    }
    
    #tblbranding td {
        padding: 0.125rem;
    }
    
    #loginwrapper {
        padding: 1rem;
    }
    
    .login_title, .txtcolor.login_title {
        font-size: 22px;
    }
    
    #loginformwrapper input[type="text"],
    #loginformwrapper input[type="password"],
    #ScreenNamebox,
    #Passwordbox {
        padding: 12px 14px;
        font-size: 16px;
    }
    
    .buttonSpan,
    #login .buttonSpan {
        height: 48px;
    }
    
    .start-now-btn {
        height: 48px;
    }
}

/* ============================================
   Maintenance Alerts
   ============================================ */
.alert,
.alertheading {
    font-family: var(--font-sans);
    background-color: rgba(204, 0, 0, 0.08);
    border-radius: var(--border-radius-input);
    padding: 1rem;
    margin: 1rem 0;
    color: var(--color-error);
    float: none;
		width: 100%;
	}

.alertheading {
    font-weight: 600;
}

/* ============================================
   Logout Page Styles
   ============================================ */
.logout-message {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 2rem;
    text-align: center;
}

.logout-message p {
    margin-bottom: 0.75rem;
}

.logout-actions {
    margin-bottom: 1.5rem;
}

.logout-actions .buttonSpan {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Form Hidden Fields
   ============================================ */
input[type="hidden"] {
    display: none;
}

/* ============================================
   Focus States for Accessibility
   ============================================ */
#login a:focus,
#login input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Not Registered Section
   ============================================ */
.not-registered-section {
    text-align: center;
    margin-top: 1.5rem;
}

.not-registered-text {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.start-now-btn,
.start-now-btn:hover,
.start-now-btn:focus,
.start-now-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition);
}

.start-now-btn:hover {
    background-color: rgba(2, 87, 71, 0.05);
}

.start-now-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Registration Link Styling (Legacy)
   ============================================ */
#loginRow .bold a,
#loginRow p.bold a,
#loginRow .bold a:hover,
#loginRow .bold a:focus,
#loginRow .bold a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 52px;
    padding: 0 2rem;
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition);
    margin-top: 0.5rem;
}

#loginRow .bold a:hover {
    background-color: rgba(2, 87, 71, 0.05);
    text-decoration: none !important;
}

/* ============================================
   Accessibility Utilities (WCAG 2.1)
   ============================================ */

/* Skip Navigation Link (WCAG 2.4.1) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Visually Hidden - for screen readers only (WCAG 1.3.1) */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Legacy skip link support */
#skip a,
.skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip a:focus {
    position: static;
    width: auto;
    height: auto;
}

/* ============================================
   Focus Indicator Enhancements (WCAG 2.4.7)
   ============================================ */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Welcome Hero Section Styles
   ============================================ */

/* Override any teal/colored stripes from external CSS */
body#login .boxcontent,
body#login #maincontainer,
body#login #brandingwrapper,
body#login .settextsize {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.welcome-hero-section,
#main-content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: visible;
    background-color: #e8e4dc; /* Match hero-background fallback color to remove gap */
    margin-top: 0;
    flex: 1;
}

/* Ensure main content fills available space to push footer to bottom */
body#login .welcome-hero-section,
body#login #main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header Login Button - now in simple header, not absolute positioned */
.welcome-header-actions {
    display: flex;
    align-items: center;
}

.header-login-btn,
#show-login-btn,
#show-login-btn-welcome,
button.header-login-btn,
button#show-login-btn,
button#show-login-btn-welcome,
a.header-login-btn,
a#show-login-btn,
a#show-login-btn-welcome,
body#login .header-login-btn,
body#login #show-login-btn,
body#login #show-login-btn-welcome {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 2rem !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--color-primary) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.header-login-btn:hover {
    background-color: #f0f0f0 !important;
}

.header-login-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Hero Background - uses CSS background image */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/banners/new-home-page-image.jpg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: #e8e4dc;
    z-index: 0;
}

/* Hero section wrapper for background */
.welcome-hero-section .content-area {
    background: transparent;
}

/* Content Area - overlays the hero */
.content-area {
    position: relative;
    width: 100%;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 5rem 4rem 5rem; /* Extra top padding for header */
    z-index: 2;
    box-sizing: border-box;
    flex: 1;
}

.hero-content {
    max-width: 550px;
    margin-left: 0;
    padding-left: 0;
}

/* Hero container - wraps transparent header + hero section on visitor home page.
   position:relative ensures #brandingwrapper-welcome (position:absolute; top:0)
   anchors to this container, so the transparent header overlays only the hero image
   and not the maintenance banner which sits above this container in normal flow. */
#hero-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Maintenance Alert Banner - shown on visitor home page only */
.maintenance-alert-banner {
    background-color: #faf0e4;
    width: 100%;
    padding: 0.75rem 2.5rem 1.25rem !important;
    box-sizing: border-box;
    border-bottom: 1px solid #e8d9c6;
}

.maintenance-alert-banner .maintenance-alert-text {
    margin: 0 !important;
    font-size: 0.95rem;
    color: #5a4a3a;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .maintenance-alert-banner {
        padding: 0.65rem 1rem 1rem !important;
    }
}

.hero-title,
#login .hero-title,
body#login .hero-title,
#login h1.hero-title,
body#login h1.hero-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 38px !important;
    font-weight: 600 !important;
    line-height: 58px !important;
    letter-spacing: -1.5px !important;
    color: #000000 !important;
    max-width: 550px;
    margin: 0 0 1.5rem 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
}

/* Frosted Glass Info Card - aligned with hero-heading width */
.info-card {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 1.25rem 2.5rem 2rem;
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    max-width: 550px;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
}

.info-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: #1e1e1e;
    margin: 0 0 1.5rem 0;
    text-align: justify;
}

.card-button-group {
    display: flex;
    margin-top: 1rem;
}

.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: var(--color-primary) !important;
    color: #c8f5a3 !important;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none !important;
}

.register-btn:hover {
    background-color: var(--color-primary);
}

.register-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Help Banner (peach/orange section) */
.help-banner {
    background-color: #fdd9a8;
    padding: 3rem 2rem;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 5;
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

.help-banner-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 600;
    color: #1e1e1e !important; /* Black text */
    margin: 0 0 1.25rem 0;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 3rem;
    min-width: 220px;
    background-color: #ffffff;
    color: var(--color-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: var(--transition);
}

.contact-btn:hover {
    background-color: #f0f0f0;
}

.contact-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Welcome Hero Section - Responsive
   ============================================ */
@media (max-width: 1024px) {
    .welcome-simple-header {
        padding: 1.25rem 3rem; /* Match content-area horizontal padding */
    }
    
    .welcome-logo img {
        height: 42px;
    }
    
    .content-area {
        padding: 5rem 3rem 3rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.15;
    }
    
    .hero-content {
        max-width: 500px;
    }
    
    .info-card {
        max-width: 500px;
    }
}

/* ============================================
   Mobile Layout - Image at top with header overlay, content below
   ============================================ */
@media (max-width: 768px) {
    /* Remove the dark sidebar for welcome page */
    body#login::before {
        display: none;
    }
    
    #wrapper {
        margin-left: 0;
        width: 100%;
    }
    
    /* Header container on mobile - positioned over hero image */
    #welcome-header-container {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
    
    /* Header - transparent over hero image on mobile */
    .welcome-simple-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 1rem 1rem 1rem 0 !important; /* No left padding - logo at edge */
        background: transparent !important;
        background-color: transparent !important;
        z-index: 100;
        overflow: visible !important;
    }
    
    .welcome-header-inner {
        overflow: visible !important;
        gap: 0.5rem;
        padding-left: 0 !important;
    }
    
    .welcome-logo {
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }
    
    .welcome-logo a {
        overflow: visible !important;
    }
    
    .welcome-logo img {
        height: 40px !important;
        min-width: unset !important;
        max-width: 180px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    .header-login-btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
        background-color: #ffffff !important;
        color: #1B4332 !important;
        border: 2px solid #1B4332 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
    }
    
    /* Hero content wrapper */
    .hero-content {
        max-width: 100%;
    }
    
    /* Register button - dark green background, light green text */
    .card-button-group {
        width: 100%;
        margin-top: 1rem;
    }
    
    .register-btn {
        width: 100%;
        padding: 1rem;
        background-color: #025747 !important; /* Dark green background */
        color: #c8f5a3 !important; /* Light green text */
        font-size: 1rem;
        font-weight: 600;
        border-radius: 9999px;
    }
    
    .register-btn:hover {
        background-color: #1B4332 !important;
    }
    
    /* Help banner - peach background, always pinned to bottom of hero section */
    .help-banner {
        padding: 2.5rem 1.5rem;
        background-color: #fdd9a8 !important;
        margin-top: auto !important;
        flex-shrink: 0;
    }
    
    .help-banner-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }
    
    .contact-btn {
        padding: 0.875rem 2.5rem;
        min-width: 200px;
        background-color: #ffffff !important;
        color: #025747 !important;
        border: 2px solid #025747 !important;
    }
    
    /* Footer */
    .welcome-page-footer {
        padding: 2rem 1.5rem;
        background-color: var(--color-cream) !important;
        border-top: 1px solid #d1d5db !important;
    }
    
    .welcome-page-footer .footer-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin-bottom: 1.25rem;
    }
    
    .welcome-page-footer .footer-links a {
        font-size: 14px;
        color: #1e1e1e !important;
    }
    
    .welcome-page-footer .copyright,
    .welcome-page-footer .footertxt,
    .welcome-page-footer #copyright {
        font-size: 14px;
        color: #1e1e1e !important;
    }
}

@media (max-width: 480px) {
    .welcome-simple-header {
        padding: 0.75rem 0.75rem 0.75rem 0 !important; /* No left padding - logo at edge */
        overflow: visible !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    
    .welcome-header-inner {
        overflow: visible !important;
        gap: 0.25rem;
        padding-left: 0 !important;
    }
    
    .welcome-logo {
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
    }
    
    .welcome-logo a {
        overflow: visible !important;
    }
    
    .welcome-logo img {
        height: 36px !important;
        min-width: unset !important;
        max-width: 160px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    .header-login-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.8125rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
    }
    
    .hero-background {
        height: 260px;
        padding-top: 55px; /* Space for header overlay */
    }
    
    .content-area {
        padding: 1.5rem 1rem;
    }
    
    .hero-title,
    #login .hero-title,
    body#login .hero-title {
        font-size: 1.75rem;
    }
    
    .info-text {
        font-size: 0.9375rem;
    }
    
    .help-banner {
        padding: 2rem 1rem;
    }
    
    .help-banner-title {
        font-size: 1.25rem;
    }
    
    .contact-btn {
        padding: 0.75rem 2rem;
        font-size: 0.9375rem;
    }
}

/* ============================================
   Login Page Layout Fixes
   ============================================ */

/* Overall page structure */
body#login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body#login #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

body#login #maincontainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--color-cream) !important;
}

body#login .boxcontent {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

body#login .settextsize {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    min-height: 0;
}

/* Branding wrapper at top - only style when visible (controlled by JS) */
body#login #brandingwrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 2rem;
    background: white !important;
    border-bottom: 1px solid #e0e0e0;
    /* Don't force display - let inline style control visibility */
}

body#login #brandingwrapper #innertube {
    max-width: 1200px;
    margin: 0 auto;
}

/* Login wrapper - only style when visible (controlled by JS) */
body#login #loginwrapper {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    background: var(--color-cream) !important;
    /* Don't force display - let inline style control visibility */
}

body#login #loginRow {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
}

/* Footer at bottom */
body#login #footer_container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2.5rem 2rem !important;
    background: var(--color-cream) !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    height: auto !important;
    border-top: 1px solid #d1d5db !important;
}

body#login #footer_links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    width: 100% !important;
    margin: 0 auto 1.25rem auto !important;
    padding: 0 !important;
    float: none !important;
    font-size: 16px !important;
}

body#login #footer_links a,
body#login #footer_links .footerlnk,
body#login a.logbotlnk {
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #1e1e1e !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    display: inline !important;
    float: none !important;
}

body#login #copyright {
    width: 100% !important;
    text-align: center !important;
    font-family: var(--font-sans) !important;
    font-size: 16px !important;
    color: #1e1e1e !important;
    float: none !important;
    margin: 0 !important;
}

body#login #copyright .footertxt {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* Hide unnecessary elements */
body#login .b1,
body#login .b2,
body#login .b3,
body#login .b4,
body#login #toprow,
body#login #watchdog {
    display: none !important;
}

/* Hide leftcolumn on login page when showing login form */
body#login #leftcolumn:not(.page1):not(.page2) {
    display: none !important;
}

/* Login form styling */
body#login #loginformwrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

body#login .innerloginwrapper {
    width: 100% !important;
}

body#login #screenname,
body#login #password {
    width: 100% !important;
    margin-bottom: 1rem !important;
    float: none !important;
}

body#login #ScreenNamebox,
body#login #Passwordbox {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    border: 1px solid #868686 !important;
    border-radius: 8px !important;
    background: white !important;
    box-sizing: border-box !important;
}

body#login #ScreenNamebox:focus,
body#login #Passwordbox:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(2, 87, 71, 0.1) !important;
}

/* Labels */
body#login label,
body#login #loginformwrapper label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e1e1e !important;
    margin-bottom: 0.5rem !important;
    float: none !important;
    width: auto !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
}

body#login label.skip {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
}

/* Login button */
body#login .buttonSpan,
body#login input[type="submit"].buttonSpan {
    width: 100% !important;
    height: 52px !important;
    background: var(--color-primary) !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1.5rem 0 !important;
    background-image: none !important;
}

body#login .buttonSpan:hover {
    background: var(--color-primary-dark) !important;
}

/* Forgot password */
body#login #forgotpw {
    font-size: 14px !important;
    margin: 0.5rem 0 1rem !important;
    text-align: left !important;
}

body#login #forgotpw a {
    color: #377A69 !important;
    text-decoration: underline !important;
}

/* Not registered section */
body#login .bold,
body#login p.bold {
    text-align: center !important;
    font-size: 14px !important;
    margin: 1.5rem 0 0.75rem !important;
}

/* Start now button */
body#login #loginRow a[href*="register"],
body#login a.start-now-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
}

body#login #loginRow a[href*="register"]:hover {
    background: rgba(2, 87, 71, 0.05) !important;
}

/* Error messages */
body#login p.error {
    background: transparent !important;
    color: #c00 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
}

/* Clear floats */
body#login br.clear {
    display: none !important;
}

/* ========================================
   FORGOT PASSWORD / FORGOT SCREENNAME / PASSWORD RESET PAGES
   Matching the new card-based design
   ======================================== */

/* Base styles for forgot password and forgot screenname pages */
body#forgotpw,
body#forgotsn,
body.popup {
    font-family: var(--font-sans);
    background: var(--color-cream);
    background-color: var(--color-cream);
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Wrapper layout */
body#forgotpw #wrapper,
body#forgotsn #wrapper,
body.popup #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/* Hide toprow on forgot pages */
body#forgotpw #toprow,
body#forgotsn #toprow {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure boxcontent has no top margin */
body#forgotpw .boxcontent,
body#forgotsn .boxcontent {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Main container - centered content */
body#forgotpw #maincontainer,
body#forgotsn #maincontainer,
body.popup #maincontainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-items: stretch;
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

/* Branding wrapper - same as login page header */
body#forgotpw #brandingwrapper,
body#forgotsn #brandingwrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 1.25rem 2.5rem;
    text-align: left;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

/* Popup branding - float layout matching production pop.css behavior */
body#popup #branding {
    width: 100% !important;
    display: block !important;
    overflow: hidden;
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 10px;
    margin: 0;
}

body#popup #branding .logoleft,
body#popup #branding .logomid,
body#popup #branding .logoright {
    display: block !important;
    float: left !important;
    width: 33% !important;
    text-align: center;
}

body#popup #branding .logoright {
    float: right !important;
}

body#popup #branding .logoleft img,
body#popup #branding .logomid img,
body#popup #branding .logoright img {
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    max-width: 100% !important;
}

body#forgotpw #brandingwrapper #innertube,
body#forgotsn #brandingwrapper #innertube {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo link fallback styling when image fails to load */
body#forgotpw .logoleft a,
body#forgotpw .logomid a,
body#forgotpw .logoright a,
body#forgotsn .logoleft a,
body#forgotsn .logomid a,
body#forgotsn .logoright a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-primary-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.25rem;
}

/* Logo styling - same as login page */
body#forgotpw .branding-nav,
body#forgotsn .branding-nav {
     width: 100%;
}

body#forgotpw .logo-container,
body#forgotsn .logo-container {
    display: flex;
    align-items: center;
}

body#forgotpw .logoleft img,
body#forgotsn .logoleft img,
body#forgotpw .logomid img,
body#forgotsn .logomid img,
body#forgotpw .logoright img,
body#forgotsn .logoright img,
body.popup #logoleft {
    height: 60px;
    max-height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Show all 3 logos on forgot pages - same as login page */
body#forgotpw .logomid,
body#forgotpw .logoright,
body#forgotsn .logomid,
body#forgotsn .logoright {
    display: flex;
}

/* Boxcontent container */
body#forgotpw .boxcontent,
body#forgotsn .boxcontent {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

body#forgotpw .boxcontent.settextsize,
body#forgotsn .boxcontent.settextsize {
    margin: 0;
    padding: 0;
}

/* Content wrapper - no card style, centered */
body#forgotpw #loginwrapper,
body#forgotsn #loginwrapper,
body.popup #standalonecontainer {
    width: 100%;
    max-width: 450px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem 2rem;
    margin: 0 auto;
    text-align: left;
}

body#forgotpw #leftcolumn,
body#forgotsn #leftcolumn {
    display: block !important;
    width: 100%;
    float: none;
    padding: 0;
}

/* Form styling - ensure consistent width for inputs and buttons */
body#forgotpw form,
body#forgotsn form {
    width: 100%;
    max-width: 100%;
}

body#forgotpw .form-group,
body#forgotsn .form-group {
    width: 100%;
    margin-bottom: 0;
}

body#forgotpw .innertube,
body#forgotsn .innertube,
body.popup .innertube {
    padding: 0;
    text-align: left;
}

/* Page titles */
body#forgotpw h1.txtcolor,
body#forgotsn h1.txtcolor,
body.popup h2.txtcolor {
    color: #1e1e1e;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
    text-align: left;
}

/* Form labels and paragraph text */
body#forgotpw p.bold,
body#forgotsn p.bold,
body#forgotpw label,
body#forgotsn label,
body.popup label {
    color: #4b5563;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    display: block;
    line-height: 1.6;
    text-align: left;
}

/* Forgot form styling */
.forgot-form {
    width: 100%;
    max-width: 100%;
}

.forgot-form .form-description {
    color: #4b5563;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: left;
}

.forgot-form .form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.5rem;
}

.forgot-form .form-label {
    display: block;
    color: #1e1e1e;
    font-size: 0.938rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-align: left;
}

.forgot-form .form-input {
    width: 100%;
    max-width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1e1e1e;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forgot-form .form-input:focus {
    outline: none;
    border-color: #025747;
    box-shadow: 0 0 0 3px rgba(2, 87, 71, 0.1);
}

/* Text inputs */
body#forgotpw input[type="text"],
body#forgotpw input[type="email"],
body#forgotsn input[type="text"],
body#forgotsn input[type="email"],
body.popup input[type="text"],
body.popup input[type="password"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1e1e1e;
    margin-bottom: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body#forgotpw input[type="text"]:focus,
body#forgotpw input[type="email"]:focus,
body#forgotsn input[type="text"]:focus,
body#forgotsn input[type="email"]:focus,
body.popup input[type="text"]:focus,
body.popup input[type="password"]:focus {
    outline: none;
    border-color: #025747;
    box-shadow: 0 0 0 3px rgba(2, 87, 71, 0.1);
}

/* Submit buttons - Teal style - Full width to match input */
body#forgotpw input[type="submit"],
body#forgotpw .button,
body#forgotsn input[type="submit"],
body#forgotsn .button,
body.popup input[type="submit"],
body.popup .buttonSpan {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    max-width: 350px;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background: #025747;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 1.5rem;
    text-decoration: none;
}

body#forgotpw input[type="submit"]:hover,
body#forgotpw .button:hover,
body#forgotsn input[type="submit"]:hover,
body#forgotsn .button:hover,
body.popup input[type="submit"]:hover,
body.popup .buttonSpan:hover {
    background: #014035;
}

/* Return to login button - for thank you pages (full width like input) */
body#forgotpw .return-login-btn,
body#forgotsn .return-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background: #025747;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 2rem auto 0;
    text-decoration: none;
}

body#forgotpw .return-login-btn:hover,
body#forgotsn .return-login-btn:hover {
    background: #014035;
    color: #ffffff;
}

/* Need help link - for thank you pages (centered) */
body#forgotpw .need-help-link,
body#forgotsn .need-help-link {
    display: block;
    margin-top: 1.5rem;
    font-size: 0.938rem;
    color: #4b5563;
    text-align: center;
}

body#forgotpw .need-help-link a,
body#forgotsn .need-help-link a {
    color: #025747;
    text-decoration: underline;
    font-weight: 500;
}

body#forgotpw .need-help-link a:hover,
body#forgotsn .need-help-link a:hover {
    color: #014035;
}

/* Error messages - only show when has content */
body#forgotpw .error,
body#forgotsn .error,
body.popup .error {
    color: #c00;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

/* Hide error when empty */
body#forgotpw .error:empty,
body#forgotsn .error:empty,
body.popup .error:empty,
body#forgotpw p.error:empty,
body#forgotsn p.error:empty {
    display: none !important;
}

/* Success/Thank you message styling */
body#forgotpw h1.txtcolor + p.bold,
body#forgotsn h1.txtcolor + p.bold,
body#forgotpw .innertube > p.bold,
body#forgotsn .innertube > p.bold {
    font-weight: 400;
    line-height: 1.7;
    color: #4b5563;
    font-size: 1rem;
    text-align: left;
    margin-bottom: 1rem;
}

/* Thank you page specific paragraph spacing */
body#forgotpw .innertube p.bold br,
body#forgotsn .innertube p.bold br {
    display: block;
    content: "";
    margin-top: 1rem;
}

/* Help desk links */
body#forgotpw a.txtcolor,
body#forgotsn a.txtcolor {
    color: #025747;
    text-decoration: underline;
    font-weight: 500;
}

body#forgotpw a.txtcolor:hover,
body#forgotsn a.txtcolor:hover {
    color: #014035;
}

/* Hide decorative elements */
body#forgotpw .b1,
body#forgotpw .b2,
body#forgotpw .b3,
body#forgotpw .b4,
body#forgotsn .b1,
body#forgotsn .b2,
body#forgotsn .b3,
body#forgotsn .b4 {
    display: none;
}

/* Footer for forgot pages */
body#forgotpw .welcome-page-footer,
body#forgotsn .welcome-page-footer,
body.popup .welcome-page-footer {
   background: var(--color-cream);
    padding: 2rem 1rem;
    margin-top: auto;
    border-top: 1px solid #d1d5db;
}

body#forgotpw .welcome-page-footer .footer-links,
body#forgotsn .welcome-page-footer .footer-links,
body.popup .welcome-page-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.25rem;
}

body#forgotpw .welcome-page-footer .footer-links a,
body#forgotsn .welcome-page-footer .footer-links a,
body.popup .welcome-page-footer .footer-links a {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: var(--transition);
}

body#forgotpw .welcome-page-footer .footer-links a:hover,
body#forgotsn .welcome-page-footer .footer-links a:hover,
body.popup .welcome-page-footer .footer-links a:hover {
    opacity: 0.7;
    color: #1e1e1e !important;
}

body#forgotpw .welcome-page-footer #copyright,
body#forgotsn .welcome-page-footer #copyright,
body.popup .welcome-page-footer #copyright {
    text-align: center;
}

body#forgotpw .welcome-page-footer .copyright,
body#forgotsn .welcome-page-footer .copyright,
body.popup .welcome-page-footer .copyright,
body#forgotpw .welcome-page-footer #copyright,
body#forgotsn .welcome-page-footer #copyright,
body.popup .welcome-page-footer #copyright,
body#forgotpw .welcome-page-footer .footertxt,
body#forgotsn .welcome-page-footer .footertxt,
body.popup .welcome-page-footer .footertxt {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    color: #1e1e1e !important;
    margin: 0;
    text-align: center;
}

/* Password reset page specific styles */
body.popup #password_reset,
body.popup #changePwd {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

body.popup #password_reset td,
body.popup #password_reset th,
body.popup #changePwd td,
body.popup #changePwd th {
    padding: 0.25rem 0;
    text-align: left;
}

body.popup #password_reset input[type="password"],
body.popup #changePwd input[type="password"] {
    width: 100%;
}

body.popup #password_reset select,
body.popup select {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1e1e1e;
}

/* Cancel link styling */
body.popup a[onclick*="popup"] {
    color: #4b5563;
    text-decoration: underline;
    margin-left: 1rem;
}

body#popup #branding td {
    padding: 0;
}

/* Responsive styles for forgot pages */
@media (max-width: 600px) {
    /* Branding wrapper - equal padding on mobile */
    body#forgotpw #brandingwrapper,
    body#forgotsn #brandingwrapper {
        padding: 1rem 1rem !important;
        text-align: center;
    }
    
    body#forgotpw #brandingwrapper #innertube,
    body#forgotsn #brandingwrapper #innertube {
        padding: 0;
    }
    
    body#forgotpw .logo-container,
    body#forgotsn .logo-container {
        justify-content: center;
    }
    
    /* Content wrapper - centered with equal padding */
    body#forgotpw #loginwrapper,
    body#forgotsn #loginwrapper,
    body.popup #standalonecontainer {
        padding: 1rem 1rem;
        border-radius: 0;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    body#forgotpw .innertube,
    body#forgotsn .innertube {
        padding: 0;
        text-align: left;
    }
    
    body#forgotpw h1.txtcolor,
    body#forgotsn h1.txtcolor,
    body.popup h2.txtcolor {
        font-size: 1.5rem;
        text-align: left;
    }
    
    /* Form elements - full width */
    body#forgotpw .forgot-form,
    body#forgotsn .forgot-form {
        width: 100%;
    }
    
    body#forgotpw .forgot-form .form-input,
    body#forgotsn .forgot-form .form-input,
    body#forgotpw input[type="text"],
    body#forgotsn input[type="text"] {
        width: 100%;
        box-sizing: border-box;
    }
    
    body#forgotpw .welcome-page-footer .footer-links,
    body#forgotsn .welcome-page-footer .footer-links {
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    body#forgotpw .welcome-page-footer .footer-links a,
    body#forgotsn .welcome-page-footer .footer-links a {
        font-size: 14px;
    }
    
    body#forgotpw .welcome-page-footer .footertxt,
    body#forgotsn .welcome-page-footer .footertxt,
    body#forgotpw .welcome-page-footer #copyright,
    body#forgotsn .welcome-page-footer #copyright {
        font-size: 14px;
        padding: 0 1rem;
    }
    
    /* Thank you page - centered content */
    body#forgotpw .return-login-btn,
    body#forgotsn .return-login-btn {
        margin: 1.5rem auto 0;
    }
    
    body#forgotpw .need-help-link,
    body#forgotsn .need-help-link {
        text-align: center;
        padding: 0;
    }
}

/* ============================================
   LOGIN BUTTON - HIGHEST PRIORITY OVERRIDES
   Placed at end of file to ensure highest priority
   ============================================ */
.header-login-btn,
#show-login-btn,
#show-login-btn-welcome,
button.header-login-btn,
button#show-login-btn,
button#show-login-btn-welcome,
a.header-login-btn,
a#show-login-btn,
a#show-login-btn-welcome,
body .header-login-btn,
body #show-login-btn,
body #show-login-btn-welcome,
body#login .header-login-btn,
body#login #show-login-btn,
body#login #show-login-btn-welcome,
#welcome-header .header-login-btn,
#welcome-header-container .header-login-btn,
#brandingwrapper-welcome .header-login-btn,
.welcome-header-actions .header-login-btn,
.welcome-header-actions #show-login-btn,
.welcome-header-actions #show-login-btn-welcome {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 32px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--color-primary) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================
   WELCOME PAGE LOGO - HIGHEST PRIORITY OVERRIDES
   ============================================ */
.welcome-logo,
#welcome-header .welcome-logo,
#welcome-header-container .welcome-logo,
body#login .welcome-logo {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* On larger screens, allow slight negative margin for alignment if needed */
@media (min-width: 1025px) {
    .welcome-logo,
    #welcome-header .welcome-logo,
    #welcome-header-container .welcome-logo,
    body#login .welcome-logo {
        margin-left: 0 !important;
    }
}

.welcome-logo a,
#welcome-header .welcome-logo a,
#welcome-header-container .welcome-logo a,
body#login .welcome-logo a {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    overflow: visible !important;
}

.welcome-logo img,
#welcome-header .welcome-logo img,
#welcome-header-container .welcome-logo img,
body#login .welcome-logo img {
    background: transparent !important;
    background-color: transparent !important;
    width: auto !important;
    max-width: 250px !important;
    object-fit: contain !important;
}

/* Mobile - logo sizing for transparent header over image */
@media (max-width: 768px) {
    .welcome-logo img,
    #welcome-header .welcome-logo img,
    #welcome-header-container .welcome-logo img,
    body#login .welcome-logo img {
        min-width: unset !important;
        max-width: 180px !important;
        height: 40px !important;
        width: auto !important;
    }
    
    .welcome-logo,
    #welcome-header .welcome-logo,
    body#login .welcome-logo {
        overflow: visible !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .welcome-logo a,
    #welcome-header .welcome-logo a,
    body#login .welcome-logo a {
        overflow: visible !important;
    }
    
    /* Header should be transparent on mobile */
    .welcome-simple-header {
        background: transparent !important;
        background-color: transparent !important;
    }
}

@media (max-width: 480px) {
    .welcome-logo img,
    #welcome-header .welcome-logo img,
    #welcome-header-container .welcome-logo img,
    body#login .welcome-logo img {
        min-width: unset !important;
        max-width: 160px !important;
        height: 36px !important;
        width: auto !important;
    }
    
    /* Header should be transparent on mobile */
    .welcome-simple-header {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* ============================================
   FOOTER LINKS - BOLD TEXT
   ============================================ */
.footer-links a,
.welcome-page-footer a,
.welcome-page-footer .footer-links a,
#footer_links a,
body#login .footer-links a,
body#forgotpw .footer-links a,
body#forgotsn .footer-links a {
    font-weight: 700 !important;
}

/* ============================================
   EMAIL LABEL - FONT WEIGHT 600
   ============================================ */
.form-label,
body#forgotpw .form-label,
body#forgotsn .form-label,
body#forgotpw label,
body#forgotsn label,
body#login .form-label,
body#login label[for="email"],
label[for="email"] {
    font-weight: 600 !important;
    color: #1e1e1e !important;
}

/* ============================================
   HERO SECTION - DYNAMIC BACKGROUND HEIGHT
   Background covers entire hero content area
   DESKTOP ONLY - Mobile uses separate image/content layout
   ============================================ */
@media (min-width: 769px) {
    .welcome-hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        overflow: visible;
        background-image: url('../images/banners/new-home-page-image.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #e8e4dc;
    }

    /* Hide the separate hero-background div since we're using section background on desktop */
    .welcome-hero-section .hero-background {
        display: none;
    }

    /* Content area within hero - desktop: min-height ensures help-banner always
       stays at bottom of viewport regardless of info-text length */
    .welcome-hero-section .content-area {
        position: relative;
        z-index: 2;
        flex: 1;
        min-height: calc(100vh - 220px);
        padding: 100px 5rem 80px 5rem;
        background: transparent;
    }

    /* Info card spacing - desktop */
    .welcome-hero-section .info-card {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }
}

/* ============================================
   MOBILE HERO SECTION - Image at top, content below
   ============================================ */
@media (max-width: 768px) {
    .welcome-hero-section {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: auto;
        background-color: var(--color-cream) !important;
        background-image: none !important;
    }
    
    /* Show the separate hero-background div on mobile */
    .welcome-hero-section .hero-background {
        display: block !important;
        position: relative !important;
        width: 100%;
        height: 280px;
        background-image: url('../images/banners/new-home-page-image.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #e8e4dc;
        order: -1; /* Move image to top */
        padding-top: 60px; /* Space for header overlay */
    }
    
    /* Content area on mobile - below the image with cream background */
    .welcome-hero-section .content-area {
        position: relative;
        min-height: auto;
        padding: 2rem 1.5rem 1.5rem;
        background-color: var(--color-cream) !important;
        background: var(--color-cream) !important;
        z-index: 1;
    }
    
    /* Title on mobile - BLACK text, bold */
    .welcome-hero-section .hero-title,
    .welcome-hero-section h1.hero-title,
    body#login .welcome-hero-section .hero-title,
    body#login .welcome-hero-section h1.hero-title,
    #login .welcome-hero-section .hero-title,
    .hero-title,
    h1.hero-title {
        color: #1e1e1e !important;
        font-size: 2rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
        max-width: 100% !important;
        margin: 0 0 1.25rem 0 !important;
    }
    
    /* Info card on mobile - no frosted glass effect */
    .welcome-hero-section .info-card {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* Text on mobile - black text */
    .welcome-hero-section .info-text,
    body#login .welcome-hero-section .info-text,
    .info-text {
        color: #1e1e1e !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin: 0 0 2rem 0 !important;
    }
}

/* ============================================
   MOBILE OVERRIDES - HIGHEST PRIORITY
   Must be at end of file to override all above rules
   ============================================ */
@media (max-width: 768px) {
    /* Force black title on mobile */
    .hero-title,
    h1.hero-title,
    .welcome-hero-section .hero-title,
    .welcome-hero-section h1.hero-title,
    body .hero-title,
    body h1.hero-title,
    body#login .hero-title,
    body#login h1.hero-title,
    body#login .welcome-hero-section .hero-title,
    body#login .welcome-hero-section h1.hero-title,
    #login .hero-title,
    #login h1.hero-title {
        color: #1e1e1e !important;
        font-size: 2rem !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
        background: transparent !important;
    }
    
    /* Force black info text on mobile */
    .info-text,
    .info-card .info-text,
    .welcome-hero-section .info-text,
    body .info-text,
    body#login .info-text {
        color: #1e1e1e !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* 3-logo header on mobile - switch to relative so it flows naturally
       below the maintenance banner instead of overlapping it */
    #brandingwrapper-welcome {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0.75rem 0.5rem !important;
        overflow: visible !important;
    }

    /* On mobile, remove the extra padding-top from content-area
       since the header is now in normal flow (not absolutely positioned) */
    body#login .welcome-hero-section .content-area {
        padding-top: 1.5rem !important;
    }
    
    /* Branding nav - ensure button doesn't get cut off */
    #brandingwrapper-welcome .branding-nav-with-button,
    .branding-nav-with-button {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    
    #brandingwrapper-welcome .logoleft img,
    #brandingwrapper-welcome .logomid img,
    #brandingwrapper-welcome .logoright img,
    #brandingwrapper-welcome #logoleft,
    #brandingwrapper-welcome #logomid,
    #brandingwrapper-welcome #logoright,
    .brandingwrapper-welcome .logoleft img,
    .brandingwrapper-welcome .logomid img,
    .brandingwrapper-welcome .logoright img {
        height: 28px !important;
        max-height: 28px !important;
        width: auto !important;
        max-width: 80px !important;
        object-fit: contain !important;
    }
    
    /* Reduce gap between logos on mobile */
    .logos-left-aligned {
        gap: 0.25rem !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Logo container overflow fix for mobile */
    .logo-container {
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }
    
    .logoleft, .logomid, .logoright {
        overflow: visible !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Login button in 3-logo header on mobile */
    #brandingwrapper-welcome .header-login-btn,
    .brandingwrapper-welcome .header-login-btn,
    #brandingwrapper-welcome .welcome-header-actions .header-login-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        min-width: auto !important;
    }
    
    /* Welcome header actions in 3-logo header */
    #brandingwrapper-welcome .welcome-header-actions {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    
}