/* Global custom cursor with cross-browser fallbacks */
/*
 Order of fallbacks:
 1) .cur for Chromium/Edge/Firefox on Windows (hotspot embedded)
 2) PNG with hotspot for Safari and others
 3) auto/pointer/text as final fallback
 Note: Keep logo.png <= 128x128 for best compatibility
*/

html, body, body *:not(input):not(textarea):not([contenteditable="true"]) {
  cursor: url('/static/mouse/mouse_1754401612-0-0.cur'),
          url('/static/images/m.png') 16 16,
          auto !important;
}

/* Ensure clickable elements keep the same custom cursor instead of reverting to default pointer */
a, button, [role="button"], .cursor-pointer, .hover\:cursor-pointer:hover {
  cursor: url('/static/mouse/mouse_1754401612-0-1.cur'),
          url('/static/images/m.png') 16 16,
          pointer !important;
}

/* Header: Register Interest button underline with angled tail */
.ri-button {
  position: relative;
  border-bottom: 2px solid #172154;
  padding-bottom: 6px;
}
.ri-button::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -14px;
  width: 14px;
  height: 2px;
  background: #172154;
  transform: skewX(-20deg);
}
.ri-button:hover {
  color: #172154;
}

/* Preserve text I-beam where appropriate */
input, textarea, [contenteditable="true"], .cursor-text, .hover\:cursor-text:hover {
  cursor: text !important;
}

/* Resizable areas keep resize cursors */
.resize, .cursor-ns-resize, .cursor-ew-resize, .cursor-nesw-resize, .cursor-nwse-resize {
  cursor: auto !important;
}

/* ===================================================================
   FLOWBITE INTERFERENCE PREVENTION FOR MOBILE MENU
   ================================================================== */

/* Prevent Flowbite drawer from interfering with our mobile menu */
[data-drawer-target] {
  /* Disable Flowbite drawer functionality for our mobile menu elements */
}

#mobileMenu[data-drawer-target],
#menuToggle[data-drawer-target] {
  /* Override any Flowbite drawer styles */
  position: fixed !important;
  z-index: 50 !important;
}

/* Ensure our mobile menu takes precedence over Flowbite */
#mobileMenu {
  /* Force our mobile menu styling */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50 !important;
  background: white !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease-in-out !important;
}

#mobileMenu.translate-x-0 {
  transform: translateX(0) !important;
}

/* RTL support for mobile menu */
html[dir="rtl"] #mobileMenu {
  transform: translateX(-100%) !important;
}

html[dir="rtl"] #mobileMenu.translate-x-0 {
  transform: translateX(0) !important;
}

/* Ensure menu toggle button works correctly */
#menuToggle {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 51 !important;
  background: white !important;
  border: none !important;
  cursor: pointer !important;
}

/* Prevent Flowbite from hiding our mobile menu on narrow screens */
@media (max-width: 393px) {
  /* Force mobile menu visibility */
  #menuToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  #mobileMenu {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Override any Flowbite drawer styles */
  [data-drawer-target] {
    position: static !important;
  }
  
  /* Ensure our mobile menu overlay works */
  #overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 40 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out !important;
    pointer-events: none !important;
  }
  
  #overlay:not(.hidden) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ===================================================================
   MOBILE LAYOUT STABILITY FIXES FOR EXTREMELY NARROW SCREENS
   ================================================================== */

