/*
Theme Name: Puck
Theme URI: https://leetoo.net/puck
Author: Leetoo
Author URI: https://leetoo.net/
Description: A lightweight, minimalist flexbox theme built for webcomic creators using the Toocheke Companion plugin. This is a classic (PHP template) theme -- not a full-site-editor/block theme -- with a full-screen mobile menu, nested comment styling, and a customizer-driven tiled background.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: puck
Tags: webcomic, comic, minimal, flexbox, classic-theme
*/

/* =========================================================
   TABLE OF CONTENTS
   1. Self-hosted fonts
   2. CSS variables / tokens
   3. Reset & base
   4. Layout wrapper / grid
   5. Header (logo row + nav row)
   6. Mobile full-screen menu
   7. Sidebars
   8. Main content column (comic + regular page)
   9. Comic navigation row
   10. Comic blog post / entry meta
   11. Home page latest-post list
   12. Comments (nested)
   13. Comic archive (chapters, text)
   13b. Character roster
   14. Footer + scroll-to-top
   15. Animations
   16. Responsive
   ========================================================= */

/* ---------------------------------------------------------
   1. Self-hosted fonts
   Drop the matching .woff2 files into /fonts/boogaloo/ and
   /fonts/quicksand/ (already bundled -- see README.md). Referencing them
   here means they're discovered by the browser's preloader
   the moment style.css is fetched -- no extra request to
   Google's CSS endpoint required.
   --------------------------------------------------------- */
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/quicksand/quicksand-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/quicksand/quicksand-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/quicksand/quicksand-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/quicksand/quicksand-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/quicksand/quicksand-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Boogaloo';
    src: url('fonts/boogaloo/boogaloo-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------
   2. CSS variables
   --------------------------------------------------------- */
:root {
    --puck-container: 1250px;
    --puck-navbar-height: 45px;
    --puck-navbar-bg: #b00;
    --puck-navbar-text: #fff;
    --puck-navbar-text-hover: #FFF4C4;
    --puck-accent-color: #b00;
    --puck-content-bg: #FCFAE9;
    --puck-content-link: #b00;
    --puck-content-link-hover: #f00;
    --puck-comicnav-bg: #333333;
    --puck-comicnav-text: #ffffff;
    --puck-sidebar-text: #fff;
    --puck-sidebar-link: #FFF4C4;
    --puck-sidebar-link-hover: #fff;
    --puck-left-sidebar-width: 200px;
    --puck-right-sidebar-width: 300px;
    --puck-font-heading: 'Boogaloo', Georgia, 'Times New Roman', serif;
    --puck-font-navbar: 'Boogaloo', Georgia, 'Times New Roman', serif;
    --puck-font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --puck-radius: 8px;
    --puck-bg-image: none;
}

/* ---------------------------------------------------------
   3. Reset & base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--puck-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    background-color: #000;
    background-image: var(--puck-bg-image);
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}
img { max-width: 100%; height: auto; display: block; }
.textwidget img {
    display: inline; /* respect inline images placed side-by-side in a text widget */
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--puck-font-heading);
    line-height: 1.25;
    margin: 0 0 .6em;
    font-weight: 400; /* Boogaloo only ships a regular weight */
}
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }
button { font-family: inherit; }
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}

/* ---------------------------------------------------------
   4. Layout wrapper
   --------------------------------------------------------- */
.puck-container {
    width: 100%;
    max-width: var(--puck-container);
    margin: 0 auto;
    padding: 0 20px;
}
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-content-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    max-width: var(--puck-container);
    margin: 24px auto;
    padding: 0 20px;
}
.site-main {
    flex: 1 1 0;
    min-width: 0; /* prevent wide comic images from blowing out the grid */
}

/* ---------------------------------------------------------
   5. Header
   --------------------------------------------------------- */
.site-header { position: relative; z-index: 100; }

.header-top-row {
    background: #111;
}
.header-top-row .puck-container {
    display: flex;
    align-items: flex-end; /* logo snaps to bottom of this row = top of navbar */
    justify-content: space-between;
    gap: 20px;
    padding-top: 12px;
}
.site-logo { flex-shrink: 0; }
.site-logo img {
    display: block;
    max-height: 140px;
    width: auto;
}
.site-logo a { display: block; }
.site-title {
    font-family: var(--puck-font-navbar);
    font-size: 34px;
    color: #fff;
    line-height: 1;
}

.header-banner-widget {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
}
.header-banner-widget .widget { margin: 0; }
.header-banner-widget img { max-width: 728px; }

