/*
Theme Name: Speak Up Plain
Description: speakupmag.org in the "Plain" look: one typed column, Times, blue links, thin black rules. Colors, type sizes and spacing live in theme.json (Appearance > Editor > Styles); this file holds only what theme.json cannot say.
Version: 0.1.0
Requires at least: 6.6
Text Domain: speakup-plain
*/

/* The page: a 900px sheet, text in a 640px column at its left edge. */
.wp-site-blocks { max-width: 932px; margin-inline: auto; padding-top: 56px; padding-bottom: 120px; }
a { text-decoration-thickness: 1px; text-underline-offset: .16em; }
mark { padding: 0 .12em; }
/* Vertical rhythm. WordPress puts 26px (the block gap in theme.json) above every block; these are the exceptions. */
main li { margin-bottom: 18px; }
main h1, main .wp-block-post-title { margin-bottom: 0; }
main h1 + *, main .wp-block-post-title + * { margin-top: 40px; }
main h1.su-opening + :not(.wp-block-separator) { margin-top: 40px; }
main h1.su-opening { margin-top: 30px; }
main h1.su-opening + .wp-block-separator { margin-top: 96px; } /* the home page's opening line, set as body text */
main h2 { margin-bottom: 0; }
main h2 + * { margin-top: 22px; }
main h3 { margin-bottom: 0; }
main h3 + * { margin-top: 8px; }
main .wp-block-separator { margin-top: 68px; margin-bottom: 0; }
main .wp-block-separator + * { margin-top: 68px; }

/* Header: logo left, menu right; under 760px the menu drops below the logo. */
/* The header floats: it stays at the top of the window as the page scrolls, so the menu and Donate are always in reach.
   No rule under it (his call, 2026-11-11). */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; background: #fff; padding: 14px 0; margin-top: -14px; }
.wp-site-blocks > header.wp-block-template-part + * { margin-top: 70px; }
.su-top { margin-bottom: 0; }
/* On phones the menu folds into "Menu"; Donate stays out beside it so it is always in view. */
.su-top-right { gap: 22px; margin-left: auto; }
.su-give-m { display: none; margin: 0; }
.su-give-m a, .su-give-m a:visited { color: var(--wp--preset--color--red); font-weight: 700; }
@media (max-width: 599px) { .su-give-m { display: block; } }
.su-top .wp-block-navigation__container { gap: 10px 24px; }
.su-top .wp-block-navigation a { text-decoration: underline; color: var(--wp--preset--color--blue); }
.su-top .wp-block-navigation a:visited { color: var(--wp--preset--color--blue); }
.su-top .wp-block-navigation .su-give a, .su-top .wp-block-navigation .su-give a:visited { color: var(--wp--preset--color--red); font-weight: 700; }
/* The page you are on: its menu link goes black and loses its underline. Posts and category pages count as Updates. */
.su-top .wp-block-navigation a[aria-current="page"],
.su-top .wp-block-navigation .current-menu-item > a,
body.single-post .su-top .wp-block-navigation a[href$="/updates/"],
body.archive .su-top .wp-block-navigation a[href$="/updates/"] { color: #000; text-decoration: none; }
.su-top .wp-block-navigation__responsive-container-open, .su-top .wp-block-navigation__responsive-container-close { font: inherit; text-decoration: underline; color: var(--wp--preset--color--blue); }
.su-top .wp-block-navigation__responsive-container.is-menu-open { padding: 24px 16px; }
.su-top .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 20px; }

/* The footer (his pick 2026-11-11, "E minimal"): a line of menu links, a line of contact, then a small logo and the
   charity line. Ordinary blocks in parts/footer.html. The shared-footer rules further down are unused while this part is in place. */
.su-foot { margin-top: 68px; font-size: var(--wp--preset--font-size--medium); }
.su-foot > .wp-block-separator { margin-top: 0; }
.su-foot > .wp-block-separator + * { margin-top: 44px; }
.su-foot-links a { margin-right: 22px; white-space: nowrap; }
.su-foot p { margin-bottom: 0; }
.su-foot > p + p { margin-top: 10px; }
.su-foot > p + .wp-block-separator { margin-top: 44px; }
.su-foot .su-colophon { gap: 12px 18px; font-size: var(--wp--preset--font-size--small); margin-top: 22px !important; }
.su-foot .su-colophon > * { margin: 0; }
.su-foot .su-colophon .su-year { margin-left: auto; font-weight: 400; }

