/*
  Styles for the web version of the resume (index.html).
  Same look as the printed resume in ../print-default, scaled up for screens and
  laid out to fill the browser window. Phones and narrow windows get one column.

  Fonts: Segoe UI on Windows (same as the PDF); other systems use their own UI font.
  Weights used: 300 Light, 350 Semilight, 400 Regular, 600 Semibold, 700 Bold.
*/

:root {
  --blue: #3068a5;        /* headings, tagline, bar beside the name */
  --blue-light: #5876ad;  /* job titles and links (print uses #7b95c3; darker reads better on screens) */
  --text: #6b6d70;        /* body text (print uses #808285; darker reads better on screens) */
  --teal: #3b8981;        /* accomplishment check marks */

  --page-width: 1100px;   /* the content stops widening past this on big screens */
  --sidebar-width: 330px;
  --name-size: clamp(2.25rem, 5vw, 3.5rem); /* shrinks on small screens */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.55;
}

h1, h2, h3, h4, p, ul {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul { list-style: none; }
strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration-color: rgb(48 104 165 / 0.35);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--blue);
  text-decoration-color: currentColor;
}

/* Email, profile, and credential links, in the same style as the link on the printed resume. */
.link {
  color: var(--blue-light);
  font-style: italic;
}

/* ---------- Page ---------- */

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 56px 48px 80px;
}

/* ---------- Header ---------- */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}

.photo {
  flex: none;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

/* Name and tagline, right-aligned against the blue bar like the printed resume. */
.intro {
  position: relative;
  padding-right: 24px; /* 20px gap + 4px bar */
  text-align: right;
}

/* The blue bar runs from the top of the name's capital letters to the bottom of the tagline. */
.intro::after {
  content: "";
  position: absolute;
  top: calc(var(--name-size) * 0.26);
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--blue);
}

.name {
  color: #000;
  font-size: var(--name-size);
  font-weight: 700;
  line-height: 1.1;
}

.tagline {
  margin-top: 6px;
  color: var(--blue);
  font-size: clamp(1.05rem, 2vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
}

/* ---------- Columns ---------- */

.columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 64px;
}

h2 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

section + section { margin-top: 36px; }

/* ---------- Summary and experience ---------- */

.summary {
  margin-bottom: 40px;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
}

/* The printed resume letter-spaces the experience and skills slightly; same here. */
.job,
.skills { letter-spacing: 0.015em; }

.job + .job { margin-top: 32px; }

.org {
  font-size: 1.0625rem;
  font-weight: 600;
}

.role { margin-top: 14px; }

.role-title {
  color: var(--blue-light);
  font-size: 1.1875rem;
  font-weight: 400;
}

.dates,
.label {
  color: var(--text);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 300;
}

.dates { white-space: nowrap; } /* on narrow screens a date range moves down as a unit instead of splitting */

.role > * + * { margin-top: 8px; }
.role > p + ul { margin-top: 4px; } /* a list sits right under the line that introduces it */

.bullets li {
  position: relative;
  padding-left: 1.6em;
}

.bullets li + li { margin-top: 4px; }

.bullets li::before {
  content: "\2022";
  position: absolute;
  left: 0.35em;
}

/* Accomplishments: <li class="accomplishment"> gets a teal check mark instead of a bullet. */
.bullets li.accomplishment::before {
  content: "\2713";
  left: 0.15em;
  color: var(--teal);
}

/* ---------- Sidebar: contact, skills, education, certifications ---------- */

.contact li + li { margin-top: 6px; }

.skills li + li { margin-top: 14px; }

.skill-group {
  display: block;
  font-weight: 600;
}

.note {
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 300;
}

.certs li {
  position: relative;
  padding-left: 1.3em;
}

.certs li + li { margin-top: 16px; }

.certs li::before {
  content: "\2022";
  position: absolute;
  left: 0.2em;
}

.cert-name {
  display: block;
  font-weight: 400;
}

.cert-date { display: block; }

.cert-date,
.cert-link { margin-left: 1.3em; }

.cert-link { display: inline-block; }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .photo {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 640px) {
  .page { padding: 32px 20px 56px; }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 36px;
  }

  .photo {
    width: 136px;
    height: 136px;
  }

  /* On phones everything is left-aligned, so the bar moves to the left of the name. */
  .intro {
    padding: 0 0 0 24px;
    text-align: left;
  }

  .intro::after {
    right: auto;
    left: 0;
  }
}