/*
Theme Name: TrueNuff Comic
Theme URI: https://www.truenuff.com
description: A child theme of the UnderStrap WordPress theme for use with the Webcomic plugin
Author: JD3 Creative
Author URI: https://www.jd3creative.com
Template:     understrap
Version:      1.0.0
*/

body {
    background: #ebebea url("images/background-tile.png") repeat;
    font-family: "Pangolin", "Comic Sans", sans-serif !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Permanent Marker", sans-serif;
    font-weight: 500;
    text-transform: lowercase;
}

.entry-content .h1,
.entry-content .h2,
.entry-content .h3,
.entry-content .h4,
.entry-content .h5,
.entry-content .h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.h1.entry-title,
h1.entry-title,
h1.page-title {
    color: #222 !important;
    font-family: "Permanent Marker", sans-serif;
    text-transform: lowercase;
    margin-bottom: 0.4rem;
}

.entry-content .h3,
.entry-content h3 {
    color: #444 !important;
}
.entry-content .h4,
.entry-content h4 {
    color: #666 !important;
}

.entry-content .h1.fancy,
.entry-content .h2.fancy,
.entry-content .h3.fancy,
.entry-content .h4.fancy,
.entry-content .h5.fancy,
.entry-content .h6.fancy,
.entry-content h1.fancy,
.entry-content h2.fancy,
.entry-content h3.fancy,
.entry-content h4.fancy,
.entry-content h5.fancy,
.entry-content h6.fancy {
    background: #ffc;
    padding: 10px;
    margin: 0 auto 30px;
    width: 360px;
    text-align: center;
    max-width: 100%;
    transform: rotate(2deg);
    box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #0c85ff !important;
}

#content a {
    color: #0c85ff;
    text-decoration: none;
}

#content a:hover,
#content a:active {
    color: #409fff;
    text-decoration: underline;
}

#content a:visited {
    color: #0059b2;
}

.btn {
    font-family: "Pangolin", sans-serif;
}

.btn.btn-primary {
    background: #0c85ff !important;
    border: 1px solid #0c85ff !important;
    text-decoration: none;
}

a.btn.btn-primary {
    color: #fff !important;
    font-weight: bold;
    text-decoration: none !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus {
    background: #0059b2 !important;
    border: 1px solid #0059b2 !important;
}

/* PAGINATION OVERRIDE */
.pagination {
    margin-top: 30px;
    justify-content: center;
}

.page-item.active .page-link {
    color: #fff;
    background-color: #409fff !important;
    border-color: #409fff !important;
}

.webcomic-navigation a,
.next-webcomic {
    font-size: 1.4rem !important;
    color: #000 !important;
    border-radius: 8px;
    font-family: "Permanent Marker", sans-serif;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0;
    text-transform: lowercase;
}

@media (max-width: 992px) {
    .webcomic-navigation a,
    .next-webcomic {
        font-size: 1rem !important;
        color: #000 !important;
        border-radius: 8px;
        font-family: "Permanent Marker", sans-serif;
        font-weight: 500;
        text-decoration: none;
        margin-bottom: 0;
        text-transform: lowercase;
    }
}

.webcomic-navigation a {
    padding-top: 6px;
    padding-bottom: 6px;
}

.webcomic-navigation a:hover,
.webcomic-navigation a:active,
.webcomic-navigation a:focus {
    background: #d9ecff;
    text-decoration: none !important;
}

.next-webcomic {
    color: #0c85ff;
    text-align: center;
    padding-top: 15px;
    margin-bottom: 20px;
}

.navbar-brand.custom-logo-link img {
    max-height: 55px;
    width: auto;
    margin-top: 10px;
}

@media (max-width: 992px) {
    .navbar-brand.custom-logo-link img {
        max-height: 35px;
        width: auto;
        margin: 0;
    }
}

.navbar .slogan {
    color: #fff;
    text-align: left;
    font-size: 0.8rem;
    margin-left: 3px;
}

@media (min-width: 768px) {
    .navbar .slogan {
        font-size: 1rem;
        margin-left: 5px;
    }
}

.widget-title {
    font-size: 18px;
    font-weight: 600;
}

.widget_rss {
    margin-bottom: 20px;
}

.widget_rss ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.widget_rss a,
.widget_rss a:visited {
    color: #fff;
}

.widget_rss a:hover,
.widget_rss a:focus,
.widget_rss a:active {
    text-decoration: underline;
    color: #fff;
}

.rsswidget img {
    vertical-align: baseline;
}

.widget_rss li {
    margin: 0;
    padding: 10px 0;
}

.rss-date {
    display: block;
    color: #4a525c;
    font-size: 12px;
}

nav.navbar.bg-primary {
    background: #1d2733
        url("/wp-content/uploads/2020/05/background-tile-dark.png") !important;
}

.navbar-dark .navbar-toggler {
    background: #06111f;
    color: #fff !important;
    border-color: #2d4159 !important;
    font-size: 22px;
}

.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
    background: #0059b2;
}

