/* =====================================================================
   style.css — Sarasota Tech Solutions
   ---------------------------------------------------------------------
   This file gives you a FOUNDATION (variables, a reset, base type) and
   then leaves the component styling to you, phase by phase.

   The big commented "PHASE" blocks below are your worklist. Each one tells
   you what to build there. Start at Phase 2 and work down.
   ===================================================================== */


/* ---------------------------------------------------------------------
   DESIGN TOKENS  (your brand, defined once, reused everywhere)
   ---------------------------------------------------------------------
   These are CSS custom properties ("variables"). Define a value once here,
   use it anywhere with var(--name). Change it once, it updates everywhere.
   The colors are pulled from your navy/orange logo. Tweak them to taste.
--------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #163b54;   /* deep navy from the logo outline */
  --navy-dark:   #0f2a3d;   /* darker navy for hovers / footer */
  --orange:      #e87722;   /* sunset orange */
  --orange-deep: #cf5f12;   /* darker orange for button hovers */

  /* Neutrals */
  --ink:     #1c2730;   /* main text color (not pure black — softer) */
  --muted:   #5a6b78;   /* secondary text */
  --paper:   #ffffff;   /* page background */
  --surface: #f5f7f9;   /* cards / alternating sections */
  --line:    #e2e8ec;   /* borders / dividers */

  /* Type — system fonts for now. Choosing real fonts is a Phase 5 task. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale — use these instead of random numbers, for consistency.
     (You'll lean on this hard in Phase 5.) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
}


/* ---------------------------------------------------------------------
   RESET  (a clean, predictable starting point)
   ---------------------------------------------------------------------
   box-sizing: border-box is the single most important line in this file.
   It makes padding and borders count INSIDE an element's width instead of
   adding to it — so sizes behave the way you'd expect. You'll understand
   exactly why in Phase 2.
--------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}


/* ---------------------------------------------------------------------
   BASE TYPOGRAPHY & PAGE  (sensible defaults so nothing looks broken)
--------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}

a {
  color: var(--navy);
}


/* ---------------------------------------------------------------------
   CONTAINER  (keeps content from stretching too wide on big screens)
   Reusable: any element with class="container" gets centered with a max width.
--------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;        /* centers it horizontally */
  padding-inline: var(--space-3);
}


/* =====================================================================
   YOUR WORKLIST STARTS HERE
   Everything above is the foundation. Everything below is for you to build.
   ===================================================================== */


/* ---------------------------------------------------------------------
   PHASE 2 — BOX MODEL
   Goal: give sections breathing room and style the hero + button.
   Try: add vertical padding to .hero (e.g. padding-block: var(--space-8)),
        size the <h1>, and give .cta padding, a background of var(--orange),
        white text, and rounded corners. Watch how padding behaves now that
        box-sizing is border-box.
--------------------------------------------------------------------- */
.hero {
  /* your styles here */
}

.cta {
  /* your styles here: background, color, padding, border-radius, etc. */
}


/* ---------------------------------------------------------------------
   PHASE 3 — FLEXBOX
   Goal 1: make the nav a single row — brand on the left, links on the right.
           Try on .nav: display: flex; justify-content: space-between; align-items: center;
           and remove the bullet dots / default spacing from .nav-links (it's a <ul>).
   Goal 2: lay the service cards out in a row.
           Try on .service-list: display: flex; gap: var(--space-3);
--------------------------------------------------------------------- */
.nav {
  /* your styles here */
}

.nav-links {
  /* your styles here (hint: list-style: none; and clear the default margin/padding) */
}

.service-list {
  /* your styles here */
}

.service-card {
  /* give each card padding, a background (var(--surface)), a border, rounded corners */
}


/* ---------------------------------------------------------------------
   PHASE 4 — GRID + RESPONSIVE
   Goal: make the service cards a tidy grid, then make EVERYTHING adapt to
         phone screens with a media query.
   Try on .service-list:
         display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
   Then at the bottom, add a media query for small screens, e.g.:

         @media (max-width: 700px) {
           .service-list { grid-template-columns: 1fr; }
           .nav { flex-direction: column; }
         }
--------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   PHASE 5 — TYPOGRAPHY, SPACING & POLISH
   Goal: the "professional" layer. Pick a real font pairing (a display font
         for headings + a clean body font — try Google Fonts), set a type
         scale, tighten spacing using the --space tokens, and add hover
         states + transitions to .cta, links, and .service-card.
   This is where it stops looking like a skeleton and starts looking like a brand.
--------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   CONTACT FORM  (start whenever; pairs well with Phase 2–3)
   Goal: stack each .field so the label sits above its input, give inputs
         padding and a border, and make the form readable.
   Try on .field: display: flex; flex-direction: column; gap: var(--space-1);
--------------------------------------------------------------------- */
.contact-form {
  /* your styles here (a max-width keeps the form from stretching too wide) */
}

.field {
  /* your styles here */
}


/* ---------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------- */
.site-footer {
  /* try: background var(--navy-dark), light text, padding-block, centered text */
}