/* Navbar row: fixed on scroll, 45px tall, always */
.navbar-row {
    background: var(--puck-navbar-bg);
    height: var(--puck-navbar-height);
    width: 100%;
    transition: box-shadow .2s ease;
}
.navbar-row.is-sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* spacer prevents content jump when navbar becomes fixed */
.navbar-spacer { display: none; height: var(--puck-navbar-height); }
.navbar-spacer.is-active { display: block; }

.navbar-row .puck-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.primary-menu {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.primary-menu li { height: 100%; display: flex; align-items: center; position: relative; }
.primary-menu a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    font-family: var(--puck-font-navbar);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .02em;
    color: var(--puck-navbar-text);
    text-transform: uppercase;
    transition: color .15s ease;
}
.primary-menu a:hover,
.primary-menu a:focus { color: var(--puck-navbar-text-hover); }

/* sub-menus (desktop) */
.primary-menu ul.sub-menu {
    list-style: none;
    margin: 0; padding: 6px 0;
    position: absolute;
    top: 100%; left: 0;
    min-width: 200px;
    background: var(--puck-navbar-bg);
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
    display: none;
    flex-direction: column;
    z-index: 200;
}
.primary-menu li:hover > ul.sub-menu { display: flex; }
.primary-menu ul.sub-menu a { height: auto; padding: 10px 16px; }

