/* claypier.com — styles that the WordPress theme carried inline (header.php, home.php, sns-share.php)
   or that came from plugins (chat-bubble-block), plus the few additions of the static site. */

/* --- page background: WordPress printed a white body background in its inline global styles; without it
   the page is transparent (visible in embedded browsers with a dark canvas) --- */
html { background-color: #fff; color-scheme: light; }
html.dark { background-color: #111827; color-scheme: dark; }

/* --- header (was an inline <style> in header.php) --- */
.nav-group:hover > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown { display: block; }
.nav-dropdown > ul { min-width: 240px; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .nav-tablet-hidden { display: none !important; }
  .nav-tablet-visible { display: flex !important; }
  #drawer-navigation.nav-tablet-drawer { display: block !important; }
}
body.has-lang-bar > header { margin-top: 52px; }

/* --- post lists --- */
@media (max-width: 375px) { .top-card-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* --- share buttons (sns-share.php) --- */
.st0, .fb1, .th1, .ln0 { fill: #fff; }
.fb0 { fill: none; }
.th0 { isolation: isolate; opacity: .7; }

/* --- anchors below the fixed header; table of contents scrolls smoothly --- */
html { scroll-behavior: smooth; }
#post_main h2 > span[id], #post_main h3 > span[id] { scroll-margin-top: 94px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#toc_container ul ul { margin-left: 1.5em; }

/* --- ChatBubble block (plugin chat-bubble-block; the importer reduced its markup to these classes) --- */
.chat-bubble-block { margin-bottom: 1rem; }
.chat-bubble-block .chat-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; padding: 1.25rem 0; }
@media (min-width: 1024px) { .chat-bubble-block .chat-row { padding-left: 1rem; padding-right: 1rem; } }
.chat-bubble-block.chat-right .chat-row { flex-direction: row-reverse; }
#post_main .chat-bubble-block .chat-icon { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; flex-shrink: 0; margin: 0; max-width: none; }
.chat-bubble-block .chat-bubble-content { position: relative; max-width: 20rem; padding: .625rem 1rem; border-radius: 1rem; background: #f3f4f6; color: #f3f4f6; }
@media (min-width: 640px) { .chat-bubble-block .chat-bubble-content { max-width: 24rem; } }
@media (min-width: 768px) { .chat-bubble-block .chat-bubble-content { max-width: 32rem; } }
#post_main .chat-bubble-block .chat-bubble-content p { color: #1f2937; word-break: break-all; margin: 0; padding: 0; }
.chat-bubble-block.chat-left .chat-bubble-content { border-top-left-radius: .125rem; }
.chat-bubble-block.chat-right .chat-bubble-content { border-top-right-radius: .125rem; }
.chat-bubble-block .chat-bubble-content::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
.chat-bubble-block.chat-left .chat-bubble-content::before { left: -8px; border-width: 0 8px 8px 0; border-color: transparent currentcolor transparent transparent; }
.chat-bubble-block.chat-right .chat-bubble-content::before { right: -8px; border-width: 0 0 8px 8px; border-color: transparent transparent transparent currentcolor; }
.chat-bubble-block.chat-sky .chat-bubble-content { background: #e0f2fe; color: #e0f2fe; }
.chat-bubble-block.chat-gray .chat-bubble-content { background: #f3f4f6; color: #f3f4f6; }
.chat-bubble-block.chat-green .chat-bubble-content { background: #e2f9ea; color: #e2f9ea; }
.chat-bubble-block.chat-red .chat-bubble-content { background: #fee2e2; color: #fee2e2; }
.chat-bubble-block.chat-orange .chat-bubble-content { background: #ffeeda; color: #ffeeda; }
.chat-bubble-block.chat-purple .chat-bubble-content { background: #f4ebfe; color: #f4ebfe; }
.chat-bubble-block.chat-yellow .chat-bubble-content { background: #fcfce2; color: #fcfce2; }
.dark .chat-bubble-block .chat-bubble-content { background: #374151; color: #374151; }
.dark #post_main .chat-bubble-block .chat-bubble-content p { color: #e5e7eb; }

/* --- embeds --- */
#post_main .wp-block-embed__wrapper iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
#post_main blockquote.twitter-tweet { border-left: 4px solid #cbd5e1; padding: .5rem 1rem; margin: 1.5rem 0; background: #f8fafc; border-radius: .375rem; }
.dark #post_main blockquote.twitter-tweet { background: #1f2937; border-left-color: #4b5563; }
#post_main .amazon-product { margin: 1rem 0; }

/* --- tags under an article (the theme showed categories only; tags make the tag lists reachable) --- */
.post-tags { list-style: none; padding: 0; }
#post_main + .post-tags a, .post-tags a { text-decoration: none; }

/* --- search page --- */
.search-page-form input[type="search"] { min-width: 12rem; }
.search-card-excerpt mark { background: #fef08a; color: inherit; }
.dark .search-card-excerpt mark { background: #854d0e; color: #fff; }
.dark .search-page-form select, .dark .search-page-form input[type="search"] { background: #1f2937; color: #e5e7eb; border-color: #4b5563; }