/* ==========================================================================
   Resume page — layout rules
   All sizing and color values come from semantic tokens in styleguide.css.
   ========================================================================== */

/* Page background: darker warm gray for paper metaphor contrast */
body {
  background-color: var(--r-bg-page);
}

/* Resume page wrapper — centers paper below nav */
.resume-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3vw;
}

/* Paper — fixed aspect ratio container, enables cqi scaling.
   Restores box-sizing and line-height that the site-wide reset
   (reset.css) overrides — the prototype relied on browser defaults. */
.paper {
  width: 100%;
  max-width: 1224px;
  aspect-ratio: 8.5 / 11;
  background: var(--r-bg-paper);
  border-radius: var(--br-12);
  box-shadow: var(--r-ui-shadow-paper);
  overflow: hidden;
  container-type: inline-size;
  container-name: paper;
  line-height: normal;
}

.paper *,
.paper *::before,
.paper *::after {
  box-sizing: border-box;
}

/* Two-column layout */
.resume-container {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Left column — main content */
.resume-main {
  flex: 1 1 0;
  padding: var(--r-gap-page);
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-page);
}

/* Right column — sidebar (~22% width) */
.resume-sidebar {
  width: 22%;
  flex-shrink: 0;
  background: var(--r-bg-sidebar);
  padding: var(--r-gap-page-top) var(--r-gap-page) var(--r-gap-section) var(--r-gap-page);
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-sidebar-sections);
}

/* ---------- Typography ---------- */

.r-name {
  font-size: var(--r-f-sz-name);
  font-weight: var(--wt-semibold);
  line-height: 1;
  color: var(--r-text);
}

.r-title {
  font-size: var(--r-f-sz-heading);
  font-weight: var(--wt-semibold);
  line-height: 1;
  color: var(--r-text-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.r-summary {
  font-size: var(--r-f-sz-subheading);
  font-weight: var(--wt-regular);
  line-height: 1.8;
  color: var(--r-text);
}

/* ---------- Section headings ---------- */

.r-section-heading {
  display: inline-block;
  position: relative;
  font-size: var(--r-f-sz-heading);
  font-weight: var(--wt-semibold);
  line-height: 1;
  color: var(--r-text);
  padding-bottom: var(--r-gap-tight);
}

/* Blue underline accent */
.r-section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--r-ui-underline-offset);
  height: var(--r-ui-underline-h);
  background: var(--r-ui-underline);
}

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

.r-header {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-item);
}

/* ---------- Skills section ---------- */

.skills-section {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-section);
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r-gap-grid-row) var(--r-gap-grid-col);
  padding: var(--r-gap-grid-pad);
}

.skill-item {
  display: flex;
  align-items: center;
  gap: var(--r-gap-item);
}

.skill-item .icon-check {
  width: var(--r-sz-icon-check);
  height: var(--r-sz-icon-check);
  flex-shrink: 0;
  color: var(--r-ui-check);
}

.skill-item span {
  font-size: var(--r-f-sz-skill);
  font-weight: var(--wt-semibold);
  line-height: 1.5;
  color: var(--r-text);
}

/* ---------- Experience section ---------- */

.experience-section {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-section);
}

/* Jobs list container — spaces individual job entries apart */
.experience-section > div {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-section);
}

.job {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-item);
}

.job-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.job-title-row {
  display: flex;
  align-items: center;
  gap: var(--r-gap-tight);
}

.job-company {
  font-size: var(--r-f-sz-subheading);
  font-weight: var(--wt-bold);
  color: var(--r-text);
  letter-spacing: 0.08em;
}

.job-divider {
  font-size: var(--r-f-sz-divider);
  font-weight: 100;
  color: var(--r-text);
}

.job-role {
  font-size: var(--r-f-sz-detail);
  font-weight: var(--wt-semibold);
  color: var(--r-text-accent);
}

.job-dates {
  font-size: var(--r-f-sz-detail);
  font-weight: var(--wt-semibold);
  line-height: 1;
  color: var(--r-text-sub);
}

.job-dates .duration {
  color: var(--r-text);
}

/* ---------- Job bullets ---------- */

.job-bullets {
  list-style: disc;
  padding-left: var(--r-gap-bullets-indent);
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-tight);
}

.job-bullets li {
  font-size: var(--r-f-sz-body);
  font-weight: var(--wt-medium);
  line-height: 1.5;
  color: var(--r-text);
}

