@import "/reset.css";

:root {
	color-scheme: light dark;

	--width: 8.5in;

	--mono-face: ui-monospace, Menlo, Consolas, monospace;
	--text-face: -apple-system, system-ui, Input, Helvetica, sans-serif;

	--bg: #fff; --fg: #111; --fg-faint: #777;
	--target-bg: #f0f0f0;
	--a: #005aff; --a-hov: #005aff; --a-act: #666;
	--a-hov-feed: #f97900;
	--time: #555;
	--code-fg: #000; --code-bg: #f0f0f0;
	--figcaption: #444;
	--q-border: #ccc;
}
@media print {
  :root {
    --width: none;
    font-size: 0.85em;
  }
}
@page:first {
  margin: 0.75cm;
}

body {
	background: var(--bg);
	color: var(--fg);
	line-height: 1.20;
	font-family: var(--text-face);
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
  max-width: var(--width);
  margin: 1rem;
  text-align: justify
}

a:link {
	color: var(--fg);
	/* text-decoration: underline; */
  text-decoration: none;
	text-decoration-thickness: 2px;
	/* text-underline-offset: 0.1rem; */
	text-decoration-color: var(--fg-light);
}
a:visited {
	color: var(--fg);
	text-decoration-color: var(--fg-light);
}
a:hover {
	color: var(--a-hov);
	text-decoration-color: var(--a-hov);
}
a:after { font-size: 0.6rem; vertical-align: super; }
a[href*="//"]:not([href*="mattwidmann.net"]):after { content: "\00A0↗"; }
a[href^="http:"]:after { content: "\00A0!" !important; }
a[href$=".pdf"]:after, a[href$=".zip"]:after, a[href$=".gz"]:after {
	content: "\00A0↓" !important;
}

/* tailwind polyfill */
hr {
  border: 0;
  border-top: 1px solid var(--fg-faint);
  height: 0;
  margin-right: 0.5rem;
  margin-left: 0.5rem;

  flex-grow: 1; /* Allows the hr to take up the remaining space */
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-none {
  flex-grow: 0;
}
.flex-grow {
  flex-grow: 1;
}


/* compositional elements */
/*  */

/* section */
.section {
  margin-bottom: 1em;
}
.section-title {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1.0rem;
  margin-top: 1.5rem;
}

/* the section heading: mono face against the sans body copy so it still
   reads as a heading, but sentence case and unbolded to keep it light */
.section-title > p {
  font-family: var(--mono-face);
  font-weight: normal;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--fg);
  flex: none;
  white-space: nowrap;
}

/* a light rule, just enough to carry the eye across */
.section-title > hr {
  border-top-width: 1px;
  border-top-color: var(--fg-faint);
  margin-left: 0.75rem;
  margin-right: 0;
}

.contact-item {
  display: flex;
  flex-grow: 0;
  margin-left: 1rem;
}

.position {
  margin-bottom: 1em;
}

.position-header {
  display: flex;
  margin-bottom: 0.25rem;
}

.position-header-title {
  font-style: italic;
}

.position-header-organization {
  margin-left: 1rem;
  font-weight: bold;
}

.position-header-years {
  margin-left: 1rem;
}

.position-body {
  margin-left: 1rem;
}

.education-item {
  display: flex;
  margin-bottom: 0.5rem;
}
.education-item-degree {
}
.education-item-institution {
  font-weight: bold;
  margin-left: 1rem;
}
.education-item-years {
  margin-left: 1rem;
}

/* name + contact details ride in a shaded lozenge: the pill radius is half
   the box height, so the horizontal padding has to clear that curve */
#contact {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.25rem;

  background: var(--target-bg);
  border-radius: 999px;
  padding: 0.5rem 1.5rem;

  margin-bottom: 0.5rem;

  /* shaded backgrounds are dropped by default when printing */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* skill */
.skills-item {
  display: flex;
  margin-bottom: 0.5rem;
  width: 100%;
}

/* title of a skill */
.skills-item > p {
  font-style: italic;
  min-width: 1in;
}

/* list of sub-skills */
.skills-item > ul:first-of-type {
  display: flex;
  flex-grow: 1;
  padding: 0;
  margin: 0;

  justify-content: end;

  /* no bullet */
  list-style-type: none;

  /* overflow by wrapping around without wrapping items */
  flex-wrap: wrap;

}

/* sub-skill */
.skills-item > ul:first-of-type > li {
  margin-left: 1em;
  justify-content: space-between;
}

/* the last item in a section already sits above the section's own bottom
   margin, so its trailing margin is redundant and only pads the gap */
.section > .position:last-child,
.skills > .skills-item:last-child {
  margin-bottom: 0;
}

/* dark mode: same palette as www; screen only so a print from a dark
   browser still comes out on white */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --bg: #181818; --fg: #eee; --fg-faint: #bbb;
    --target-bg: #282828;
    --a: #42b5ff; --a-hov: #62b3ff; --a-act: white;
    --code-fg: #ddd; --code-bg: #282828;
    --figcaption: #bbb;
    --time: #bbb;
  }
}

/* index page: a short note, not a document */
body.index {
  max-width: 36rem;
  line-height: 1.45;
  text-align: left;
}
body.index h1 {
  font-family: var(--mono-face);
  font-weight: normal;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
body.index p {
  margin-top: 1rem;
}
body.index .footnote {
  color: var(--fg-faint);
  font-size: 0.9rem;
}

/* the resume hides its links; here they are meant to be followed */
body.index a:link,
body.index a:visited {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fg-faint);
  text-underline-offset: 0.15em;
}
body.index a:hover {
  color: var(--a-hov);
  text-decoration-color: var(--a-hov);
}

body.index footer {
  margin-top: 2.5rem;
  font-size: 0.9rem;
}
body.index footer a + a {
  margin-left: 1rem;
}