/* ============================================
   GLOBAL NAVBAR STYLES
   Use this file on all pages for consistent navbar
   ============================================ */

/* User Menu Styles */
.ms-user-menu {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.ms-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #5568d3 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.ms-user-avatar:hover {
    transform: scale(1.05);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.ms-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    padding: 8px 0;
    display: none;
    z-index: 1001;
}

.ms-user-dropdown.show {
    display: block;
}

.ms-user-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.ms-user-menu-item:hover {
    background-color: #f8fafc;
}

.ms-user-menu-item i {
    width: 20px;
    color: #64748b;
    font-size: 14px;
}

.ms-user-menu-item.ms-user-menu-signout {
    color: #ef4444;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
}

.ms-user-menu-item.ms-user-menu-signout:hover {
    background-color: #fef2f2;
}

.ms-user-menu-item.ms-user-menu-signout i {
    color: #ef4444;
}

.ms-navbar {
    width: 100%;
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: none !important;
    border: none !important;
    position: relative;
    z-index: 1000;
    margin-bottom: 0;
    box-shadow: none !important;
}

/* Homepage: gradient bar (dark to transparent) with thin yellow line under */
body#home-version-1 .ms-navbar {
    border-bottom: none !important;
    position: relative;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.4) 60%, transparent 100%) !important;
    background-color: transparent !important;
}
body#home-version-1 .ms-navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.3in;
    height: 1px;
    background: #fbbf24;
}

/* Inner pages: dark gradient so nav tabs stand out */
body:not(#home-version-1) .ms-navbar {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e3a5f 100%) !important;
    background-color: #1e293b !important;
    border-bottom: 1px solid #334155;
}

body:not(#home-version-1) .ms-navbar .ms-logo-img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) brightness(1.05);
}

.ms-navbar-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0.1in clamp(12px, 2vw, 24px) 0 clamp(12px, 2vw, 24px); /* 0.1in top padding; fluid sides */
    display: flex;
    align-items: center;
    justify-content: center; /* Center items */
    height: 64px;
    flex-wrap: nowrap;
    box-sizing: border-box;
    gap: 0;
    overflow: hidden; /* Prevent container overflow */
    position: relative;
    transform: translateY(-0.2in); /* Logo, nav items, and login moved up 0.2in */
}

.ms-navbar-logo {
    display: flex;
    align-items: center;
    margin-right: auto; /* Push logo to left */
    flex-shrink: 0;
    flex-basis: auto;
    position: absolute;
    left: clamp(12px, 2vw, 24px);
    transform: translateY(0.1in);
}

.ms-logo-img {
    height: 44px !important; /* 38px + 15% */
    width: auto;
    max-width: 276px !important; /* 240px + 15% */
    object-fit: contain;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
}

.ms-logo-text {
    display: inline-block;
    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ms-logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ms-logo-lockup .ms-logo-link {
    display: inline-flex;
    align-items: center;
}

.ms-logo-subbrand {
    font-size: clamp(14px, 1.15vw, 19px);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #ffffff;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ms-logo-subbrand::before {
    content: "| ";
}

.ms-logo-subbrand-link {
    text-decoration: none;
}

/* Nav items: move down 0.5in. Multiple strategies so one wins over other stylesheets. */
.ms-navbar-nav {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 0.2in !important;
    transform: translateX(calc(28.8px - 0.125in)) translateY(0) !important; /* was -0.05in; +0.05in down vs prior */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ms-navbar-nav::-webkit-scrollbar {
    display: none;
}

.ms-navbar-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 0 calc(20px + 0.15in);
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
    width: 100%;
}

.ms-navbar-menu li {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.ms-navbar-menu li a {
    display: block;
    padding: 16px clamp(16px, 1.5vw, 28px);
    font-size: clamp(13px, 1.1vw, 15px) !important; /* Slightly larger nav headers */
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    color: #ffffff !important;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.167s ease-in-out;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: none;
    letter-spacing: 0.5px;
}

/* White navbar items on homepage – normal text (no uppercase), sharp system font */
body#home-version-1 .ms-navbar-menu li a {
    color: #ffffff !important;
    text-transform: none !important;
    text-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;
}

body#home-version-1 .ms-navbar-menu li a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

body#home-version-1 .ms-nav-link,
body#home-version-1 .ms-login-btn {
    color: #ffffff !important;
    text-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 400 !important;
}

body#home-version-1 .ms-nav-link:hover,
body#home-version-1 .ms-login-btn:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

/* White navbar items on inner pages */
body:not(#home-version-1) .ms-navbar-menu li a {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 400 !important;
}

.ms-navbar-menu li a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none;
}