#content .entry-meta,
#content .entry-meta a {
    color: #999;
    font-size: 12px;
    margin-bottom: 0.5em;
}

#content .comic-meta,
#content .comic-meta h1.comic-title {
    color: #999;
    font-size: 14px !important;
}

#content .comic-meta h1.comic-title {
    display: inline-block;
    display: none;
}

#content .comic-meta a {
    color: #999 !important;
}

#content .comic-meta a:hover {
    color: #000 !important;
    text-decoration: underline !important;
}

.comic-date,
.comic-meta,
.comic-actions {
    padding: 0;
    font-size: 0.9rem;
}

.comic-date {
    color: #000;
}

.comic-actions {
    text-align: right;
    font-size: 0.9rem;
    color: #aaa;
}

.comic-storyline {
    text-align: right;
    margin-left: 1rem;
}

#content .tags-links {
    display: block;
    line-height: 1.2;
}

#content .tags-links a {
    margin-right: 0.5em;
    border-radius: 20px;
}

#content .tags-links a:before {
    content: "#";
}

#content .tags-links a:hover {
    color: #000;
    text-decoration: none;
}

.archive p {
    margin-bottom: 0;
}

.storyline .entry-content {
    text-align: center;
}

.storyline img {
    height: auto;
    max-width: 100%;
}

.storyline .webcomic-term-media {
    display: none;
}

.characters figure img {
    border: 4px solid #ccc;
    border-radius: 10px;
}

.characters figcaption {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.wp-block-media-text {
    margin-bottom: 30px;
}

.character img {
    border: 4px solid #ccc;
    border-radius: 50%;
    width: 100%;
    max-width: 260px !important;
    height: auto;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .wp-block-media-text__media,
    .wp-block-media-text__content {
        text-align: center;
    }
}

@media (max-width: 991px) {
    .team-member {
        border-bottom: 1px solid #eee;
        margin-bottom: 25px;
        padding-bottom: 50px;
    }

    .team-member img {
        margin: auto;
    }
}

.tlp-team {
    margin-top: 40px;
}

.wp-block-button {
    font-weight: 600;
    font-family: "Pangolin", sans-serif;
}

a:hover.wp-block-button__link {
    text-decoration: none !important;
    background: #0059b2;
}

.wp-block-social-links {
    justify-content: center;
}

.wp-block-social-links .wp-social-link {
    background-color: #ccc !important;
    color: #fff;
}

.wp-block-social-links .wp-social-link svg {
    color: #fff;
    fill: #fff;
}

.wp-block-columns.panels .wp-block-column {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #e3e3e3;
    margin-bottom: 20px;
    margin-top: 20px;
}

.wp-block-columns.wells .wp-block-column,
.wp-block-group.wells {
    background: #fafafa;
    padding: 20px;
    padding-bottom: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.entry-content p,
.entry-content li {
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Desktop: Always show links, remove toggle */
@media (min-width: 992px) {
    .entry-content p,
    .entry-content li {
        font-size: 1.1rem;
        line-height: 1.6;
    }
}

.entry-content ul.strong strong {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: "Permanent Marker", sans-serif;
    font-weight: 600;
    text-transform: lowercase;
}

.entry-content ul.strong li {
    margin-bottom: 1em;
}

.entry-content hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border: 0;
    border-top: 2px solid #ccc;
}

.entry-content .more {
    font-size: 150%;
}

.entry-content .more a:after {
    content: " \f0da";
    font-family: "FontAwesome";
}

.menu-item-528 {
    background: #ffffcc;
    padding: 4px 8px;
    box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
}

@media (min-width: 767px) {
    .menu-item-528 {
        transform: rotate(2deg);
        margin-left: 1rem;
    }
}

.menu-item-528 a.nav-link {
    color: #000;
}
.menu-item-528 a:hover,
.menu-item-528.current-menu-item a.nav-link,
.active.menu-item-528 a.nav-link {
    color: #0c85ff;
}

/* EXTERNAL LINK ICON ADD 
li#menu-item-513 ul li a.dropdown-item:after,
.entry-content a[href*="//"]:not([href*="truenuff.com"]):after
{
    content: " \f08e";
    font-family: "FontAwesome";
    color: #aaa;
} */

li#menu-item-513 ul li.menu-item-1110 a.dropdown-item:after {
    content: "";
}

.navbar-nav .nav-link {
    font-family: "Permanent Marker", sans-serif;
    font-weight: 600;
    text-transform: lowercase;
    font-size: 1.2rem !important;
}

.active a.nav-link {
    color: #fff;
}

.entry-content .wp-social-link a[href*="//"]:not([href*="truenuff.com"]):after,
.entry-content .tpl-social a[href*="//"]:not([href*="truenuff.com"]):after
{
    content: "";
}

.tpl-social a {
    color: #fff !important;
    text-decoration: none;
}

.tpl-social a:hover,
.tpl-social a:active {
    text-decoration: none !important;
}

.team-member .round-img img {
    border: 4px solid #ccc;
    margin: auto;
}

#footer-links {
    text-align: center;
    background: #000;
    color: #fff;
    border-top: 1px solid #2d4159;
    padding-top: 20px;
    padding-bottom: 20px;
}

