/**
 * Preline + Tailwind CSS Entry Point
 * 
 * This file imports Tailwind directives and bridges existing design tokens.
 * Compile with: npm run build:css
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Legacy Isolation Guard
 * 
 * Wrap non-migrated pages/sections in .legacy-scope to prevent
 * Tailwind preflight from overriding custom CSS.
 * 
 * Usage: <div class="legacy-scope">...old page content...</div>
 */
.legacy-scope * {
  all: revert-layer;
}

/**
 * Token Bridge: Custom Properties
 * 
 * Ensure CSS variables from theme.css/style.css are available.
 * If theme.css is loaded AFTER preline.min.css, these are redundant.
 * If preline.min.css loads FIRST, uncomment to ensure tokens exist.
 */
/*
:root {
  --brand-primary: #02BBFB;
  --brand-secondary: #D28DD0;
  --brand-accent: #01B1F4;
  --brand-dark: #F47434;
  --brand-light: #8EB6F1;
  
  --brand-950: #0B1220;
  --brand-800: #14284A;
  --brand-600: #1E3D72;
  --brand-500: #2952A3;
  --brand-300: #7BA2F7;
  --brand-100: #E8F0FF;
  
  --gray-900: #0F1115;
  --gray-700: #2A2F3A;
  --gray-500: #707784;
  --gray-300: #C7CCD6;
  --gray-200: #E3E7EE;
  --gray-50: #F7F9FC;
  --white: #FFFFFF;
  
  --success-600: #198754;
  --warning-600: #B8860B;
  --danger-600: #C0392B;
  --info-600: #0EA5E9;
  
  --font-sans: Inter, "SF Pro Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  
  --shadow-xs: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 6px 16px rgba(16,24,40,.10);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
}
*/

/**
 * Base Layer Overrides
 * 
 * Preserve a11y and visual improvements without breaking existing styles.
 */
@layer base {
  html:focus-within {
    scroll-behavior: smooth;
  }

  a {
    text-underline-offset: 3px;
  }

  /* Ensure Preline focus states are visible */
  *:focus-visible {
    outline: 2px solid var(--brand-accent, #01B1F4);
    outline-offset: 2px;
  }
}

/**
 * Component Layer: Bridge Legacy Classes to Preline Utilities
 * 
 * Optional: If you want .btn-primary to use Tailwind utilities internally
 * while maintaining the same class name for backward compat.
 */
@layer components {
  /* Example: Legacy .btn-primary using Tailwind utilities */
  .tw-btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg;
    @apply bg-brand-primary text-white font-semibold;
    @apply transition-all duration-200;
    @apply hover:brightness-110 focus:ring-2 focus:ring-brand-accent;
  }

  /* Example: Preline-compatible card */
  .tw-card {
    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700;
    @apply rounded-lg shadow-xs p-6;
  }
}

/**
 * Utility Layer: Additional Helpers
 */
@layer utilities {
  /* Smooth scrolling utility */
  .scroll-smooth {
    scroll-behavior: smooth;
  }

  /* Text balance (for headings) */
  .text-balance {
    text-wrap: balance;
  }
}

/* Career Chat Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

/* Chat container styling */
#chat-responses {
  transition: height 0.3s ease;
}

/* Chat formatting improvements - iMessage style */
#chat-responses {
  text-align: left !important;
}

/* Override parent text-center inheritance */
.text-center #chat-responses {
  text-align: left !important;
}

/* Override any inherited text-center from parent containers */
div.text-center #chat-responses,
.text-center div#chat-responses {
  text-align: left !important;
}

/* Force override for all chat content regardless of parent */
#chat-responses,
#chat-responses *,
#chat-responses h1,
#chat-responses h2,
#chat-responses h3,
#chat-responses h4,
#chat-responses p,
#chat-responses li,
#chat-responses div,
#chat-responses span {
  text-align: left !important;
}

/* Maximum specificity override for Tailwind conflicts */
html body .text-center #chat-responses,
html body .text-center #chat-responses *,
html body div.text-center #chat-responses,
html body div.text-center #chat-responses * {
  text-align: left !important;
}

#chat-responses h1,
#chat-responses h2,
#chat-responses h3,
#chat-responses h4 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  line-height: 1.25;
  text-align: left !important;
}

#chat-responses h1:first-child,
#chat-responses h2:first-child,
#chat-responses h3:first-child,
#chat-responses h4:first-child {
  margin-top: 0;
}

#chat-responses ul {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0;
  text-align: left !important;
}

#chat-responses li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  text-align: left !important;
}

#chat-responses li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #1E40AF;
  font-weight: bold;
}

#chat-responses strong {
  font-weight: 600;
  color: #1f2937;
}

#chat-responses em {
  font-style: italic;
  color: #374151;
}

#chat-responses p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
  text-align: left !important;
}

#chat-responses p:last-child {
  margin-bottom: 0;
}

