/*
  ============================================================
  MATTHEWCRADDOCK.COM — SHARED STYLESHEET
  ============================================================
  This one CSS file styles EVERY page (Home, Experience, Skills,
  Certifications, Schooling, Awards). Each HTML file links here
  with:  <link rel="stylesheet" href="style.css">

  HOW CSS WORKS IN THIS PROJECT
  - A "selector" (like .site-header) picks which HTML elements to style.
  - Properties inside { } change look and layout (color, spacing, fonts).
  - Custom properties (variables) start with -- and live on :root so we
    can reuse the same colors/fonts everywhere.

  If you change a --variable below, the whole site updates at once.
*/

/* ------------------------------------------------------------
   1. DESIGN TOKENS (the "theme")
   ------------------------------------------------------------
   :root is the top of the document. Variables defined here can
   be used anywhere with var(--name).
*/
:root {
  /* Backgrounds: deep navy instead of pure black so it feels calmer. */
  --bg: #0b1220;
  --bg-elevated: #3a445a;   /* cards, header, footer sit slightly "above" the page */
  --bg-soft: #182338;       /* hover states and inner panels */

  /* Text: off-white for titles, muted gray-blue for supporting copy. */
  --text: #eef3fb;
  --muted: #9aa8bf;

  /* Accent gold for buttons, active tabs, and small highlights. */
  --accent: #1fcaa1;
  --accent-hover: #e0b93a;
  --accent-soft: rgba(201, 162, 39, 0.14);

  /* Thin lines that separate sections without being harsh. */
  --border: rgba(255, 255, 255, 0.08);

  /* Shadows give cards a little depth. */
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);

  /* Fonts: one for headings (serif = more formal), one for body (sans-serif = easy to read). */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;

  --page-photo: none;
  --page-photo-src: none;
  --page-photo-mode: background;
  --page-photo-opacity: 0.22;
  --page-photo-width: 60%;
  --page-photo-x: 0px;
  --page-photo-y: 0px;

  /* Layout helpers so content does not stretch too wide on big monitors. */
  --max-width: 1120px;
  --radius: 16px;
  --header-height: 72px;
}

/* ------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------
   Browsers add their own margins on headings, lists, etc.
   This block makes every page start from the same clean baseline.
*/
*,
*::before,
*::after {
  box-sizing: border-box; /* padding and borders count inside width, so layouts do not overflow */
}

html {
  scroll-behavior: smooth; /* clicking in-page links eases down instead of jumping */
}

body {
  margin: 0;
  min-height: 100vh;              /* at least as tall as the screen */
  display: flex;
  flex-direction: column;         /* header on top, main in the middle, footer at the bottom */
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(201, 162, 39, 0.12), transparent 50%),
    radial-gradient(900px 400px at 100% 0%, rgba(79, 140, 255, 0.12), transparent 45%),
    var(--bg);
  font-family: var(--font-body);
  line-height: 1.6;               /* extra space between lines helps reading */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--page-photo) center / cover no-repeat;
  opacity: var(--page-photo-opacity);
  pointer-events: none;
}

.site-photo-front-layer {
  position: fixed;
  left: calc(50% + var(--page-photo-x));
  top: calc(50% + var(--page-photo-y));
  z-index: 60;
  width: var(--page-photo-width);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: var(--page-photo-opacity);
  object-fit: contain;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.site-photo-front-layer:active {
  cursor: grabbing;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Skip link: hidden until someone tabs with the keyboard. Screen-reader / keyboard users
   can jump straight to the main content instead of tabbing through every nav link. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--accent);
  color: #111;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 1000;
}

.skip-link:focus {
  top: 12px;
}

/* ------------------------------------------------------------
   3. SHARED LAYOUT WRAPPER
   ------------------------------------------------------------
   .container centers content and caps its width. Almost every
   section uses this class so left/right edges line up.
*/
.container {
  width: min(100% - 32px, var(--max-width)); /* 16px space on each side, or 1120px max */
  margin-inline: auto;                       /* centers the box horizontally */
}

/* ------------------------------------------------------------
   4. TOP BAR (logo + TABS)
   ------------------------------------------------------------
   These are the "multiple tabs" you asked for. They are just
   links in a row, but CSS makes the current page look selected.
*/
.site-header {
  position: sticky;           /* stays at the top while you scroll */
  top: 0;
  z-index: 50;                /* sits above cards/images if they overlap */
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(11, 18, 32, 0.86);
  backdrop-filter: blur(14px); /* frosted-glass look over content behind the bar */
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* name on the left, tabs on the right */
  gap: 16px;
}

