/* WordPress-only additions on top of the example stylesheet (stn.css is synced from example/ and must not be edited). */

/* Join form spam trap: invisible to people. */
.stn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Reply box under a topic. */
.stn-replyform { display: grid; gap: 6px; margin-top: 12px; }
.stn-replyform textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--stn-border); border-radius: 6px; resize: vertical; }
.stn-replyform .stn-btn { justify-self: start; }
.stn-replies { margin-bottom: 8px; }
.stn-post p:last-child { margin-bottom: 0; }

/* bbPress messages ("Your reply is waiting for approval", errors) in the site's note style. */
.bbp-template-notice { background: #FFF3C4; border: 1px solid #E9C95A; border-radius: 6px; padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.bbp-template-notice.error, .bbp-template-notice.warning { background: #FDE8E4; border-color: #E5A193; }
.bbp-template-notice ul { margin: 0; padding: 0; list-style: none; }

/* Topic list chips sit on one line. */
.stn-forums small .stn-user { display: inline; }
.stn-forums small .stn-uav { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* Profile pages (stn-member.php). */
.stn-inlineform { display: inline; margin: 0; }
.stn-fwendbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.stn-note--error { background: #FDE8E4; border-color: #E5A193; }
main > .stn-note { margin-bottom: 10px; font-size: 13px; }
.stn-me h1 { margin: 0 0 2px; font-size: 22px; }
.stn-me .stn-crumbs { margin: 0 0 4px; }
.stn-cover { text-decoration: none; }
.stn-mood .stn-moods { margin-top: 8px; }
.stn-moods button { font: 12px var(--stn-font); }
.stn-meform textarea { font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--stn-border); border-radius: 10px; color: #2B2B2B; width: 100%; }
.stn-meform .stn-wide { grid-column: 1 / -1; }
.stn-av[disabled] { cursor: not-allowed; }
.stn-av[aria-pressed="true"] { border-color: var(--stn-heart); }
.stn-people li .stn-btn, .stn-people li .stn-chip { white-space: nowrap; }
.stn-people li form + form { margin-left: 4px; }
.stn-whowith { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.stn-whowith .stn-chip { text-decoration: none; color: var(--stn-link); display: inline-flex; align-items: center; }
.stn-whowith .stn-chip[aria-current="true"] { background: var(--stn-panel-bar); color: #fff; border-color: var(--stn-panel-bar); }
.stn-unread { background: var(--stn-heart); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.stn-btn--red { background: linear-gradient(#E26A5A, #C0392B); border-color: #A93226; color: #fff; }
.stn-entry .stn-flag { margin-left: 4px; }

/* Temples (stn-temples.php) and temple bits on profiles. */
.stn-room__head { display: flex; gap: 14px; align-items: flex-start; }
.stn-room__head h2 { margin: 0; color: var(--c); filter: brightness(.8); }
.stn-room__head p { margin: 4px 0; }
.stn-locked { background: #EAF4FF; border: 1px dashed var(--stn-panel-bar); border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.stn-people--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.stn-msg .stn-inlineform { margin-left: 4px; }
.stn-polaroid .stn-templechip { margin-top: 2px; }
.stn-mytemple .stn-crest { width: 56px; height: 62px; }
.stn-polaroid .stn-templechip img { width: 14px !important; height: 16px !important; border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; margin: 0 !important; transform: none !important; display: inline !important; vertical-align: -3px; }

/* Report button and blog comments (round 3). */
.stn-report { display: inline-block; margin-left: 4px; }
.stn-report summary { list-style: none; display: inline; }
.stn-report summary::-webkit-details-marker { display: none; }
.stn-report[open] { display: block; margin-top: 6px; }
.stn-reportform { display: grid; gap: 6px; max-width: 420px; padding: 8px 10px; background: #FFF8F6; border: 1px solid #E5A193; border-radius: 6px; margin-top: 4px; font-size: 13px; }
.stn-reportform label { display: grid; gap: 2px; }
.stn-reportform select, .stn-reportform textarea { font: inherit; padding: 4px 6px; border: 1px solid var(--stn-border); border-radius: 6px; }
.stn-reportform .stn-btn { justify-self: start; }
.stn-comments { margin-top: 18px; }
#stn-commentform { display: grid; gap: 6px; }
#stn-commentform textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--stn-border); border-radius: 6px; resize: vertical; }
.stn-comment > p:not(.stn-chead) { margin: 4px 0 0; }
.stn-holo-av { vertical-align: middle; line-height: 0; }
.stn-user .stn-holo-av { vertical-align: -6px; margin-right: 6px; } .stn-user .stn-holo-av .stn-uav { margin-right: 0; vertical-align: 0; }
.stn-polaroid .stn-holo-av, .stn-me .stn-holo-av { display: inline-block; }

/* VIP members: gold name and a gold-holo VIP tag (same shine as the Host badge). */
.stn-vipname, a.stn-vipname, .stn-user a.stn-vipname { color: #B88A00 !important; text-shadow: 0 1px 0 rgba(255,236,150,.8); }
.stn-vipbadge { background: linear-gradient(115deg, #FFF1A8 0%, #F7C531 30%, #FFE27A 55%, #E0A800 80%, #FFF1A8 100%); color: #5A3F00; }
.stn-polaroid figcaption .stn-vipbadge { font-family: var(--stn-font); font-size: 9px; vertical-align: 2px; }

/* Fwend bar under a profile name: normal dark text, readable chips. */
.stn-fwendbar { color: var(--stn-text); }
.stn-fwendbar .stn-chip { color: var(--stn-link); background: #fff; border-color: var(--stn-border); }
.stn-prof .stn-me { color: var(--stn-text); }

/* Holo avatar on the profile head keeps the normal avatar frame. */
.stn-prof .stn-me > .stn-holo-av { flex: none; }
.stn-prof .stn-me > .stn-holo-av > img { width: 88px; height: 88px; border-radius: 12px; background: #fff; border: 1px solid var(--stn-border); padding: 4px; image-rendering: pixelated; }

/* VIP gold sparkles: next to the name everywhere, bigger on the profile; they twinkle on hover. */
.stn-vipname { position: relative; }
.stn-vipname::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 3px; vertical-align: 2px; background: #F7C531; -webkit-mask: url("../img/icons/stn-icon-sparkle.svg") center / contain no-repeat; mask: url("../img/icons/stn-icon-sparkle.svg") center / contain no-repeat; filter: drop-shadow(0 0 1px #B88A00); }
h1.stn-vipname::before, h1.stn-vipname::after { content: ""; display: inline-block; width: 16px; height: 16px; background: #F7C531; -webkit-mask: url("../img/icons/stn-icon-sparkle.svg") center / contain no-repeat; mask: url("../img/icons/stn-icon-sparkle.svg") center / contain no-repeat; vertical-align: 6px; }
h1.stn-vipname::before { margin-right: 6px; width: 12px; height: 12px; vertical-align: 12px; }
h1.stn-vipname::after { margin-left: 6px; }
.stn-vipname:hover::after, .stn-vipname:hover::before, .stn-me:hover h1.stn-vipname::after, .stn-me:hover h1.stn-vipname::before { animation: stn-twinkle .6s steps(3) 2; }
@keyframes stn-twinkle { 50% { transform: scale(1.4) rotate(20deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .stn-vipname::after, .stn-vipname::before { animation: none !important; } }

/* Badges under a profile name (Host / VIP / temple) sit on one line. */
.stn-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stn-badges .stn-hostbadge { margin-left: 0; vertical-align: 0; }
.stn-badges .stn-chip { display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; text-decoration: none; }
.stn-badges .stn-chip img { display: block; }

/* Cookie banner: a small cream panel in the corner; never covers the page. */
.stn-consent { position: fixed; right: 12px; bottom: 12px; z-index: 50; max-width: 360px; background: var(--stn-panel); border: 1px solid var(--stn-panel-bar); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); padding: 10px 12px; font-size: 13px; }
.stn-consent[hidden] { display: none; }
.stn-consent p { margin: 0 0 8px; }
.stn-consent .stn-consent__btns { display: flex; gap: 8px; margin: 0; }
.stn-consent .stn-btn { flex: 1; }
@media (max-width: 767px) { .stn-consent { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* A few pixel clouds in the header, above and below the slogan pill (never behind the text). */
.stn-header { background: url("../img/icons/stn-icon-cloud.svg") no-repeat 31% 6px / 60px, url("../img/icons/stn-icon-cloud.svg") no-repeat 66% 10px / 40px, url("../img/icons/stn-icon-cloud.svg") no-repeat 47% 84px / 48px, linear-gradient(var(--stn-header), var(--stn-header-dark)); }
@media (max-width: 767px) { .stn-header { background: url("../img/icons/stn-icon-cloud.svg") no-repeat 72% 8px / 40px, linear-gradient(var(--stn-header), var(--stn-header-dark)); } }