/*
Theme Name:  DPTF Theme
Description: Child theme of Kadence for Don't Pick The Flowers webcomic by David Hurley. Provides a clean, responsive comic-first layout using the My Comics plugin for all comic rendering.
Template:    kadence
Version:     1.1.9
Author:      Ad-Vantage Multimedia
Author URI:  https://www.advr.net
Text Domain: dptf-theme
*/

/* ============================================================
   BANNER HEADER  (header.php — simple full-width banner)
   No Kadence header builder; just #masthead > a > img.
   ============================================================ */

/* Full-width banner — override any Kadence container constraints.
   Using max-width:none and !important because Kadence applies
   .site-header { max-width } via its own stylesheet. */
/* Banner outer — full viewport width, black bg fills sides on wide screens */
.dptf-banner-header,
#masthead.dptf-banner-header {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    background: #000;
    box-sizing: border-box;
}

/* Inner link — capped at the banner's native pixel width and centered.
   Update this value if you replace the banner with a higher-res image. */
.dptf-banner-link,
#masthead.dptf-banner-header a.dptf-banner-link {
    display: block !important;
    width: 100% !important;
    max-width: 980px !important;  /* native banner width */
    margin: 0 auto !important;
    line-height: 0;
    padding: 0 !important;
}

.dptf-banner-img,
#masthead.dptf-banner-header img.dptf-banner-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* ============================================================
   SINGLE COMIC POSTS
   Body class .single-comic is added automatically by Kadence
   for singular views of the "comic" custom post type.
   ============================================================ */

/* Hide the post title / article header on single comic pages.
   Kadence uses both .entry-header and .article-header depending on context;
   also target h1.entry-title directly so it disappears on any template
   variant (normal / full-width / Elementor passthrough). */
.single-comic .entry-header,
.single-comic .article-header,
.single-comic h1.entry-title,
.single-comic .entry-hero,
article.type-comic .entry-header,
article.type-comic .article-header,
article.type-comic h1.entry-title {
    display: none !important;
}

/* Tighten the content padding slightly so the comic sits closer
   to the top of the card rather than deep inside padded whitespace.
   !important overrides any Kadence rule with higher specificity that
   could be zeroing out or overriding this padding and causing the
   comments section to appear flush with the card edge. */
.single-comic .entry-content-wrap {
    padding: 1rem 1.5rem 1.5rem !important;
}

/* Ensure the comic image is always responsive */
.single-comic #comic img,
.dptf-home-comic #comic img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Nav bar: keep it centred and no wider than the comic */
.single-comic #comic-nav-wrapper,
.dptf-home-comic #comic-nav-wrapper {
    max-width: 927px;
    margin: 0.75rem auto;
}

/* ============================================================
   HOMEPAGE — home.php template
   Class .dptf-home-comic is added by home.php on the article.
   ============================================================ */

/* Remove the heavy top/bottom margin Kadence adds to .content-area
   on the homepage and single comic pages — the comic should feel
   close to the header consistently across both page types. */
.home .content-area,
.single-comic .content-area {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Match the single-entry card look Kadence uses for posts */
.dptf-home-comic.single-entry {
    box-shadow: 0px 15px 15px -10px rgba(0, 0, 0, 0.05);
}

.dptf-home-comic .entry-content-wrap {
    padding: 1rem 1.5rem 1.5rem;
}

/* Centre the comic wrap and prevent overflow */
.dptf-home-comic #comic-wrap {
    text-align: center;
    max-width: 100%;
}

/* ============================================================
   GLOBAL COMIC STYLES
   These apply to both homepage and single comic contexts.
   ============================================================ */

/* Comic nav — flex layout handled by my-comics.css; no overrides needed here */

/* Transcript block (comic-post-extras slot) */
.comic-transcript {
    margin-top: 1.5rem;
}

/* Chapter / character taxonomy strip */
.comic-post-info {
    font-size: 0.9rem;
    color: var(--global-palette5);
    margin: 0.5rem 0 0;
}

.comic-post-info a {
    color: var(--global-palette-highlight);
    text-decoration: none;
}

.comic-post-info a:hover {
    text-decoration: underline;
}

/* ============================================================
   HEADER — FULL-WIDTH BANNER
   The site uses a wide banner image (cropped-SBANNER.jpg) as
   the Kadence logo. By default Kadence puts the logo inline
   with the site title and nav inside a flex/constrained
   container. These rules override that so the banner stretches
   edge-to-edge and nothing else appears in the header.
   ============================================================ */

