/* CSS for michaelmalick.com */


/* Theme
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
    --color-text:         #2E3440;
    --color-text-muted:   #4C566A;
    --color-link:         #3B5C87;
    --color-link-visited: #4C566A;
    --color-bg:           #ECEFF4;
    --color-bg-hover:     #D9DCE3;
    --color-border:       #C7CDD7;
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-text:         #ECEFF4;
    --color-text-muted:   #D8DEE9;
    --color-link:         #88C0D0;
    --color-link-visited: #D8DEE9;
    --color-bg:           #2E3440;
    --color-bg-hover:     #3B4252;
    --color-border:       #434C5E;
}


/* Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }


/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.875rem 0.625rem 0.625rem;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  gap: 1rem;
}

@media (min-width: 700px) {
  .layout {
    grid-template-columns: 17rem 1fr;
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
      "header nav"
      "header main"
      "footer footer";
    gap: 1.5rem;
  }
}

.layout > header { grid-area: header; }
.layout > nav    { grid-area: nav; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: footer; }


/* Base styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    font-family: system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.375rem;
    margin-bottom: 0.625rem;
    font-weight: 300;
}
h1 {font-size: 2.5rem;   line-height: 1.2;}
h2 {font-size: 1.875rem; line-height: 1.25;}
h3 {font-size: 1.25rem;  line-height: 1.3;}
h4, h5, h6 { font-size: 0.95rem; }
p { margin-top: 0; }


/* Articles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 0.625rem;
    margin-bottom: 1.25rem;
}

article > h2 {
    grid-column: 1 / -1;
}


/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.img_headshot {
    float: right;
    margin-right: 0.625rem;
    margin-top: 0.625rem;
    margin-left: 0.625rem;
    margin-bottom: 0.625rem;
    border-radius: 50%;
}

.img_research_link { margin-top: 0.5rem; }

.img_research {
    width: 100%;
    mix-blend-mode: multiply;
}

.fig-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    mix-blend-mode: multiply;
}

.fig-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}
.fig-row img { mix-blend-mode: multiply; }

[data-theme="dark"] .img_research,
[data-theme="dark"] .fig-center,
[data-theme="dark"] .fig-row img {
    filter: brightness(0.93);
    mix-blend-mode: normal;
}


/* Side info and icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sideinfo {
    font-size: 0.95rem;
    line-height: 1.5;
}
.sideinfo svg {
    width: 20px;
    height: 20px;
    margin-top: 0.3rem;
    fill: var(--color-text-muted);
}
.sideinfo a:hover svg {
    fill: var(--color-text);
}

.name {
    font-size: 2rem;
    padding-top: 0.625rem;
}

.icon-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}
.icon-row .theme-toggle {
    margin-left: 1.2rem;
}


/* Theme toggle
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.theme-toggle {
    display: inline-flex;
    padding: 0.15rem;
    gap: 0.15rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
}
.theme-toggle button {
    background: none;
    border: 0;
    padding: 0.35rem;
    cursor: pointer;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle svg {
    width: 15px;
    height: 15px;
    margin: 0;
    fill: var(--color-text-muted);
    display: block;
}
:root[data-theme="light"] .theme-toggle button[data-set-theme="light"],
:root[data-theme="dark"]  .theme-toggle button[data-set-theme="dark"] {
    background: var(--color-bg-hover);
}
:root[data-theme="light"] .theme-toggle button[data-set-theme="light"] svg,
:root[data-theme="dark"]  .theme-toggle button[data-set-theme="dark"]  svg {
    fill: var(--color-text);
}
.theme-toggle button:hover svg {
    fill: var(--color-text);
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
    padding: 0;
    margin-left: 1.8rem;
    margin-top: -0.625rem;
    margin-bottom: 0.625rem;
    list-style: circle;
}
ol {
    padding: 0.625rem;
    margin: 1.2rem;
    margin-top: 0;
    list-style: decimal inside;
}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
    color: var(--color-link);
    text-decoration: none;
}
a:hover { background-color: var(--color-bg-hover); }
a:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

/* links wrapping an image or icon: no hover highlight */
a:has(img):hover,
a:has(svg):hover { background-color: transparent; }

/* prose links: underlined, with a muted visited state */
:is(p, li) a { text-decoration: underline; }
:is(p, li) a:visited { color: var(--color-link-visited); }


/* Definition lists (CV)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* See: http://www.maxdesign.com.au/articles/definition/ */

/* Term text style (i.e., year) */
dt {
    position: relative;
    left: 0;
    top: 1.5rem;
    width: 3.8rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Defintion style */
dd {
    border-left: 1px solid var(--color-border);
    margin-left: 4.3rem;
    margin-bottom: -0.3rem;
    padding-bottom: 2px;
    padding-left: 0.7rem;
}

/* Description list */
dl {
    margin-bottom: 1.25rem;
    margin-top: -1.25rem;
}


/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navigation {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.3rem 0;
    font-size: 1.125rem;
}


/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 0.625rem;
    margin-top: 1.25rem;
    padding-bottom: 1.5rem;
    font-size: 0.95rem;
}

.footer-links {
    display: inline-flex;
    gap: 1rem;
}