/* satellite-posts.css -- the site's font, and the heading box at the top of each post in satellite.foundation's
   front-page list. The box itself is written by satellite-posts.php, in this same folder,
   which also turns off each post's picture there. The font applies to every page; everything
   else is scoped to body.satellite-list, so single posts, pages and archives are left alone. */

/* THE WHOLE SITE'S FONT: IBM Plex Mono (loaded from Google Fonts by satellite-posts.php).
   Hueman sets "Titillium" on body and everything else inherits it; html body wins over that. */
html body,
html body .entry code,
html body .entry pre:not(.wp-block-code),
html body .comment code {
    font-family: "IBM Plex Mono", monospace;
}

/* REGULAR TEXT in posts and pages (paragraphs, lists, quotes, tables), on every page:
   slightly thicker, no drop shadow. Leaves the heading box, code blocks, headings,
   menu and sidebars alone. */
html body .entry p,
html body .entry li,
html body .entry blockquote,
html body .entry td,
html body .entry th,
html body .entry dt,
html body .entry dd {
    font-weight: 400;   /* 300 light (theme's original), 400 regular, 500 medium, 600 semi-bold, 700 bold */
    font-size: 14px;    /* the theme's was 18px */
    line-height: 1.6;   /* keeps the line spacing in step with the size */
}

/* ROOM UNDER THE CODE WINDOWS (the Syntax Highlighter plugin's .wsh-box, and its tabbed
   .wsh-tabs), on every page. The plugin gives a window no margin, so whatever comes next
   sat against its bottom edge. 20px is the height of the Spacer blocks already put under
   many windows, so a window that has a spacer under it is left as it is; windows inside
   a tab group stay joined to their tabs. */
html body .entry .wsh-box:not(.wsh-tabpanel > .wsh-box):not(:has(+ .wp-block-spacer)),
html body .entry .wsh-tabs:not(:has(+ .wp-block-spacer)) {
    margin-bottom: 20px;
}

/* THE LEFT SIDEBAR'S "LATEST 20 POSTS" AND "LATEST 20 COMMENTS" headings, on every page.
   Their heading blocks (Appearance > Widgets) carry the class sat-sidebar-title. */
html body .sat-sidebar-title {
    text-transform: uppercase;
    text-shadow: -2px 2px 0 #ffffff;   /* solid white, like the banner's separators */
}

/* THE SIDEBAR POST LISTS ("LATEST 20 POSTS" and "LATEST 4 MONTHS", both carrying the class
   sat-entry-list): ENTRY>> before each title (written in by satellite-posts.php), a title
   that runs onto another line lined up under the title rather than under ENTRY>>, and a
   little room between entries. */
html body .sat-entry-list li {
    padding-left: 8ch;      /* "ENTRY>> " is 8 characters wide in this monospaced font */
    text-indent: -8ch;
    margin-bottom: 8px;
}

:root {
    --sat-background: #2fb9eb;  /* the whole box */
    --sat-rule:       #348cb3;  /* the four divider lines */
    --sat-separator:  #646464;  /* the " / " between tags and between categories */
    --sat-links:      #556970;  /* the tag and category words */
    --sat-text:       #ffffff;
    --sat-shadow:     #646464;
}

/* Hueman's own title and category/date line: the box replaces them */
body.satellite-list #grid-wrapper .post-standard .post-meta,
body.satellite-list #grid-wrapper .post-standard .post-title {
    display: none;
}

body.satellite-list .sat-head {
    background: var(--sat-background);
    color: var(--sat-text);
    font-family: "IBM Plex Mono", monospace;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: -2px 2px 1px var(--sat-shadow);
    padding: 14px 18px;
    margin: 0 0 24px;
    box-shadow: -4px 4px 3px rgba(100, 100, 100, 0.6);
}

/* divider lines: the one under the name goes all the way across */
body.satellite-list .sat-rule {
    border: 0;
    border-top: 3px solid var(--sat-rule);
    margin: 6px 0;
    box-shadow: -2px 2px 1px var(--sat-shadow);
}
body.satellite-list .sat-full { width: 100%; }

/* the line under TITLE / DATE / ID is exactly as wide as the "TITLE: ..." line:
   the box shrinks to fit the title, and DATE and ID are kept from widening it */
body.satellite-list .sat-fit { width: fit-content; max-width: 100%; }
body.satellite-list .sat-fit .sat-nowidth { width: 0; white-space: nowrap; }
body.satellite-list .sat-fit .sat-rule { width: 100%; }

body.satellite-list .sat-brand {
    font-weight: 700;           /* Plex Mono's heaviest */
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 0.6em 0;           /* the blank line above and below */
    text-shadow: -3px 3px 2px var(--sat-shadow);
}

body.satellite-list .sat-gap { height: 0.8em; }

/* light blue space between lines that sit on top of each other (TITLE / DATE / ID, TAGS / CATEGORY) */
body.satellite-list .sat-line + .sat-line { margin-top: 6px; }

/* the TITLE / DATE / ID / USERNAME / TAGS / CATEGORY labels */
body.satellite-list .sat-label {
    background: #a63c3c;
    color: #ffffff;
    text-shadow: -2px 2px 1px #6e4242;
    padding: 0 6px;
}

body.satellite-list .sat-line a {
    color: var(--sat-text);
    text-decoration: none;
}
body.satellite-list .sat-line a:hover { text-decoration: underline; }

body.satellite-list .sat-terms a,
body.satellite-list .sat-none {
    color: var(--sat-links);
    text-shadow: -2px 2px 0 #bde6ff;   /* solid, almost white */
}
body.satellite-list .sat-sep  {
    color: var(--sat-separator);
    text-shadow: -2px 2px 0 #ffffff;   /* solid white */
}

@media (max-width: 719px) {
    body.satellite-list .sat-brand { font-size: 22px; }
    body.satellite-list .sat-head  { font-size: 14px; padding: 12px 12px; }
}