/* ============================================================
   FlowDesk – style.css
   Author: Victor Ahmedu (3MTT Mini Project 1)

   TABLE OF CONTENTS
   1. CSS Reset & Base
   2. CSS Variables (colour palette, spacing, fonts)
   3. Typography
   4. Utility Classes (buttons)
   5. Navbar
   6. Hero Section
   7. Features Section
   8. CTA Section
   9. Footer
   10. Media Queries (Responsive – mobile-first adjustments)
   ============================================================ */


/* ============================================================
   1. CSS RESET & BASE
   Removes default browser spacing so we start from a clean slate.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;   /* padding/border included in element width */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;  /* smooth scrolling when nav links are clicked */
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;           /* 16px base */
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ============================================================
   2. CSS VARIABLES
   Define the colour palette and spacing once; use everywhere.
   ============================================================ */
:root {
  /* Colours */
  --color-bg:        #f8fafc;     /* very light blue-grey background */
  --color-surface:   #ffffff;     /* white for cards and nav */
  --color-navy:      #0f172a;     /* deep navy – headings, footer bg */
  --color-blue:      #3b82f6;     /* accent blue – buttons, highlights */
  --color-blue-dark: #2563eb;     /* darker blue for button hover */
  --color-text:      #334155;     /* dark slate for body text */
  --color-muted:     #64748b;     /* lighter grey for subtexts */
  --color-border:    #e2e8f0;     /* subtle border lines */

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;

  /* Border radius */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;

  /* Shadow */
  --shadow-card: 0 2px 12px rgba(15, 23, 42, 0.08);
}


/* ============================================================
   3. TYPOGRAPHY
   Consistent heading sizes across the page.
   ============================================================ */
h1, h2, h3 {
  color: var(--color-navy);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.125rem; }

p {
  color: var(--color-text);
}


/* ============================================================
   4. UTILITY CLASSES – BUTTONS
   Two button styles:
   - .btn--primary  → solid blue (main action)
   - .btn--ghost    → transparent with border (secondary action)
   - .btn--nav      → compact version for the nav bar
   - .btn--large    → bigger padding for the CTA
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background-color: var(--color-blue);
  color: #ffffff;
  border: 2px solid var(--color-blue);
}

.btn--primary:hover {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.btn--nav {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn--large {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}


/* ============================================================
   5. NAVBAR
   Uses FLEXBOX to put the brand on the left and links on the right.
   position: sticky keeps it visible as you scroll down.
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);

  /* Flexbox: row, space-between pushes brand left and links right */
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: var(--space-sm) var(--space-md);
  max-width: 1200px;
  margin: 0 auto;

  /* Override max-width to span full width with padding */
  max-width: 100%;
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1rem, 5vw, 4rem);
}

.navbar__brand {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.03em;
}

.navbar__links {
  /* Flexbox: row, gap between the links */
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.navbar__links a:not(.btn) {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 0.925rem;
  transition: color 0.2s ease;
}

.navbar__links a:not(.btn):hover {
  color: var(--color-blue);
}


/* ============================================================
   6. HERO SECTION
   Uses FLEXBOX to centre the content both horizontally and
   vertically within the section height.
   ============================================================ */
.hero {
  min-height: 88vh;                /* near-full-screen height */
  background: linear-gradient(
    135deg,
    var(--color-navy) 0%,
    #1e3a5f 100%
  );

  /* Flexbox centres the content card */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: var(--space-lg) clamp(1rem, 5vw, 4rem);
  text-align: center;
}

.hero__content {
  max-width: 720px;
}

.hero__eyebrow {
  display: inline-block;
  background-color: rgba(59, 130, 246, 0.15);
  color: #93c5fd;                  /* lighter blue for contrast on dark bg */
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 2rem;
  margin-bottom: var(--space-sm);
}

.hero__headline {
  font-size: clamp(2.25rem, 6vw, 3.75rem); /* fluid type: scales with screen */
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
}

.hero__subtext {
  font-size: 1.1rem;
  color: #94a3b8;                  /* muted slate for the sub-paragraph */
  max-width: 560px;
  margin: 0 auto var(--space-md);
  line-height: 1.7;
}

.hero__actions {
  /* Flexbox: buttons sit side by side, centred, wrap on small screens */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Override ghost button colours for the dark hero background */
.hero .btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.hero .btn--ghost:hover {
  border-color: #ffffff;
}


/* ============================================================
   7. FEATURES SECTION
   Uses CSS GRID: three equal columns on desktop,
   collapses to one column on mobile via media query below.
   ============================================================ */
.features {
  padding: var(--space-xl) clamp(1rem, 5vw, 4rem);
  max-width: 1200px;
  margin: 0 auto;
}

.features__header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.features__header h2 {
  margin-bottom: var(--space-xs);
}

.features__header p {
  font-size: 1.05rem;
  color: var(--color-muted);
}

/* CSS GRID: 3 equal columns with a gap between cards */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

/* Individual feature card */
.feature-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);     /* subtle lift on hover */
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.feature-card__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.feature-card__title {
  margin-bottom: var(--space-xs);
  color: var(--color-navy);
}

.feature-card__desc {
  font-size: 0.925rem;
  color: var(--color-muted);
  line-height: 1.65;
}


/* ============================================================
   8. CTA SECTION
   A full-width accent band that invites the user to sign up.
   ============================================================ */
.cta {
  background: linear-gradient(
    135deg,
    #1e40af 0%,
    var(--color-blue) 100%
  );
  padding: var(--space-xl) clamp(1rem, 5vw, 4rem);
  text-align: center;
}

.cta__content {
  max-width: 640px;
  margin: 0 auto;
}

.cta__headline {
  color: #ffffff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: var(--space-sm);
}

.cta__subtext {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

.cta .btn--primary {
  background-color: #ffffff;
  color: var(--color-blue);
  border-color: #ffffff;
}

.cta .btn--primary:hover {
  background-color: #e0f2fe;
  border-color: #e0f2fe;
}


/* ============================================================
   9. FOOTER
   Uses FLEXBOX in a column direction to stack elements centrally.
   ============================================================ */
.footer {
  background-color: var(--color-navy);
  padding: var(--space-lg) clamp(1rem, 5vw, 4rem);
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;

  /* Flexbox: stack items in a column, centred */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer__brand {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
}

.footer__links {
  /* Flexbox: links in a row with gaps */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer__links a {
  color: #94a3b8;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: #ffffff;
}

.footer__copy {
  color: #475569;
  font-size: 0.85rem;
}


/* ============================================================
   10. MEDIA QUERIES – RESPONSIVE
   @media rules apply different styles at smaller screen widths.
   Below 768px (typical tablet/mobile breakpoint), multi-column
   layouts collapse to a single column.
   ============================================================ */
@media (max-width: 768px) {

  /* Navbar: stack brand and links vertically */
  .navbar {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Hero: reduce vertical padding */
  .hero {
    padding: var(--space-lg) var(--space-sm);
  }

  /* Features grid: collapse from 3 columns → 1 column */
  .features__grid {
    grid-template-columns: 1fr;
  }

  /* Features section padding reduction */
  .features {
    padding: var(--space-lg) var(--space-sm);
  }

  /* CTA padding reduction */
  .cta {
    padding: var(--space-lg) var(--space-sm);
  }

  /* Footer: already column-direction, just reduce padding */
  .footer {
    padding: var(--space-md) var(--space-sm);
  }

  /* Hero action buttons: stack vertically */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    text-align: center;
  }
}

/* Extra narrow screens (small phones) */
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  .features__grid {
    grid-template-columns: 1fr;
  }
}