/* ======= Minimál, a versek oldallal konzisztens ======= */
*,*::before,*::after{ box-sizing: border-box; }

.post{
  position:relative;
  background:#fff;
  padding:1rem;
  border-radius:10px;
  box-shadow:0 0 8px rgba(0,0,0,.05);
  overflow-wrap:anywhere;
  word-break:break-word;
}
.post img{ max-width:100%; height:auto; }
.post pre{ white-space:pre-wrap; word-break:break-word; }

/* Jelvény */
.badge-container{ position:absolute; top:10px; right:10px; display:flex; gap:10px; }
.badge-kiemelt{ background:#3399ff; color:#fff; padding:4px 8px; font-size:.8em; border-radius:4px; font-weight:bold; }

/* A mese szöveg */
.story{
  font-family: 'Georgia', serif;
  color:#333;
  text-align: justify;          /* sorkizárt */
  text-align-last: left;        /* az utolsó sor ne legyen “széthúzva” */
  hyphens: auto;                /* automatikus elválasztás */
  overflow-wrap: break-word;    /* hosszú szavaknál törjön inkább, mint elcsússzon */
  word-break: normal;           /* ne tördeljen mindenhol, hogy szépen igazítható legyen */
}

/* Komment blokk – mobilon 100% */
#kommentek{ max-width:700px; margin:0 auto; text-align:left; }
@media (max-width: 640px){
  #kommentek{ max-width:100%; padding:0 .25rem; }
}

/* Sidebar */
.sidebar{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:1rem;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}

/* Elrendezés: content + sidebar */
#main .main-wrapper{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}
#main .content-area{ flex:1 1 720px; min-width:0; }
#main .sidebar{
  display:block !important;
  flex:0 0 300px;
  max-width:300px;
  padding:1rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,.05);
  clear:both;
}

/* Mobil/tablet */
@media (max-width: 900px){
  #main, #main .main-wrapper{ width:100%; }
  #main .content-area,
  #main .sidebar{
    flex:1 1 100%;
    max-width:none;
  }
  #main .content-area{ order:1; }
  #main .sidebar{
    order:2;
    margin-top:16px;
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #main .sidebar ul{list-style:none;padding:0;margin:0}
  #main .sidebar li{margin:.5em 0}
  #main .sidebar a{color:#007bff;text-decoration:none}
  #main .sidebar a:hover{text-decoration:underline}
}

#emoji-panel .emoji-btn{all:unset;display:inline-block;cursor:pointer;line-height:1;font-size:1rem;padding:2px 4px;-webkit-tap-highlight-color:transparent}
#emoji-panel .emoji-btn:hover{transform:scale(1.06)}
#emoji-panel .emoji-btn:active{transform:scale(0.96)}


/* ===== További mesék / versek / novellák – csak DESKTOPON pasztell ===== */
@media (min-width: 769px) {

    /* A sidebarban lévő "egyszerű" listák (pl. További mesék a szerzőtől) */
    .sidebar > div:not(.nav-card) ul {
        list-style: none;
        padding-left: 0;
        margin: 0.4rem 0 0;
    }

    .sidebar > div:not(.nav-card) ul li {
        margin: 4px 0;
    }

    .sidebar > div:not(.nav-card) ul li a {
        display: inline-block;
        vertical-align: middle;
        padding: 6px 10px;          /* 🔹 vékonyabb, mint eddig */
        border-radius: 10px;        /* kicsit kisebb lekerekítés */
        text-decoration: none;

        background: linear-gradient(90deg, #eaf8ff, #f0f1ff);
        color: #1a3d6b;
        font-weight: 500;
        font-size: 14px;

        border: 1px solid rgba(90,120,190,0.15);
        transition: all 0.25s ease;
    }

    .sidebar > div:not(.nav-card) ul li a:hover {
        background: linear-gradient(90deg, #d8f1ff, #e7daff);
        transform: translateX(4px);
        box-shadow: 0 3px 8px rgba(90,120,190,0.18);
    }
}

/* Doboz a mese link számára */
.mese-link-box {
    margin: 12px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mese-link-box label {
    font-weight: 600;
    color: #1b3b8f; /* sötétkék */
}

/* Input mező */
#meseLink {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #cfe1ff;
    border-radius: 10px;
    background: #f5f9ff;        /* világoskék háttér */
    color: #0b3b82;             /* sötétkék szöveg */
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: .15s ease;
}

/* Hover – kicsit világosabb */
#meseLink:hover {
    background: #e8f1ff;
    border-color: #aecdff;
}

/* Focus – jól látható, mobilon is */
#meseLink:focus,
#meseLink:active {
    outline: none;
    border-color: #7fb3ff;
    box-shadow: 0 0 0 3px rgba(140, 180, 255, .35);
}

/* Másolva felirat */
.copy-msg {
    display: none;
    color: #0b8d25; /* zöld */
    font-weight: 600;
    margin-top: 4px;
    font-size: .9rem;
}

.copy-msg.show {
    display: inline;
}