/* The site name in the header is a link back to Home. */
.brand {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  white-space: nowrap; /* keeps "Matthew Craddock" on one line */
}

.brand:hover {
  text-decoration: none;
  color: var(--accent);
}

.brand span {
  color: var(--accent); /* the ".com" part is gold */
}

/* The actual tab list. <ul> normally has bullets and padding — we remove those. */
.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px; /* pill shape */
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.nav-list a:hover {
  color: var(--text);
  background: var(--bg-soft);
  text-decoration: none;
}

/* The HTML page you are on gets class="active" on its tab.
   Gold underline + gold text = "this is the current tab". */
.nav-list a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Hamburger button is hidden on desktop. Shown only on small screens (see @media below). */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ------------------------------------------------------------
   5. PAGE BODY / HERO
   ------------------------------------------------------------
   main grows to fill leftover height so the footer stays at the bottom.
*/
main {
  flex: 1;
  padding: 48px 0 72px;
}

.page-kicker {
  margin: 0 0 8px;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase; /* small all-caps label above the title */
  font-size: 0.78rem;
  font-weight: 700;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  font-weight: 600;
}

.hero {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr; /* text takes more space than the sidebar card */
  gap: 36px;
  align-items: center;
  margin-bottom: 56px;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(2.2rem, 5vw, 4rem); /* grows/shrinks with screen size */
}

/* Typewriter name lives in this span. JavaScript fills the letters one by one. */
#typewriter-name {
  min-height: 1em; /* even before letters appear, the heading keeps its height */
}

/* Blinking caret next to the typed name (the | character). */
.cursor {
  display: inline-block;
  color: var(--accent);
  margin-left: 2px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 58ch; /* ch = width of the "0" character; ~58 letters per line is comfortable */
}

/* Sidebar card on the home page (contact + socials). */
.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

/* ------------------------------------------------------------
   6. SOCIAL LINKS
   ------------------------------------------------------------
   Each social row is a flex item: icon on the left, label on the right.
*/
.social-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid transparent;
}

.social-item a:hover {
  text-decoration: none;
  border-color: var(--accent);
}

/* SVG icons (drawn in the HTML) inherit this size. */
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0; /* icon never gets squished if the label is long */
  fill: currentColor; /* icon color matches the text color */
}

.contact-line {
  margin: 0 0 18px;
  color: var(--muted);
}

.contact-line a {
  color: var(--text);
}

/* ------------------------------------------------------------
   7. SECTION TITLES + CARD GRIDS
   ------------------------------------------------------------ */
.section-head {
  margin-bottom: 24px;
}

/* Extra space when a second section starts on the same page (Experience projects). */
.section-head.spaced {
  margin-top: 48px;
}

.section-head p {
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 65ch;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* auto-fit: as many columns as fit. minmax: never thinner than 250px. */
  gap: 18px;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.card p,
.card li {
  color: var(--muted);
}

.meta {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   8. TIMELINE (Experience + Schooling)
   ------------------------------------------------------------
   A vertical line on the left, with a gold dot for each entry.
*/
.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.timeline > li {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 26px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.timeline h3 {
  margin: 0 0 4px;
}

/* Bullet lists inside timeline cards and skill/award write-ups. */
.content-list {
  margin: 10px 0 0;
  padding-left: 18px;
}

.content-list li {
  margin-bottom: 6px;
  color: var(--muted);
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 56px;
}

.highlight {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.highlight strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.highlight span {
  color: var(--muted);
  font-size: 0.92rem;
}

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

/* ------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   10. RESPONSIVE RULES (phones and small tablets)
   ------------------------------------------------------------
   @media means: "only apply these styles when the screen is this size".
   max-width: 800px = these rules kick in on screens 800 pixels wide or narrower.
*/
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr; /* stack text above the contact card */
  }

  /* Show the hamburger and hide the tab row until the user opens it. */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: #0e1626;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px 16px;
  }

  /* JavaScript adds .is-open to the <nav> when the hamburger is clicked. */
  .site-nav.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column; /* tabs stack vertically in the mobile menu */
  }

  .nav-list a {
    width: 100%;
  }
}