/* Ensure chat bubbles have left-aligned content */
#chat-responses .max-w-2xl,
#chat-responses .max-w-xl {
  text-align: left !important;
}

#chat-responses .leading-relaxed {
  text-align: left !important;
}

/* Override any Tailwind text-center classes in chat */
#chat-responses .text-center {
  text-align: left !important;
}

/* Force left alignment for all text elements in chat */
#chat-responses * {
  text-align: left !important;
}

/* Override Tailwind utility classes with higher specificity */
#chat-responses .text-left,
#chat-responses .text-center,
#chat-responses .text-right {
  text-align: left !important;
}

/* Override flex alignment - only for assistant messages */
#chat-responses .flex:not(.justify-end) {
  justify-content: flex-start !important;
}

/* Ensure user messages stay on the right */
#chat-responses .flex.justify-end {
  justify-content: flex-end !important;
}

/* Force user message alignment with maximum specificity */
html body #chat-responses .flex.justify-end {
  justify-content: flex-end !important;
}

/* Force assistant message alignment with maximum specificity */
html body #chat-responses .flex:not(.justify-end) {
  justify-content: flex-start !important;
}

#chat-responses .items-start {
  align-items: flex-start !important;
}

/* Specific overrides for common Tailwind classes */
#chat-responses .text-left {
  text-align: left !important;
}

#chat-responses .text-center {
  text-align: left !important;
}

