/* CV page — the blue/cream/Rubik direction from the Figma home page.
   Shared chrome (vars, header/nav, footer, print reset) lives in site.css
   and is pulled in below; this file adds the resume-specific layout on
   top. The reading surface matches every other page's full blue
   background/cream text; site.css's print block still forces plain
   dark-on-white when this page is printed/exported to PDF.

   The brief this layout is built to: recruiters and hiring managers scan,
   they don't read line by line, so the page needs a clear order to scan
   IN — name, then section, then role/company, then client, then bullet —
   with each level visibly distinct from the one below it by more than
   just bold vs not-bold. */

@import url("site.css");

/* Decorative accent for the h2 rule and the h4 client-name flag below.
   Defaults to the site's --yellow (dark mode: 6.67:1 against the dark
   background — plenty). Light mode uses the bulb lottie's own pink
   (#cb2787, the most common non-neutral colour in its animation data)
   instead of reusing --yellow as-is — #f7da50 on white is only 1.39:1,
   close to invisible. The pink comes out at ~5:1 on light mode's white
   background, comfortably past the 3:1 UI-component minimum. --yellow
   itself isn't touched (nothing else on the site uses it), so this is
   scoped to this page only. */
:root { --accent-rule: var(--yellow); }
:root[data-theme="light"] { --accent-rule: #cb2787; }

/* Slightly wider reading column than the site-wide 44rem in site.css
   (kept narrow there for prose pages). Deliberately not pushed further:
   the two-paragraph intro summary is continuous prose, and 44rem already
   runs it close to the ~80-character-per-line readability ceiling (WCAG
   1.4.8) — going wider than ~48rem would push that paragraph past it,
   even though the bulleted job entries below have more room to spare.
   Scoped to this page only since this rule lives here, not in site.css —
   doesn't touch the shared value used elsewhere. Print is unaffected
   either way: site.css's print block already sets max-width: none and
   sizes the printed page from @page margins instead. */
main { max-width: 48rem; }

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

.resume-header { text-align: left; margin-bottom: 2.5rem; }
.resume-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
/* On a narrow screen this row wraps (h1 doesn't fit next to the button
   anymore), and a lone item left on its own wrapped line defaults to
   flex-start — pulling "Save as PDF" over to the LEFT, right under the
   h1. That put it close enough to the bulb icon (position: fixed, always
   sitting top-left of the viewport, on every page) that a tap meant for
   the button could land on the bulb instead once the two overlapped on
   screen — which is what was toggling light/dark mode instead of
   printing. margin-left: auto keeps this button pinned to the row's own
   right edge on every line it's ever wrapped onto, so it can never drift
   into the bulb's corner regardless of screen width or scroll position. */
.resume-header-row .no-print {
  margin-left: auto;
}
.resume-header h1 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.resume-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 0.6rem;
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.resume-contact li:not(:last-child)::after { content: "|"; margin-left: 0.6rem; color: var(--border); }

/* Same springy hover "pop" as the top nav's Info/Contact links (site.css
   .site-header nav a) — same transform, same overshoot easing, same
   press-down feedback on click — so the CV's own links (adamburleigh.com,
   email) feel consistent with the rest of the site rather than static. */
.resume-contact a {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.resume-contact a:hover { transform: scale(1.08); }
.resume-contact a:active { transform: scale(0.92); transition: transform 0.1s ease; }

.resume-header button.no-print {
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  background: var(--cream);
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Same nav-link hover/press treatment as above, on top of the button's
   own opacity dim so it still reads as a button (not just a link) while
   moving the same way. */
.resume-header button.no-print:hover { opacity: 0.85; transform: scale(1.08); }
.resume-header button.no-print:active { transform: scale(0.92); transition: transform 0.1s ease; }

/* "Save as PDF" is the primary CTA, so in light mode it gets filled with
   the same pink as the accent lines rather than the plain inverted
   ink/white treatment above — makes it the one thing on the page that's
   unmistakably a button to click. Text colour is white, not black:
   checked both against this exact pink (#cb2787) — white comes out at
   5.02:1 (passes WCAG AA's 4.5:1 for normal-size text), black only
   reaches 4.18:1, which fails AA at this text size (it'd only clear the
   lower 3:1 bar that applies to large/bold text or UI components). */
:root[data-theme="light"] .resume-header button.no-print {
  background: #cb2787;
  color: #ffffff;
}

/* Same CTA treatment for dark mode, filled with the site's --yellow
   (the bulb's own flap/highlight colour) instead of pink. Text colour
   again checked both ways against this exact yellow (#f7da50): white
   comes out at only 1.39:1 (the same near-invisible pairing that ruled
   --yellow out as a light-mode accent earlier), black reaches 15.1:1 —
   nowhere close, so black is the only real option here. */
:root[data-theme="dark"] .resume-header button.no-print {
  background: var(--yellow);
  color: #000000;
}

/* --- Section level (h2): Core Skills / Experience / Education /
   Certifications --------------------------------------------------------
   Treated as small-caps "eyebrow" labels rather than big headings — a big
   heading competes for attention with the bold role/client text below it;
   a small, wide-tracked label with its own coloured rule reads as "new
   section starts here" just as fast while taking up less vertical space,
   which matters on a page this long. The rule uses --accent-rule (see
   above), based on --yellow, the site's existing accent colour (already
   used for the bulb's own flap/highlight colour), rather than inventing a
   new one. */
.resume-section { margin-bottom: 2.75rem; }
.resume-section > h2 {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 3px solid var(--accent-rule);
  padding-bottom: 0.45rem;
  margin: 0 0 1.4rem;
}

.p-summary.resume-summary { margin: 0; }
.p-summary.resume-summary p { line-height: 1.6; }
.p-summary.resume-summary p + p { margin-top: 0.9rem; }

/* --- Core Skills: chips instead of a run-on middot-separated line ------
   A recruiter scanning for "Figma" or "Agile" picks a single word out of
   a row of short, bordered chips far faster than out of a long inline
   sentence — the chip boundaries do the parsing for them. */
.skills-table { display: grid; grid-template-columns: 9.5rem 1fr; row-gap: 0.9rem; column-gap: 1rem; align-items: start; }
.skills-table dt {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.35rem;
}
.skills-table dd { margin: 0; }
.skill-chip {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin: 0 0.4rem 0.4rem 0;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .skills-table { grid-template-columns: 1fr; row-gap: 0.4rem; }
}

/* --- Experience / education entries ------------------------------------ */

.resume-entry { margin-bottom: 2.5rem; }
.resume-entry:last-child { margin-bottom: 0; }

.resume-entry-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}
/* The role/company line is a real heading (h3) for screen-reader heading
   navigation — accessibility audit found no way to jump directly to "the
   Arctic Shores job" otherwise. This h3 keeps its own box (just with
   browser defaults reset) so it stays ONE flex item — an earlier
   display: contents attempt turned .p-name and .p-org into two separate
   flex items, which is what caused a huge gap (space-between spreading
   three items apart instead of two). Company reads as part of the same
   phrase as the role ("Product Designer at Apadmi") rather than a
   separate line or a middot-separated aside. */
.resume-entry-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
/* .p-org (the company name) deliberately has no rule of its own — it
   should read as part of the exact same phrase as the role ("Product
   Designer at Apadmi"), so it just inherits the h3's size/weight/colour
   rather than duplicating them with slightly different values that could
   drift out of sync. */
.resume-dates { font-weight: 500; font-size: 0.9rem; color: var(--muted); white-space: nowrap; }

.resume-entry-intro { margin: 0 0 0.5rem; }

.resume-entry ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.resume-entry li { margin-bottom: 0.45rem; line-height: 1.55; }
.resume-entry li:last-child { margin-bottom: 0; }

/* Client name — the level that was getting lost. Bold + a left accent
   bar gives it a "flag" to scan down the page for, without needing a
   separate text colour (a border reads consistently in both themes and
   under print, where site.css strips custom colours anyway).

   Heading level is h4 here: h1 name → h2 section → h3 role/company → h4
   client, so headings never skip a level. */
.resume-entry-client { margin-top: 1.3rem; }
.resume-entry-client:first-of-type { margin-top: 0.9rem; }
.resume-entry-client h4 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream);
  border-left: 3px solid var(--accent-rule);
  padding-left: 0.65rem;
}

