/**
 * Global Button Hover Styles
 * Ensures all buttons across all pages have consistent hover effects
 * This file should be included in all HTML pages
 */

/* Base button hover styles - applies to all buttons */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.w-button:hover:not(:disabled),
a.btn:hover:not(:disabled),
a.w-button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Primary button hover styles */
.btn-primary:hover:not(:disabled),
button.btn-primary:hover:not(:disabled),
a.btn-primary:hover:not(:disabled) {
  background: #d74e27 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(251, 60, 0, 0.2);
}

/* Secondary button hover styles */
.btn-secondary:hover:not(:disabled),
button.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover:not(:disabled) {
  background: #475569 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Icon button hover styles */
.btn-icon:hover:not(:disabled),
button.btn-icon:hover:not(:disabled),
a.btn-icon:hover:not(:disabled) {
  background: #f7f7f8 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Webflow button hover styles */
.w-button:hover:not(:disabled),
a.w-button:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Webflow primary button hover */
.w-button.is-primary:hover:not(:disabled),
a.w-button.is-primary:hover:not(:disabled) {
  background: #d74e27 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(251, 60, 0, 0.2);
}

/* Webflow secondary button hover */
.w-button.is-secondary:hover:not(:disabled),
a.w-button.is-secondary:hover:not(:disabled) {
  background: #475569 !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Generic button hover for buttons without specific classes */
button:not(.btn):not(.w-button):hover:not(:disabled),
input[type="button"]:not(.btn):not(.w-button):hover:not(:disabled),
input[type="submit"]:not(.btn):not(.w-button):hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
  filter: brightness(0.95);
}

/* Disabled button styles - no hover effect */
button:disabled,
.btn:disabled,
.w-button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
}

button:disabled:hover,
.btn:disabled:hover,
.w-button:disabled:hover,
input[type="button"]:disabled:hover,
input[type="submit"]:disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Back button hover */
.back-button:hover:not(:disabled),
a.back-button:hover:not(:disabled) {
  background: #f7f7f8 !important;
  border-color: #fb3c00 !important;
  color: #fb3c00 !important;
  transform: translateY(-1px);
}

/* Send button hover (for chat) */
.send-button:hover:not(:disabled),
button.send-button:hover:not(:disabled) {
  background: #d74e27 !important;
  transform: scale(1.05);
}

/* Navigation link buttons hover */
.nav-link:hover:not(:disabled),
a.nav-link:hover:not(:disabled) {
  background: #f7f7f8 !important;
  color: #fb3c00 !important;
}

/* Auth buttons hover (sign up, login, logout, profile) */
.sign_up:hover:not(:disabled),
.login:hover:not(:disabled),
.logout:hover:not(:disabled),
.profile:hover:not(:disabled),
a.sign_up:hover:not(:disabled),
a.login:hover:not(:disabled),
a.logout:hover:not(:disabled),
a.profile:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Ensure smooth transitions for all buttons */
button,
.btn,
.w-button,
a.btn,
a.w-button,
input[type="button"],
input[type="submit"] {
  transition: all 0.2s ease;
}

/* ============================================
   NAVBAR FIX (GLOBAL): Prevent logo overlap + disappearing links (Webflow .w-nav)
   Applies to both admin mode (extra links) and non-admin mode.
   Uses higher-specificity selectors so it can override per-page <style> blocks.
   ============================================ */

/* Allow flex children to shrink correctly (prevents overlap/slide-under-logo) */
html body .navbar-3.w-nav {
  flex-wrap: nowrap !important;
}

html body .navbar-3 .brand {
  flex: 0 0 auto !important;
  z-index: 2 !important;
}

html body .navbar-3 .w-container {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* critical for flex overflow behavior */
}

/* Make the menu area shrink safely instead of pushing into the logo */
html body .navbar-3 .home_nav_links,
html body .navbar-3 .w-nav-menu,
html body .navbar-3 .nav-links-wrapper {
  min-width: 0 !important;
}

html body .navbar-3 .nav-links-wrapper {
  flex: 1 1 auto !important;
  gap: 1.25rem !important;      /* smaller, safer default gap */
  overflow: hidden !important;   /* prevents overlaying logo */
}

/* Keep each link on one line */
html body .navbar-3 .nav-links-wrapper .w-nav-link,
html body .navbar-3 .nav-links-wrapper .tablet_nav {
  white-space: nowrap !important;
}

/* Extra tightening right before Webflow collapses at 991px */
@media screen and (max-width: 1100px) and (min-width: 992px) {
  html body .navbar-3 .nav-links-wrapper { gap: 0.9rem !important; }
  html body .navbar-3 .auth-buttons-wrapper { gap: 0.5rem !important; }
}

/* Hand control back to Webflow at collapse breakpoint */
@media screen and (max-width: 991px) {
  html body .navbar-3.w-nav { display: block !important; } /* let Webflow handle collapsed menu */
  html body .navbar-3 .w-container { min-width: auto !important; }
  html body .navbar-3 .nav-links-wrapper { overflow: visible !important; }
}

/* =========================================================
   NAVBAR OVERRIDE (FIX): stop links disappearing on mid screens
   - Works for admin and non-admin
   - Avoids clipping (no overflow:hidden)
   - Wraps links before Webflow collapses at 991px
   ========================================================= */

html body .navbar-3 .nav-links-wrapper {
  overflow: visible !important; /* critical: stop clipping */
  gap: clamp(0.75rem, 1.4vw, 1.5rem) !important;
}

/* Admin links injected by admin-nav.js have inline margin-left: 1rem; override it */
html body #admin-dashboard-link,
html body #system-diagnostics-link {
  margin-left: 0 !important;
}

