/* ==========================================================================
   Zibuke Africa ENHANCED Stylesheet
   Luxury Tech Aesthetics with Strict 3-Color Palette
   Colors: #000000 (Black), #ffffff (White), #cfff04 (Electric Lime)
   
   IMPORTANT: This file enhances the base styles.css
   Import Google Fonts for premium typography
   ========================================================================== */

/* ==========================================================================
   1. TYPOGRAPHY UPGRADE (Luxury Tech Aesthetics)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color Palette - NEVER VIOLATED */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-lime: #cfff04;
  
  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Typography */
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings - Luxury Tech Style */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
}

h3 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
}

h4 {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Lead Paragraph */
.lead {
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Eyebrow Labels - Premium Badge Style */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 8px 18px;
  border: 1.5px solid var(--color-lime);
  color: var(--color-lime);
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   2. HIGH-CONTRAST CARDS (Neo-Brutalist / Luxury Borders)
   ========================================================================== */

/* Base Card Styling */
.card {
  padding: 32px;
  border: 1.5px solid var(--color-lime);
  transition: all var(--transition-medium);
  position: relative;
  overflow: hidden;
}

/* Dark Cards (Black Sections) */
.section-black .card {
  background-color: var(--color-black);
  border-color: var(--color-lime);
  border-width: 1.5px;
}

.section-black .card:hover {
  transform: translateY(-4px);
}

.section-black .card h3 {
  color: var(--color-lime);
  margin-bottom: 12px;
}

.section-black .card p {
  color: var(--color-lime);
}

/* White Cards (White Sections) */
.section-white .card {
  background-color: var(--color-white);
  border-color: var(--color-black);
  border-width: 1px;
}

.section-white .card:hover {
  transform: translateY(-4px);
}

.section-white .card h3 {
  color: var(--color-black);
  margin-bottom: 12px;
}

.section-white .card p {
  color: var(--color-black);
}

/* Lime Cards (Lime Sections) */
.section-lime .card {
  background-color: var(--color-lime);
  border-color: var(--color-black);
}

.section-lime .card:hover {
  transform: translateY(-4px);
}

.section-lime .card h3 {
  color: var(--color-black);
  margin-bottom: 12px;
}

.section-lime .card p {
  color: var(--color-black);
}

/* Card Grid - Bento Style */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* ==========================================================================
   3. INTERACTIVE BUTTONS & BADGE MICRO-ANIMATIONS
   ========================================================================== */

/* Primary Button (Lime Background, Black Text) */
.btn-primary,
.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background-color: var(--color-lime);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid var(--color-lime);
  cursor: pointer;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

/* Secondary Button (Outline Style) */
.btn-secondary,
.btn.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--color-lime);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid var(--color-lime);
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary:hover {
  transform: translateY(-2px);
}

/* Secondary Button Inside A Light Section
   Lime text on a white background breaks the colour rules, and on a lime
   background it would be lime on lime. These rules carry one more class than
   the base stylesheet so the light section always wins. */
.section-white .btn.btn-secondary,
.section-white .btn-secondary,
.section-lime .btn.btn-secondary,
.section-lime .btn-secondary {
  color: var(--color-black);
  border-color: var(--color-black);
}

/* Black Button (for Lime Sections) */
.btn-black,
.btn.btn-black {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background-color: var(--color-black);
  color: var(--color-lime);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  cursor: pointer;
  text-decoration: none;
}

.btn-black:hover {
  transform: translateY(-2px);
}

/* CTA Button in Navigation */
.nav-cta {
  background-color: var(--color-lime) !important;
  color: var(--color-black) !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  border: none !important;
}

.nav-cta:hover {
  transform: translateY(-1px);
}

/* Step Number Badge */
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-lime);
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 20px;
}

.step:hover .step-num {
  transform: scale(1.05);
}

/* ==========================================================================
   4. EDITORIAL HIGH-CONTRAST PHOTOGRAPHY STYLING
   ========================================================================== */

/* Editorial Photo with Caption */
.figure {
  margin: 48px 0;
}

.figure img {
  width: 100%;
  height: auto;
  filter: grayscale(80%) contrast(1.3);
  border: 1px solid var(--color-lime);
}

.figure figcaption {
  margin-top: 16px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--color-lime);
}