#footer-links a,
#footer-links a:visited {
    text-decoration: none;
    color: #a3afbf;
}

#footer-links a:active,
#footer-links a:focus,
#footer-links a:hover {
    text-decoration: underline;
    color: #fff;
}

#footer-links nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    line-height: 1.4;
}

#footer-links .connect {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
}

#footer-links .connect a {
    padding: 10px 20px;
    display: inline-block;
}

@media (max-width: 767px) {
    #footer-links .connect a {
        padding: 10px 10px;
    }
}

#footer-links .connect a span.fa-stack.fa-lg {
    margin-right: 0.5em;
}

#footer-links .connect a .fa-circle {
    color: #4a525c;
}

#footer-links .connect a .fa-inverse {
    color: #fff;
}

#footer-links .connect a:hover .fa-circle,
#footer-links .connect a:focus .fa-circle {
    color: #fff;
}

#footer-links .connect a:hover .fa-inverse,
#footer-links .connect a:focus .fa-inverse {
    color: #161d26;
}

#footer-links nav ul li {
    text-align: left;
    margin-bottom: 8px;
}

/* FOOTER LINKS */

/* Hide checkboxes but keep them functional */
.footer-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Hide links by default on mobile */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0.5em;
    display: none;
}

/* Clickable header */
.footer-header {
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #4a525c;
    text-transform: uppercase;
    font-size: 1rem;
    font-family: "Permanent Marker", sans-serif;
    font-weight: 600;
    text-transform: lowercase;
    margin-bottom: 0.6rem;
}

.footer-section {
    border-bottom: 1px solid #212429;
    padding: 20px 0 10px 0;
}

/* Chevron icon */
.footer-header::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    /*    transition: transform 0.2s ease; */
}

/* Show links when checked */
.footer-toggle:checked + .footer-header + .footer-links {
    display: block;
}

/* Rotate chevron when expanded */
.footer-toggle:checked + .footer-header::after {
    transform: rotate(-180deg);
}

/* Desktop: Always show links, remove toggle */
@media (min-width: 992px) {
    .footer-section {
        border: 0;
        padding: 0;
    }

    .footer-header {
        pointer-events: none;
    }

    .footer-header::after {
        content: "";
    }

    .footer-links {
        display: block !important;
    }
}

#fineprint {
    text-align: left;
    color: #4a525c;
    font-size: 0.9rem;
    padding: 20px 0;
    border-top: 1px solid #4a525c;
}

#fineprint a,
#fineprint a:visited {
    color: #4a525c;
    font-weight: bold;
}

#fineprint a:hover,
#fineprint a:active,
#fineprint a:focus {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

#fineprint .jd3creative {
    text-align: right;
}

@media (max-width: 992px) {
    #fineprint .jd3creative {
        text-align: center;
    }
}

a.webcomic-term-link:hover {
    text-decoration: none !important;
}

#wrapper-footer-full.wrapper {
    background-color: #161d26;
    padding-top: 30px !important;
    border-top: 1px solid #2d4159;
}

/* FAQ OVERRIDES */

.qe-toggle-title h4 {
    font-family: "Pangolin", "Comic Sans", sans-serif;
}

.entry-content .qe-faq-toggle {
    margin-bottom: 15px;
}