/* Between desktop and Webflow collapse: wrap links so they stay visible */
@media screen and (max-width: 1250px) and (min-width: 992px) {
  html body .navbar-3 .nav-links-wrapper {
    flex-wrap: wrap !important;
    row-gap: 0.35rem !important;
  }
  html body .navbar-3 .auth-buttons-wrapper {
    gap: 0.5rem !important;
  }
}

/* =========================================================
   NAVBAR MID-SCREEN TIGHTEN (NO HAMBURGER CHANGES)
   هدف: reduce padding/gaps before 991px so wrapping looks clean
   ========================================================= */
@media screen and (max-width: 1250px) and (min-width: 992px) {
  /* Reduce hard-coded page padding (many pages set padding: 0 24px !important) */
  html body .navbar-3.w-nav {
    padding-left: clamp(8px, 1vw, 16px) !important;
    padding-right: clamp(8px, 1vw, 16px) !important;
  }

  /* Tighten logo spacing (many pages use ~24px margin-right) */
  html body .navbar-3 .brand {
    margin-right: clamp(8px, 1vw, 16px) !important;
  }

  /* Tighten link spacing (some pages use margin-right: 24px per link) */
  html body .navbar-3 .nav-links-wrapper .tablet_nav,
  html body .navbar-3 .nav-links-wrapper .w-nav-link {
    margin-right: clamp(10px, 1.2vw, 18px) !important;
  }

  /* If wrapping occurs, make it look intentional */
  html body .navbar-3 .nav-links-wrapper {
    row-gap: 0.35rem !important;
  }
}

/* =========================================================
   NAV ICON MODE (SVG, CSS-only, NO hamburger changes)
   - Keeps Webflow collapse at 991px
   - Prevents mid-screen wrapping by shrinking nav text into compact SVG icons
   - Covers BOTH nav types:
     - Webflow navbar: .navbar-3 .nav-links-wrapper a.tablet_nav / .w-nav-link
     - App-shell navbar: .nav-bar .nav-links a.nav-link
   ========================================================= */