.section-white .figure figcaption {
  color: var(--color-black);
}

/* ==========================================================================
   5. SCROLL-DRIVEN REVEAL ANIMATIONS
   ========================================================================== */

/* Base Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation for Cards */
.reveal-stagger {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-stagger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay classes for staggered animations */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* Scale Up Animation */
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   6. ENHANCED SECTION STYLING
   ========================================================================== */

/* Section Headers */
.section-head {
  margin-bottom: 48px;
}

.section-head h2 {
  margin-bottom: 16px;
}

.section-head .lead {
  max-width: 720px;
}

/* Divider - Lime Accent Line */
.divider-lime {
  width: 60px;
  height: 3px;
  background-color: var(--color-lime);
  margin: 20px 0;
  transition: width var(--transition-medium);
}

.section-head:hover .divider-lime {
  width: 100px;
}

/* Callout Box (Lime Background) */
.callout {
  background-color: var(--color-lime);
  color: var(--color-black);
  padding: 32px 36px;
  margin: 40px 0;
  border: none;
  position: relative;
}

.callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--color-black);
}

.callout h3 {
  color: var(--color-black);
  margin-bottom: 12px;
}

.callout p {
  color: var(--color-black);
  margin-bottom: 0;
}

/* Dark Callout Box */
.callout-dark {
  background-color: var(--color-black);
  color: var(--color-lime);
  padding: 32px 36px;
  margin: 40px 0;
  border: 1px solid var(--color-lime);
  position: relative;
}

.callout-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--color-lime);
}

.callout-dark h3 {
  color: var(--color-lime);
  margin-bottom: 12px;
}

.callout-dark p {
  color: var(--color-lime);
  margin-bottom: 0;
}

/* ==========================================================================
   7. ENHANCED HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  background-color: var(--color-black);
  border-bottom: 2px solid var(--color-lime);
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Navigation Links */
.main-nav a {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-lime);
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
}

.main-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Logo Styling */
.logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1;
  gap: 4px;
}

.logo-mark {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--color-lime);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   8. ENHANCED FORM ELEMENTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-black);
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-lime);
}

/* White Section Inputs */
.section-white input,
.section-white textarea,
.section-white select {
  color: var(--color-black);
  background-color: var(--color-white);
  border-color: var(--color-black);
}

.section-white input:focus,
.section-white textarea:focus,
.section-white select:focus {
  border-color: var(--color-lime);
}

/* ==========================================================================
   10. RESPONSIVE ENHANCEMENTS
   ========================================================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  
  .section {
    padding: 64px 0;
  }
  
  .cards-3 {
    grid-template-columns: 1fr;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-black {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.8rem;
  }
  
  .container {
    padding: 0 16px;
  }
  
  .card {
    padding: 24px;
  }
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Selection Color */
::selection {
  background-color: var(--color-lime);
  color: var(--color-black);
}

::-moz-selection {
  background-color: var(--color-lime);
  color: var(--color-black);
}

/* ==========================================================================
   12. SCROLL PROGRESS BAR
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background-color: var(--color-lime);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ==========================================================================
   14. HEADER SCROLLED STATE
   ========================================================================== */

.site-header.scrolled {
  padding: 8px 0;
}

.site-header.scrolled .site-header-inner {
  padding: 12px 24px;
}

/* ==========================================================================
   15. IMAGE LAZY LOADING
   ========================================================================== */

img[data-src] {
  opacity: 0;
  transition: opacity 0.5s ease;
}

img[data-src].loaded {
  opacity: 1;
}

/* ==========================================================================
   16. FOCUS STYLES FOR ACCESSIBILITY
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}

/* ==========================================================================
   17. PRINT STYLES
   ========================================================================== */

@media print {
  .site-header,
  .topbar,
  .country-switcher,
  .scroll-progress,
  .nav-cta {
    display: none !important;
  }
  
  body {
    color: #000000 !important;
    background: #ffffff !important;
  }
  
  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }
}

/* ==========================================================================
   18. PREMIUM IMAGE FRAMEWORK & STORYTELLING STYLES
   ========================================================================== */

.story-img-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  border: 1.5px solid #cfff04;
  background-color: #000000;
  transition: transform var(--transition-medium), border-color var(--transition-medium), box-shadow var(--transition-medium);
  margin-top: 24px;
  margin-bottom: 24px;
}

