/* ==========================================================================
   Custom CSS — Typography + Micro.blog conversation + Reply box
   Uses Atkinson Hyperlegible for post/page content and comments.
   Paste this file as /custom.css (load it last).
   ========================================================================== */

/* Import variable fonts */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

/* Reusable stacks + radii */
:root {
  --post-font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto,
               "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --mono-font: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 12px;
}

/* Global niceties */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* ==========================================================================
   Post + Page typography (match post body across About page, etc.)
   ========================================================================== */

/* Container-level legibility helpers (no font set here) */
.post,
.page {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Use Atkinson Next for body content in posts and pages */
.post .e-content,
.page .page-content {
  font-family: var(--post-font);
}

/* Keep top-level/site titles on the theme's root font */
.page-title,
.page-title a,
.p-name {
  font-family: inherit;
}

/* Explicitly keep page titles on theme font, even inside h-entry */
h1.page-title,
.h-entry h1.page-title,
.h-entry .page-title {
  font-family: "Bungee", cursive !important;
}

/* Mono face for code-related elements within body content */
.post .e-content code,
.post .e-content pre,
.post .e-content kbd,
.post .e-content samp,
.page .page-content code,
.page .page-content pre,
.page .page-content kbd,
.page .page-content samp {
  font-family: var(--mono-font);
  font-feature-settings: "liga" 0, "calt" 0; /* disable ligatures in code */
}

/* Ensure nested spans in code blocks inherit mono font */
.post .e-content pre *,
.post .e-content code *,
.page .page-content pre *,
.page .page-content code * {
  font-family: inherit;
}

/* Variable font weights (scoped to body content so titles aren't affected) */
.post .e-content pre,
.post .e-content code,
.page .page-content pre,
.page .page-content code { font-weight: 450; }

.post .e-content h1,
.post .e-content h2,
.post .e-content h3,
.page .page-content h1,
.page .page-content h2,
.page .page-content h3 { font-weight: 800; }

.post .e-content h4,
.post .e-content h5,
.post .e-content h6,
.page .page-content h4,
.page .page-content h5,
.page .page-content h6 { font-weight: 600; }

.post .e-content p,
.post .e-content li,
.post .e-content time,
.post .e-content a,
.page .page-content p,
.page .page-content li,
.page .page-content time,
.page .page-content a { font-weight: 400; }

/* Post date: use Atkinson and heavier weight */
.post .post-date,
.post time.dt-published,
.post .dt-published,
.post a.post-date.u-url {
  font-family: var(--post-font);
  font-weight: 800;
}

/* Lead line */
.lead {
  font-family: var(--post-font);
  font-weight: 700; /* try 600–800 to taste */
}
.lead a { font-weight: inherit; }

/* ==========================================================================
   Microformats (archive/list items) — match post body typography
   ========================================================================== */
.h-entry,
.h-entry :not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--post-font);
  line-height: 1.6;
}

/* Keep code in summaries mono */
.h-entry code,
.h-entry pre,
.h-entry kbd,
.h-entry samp {
  font-family: var(--mono-font);
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Weights to mirror .post .e-content */
.h-entry .p-summary,
.h-entry .p-name,
.h-entry a,
.h-entry time {
  font-weight: 400;
}

/* Heavier date to match your post-date treatment */
.h-entry .dt-published { font-weight: 800; }

/* Ensure nested spans in code blocks inherit mono */
.h-entry pre *,
.h-entry code * { font-family: inherit; }

/* ==========================================================================
   Micro.blog conversation — keep theme styling, just adjust fonts
   ========================================================================== */

/* Conversation text uses Atkinson but keep theme colors/styling */
.microblog_conversation,
.microblog_text,
.microblog_text p {
  font-family: var(--post-font);
}

/* Keep existing h-entry/conversation styling intact */

/* ==========================================================================
   Reply form — match theme's conversation styling
   ========================================================================== */

/* Style the reply form container to match theme */
.microblog_reply_form,
.microblog_reply {
  padding: 3px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  border: 3px solid var(--border-color);
  box-shadow: 3px 3px var(--border-shadow-color);
  border-radius: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: var(--conversation-text-color);
  background-color: var(--conversation-bg-color);
}

/* Sign-in message styling to match theme buttons */
.microblog_reply_signin {
  display: block;
  line-height: 1.75;
  color: var(--conversation-user-text-color);
  background-color: var(--conversation-user-bg-color);
  margin: 5px;
  padding: 3px 3px 3px 10px;
  border: 3px solid var(--border-color);
  box-shadow: 3px 3px var(--border-shadow-color);
  border-radius: 3px;
  font-size: 0.8rem;
}

/* Sign-in links match nav item styling */
.microblog_reply_signin a {
  display: inline-block;
  color: var(--nav-text-color);
  background-color: var(--nav-bg-color);
  margin: 3px;
  padding: 3px 8px;
  border: 3px solid var(--border-color);
  box-shadow: 3px 3px var(--border-shadow-color);
  border-radius: 3px;
  font-family: "Bungee", cursive;
  font-size: 0.7rem;
  text-decoration: none;
}

.microblog_reply_signin a:hover,
.microblog_reply_signin a:focus {
  color: var(--nav-text-hover-color);
  background-color: var(--nav-bg-hover-color);
  text-decoration: none;
}

/* Textarea styling */
.microblog_reply_form textarea,
.microblog_reply textarea {
  width: calc(100% - 10px);
  min-height: 8rem;
  margin: 5px;
  padding: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--conversation-text-color);
  background-color: var(--content-bg-color);
  border: 3px solid var(--border-color);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
  border-radius: 3px;
  resize: vertical;
}

.microblog_reply_form textarea:focus,
.microblog_reply textarea:focus {
  outline: none;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1), 0 0 0 2px var(--nav-bg-color);
}

/* Submit button matches theme nav/button styling */
.microblog_reply_button {
  text-align: right;
  padding-right: 5px;
}

.microblog_reply_button input[type="submit"] {
  color: var(--nav-text-color);
  background-color: var(--nav-bg-color);
  padding: 5px 15px;
  border: 3px solid var(--border-color);
  box-shadow: 3px 3px var(--border-shadow-color);
  border-radius: 3px;
  font-family: "Bungee", cursive;
  font-size: 0.8rem;
  cursor: pointer;
}

.microblog_reply_button input[type="submit"]:hover,
.microblog_reply_button input[type="submit"]:focus {
  color: var(--nav-text-hover-color);
  background-color: var(--nav-bg-hover-color);
}

.microblog_reply_button input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}