/* (same CSS as before) */
:root{
  --bg:#fff9fb;
  --card:#ffffff;
  --ink:#2c2c2c;
  --muted:#6b6b6b;
  --accent:#e78fb3;
  --accent-2:#f5c6d8;
  --link:#c3618a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Georgia", "Times New Roman", serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--accent-2) 0%, transparent 70%),
    radial-gradient(1000px 600px at 110% 10%, #fde2ea 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  line-height:1.6;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:24px}
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0;
}
.brand{font-weight:700; letter-spacing:.5px; font-size:22px}
.nav a{margin-left:16px; font-size:14px; opacity:.9}
.hero{
  padding:32px 20px;
  border-radius:20px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.7));
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  position:relative;
  overflow:hidden;
}
.hero:before, .hero:after{
  content:"";
  position:absolute;
  width:180px;height:180px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 60%);
  filter:blur(30px); opacity:.15;
  border-radius:50%;
}
.hero:before{top:-60px; left:-60px}
.hero:after{bottom:-60px; right:-60px}
h1, h2, h3{line-height:1.2; margin:0 0 12px}
h1{font-size:36px}
.subtitle{color:var(--muted); margin-bottom:8px}
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px; margin-top:18px;
}
.card{
  background:var(--card); border-radius:16px; padding:18px 18px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08)}
