/*!
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: landing.css
 * @TITLE: ATHWALA - Marketing Landing Stylesheet
 * @DESCRIPTION: Component styles for the public marketing page served at '/' (landing layout + page). Depends on design-tokens.css (--store-* tokens, same forest/amber marketplace palette as the storefront) and reuses main.css's generic button classes rather than redefining them -- only landing-specific layout/component classes live here.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-09-09 | MKT-REBRAND-001 | Renamed product branding from ATH-SHOP to ATHWALA. |
 * VERSION 1.0.1
 * + File Created | Ary van der Pijl | 2026-09-09 | MKT-LANDING-001 | Initial file |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Landing Body ────────────────────────────────────────────────────────── */

.landing-body {
  font-family: var(--store-font-body);
}

/* ─── Landing Header ──────────────────────────────────────────────────────── */

.landing-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--store-header-height);
  background: var(--store-header-bg);
  border-bottom: 1px solid var(--store-header-border);
  display: flex;
  align-items: center;
}

.landing-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  color: var(--store-primary);
  text-decoration: none;
  white-space: nowrap;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.landing-nav a:not(.btn) {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
}

.landing-nav a:not(.btn):hover {
  color: var(--store-primary);
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.landing-hero {
  background: linear-gradient(135deg, var(--store-forest-700), var(--store-forest-600));
  color: #ffffff;
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.landing-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.landing-hero h1 {
  font-family: var(--store-font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-4);
}

.landing-hero p {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin: 0 auto var(--space-8);
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ─── Sections ────────────────────────────────────────────────────────────── */

.landing-section {
  padding: var(--space-16) var(--space-6);
}

.landing-section-alt {
  background: var(--color-surface-2);
}

.landing-container {
  max-width: 1280px;
  margin: 0 auto;
}

.landing-section-title {
  font-family: var(--store-font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-10);
}

/* ─── Value Grid ──────────────────────────────────────────────────────────── */

.landing-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.landing-value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--store-card-radius);
  padding: var(--space-6);
  text-align: center;
}

.landing-value-card .material-icons-round {
  font-size: 32px;
  color: var(--store-primary);
  margin-bottom: var(--space-3);
}

.landing-value-card h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.landing-value-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── How It Works ────────────────────────────────────────────────────────── */

.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.landing-step {
  text-align: center;
}

.landing-step-number {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--store-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  margin: 0 auto var(--space-4);
}

.landing-step h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.landing-step p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ─── Buyer / Merchant Split ──────────────────────────────────────────────── */

.landing-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.landing-split-card {
  background: var(--store-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--store-card-radius);
  padding: var(--space-8);
  text-align: center;
}

.landing-split-card .material-icons-round {
  font-size: 36px;
  color: var(--store-primary);
  margin-bottom: var(--space-3);
}

.landing-split-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.landing-split-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */

.landing-faq {
  max-width: 760px;
  margin: 0 auto;
}

.landing-faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--store-card-radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
}

.landing-faq-item summary {
  cursor: pointer;
  font-weight: var(--fw-medium);
}

.landing-faq-item p {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ─── Closing CTA ─────────────────────────────────────────────────────────── */

.landing-cta {
  background: var(--store-forest-900);
  color: #ffffff;
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.landing-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.landing-cta h2 {
  font-family: var(--store-font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-6);
}

/* ─── Landing Footer ──────────────────────────────────────────────────────── */

.landing-footer {
  background: var(--store-footer-bg);
  color: var(--store-footer-text);
  padding: var(--space-12) var(--space-6) var(--space-8);
}

.landing-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
}

.landing-footer a {
  color: var(--store-footer-text);
  text-decoration: none;
}

.landing-footer-link-row {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.landing-footer a:hover {
  color: #ffffff;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .landing-nav a:not(.btn) {
    display: none;
  }
}