.story-img-container:hover {
  transform: translateY(-4px);
}

.story-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.story-img-container:hover .story-img {
  transform: scale(1.025);
}

/* Image Badge Tag */
.img-theme-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #000000;
  color: #cfff04;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #cfff04;
  z-index: 2;
}

/* Caption Overlay / Bar */
.img-caption-bar {
  padding: 12px 18px;
  background: #000000;
  border-top: 1.5px solid #cfff04;
  font-size: 0.88rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Emphasis carries weight, never hue: a strong element inside the caption bar
   inherits the bar's permitted text colour instead of declaring its own. */

/* ==========================================================================
   NAV DROPDOWN (Operational Consulting submenu)
   Pattern mirrors the country switcher flyout (styles.css:190-267).
   ========================================================================== */

.nav-item {
  position: relative;
  display: inline-block;
}

.nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-item > .nav-link .caret {
  display: inline-block;
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}

.nav-item.open > .nav-link .caret,
.nav-item:hover > .nav-link .caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background-color: #000000;
  border: 1.5px solid #cfff04;
  min-width: 240px;
  z-index: 1000;
}

.nav-item.open .nav-dropdown,
.nav-item:hover .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 10px 14px !important;
  color: #cfff04;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #cfff04;
  white-space: nowrap;
  position: relative;
}

.nav-dropdown a:last-child {
  border-bottom: none;
}

/* A hover must never change colour, so hover confirms with an underline only. */
.nav-dropdown a:hover {
  text-decoration: underline;
}

.nav-dropdown a.active {
  background-color: #cfff04;
  color: #000000;
  font-weight: 700;
}

/* Mobile accordion behaviour: dropdown becomes a nested list inside the panel */
@media (max-width: 1240px) {
  .nav-item {
    display: block;
    width: 100%;
  }

  .nav-item > .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border-top: 1px solid #cfff04;
    font-size: 0.95rem;
    white-space: normal;
  }

  .nav-item.open > .nav-link {
    background-color: #cfff04;
    color: #000000;
  }

  .nav-item.open > .nav-link .caret {
    transform: rotate(180deg);
  }

  .nav-item:hover .nav-dropdown {
    display: none;
  }

  .nav-item.open .nav-dropdown {
    display: block;
    position: static;
    border: none;
    border-left: 2px solid #cfff04;
    margin-left: 16px;
    box-shadow: none;
    min-width: 0;
    background-color: transparent;
  }

  .nav-dropdown a {
    padding: 10px 16px !important;
    border-bottom: 1px solid #cfff04;
    white-space: normal;
    font-size: 0.9rem;
  }

  .nav-dropdown a:hover {
    text-decoration: underline;
  }
}


/* ==========================================================================
   19. ASSESSMENT LINKS (Success Led Selling submenu and footer column)

   The three assessments are external destinations on successledselling.co.za.
   One renderer, js/assessments.js, paints them in both places, so their
   appearance is defined here once. Hover confirms with an underline only:
   a hover must never change colour.
   ========================================================================== */

.nav-assessment-list {
  display: flex;
  flex-direction: column;
}

.nav-assessment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  color: #cfff04;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #cfff04;
}

.nav-assessment:last-child {
  border-bottom: none;
}

.nav-assessment:hover {
  text-decoration: underline;
}

.nav-assessment-label {
  display: block;
}

.nav-assessment-hint {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Inside the footer the same list reads as a normal footer link column. */
.footer-col .nav-assessment-list {
  gap: 0;
}

.footer-col .nav-assessment {
  padding: 0;
  margin-bottom: 10px;
  border-bottom: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
}

.footer-col .nav-assessment-hint {
  display: none;
}

/* ==========================================================================
   20. ASSESSMENT CARDS (rendered by js/assessments.js)
   ========================================================================== */

.assessment-tagline {
  font-weight: 700;
  margin-bottom: 12px;
}

.assessment-button {
  margin-top: 22px;
  align-self: flex-start;
}

/* ==========================================================================
   21. FOOTER GRID, SIX COLUMNS

   The footer carries brand, what we do, assessments, company, legal, and the
   countries. The base stylesheet defines five columns, so the sixth is added
   here rather than editing the base grid.
   ========================================================================== */

.footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
}

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}