/* Strip padding from every header wrapper layer */
#masthead,
.site-header,
.site-main-header-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.site-main-header-inner-wrap {
    padding: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* header-nav-wrap is the flex row (logo + nav). Override to block
   so the logo fills the whole row rather than sharing space with nav. */
.header-nav-wrap {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Logo container fills the full header width */
.site-branding {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site-branding a,
.site-branding .custom-logo-link {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;   /* eliminates the 4 px gap below <img> */
    padding: 0 !important;
    margin: 0 !important;
}

/* Banner image: full width, natural proportional height, no caps */
.site-branding .custom-logo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide Kadence desktop + mobile navigation from the header entirely.
   Navigation moves to the footer (rendered by dptf-setup footer HTML). */
.main-navigation,
.header-navigation,
.site-header nav,
.kadence-header-nav,
.kadence-mobile-nav-toggle,
.header-hamburger,
.mobile-navigation {
    display: none !important;
}

/* ============================================================
   FOOTER
   Kadence Footer Builder handles layout; these rules add a thin
   top border and a slightly darker background so the footer
   feels distinct from the content area.
   ============================================================ */

#colophon {
    border-top: 1px solid var(--global-palette7);
    background: var(--global-palette8);
}

.footer-html-inner p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--global-palette5);
}

.footer-html-inner a {
    color: var(--global-palette-highlight);
}

/* ============================================================
   SITE TITLE & SITE DESCRIPTION — always hidden
   The banner image carries all header identity. Hide every
   selector Kadence might use for text title / tagline.
   ============================================================ */

.site-title,
.site-branding .site-title,
.site-description,
p.site-title,
h1.site-title,
.site-name-and-description,
.site-branding .site-name {
    display: none !important;
}

/* ============================================================
   BELOW COMIC — 3-column strip (shop / donate / social)
   Mirrors the layout ComicPress themes place below the nav bar.
   The strip is powered by the "Below Comic" Kadence widget area
   (registered in functions.php) and injected via the_content
   filter at priority 30.
   ============================================================ */

