/*
* Bearly — a lovely Bear theme
* Version 2.0.1 | 2026-02-11
* Robert Birming | robertbirming.com
*/

/* Palette: Bearly Standard */
:root {
  color-scheme: light dark;

  /* Light mode colors */
  --background: #fafbfc;
  --link:       #3a73c8;
  --text:       #373a3c;

  /* Colors based on text, links, and background */
  --muted:      color-mix(in srgb, var(--text) 60%, var(--background));
  --border:     color-mix(in srgb, var(--link) 20%, var(--background));
  --surface:    color-mix(in srgb, var(--background) 94%, var(--text) 6%);
  
  /* Font sizes */
  --font-xs:    0.85rem;
  --font-s:     0.95rem;
  --font-m:     1.0625rem;
  
  /* Line heights */
  --lh-s:       1.3;
  --lh-m:       1.65;

  /* Shapes */
  --line:       1px solid;
  --radius:     4px;

  /* Spacing */
  --space-xs:   0.5em;
  --space-s:    1em;
  --space-m:    1.2em;
  --space-l:    1.5em;
}

@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;

  /* Dark mode colors */
  --background: #1c2126;
  --link:       #82aee3;
  --text:       #d9d9d8;
  }
}

/* Layout */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  max-width: 66ch;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: var(--font-m);
  line-height: var(--lh-m);
  color: var(--text);
  background: var(--background);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Styles */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  font-weight: 600;
  line-height: var(--lh-s);
  letter-spacing: 0;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-m);
}

ul, ol {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-m);
}

li {
  margin: var(--space-xs) 0;
}

blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  font-style: italic;
  border: var(--line) var(--border);
  border-left: 4px solid var(--link);
  border-radius: var(--radius);
  background: var(--surface);
}

blockquote p {
  margin: 0;
}

hr {
  margin: var(--space-l) 0;
  border: 0;
  border-top: var(--line) var(--border);
}

time {
  font-style: normal;
  font-size: var(--font-s);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-s);
  color: var(--muted);
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

strong {
  font-weight: 600;
  color: var(--text);
}

em {
  font-style: italic;
  color: var(--text);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-l) 0;
  border-radius: var(--radius);
}

pre {
  margin: var(--space-l) 0;
  padding: var(--space-s);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  font-size: var(--font-s);
  overflow-x: auto;
}

code {
  font-family: ui-monospace, monospace;
}

table {
  width: 100%;
  margin: var(--space-l) 0;
  border-collapse: collapse;
  font-size: var(--font-s);
}

th, td {
  padding: var(--space-xs) var(--space-s);
  border: var(--line) var(--border);
}

th {
  background: var(--surface);
  text-align: left;
}

input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs);
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

label {
  display: block;
  margin-bottom: var(--space-xs);
}

button:not(.upvote-button),
input[type="submit"],
input[type="button"] {
  font: inherit;
  color: var(--background);
  background: var(--link);
  border: 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  cursor: pointer;
}

button:not(.upvote-button):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: color-mix(in srgb, var(--link) 90%, var(--text) 10%);
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  margin-bottom: var(--space-l);
  padding-bottom: calc(var(--space-l) * 0.8);
  border-bottom: var(--line) var(--border);
}

header .title {
  color: var(--text);
  text-decoration: none;
  transition: inherit;
}

header a.title h1 {
  margin: 0;
  font-size: var(--font-m);
  line-height: var(--lh-s);
}

header nav {
  margin-left: auto;
}

header nav p {
  margin: 0;
  display: flex;
  gap: var(--space-s);
  font-size: var(--font-s);
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
  }

  header nav {
    margin-left: 0;
  }

  header nav p {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
  }
}

/* Footer */
footer {
  border-top: var(--line) var(--border);
  margin-top: var(--space-l);
  padding: calc(var(--space-l) * 1.2) 0;
  text-align: center;
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--muted);
}

footer span:last-of-type {
  font-size: var(--font-xs);
}

footer span:last-of-type a {
  color: inherit;
}

/* Pages & Posts */
main > h1:first-child {
  margin: 0;
}

:is(.post, .page) main > h1 + p {
  margin: var(--space-xs) 0 var(--space-l);
}

body.post main > h1 + p:has(time) {
  margin: 0 0 var(--space-l);
}

/* Blog list */
ul.blog-posts {
  margin: var(--space-l) 0;
  padding: 0;
  list-style: none;
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

ul.blog-posts li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m) var(--space-s);
  border-bottom: var(--line) var(--border);
}

ul.blog-posts li:last-child {
  padding-bottom: var(--space-xs);
  border-bottom: 0;
}

ul.blog-posts li * {
  margin: 0;
}

ul.blog-posts li a {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-height: var(--lh-s);
  color: inherit;
  text-decoration: none;
  transform: translateX(0);
  transition: transform .18s ease;
}

ul.blog-posts li:hover a,
ul.blog-posts li:focus-within a {
  transform: translateX(6px);
}

ul.blog-posts li a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

ul.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

ul.blog-posts li span time {
  font-size: var(--font-xs);
  line-height: var(--lh-s);
}

@media (max-width: 600px) {
  ul.blog-posts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    padding: var(--space-xs) var(--space-m);
  }

  ul.blog-posts li a {
    order: 1;
    width: 100%;
  }

  ul.blog-posts li span {
    order: 2;
    margin-left: 0;
    text-align: left;
  }
}

/* Optional: Upvote button */ /* Continue optimizing */
:is(.post, .page) .upvote-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .25em;
  padding: .15em .3em;
  border: 0;
  background: transparent !important;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

:is(.post, .page) .upvote-button svg {
  display: none !important;
}

:is(.post, .page) .upvote-button::before {
  content: "♡";
  font-size: 1.5em;
  line-height: 1;
  color: var(--link);
}

:is(.post, .page) .upvote-button .upvote-count {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--font-s);
  color: var(--text);
  opacity: .7;
  white-space: nowrap;
  transform: translateY(1px);
}

:is(.post, .page) .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before {
  content: "♥";
}

:is(.post, .page) .upvote-button[disabled] {
  cursor: default;
}

/* Optional: Guestbooks.meadow.cafe */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-m) 0;
}

#guestbooks___guestbook-messages-container > div {
  margin: var(--space-m) 0;
  padding: var(--space-m);
  font-size: var(--font-s);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  background: transparent;
}

#guestbooks___guestbook-messages-container p {
  margin-bottom: var(--space-xs);
}

#guestbooks___guestbook-made-with {
  color: var(--muted);
}

/* Post Meta: Tags */
p.tags {
  margin-block: var(--space-l);
  text-align: center;
}

p.tags a {
  color: var(--muted); 
  font-size: var(--font-s); 
  text-decoration: none;
  padding: 0.3em 0.6em;
  background: var(--surface);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

p.tags a:hover {
  color: var(--background);
  background: var(--link);
}