.qe-toggle-title .fa-plus-circle {
    color: #0c85ff;
}

.qe-toggle-title .fa-minus-circle {
    color: #999;
}

.qe-faq-toggle .qe-toggle-content {
    border-top: 0;
}

/* EXTERNAL LINK ICON ADD */
.entry-content .wp-block-buttons a[href*="//"]:not([href*="truenuff.com"]):after
{
    color: #fff;
    opacity: 0.66;
}

.wp-block-buttons {
    margin-bottom: 15px;
}

#updates {
    text-align: center;
    background: #1d2733
        url("/wp-content/uploads/2020/05/background-tile-dark.png");
    color: #fff;
    padding: 100px 0;
}

@media (max-width: 767px) {
    #updates {
        padding: 60px 0;
    }
}

#updates h3 {
    color: #fff;
    font-weight: 500;
}

#updates p {
    color: #8fa1b3;
    margin-bottom: 15px;
}

.social {
    margin-top: 30px;
}

.social a,
.social a:visited {
    color: #4a525c;
}

.social a:hover,
.social a:active,
.social a:focus {
    color: #0c85ff;
}

/* CONTACT FORM OVERRIDE */
.wpcf7 {
    max-width: 100% !important;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    border-radius: 10px;
}

.btn-outline-primary,
.wpcf7 input[type="submit"] {
    border-color: #0c85ff !important;
    color: #fff !important;
    background-color: #0c85ff !important;
    margin-bottom: 0;
}

.btn-outline-primary:hover,
.wpcf7 input:hover[type="submit"] {
    color: #fff !important;
    background-color: #0059b2 !important;
    border-color: #0059b2 !important;
}

.wpcf7-response-output {
    margin: 0 !important;
    border-radius: 8px;
    border: 2px solid rgb(0, 200, 0);
    background: rgba(0, 200, 0, 0.15);
    padding: 10px 20px !important;
    display: block;
}

.site-main.storyline {
    text-align: center;
}

#archive-wrapper .webcomic1_storyline-christmas-advent,
#archive-wrapper .webcomic1_storyline-single-panel-halloween {
    display: inline-block;
}

#quicklinks {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #2d4159;
    background: #161d26;
    text-align: center;
}

#quicklinks a {
    display: inline-block;
    font-size: 1rem;
    color: #a3afbf;
    padding: 8px 0;
    text-align: center;
    text-decoration: none;
    margin: 0 5px;
}

#quicklinks a:hover,
#quicklinks a:focus {
    color: #fff;
    text-decoration: none;
}