/* The shared Speak Up footer (the speakup-footer plugin; its words and links are edited on the hub), in this site's
   plain dress: Times, black rules, blue links, browser-plain form. Selectors start with "html" to outrank the plugin's. */
html #su-eco {
  --su-eco-text: var(--wp--preset--font-family--times); --su-eco-heading: var(--wp--preset--font-family--times); --su-eco-read: var(--wp--preset--font-family--times);
  --su-eco-ink: #000; --su-eco-body: #000; --su-eco-mute: #000; --su-eco-quiet: #000; --su-eco-faint: #000; --su-eco-hairline: #d2d2d2; --su-eco-rail: 16px;
  margin-top: 68px; padding: 0 16px; font-size: 18px; line-height: 1.7; border-top: 0;
}
/* One light rule above the footer, in line with the page; no rule between its sign-up row and its columns. */
html #su-eco::before { content: ""; display: block; border-top: 1px solid #d2d2d2; margin-bottom: 44px; }
html #su-eco .su-footer-top { align-items: flex-start; padding-bottom: 0; margin-bottom: 48px; border-bottom: 0; }
html #su-eco .wp-block-site-logo img { width: 92px !important; }
html #su-eco .is-style-su-footer-line { font-size: 20px; font-style: italic; letter-spacing: 0; line-height: 1.5; }
html #su-eco .is-style-su-kicker { font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; }
html #su-eco .su-subscribe-label { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: 4px; }
html #su-eco .su-subscribe-form input { padding: 4px 6px; font-size: 16px; border: 1px solid #767676; }
html #su-eco .su-subscribe-button, html #su-eco .su-subscribe-button:hover { padding: 4px 12px; font-size: 16px; font-weight: 400; color: #000; background: #efefef; border: 1px solid #767676; }
html #su-eco .su-column-head { font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
html #su-eco .su-column ul:not(.is-style-su-socials) li, html #su-eco .su-column p, html #su-eco .su-column p.su-footer-who { font-size: 18px; line-height: 1.5; }
html #su-eco a { color: var(--wp--preset--color--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
html #su-eco a:visited { color: var(--wp--preset--color--blue); }
html #su-eco .su-column ul:not(.is-style-su-socials) a.is-out::after { content: none; }
html #su-eco .su-column ul.is-style-su-socials { display: block; }
html #su-eco .su-column ul.is-style-su-socials li + li { margin-top: 9px; }
html #su-eco .su-column ul.is-style-su-socials a { display: inline; width: auto; height: auto; overflow: visible; font-size: 18px; line-height: 1.5; color: var(--wp--preset--color--blue); border: 0; background: none !important; }
html #su-eco .su-column ul.is-style-su-socials a:visited { color: var(--wp--preset--color--blue); }
/* This site's own menu is the first column; the hub's general "Speak Up" column would repeat it. */
html #su-eco .su-column:has(> #speak-up) { display: none; }
html #su-eco .su-footer-cols.has-local { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 800px) { html #su-eco .su-footer-cols.has-local { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html #su-eco .su-colophon { font-size: 15px; margin-top: 40px; }

