/* === FANUPDATE === */

div#fanupdate {
    animation: riseIn 1s 0.2s ease both;
}

#fanupdate h1 {
    color: var(--text-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.1rem;
    font-weight: 400;
    margin: 0 0 1.4rem;
}

#fanupdate h2 {
    color: var(--text-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    font-weight: 400;
    margin: 0 0 1.2rem;
}

#fanupdate h3 {
    color: var(--text-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 0.7rem;
}

#fanupdate h4 {
    color: var(--text-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.6rem;
}

#fanupdate h5 {
    color: var(--text-mid);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

#fanupdate h6 {
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

/* heading links (e.g. the post-title permalink in h2) — all states.
   font-size/letter-spacing/padding are reset to inherit because style.css's
   sitewide `a { font-size: 1rem; ... }` is an explicit declaration and
   overrides inheritance regardless of selector specificity — without this
   these links would render at 1rem instead of their heading's own size. */
div#fanupdate h1 a,
div#fanupdate h2 a,
div#fanupdate h3 a,
div#fanupdate h4 a,
div#fanupdate h5 a,
div#fanupdate h6 a {
    color: var(--text-dark);
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
    text-decoration-color: rgba(155,139,196,0.5);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s, text-decoration-color 0.2s;
}
div#fanupdate h1 a:visited,
div#fanupdate h2 a:visited,
div#fanupdate h3 a:visited,
div#fanupdate h4 a:visited,
div#fanupdate h5 a:visited,
div#fanupdate h6 a:visited {
    color: var(--text-mid);
}
div#fanupdate h1 a:hover,
div#fanupdate h2 a:hover,
div#fanupdate h3 a:hover,
div#fanupdate h4 a:hover,
div#fanupdate h5 a:hover,
div#fanupdate h6 a:hover {
    color: var(--text-dark);
    text-decoration-color: var(--accent-mint);
}
div#fanupdate h1 a:active,
div#fanupdate h2 a:active,
div#fanupdate h3 a:active,
div#fanupdate h4 a:active,
div#fanupdate h5 a:active,
div#fanupdate h6 a:active {
    color: var(--text-dark);
    text-decoration-color: var(--accent-lilac);
}
div#fanupdate h1 a:focus-visible,
div#fanupdate h2 a:focus-visible,
div#fanupdate h3 a:focus-visible,
div#fanupdate h4 a:focus-visible,
div#fanupdate h5 a:focus-visible,
div#fanupdate h6 a:focus-visible {
    border-radius: 2px;
    color: var(--text-dark);
    outline: 2px solid var(--accent-lilac);
    outline-offset: 2px;
    text-decoration-color: var(--accent-lilac);
}

/* ==== Entries ==== */

/* Each post — set via Admin -> Templates -> entry_template, which wraps
   {{title}}/{{catfile}}/{{body}} in <div class="fu-entry">...</div>. Without
   that wrapper this rule matches nothing and posts fall back to plain flow. */
#fanupdate .fu-entry {
    background: rgba(155,139,196,0.1);
    border: 1px solid rgba(155,139,196,0.3);
    border-radius: 24px;
    box-shadow: 0 4px 18px var(--shadow);
    margin-bottom: 1.4rem;
    padding: 1.8rem 2rem;
}

#fanupdate .fu-entry:last-of-type { margin-bottom: 0; }

p.catfile {
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    margin-bottom: 1.2rem;
    margin-top: -0.5rem;
    padding: 0;
    text-transform: uppercase;
}

/* Category-filter links inside catfile. FanUpdate now tags these with
   .fu-cat-link directly (font-size/etc set explicitly below); the plain
   `p.catfile a` inherit-fix stays as a fallback for older FanUpdate
   versions that don't emit the class yet. */
p.catfile a {
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
}

.fu-cat-link {
    color: var(--text-light);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    padding: 0;
}

.fu-cat-link:hover {
    color: var(--text-mid);
}

/* Comment-count link in catfile (e.g. "3 comments"). */
.fu-comment-count-link {
    color: var(--text-light);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    padding: 0;
}

.fu-comment-count-link:hover {
    color: var(--text-mid);
}

/* Entry date in the category archive listing (show-cat.php). */
span.date {
    color: var(--text-light);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ==== Archives (?view=archive) ==== */

#fanupdate .fu-archive-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

#fanupdate .fu-archive-item {
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-mid);
    font-size: 0.9rem;
    padding: 0.65rem 0;
}

#fanupdate .fu-archive-item a {
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
}

#fanupdate .fu-archive-item:last-child {
    border-bottom: none;
}

#fanupdate .fu-archive-count {
    color: var(--text-light);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    margin-left: 0.3rem;
}

/* ==== Images ==== */

a.fu-lightbox {
    border: 1px solid var(--border);
    border-radius: 10px;
    display: inline-block;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

a.fu-lightbox:hover,
a.fu-lightbox:focus {
    border-color: var(--accent-lilac);
    box-shadow: 0 4px 16px var(--shadow);
}

a.fu-lightbox img {
    cursor: zoom-in;
    display: block;
    height: auto;
    max-width: 100%;
    transition: opacity 0.15s;
}

a.fu-lightbox:hover img,
a.fu-lightbox:focus img {
    opacity: 0.9;
}

a.fu-lightbox.fu-img-left {
    float: left;
    margin: 0 1.25em 0.75em 0;
}

a.fu-lightbox.fu-img-right {
    float: right;
    margin: 0 0 0.75em 1.25em;
}

a.fu-lightbox.fu-img-center {
    display: block;
    margin: 0.75em auto;
}

/* ==== Comments ==== */

div#comments {
    border-top: 1px solid var(--border-soft);
    margin-top: 2.5rem;
    padding-top: 2rem;
}