.below-comic-wrap {
    margin-top: 1.5rem;
    border-top: 1px solid var(--global-palette7, #e2e8f0);
    padding-top: 1.5rem;
}

.below-comic-inner {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Each widget instance gets this class via the sidebar's before_widget */
.below-comic-inner .below-comic-col {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
}

.below-comic-inner .below-comic-col img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 0.5rem;
}

.below-comic-inner .below-comic-col p {
    font-size: 0.875rem;
    color: var(--global-palette5, #555);
    margin: 0.25rem 0;
}

/* Social connect buttons */
.dptf-social-btn {
    display: inline-block;
    padding: 0.4em 1.2em;
    border-radius: 4px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0.3rem 0;
}
.dptf-social-btn.facebook { background: #1877F2; }
.dptf-social-btn.twitter  { background: #1DA1F2; }

@media (max-width: 600px) {
    .below-comic-inner {
        flex-direction: column;
        align-items: center;
    }
    .below-comic-inner .below-comic-col {
        width: 100%;
        max-width: 360px;
        /* Each widget's inner HTML already provides its own border, background,
           and padding (set by dptf-setup). Remove the outer CSS duplicate so
           there is only one visible box per column on mobile, and no extra
           space below the last column that can bleed into the footer nav. */
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
    /* Ensure a clear visual gap between the widget strip and the footer nav */
    .below-comic-wrap {
        margin-bottom: 1.5rem;
    }
}

/* ============================================================
   FOOTER NAVIGATION
   Rendered as part of Kadence's footer_html_content theme mod
   (set by the DPTF Setup plugin). Styled to match the ComicPress
   footer nav: centred, uppercase, link-coloured.
   ============================================================ */

.dptf-footer-nav {
    text-align: center;
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--global-palette7, #ddd);
}

.dptf-footer-nav a {
    display: inline-block;
    padding: 0 1.1rem;
    color: var(--global-palette-highlight, #c00);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-right: 1px solid currentColor;
}

.dptf-footer-nav a:last-child {
    border-right: none;
}

.dptf-footer-nav a:hover {
    text-decoration: underline;
}

/* ============================================================
   BELOW-COMIC COLUMNS — visibility hardening
   Ensure each column has a visible minimum presence even when
   remote images fail (e.g. on staging / test domains).
   ============================================================ */

.below-comic-inner .below-comic-col {
    background: var(--global-palette9, #fafafa);
    border: 1px solid var(--global-palette7, #e2e8f0);
    border-radius: 4px;
    padding: 1rem;
    min-height: 80px;
}

.below-comic-inner .below-comic-col a img {
    display: block;
    margin: 0 auto 0.5rem;
}

/* "Connect on" heading inside social column */
.dptf-social-connect-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* ============================================================
   POST META BLOCK — title, date badge, author/date, Chapter,
   Tags, Related Comics. Rendered by single-comic.php below the
   nav bar, mirroring the ComicPress metadata block on the live
   dontpicktheflowers.com site.
   ============================================================ */

.dptf-post-meta {
    max-width: 680px;           /* matches .dptf-comments-section width */
    margin: 0.75rem auto 0;
    padding: 0.75rem 0 0.25rem;
    border-top: 1px solid var(--global-palette7, #e2e8f0);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--global-palette4, #444);
    box-sizing: border-box;
}

/* Flex row: date badge on the left, title+byline on the right */
.dptf-meta-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}

/* Calendar-style badge: coloured month strip + large day number */
.dptf-date-badge {
    flex-shrink: 0;
    width: 46px;
    border: 1px solid var(--global-palette6, #ccc);
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    line-height: 1.2;
}

.dptf-date-badge .date-month {
    display: block;
    background: #533595;        /* same purple as nav buttons — hardcoded to avoid Kadence's blue palette-highlight */
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 0;
}

.dptf-date-badge .date-day {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--global-palette3, #222);
    padding: 3px 0 5px;
}

.dptf-meta-info {
    flex: 1;
    min-width: 0;
}

.dptf-post-title-line {
    font-size: 1rem;
    font-weight: 700;
    color: var(--global-palette3, #222);
    margin: 0 0 0.15rem;
    line-height: 1.3;
}

.dptf-meta-byline {
    font-size: 0.8rem;
    color: var(--global-palette5, #666);
    margin: 0;
}

.dptf-meta-byline a {
    color: var(--global-palette-highlight, #533595);
    text-decoration: none;
}

.dptf-meta-byline a:hover {
    text-decoration: underline;
}

/* Chapter and Tags lines */
.dptf-meta-chapter,
.dptf-meta-tags {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--global-palette5, #666);
}

.dptf-meta-chapter a,
.dptf-meta-tags a {
    color: var(--global-palette-highlight, #533595);
    text-decoration: none;
}

.dptf-meta-chapter a:hover,
.dptf-meta-tags a:hover {
    text-decoration: underline;
}

/* Related Comics section */
.dptf-related-comics {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--global-palette7, #e2e8f0);
    font-size: 0.8rem;
}

.dptf-related-comics > strong {
    display: block;
    font-size: 0.85rem;
    color: var(--global-palette3, #222);
    margin-bottom: 0.35rem;
}

.dptf-related-comics ul {
    margin: 0;
    padding-left: 1.2rem;
    list-style: disc;
}

.dptf-related-comics li {
    margin: 0.2rem 0;
}

.dptf-related-comics a {
    color: var(--global-palette-highlight, #533595);
    text-decoration: none;
}

.dptf-related-comics a:hover {
    text-decoration: underline;
}

/* ============================================================
   COMMENTS — single comic pages
   Rendered inside .dptf-comments-section within the article
   card, so comments stay visually in line with the comic.
   All text is scaled down to keep the section unobtrusive.
   ============================================================ */

/* Section wrapper — constrained to 927 px (matches comic image and nav bar)
   and centred with auto margins so its left/right edges align with the
   comic image. Kadence's .comments-area carries 24 px of inner padding that
   shifts content 68 px further left than the comic; this is corrected by
   zeroing that padding on the child selectors below. */
.dptf-comments-section {
    max-width: 680px;           /* narrower than comic (927 px) for a readable comment column */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--global-palette7, #e2e8f0);
    overflow: hidden;
    box-sizing: border-box;
}

/* Strip Kadence's default 24 px left/right padding on the inner comment
   containers so content starts flush with the 927 px section boundary,
   matching the comic image and nav-bar left edge exactly. */
.dptf-comments-section .comments-area,
.dptf-comments-section #comments,
.dptf-comments-section #respond {
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Scale down the entire block: comments list, form, meta */
.dptf-comments-section,
.dptf-comments-section .comment-list,
.dptf-comments-section .comment-body,
.dptf-comments-section .comment-meta,
.dptf-comments-section .comment-respond,
.dptf-comments-section .comment-form {
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Section headings (e.g. "4 Comments", "Leave a Reply") */
.dptf-comments-section h2.comments-title,
.dptf-comments-section #reply-title,
.dptf-comments-section .comment-reply-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

/* Form fields and labels */
.dptf-comments-section .comment-form label {
    font-size: 0.8rem;
}

.dptf-comments-section .comment-form input[type="text"],
.dptf-comments-section .comment-form input[type="email"],
.dptf-comments-section .comment-form input[type="url"],
.dptf-comments-section .comment-form textarea {
    font-size: 0.8rem;
    width: 100%;
    box-sizing: border-box;
}

/* Submit button — keep it readable but proportional */
.dptf-comments-section .comment-form input[type="submit"],
.dptf-comments-section .form-submit .submit {
    font-size: 0.8rem;
    padding: 0.35rem 1rem;
}

/* ============================================================
   MOBILE LAYOUT — full-width comic on small screens
   Remove left/right padding from the content wrapper so the comic
   image fills the full viewport width (the image already has built-in
   whitespace). Comments get a small independent padding for readability.
   ============================================================ */
@media (max-width: 540px) {
    .single-comic .entry-content-wrap,
    .dptf-home-comic .entry-content-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Comments sit inside the now-zero-padded wrapper, so restore
       a modest inset so text doesn't run to the screen edge. */
    .dptf-comments-section {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ============================================================
   MOBILE NAV — hide First / Last buttons on small screens
   The nav order is always: First | Prev | Comments | Next | Last,
   so :first-child and :last-child reliably target those cells
   whether they are active <a> links or void <span> placeholders.
   ============================================================ */
@media (max-width: 540px) {
    #comic-nav-wrapper td:first-child,
    #comic-nav-wrapper td:last-child {
        display: none;
    }
}