/* Sub-client heading — Travel Counsellors / Krispy Kreme are real client
   companies, same as Greene King or Unite Students above, they're just
   nested one level deeper because Apadmi's "New Business" work is grouped
   by pitch rather than listed flat. So this gets the SAME "company name"
   treatment as .resume-entry-client h4 (bold, cream, left accent bar) —
   just a notch smaller and with a thinner bar, so it visibly reads as
   "a company name, nested a level in" rather than a muted label.

   Always an <h5> here, one level deeper than New Business's own <h4>, so
   it heads its own bullet list without skipping a heading level. */
.resume-entry-subclient {
  margin: 1.3rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
  border-left: 2px solid var(--accent-rule);
  padding-left: 0.55rem;
}
.resume-entry-subclient:first-of-type { margin-top: 0.8rem; }

/* --- Certifications — a badge image next to its name/issuer ----------- */
.resume-cert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.resume-cert-badge {
  width: 64px;
  height: 64px;
  display: block;
  flex-shrink: 0;
}
.resume-cert-issuer { color: var(--muted); }

.resume-note { color: var(--muted); font-size: 0.9rem; margin-top: 2rem; }

/* site.css's print block darkens --blue/--cream/--muted/--border for
   paper, but doesn't touch --accent-rule, so force it explicitly here too
   — a print-out is effectively always "light mode" (dark text on white
   paper), so this matches light mode's own pink (#cb2787, ~5:1 against
   white, comfortably legible on paper too). */
@media print {
  .resume-section > h2,
  .resume-entry-client h4,
  .resume-entry-subclient {
    border-color: #cb2787;
  }

  /* Chips are a screen thing — the border/pill/rounded-corner treatment
     costs paper space to buy scannability that a printed page doesn't
     need in the same way (a reader with the whole page in hand skims
     differently to someone scrolling), so print falls back to plain,
     denser comma-separated text instead of a wrapping row of pills. */
  .skill-chip {
    display: inline;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-size: inherit;
    font-weight: inherit;
    white-space: normal;
  }
  .skill-chip:not(:last-child)::after {
    content: ", ";
  }

  /* Keeps a role (or a client within Apadmi's role) from splitting across
     a page break where it can be avoided — e.g. Arctic Shores was
     starting on one page and finishing on the next, which read badly.
     This only takes effect when the whole block actually fits on one
     page; if a block is taller than a full page (Apadmi's is, with six
     clients under it), the browser still has to break inside it somewhere
     — this can't and shouldn't force an impossible page. */
  .resume-entry,
  .resume-entry-client {
    break-inside: avoid;
    page-break-inside: avoid; /* older/Safari fallback for break-inside */
  }
}