/* Nanoconda Blog — Material-inspired Light Theme
   Focus: readability, conservative styling, subtle Nanoconda accents
   Brand accent: #1BC492 (used sparingly); link color muted to #148A6C
*/

/* === 0) Fonts ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Roboto:wght@400;500;600;700&display=swap');

/* === 1) Tokens ========================================================= */

 :root {
    --bg1:         #0E141B;
    --surface:    #111827;
    --surface-2:  #0F172A;
    --text:       #E5E7EB;
    --text-muted: #a4A3B8;
    --heading:    #F1F5F9;
    --border:     #85a0f0;
    --link:       #7BDABF;    /* lighter green for dark backgrounds */
    --link-hover: #54C7A7;
    --primary:    #2FD6A6;
    --primary-600:#27BD92;
    --primary-700:#1EA27E;
    --md-hue: 225deg;
    --md-default-bg-color: hsla(var(--md-hue), 15%, 14%, 1);
    --bg: hsla(var(--md-hue), 15%, 14%, 1);
    --header-color: hsla(var(--md-hue), 15%, 9%, 1);

    --md-text-font: "Roboto";
    --md-code-font: "Roboto Mono";
    --md-text-font-family: var(--md-text-font, _), -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

    --elev-1: 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.35);
    --elev-2: 0 6px 14px rgba(0,0,0,0.55), 0 3px 6px rgba(0,0,0,0.40);
    --elev-3: 0 14px 30px rgba(0,0,0,0.6),  0 6px 14px rgba(0,0,0,0.45);

    --code-bg:   #0B1220;
    --code-text: #D1D5DB;
    --kbd-bg:    #1F2937;
    --kbd-text:  #E5E7EB;
  }

/* === 2) Base ========================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
a { color: var(--link); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--link-hover); text-decoration: underline; }

.containerN {
  width: 1290px;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 8px;
  padding-right: 8px;
  width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* Typography scale (Material-ish) */
h1, h2, h3, h4, h5 {
  color: var(--heading);
  margin: 0 0 12px;
  line-height: 1.25;
  font-weight: 600;
}
h1 { font-size: 2.0rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; color: var(--text); }

/* Muted text */
.text-muted { color: var(--text-muted); }

/* Dividers */
hr { border: 0; border-top: 1px solid var(--divider); margin: 24px 0; }

/* Blockquotes (subtle, readable) */
blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid color-mix(in srgb, var(--brand) 40%, #9CA3AF);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* === 3) App Chrome ==================================================== */
header#header, .site-header, .navbar {
  background: var(--surface);
  border-bottom: 0px solid var(--border);
  box-shadow: var(--elev-1);
  position: sticky; top: 0; z-index: 50;
}
header#header .container, .site-header .container, .navbar .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
}
.navbar
{
	height: 58px;
}
.site-title a, .navbar-brand a { color: var(--heading); font-weight: 700; text-decoration: none; }

.nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav a {
  color: var(--text); opacity: .9;
  padding: 8px 10px; border-radius: 8px;
}
.nav a:hover { opacity: 1; background: var(--surface-2); }

footer#footer, .site-footer {
  margin-top: 40px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.site-footer .container { padding: 24px; }

/* === 4) Cards / Surfaces ============================================= */
.card, .widget, .panel, .post-card {
  background: var(--surface);
  background: transparent;

  border-top: 1px solid  #CBD5E1 !important;
  border-radius: 2px !important;
  padding: 10px;
  box-shadow: var(--elev-1);
}
.card:hover, .widget:hover, .post-card:hover {
  border-color: #CBD5E1;
}
.card .title a, .post-card .title a { color: var(--heading); text-decoration: none; }
.card .meta, .post-card .meta { color: var(--text-muted); font-size: .92rem; }

/* Grid for post lists */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Optional subtle brand stripe (conservative) */
.card--accent { border-top: 3px solid color-mix(in srgb, var(--brand) 65%, #10B981); }

/* === 5) Buttons / Chips / Pagination ================================= */
.btn, button, input[type=submit] {
  appearance: none; border: 0;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 20px;
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .05s ease;
}
.btn:hover, button:hover, input[type=submit]:hover { background: #17b083; box-shadow: var(--elev-2); }
.btn:active { transform: translateY(1px); }

.btn--outline {
  background: transparent; color: var(--link);
  border: 2px solid color-mix(in srgb, var(--link) 70%, #94A3B8);
}
.btn--outline:hover { background: color-mix(in srgb, var(--link) 8%, #FFFFFF); }

.badge, .tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: .8rem; font-weight: 600;
  color: var(--heading);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.pagination a:hover { border-color: #CBD5E1; box-shadow: var(--elev-1); }

/* === 6) Forms / Search =============================================== */
input[type=text], input[type=email], input[type=password], input[type=search],
textarea, select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder { color: #94A3B8; }
input:focus, textarea:focus, select:focus {
  border-color: color-mix(in srgb, var(--link) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

.search-box { position: relative; }
.search-box input { padding-left: 40px; }
.search-box .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  opacity: .55;
}

/* === 7) Tables ======================================================== */
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
thead th {
  text-align: left; font-weight: 600; color: var(--heading);
  background: var(--surface-2);
}

/* === 8) Code / Pre / KBD ============================================= */
code, pre, kbd {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow: auto;
  box-shadow: var(--elev-1);
}
code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
pre code { background: transparent; padding: 0; }
kbd {
  background: #EEF2F7; color: #0F172A;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; font-size: .85em;
}

/* === 9) Post / Page common hooks  ============================ */
.post-title a, .page-title a { color: var(--heading); text-decoration: none; }
.post-meta, .page-meta   { color: var(--text-muted); font-size: .92rem; }
.page-content img, .post-content img { border-radius: var(--radius-md); }

/* === 10) Utilities ==================================================== */
.m-0{margin:0!important}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.p-1{padding:8px}.p-2{padding:16px}.p-3{padding:24px}
.rounded{border-radius:var(--radius-md)}
.shadow-1{box-shadow:var(--elev-1)}.shadow-2{box-shadow:var(--elev-2)}
.max-w-prose{max-width:72ch}

/* === 11) Focus visibility (a11y) ===================================== */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 35%, #90CAF9);
  outline-offset: 2px;
  border-radius: 6px;
}

/* === BLOG GRID LAYOUT (3 cards per row) === */
.blog-grid {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

/* Each card keeps size, wraps instead of shrinking */
.blog-grid .card,
.blog-grid .post-card,
.blog-grid .article {
  width: minmax(320px, 1fr);
  height: 420px;
  box-sizing: border-box;
}

.card-subtitle
{
	font-size: 1.0rem;
}

.blog-grid img {
  width: 100%;
  height: 220px;          /* Square-ish style */
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

/* Responsive layout */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

.blog-grid .card,
.card,
.post-card,
.article {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text) !important;
}

/* Prevent long words or URLs from breaking layout */
.card p,
.card .content,
.card .description,
.card .text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--text) !important;
}

.row
{
	margin-left: 0px;
	margin-right: 0px;
}
.plugin-categories
{
	margin-top: 20px;
	psdding-top: 20px;
}