.job-bullets li strong {
  font-weight: var(--wt-bold);
}

/* ---------- Job description (Bloomfire/NetSpend) ---------- */

.job-description {
  font-size: var(--r-f-sz-body);
  font-weight: var(--wt-medium);
  line-height: 1.5;
  color: var(--r-text);
}

/* ---------- Sidebar sections ---------- */

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-sidebar-group);
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-item);
}

.sidebar-heading {
  font-size: var(--r-f-sz-subheading);
  font-weight: var(--wt-bold);
  color: var(--r-text-accent);
}

/* ---------- Sidebar contact list ---------- */

.sidebar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-item);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--r-gap-tight);
}

.sidebar-item .sidebar-icon {
  width: var(--r-sz-icon-sidebar);
  height: var(--r-sz-icon-sidebar);
  flex-shrink: 0;
}

/* Duotone icons: background shape = blue, outline = dark gray */
.sidebar-item .sidebar-icon path:first-child {
  fill: var(--r-ui-check);
}
.sidebar-item .sidebar-icon path:last-child {
  fill: var(--r-ui-icon-outline);
}

.sidebar-item span,
.sidebar-item a {
  font-size: var(--r-f-sz-detail);
  font-weight: var(--wt-medium);
  color: var(--r-text-sub);
  line-height: 1.4;
}

.sidebar-item a {
  text-decoration: underline;
  transition: color 0.2s ease;
}

.sidebar-item a:hover {
  color: var(--r-ui-link-hover);
}

.sidebar-item a:active {
  color: var(--r-ui-link-active);
}

/* ---------- Sidebar tools list ---------- */

.tools-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--r-gap-grid-row);
}

.tools-list li {
  font-size: var(--r-f-sz-detail);
  font-weight: var(--wt-medium);
  color: var(--r-text-sub);
}

/* ==========================================================================
   Download button — floating icon, positioned relative to paper
   ========================================================================== */

/* resume-page is the positioning context */
.resume-page {
  position: relative;
}

.download-btn {
  position: absolute;
  /* Left of paper, vertically aligned with paper top */
  top: 3vw;
  left: calc(50% - 612px - 60px); /* half paper max-width + gap */
  width: var(--touch-min);
  height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r-bg-paper);
  border: none;
  border-radius: var(--br-round);
  box-shadow: 0 2px 12px var(--r-ui-shadow);
  cursor: pointer;
  color: var(--r-text);
  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s linear;
  text-decoration: none;
}
.download-btn:hover {
  color: var(--r-text-accent);
  box-shadow: 0 4px 20px var(--r-ui-shadow);
}
.download-btn:active {
  color: var(--r-text-accent);
  background-color: var(--bg-selected);
  transform: scale(0.96);
}
.download-btn svg {
  width: var(--sp-24);
  height: var(--sp-24);
  fill: currentColor;
}

/* Tooltip on hover */
.download-btn::after {
  content: "Download Resume";
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-tooltip);
  color: var(--text-reverse);
  font-size: var(--f-sz-p-caption);
  font-weight: var(--wt-medium);
  padding: var(--lkd-sp-6) var(--lkd-sp-10);
  border-radius: var(--br-4);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.download-btn:hover::after { opacity: 1; }

/* Below ~1400px there's no room beside the paper — switch to FAB */
@media (max-width: 1366px) {
  .download-btn {
    position: fixed;
    top: auto;
    left: auto;
    bottom: var(--sp-24);
    right: var(--sp-24);
    width: var(--sp-48);
    height: var(--sp-48);
    box-shadow: 0 4px 20px var(--r-ui-shadow);
    z-index: 50;
  }
  .download-btn svg {
    width: var(--sp-24);
    height: var(--sp-24);
  }
  /* Tooltip to the left on smaller screens */
  .download-btn::after {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Phone: tighter margins */
@media (max-width: 767.98px) {
  .download-btn {
    bottom: var(--sp-16);
    right: var(--sp-16);
  }
}

/* ==========================================================================
   Print — hides chrome, fills page for Playwright PDF generation
   ========================================================================== */
@media print {
  .page-nav,
  .download-btn { display: none; }

  body { background: var(--bg-page); }

  .resume-page { padding: 0; }

  .paper {
    max-width: none;
    width: 100%;
    aspect-ratio: auto;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
}