/*
Theme Name: Duy Bùi Blog
Theme URI: https://duybui.dev
Author: Duy Bùi
Author URI: https://duybui.dev
Description: Clean, light blog theme in blue tone. Topics: programming, startup, tech. Built with Tailwind CDN — zero build step.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duybui
Tags: blog, one-column, custom-menu, featured-images, translation-ready, blue, clean, minimalist
*/

/* Base */
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Hero background grid */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}

.fade-up { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.show { opacity: 1; transform: translateY(0); }

/* Reading progress bar */
#progress { height: 3px; background: #2563eb; width: 0%; position: fixed; top: 0; left: 0; z-index: 60; transition: width 0.1s; }

/* Article typography — applied to the_content output */
.prose-article h2 { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin-top: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.01em; }
.prose-article h3 { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose-article p { font-size: 1.0625rem; line-height: 1.8; color: #334155; margin-bottom: 1.25rem; }
.prose-article ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose-article ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose-article li { font-size: 1.0625rem; line-height: 1.8; color: #334155; margin-bottom: 0.5rem; }
.prose-article a { color: #2563eb; text-decoration: underline; text-underline-offset: 3px; }
.prose-article blockquote { border-left: 4px solid #2563eb; padding: 0.5rem 1.5rem; margin: 1.5rem 0; font-style: italic; color: #475569; background: #eff6ff; border-radius: 0 0.5rem 0.5rem 0; }
.prose-article code:not(pre code) { background: #eff6ff; color: #1d4ed8; padding: 0.15rem 0.4rem; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.prose-article pre { background: #0f172a; color: #e2e8f0; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.9rem; line-height: 1.6; }
.prose-article pre code { font-family: 'JetBrains Mono', monospace; }
.prose-article strong { color: #0f172a; font-weight: 700; }
.prose-article img { border-radius: 0.75rem; margin: 1.5rem 0; }
.prose-article figure { margin: 1.5rem 0; }
.prose-article figcaption { font-size: 0.9rem; color: #64748b; text-align: center; margin-top: 0.5rem; }

/* Drop cap on first paragraph of the article */
.prose-article > p:first-of-type::first-letter {
  font-size: 3.75rem; font-weight: 800; color: #2563eb;
  float: left; line-height: 1; margin: 0.25rem 0.75rem 0 0;
}

/* Line clamp helper */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* WP core required — alignment & caption */
.alignleft { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { max-width: 100%; }
.alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.9rem; color: #64748b; text-align: center; margin-top: 0.5rem; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important; }
.sticky { display: block; }
.gallery-caption { display: block; }
.bypostauthor { display: block; }