.comic-tag img {
    margin: auto;
    padding: 2px;
    background-color: #fff;
    border: 2px solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

.comic-tag .comic-tag__thumbnail {
    text-align: center;
}

.comic-tag .comic-tag__text {
    padding-left: 15px !important;
}

.comic-tag .comic-tag__thumbnail a {
    display: inline-block;
}

.alert-home {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .alert-home {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

.card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* WP IMAGE GALLERY OVERRIDE */
.blocks-gallery-grid .blocks-gallery-image figure,
.blocks-gallery-grid .blocks-gallery-item figure,
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure {
    justify-content: center !important;
}

.blocks-gallery-grid,
.wp-block-gallery {
    margin: auto;
}

ol {
    color: #999;
}

ol li {
    font-weight: bold;
}

ol li a {
    font-weight: normal;
}

.wp-block-column img {
    margin: auto;
    display: block;
}

.list-col-1 {
    column-count: 1;
}

.list-col-2 {
    column-count: 2;
}

.list-col-3 {
    column-count: 3;
}

.list-col-4 {
    column-count: 4;
}

@media (min-width: 576px) {
    .list-col-sm-1 {
        column-count: 1;
    }

    .list-col-sm-2 {
        column-count: 2;
    }

    .list-col-sm-3 {
        column-count: 3;
    }

    .list-col-sm-4 {
        column-count: 4;
    }
}

@media (min-width: 768px) {
    .list-col-md-1 {
        column-count: 1;
    }

    .list-col-md-2 {
        column-count: 2;
    }

    .list-col-md-3 {
        column-count: 3;
    }

    .list-col-md-4 {
        column-count: 4;
    }
}

@media (min-width: 992px) {
    .list-col-lg-1 {
        column-count: 1;
    }

    .list-col-lg-2 {
        column-count: 2;
    }

    .list-col-lg-3 {
        column-count: 3;
    }

    .list-col-lg-4 {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .list-col-xl-1 {
        column-count: 1;
    }

    .list-col-xl-2 {
        column-count: 2;
    }

    .list-col-xl-3 {
        column-count: 3;
    }

    .list-col-xl-4 {
        column-count: 4;
    }
}

/* HOMEPAGE FEATURES */

.latest-title {
    margin-top: 20px !important;
    text-shadow: 2px 2px 0 #fff;
}
.row.latest-comics > div {
    margin-bottom: 15px;
}

.row.latest-comics .card {
    border-radius: 0;
    margin-bottom: 0;
    border: 2px solid #ccc;
}

.row.latest-comics .card .card-body {
    padding: 5px 0;
}

.row.latest-comics a {
    text-decoration: none;
}

.row.latest-comics img.card-img-top {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 0;
}

.row.latest-comics .card.latest {
    padding: 10px;
}
.row.latest-comics .card.latest .thumb {
    max-height: 525px;
    text-align: center;
}
.row.latest-comics .card.latest .thumb img {
    height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
}

.row.latest-comics .card.recent {
    padding: 10px;
}

.row.latest-comics .card.recent img {
    border: 2px solid #000;
    height: 120px; /* set your desired crop height */
    object-fit: cover; /* fills and crops the image */
    object-position: center; /* keep the crop centered */
    position: relative;
    display: block;
    filter: grayscale(1) brightness(1) contrast(0.75);
}

.row.latest-comics .card.recent .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 128, 255, 1);
    mix-blend-mode: screen;
    pointer-events: none;
}

.row.latest-comics .card.recent .card-body .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On hover – drop the tint and return color */

.row.latest-comics .card.recent:hover {
    transform: rotate(0deg) !important ;
    transition: transform 0.1s ease;
}

.row.latest-comics .card.recent .thumb:hover img {
    filter: none;
}

.row.latest-comics .card.recent .thumb:hover::after {
    opacity: 0;
}

@media (min-width: 768px) {
}

/* Desktop: Always show links, remove toggle */
@media (min-width: 992px) {
}
.latest-comics .date,
.latest-comics .card .card-body .card-title {
    width: 100%;
    text-align: center;
}

.latest-comics .card .card-body .card-title {
    font-size: 1.8rem;
    line-height: 1;
    text-transform: lowercase;
    margin-bottom: 0.25rem;
    font-family: "Permanent Marker", sans-serif;
    font-weight: 500;
}

.row.latest-comics .card.recent .card-body .card-title {
    font-size: 1.2rem;
}

.latest-comics .date {
    font-size: 0.9rem;
}

/* ---------------------- */

.cta {
    width: 100%;
    margin-top: 25px;
}

.cta a {
    display: block;
    width: 100%;
    padding: 25px 10px;
    background-size: cover;
    background-position: center;
    white-space: nowrap;
    border-radius: 12px;
    border: 3px solid #000;
    font-family: "Permanent Marker", sans-serif;
    text-transform: lowercase;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 5px #000;
    margin-bottom: 15px;
    transition: background-size 0.3s ease;
    will-change: background-size;
}

.cta a.cta-first {
    background-color: #0380ff;
    background-image: url("/wp-content/uploads/2025/06/first-comic.jpg");
    background-repeat: no-repeat;
    background-position: center;
    border-color: #015db4;
    background-size: cover;
    transition: background-size 0.3s ease;
}

.cta a.cta-new {
    background-color: #87c526;
    background-image: url("/wp-content/uploads/2025/06/new-readers.jpg");
    background-position: center;
    background-repeat: no-repeat;
    border-color: #4c7c01;
    background-size: cover;
    transition: background-size 0.3s ease;
}

.cta a.cta-stories {
    background-color: #7c3aed;
    background-image: url("/wp-content/uploads/2025/06/stories.jpg");
    background-position: center;
    background-repeat: no-repeat;
    border-color: #5815cc;
    background-size: cover;
    transition: background-size 0.3s ease;
}

.cta a.cta-all {
    background-color: #df9f02;
    background-image: url("/wp-content/uploads/2025/06/all-comics.jpg");
    background-position: center;
    background-repeat: no-repeat;
    border-color: #b07d00;
    background-size: cover;
    transition: background-size 0.3s ease;
}

.cta a:hover,
.cta a:active,
.cta a:focus {
    border-color: #000;
    text-decoration: none;
    color: #fff;
    background-size: 130%;
}

.cta a i {
    margin-left: 0;
    transition: all 0.1 ease;
    opacity: 0.5;
}

.cta a:hover i,
.cta a:focus i,
.cta a:active i {
    opacity: 1;
}

/* END FEATURE */

.cta-link {
    margin-bottom: 0;
    font-family: "Permanent Marker", sans-serif;
    text-transform: lowercase;
    font-weight: 600;
    text-align: left;
}

.cta-link a {
    text-decoration: none !important;
}

.cta-link a:link,
.cta-link a:visited {
    font-size: 1.3rem;
    color: #0c85ff !important;
    display: block;
    border-top: 1px solid #ddd;
    padding: 15px 0;
}

.cta-link a:link:first-of-type,
.cta-link a:visited:first-of-type {
    border: 0;
}

.cta-link a:after {
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    color: #0c85ff !important;
    display: inline-block;
    margin-left: 0.2em;
    margin-right: 1em;
    position: absolute;
    right: 0px;
}

#content .cta-link a:hover {
    color: #000 !important;
}

@media (min-width: 576px) {
    .has-text-align-center.cta-link {
        text-align: center;
    }

    .cta-link a:link,
    .cta-link a:visited {
        display: inline-block;
        border: none;
        padding: 0;
    }

    .cta-link a:after {
        position: relative;
        right: 0;
    }
}

.wp-block-columns.columns-tight {
    margin-bottom: 0;
}

.page img.wp-post-image {
    display: none;
}

.alert.alert-primary {
    color: #004085;
    background: #cce5ff;
    border-color: #0c85ff;
}

.alert a.alert-link {
    color: #004085;
    white-space: nowrap;
}

.muted {
    opacity: 0.6;
}

.muted:hover,
.muted:focus {
    opacity: 1;
}

.popover-body a {
    color: #0c85ff;
    font-weight: bold;
    font-size: 18px;
    padding: 5px;
}

.popover-body a:hover {
    color: #004085;
    text-decoration: none;
}

/* CUSTOM SIMPLE TABS  */

.custom-tabs {
    width: 100%;
    margin: 1em auto;
}

/* Tab Links */
.tab-buttons {
    display: flex;
    gap: 5px;
    /* Adds space between tabs */
    border-bottom: 2px solid #666;
}

.tab-link {
    font-weight: bold;
    flex: 1;
    /* Makes tabs full width */
    padding: 10px;
    text-align: center;
    text-decoration: none;
    background: #eee;
    color: #666;
    border: 2px solid #ccc;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    /* Rounded tops */
    transition:
        background 0.2s,
        color 0.2s;
}

.tab-link:hover {
    background: #e8e8e8;
}

.tab-link.active {
    background: #fff;
    font-weight: bold;
    border-color: #666;
    border-bottom: 2px solid white;
    /* Remove bottom border */
    margin-bottom: -2px;
    /* Negative margin to eliminate bottom stroke */
    color: #666;
}

div.img-border figure img,
.rt-team-container .special01 .img-responsive,
.rt-team-container .single-team-area img {
    border: 3px solid #ccc;
}

div.img-circle figure img,
.rt-team-container .special01 .img-responsive,
.rt-team-container .single-team-area img {
    border-radius: 100%;
}

.social a {
    border: 2px solid #0c85ff;
    background: #fff;
    border-radius: 50px;
    padding: 5px 15px;
    text-decoration: none !important;
    color: #0c85ff !important;
    white-space: nowrap;
    margin-right: 0.3rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.social a::after {
    color: #0c85ff !important;
}

.social a:hover {
    border: 2px solid #004085;
    background: #004085;
    color: #fff !important;
}

.entry-meta .posted-on .updated {
    display: none;
}

/* Shared styles for story + tag listings */

#tag-listing .card {
    width: 100%;
    margin-bottom: 0;
    border: 3px solid #000;
}

/* Card image container */
# #tag-listing .card-img-top {
    background: rgba(0, 0, 0, 0.03);
    text-align: center;
    border-radius: 0;
}