/* Mobile navigation styling fixes */
@media (max-width: 767px) {
  .hs-collapse {
    background: white;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  
  .hs-collapse .hs-dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  
  .hs-collapse .hs-dropdown-toggle {
    justify-content: flex-start !important;
  }
  
  .hs-collapse .hs-dropdown-toggle svg:last-child {
    margin-left: auto !important;
  }
}

/* Header Overrides - Prevent old CSS from affecting Preline header */
header[class*="flex"] {
  background-color: white !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

header[class*="flex"] nav {
  max-width: 85rem !important;
  margin: 0 auto !important;
}

header[class*="flex"] * {
  /* Reset any inherited old nav styles */
  list-style: none !important;
}

header[class*="flex"] button {
  all: revert;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  background: transparent;
  border: none;
}

header[class*="flex"] a {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

header[class*="flex"] a::after {
  content: none !important;
}

/* Career Page Overrides - Ensure Preline styles take precedence */
.careers-page .grid {
  display: grid !important;
}

.careers-page .bg-white {
  background-color: white !important;
}

.careers-page .border-gray-200 {
  border-color: #e5e7eb !important;
}

.careers-page .rounded-xl {
  border-radius: 0.75rem !important;
}

.careers-page .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.careers-page .hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.careers-page .transition-shadow {
  transition-property: box-shadow !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.careers-page .text-gray-800 {
  color: #1f2937 !important;
}

.careers-page .text-gray-600 {
  color: #4b5563 !important;
}

.careers-page .bg-blue-600 {
  background-color: #2563eb !important;
}

.careers-page .text-white {
  color: white !important;
}

.careers-page .hover\:bg-blue-700:hover {
  background-color: #1d4ed8 !important;
}

.careers-page .hover\:bg-gray-50:hover {
  background-color: #f9fafb !important;
}

/* Override any legacy career styles */
.careers-page .highlight-card,
.careers-page .job-offer-card,
.careers-page .location-badge,
.careers-page .job-cards-grid,
.careers-page .locations-grid {
  all: unset !important;
}

/* Ensure Preline components work properly */
.careers-page .hs-accordion-group {
  display: block !important;
}

.careers-page .hs-accordion {
  display: block !important;
}

.careers-page .hs-accordion-toggle {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

header[class*="flex"] .hs-dropdown > button::after {
  content: none !important;
}

/* Ensure Preline dropdowns work correctly */
.hs-dropdown-menu {
  z-index: 9999 !important;
}

/* Make buttons actually look clickable */
.hs-dropdown-toggle {
  cursor: pointer !important;
  user-select: none !important;
}

.hs-dropdown-toggle:hover {
  background-color: rgb(243 244 246) !important;
}

/* Ensure nav items have proper spacing */
header[class*="flex"] .flex.items-center {
  gap: 0.25rem;
}

/* ============================================
   COMPREHENSIVE BUTTON STYLING - BRAND COLORS
   Override ALL Tailwind utility classes
   ============================================ */

/* ALL Navigation Links - Maximum specificity */
header nav a.p-2,
header nav a[class*="p-2"],
header nav a[class*="text-sm"],
header nav a.text-gray-800,
header nav a.text-sm.text-gray-800 {
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #0F1115 !important;
  transition: all 0.2s ease !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  background-color: transparent !important;
}

/* ALL Nav Links Hover State */
header nav a.p-2:hover,
header nav a[class*="p-2"]:hover,
header nav a[class*="text-sm"]:hover,
header nav a.text-gray-800:hover,
header nav a.hover\:bg-gray-100:hover {
  color: #02BBFB !important;
  background-color: #F0F9FF !important;
}

/* Active/Current page state */
header nav a.bg-gray-100,
header nav a[class*="bg-gray-100"] {
  color: #02BBFB !important;
  background-color: #E0F2FE !important;
  font-weight: 600 !important;
}

/* ALL Dropdown Toggle Buttons - Maximum specificity */
button#hs-careers-mega-menu,
button#hs-services-mega-menu,
button.hs-dropdown-toggle,
button[class*="hs-dropdown-toggle"],
.hs-dropdown button {
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #0F1115 !important;
  transition: all 0.2s ease !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  background-color: transparent !important;
  cursor: pointer !important;
}

/* Fix button width - should match nav links on desktop */
@media (min-width: 768px) {
  button#hs-careers-mega-menu,
  button#hs-services-mega-menu,
  button.hs-dropdown-toggle,
  .hs-dropdown button {
    width: auto !important;
    display: inline-flex !important;
  }
}

/* ALL Dropdown Buttons Hover */
button#hs-careers-mega-menu:hover,
button#hs-services-mega-menu:hover,
button.hs-dropdown-toggle:hover,
button[class*="hs-dropdown-toggle"]:hover,
.hs-dropdown button:hover {
  color: #02BBFB !important;
  background-color: #F0F9FF !important;
}

/* ALL Dropdown Arrows - Default and Hover */
.hs-dropdown button svg,
.hs-dropdown-toggle svg,
button#hs-careers-mega-menu svg,
button#hs-services-mega-menu svg {
  color: #6B7280 !important;
  transition: color 0.2s ease !important;
}

.hs-dropdown button:hover svg,
.hs-dropdown-toggle:hover svg,
button#hs-careers-mega-menu:hover svg,
button#hs-services-mega-menu:hover svg {
  color: #02BBFB !important;
}

/* ALL Dropdown Menus */
.hs-dropdown-menu,
div[class*="hs-dropdown-menu"] {
  background: white !important;
  border: 1px solid #E3E7EE !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  padding: 0.5rem !important;
}

/* ALL Dropdown Menu Links */
.hs-dropdown-menu a,
div[class*="hs-dropdown-menu"] a,
.hs-dropdown-menu a.text-sm,
.hs-dropdown-menu a.text-gray-800 {
  color: #0F1115 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  background-color: transparent !important;
}

/* ALL Dropdown Menu Links Hover */
.hs-dropdown-menu a:hover,
div[class*="hs-dropdown-menu"] a:hover,
.hs-dropdown-menu a.hover\:bg-gray-100:hover {
  background-color: #F0F9FF !important;
  color: #02BBFB !important;
}

/* CTA Button - Apply Now - ALL selectors */
header a[href="/apply.php"],
header a.bg-blue-600,
a.bg-blue-600[href="/apply.php"] {
  background: linear-gradient(135deg, #02BBFB 0%, #01B1F4 100%) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(2, 187, 251, 0.2) !important;
}

/* CTA Button Hover */
header a[href="/apply.php"]:hover,
header a.bg-blue-600:hover,
a.bg-blue-600[href="/apply.php"]:hover {
  background: linear-gradient(135deg, #01B1F4 0%, #0284C7 100%) !important;
  box-shadow: 0 4px 6px rgba(2, 187, 251, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Logo sizing */
header img[alt*="Synaxus"] {
  height: 48px !important;
  width: auto !important;
}

/* Mobile hamburger button - Only visible on mobile */
.hs-collapse-toggle {
  border-color: #E3E7EE !important;
  color: #0F1115 !important;
  display: flex !important;
}

.hs-collapse-toggle:hover {
  background-color: #F0F9FF !important;
  border-color: #02BBFB !important;
}

/* Hide mobile menu button on desktop */
@media (min-width: 768px) {
  .hs-collapse-toggle {
    display: none !important;
  }
}

/* Divider styling */
header .bg-gray-100[class*="h-px"],
header .bg-gray-300[class*="h-4"] {
  background-color: #E3E7EE !important;
}

/* Ensure proper spacing on desktop */
@media (min-width: 768px) {
  header nav .flex-col.md\\:flex-row {
    gap: 0.25rem !important;
  }
  
  header nav a[class*="p-2"],
  .hs-dropdown-toggle {
    margin: 0 0.125rem !important;
  }
}

/* Mobile menu styling */
@media (max-width: 767px) {
  .hs-collapse {
    background: white !important;
  }
  
  header nav a[class*="p-2"],
  .hs-dropdown-toggle {
    padding: 0.875rem 1rem !important;
    justify-content: flex-start !important;
  }
  
  header nav a[class*="p-2"] svg,
  .hs-dropdown-toggle svg {
    display: block !important;
  }
}