/* ==========================================================================
   CANVAY INTEGRATED SOLUTIONS LTD — Design Token System
   ========================================================================== 
   
   All design values are defined as CSS custom properties (tokens).
   Tailwind CSS classes reference these tokens via arbitrary values:
     e.g., bg-[var(--color-primary)], text-[var(--color-accent)]
   
   To change the entire site's look, update the values below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors — exactly matched to the SVG logo */
  --color-primary:        #051848;   /* Brand Navy (dark navy) — main headings, text, dark backgrounds */
  --color-primary-light:  #0d225c;   /* Lighter brand navy for borders/cards */
  --color-secondary:      #0095ff;   /* Brand Primary Blue Accent — buttons, active states, key brand elements */
  --color-secondary-light:#0a0ec5;   /* Brand Deep Blue — auxiliary accent color */
  --color-accent:         #007a7e;   /* Darkened Brand Teal for text on white backgrounds (WCAG compliant >4.5:1) */
  --color-accent-light:   #00efe1;   /* Brand Cyan/Teal (vibrant) — gradients, accents on dark surfaces */
  --color-accent-green:   #10b981;   /* Accent Green — for renewable energy, positive status */
  --color-accent-green-light: #34d399;

  /* Neutral Palette */
  --color-bg-white:       #ffffff;
  --color-bg-light:       #f8fafc;   /* Off-white page backgrounds                      */
  --color-bg-muted:       #f1f5f9;   /* Section alternating backgrounds                 */
  --color-bg-dark:        #051848;   /* Dark mode sections (hero, footer)                */

  /* Text Colors */
  --color-text-primary:   #051848;   /* Headings and body text                          */
  --color-text-secondary: #334155;   /* Subheadings, descriptions                       */
  --color-text-muted:     #475569;   /* Darker slate for high contrast body/muted text  */
  --color-text-light:     #64748b;   /* Placeholder text, secondary meta text           */
  --color-text-on-dark:   #f1f5f9;   /* Text on dark backgrounds                        */
  --color-text-white:     #ffffff;

  /* Border & Divider Colors */
  --color-border:         #e2e8f0;
  --color-border-dark:    #0d225c;
  --color-border-accent:  #007a7e;

  /* Overlay */
  --color-overlay:        rgba(5, 24, 72, 0.6);
  --color-glass:          rgba(255, 255, 255, 0.7);
  --color-glass-dark:     rgba(5, 24, 72, 0.8);

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY TOKENS — Header: Satoshi, Body: Inter
     -------------------------------------------------------------------------- */
  --font-heading:         'Satoshi', sans-serif;
  --font-body:            'Inter', sans-serif;

  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-size-4xl:        2.25rem;    /* 36px */
  --font-size-5xl:        3rem;       /* 48px */
  --font-size-6xl:        3.75rem;    /* 60px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.625;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:  0.05em;
  --letter-spacing-wider: 0.1em;

  /* --------------------------------------------------------------------------
     3. SPACING TOKENS
     -------------------------------------------------------------------------- */
  --space-xs:             0.25rem;    /* 4px  */
  --space-sm:             0.5rem;     /* 8px  */
  --space-md:             1rem;       /* 16px */
  --space-lg:             1.5rem;     /* 24px */
  --space-xl:             2rem;       /* 32px */
  --space-2xl:            3rem;       /* 48px */
  --space-3xl:            4rem;       /* 64px */
  --space-4xl:            6rem;       /* 96px */
  --space-5xl:            8rem;       /* 128px */

  /* --------------------------------------------------------------------------
     4. BORDER & RADIUS TOKENS
     -------------------------------------------------------------------------- */
  --radius-sm:            0.375rem;   /* 6px  */
  --radius-md:            0.5rem;     /* 8px  */
  --radius-lg:            0.75rem;    /* 12px */
  --radius-xl:            1rem;       /* 16px */
  --radius-2xl:           1.5rem;     /* 24px */
  --radius-full:          9999px;

  /* --------------------------------------------------------------------------
     5. SHADOW TOKENS
     -------------------------------------------------------------------------- */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:            0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:            0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl:            0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow:          0 0 20px rgba(8, 145, 178, 0.15);
  --shadow-glow-lg:       0 0 40px rgba(8, 145, 178, 0.2);

  /* --------------------------------------------------------------------------
     6. TRANSITION TOKENS
     -------------------------------------------------------------------------- */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;
  --transition-spring:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     7. Z-INDEX TOKENS
     -------------------------------------------------------------------------- */
  --z-dropdown:           10;
  --z-sticky:             20;
  --z-navbar:             30;
  --z-overlay:            40;
  --z-modal:              50;
  --z-toast:              60;
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: inherit;
}


/* ==========================================================================
   CUSTOM COMPONENT STYLES
   (Styles that are too complex for inline Tailwind classes)
   ========================================================================== */

/* --- Gradient Text (for accent headings) --- */
.text-gradient {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-teal {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Hero gradient background --- */
.bg-hero-gradient {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-primary) 40%, var(--color-secondary) 100%);
}

