/* Mood - Pagina Hashtag: stili esterni (nessun <style> inline nella vista) */
html,
body {
    margin: 0;
    background: var(--mood-bg);
    color: var(--mood-text);
    font-family: var(--mood-font, 'Inter', sans-serif);
}

.hashtag-wrap { max-width: 720px; margin: 24px auto; padding: 0 16px; }

/* Intestazione pagina (header flessibile) */
.hashtag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.hashtag-header h1 { margin: 0; }

.hashtag-header .mood-btn-back {
    background: var(--mood-bg-hover);
    color: var(--mood-text);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--mood-border);
}

.hashtag-search { display: flex; gap: 10px; margin-bottom: 20px; }
.hashtag-search input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg);
    color: var(--mood-text);
}
.hashtag-search button {
    padding: 10px 18px;
    border: 0;
    border-radius: var(--mood-radius-sm);
    background: var(--mood-primary);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.trend-list { display: grid; gap: 10px; margin-bottom: 24px; }
.trend-item {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}
.trend-item:hover { border-color: var(--mood-primary); }
.trend-item .tag { font-weight: 700; color: var(--mood-primary); }
.trend-item .count { color: var(--mood-text-muted); font-size: 0.85rem; }

.section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }

.post-tag {
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color var(--mood-transition);
}
.post-tag:hover { border-color: var(--mood-primary); }
.post-tag .owner { font-weight: 700; color: var(--mood-primary); }
.post-tag .content { color: var(--mood-text); margin: 6px 0; }
.post-tag .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: var(--mood-text-muted);
    font-size: 0.8rem;
}
.post-tag .hashtag-link { color: var(--mood-primary); text-decoration: none; }

/* Gli allegati del post: i file caricati su Mood e il video incastrato dal link.
   Il riquadro ha lo sfondo della scheda (nessun colore scritto a mano). */
.post-tag-media {
    margin: 10px 0;
    border-radius: var(--mood-radius-sm);
    overflow: hidden;
    background: var(--mood-bg-hover);
}
.post-tag-media img,
.post-tag-media video { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.post-tag-media--audio { display: grid; place-items: center; min-height: 96px; color: var(--mood-primary); }
.post-tag-media--audio svg { inline-size: 34px; block-size: 34px; }
.post-tag-embed { margin: 10px 0; }
/* Il video incastrato: angoli del riquadro (non quelli della card del feed, che
   sta attaccata ai bordi) e formato orizzontale, come fuori dal sito. */
.post-tag-embed .embed-video { border-radius: var(--mood-radius-sm); aspect-ratio: 16 / 9; height: auto; }

/* Il rimando al post: c'e' sempre, perche' dentro il video il clic e' del player. */
.post-tag .post-tag-quando { color: var(--mood-text-muted); text-decoration: none; }
.post-tag .post-tag-quando:hover { color: var(--mood-primary); }
.post-tag .post-tag-apri {
    margin-inline-start: auto;
    color: var(--mood-primary);
    font-weight: 600;
    text-decoration: none;
}
.post-tag .post-tag-apri:hover { text-decoration: underline; }

.hidden { display: none !important; }


/* Statistiche card post: icone SVG al posto delle emoji */
.trending-title { display: flex; align-items: center; gap: 8px; }
.trending-title svg { width: 18px; height: 18px; color: var(--mood-primary); }
.post-tag .meta .tag-stat { display: inline-flex; align-items: center; gap: 5px; }