/* Social + RSS icons (desktop navbar row) */
.navbar-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    /* "Punch-through" fill used by two-tone icons (Facebook, YouTube)
       for their inner detail shape, so it reads as a cutout matching
       whatever sits behind the icon in this context. */
    --puck-icon-punch: var(--puck-navbar-bg);
}
.mobile-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 30px;
    --puck-icon-punch: #000;
}
.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--puck-navbar-text);
    transition: color .15s ease;
}
.social-icon-link svg { width: 18px; height: 18px; display: block; }
.social-icon-link:hover,
.social-icon-link:focus {
    color: var(--puck-navbar-text-hover);
}
.mobile-social .social-icon-link { width: 32px; height: 32px; color: #fff; }
.mobile-social .social-icon-link svg { width: 26px; height: 26px; }
.mobile-social .social-icon-link:hover,
.mobile-social .social-icon-link:focus { color: var(--puck-navbar-text-hover); }

/* Hamburger toggle (hidden on desktop) */
.menu-toggle {
    display: none;
    width: 30px; height: 22px;
    border: 0; background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 300;
}
.menu-toggle span {
    position: absolute; left: 0;
    width: 100%; height: 3px;
    background: var(--puck-navbar-text);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 9.5px; }
.menu-toggle span:nth-child(3) { top: 19px; }
.menu-toggle.is-active span:nth-child(1) { top: 9.5px; transform: rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { top: 9.5px; transform: rotate(-45deg); }

/* ---------------------------------------------------------
   6. Mobile full-screen overlay menu
   --------------------------------------------------------- */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
.mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    z-index: 260;
    opacity: 0;
    transform: rotate(-45deg);
    transition: opacity .3s ease .1s, transform .3s ease .1s, color .15s ease;
}
.mobile-menu-overlay.is-open .mobile-menu-close {
    opacity: 1;
    transform: rotate(0deg);
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
    color: var(--puck-navbar-text-hover);
}
.mobile-menu {
    list-style: none;
    margin: 0; padding: 0;
    text-align: center;
    max-height: 85vh;
    overflow-y: auto;
}
.mobile-menu li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
}
.mobile-menu-overlay.is-open .mobile-menu li { opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(1) { transition-delay: .05s; }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(2) { transition-delay: .1s; }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(3) { transition-delay: .15s; }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(4) { transition-delay: .2s; }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(5) { transition-delay: .25s; }
.mobile-menu-overlay.is-open .mobile-menu li:nth-child(6) { transition-delay: .3s; }
.mobile-menu a {
    display: block;
    padding: 14px 20px;
    font-family: var(--puck-font-navbar);
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
}
.mobile-menu a:active,
.mobile-menu a:hover { color: var(--puck-navbar-text-hover); }
.mobile-menu ul.sub-menu { list-style: none; padding: 0; margin: 0 0 10px; }
.mobile-menu ul.sub-menu a { font-size: 17px; padding: 8px 10px; opacity: .85; }
body.mobile-menu-open { overflow: hidden; }

/* ---------------------------------------------------------
   7. Sidebars
   --------------------------------------------------------- */
.sidebar {
    color: var(--puck-sidebar-text);
}
.sidebar a { color: var(--puck-sidebar-link); text-decoration: none; }
.sidebar a:hover { color: var(--puck-sidebar-link-hover); }
.sidebar .widget { margin-bottom: 28px; }
.sidebar .widget-title {
    font-family: var(--puck-font-heading);
    font-size: 24px;
    margin-bottom: .5em;
    color: var(--puck-sidebar-text);
}
.sidebar-left { width: var(--puck-left-sidebar-width); flex: 0 0 var(--puck-left-sidebar-width); }
.sidebar-right { width: var(--puck-right-sidebar-width); flex: 0 0 var(--puck-right-sidebar-width); }

/* Search form -- used by the Search widget and get_search_form()
   anywhere else on the site (e.g. the 404 page). */
.search-form {
    display: flex;
    gap: 8px;
    max-width: 100%;
}
.search-form label { flex: 1 1 auto; margin: 0; }
.search-form .search-field {
    width: 100%;
    font-family: var(--puck-font-body);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #222;
}
.search-form .search-field:focus {
    outline: none;
    border-color: var(--puck-accent-color);
}
.search-form .search-submit {
    flex: 0 0 auto;
    font-family: var(--puck-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 13px;
    color: #fff;
    background-color: var(--puck-accent-color);
    border: 0;
    border-radius: 4px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background-color .15s ease;
}
.search-form .search-submit:hover,
.search-form .search-submit:focus {
    background-color: #f00;
}

/* ---------------------------------------------------------
   8. Main content column
   --------------------------------------------------------- */
.content-column {
    background-color: var(--puck-content-bg);
    padding: 24px 28px 32px;
    border-radius: var(--puck-radius); /* desktop default; zeroed on tablet/mobile below */
}
.content-column a { color: var(--puck-content-link); }
.content-column a:hover { color: var(--puck-content-link-hover); }

/* single comic page: comic image sits above the content column, full width of main column */
.comic-stage {
    background-color: var(--puck-content-bg);
    border-radius: var(--puck-radius);
    padding: 20px;
    margin-bottom: 16px;
    text-align: center;
}
/* Desktop: keep the comic block clear of the (potentially sticky) navbar.
   Tablet/mobile: let it snap flush against it -- no top margin. */
.comic-page-top { margin-top: 0; }
@media (min-width: 1025px) {
    .comic-page-top { margin-top: 24px; }
}
#unspliced-comic img, #spliced-comic img { margin: 0 auto; }
.click-to-next-wrapper[data-next-href] { cursor: pointer; }
#one-comic-option #spliced-comic,
#one-comic-option #unspliced-comic { display: none; }
#one-comic-option #spliced-comic.default-visible,
#one-comic-option #unspliced-comic.default-visible { display: block; }

/* ---------------------------------------------------------
   9. Comic navigation row
   --------------------------------------------------------- */
.puck-comic-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background-color: var(--puck-comicnav-bg);
    color: var(--puck-comicnav-text);
    border-radius: var(--puck-radius);
    padding: 6px 10px;
    margin-bottom: 16px;
}
.comic-nav-item {
    display: flex;
}
.comic-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    font-family: var(--puck-font-navbar);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
a.comic-nav-btn:hover { background: rgba(255,255,255,.12); color: inherit; }
.comic-nav-btn.is-disabled { opacity: .35; cursor: not-allowed; }
.comic-nav-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.comic-nav-comments { gap: 6px; }
.comic-nav-count { font-variant-numeric: tabular-nums; }
#chapter-navigation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 0 100%;
    padding: 2px 0;
    margin: 0;
}
#chapter-navigation h3 {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 400;
}
#chapter-navigation .chapter-inline-dropdown { margin: 0; line-height: 1; }
#chapter-navigation.puck-404-chapters {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 2px dashed rgba(176,0,0,.2);
}
#chapter-navigation.puck-404-chapters h3 {
    font-size: 24px;
}
#chapter-navigation select {
    font-family: var(--puck-font-body);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin: 0;
}
#comic-analytics {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 14px;
    color: inherit;
    padding: 6px 10px;
    margin: 0 !important; /* Toocheke Companion's own universal.css sets #comic-analytics{margin-top:15px} at the same ID specificity */
}
#comic-analytics span { display: inline-flex; align-items: center; gap: 4px; }
#comic-analytics svg { width: 16px; height: 16px; }
#comic-social { display: flex; gap: 8px; align-items: center; }

