/* ==========================================================================
   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: 1380px;
  margin: 0 auto;
  padding: 16px 24px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}

/* Navigation Links: one flat row, never a dropdown. Hover confirms with an
   underline only, because a hover must never change colour. */
.main-nav a {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-lime);
  text-decoration: none;
  padding: 8px 11px;
  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. */

/* ==========================================================================
   MEDIA BANDS

   A photograph is content, so it is framed rather than laid behind text.
   The frame and the caption obey the palette: on a black section the frame is
   lime and the caption bar is black with lime text, and on a white section the
   frame is black and the caption bar is white with black text. The components
   themselves are the story image pair defined above, reused rather than
   redefined.
   ========================================================================== */

.media-band .story-img-container {
  margin: 0;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.media-grid .story-img-container {
  margin: 0;
}

/* Even tiles, so a two up grid reads as a set rather than as two photos. */
.media-grid .story-img {
  aspect-ratio: 4 / 3;
}

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


/* ==========================================================================
   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; }
}

/* ==========================================================================
   22. SELECTABLE PRICE TIERS

   The three published payment tiers, pay in full, twelve monthly installments
   and twenty four monthly installments, are shown as cards and any one can be
   chosen. The chosen card is marked with a lime outline, which is a shape
   rather than a new colour: no card gains or loses a fill or a text colour, so
   the three colour palette and the no-colour-on-hover rule both hold.
   ========================================================================== */

.price-hero[data-tier] {
  cursor: pointer;
}

.price-hero.selected,
.price-hero[data-tier]:focus-visible {
  outline: 3px solid #cfff04;
  outline-offset: 3px;
}

/* ==========================================================================
   23. THE COUNTRY DROPDOWN ABOVE THE STICKY HEADER

   The open country list and the sticky header were both z-index 1000, and the
   header comes later in the document, so the header painted over the list and
   the switcher looked as if it opened onto nothing. The list is lifted above
   the header, and left below the scroll progress bar, which is the only element
   that should sit above everything.
   ========================================================================== */

.country-menu {
  z-index: 1100;
}

/* ==========================================================================
   24. EXPLORE EVERY PAGE

   A directory of every page, in the body of the home page, so each page is one
   tap from the home page. These links are navigation, like the footer columns,
   so they are plain links rather than buttons; they are given a black colour and
   an underline so they read on the lime block they sit in, and no hover rule
   changes a colour.
   ========================================================================== */

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.explore-col h3 {
  margin-bottom: 14px;
  color: #000000;
}

.explore-col ul {
  list-style: none;
}

.explore-col li {
  margin-bottom: 10px;
}

.explore-col a {
  color: #000000;
  text-decoration: underline;
  font-weight: 600;
}