#tag-listing .card-img-top img {
    width: 100%;
    height: auto;
}

#tag-listing .card-img-top img {
    height: 100px;
    object-fit: cover;
    border-bottom: 3px solid #000;
}

/* Card body + footer */
#tag-listing .card-body,
#tag-listing .card-footer {
    padding: 10px;
    padding-top: 0;
}

#tag-listing .card-footer {
    border: 0;
    background: none;
}

#tag-listing .card-title {
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 0;
    margin: 10px 0 0.3rem 0;
}

#tag-listing .card-title a {
    text-decoration: none !important;
}

#tag-listing .card-text {
    line-height: 1.5;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    font-size: 1rem;
    line-height: 1.3;
}

/* Links */
#tag-listing h3 a,
#tag-listing .h3 a {
    color: #000;
}

#tag-listing h3 a:visited,
#tag-listing .h3 a:visited {
    color: #aaa;
}

#tag-listing .small,
#tag-listing .small a {
    color: #888;
}

#tag-listing a {
    color: #000;
}
#tag-listing a:visited {
    color: #999;
    text-decoration: line-through;
}

#story-bar .card {
    border: 3px solid #000;
    margin: 10px 0;
}

#story-bar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


@media (min-width: 768px) {
#story-bar img {
    max-height: 48px;
    }
}