/* Toocheke Companion's own like/unlike button (heart icon) */
.toocheke-likes-wrapper { display: inline-flex; align-items: center; gap: 4px; }
.toocheke-likes-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: inherit;
    transition: color .15s ease;
}
.toocheke-likes-icon svg { width: 16px; height: 16px; display: block; }
.toocheke-likes-icon svg path { fill: currentColor; }
.toocheke-likes-button.liked { color: #ff4d6d; }
.toocheke-likes-count { font-size: 13px; }
#toocheke-likes-loader { font-size: 11px; margin-left: 4px; opacity: .75; }

/* ---------------------------------------------------------
   10. Comic blog post / entry meta
   --------------------------------------------------------- */
.entry-header .entry-title { font-size: 30px; margin-bottom: .2em; }
.entry-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.entry-meta .byline a { color: var(--puck-content-link); }
.entry-taxonomies {
    font-size: 13px;
    margin-bottom: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.entry-taxonomies .tax-group strong { font-family: var(--puck-font-heading); }
.entry-taxonomies a {
    display: inline-block;
    background: rgba(176,0,0,.08);
    padding: 2px 8px;
    border-radius: 3px;
    margin: 2px 2px 0 0;
}
.comic-blog-post article { font-size: 16px; }
.comic-blog-post article img { border-radius: 4px; }

.comment-count-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 24px;
    font-size: 14px;
    font-weight: 600;
}

/* ---------------------------------------------------------
   11. Home page latest-post list
   --------------------------------------------------------- */
.latest-blog-post { margin-top: 28px; padding-top: 24px; border-top: 2px dashed rgba(176,0,0,.25); }
.latest-blog-post .entry-title { font-size: 24px; }
.blog-pagination {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.blog-pagination a,
.blog-pagination span.current,
.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 4px;
    background: rgba(176,0,0,.08);
    font-size: 14px;
}
.blog-pagination span.current,
.blog-pagination a.current,
.blog-pagination .page-numbers.current {
    background: var(--puck-accent-color);
    color: #fff;
}
.blog-pagination .page-numbers.dots { background: transparent; }
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    padding: 0;
    width: 36px;
}
.blog-pagination .page-numbers.prev svg,
.blog-pagination .page-numbers.next svg {
    width: 16px;
    height: 16px;
    display: block;
}

.blog-listing-item {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 2px dashed rgba(176,0,0,.2);
}
.blog-listing-item:last-of-type { border-bottom: 0; }
.blog-listing-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
}
.blog-listing-links .comment-count-link { margin: 0; }
.blog-read-more { font-weight: 600; }
.page-intro { margin-bottom: 20px; }

/* ---------------------------------------------------------
   12. Comments (nested)
   --------------------------------------------------------- */