/* Hover color for navbar menu items on non-homepage pages */
body:not(#home-version-1) .ms-navbar-menu li a:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

.ms-navbar-utils {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    gap: 0 12px;
    margin-left: auto; /* Push utils to right */
    flex-shrink: 0;
    flex-wrap: nowrap;
    flex-basis: auto;
    min-width: fit-content;
    position: absolute;
    right: clamp(12px, 2vw, 24px);
}

.ms-nav-link,
.ms-login-btn {
    white-space: nowrap;
    padding: 16px clamp(4px, 0.8vw, 10px); /* Reduced padding */
    font-size: clamp(9px, 0.9vw, 11px); /* Smaller font */
    font-weight: 400;
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.167s ease-in-out;
    display: inline-block;
    flex-shrink: 0;
    text-shadow: none;
}

/* White navbar links on all pages */
body:not(#home-version-1) .ms-nav-link,
body:not(#home-version-1) .ms-login-btn {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Signup button excluded from shared styles - has its own circular design */

.ms-nav-link:hover,
.ms-login-btn:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none;
}

/* Hover color for non-homepage pages */
body:not(#home-version-1) .ms-nav-link:hover,
body:not(#home-version-1) .ms-login-btn:hover {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
}

.ms-login-btn {
    color: #ffffff !important;
}

/* White login on all pages */
body:not(#home-version-1) .ms-login-btn {
    color: #ffffff !important;
}

.ms-signup-btn {
    background-color: #22c55e !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 6px 12px !important;
    margin-left: clamp(4px, 0.8vw, 8px);
    font-size: clamp(10px, 0.9vw, 12px) !important;
    font-weight: 500 !important;
    display: inline-block !important;
    text-align: center !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.ms-signup-btn:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.4) !important;
    transition: all 0.2s ease;
}

.ms-signup-btn:active {
    background-color: #15803d !important;
    transform: translateY(1px);
}

.ms-icon-link {
    padding: 16px clamp(8px, 1vw, 12px);
    font-size: clamp(12px, 1.2vw, 14px);
    flex-shrink: 0;
}

/* Dropdown Menu */
.ms-navbar-dropdown {
    position: relative;
}

.ms-dropdown-toggle {
    cursor: pointer;
}

.ms-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border: 1px solid #e1dfdd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    z-index: 1000;
    margin-top: 4px;
}

.ms-navbar-dropdown:hover .ms-dropdown-menu {
    display: block;
}

.ms-dropdown-item {
    display: block;
    padding: 12px 16px;
    color: #323130;
    text-decoration: none;
    font-size: 13px;
    transition: background-color 0.15s ease;
}

.ms-dropdown-item:hover {
    background-color: #f3f2f1;
    color: #0078d4;
}

.ms-dropdown-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ms-dropdown-item:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ms-chevron {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.ms-navbar-dropdown:hover .ms-chevron {
    transform: rotate(180deg);
}

/* Mobile Menu Toggle - Hide by default on desktop */
.ms-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: 12px;
}

.ms-mobile-toggle span {
    width: 20px;
    height: 2px;
    background-color: #323130;
    transition: all 0.3s ease;
}

/* Mobile toggle button color - white on homepage, black on other pages */
body#home-version-1 .ms-mobile-toggle span {
    background-color: #ffffff;
}

body:not(#home-version-1) .ms-mobile-toggle span {
    background-color: #323130;
}

/* Responsive Navbar */
/* Large desktops (1400px+) */
@media (min-width: 1400px) {
    .ms-navbar-container {
        max-width: 1400px;
    }
}

/* Medium desktops (1201px - 1399px) */
@media (max-width: 1399px) {
    .ms-navbar-menu li a {
        padding: 16px 14px;
        font-size: 13px !important;
    }
    .ms-nav-link,
    .ms-login-btn {
        padding: 16px 8px;
        font-size: 10px;
    }
    .ms-signup-btn {
        padding: 8px 14px !important;
        font-size: 10px !important;
    }
}

/* Large tablets and small desktops (1025px - 1200px) */
@media (max-width: 1200px) {
    .ms-navbar-menu li a {
        padding: 16px 10px;
        font-size: 12px !important;
    }
    .ms-nav-link,
    .ms-login-btn {
        padding: 16px 6px;
        font-size: 9px;
    }
    .ms-signup-btn {
        padding: 8px 12px !important;
        font-size: 9px !important;
    }
    .ms-icon-link {
        padding: 16px 8px;
        font-size: 10px;
    }
}

/* Tablets (769px - 1024px) */
@media (max-width: 1024px) {
    .ms-navbar-container {
        padding: 0 clamp(12px, 1.5vw, 20px);
    }
    .ms-navbar-menu li a {
        padding: 14px 8px;
        font-size: 11px !important;
    }
    .ms-nav-link,
    .ms-login-btn {
        padding: 16px 4px;
        font-size: 9px;
    }
    .ms-signup-btn {
        padding: 8px 12px !important;
        font-size: 9px !important;
    }
    .ms-icon-link {
        padding: 16px 6px;
        font-size: 9px;
    }
}

/* Small tablets and large phones (481px - 768px) */
@media (max-width: 768px) {
    .ms-navbar-container {
        padding: 0 12px;
        height: 50px;
    }
    .ms-navbar-logo {
        margin-right: auto;
    }
    .ms-logo-img {
        height: 39px !important; /* 34px + 15% */
    }
    .ms-navbar-menu,
    .ms-navbar-utils {
        display: none !important; /* Hide main menu and utility links on mobile */
    }
    .ms-mobile-toggle {
        display: flex !important; /* Show mobile toggle on mobile */
        margin-left: auto;
    }
}