#story-bar .card-body {
    padding: 5px 10px;
}

.content-area {
    background: #fff;
    border: 1px solid #ccc;
    padding-top: 15px;
    padding-bottom: 10px;
}

.wrapper {
    padding: 0 !important;
    border: 0 solid #ccc;
}

@media (min-width: 992px) {
    .content-area {
        border: 2px solid #ccc;
        padding-bottom: 20px;
    }

    .wrapper {
        padding: 15px 0 !important;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 100% !important;
        margin-top: 0;
    }
}

/* TIGHTEN GUTTERS */

.row.tight-gutters {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.row.tight-gutters > [class*="col"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Text on top */
.feature-title {
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    color: #fff;
    text-align: center;
}

.feature.feature-main small {
    font-weight: bold;
    font-size: 1.1rem;
}

.webcomic-media {
    margin: -10px -10px 0 -10px;
}

.webcomic-media .widget {
    width: 100%;
    text-align: center;
}

.webcomic-media .widget img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .webcomic-media {
        margin: 0;
    }
}

.addtoany_share_save_container a,
.addtoany_shortcode a {
    text-decoration: none;
}

#navbarNavDropdown {
    justify-content: flex-end;
    font-weight: bold;
}

.popover-body a {
    text-decoration: none;
}

/* COMIC NOTES - ALERT OVERRIDE */

.text-hand {
    font-family: "Pangolin", "Comic Sans", sans-serif;
}

.comic-notes {
    font-family: "Pangolin", "Comic Sans", sans-serif;
    color: #000 !important;
    font-size: 1.1rem;
    line-height: 1.4;
    padding-top: 15px;
    padding-bottom: 15px;
}

.comic-notes i {
    opacity: 0.6;
}

.comic-notes .alert {
    border: none;
    padding-top: 20px;
}

.comic-notes .alert a {
    color: #000 !important;
    text-decoration: underline !important;
}

.comic-notes .alert a:hover,
.comic-notes .alert a:active,
.comic-notes .alert a:focus {
    color: #333 !important;
    text-decoration: underline;
}

.comic-notes .alert .tags-links a,
.comic-notes .alert .bloglist a {
    text-decoration: none !important;
}

.comic-notes .alert .tags-links a:hover,
.comic-notes .alert .bloglist a:hover {
    text-decoration: underline !important;
}

hr.tight {
    padding: 0;
    margin: 10px 0;
}

.comic-notes hr {
    border-style: dashed;
}

.comic-notes h2 {
    font-family: "Permanent Marker", sans-serif;
    text-transform: lowercase;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

.comic-notes h3 {
    font-family: "Pangolin", "Comic Sans", sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 0.66rem;
    opacity: 0.66;
}

.comic-notes h2:first-of-type {
    padding-top: 20px;
    background: url("/wp-content/uploads/2025/12/staple.png") no-repeat 50% 10px;
}

.comic-notes p,
li {
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

ul.blog-links li a:link {
    text-decoration: none !important;
}
ul.blog-links li a:hover {
    text-decoration: underline !important;
}

.comic-notes small {
    white-space: nowrap;
}

.comic-notes .alert,
.comic-transcription {
    padding: 8px;
    border-radius: 0;
    box-shadow:
        0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075),
        0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075),
        0 16px 16px hsl(0deg 0% 0% / 0.075);
}

.comic-notes .alert {
    margin-bottom: 0;
}

.comic-notes .alert-info {
    transform: rotate(-1.5deg);
}

.comic-notes .alert-warning {
    transform: rotate(2deg);
}

.comic-notes .alert-secondary {
    transform: rotate(-1deg);
}

.comic-notes .alert-success {
    transform: rotate(-0.5deg);
}