/* SVG icon data URIs (monochrome) */
:root {
  --ghla-nav-ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z' stroke='%23111827' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ghla-nav-ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 14a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v8Z' stroke='%23111827' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 8h8M8 12h6' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ghla-nav-ic-subscription: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7Z' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='M3 10h18' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='M7 16h4' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ghla-nav-ic-contact: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='m5 7 7 5 7-5' stroke='%23111827' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ghla-nav-ic-about: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='M12 10v7' stroke='%23111827' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 7h.01' stroke='%23111827' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Admin icons in brand orange */
  --ghla-nav-ic-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14' stroke='%23fb3c00' stroke-width='2'/%3E%3Cpath d='M7 17v-5M12 17V7M17 17v-3' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 19h16' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ghla-nav-ic-diagnostics: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 2h4' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 2v6' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 8h10' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8.5 8 10 21h4l1.5-13' stroke='%23fb3c00' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.8 13.5h4.4' stroke='%23fb3c00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Base: make icon-only links compact without affecting hamburger */
@media screen and (min-width: 992px) {
  html body .navbar-3 .nav-links-wrapper .tablet_nav,
  html body .navbar-3 .nav-links-wrapper .w-nav-link,
  html body .nav-bar .nav-links .nav-link {
    position: relative !important;
  }
}

/* 1) ADMIN MODE: shrink ONLY the two admin links earlier (up to your reported wrap point) */
@media screen and (max-width: 1752px) and (min-width: 992px) {
  html body #admin-dashboard-link,
  html body #system-diagnostics-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0.45rem 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: transparent !important;
    font-size: 0.01px !important;
    line-height: 0 !important;
    margin-left: 0 !important;
  }
  html body #admin-dashboard-link::before,
  html body #system-diagnostics-link::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }
  html body #admin-dashboard-link::before { background-image: var(--ghla-nav-ic-admin) !important; }
  html body #system-diagnostics-link::before { background-image: var(--ghla-nav-ic-diagnostics) !important; }
}

/* 2) MAIN LINKS: shrink ALL main links in the mid band (992–1375px)
   NOTE: This intentionally triggers a bit earlier to cover admin-mode widths like ~1373px. */
@media screen and (max-width: 1375px) and (min-width: 992px) {
  /* Webflow navbar */
  html body .navbar-3 .nav-links-wrapper a.tablet_nav,
  html body .navbar-3 .nav-links-wrapper a.w-nav-link,
  /* App-shell navbar */
  html body .nav-bar .nav-links a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0.45rem 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: transparent !important;
    font-size: 0.01px !important;
    line-height: 0 !important;
    margin-right: 0 !important;
  }

  html body .navbar-3 .nav-links-wrapper a.tablet_nav::before,
  html body .navbar-3 .nav-links-wrapper a.w-nav-link::before,
  html body .nav-bar .nav-links a.nav-link::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
  }

  /* Map icons by href */
  html body .navbar-3 .nav-links-wrapper a[href="index.html"]::before,
  html body .nav-bar .nav-links a[href="index.html"].nav-link::before { background-image: var(--ghla-nav-ic-home) !important; }

  html body .navbar-3 .nav-links-wrapper a[href="chat.html"]::before,
  html body .nav-bar .nav-links a[href="chat.html"].nav-link::before { background-image: var(--ghla-nav-ic-chat) !important; }

  html body .navbar-3 .nav-links-wrapper a[href="pricing.html"]::before,
  html body .nav-bar .nav-links a[href="pricing.html"].nav-link::before { background-image: var(--ghla-nav-ic-subscription) !important; }

  html body .navbar-3 .nav-links-wrapper a[href="contact.html"]::before,
  html body .nav-bar .nav-links a[href="contact.html"].nav-link::before { background-image: var(--ghla-nav-ic-contact) !important; }

  html body .navbar-3 .nav-links-wrapper a[href="about-us.html"]::before,
  html body .nav-bar .nav-links a[href="about-us.html"].nav-link::before { background-image: var(--ghla-nav-ic-about) !important; }

  /* Ensure icon mode doesn't wrap oddly once compact */
  html body .navbar-3 .nav-links-wrapper,
  html body .nav-bar .nav-links {
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
  }
}