.card .title{font-size:18px; font-weight:700}
.excerpt{color:#4d4d4d; font-size:15px; margin:8px 0 12px; min-height:70px}
.meta{font-size:12px;color:var(--muted)}
.btn{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, var(--accent), #e06e9d);
  color:white; font-weight:600; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(231,143,179,.35);
}
.btn:hover{opacity:.95; text-decoration:none}
.footer{
  margin-top:36px; padding:18px 0; color:var(--muted); font-size:14px;
  border-top:1px solid #f2dbe5;
}
.poem-wrap{
  background:rgba(255,255,255,.3);
  border-radius:22px; padding:28px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
}
.poem h1{font-size:34px; margin-bottom:6px}
.poem .date{color:var(--muted); margin-bottom:18px; font-size:14px}
.poem .content{white-space:pre-wrap; font-size:18px}
.breadcrumb a{font-size:14px}
.hr-heart{
  position: relative;
  margin: 14px 0 18px;
  height: 26px; /* puțin mai mare, ca să încapă diamantul */
}

/* liniuțele stânga/dreapta */
.hr-heart::before,
.hr-heart::after{
  content:"";
  position:absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #f1b7ce; /* sau folosește var(--accent-2) dacă preferi */
  transform: translateY(-50%);
}

/* DIAMANTUL din centru */
.hr-heart span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 22px;
  height: 22px;

  /* formă de diamant cu clip-path (simplu și suportat modern) */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

  /* umplere fină, potrivită temei tale */
  background: linear-gradient(135deg, var(--accent-2, #f5c6d8), var(--accent, #e78fb3));

  /* margine discretă + un pic de relief */
  outline: 1px solid rgba(198, 98, 138, .45);
  box-shadow: 0 2px 8px rgba(231,143,179,.28);
}

/* (opțional) mic highlight „fațetă” pe diamant */
.hr-heart span::after{
  content:"";
  position:absolute;
  inset: 4px 4px 10px 10px;  /* mic triunghi interior */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events: none;
}

.theme-hearts{ background:
    radial-gradient(800px 300px at 10% 0%, #ffe9f2, transparent 70%),
    radial-gradient(900px 400px at 100% 0%, #ffe3ee, transparent 70%), var(--bg);}
.theme-altar{ background:
    linear-gradient(180deg, #fff8fb 0, #fff 30%, #fff8fb 100%), var(--bg);}
.theme-stars{ background:
    radial-gradient(600px 300px at 50% -10%, #e7d8ff, transparent 60%),
    radial-gradient(700px 500px at -20% 30%, #f4e8ff, transparent 70%),
    var(--bg);}
.theme-gold{ background:
    radial-gradient(600px 260px at 0% 0%, #fff7e2, transparent 70%),
    radial-gradient(600px 260px at 100% 0%, #fff0c7, transparent 70%),
    var(--bg);}
.theme-code{ background:
    radial-gradient(600px 260px at 0% 0%, #e8f5ff, transparent 70%),
    radial-gradient(600px 260px at 100% 0%, #e1f0ff, transparent 70%),
    var(--bg);}
.theme-urban{ background:
    radial-gradient(600px 260px at 0% 0%, #f0f0f0, transparent 70%),
    radial-gradient(600px 260px at 100% 0%, #ebebeb, transparent 70%),
    var(--bg);}
.theme-fire{ background:
    radial-gradient(600px 260px at 0% 0%, #ffe5e0, transparent 70%),
    radial-gradient(600px 260px at 100% 0%, #ffd6c9, transparent 70%),
    var(--bg);}
.theme-duo{ background:
    radial-gradient(600px 260px at 0% 0%, #e2fff6, transparent 70%),
    radial-gradient(600px 260px at 100% 0%, #f0fff9, transparent 70%),
    var(--bg);}
.tag{display:inline-block; padding:4px 8px; background:#ffe3ef; color:#a34b72; border-radius:999px; font-size:12px}
.nav-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.nav-list a{padding:6px 10px; border-radius:999px; background:#fff; border:1px solid #f1d6e2}
@media (max-width:600px){
  h1{font-size:28px}
  .poem .content{font-size:17px}
}


.author-info {
  text-align: center;
  margin: 10px 0;
  color: #555;
}

.author-info a {
  margin: 0 6px;
  text-decoration: none;
  color: #d63384; /* soft pink to match a delicate theme */
  transition: color 0.2s ease;
}

.author-info a:hover {
  color: #a61e4d;
}

.author-info i {
  margin-right: 4px;
  color: #555;
}

/* Background foto / pattern specific fiecărei poezii */
body.has-image-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  /* strat 1: tentă pentru lizibilitate; strat 2: imaginea per-poem  */
  background-image:
    linear-gradient(to bottom right,
      var(--bg-tint-a, rgba(255,255,255,.92)),
      var(--bg-tint-b, rgba(255,255,255,.86))
    ),
    var(--bg-url);
  /* pentru fotografii mari: cover; pentru pattern-uri: setezi --bg-size în inline */
  background-size: auto, var(--bg-size, cover);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat, var(--bg-repeat, no-repeat);
  filter: saturate(1.05);
}

/* (opțional) un ușor vignette */
body.has-image-bg::after{
  content:"";
  position:fixed; inset:0; z-index:-1;
  box-shadow: inset 0 0 140px rgba(0,0,0,.06);
}

/* Paleta poate fi suprascrisă per pagină cu variabilele CSS */

/* accesibilitate: screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* structură header */
.header .topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.header .brand a{ font-weight:700; letter-spacing:.4px; font-size:20px; color:inherit; text-decoration:none }
.header .author-info{
  font-size:14px; margin-top:6px; color:#555; text-align:center;
}
.header .author-info a{ margin:0 6px; text-decoration:none; color:var(--link); }
.header .author-info a:hover{ text-decoration:underline }

/* nav orizontal pe desktop */
.nav{ display:flex; gap:16px; margin-top:10px; }
.nav a{ text-decoration:none; color:var(--link); font-weight:600; opacity:.95 }
.nav a:hover{ text-decoration:underline }

/* buton hamburger */
.menu-toggle{
  display:none; /* ascuns pe desktop */
  align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1px solid #f1d6e2;
  background:#fff; cursor:pointer;
  box-shadow:0 4px 12px rgba(231,143,179,.18);
}

/* breakpoint mobil */
@media (max-width: 720px){
  .menu-toggle{ display:inline-flex; }
  /* nav devine dropdown sub topbar */
  .nav{
    flex-direction:column;
    border:1px solid #f1d6e2; border-radius:14px;
    background:#fff;
    margin-top:10px; padding:8px;
    /* animare colaps/expand */
    max-height:0; overflow:hidden; pointer-events:none; opacity:0;
    transition: max-height .25s ease, opacity .2s ease;
  }
  /* când header are clasa .nav-open -> arătăm meniul */
  .header.nav-open .nav{
    max-height:200px; /* ajustează dacă ai mai multe linkuri */
    opacity:1; pointer-events:auto;
  }

  /* author bar pe 2 rânduri dacă e nevoie */
  .header .author-info{ line-height:1.4 }
  .header .author-info .generic{ display:none; }
}

/* mic rafinament la iconițe */
.author-info i{ margin-right:4px; color:#777 }


/* === Mobile header/hamburger fix === */
@media (max-width: 720px){
  /* stivăm elementele din header pe verticală */
  .header{
    display:block;            /* înlocuiește flex-ul doar pe mobil */
    padding: 16px 0 10px;
  }

  /* bara de autor rămâne sus, centrată */
  .header .author-info{
    text-align:center;
    margin: 4px 0 8px;
    line-height: 1.4;
  }

  /* topbar = container pentru buton; îl împingem la dreapta */
  .header .topbar{
    display:flex;
    justify-content: flex-end;  /* butonul la dreapta */
    align-items: center;
    gap: 12px;
  }
  .header .menu-toggle{
    display:inline-flex;        /* vizibil pe mobil */
    margin-left:auto;           /* se lipește de dreapta */
  }

  /* dropdown-ul apare sub topbar, aliniat la stânga și pe toată lățimea */
  .header .nav{
    width:100%;
    margin-top:10px;
    padding:8px;
    border:1px solid #f1d6e2; border-radius:14px;
    background:#fff;

    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
  }

  /* când e deschis meniul (via .header.nav-open pus de JS) */
  .header.nav-open .nav{
    max-height: 50vh;          /* suficient pentru mai multe linkuri */
    opacity: 1;
    pointer-events: auto;
  }

  /* pe mobil ascundem etichetele "generice" dacă vrei mai compact */
  .header .author-info .generic{ display:none; }
}