/* =========================================================================
         file: web/common/pg.css
  description: Shared Persagen site layer: masthead, main nav, footer, issue/article lists,
               DRAFT marker, link icons. Loads AFTER wpi.css; a site's own layer (e.g. fr.css)
               loads after this one.
      version: v03 [2026-Nov-07]
-------------------------------------------------------------------------------
Versions:
  * v03 [2026-Nov-07] Palette (--rose, --leaf), body.brand-rose, second-level menu (nav.subnav),
    site cards (ul.sites).
  * v02 [2026-Nov-06] Renamed from site.css. Link icons (pdf, mailto, download, info,
    external link) ported from pg-solr.css; logo-as-title rules.
    Links to persagen.org / persagen.com stay green in every state (wpi.css made .com blue).
  * v01 [2026-Nov-05] Extracted from fr.css v01.
-------------------------------------------------------------------------------
Notes:
  * --accent colors the masthead rule. Default = Persagen green; fr.css sets its rose.
============================================================================ */

:root {
  --accent: var(--green);   /* masthead rule; body.brand-<name> overrides it */
  --rose: #e0001a;          /* Fist and Rose / Democratic Socialist (from the logo, darkened for contrast) */
  --leaf: #0aa85a;          /* logo green: decorative only */
}
body.brand-rose { --accent: var(--rose); }

/* ---- Masthead ------------------------------------------------------------ */
.masthead { display: flex; align-items: center; gap: 1.25rem; max-width: var(--measure); margin: 1.5rem auto 0; padding-bottom: 1rem; border-bottom: 3px solid var(--accent); }
.masthead > img { height: 5.5rem; width: auto; flex: none; }
.masthead .title { font-size: 2.4rem; font-weight: 700; line-height: 1.1; margin: 0; }
.masthead .title a, .masthead .title a:hover { color: inherit; font-weight: 700; }
.masthead .tagline { margin: .25rem 0 0; color: var(--muted); font-size: 1rem; }

nav.site { max-width: var(--measure); margin: 0 auto; padding: .5rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: 1.05rem; }
nav.site a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--green); }

/* ---- Issue / article lists ------------------------------------------------ */
.toc-list { list-style: none; margin: 1rem 0; padding: 0; }
.toc-list li { margin: 0 0 1.25rem; }
.toc-list .t { font-size: 1.15rem; font-weight: 700; }
.toc-list .by { font-size: .95rem; color: var(--muted); }

footer.site { max-width: var(--measure); margin: 3rem auto 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--muted); }

@media (max-width: 36rem) {
  .masthead { flex-direction: column; align-items: flex-start; }
  .masthead .title { font-size: 2rem; }
}

/* ---- Template placeholders (delete .todo styling when final) ------------ */
.todo { background: #fff6c8; padding: 0 .25rem; }

/* ---- Persagen links stay green ---------------------------------------------
   wpi.css turns every http(s) link blue unless its URL contains persagen.org, so links to
   persagen.com came out blue (and a visited-link color on top). Links to either Persagen domain
   (including subdomains such as fr.persagen.org) use the Persagen green in every state.
   :not(#_) raises specificity above wpi.css's :not() chain. (Or add :not([href*="persagen.com"])
   to that rule in wpi.css and delete this block.) */
a[href*="persagen.org"]:not(#_), a[href*="persagen.com"]:not(#_),
a[href*="persagen.org"]:not(#_):visited, a[href*="persagen.com"]:not(#_):visited { color: var(--green); }
a[href*="persagen.org"]:not(#_):hover, a[href*="persagen.org"]:not(#_):focus-visible,
a[href*="persagen.com"]:not(#_):hover, a[href*="persagen.com"]:not(#_):focus-visible {
  color: var(--green-hover);
  border-bottom: 1px solid var(--green);
}

/* ---- Logo as the site title (persagen.org) ------------------------------- */
.masthead .title img { display: block; height: 3.5rem; width: auto; }
.masthead .title a:hover { border-bottom: 0; }

/* ---- Link icons (from pg-solr.css; icon files live in common/img/) --------
   URLs are relative to this file, so they resolve to /common/img/ wherever common/ is mounted.
   Icons are decorative CSS backgrounds; the link text carries the meaning.
   The SVGs have only a viewBox, so the size is set explicitly here. */
a[href$=".pdf"], a[href*=".pdf#"], a[href*=".pdf?"],
a[href^="mailto:"],
a[href$=".tsv"], a[href$=".tgz"],
a.info {
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 1.15em;
  padding-left: 1.55em;
}
a[href$=".pdf"], a[href*=".pdf#"], a[href*=".pdf?"] { background-image: url("img/pdf-icon.svg"); }
a[href$=".pdf"]::before { content: none; }              /* cancels wpi.css's text "PDF" marker (delete that rule there) */
a[href^="mailto:"] { background-image: url("img/email-icon.svg"); }
a[href$=".tsv"], a[href$=".tgz"] { background-image: url("img/download-icon.svg"); }

/* Information (tooltip) link:  <a class="info" title="..." href="...">text</a> */
a.info { background-image: url("img/information-icon.svg"); background-size: 0.9rem; padding-left: 1.15em; position: relative; }

/* External link mark: add target="ext_link" to the <a> (data URI, so no extra request; allowed by img-src data:) */
a[target="ext_link"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

/* ---- Second-level menu (nav.subnav) ------------------------------------------
   Shown under the main menu while a section with 'children' is current (e.g. About). */
nav.subnav { max-width: var(--measure); margin: 0 auto; padding: .4rem 0; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: .98rem; }
nav.subnav a[aria-current="page"] { font-weight: 700; border-bottom: 2px solid var(--green); }
nav.site a[aria-current="true"] { font-weight: 700; }
nav a.icon { display: inline-flex; padding-left: 0; background: none; border-bottom: 0; }
nav a.icon:hover, nav a.icon:focus-visible { border-bottom: 0; opacity: .75; }
nav a.icon img { display: block; }

/* ---- Site cards (landing page) -------------------------------------------------- */
ul.sites { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; }
ul.sites li { margin: 0; border: 1px solid var(--rule); border-radius: .5rem; background: var(--surface); padding: .75rem 1rem; }
ul.sites h3 { margin: 0; font-size: 1.15rem; }
ul.sites p { margin: .25rem 0 0; }
ul.sites .url { font-family: var(--mono); font-size: .9rem; color: var(--muted); }
.tag { display: inline-block; margin-left: .5rem; padding: 0 .5rem; border: 1px solid var(--muted); border-radius: .75rem;
  font-size: .8rem; font-weight: normal; color: var(--muted); vertical-align: middle; }