/* Custom styles for awkward project
   Load this AFTER tufte.css to override/extend as needed
   This file contains site-specific layout (header, footer) 
   while keeping Tufte CSS untouched. */

/* Only for our own full-width elements: Tufte CSS's percentage widths
   assume the default content-box. */
body,
.site-header,
.site-footer {
  box-sizing: border-box;
}

/* At least as tall as the window, with the article taking up any free
   space, so that the footer is at the bottom even on a short page. 100vh
   for browsers without dvh, which leaves out mobile browser toolbars. */
body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > article {
  flex-grow: 1;
}

/* Align table headers with data cells */
th,
td {
  text-align: left;
}

th {
  font-style: italic;
  font-size: 1.5rem;
}

hr {
  width: 45%;
  margin-left: 5%;
  margin-right: auto;
  margin-top: 4em;
  margin-bottom: 4em;
}

p {
  text-align: justify;
}

/* Match Tufte's typography and spacing for header/footer */
.site-header,
.site-footer {
  width: 87.5%;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 12.5%;
  font-family: et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: #111;
  background-color: #fffff8;
}

/* Optional: add visual separation */
.site-header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The site name: slightly larger than the header links */
header .site-title {
  font-weight: bold;
  font-size: 1.8rem;
}

.site-footer {
  border-top: 1px solid #ccc;
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

/* The footer is not content, so its text is small and not justified */
.site-footer p,
.site-footer ul {
  font-size: 1.1rem;
  text-align: left;
}

/* COPYRIGHT from config.sh, when footer.md has no paragraph for it to
   start: a line of its own, last in the footer */
.site-footer p.copyright {
  width: 100%;
}

.site-footer .footer-text {
  font-size: 1rem;
}

/* Footer lists: no bullets, in a row like the header links */
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li {
  margin: 0;
}

/* Dark mode support to match Tufte */
@media (prefers-color-scheme: dark) {
  .site-header,
  .site-footer {
    background-color: #151515;
    color: #ddd;
  }
}

/* Site navigation: the links from header.md, in a row */
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header nav li {
  margin: 0;
}

/* Each link is as wide as its label in italics (the current page, below)
   or not, whichever is wider, so that the links don't move from page to
   page. A copy from data-label, in the style the link is not shown in,
   takes up width but no height, and is hidden from screen readers too. */
.site-header nav li a {
  display: inline-flex;
  flex-direction: column;
}

.site-header nav li a::after {
  content: attr(data-label);
  font-style: italic;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.site-header nav li a[aria-current]::after {
  font-style: normal;
}

/* Wide screens: the links are always shown and the "Menu" summary is
   hidden. Only where ::details-content is supported, since elsewhere the
   summary is the only way to open the menu. */
@supports selector(::details-content) {
  @media (min-width: 761px) {
    .site-menu > summary {
      display: none;
    }

    .site-menu::details-content {
      content-visibility: visible;
    }
  }
}

.site-menu > summary {
  cursor: pointer;
  font-size: 1.2rem;
  list-style: none;
}

/* The open/closed triangle, placed by MENU_MARKER in config.sh. The
   browser's own marker is hidden, and drawn here instead so that it can
   go on either side. The second content line keeps screen readers from
   reading it out; browsers that don't understand it use the first. */
.site-menu > summary::-webkit-details-marker {
  display: none;
}

.marker-before > summary::before,
.marker-after > summary::after {
  content: "\25B8";
  content: "\25B8" / "";
}

.marker-before[open] > summary::before,
.marker-after[open] > summary::after {
  content: "\25BE";
  content: "\25BE" / "";
}

.marker-before > summary::before {
  margin-right: 0.4em;
}

.marker-after > summary::after {
  margin-left: 0.4em;
}

/* Header and footer links are obviously links, so they are not
   underlined */
.site-header a,
.site-footer a {
  text-decoration: none;
}

/* The current page, or the section of the current page. Not the site
   name, which is current on the home page. */
.site-header a[aria-current]:not(.site-title) {
  font-style: italic;
}

/* Published and updated dates, in the article header and in listings */
p.dates {
  font-size: 1.1rem;
  font-style: italic;
  text-align: left;
}

/* Section listings: one entry per member page */
section.listing ul {
  list-style: none;
  padding-left: 0;
}

section.listing li {
  margin-bottom: 1.5rem;
}

section.listing li p {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

/* Narrow screens, at the same width as Tufte CSS's own breakpoint: the
   header and footer line up with the text, the links fold into the menu
   and stack, and paragraphs are no longer justified, which leaves wide
   gaps in a narrow column. */
@media (max-width: 760px) {
  .site-header,
  .site-footer {
    width: 100%;
    padding: 1rem 0;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header nav ul {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.5rem;
    font-size: 1.2rem;
  }

  /* Labels against the right edge, like the list */
  .site-header nav li a {
    align-items: flex-end;
  }

  header .site-title {
    font-size: 1.6rem;
  }

  .site-menu {
    text-align: right;
  }

  p {
    text-align: left;
  }
}