/* site.css — shared chrome for sanmiguelmurals.com
   Variables + common header/nav/footer used on every page.
   Page-specific CSS stays inline in each file's <style> block. */

:root{
  --bg:#ECEAE6; --card:#FFFFFF; --ink:#1F1B14; --muted:#79746B;
  --accent:#9B3B1B; --rule:#D8D4CC; --teal:#0E7C7B;
  /* street-art palette: a few saturated SMA-wall tones for accents */
  --paint1:#C8472B; --paint2:#1E7F8C; --paint3:#7B4B9B; --paint4:#E08A1E;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased}

/* tighter top padding than before — less dead space above the nav (#2) */
.wrap{max-width:1180px;margin:0 auto;padding:28px 24px 72px}

.back{display:inline-flex;align-items:center;gap:8px;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;margin-bottom:36px;transition:color .2s ease}
.back:hover{color:var(--accent)}
.back .ar{display:inline-block;transition:transform .2s ease}
.back:hover .ar{transform:translateX(-4px)}

.topbar{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:28px}
.topbar .back{margin-bottom:0}

.langtoggle{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em}
.langtoggle a{color:var(--muted);text-decoration:none;padding:2px 6px;
  border-radius:5px;transition:color .15s ease,background .15s ease}
.langtoggle a:hover{color:var(--accent)}
.langtoggle a.active{color:var(--ink);font-weight:500}
.langtoggle .sep{color:var(--rule);padding:0 2px}

/* toprail is the mural-page variant of the nav (Murals · Artists) */
.toprail{display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em}
.toprail a{color:var(--muted);text-decoration:none;padding:2px 6px;
  border-radius:5px;transition:color .15s ease,background .15s ease}
.toprail a:hover{color:var(--accent)}
.toprail .sep{color:var(--rule);padding:0 2px}
.toprail .langtoggle a.active{color:var(--ink);font-weight:500}

/* inline links inside the lede (e.g. the "created by Adam Katz" credit):
   match surrounding text, underlined, accent on hover — not browser blue */
.lede a{color:inherit;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--rule);transition:color .15s ease,text-decoration-color .15s ease}
.lede a:hover{color:var(--accent);text-decoration-color:var(--accent)}

.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}

footer{margin-top:60px;font-family:"IBM Plex Mono",monospace;font-size:12px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted)}

a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* normalized two-group nav: links left, tools (heart/search/lang) right.
   Separator between left links is spacing only — no glyph. */
.toprail-left{display:inline-flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0}
.toprail-right{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.toprail-left .back{margin-bottom:0}
.toprail-left a{color:var(--muted);text-decoration:none;transition:color .15s ease}
.toprail-left a:hover{color:var(--accent)}
.toprail-right .langtoggle{display:inline-flex;align-items:center}
@media(max-width:480px){
  .toprail-left{gap:12px}
  .toprail-right{gap:8px}
}

/* nav search — collapsed magnifying glass that expands on click.
   Submits a Google site: query scoped to the domain. Shared by all pages. */
.navsearch{display:inline-flex;align-items:center;flex:0 0 auto;position:relative}
.navsearch-toggle{background:none;border:none;cursor:pointer;color:var(--muted);
  padding:2px 6px;display:inline-flex;align-items:center;transition:color .15s ease}
.navsearch-toggle:hover{color:var(--accent)}
.navsearch-toggle svg{display:block}
.navsearch-input{width:0;opacity:0;padding:0;border:none;
  border-bottom:1.5px solid var(--rule);background:none;
  font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
  transition:width .2s ease,opacity .15s ease,padding .2s ease;outline:none}
.navsearch.open .navsearch-input{width:160px;opacity:1;padding:3px 4px}
.navsearch.open .navsearch-input:focus{border-bottom-color:var(--accent)}
@media(max-width:480px){.navsearch.open .navsearch-input{width:120px}}

/* nav heart — appears in .topbar only once this browser loves >=1 mural.
   Links to the favorites view (?loved=true). Filled red to read as "you". */
.navheart{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  color:var(--accent);text-decoration:none;padding:2px 4px;
  transition:transform .12s ease,color .15s ease}
.navheart:hover{color:#7d2f15;transform:scale(1.08)}
.navheart[hidden]{display:none}
.navheart svg{display:block}
.navheart .navheart-n{font-family:"IBM Plex Mono",monospace;font-size:12px;
  letter-spacing:.02em;line-height:1}

/* love button — icon-only toggle beside the mural title. Outline heart by
   default, fills red when loved. No border/box — it sits next to the H1. */
.lovebtn{display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;background:none;border:none;padding:4px;flex:0 0 auto;
  color:var(--muted);transition:color .15s ease,transform .1s ease}
.lovebtn:hover{color:var(--accent)}
.lovebtn:active{transform:scale(.9)}
.lovebtn svg{display:block;width:30px;height:30px}
.lovebtn .heart-outline{display:block}
.lovebtn .heart-solid{display:none}
.lovebtn.loved{color:var(--accent)}
.lovebtn.loved .heart-outline{display:none}
.lovebtn.loved .heart-solid{display:block}

/* title row: mural H1 on the left, love heart pinned to the right.
   Scoped to .info so it doesn't collide with the homepage's #titlerow. */
.info .titlerow{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:10px}
.info .titlerow h1{margin-bottom:0}
.info .titlerow .titlespacer{flex:1 1 auto}
.info .titlerow .soon{flex:1 1 auto}
@media (prefers-reduced-motion:reduce){.navheart:hover,.lovebtn:active{transform:none}}