/* Ensure mobile layout remains stable on screens below 393px */
@media (max-width: 393px) {
  /* Force mobile navigation to stay visible */
  #menuToggle {
    display: flex !important;
  }
  
  #mobileMenu {
    display: flex !important;
  }
  
  /* Hide desktop navigation completely on narrow screens */
  .md\:flex {
    display: none !important;
  }
  
  .md\:hidden {
    display: block !important;
  }
  
  /* Ensure mobile menu stays in mobile layout */
  #mobileMenu.md\:hidden {
    display: flex !important;
  }
  
  /* Force mobile header layout */
  nav .md\:flex {
    display: none !important;
  }
  
  /* Ensure mobile hamburger button stays visible */
  #menuToggle.md\:hidden {
    display: flex !important;
  }
  
  /* Prevent any desktop elements from showing */
  .hidden.md\:flex {
    display: none !important;
  }
  
  .hidden.md\:block {
    display: none !important;
  }
  
  /* Force mobile content sections */
  .md\:block.hidden {
    display: none !important;
  }
  
  /* Ensure mobile-specific elements remain visible */
  .md\:hidden.block {
    display: block !important;
  }
  
  .md\:hidden.flex {
    display: flex !important;
  }
  
  /* Prevent flex direction changes on narrow screens */
  .md\:flex-row {
    flex-direction: column !important;
  }
  
  .md\:flex-col {
    flex-direction: column !important;
  }
  
  /* Force mobile grid layouts */
  .md\:grid {
    display: block !important;
  }
  
  /* Ensure mobile spacing */
  .md\:space-x-2 > * + * {
    margin-left: 0 !important;
  }
  
  .md\:space-y-2 > * + * {
    margin-top: 0.5rem !important;
  }
  
  /* Force mobile text alignment */
  .md\:text-center {
    text-align: left !important;
  }
  
  .md\:text-right {
    text-align: left !important;
  }
  
  /* Prevent desktop positioning */
  .md\:absolute {
    position: relative !important;
  }
  
  .md\:relative {
    position: relative !important;
  }
  
  /* Force mobile margins and padding */
  .md\:mx-6 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  
  .md\:px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Ensure mobile width constraints */
  .md\:w-1/2 {
    width: 100% !important;
  }
  
  .md\:w-1/3 {
    width: 100% !important;
  }
  
  .md\:w-1/4 {
    width: 100% !important;
  }
  
  /* Force mobile height */
  .md\:h-screen {
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Prevent desktop-specific backgrounds */
  .md\:bg-cover {
    background-size: cover !important;
  }
  
  /* Force mobile font sizes */
  .md\:text-lg {
    font-size: 1rem !important;
  }
  
  .md\:text-xl {
    font-size: 1.125rem !important;
  }
  
  .md\:text-2xl {
    font-size: 1.25rem !important;
  }
  
  /* Ensure mobile button sizes */
  .md\:px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  .md\:py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Force mobile gap spacing */
  .md\:gap-6 {
    gap: 1rem !important;
  }
  
  .md\:gap-8 {
    gap: 1.5rem !important;
  }
  
  /* Prevent desktop-specific transforms */
  .md\:transform {
    transform: none !important;
  }
  
  .md\:translate-y-6 {
    transform: none !important;
  }
  
  /* Force mobile z-index */
  .md\:z-10 {
    z-index: 10 !important;
  }
  
  /* Ensure mobile overflow handling */
  .md\:overflow-hidden {
    overflow: visible !important;
  }
  
  /* Force mobile border radius */
  .md\:rounded-lg {
    border-radius: 0.375rem !important;
  }
  
  /* Prevent desktop shadows on mobile */
  .md\:shadow-lg {
    box-shadow: none !important;
  }
  
  /* Force mobile opacity */
  .md\:opacity-70 {
    opacity: 1 !important;
  }
  
  /* Ensure mobile transitions */
  .md\:transition-all {
    transition: none !important;
  }
  
  /* Force mobile cursor */
  .md\:cursor-pointer {
    cursor: pointer !important;
  }
  
  /* Prevent desktop hover effects on mobile */
  .md\:hover\:bg-gray-50:hover {
    background-color: transparent !important;
  }
  
  .md\:hover\:text-\[#172154\]:hover {
    color: inherit !important;
  }
  
  /* Force mobile focus states */
  .md\:focus\:outline-none:focus {
    outline: none !important;
  }
  
  /* Ensure mobile active states */
  .md\:active\:bg-gray-100:active {
    background-color: transparent !important;
  }
}

/* Additional stability fixes for screens below 320px */
@media (max-width: 320px) {
  /* Further reduce spacing for very narrow screens */
  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .py-3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  /* Ensure text remains readable */
  .text-lg {
    font-size: 0.875rem !important;
  }
  
  .text-base {
    font-size: 0.75rem !important;
  }
  
  /* Force single column layout */
  .flex {
    flex-direction: column !important;
  }
  
  /* Ensure buttons remain tappable */
  button, a {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden !important;
  }
  
  /* Force mobile menu to take full width */
  #mobileMenu {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  
  /* Ensure mobile header takes full width */
  #menuToggle {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* ===================================================================
   RESPONSIVE HEADER STYLES
   ================================================================== */

/* Desktop header responsive fixes */
@media (min-width: 768px) {
  /* Ensure proper spacing between navigation elements */
  nav .md\:flex {
    gap: 1.5rem;
  }

  /* Prevent logo and navigation overlap */
  nav .flex-grow.flex.justify-center.items-center {
    min-width: 0;
    flex-shrink: 0;
  }

  /* Ensure navigation links don't wrap and have proper spacing */
nav .hidden.md\:flex.items-center.justify-between.w-full {
  flex-wrap: nowrap;
  min-width: 0;
  gap: 1rem;
  flex: 0 1 auto;
  justify-content: flex-start;
}

  /* Responsive logo sizing */
  nav .flex-grow.flex.justify-center.items-center img {
    max-width: 100%;
    height: auto;
  }
}

/* Medium screens (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Adequate spacing on medium screens */
  nav .hidden.md\:flex.items-center.justify-between {
    gap: 1rem;
    flex: 1;
    justify-content: flex-start;
  }

  /* Adjust logo positioning for medium screens - moved more to the left */
  nav .flex-grow.flex.justify-center.items-center a {
    margin-left: -4rem !important;
  }
}

/* Large screens (1024px - 1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {
  /* Good spacing on large screens */
  nav .hidden.md\:flex.items-center.justify-between {
    gap: 1.25rem;
    flex: 1;
    justify-content: flex-start;
  }

  /* Adjust logo positioning for large screens - moved more to the left */
  nav .flex-grow.flex.justify-center.items-center a {
    margin-left: -5rem !important;
  }
}