/* Small phones (up to 480px) */
@media (max-width: 480px) {
    .ms-navbar-container {
        padding: 0 8px;
        height: 48px;
    }
    .ms-logo-img {
        height: 37px !important; /* 32px + 15% */
        max-width: 207px !important; /* 180px + 15% */
    }
}

/* ============================================
   NAV ITEMS DOWN 0.5in – high-specificity overrides
   (Wins over homepage-clean.css and other sheets)
   ============================================ */

/* Strategy 3: Container allows content to sit lower (no clipping); keep 0.2in up shift */
header.ms-navbar .ms-navbar-container,
.ms-navbar .ms-navbar-container {
    min-height: calc(64px + 0.5in) !important;
    height: auto !important;
    overflow: visible !important;
    transform: translateY(-0.2in) !important;
}

/* Strategy 4: Nav block – 0.05in left */
header.ms-navbar .ms-navbar-container .ms-navbar-nav,
.ms-navbar .ms-navbar-container .ms-navbar-nav {
    transform: translateX(calc(28.8px - 0.125in)) translateY(0) !important; /* was -0.05in; +0.05in down vs prior */
}

/* Strategy 5: If transform is reset, margin-top */
header.ms-navbar .ms-navbar-container .ms-navbar-nav {
    margin-top: 0.2in !important;
}

/*
   Additional strategies to try if nav still doesn't move (uncomment one at a time):
   6.  .ms-navbar-menu { padding-top: 0.5in !important; }
   7.  .ms-navbar-menu li a { padding-top: calc(16px + 0.5in) !important; }
   8.  .ms-navbar-nav { position: relative !important; top: 0.5in !important; }
   9.  .ms-navbar-container { padding-top: 0.6in !important; } then .ms-navbar-logo, .ms-navbar-utils { top: 0.1in; } to re-align
   10. .ms-navbar-container { display: grid; grid-template-rows: 0.5in 1fr; align-items: end; } then put nav in second row
   11. .ms-navbar-nav::before { content: ''; display: block; height: 0.5in; }
   12. .ms-navbar-nav { align-self: flex-end !important; } with container min-height increased
   13. .ms-navbar-menu { margin-top: 0.5in !important; }
   14. body .ms-navbar .ms-navbar-nav { margin-top: 0.75in !important; } (higher specificity)
   15. Use JavaScript to set .ms-navbar-nav.style.marginTop = '0.75in';
*/

/* ============================================
   Inner pages (non-homepage) — navbar polish
   Resets Strategy 3–5 transforms, improves layout and legibility.
   Homepage uses body#home-version-1 and is unchanged.
   ============================================ */

body:not(#home-version-1) .ms-navbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.35);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(251, 191, 36, 0.35) !important;
}

body:not(#home-version-1) header.ms-navbar .ms-navbar-container,
body:not(#home-version-1) .ms-navbar .ms-navbar-container {
	transform: none !important;
	min-height: 64px !important;
	height: auto !important;
	padding: 10px clamp(16px, 2.5vw, 32px) 12px !important;
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto auto !important;
	align-items: center !important;
	column-gap: clamp(8px, 1.5vw, 20px) !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: visible !important;
}

body:not(#home-version-1) .ms-navbar-logo {
	position: relative !important;
	left: auto !important;
	transform: none !important;
	margin-right: 0 !important;
}

body:not(#home-version-1) header.ms-navbar .ms-navbar-container .ms-navbar-nav,
body:not(#home-version-1) .ms-navbar .ms-navbar-container .ms-navbar-nav {
	transform: none !important;
	margin-top: 0.05in !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	justify-content: center !important;
}

body:not(#home-version-1) .ms-navbar-utils {
	position: relative !important;
	right: auto !important;
	margin-left: 0 !important;
}

body:not(#home-version-1) .ms-navbar-menu li a {
	text-transform: none !important;
	letter-spacing: 0.02em !important;
	padding: 10px clamp(10px, 1vw, 18px) !important;
	font-size: clamp(13px, 1.05vw, 15px) !important;
	font-weight: 500 !important;
	border-radius: 6px;
}

body:not(#home-version-1) .ms-navbar-menu li a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fde68a !important;
}

body:not(#home-version-1) .ms-login-btn,
body:not(#home-version-1) .ms-nav-link {
	padding: 8px 14px !important;
	font-size: clamp(13px, 1.05vw, 15px) !important;
	font-weight: 500 !important;
}

body:not(#home-version-1) .ms-signup-btn {
	padding: 8px 18px !important;
	font-size: clamp(13px, 1.05vw, 15px) !important;
	font-weight: 600 !important;
}

body:not(#home-version-1) .ms-mobile-toggle span {
	background-color: #ffffff !important;
}

@media (max-width: 768px) {
	body:not(#home-version-1) header.ms-navbar .ms-navbar-container,
	body:not(#home-version-1) .ms-navbar .ms-navbar-container {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		column-gap: 12px !important;
		min-height: 52px !important;
		padding: 8px 12px !important;
	}
}