/* Doors on the home page: a bold link, then a line or two. */
.su-door + .su-door { margin-top: 40px; }
.su-door + .wp-block-latest-posts { margin-top: 4px; }
/* The newest Update on the home page: the same two columns as the Upcoming rows (date, then the linked title). */
.su-latest .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.su-latest .wp-block-post-template > li { margin: 0; }
.su-latest .wp-block-group { display: grid; column-gap: 26px; padding: 9px 0; }
.su-latest .wp-block-group > * { margin: 0; font-size: inherit; font-weight: inherit; }
.su-latest .wp-block-post-date { color: #666; white-space: nowrap; }
.su-latest .wp-block-post-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
@media (max-width: 560px) { .su-meetings--notime .su-meeting .su-meeting-what { grid-column: 2; } }
.wp-block-latest-posts + p { margin-top: 2px; }
.wp-block-latest-posts { list-style: none; padding-left: 0; }
.wp-block-latest-posts li { margin-bottom: 2px; }
.wp-block-latest-posts__post-date { display: inline; font-size: inherit; color: inherit; }
.wp-block-latest-posts__post-date::before { content: ", "; }

/* Upcoming events (the Luma block): the date, then the linked name. */
.su-meetings { display: block; }
main p + .su-meetings { margin-top: 44px; }
main .su-meetings + p, main .su-meetings + figure { margin-top: 48px; }
.su-meeting { display: grid; grid-template-columns: 10.5em minmax(0,1fr); column-gap: 26px; padding: 9px 0; text-decoration: none; color: inherit; }
.su-meeting-when { color: #666; white-space: nowrap; }
.su-meetings--notime .su-meeting, .su-latest .wp-block-group { grid-template-columns: 7em minmax(0,1fr); }
.su-meeting:visited { color: inherit; }
.su-meeting-what { grid-column: 2; color: var(--wp--preset--color--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.su-meeting-where { display: none; } /* addresses dropped (his call, 2026-11-11); the Luma page has them */
.su-meeting-where:empty { display: none; }
@media (max-width: 560px) { .su-meeting { grid-template-columns: 1fr; } .su-meeting-what, .su-meeting-where { grid-column: 1; } }

/* Sign-up form: plain browser fields. */
.su-signup { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.su-signup .su-signup-fields { display: contents; }
.su-signup input { font: 16px var(--wp--preset--font-family--times); padding: 4px 6px; border: 1px solid #767676; border-radius: 0; background: #fff; color: #000; min-width: 0; width: 11em; }
.su-signup button { font: 16px var(--wp--preset--font-family--times); padding: 4px 12px; border: 1px solid #767676; border-radius: 0; background: #efefef; color: #000; cursor: pointer; }
.su-signup .formkit-alert { list-style: none; padding: 0; margin: 0; flex-basis: 100%; font-size: var(--wp--preset--font-size--small); }
.su-signup .formkit-alert:empty { display: none; }

/* Tables (Milestones): two plain columns. */
.wp-block-table { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.wp-block-table table { border-collapse: collapse; width: auto; }
.wp-block-table td { border: 0; padding: 10px 26px 12px 0; vertical-align: top; }
.wp-block-table td:first-child { white-space: nowrap; }

/* Leadership: a gray role on the left, the people on the right (a Table block with the class su-roles). */
.su-roles td:first-child { color: #666; white-space: normal; width: 10.5em; padding-right: 26px; }
.su-roles td { padding-top: 12px; padding-bottom: 14px; }
/* In the news (a List block with the class su-news): no bullets, the year and outlet in gray, the linked title under it. */
ul.su-news { list-style: none; padding-left: 0; }
ul.su-news li { margin-bottom: 30px; }
ul.su-news li::first-line { color: #666; }

/* Leadership: names listed under an italic role. */
ul.su-names { list-style: none; padding-left: 0; }
ul.su-names li { margin-bottom: 4px; font-weight: 700; }
ul.su-names.su-cols { columns: 2; column-gap: 40px; }
ul.su-names.su-cols li { font-weight: 400; break-inside: avoid; }
@media (max-width: 480px) { ul.su-names.su-cols { columns: 1; } }

/* A framed picture (Image block style "Framed"), used for the site screenshots. */
.wp-block-image.is-style-frame img { border: 1px solid #000; }
.wp-block-image figcaption, .wp-element-caption { text-align: left; margin-top: 8px; margin-bottom: 0; }

/* Updates: a line of categories under the title; the one you are in is black. */
.su-cats { gap: 6px 22px; }
.su-cats > * { margin: 0; }
.su-cats .wp-block-categories { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.su-cats .wp-block-categories li { margin: 0; }
.blog .su-cats-all a, .su-cats .current-cat > a { color: #000; text-decoration: none; }
main h1 + .su-cats { margin-top: 14px; }
.su-cats + * { margin-top: 44px; }
/* Year lines, and the pinned piece at the top of the list. */
.su-year { font-weight: 700; margin: 44px 0 14px; }
.su-list > li:first-child .su-year { margin-top: 0; }
.su-list > li.sticky { padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid #d2d2d2; }
.su-list > li.sticky .wp-block-post-date { visibility: hidden; position: relative; }
.su-list > li.sticky .wp-block-post-date::after { content: "Start here"; visibility: visible; position: absolute; left: 0; top: 0; }

/* Updates: the list, one row per piece. */
.su-list { list-style: none; padding: 0; margin: 0; }
.su-list > li { margin: 0 0 18px; }
.su-list > li + li { margin-top: 0; }
.su-row { gap: 26px; align-items: flex-start; }
.su-row .wp-block-post-date { flex: 0 0 6.4em; white-space: nowrap; }
.su-row h2 { font-weight: 400; margin: 0; }
.su-row h2 + * { margin-top: 0; }
.su-row > * { margin-top: 0; }
.su-row .wp-block-post-excerpt { margin-top: 6px; color: #666; }
.su-row .wp-block-post-date { color: #666; }
.su-row .wp-block-post-excerpt p { margin: 0; }
.su-list > li { margin-bottom: 34px; }
.su-row .wp-block-post-author-name { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--gray); }
@media (max-width: 560px) { .su-row { flex-direction: column; gap: 0; } .su-row .wp-block-post-date { flex: none; font-size: var(--wp--preset--font-size--small); } }

/* One piece. */
/* Side notes: the date and the author sit in a narrow left column beside the piece; above it on small screens. */
.su-single-grid { display: grid; grid-template-columns: 170px minmax(0, 640px); column-gap: 56px; }
.su-side { font-size: var(--wp--preset--font-size--small); line-height: 1.9; border-top: 1px solid #000; padding-top: 14px; margin-top: 10px; align-self: start; position: sticky; top: 40px; }
.su-side > * { margin-top: 0; }
.su-body { margin-top: 0; min-width: 0; }
.su-body > :first-child { margin-top: 0; }
main .su-body .wp-block-post-title + * { margin-top: 34px; }
@media (max-width: 899px) {
  .su-single-grid { display: block; }
  .su-side { position: static; border-top: 0; border-bottom: 1px solid #000; padding: 0 0 14px; margin: 0 0 30px; }
}
.su-dateline > * + *::before { content: "\00b7\00a0"; }
.su-post { font-size: 1.07em; }
.su-post li { margin-bottom: 10px; }
.su-post figure { margin: 38px 0; }
.su-post .wp-block-image img { border: 1px solid #000; }
.su-post h2 { margin-top: 44px; }
.su-postnav { gap: 4px; }
.su-postnav .post-navigation-link-previous, .su-postnav .post-navigation-link-next { display: grid; grid-template-columns: 6.4em minmax(0,1fr); column-gap: 26px; }
.su-postnav .post-navigation-link__label { font-style: italic; }

/* Donate page (the Donorbox form keeps its own look; headings sit left like the rest). */
.page .has-text-align-center { text-align: left; }

@media (max-width: 760px) {
  .wp-site-blocks { padding-top: 34px; }
  .wp-site-blocks > header.wp-block-template-part + * { margin-top: 42px; }
}

/* Rules: one thin black line. */
.wp-block-separator { border: 0; border-top: 1px solid #d2d2d2; opacity: 1; }
.su-top > .wp-block-group { gap: 16px 32px; }

/* Quotes: a thin rule down the left. */
.wp-block-quote { margin-left: 0; margin-right: 0; padding-left: 22px; border-left: 1px solid #000; }


/* A two-column block wider than the text column (Columns block with the class su-two): text left, the other thing right. */
.su-two { width: 868px; max-width: calc(100vw - 32px); gap: 40px 56px; }
.su-two .wp-block-column > h2 { margin-top: 40px; }
.su-two .wp-block-column > :first-child { margin-top: 0; }

/* Donate: the Donorbox form cannot be restyled from here, so it sits in a thin frame like the site screenshots. */
dbox-widget { display: block; max-width: 440px; border: 1px solid #000; padding: 16px; box-sizing: content-box; }

/* No logo beside the sign-up; a small one sits at the very bottom, before the charity line. */
html #su-eco .su-footer-brand { display: none; }
html #su-eco .su-colophon { justify-content: flex-start; gap: 14px 18px; }
html #su-eco .su-colophon::before { content: ""; flex: 0 0 auto; width: 54px; height: 30px; background: url("https://speakupcommunity.com/wp-content/uploads/2026/09/speakup-logo-640.png") no-repeat left center / contain; }
html #su-eco .su-colophon > :last-child { margin-left: auto; }