/* Extra large screens (1280px+) */
@media (min-width: 1280px) {
  /* Full spacing on extra large screens */
  nav .hidden.md\:flex.items-center.justify-between {
    gap: 1.5rem;
    flex: 1;
    justify-content: flex-start;
  }

  /* Full logo positioning for extra large screens - moved more to the left */
  nav .flex-grow.flex.justify-center.items-center a {
    margin-left: -6rem !important;
  }
}

/* Ensure navigation links are properly spaced */
nav a {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure navigation links display properly */
nav a, nav button {
  white-space: nowrap;
  overflow: visible;
  flex-shrink: 0;
}

/* Ensure dropdown buttons don't cause layout issues */
nav .relative {
  flex-shrink: 0;
}

/* Right section responsive adjustments */
nav .hidden.md\:flex.items-center.space-x-2 {
  flex-shrink: 0;
  min-width: 0;
}

/* Register Interest button responsive sizing */
nav .open-register-modal {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Ensure proper container width */
nav .px-2.py-3.md\:flex.hidden.items-center.justify-between.md\:mx-6.h-full {
  max-width: 100%;
  overflow: hidden;
}

/* ===================================================================
   VERTICAL ICON BAR STYLES

/* =============================
   Desktop header positioning fixes
   - Keep left nav content-sized and start-aligned
   - Center logo without negative offsets
   ============================= */
  /* Ensure the left group ignores any utility width like w-full */
  nav .hidden.md\:flex.items-center.justify-between.w-full { width: auto !important; }

@media (min-width: 768px) {
  /* Left nav group should not stretch full width */
  nav .hidden.md\:flex.items-center.justify-between.w-full {
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
  }
  /* Neutralize legacy negative offsets on the centered logo */

/* Stronger structural rule to de-stretch the left nav group in desktop */
@media (min-width: 768px) {
  nav > .px-2.py-3.md\:flex.hidden.items-center.justify-between.md\:mx-6.h-full > .hidden.md\:flex.items-center.justify-between.w-full {
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
  }
}

  /* Removed neutralizing rule to allow logo repositioning */
}

@media (min-width: 1024px) {
  nav .flex-grow.flex.justify-center.items-center a { margin-left: 0 !important; }
}

@media (min-width: 1280px) {
  nav .flex-grow.flex.justify-center.items-center a { margin-left: 0 !important; }
}

   ================================================================== */

/* Vertical Icon Bar with background image for all pages */
.vertical-icon-bar {
  background-image: url('/static/images/9.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* Ensure background image is applied even with conflicting styles */
div.vertical-icon-bar {
  background-image: url('/static/images/9.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* Additional specificity for header vertical icon bar */
header .vertical-icon-bar,
.vertical-icon-bar.opacity-70.fixed {
  background-image: url('/static/images/9.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* Mobile responsive adjustments for vertical icon bar */
@media (max-width: 900px) {
  .vertical-icon-bar {
    width: 3.125rem !important; /* 50px */
    height: 15.625rem !important; /* 250px */
    padding: 4.375rem 0.375rem !important; /* 70px 6px */
  }
  .vertical-icon-bar img {
    width: 1.75rem !important; /* 28px */
    height: 1.75rem !important; /* 28px */
  }
}



/* ==========================================================
   Zoom-aware compensation for Windows 125% display scaling
   - Chrome/Edge: use non-standard zoom for minimal side-effects
   - Firefox: fallback to transform scale on #zoom-root
   Notes:
   - We wrap page content in #zoom-root in base.html
   - We keep overflow-x hidden to avoid horizontal scrollbars
   ========================================================== */

/* Host flags placed on <html> by JS: .zoom-compensate, .firefox | .chromium */
html.zoom-compensate { /* marker only */ }

/* Chromium/Edge path: prefer zoom (does not create containing block like transform) */
html.zoom-compensate.chromium #zoom-root {
  /* The JS sets --z to the inverse of devicePixelRatio (e.g., 0.8 for 1.25 DPR) */
  zoom: var(--z, 1);
}

/* Firefox path: transform fallback. Ensure top-left origin and expand width to compensate */
html.zoom-compensate.firefox #zoom-root {
  transform: scale(var(--z, 1));
  transform-origin: top left;
  width: calc(100% / var(--z, 1));
}

/* General safety: avoid accidental overflow; height flows naturally */
html.zoom-compensate, html.zoom-compensate body { overflow-x: hidden; }

/* Optional: ensure fixed, full-screen overlays still cover after scaling in Firefox path */
@supports (-moz-appearance: none) {
  html.zoom-compensate.firefox #overlay,
  html.zoom-compensate.firefox #register-modal,
  html.zoom-compensate.firefox #mobileMenu {
    /* They are fixed inside a transformed ancestor; ensure they span the expanded wrapper */
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}