.comments-area {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid rgba(176,0,0,.15);
    max-width: 100%;
    overflow-x: hidden;
}
.comments-title { font-size: 22px; }
.comment-list, .comment-list .children {
    list-style: none;
    margin: 0; padding: 0;
}
.comment-list .children { margin-left: 26px; padding-left: 16px; border-left: 3px solid rgba(176,0,0,.15); }
.comment-body {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 14px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    max-width: 100%;
    box-sizing: border-box;
}
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.comment-author .avatar { border-radius: 50%; width: 40px; height: 40px; flex-shrink: 0; }
.comment-author .fn { font-weight: 400; font-family: var(--puck-font-heading); font-style: normal; }
.comment-metadata { font-size: 12px; color: #888; }
.comment-content { overflow-wrap: anywhere; word-break: break-word; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { margin-top: 6px; }
.comment-reply-link {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 10px;
    background: rgba(176,0,0,.1);
    border-radius: 3px;
}
.comment-reply-link:hover { background: var(--puck-accent-color); color: #fff; }
#respond { margin-top: 20px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    font-family: var(--puck-font-body);
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
}
.comment-form textarea { min-height: 120px; }
.comment-form .form-submit input {
    background: var(--puck-accent-color);
    color: #fff;
    border: 0;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.comment-form .form-submit input:hover { background: #f00; }

/* ---------------------------------------------------------
   13. Comic archive (chapters, text)
   --------------------------------------------------------- */
.comic-archive-chapter {
    padding: 20px 24px;
    border-radius: var(--puck-radius);
    margin-bottom: 8px;
}
.comic-archive-chapter-alt {
    background-color: rgba(0,0,0,.035);
}
.comic-archive-chapter-title {
    margin: 0 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--puck-accent-color);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: .01em;
}
.comic-archive-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color .15s ease;
}
.comic-archive-item:hover { background-color: rgba(0,0,0,.05); }
.comic-archive-date { color: #888; font-size: 13px; min-width: 100px; flex-shrink: 0; }
.comic-archive-item.puck-in-view {
    animation: tpFadeUp .5s ease both;
}

/* ---------------------------------------------------------
   13b. Character roster
   --------------------------------------------------------- */
.character-roster {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.character-card {
    display: flex;
    gap: 24px;
    padding-bottom: 28px;
    border-bottom: 2px dashed rgba(176,0,0,.2);
}
.character-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.character-photo {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}
.character-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.character-card:hover .character-photo img {
    transform: scale(1.12);
}
.character-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--puck-font-heading);
    font-size: 56px;
    color: #fff;
    background: var(--puck-accent-color);
}
.character-info { flex: 1 1 0; min-width: 0; }
.character-name { font-size: 26px; margin-bottom: .3em; }
.character-name a:hover { color: var(--puck-content-link-hover); }
.character-description { margin-bottom: .8em; }
.character-description p:last-child { margin-bottom: 0; }
.character-stats {
    list-style: none;
    margin: 0 0 .8em;
    padding: 0;
    font-size: 14px;
}
.character-stats li { margin-bottom: 2px; }
.character-stats em { font-style: italic; color: #666; }
.character-archive-link { font-weight: 600; font-size: 14px; }

/* Single character taxonomy archive: photo beside the title/description */
.character-archive-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.character-archive-photo {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
}
.character-archive-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.character-archive-intro { flex: 1 1 0; min-width: 0; }
.character-archive-intro .page-title { margin-bottom: .3em; }

@media (max-width: 600px) {
    .character-card { flex-direction: column; gap: 14px; }
    .character-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: auto; }
    .character-archive-header { flex-direction: column; gap: 14px; }
    .character-archive-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; flex-basis: auto; }
}

/* ---------------------------------------------------------
   14. Footer + scroll-to-top
   --------------------------------------------------------- */
.site-footer {
    margin-top: auto;
    background: #111;
    color: #ccc;
    padding: 22px 0;
}
.footer-text { text-align: center; font-size: 13px; }
.footer-text a { color: #FFF4C4; }
.footer-text p { margin: 0; }

.scroll-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(176,0,0,.85);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
    z-index: 400;
}
.scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover { background: #f00; }

/* ---------------------------------------------------------
   15. Animations
   --------------------------------------------------------- */
@keyframes tpFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.puck-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.puck-animate.puck-in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .puck-animate, .comic-archive-item.puck-in-view { transition: none; animation: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   16. Responsive
   --------------------------------------------------------- */
@media (min-width: 1025px) {
    .menu-toggle, .mobile-menu-overlay { display: none !important; }
}

@media (max-width: 1024px) {
    .primary-menu { display: none; }
    .navbar-social { display: none; }
    .menu-toggle { display: block; }

    /* mobile header order: ad, logo, navbar */
    .header-top-row .puck-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-bottom: 0;
    }
    .header-banner-widget { order: -1; margin: 0; align-self: center; }
    .header-banner-widget img { max-width: 100%; }
    .site-logo { align-self: center; }

    .navbar-row .puck-container { justify-content: flex-end; position: relative; padding-right: 15px; }

    .puck-container { padding: 0; }
    .site-content-row { flex-direction: column; padding: 0; margin: 0 auto; }

    /* content-column first, then left sidebar, then right sidebar */
    .site-main { order: 1; }
    .sidebar-left { order: 2; }
    .sidebar-right { order: 3; }

    .sidebar-left, .sidebar-right {
        width: 100%;
        flex-basis: 100%;
        text-align: left;
        padding: 15px;
    }
    .sidebar-left img, .sidebar-right img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    /* ...but images placed inline inside a Text widget's content (e.g. a
       row of small icons) should stay inline, not stretch full-width --
       same exception as the global img reset. Scoped to .textwidget only
       so a standalone Image widget still gets the full-width treatment. */
    .sidebar-left .textwidget img,
    .sidebar-right .textwidget img {
        display: inline;
        width: auto;
        height: auto;
        margin: 0;
    }
    .content-column { border-radius: 0; }
    .comic-stage { border-radius: 0; margin-bottom: 0; padding: 15px; }
    .puck-comic-navigation {
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .single-comic-wrapper,
    .comic-stage { text-align: center; }

    .entry-title { font-size: 24px; }
    .comment-list .children { margin-left: 10px; padding-left: 8px; }
    /* Cap visual indent at 3 levels deep -- past that, keep the same
       indent instead of continuing to compound on narrow screens. */
    .comment-list .children .children .children {
        margin-left: 0;
        padding-left: 8px;
    }
}

@media (max-width: 480px) {
    .puck-comic-navigation { gap: 6px; padding: 8px; }
    .comic-nav-btn { padding: 8px; font-size: 12px; }
    .comic-nav-label { display: none; }
    .comic-nav-btn svg { width: 18px; height: 18px; }
}