:root{
  --page-bg: #12161b;
  --page-bg-2: #1b2229;
  --paper: #eef1f4;
  --paper-2: #e2e7ec;
  --ink: #23282d;
  --ink-soft: #5c6570;
  --ink-body: #3a352c;
  --gold: #4a80b0;
  --gold-deep: #2f5d84;
  --pine: #435a6b;
  --line: #ccd3da;
  --radius: 3px;
  --toggle-bg: linear-gradient(180deg, #333c44 0%, #1b2027 100%);
  --toggle-fg: #e8e1cf;
}

[data-theme="dark"]{
  --page-bg: #05070a;
  --page-bg-2: #0c1015;
  --paper: #1a1f26;
  --paper-2: #12161b;
  --ink: #e8e6e0;
  --ink-soft: #9aa3ab;
  --ink-body: #c7c3ba;
  --gold: #6fa2d1;
  --gold-deep: #8fbce6;
  --pine: #5c7c92;
  --line: #2c333c;
  --toggle-bg: linear-gradient(180deg, #2a323a 0%, #10141a 100%);
  --toggle-fg: #f2ede0;
}

.frame, body, .widget li, .tagcloud span, nav.mainnav a{
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at top, var(--page-bg-2), var(--page-bg) 70%);
  background-attachment: fixed;
  min-height:100vh;
  padding: 28px 14px 60px;
}

h1,h2,h3{ font-family:'Bitter', serif; margin:0 0 .4em; color:var(--ink); }

a{ color:var(--gold-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

img{ max-width:100%; height:auto; display:block; }

/* ---- Ribbon ---- */
.ribbon{
  max-width:1040px;
  margin:0 auto 18px;
  text-align:center;
  font-size:.78rem;
  letter-spacing:.04em;
  color:#a9b3bc;
  text-transform:uppercase;
}

/* ---- Boxed frame ---- */
.frame{
  max-width:1040px;
  margin:0 auto;
  background:var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  overflow:hidden;
}

header.masthead{
  padding:34px 40px 26px;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  position:relative;
  color:#f2ede0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #262e35 0%, #10141a 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
}

.masthead .brand{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  text-decoration:none;
}
.masthead .brand:hover .brand-mark,
.masthead .brand:hover h1{
  text-decoration:underline;
}

.masthead .brand-mark{
  font-family:'Bitter', serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.04em;
  color:#f7f1de;
  background: linear-gradient(180deg, #547a58 0%, var(--pine) 60%, #2f4732 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4);
  padding:5px 9px;
  border-radius: 4px;
  white-space:nowrap;
}

.masthead h1{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing:-.01em;
  color:#f7f1de;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.masthead .tag{
  font-size:.92rem;
  color:#a6b0ba;
  max-width:34ch;
  margin:.3em 0 0;
}
.masthead .badge{
  font-family:'Bitter', serif;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f7f1de;
  background: linear-gradient(180deg, #547a58 0%, var(--pine) 60%, #2f4732 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4);
  padding:6px 11px;
  border-radius: 12px;
  white-space:nowrap;
}

nav.mainnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  background: linear-gradient(180deg, #333c44 0%, #1b2027 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5);
}
nav.mainnav .theme-toggle{
  margin:8px 14px 8px auto;
}
nav.mainnav a{
  color:#e8e1cf;
  padding:13px 20px;
  font-size:.86rem;
  letter-spacing:.03em;
  border-right:1px solid rgba(0,0,0,.35);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.05);
}
nav.mainnav a:hover{
  background: linear-gradient(180deg, rgba(74,128,176,.35), rgba(74,128,176,0));
  text-decoration:none;
}
nav.mainnav a.current{
  background: linear-gradient(180deg, rgba(74,128,176,.35), rgba(74,128,176,0));
  color:#fff;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  border:1px solid rgba(255,255,255,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.3);
  padding:7px 13px;
  font-size:.78rem;
  font-family:'Inter', sans-serif;
  letter-spacing:.03em;
  border-radius: 999px;
  cursor:pointer;
}
.theme-toggle:hover{ filter:brightness(1.15); }
.theme-toggle .icon{ font-size:.9rem; line-height:1; }
.theme-toggle .icon-dark{ display:inline; }
.theme-toggle .icon-light{ display:none; }
[data-theme="dark"] .theme-toggle .icon-dark{ display:none; }
[data-theme="dark"] .theme-toggle .icon-light{ display:inline; }
.theme-toggle .label-dark{ display:inline; }
.theme-toggle .label-light{ display:none; }
[data-theme="dark"] .theme-toggle .label-dark{ display:none; }
[data-theme="dark"] .theme-toggle .label-light{ display:inline; }

.layout{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:0;
}
@media (max-width: 760px){
  .layout{ grid-template-columns: 1fr; }
  header.masthead{ padding:28px 22px 22px; }
}

main{
  padding:36px 40px 46px;
  border-right:1px solid var(--line);
}
@media (max-width:760px){
  main{ border-right:none; border-bottom:1px solid var(--line); padding:28px 22px; }
}

article.post{
  margin-bottom:42px;
  padding-bottom:38px;
  border-bottom:1px dashed var(--line);
}
article.post:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }

.post-meta{
  font-size:.78rem;
  color: var(--gold-deep);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}
.post h2{
  font-size:1.5rem;
  margin-bottom:.3em;
}
.post h2 a{ color:var(--ink); }
.post p{
  line-height:1.68;
  color:var(--ink-body);
  margin:.7em 0;
}
.post .continuare{
  font-size:.86rem;
  font-weight:600;
}

.post-thumb{
  float:left;
  width:120px;
  height:120px;
  object-fit:cover;
  margin:.2em 1.1em .6em 0;
  border:1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width:480px){
  .post-thumb{ float:none; width:100%; height:auto; max-height:220px; margin:0 0 .8em; }
}

aside{
  padding:36px 28px 46px;
  background: var(--paper-2);
}
@media (max-width:760px){
  aside{ padding:26px 22px 34px; }
}

.widget{ margin-bottom:34px; }
.widget h2, .widget h3{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#f7f1de;
  background: linear-gradient(180deg, #547a58 0%, var(--pine) 55%, #2f4732 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.25);
  border:none;
  padding:9px 12px;
  border-radius: 4px;
  margin-bottom:14px;
}
.widget p{ font-size:.9rem; color:var(--ink-soft); line-height:1.6; margin:0; }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{
  padding:7px 0;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
}
.widget li:last-child{ border-bottom:none; }
.widget li a{ color:var(--ink); }
.widget li .count{ color:var(--ink-soft); font-size:.82rem; }

.tagcloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud span{
  font-size:.78rem;
  background: var(--paper-2);
  border:1px solid var(--line);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  color:var(--ink-soft);
  padding:5px 10px;
  border-radius: 10px;
}

footer.sitefoot{
  background:#181c22;
  color:#a89f8a;
  text-align:center;
  font-size:.8rem;
  padding:20px;
}
footer.sitefoot a{ color:#e8e1cf; text-decoration:underline; }

/* ---- single post page ---- */

.breadcrumb{
  display:inline-block;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-bottom:1.1em;
}
.breadcrumb:hover{ color:var(--gold-deep); }

.post-body h1{
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height:1.25;
  margin:.2em 0 .5em;
}

.post-hero{
  margin:1.2em 0 1.6em;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}

.episode-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
  margin:0 0 1.4em;
  padding:14px 16px;
  background: var(--paper-2);
  border:1px solid var(--line);
  border-radius: var(--radius);
}
.episode-nav a{
  font-family:'Inter', sans-serif;
  font-size:.78rem;
  color:var(--gold-deep);
  background: var(--paper);
  border:1px solid var(--line);
  padding:5px 11px;
  border-radius: 999px;
  text-decoration:none;
}
.episode-nav a:hover, .episode-nav a:focus-visible{
  background: var(--gold-deep);
  color:#fff;
  border-color:var(--gold-deep);
}

.post-body p{
  line-height:1.68;
  color:var(--ink-body);
  margin:0 0 1.1em;
}
.post-body p br{ content:""; display:block; margin-top:.55em; }
.post-body p a:not(.cta){ text-decoration:underline; text-underline-offset:.15em; }
.post-body strong{ color:var(--ink); }
.post-body .author-line{
  font-size:.85rem;
  color:var(--ink-soft);
  margin-bottom:1.4em;
}
.post-body .episode{
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--gold-deep);
  margin:2em 0 .6em;
  padding-top:1.2em;
  border-top:1px dashed var(--line);
}
.post-body .episode:first-of-type{ border-top:none; padding-top:0; }
.post-body ul, .post-body ol{ margin:0 0 1.2em; padding-left:1.3em; }
.post-body li{ margin-bottom:.4em; }
.post-body .cta{
  display:inline-block;
  margin-top:.3em;
  font-weight:600;
  font-size:.9rem;
  border:1px solid var(--gold-deep);
  border-radius: var(--radius);
  padding:.5rem .9rem;
}
.post-body .cta:hover{ background:var(--gold-deep); color:#fff; text-decoration:none; }

.post-nav{
  margin-top:2.4rem;
  padding-top:1.3rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.86rem;
}
.post-nav .dir{ display:block; color:var(--ink-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }
.post-nav .next{ text-align:right; margin-left:auto; }

/* --- Widget comentarii (D1) --- */
/* Stiluri pentru widget-ul de comentarii — adaugă-le în style.css.
   Folosesc valori simple; ajustează-le după paleta site-ului tău. */

.comments-status,
.comments-empty {
  opacity: 0.7;
  font-style: italic;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0 2rem;
}

.comment {
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.comment-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.comment-date {
  opacity: 0.6;
}

.comments-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 480px;
}

.comments-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.comments-form input[type="text"],
.comments-form textarea {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  font: inherit;
  background: transparent;
  color: inherit;
}

.comments-form textarea {
  min-height: 90px;
  resize: vertical;
}

.comments-form button {
  align-self: flex-start;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font: inherit;
}

.comments-form-status {
  min-height: 1.2em;
  font-size: 0.9rem;
  opacity: 0.8;
}