/* --- Glassmorphism card --- */
.glass-card {
  background: var(--color-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-card-dark {
  background: var(--color-glass-dark);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Section badge/chip (small label above headings) --- */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  background: rgba(8, 145, 178, 0.08);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: var(--radius-full);
  letter-spacing: var(--letter-spacing-wide);
}

.section-badge-light {
  color: var(--color-accent-light);
  background: rgba(34, 211, 238, 0.1);
  border-color: rgba(34, 211, 238, 0.2);
}

/* --- Navbar scroll effect --- */
.navbar-scrolled {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

/* Default state of links when navbar is scrolled (brand navy) */
.navbar-scrolled .nav-link-custom {
  color: var(--color-text-primary) !important;
}

/* Scrolled active and hover link states (brand blue accent) */
.navbar-scrolled .nav-link-custom:hover,
.navbar-scrolled .nav-link-custom.active {
  color: var(--color-secondary) !important;
}

/* Scrolled link underline colors on active and hover states */
.navbar-scrolled .nav-link-custom.active::after,
.navbar-scrolled .nav-link-custom:hover::after {
  background: var(--color-secondary) !important;
}

/* Active links before scrolling (vibrant cyan accent on dark background) */
.nav-link-custom.active {
  color: var(--color-accent-light) !important;
}

.nav-link-custom.active::after {
  width: 100% !important;
  background: var(--color-accent-light) !important;
}

/* Hover state before scrolling (vibrant cyan accent) */
.nav-link-custom:hover {
  color: var(--color-accent-light) !important;
}

.nav-link-custom:hover::after {
  background: var(--color-accent-light) !important;
}

.navbar-scrolled .logo-white {
  display: none;
}

.navbar-scrolled .logo-dark {
  display: block;
}

/* --- Card hover effects --- */
.card-hover {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-hover-glow:hover {
  box-shadow: var(--shadow-glow-lg);
}

/* --- Animated underline links --- */
.link-underline {
  position: relative;
  text-decoration: none;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.link-underline:hover::after {
  width: 100%;
}

/* --- Stats counter animation --- */
.stat-number {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-4xl);
  line-height: 1;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .stat-number {
    font-size: var(--font-size-5xl);
  }
}

/* --- Scroll-triggered fade-in animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-100 { transition-delay: 100ms; }
.animate-on-scroll.delay-200 { transition-delay: 200ms; }
.animate-on-scroll.delay-300 { transition-delay: 300ms; }
.animate-on-scroll.delay-400 { transition-delay: 400ms; }
.animate-on-scroll.delay-500 { transition-delay: 500ms; }

/* --- Mobile menu overlay --- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  background: var(--color-bg-white);
  z-index: var(--z-modal);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.mobile-menu-drawer.active {
  transform: translateX(0);
}

/* --- Project filter buttons --- */
.filter-btn {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.filter-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.filter-btn.active {
  color: var(--color-text-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* --- FAQ Accordion --- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-answer.open {
  max-height: 500px;
}

.faq-chevron {
  transition: transform var(--transition-base);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* --- Divider with teal accent (inspired by logo underline) --- */
.divider-accent {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.divider-accent::before,
.divider-accent::after {
  content: '';
  height: 2px;
  width: 2rem;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

/* --- Pulse animation for live/active elements --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(8, 145, 178, 0); }
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* --- Timeline vertical line --- */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-accent), var(--color-secondary));
  transform: translateX(-50%);
}

@media (max-width: 767px) {
  .timeline-line {
    left: 1.25rem;
  }
}

/* --- Service icon container --- */
.service-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: rgba(8, 145, 178, 0.08);
  color: var(--color-accent);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.card-hover:hover .service-icon {
  background: var(--color-accent);
  color: var(--color-text-white);
}

/* --- Project card overlay on hover --- */
.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-overlay) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: inherit;
}

.project-card:hover .project-card-overlay {
  opacity: 1;
}

/* --- Custom scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* --- Selection color --- */
::selection {
  background: rgba(8, 145, 178, 0.2);
  color: var(--color-text-primary);
}

/* --- Logo & Mobile Menu Scroll Behavior --- */
#main-navbar:not(.navbar-scrolled) .navbar-logo {
  filter: brightness(0) invert(1);
}

#main-navbar:not(.navbar-scrolled) #mobile-menu-btn {
  color: #ffffff !important;
}

#main-navbar.navbar-scrolled #mobile-menu-btn {
  color: var(--color-primary) !important;
}

/* --- Announcement Section & WYSIWYG Editor Styles --- */
.announcement-content strong {
  font-weight: 700;
}

.announcement-content em {
  font-style: italic;
}

.announcement-content a {
  color: #00efe1;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}

.announcement-content a:hover {
  color: #ffffff;
}

/* Admin WYSIWYG Editor */
.wysiwyg-container {
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  background-color: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wysiwyg-container:focus-within {
  border-color: #0095ff;
  box-shadow: 0 0 0 3px rgba(0, 149, 255, 0.15);
}

.wysiwyg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.wysiwyg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.wysiwyg-btn:hover {
  background-color: #e2e8f0;
  color: #051848;
}

.wysiwyg-btn.is-active {
  background-color: #0095ff;
  color: #ffffff;
  border-color: #0095ff;
}

.wysiwyg-editor {
  min-height: 90px;
  padding: 0.875rem;
  outline: none;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #051848;
}

.wysiwyg-editor[placeholder]:empty:before {
  content: attr(placeholder);
  color: #94a3b8;
  pointer-events: none;
}

.wysiwyg-editor strong {
  font-weight: 700;
}

.wysiwyg-editor em {
  font-style: italic;
}

.wysiwyg-editor a {
  color: #0095ff;
  text-decoration: underline;
  font-weight: 600;
}

.emoji-picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
  padding: 0.625rem;
  margin-top: 0.25rem;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-width: 280px;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
  user-select: none;
}

.emoji-item:hover {
  background-color: #f1f5f9;
  transform: scale(1.2);
}