/* Shown in place of the comment list/form when an entry has comments off. */
p.comments-closed {
    color: var(--text-light);
    font-size: 0.88rem;
}

/* Comment validation/spam-guard error messages. */
p.error, ul.error {
    background: rgba(242,107,107,0.1);
    border: 1px solid rgba(242,107,107,0.3);
    border-radius: 16px;
    color: #8a2f2f;
    font-size: 0.85rem;
    list-style: none;
    margin-bottom: 1rem;
    padding: 0.8rem 1.1rem;
}

ul.error li { margin: 0; }
ul.error li + li { margin-top: 0.3rem; }

/* Every comment always carries both "comment" and "fu-comment" — the
   latter follows the fu- prefix used elsewhere (fu-entry, fu-lightbox)
   and is the selector to style against going forward. */
#fanupdate .fu-comment {
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 18px;
    clear: both;
    margin-bottom: 0.6rem;
    padding: 1.1rem 1.4rem;
}

#fanupdate .fu-comment p {
    font-size: 0.88rem;
    line-height: 1.75;
    margin-bottom: 0;
    padding: 0;
}

#fanupdate .fu-comment p.commenter {
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    margin-bottom: 0.6rem;
    padding: 0;
    text-transform: uppercase;
}

div.odd { background: rgba(255,255,255,0.35); }

div.author {
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

div#newComment {
    border-top: 1px solid var(--border-soft);
    margin-top: 2.5rem;
    padding-top: 2rem;
}

img.gravatar {
    border: 1px solid var(--border);
    border-radius: 50%;
    float: right;
    height: 44px;
    margin: 0 0 1rem 1.2rem;
    width: 44px;
}

/* ==== Comment Form ==== */

div.comments-form {}

form#comments-form {}

h3#postcomment {
    margin-top: 2rem;
}

p#cmt-rules,
p#cmt-moderation {
    color: var(--text-light);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

/* Moderation notice in the built-in fallback comment form template. */
p.hint {
    color: var(--text-light);
    font-size: 0.7rem;
    font-style: italic;
    letter-spacing: 0.04em;
    margin: 0.4rem 0 1rem;
}

label {
    color: var(--text-light);
    display: block;
    float: left;
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    margin: 0 0.6em 0 0;
    padding-top: 0.55rem;
    text-align: right;
    text-transform: uppercase;
    width: 9em;
}

input, textarea, select, option {
    background: rgba(255,255,255,0.35);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-dark);
    font-family: 'Crimson Text', serif;
    font-size: 0.88rem;
    font-weight: 300;
    outline: none;
    padding: 0.48rem 0.8rem;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus, select:focus {
    background: rgba(255,255,255,0.6);
    border-color: var(--accent-lilac);
    box-shadow: 0 0 0 3px rgba(155,139,196,0.18);
}

textarea {
    min-height: 110px;
    resize: vertical;
    width: 100%;
}

/* "Remember me" checkbox label. */
label.checkbox {
    float: none;
    font-size: 0.78rem;
    letter-spacing: normal;
    padding-top: 0;
    text-align: left;
    text-transform: none;
    width: auto;
}

/* Comment form submit button. */
.submit {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-dark);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    padding: 0.55rem 1.5rem;
    text-transform: uppercase;
    transition: all 0.22s;
}

.submit:hover {
    background: var(--glass-hover);
    box-shadow: 0 4px 12px var(--shadow);
    transform: translateY(-2px);
}

#captcha-img {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    margin: 0.4rem 0 0.8rem;
}

.wysiwygmenu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.wysiwygmenu a {
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-mid);
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.18s;
}

.wysiwygmenu a:hover {
    background: var(--glass-hover);
    box-shadow: 0 2px 6px var(--shadow);
    color: var(--text-dark);
    transform: translateY(-1px);
}

/* ==== Footer ==== */

a.rss {
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    padding: 0.28rem 0.7rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s;
}

a.rss:hover {
    background: var(--glass-hover);
    box-shadow: 0 3px 8px var(--shadow);
    color: var(--text-dark);
    transform: translateY(-1px);
}

div.archivelink {
    color: var(--text-light);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    margin: 2rem 0 0;
    text-align: right;
    text-transform: uppercase;
}

div.archivelink a {
    color: var(--text-mid);
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
    text-decoration: none;
}

div.archivelink a:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

/* main/archive nav links — FanUpdate now tags these with .fu-nav-link
   directly, styled explicitly rather than relying on inheriting
   div.archivelink's font-size (see the fallback rule above). */
.fu-nav-link {
    color: var(--text-mid);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    padding: 0;
    text-decoration: none;
}

.fu-nav-link:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

div.credit {
    border-top: 1px solid var(--border-soft);
    clear: both;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    text-align: center;
}

div.credit a {
    font-size: inherit;
    letter-spacing: inherit;
    padding: 0;
}

/* Credit link — FanUpdate now tags this with .fu-credit-link directly. */
.fu-credit-link {
    color: var(--text-mid);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    padding: 0;
    text-decoration: none;
}

.fu-credit-link:hover {
    color: var(--text-dark);
    text-decoration: underline;
}

div.credit p {
    color: var(--text-light);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin: 0;
    opacity: 0.6;
    text-transform: uppercase;
}

/* === FOOTER === */
.skin-credit
{
    color: var(--text-light);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    margin-top: 0.5rem;
    opacity: 0.6;
    text-align: center;
    text-transform: uppercase;
}