/* Ukkometa.fi shared subpage chrome: blog hub and posts, SEO Intel product and
   setup pages, privacy policy, examples. Loaded after each page's own inline
   <style>, so the token overrides below win without touching page styles.

   The header and footer use um- prefixed classes on purpose: every subpage
   has its own .nav-inner / .footer-inner rules, and prefixed names cannot
   collide with them. Homepages use /assets/site.css instead. */

/* Same tokens as /assets/site.css. The old greys and gold were under 4.5:1
   for small text on the off-white backgrounds. */
:root {
  --muted:  #706d66;
  --subtle: #5a5955;
  --accent: #7f6628;
}

/* ── Header ───────────────────────────────────────────────────────── */
.um-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 248, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e3e1da;
  font-family: 'Inter', sans-serif;
}
.um-head__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.um-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: #1a1a1a;
  text-decoration: none;
  white-space: nowrap;
}
.um-logo span { color: #7f6628; }
.um-head__nav { display: flex; gap: 1.75rem; margin-inline: auto; }
.um-head__nav a {
  font-size: .875rem;
  color: #5a5955;
  text-decoration: none;
  transition: color .2s;
}
.um-head__nav a:hover, .um-head__nav a[aria-current] { color: #1a1a1a; }
.um-head__right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.um-head__nav + .um-head__right { margin-left: 0; }
.um-lang {
  display: flex;
  border: 1px solid #e3e1da;
  border-radius: 100px;
  padding: 3px;
  background: #fff;
}
.um-lang__btn {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .3rem .65rem;
  border-radius: 100px;
  color: #5a5955;
  text-decoration: none;
  line-height: 1;
}
.um-lang__btn.is-active { background: #1a1a1a; color: #fafaf8; }
.um-lang__btn:not(.is-active):hover { color: #1a1a1a; }
.um-head__cta {
  font-size: .85rem;
  font-weight: 600;
  color: #1a1a1a;
  border: 1px solid #e3e1da;
  background: #fff;
  padding: .55rem 1rem;
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s;
}
.um-head__cta:hover { border-color: #5a5955; }
@media (max-width: 900px) {
  .um-head__nav { display: none; }
}
@media (max-width: 480px) {
  .um-head__cta { display: none; }
}

/* ── Footer ───────────────────────────────────────────────────────── */
.um-foot {
  margin-top: 4rem;
  border-top: 1px solid #e3e1da;
  font-family: 'Inter', sans-serif;
  color: #5a5955;
}
.um-foot__inner, .um-foot__bottom {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.um-foot__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: 2.75rem 2rem;
}
.um-foot__brand { display: flex; flex-direction: column; gap: .6rem; }
.um-foot__tag { font-size: .85rem; color: #5a5955; max-width: 32ch; line-height: 1.55; margin: 0; }
.um-foot__facts { font-size: .8rem; color: #5a5955; line-height: 1.7; margin: 0; }
.um-foot__facts a { color: #1a1a1a; text-decoration: none; border-bottom: 1px solid #e3e1da; }
.um-foot__facts a:hover { border-color: #1a1a1a; }
.um-foot__col { display: flex; flex-direction: column; gap: .45rem; }
.um-foot__label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #706d66;
  margin: 0 0 .25rem;
}
.um-foot__col a { font-size: .85rem; color: #5a5955; text-decoration: none; width: fit-content; transition: color .2s; }
.um-foot__col a:hover { color: #1a1a1a; }
.um-foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.25rem 2rem;
  border-top: 1px solid #e3e1da;
  font-size: .78rem;
  color: #706d66;
}
.um-foot__bottom > span { margin: 0; }
.um-foot__social { display: flex; gap: 1.1rem; align-items: center; }
.um-foot__social a { color: #706d66; display: inline-flex; transition: color .2s; }
.um-foot__social a:hover { color: #1a1a1a; }
.um-foot__social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
@media (max-width: 760px) {
  .um-foot__inner { grid-template-columns: 1fr 1fr; }
  .um-foot__brand { grid-column: 1 / -1; }
}

/* ── Blog hub: separate cards instead of a grid whose background showed
   through as an empty grey tile next to a single post ──────────────── */
.blog-listing-grid {
  gap: 1.25rem;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.blog-post-card { border: 1px solid #e3e1da; border-radius: 2px; }
.blog-post-card:hover { border-color: #5a5955; }

/* Pages style the bare footer element; neutralise that for the shared footer */
footer.um-foot { padding: 0; margin-top: 4rem; border-top: 1px solid #e3e1da; color: #5a5955; font-size: 1rem; text-align: left; }

/* Archived posts reserved 88px at the top for a header they never had */
.um-head + main.wrap { padding-top: 3rem; }

/* Privacy policy: "Tietosuojaseloste" in Syne 800 overflowed a 390 px screen */
.legal-title { font-size: clamp(1.25rem, 6.4vw, 3rem) !important; }

/* SEO Intel product nav on phones: logo, SEO Intel pill, language and the
   buy button did not fit in 390 px and the button ran off the edge. The pill
   only repeats links that are on the page, so it goes first. */
@media (max-width: 480px) {
  nav#nav .nav-right:has(.lemonsqueezy-button) .nav-dropdown { display: none; }
  nav#nav .nav-right { gap: .5rem; }
}

/* ── Phones: nothing scrolls sideways ───────────────────────────────
   These were pre-existing overflows found at 390 px: an inline two-column
   grid on the SEO Intel page, the setup guide's environment table, and
   wide tables in blog posts. */
@media (max-width: 700px) {
  #agent-harness div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .guide-main { min-width: 0; }
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}