/* ==========================================================================
   STYLE.CSS - controls how every page looks (colors, fonts, sizes, spacing).
   Comments in CSS look like this: anything between slash-star and star-slash
   is ignored by the browser. Edit values, save, refresh the browser.
   ========================================================================== */

/* Fonts: the heading font is loaded from Google Fonts by each HTML page.
   If it ever fails to load, the browser falls back to Georgia. */

/* --------------------------------------------------------------------------
   1. SETTINGS - change the whole site from here.
   Anything written as var(--name) elsewhere reads its value from this list.
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --page-bg: #dfe0da;      /* page background (home page beige-grey)          */
  --header-bg: #878883;    /* top bar color                                   */
  --text: #000000;         /* normal text                                     */
  --accent: #243552;       /* navy: button, "Contact:" heading, email links   */
  --line: #000000;         /* the divider line between project sections       */

  /* Fonts */
  --heading-font: "Libre Baskerville", Georgia, serif;
  --body-font: "Helvetica Neue", Arial, sans-serif;

  /* Text sizes (rem = relative to the browser's normal text size) */
  --size-title: 2.6rem;        /* largest: "Project Category - Project Name"   */
  --size-subheading: 1.6rem;   /* second largest: "Purpose:", "Function:"     */
  --size-body: 1rem;           /* paragraphs                                  */
  --size-intro: 1.6rem;        /* the "Hello" line on the home page           */

  /* Spacing */
  --page-margin: 4vw;      /* empty space left/right of the content           */
  --column-gap: 4rem;      /* space between the text column and image column  */
}

/* The projects page is white instead of beige-grey, with a lighter top bar.
   (The <body> tag of projects.html has class="page-projects".)               */
.page-projects {
  --page-bg: #ffffff;
  --header-bg: #999999;
}

/* --------------------------------------------------------------------------
   2. BASICS
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
  font-size: var(--size-body);
  line-height: 1.6;
}

main { padding: 2.5rem var(--page-margin) 0; }

a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. TOP BAR (same on every page)
   -------------------------------------------------------------------------- */
.site-header {
  display: flex;
  justify-content: space-between;   /* title on the left, links on the right */
  align-items: center;
  padding: 1.3rem var(--page-margin);
  background: var(--header-bg);
  border-bottom: 5px solid #000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.site-title {
  font-family: var(--heading-font);
  font-size: 1.9rem;
  color: #333;
  font-weight: 400;
  margin: 0;
  text-decoration: none;
}
.site-nav a {
  margin-left: 2rem;
  color: var(--text);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   4. IMAGES
   Every picture uses class "photo". Pick a shape by adding a second class:
     photo            -> 4:3 landscape (default)
     photo photo--wide -> 16:9 wider
     photo photo--tall -> 3:4 portrait
   To make one image smaller, add style="width: 60%;" to that image's tag.
   "placeholder" is just the white dashed box shown until you add a real
   picture - delete the word "placeholder" when you swap in an <img>.
   -------------------------------------------------------------------------- */
.photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;        /* crops the picture to fill the box, no stretching */
  border-radius: 8px;
}
.photo--wide { aspect-ratio: 16 / 9; }
.photo--tall { aspect-ratio: 3 / 4; }
.photo--natural {aspect-ratio: auto; }
.placeholder {
  background: #fff;
  border: 1px dashed #c8c8c8;
}

/* --------------------------------------------------------------------------
   5. HOME PAGE
   -------------------------------------------------------------------------- */
.home-intro {
  font-size: var(--size-intro);
  margin: 0 0 3rem;
}

/* Two columns: small image + text + button on the left, big image on the right.
   To change the column widths, edit the two numbers, e.g. 2fr 3fr.          */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--column-gap);
  align-items: start;
}
.home-grid p { font-size: 1.4rem; margin: 2rem 0; }

.button {
  display: inline-block;
  padding: 1.5rem 3.5rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;     /* fully rounded ends; use 8px for a boxier button */
  text-decoration: none;
}
.button:hover { opacity: 0.85; }

.column { display: grid; gap: 2rem; align-content: start; }   /* stacks items top to bottom, tightly */

/* Contact block at the bottom of the home page */
.contact {
  text-align: center;
  margin-top: 4rem;                    /* space above the line */
  padding: 3rem 0 4rem;                /* first number = space between line and "Contact:" */
  border-top: 1px solid var(--line);
}
.contact h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: var(--size-title);
  color: var(--accent);
  width: fit-content;                   /* box shrinks to the width of the text */
  margin: 0 auto 2rem;                  /* auto left/right centers the box; 1rem below the line */
  padding-bottom: 0.01rem;               /* space between the text and the line */
  border-bottom: 1px solid var(--accent);
}
.contact a {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--accent);
  text-decoration: none;
  margin: 0.5rem 0;
}
.contact a:hover { text-decoration: underline; }
.contact .linkedin { font-family: var(--body-font); font-weight: 700; color: var(--text); }

.image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two equal columns; use 1fr 1fr 1fr for three */
  gap: 2rem;                      /* space between the images */
  align-items: start;               /* images keep their own heights, top-aligned */
}

/* --------------------------------------------------------------------------
   6. PROJECT SECTIONS (projects.html)
   One <section class="project"> = one project: text column + image column.
   Sections are separated by a line automatically.
   -------------------------------------------------------------------------- */
.project {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* text | images. Try 1fr 2fr for bigger images */
  gap: 3rem var(--column-gap);
  align-items: start;
  padding: 4rem 0;
}
.project + .project { border-top: 1px solid var(--line); }   /* the divider line */

/* Add "project--reverse" to a section to put the images on the LEFT instead */
.project--reverse .project-media { order: -1; }

/* Image column: several photos stack with this much space between them */
.project-media { display: grid; gap: 1.5rem; }

.project-title {                     /* largest text */
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: var(--size-title);
  line-height: 1.15;
  margin: 0 0 2rem;
}
.project h3 {                        /* second largest: Purpose:, Function: */
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: var(--size-subheading);
  margin: 3rem 0 0.5rem;
}
.project p,                          /* paragraphs */
.project li {
  font-family: var(--heading-font);
  font-size: 0.95rem;
  line-height: 1.8;
  margin: 0 0 1rem;
  max-width: 38rem;                  /* keeps lines a readable length */
}
.project li {
  margin-bottom: 0.8rem;         /* space between bullets */
}
.project ul {
  margin: 0 0 1rem;
  padding-left: 1.5rem;          /* how far the bullets are indented */
  max-width: 38rem;              /* same line length as paragraphs */
  list-style-type: disc;         /* try circle, square, or none */
}



/* --------------------------------------------------------------------------
   7. PHONES / NARROW SCREENS - columns stack into one.
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .home-grid, .project { grid-template-columns: 1fr; }
  .project--reverse .project-media { order: 0; }
  .site-header { flex-direction: column; gap: 0.5rem; }
  .site-nav a { margin: 0 1rem; }
  :root { --size-title: 2rem; --size-intro: 1.4rem; }
}