@media (min-width: 768px) {
    .comic-notes .alert-info {
        transform: rotate(-3deg);
    }

    .comic-notes .alert-warning {
        transform: rotate(2.5deg);
    }

    .comic-notes .alert-secondary {
        transform: rotate(-2deg);
    }

    .comic-notes h2 {
        font-size: 1.6rem;
    }
}

.comic-transcription {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 15px;
    font-family: monospace;
    border: 1px solid #ccc;
    background: #fff url("/wp-content/uploads/2025/12/coffee-stain.jpg")
        no-repeat 100% 100%;
    background-size: 220px;
}

@media (min-width: 768px) {
    .comic-transcription {
        background-size: 300px;
    }
}

.comic-transcription h1.transcription-title {
    font-family: monospace;
    font-size: 1.4rem !important;
    font-weight: bold;
    margin-bottom: 1rem;
    text-transform: capitalize;
    padding: 1rem 0;
    border-bottom: 2px solid #000;
}

.comic-transcription .transcription-text p {
    font-size: 0.9rem;
}

.footer-widget a {
    text-decoration: none;
}

.footer-widget a:hover,
.footer-widget a:focus,
.footer-widget a:active {
    text-decoration: underline;
}

.bloglist small {
    white-space: nowrap;
}

/* TAP TO ZOOM */

#comicLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    overflow: hidden;
}

#comicScrollContainer {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#comicScrollContainer img {
    height: 65vh;
    width: auto;
    display: block;
    pointer-events: none;
    user-select: none;
    margin-left: 0;
}

#closeLightbox {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 2.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
    text-shadow:
        0 0 6px black,
        0 0 10px black;
}

/* READ STATUS

#error-404-wrapper .content-area {
    background: #6bc4c2;
    color: #137471;
    border-color: #137471;
}

#error-404-wrapper a,
#error-404-wrapper ul,
#error-404-wrapper li,
#error-404-wrapper h1.page-title {
    color: #137471 !important;
}

#error-404-wrapper a {
    color: #137471 !important;
    text-decoration: underline !important;
}


 */

/* READ STATUS */

a.webcomic1_storyline-link,
a.webcomic1_storyline-link:hover,
a.webcomic-link:hover,
a.webcomic-link {
    text-decoration: none !important;
}

.read a.webcomic1_storyline-link::after,
.read a.webcomic-link::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    content: " \f058";
    color: #fff;
    white-space: nowrap;
}

.read a.webcomic1_storyline-link:visited::after,
.read a.webcomic-link:visited::after {
    color: #598527;
}

ul.fancy,
ol.fancy {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

ul.fancy > li,
ol.fancy > li {
    background: #fafafa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

ul.fancy strong,
ol.fancy strong {
    font-size: 1.4rem;
}

.comic-archive {
    padding-left: 3em;
}

/* EMBIGGEN NUDGE */

#embiggen-message {
    margin: 5px 0 0 0;
}

#embiggen-message .alert {
    margin: 0;
}

#featured-stories {
    padding: 40px 0;
    border-bottom: 1px solid #2d4159;

    border-top: 1px solid #eee;
    background: #161d26;
}

#featured-stories h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

/* Explore tag hover polish */
.tn-explore-item {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.tn-explore-grid a:hover {
    text-decoration: none !important;
    color: #000 !important;
}

.tn-explore-item img {
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
    border: 4px solid #ccc;
}

.tn-explore-item:hover {
    transform: translateY(-2px);
}

.tn-explore-item:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

hr#\#comments,
hr#comments {
    display: none;
}

.btn-group a.disabled {
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* CREW NOTE */

.tn-crew-note {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 5px 0;
}

.tn-crew-note__avatar {
    flex: 0 0 auto;
    width: 64px;
}

.tn-crew-note__avatar img {
    display: block;
    width: 100%;
    height: auto;
}

.tn-crew-note__bubble-wrap {
    position: relative;
    display: inline-block;
}

.tn-crew-note__bubble {
    position: relative;
    z-index: 1;
    padding: 16px;
    background: #fff;
    border: 3px solid #222;
    border-radius: 16px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
    line-height: 1;
}

.tn-crew-note__bubble p {
    margin-bottom: 0.5rem;
    line-height: 1.2;
    font-size: 1rem;
}

.tn-crew-note__bubble > *:first-child {
    margin-top: 0 !important;
}

.tn-crew-note__bubble > *:last-child {
    margin-bottom: 0 !important;
}

.tn-crew-note__tail {
    position: absolute;
    z-index: 2;
    left: -23px;
    bottom: 18px;
    width: 26px;
    height: 22px;
}