/*
 * CraftBook UK Magazine — Phase 2 Additions
 * ==========================================
 * This file is loaded after all base stylesheets and adds:
 *   1.  Comments section and form (future-ready, styled for activation)
 *   2.  Tag archive page polish
 *   3.  Article body block improvements (table, image, pullquote)
 *   4.  Full-width page template enhancements (tools pages)
 *   5.  Page link pagination (<!--nextpage--> support)
 *   6.  Admin notice styling
 *   7.  Missing utility styles discovered during integration
 *   8.  Horizontal card dark mode alignment fix
 *   9.  About strip responsive refinements
 *  10.  Category hero image contrast improvements
 *
 * All values use CSS custom properties from style.css.
 *
 * @package CraftBook_Magazine
 * @since   1.0.0 Phase 2
 */

/* ==========================================================================
   1. COMMENTS SECTION & FORM
   ========================================================================== */

.cbm-comments {
    padding-top:    var(--cbm-space-12);
    padding-bottom: var(--cbm-space-16);
    border-top:     2px solid var(--cbm-border);
    margin-top:     var(--cbm-space-8);
}

.cbm-comments__heading {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-2xl);
    color:         var(--cbm-text-heading);
    margin-bottom: var(--cbm-space-8);
}

.cbm-comments__closed {
    font-size:     var(--cbm-text-base);
    color:         var(--cbm-text-muted);
    font-style:    italic;
    padding:       var(--cbm-space-6);
    background:    var(--cbm-surface-raised);
    border-radius: var(--cbm-radius-md);
    border-left:   3px solid var(--cbm-border);
}

/* Comment list */
.cbm-comment-list {
    list-style:     none;
    padding:        0;
    margin:         0 0 var(--cbm-space-10);
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-6);
}

.cbm-comment .children {
    list-style:   none;
    padding:      0;
    margin-top:   var(--cbm-space-5);
    margin-left:  var(--cbm-space-8);
    display:      flex;
    flex-direction: column;
    gap:          var(--cbm-space-5);
    border-left:  2px solid var(--cbm-border);
    padding-left: var(--cbm-space-6);
}

.cbm-comment__body {
    background:    var(--cbm-surface);
    border:        1px solid var(--cbm-border);
    border-radius: var(--cbm-radius-md);
    padding:       var(--cbm-space-5) var(--cbm-space-6);
    transition:    var(--cbm-color-transition);
}

.cbm-comment__header {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--cbm-space-4);
    margin-bottom: var(--cbm-space-4);
}

.cbm-comment__avatar-img {
    width:         48px;
    height:        48px;
    border-radius: var(--cbm-radius-pill);
    flex-shrink:   0;
    border:        2px solid var(--cbm-border);
}

.cbm-comment__author {
    font-weight: var(--cbm-weight-semibold);
    color:       var(--cbm-text-heading);
    font-size:   var(--cbm-text-base);
}

.cbm-comment__date a {
    font-size:       var(--cbm-text-xs);
    color:           var(--cbm-text-muted);
    text-decoration: none;
}
.cbm-comment__date a:hover { color: var(--cbm-accent); }

.cbm-comment__moderation {
    font-size:     var(--cbm-text-xs);
    color:         var(--cbm-warning);
    font-style:    italic;
    margin-bottom: var(--cbm-space-3);
    padding:       var(--cbm-space-2) var(--cbm-space-3);
    background:    rgba(212,132,26,0.1);
    border-radius: var(--cbm-radius-sm);
}

.cbm-comment__content p {
    font-size:     var(--cbm-text-base);
    line-height:   var(--cbm-leading-relaxed);
    color:         var(--cbm-text);
    margin-bottom: var(--cbm-space-3);
}
.cbm-comment__content p:last-child { margin-bottom: 0; }

.cbm-comment__footer {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-4);
    margin-top:  var(--cbm-space-4);
    padding-top: var(--cbm-space-3);
    border-top:  1px solid var(--cbm-border);
}

.cbm-comment__reply a,
.cbm-comment__edit a {
    font-size:       var(--cbm-text-xs);
    font-weight:     var(--cbm-weight-semibold);
    color:           var(--cbm-text-muted);
    text-decoration: none;
    letter-spacing:  var(--cbm-tracking-wide);
    text-transform:  uppercase;
    transition:      color 0.15s ease;
}
.cbm-comment__reply a:hover,
.cbm-comment__edit a:hover { color: var(--cbm-accent); }

/* Comment form */
.cbm-comment-form__heading {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-2xl);
    color:         var(--cbm-text-heading);
    margin-bottom: var(--cbm-space-6);
    margin-top:    var(--cbm-space-10);
}

.cbm-comment-form__cancel a {
    font-size:       var(--cbm-text-sm);
    color:           var(--cbm-text-muted);
    text-decoration: none;
    margin-left:     var(--cbm-space-3);
}

.comment-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-4);
}

.cbm-comment-form__field {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-2);
}

.cbm-comment-form__field--checkbox {
    flex-direction: row;
    align-items:    flex-start;
    gap:            var(--cbm-space-3);
}

.cbm-comment-form__field--checkbox label {
    font-size:   var(--cbm-text-sm);
    color:       var(--cbm-text-muted);
    line-height: var(--cbm-leading-relaxed);
    cursor:      pointer;
}

.cbm-comment-form__field--checkbox input[type="checkbox"] {
    width:        18px;
    height:       18px;
    flex-shrink:  0;
    margin-top:   2px;
    accent-color: var(--cbm-accent);
}

.cbm-comment-form__label {
    font-size:   var(--cbm-text-sm);
    font-weight: var(--cbm-weight-semibold);
    color:       var(--cbm-text);
}

.cbm-comment-form__label .required {
    color:       var(--cbm-error);
    margin-left: var(--cbm-space-1);
}

.cbm-comment-form__input,
.cbm-comment-form__textarea {
    width:         100%;
    padding:       var(--cbm-space-3) var(--cbm-space-4);
    font-family:   var(--cbm-font-body);
    font-size:     var(--cbm-text-base);
    color:         var(--cbm-text);
    background:    var(--cbm-surface);
    border:        1px solid var(--cbm-border);
    border-radius: var(--cbm-radius);
    outline:       none;
    transition:    border-color 0.2s ease;
}

.cbm-comment-form__input:focus,
.cbm-comment-form__textarea:focus {
    border-color: var(--cbm-accent);
    box-shadow:   0 0 0 3px rgba(212,132,26,0.12);
}

.cbm-comment-form__textarea {
    min-height:  160px;
    resize:      vertical;
    line-height: var(--cbm-leading-relaxed);
}

.cbm-comment-form__guidelines,
.cbm-comment-form__note {
    font-size:  var(--cbm-text-xs);
    color:      var(--cbm-text-muted);
    margin:     0;
    font-style: italic;
}

.cbm-comments-locked {
    padding:       var(--cbm-space-6);
    background:    var(--cbm-surface-raised);
    border:        1px solid var(--cbm-border);
    border-radius: var(--cbm-radius-md);
    text-align:    center;
    color:         var(--cbm-text-muted);
    font-size:     var(--cbm-text-base);
    margin:        var(--cbm-space-10) auto;
    max-width:     var(--cbm-max-width-prose);
}

/* Comment navigation */
.comment-navigation {
    display:         flex;
    justify-content: space-between;
    margin-top:      var(--cbm-space-6);
    font-size:       var(--cbm-text-sm);
    font-weight:     var(--cbm-weight-semibold);
}
.comment-navigation a { color: var(--cbm-accent); text-decoration: none; }

/* ==========================================================================
   2. TAG ARCHIVE PAGE POLISH
   ========================================================================== */

.cbm-tag-page .cbm-archive-header {
    border-bottom: 2px solid var(--cbm-border);
}

.cbm-tag-header__pill-wrap {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    margin-bottom: var(--cbm-space-4);
}

.cbm-tag-header__icon {
    width:   28px;
    height:  28px;
    color:   var(--cbm-secondary);
    opacity: 0.8;
}

.cbm-tag-header__pill {
    display:        inline-block;
    padding:        var(--cbm-space-2) var(--cbm-space-5);
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-md);
    font-weight:    var(--cbm-weight-bold);
    color:          var(--cbm-secondary);
    background:     rgba(61,122,138,0.08);
    border:         2px solid var(--cbm-secondary);
    border-radius:  var(--cbm-radius-pill);
    letter-spacing: var(--cbm-tracking-wide);
}

.cbm-tag-header__title {
    font-size: clamp(1.5rem, 4vw, 2.44rem);
}

[data-theme="dark"] .cbm-tag-header__pill {
    background:   rgba(91,168,186,0.1);
    border-color: var(--cbm-secondary);
    color:        var(--cbm-secondary);
}

/* ==========================================================================
   3. ARTICLE BODY BLOCK IMPROVEMENTS
   Supplementing the base entry-content rules in style.css.
   ========================================================================== */

/* WordPress image block */
.entry-content .wp-block-image { margin: var(--cbm-space-8) 0; }
.entry-content .wp-block-image img { border-radius: var(--cbm-radius-md); width: 100%; height: auto; }
.entry-content .wp-block-image figcaption { font-size: var(--cbm-text-xs); color: var(--cbm-text-muted); text-align: center; margin-top: var(--cbm-space-2); font-style: italic; }

/* Table */
.entry-content .wp-block-table { margin: var(--cbm-space-8) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--cbm-text-sm); }
.entry-content .wp-block-table th,
.entry-content .wp-block-table td { padding: var(--cbm-space-3) var(--cbm-space-4); border: 1px solid var(--cbm-border); text-align: left; line-height: var(--cbm-leading-normal); }
.entry-content .wp-block-table th { background: var(--cbm-surface-raised); font-weight: var(--cbm-weight-semibold); color: var(--cbm-text-heading); }
.entry-content .wp-block-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

/* Pullquote */
.entry-content .wp-block-pullquote {
    border-top:    3px solid var(--cbm-accent);
    border-bottom: 3px solid var(--cbm-accent);
    padding:       var(--cbm-space-8) 0;
    margin:        var(--cbm-space-10) 0;
    text-align:    left;
}
.entry-content .wp-block-pullquote p {
    font-family:   var(--cbm-font-heading);
    font-style:    italic;
    font-size:     clamp(1.25rem, 3vw, 1.75rem);
    line-height:   var(--cbm-leading-snug);
    color:         var(--cbm-text-heading);
    margin-bottom: var(--cbm-space-3);
}
.entry-content .wp-block-pullquote cite {
    font-family: var(--cbm-font-body);
    font-style:  normal;
    font-size:   var(--cbm-text-sm);
    color:       var(--cbm-text-muted);
    font-weight: var(--cbm-weight-semibold);
}

/* Video / embed */
.entry-content .wp-block-embed { margin: var(--cbm-space-8) 0; }
.entry-content .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.entry-content .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Separator */
.entry-content .wp-block-separator { border: none; border-top: 2px solid var(--cbm-border); margin: var(--cbm-space-10) auto; max-width: 200px; }

/* Page links */
.cbm-page-links {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--cbm-space-2);
    margin-top:  var(--cbm-space-8);
    font-size:   var(--cbm-text-sm);
    font-weight: var(--cbm-weight-semibold);
    color:       var(--cbm-text-muted);
}

.cbm-page-links__link {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 var(--cbm-space-3);
    background:      var(--cbm-surface-raised);
    border:          1px solid var(--cbm-border);
    border-radius:   var(--cbm-radius);
    text-decoration: none;
    color:           var(--cbm-text);
    transition:      var(--cbm-transition);
}
.cbm-page-links__link:hover { background: var(--cbm-accent); border-color: var(--cbm-accent); color: #fff; }
.cbm-page-links > span { background: var(--cbm-accent); border-color: var(--cbm-accent); color: #fff; }

/* Dark mode table/content */
[data-theme="dark"] .entry-content .wp-block-table th { background: var(--cbm-surface-raised); }
[data-theme="dark"] .entry-content .wp-block-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

/* ==========================================================================
   4. FULL-WIDTH PAGE TEMPLATE ENHANCEMENTS
   Interactive tools: chatbot, games, quiz, infographics, eBook, personality test.
   ========================================================================== */

/* Give the page content maximum horizontal space */
.cbm-page-article--fullwidth .cbm-page-article__body--fullwidth {
    padding-left:  0;
    padding-right: 0;
}

.cbm-page-article--fullwidth .cbm-page-article__body--fullwidth .cbm-container {
    max-width: var(--cbm-max-width);
    padding-left:  var(--cbm-container-pad-x);
    padding-right: var(--cbm-container-pad-x);
}

/* Iframes in Classic Editor full-width pages */
.cbm-layout-fullwidth .entry-content iframe {
    width:     100%;
    max-width: 100%;
    border:    none;
    display:   block;
}

/* Responsive iframes with a max height */
.cbm-layout-fullwidth .entry-content .cbm-iframe-wrap {
    position:       relative;
    width:          100%;
    padding-bottom: 56.25%;
    height:         0;
    overflow:       hidden;
}

.cbm-layout-fullwidth .entry-content .cbm-iframe-wrap iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
}

/* Remove prose-width constraint on full-width pages */
.cbm-layout-fullwidth .entry-content {
    max-width: var(--cbm-max-width);
    margin:    0 auto;
}

/* Drop cap disabled on full-width/tool pages — not appropriate for tools */
.cbm-layout-fullwidth .entry-content > p:first-of-type::first-letter {
    font-size:   1em;
    float:       none;
    line-height: inherit;
    margin:      0;
    color:       inherit;
}

/* Classic Editor images on full-width pages */
.cbm-layout-fullwidth .entry-content img.aligncenter { margin: var(--cbm-space-6) auto; }
.cbm-layout-fullwidth .entry-content img.alignleft   { float: left;  margin: 0 var(--cbm-space-6) var(--cbm-space-4) 0; }
.cbm-layout-fullwidth .entry-content img.alignright  { float: right; margin: 0 0 var(--cbm-space-4) var(--cbm-space-6); }

/* ==========================================================================
   5. ADMIN NOTICE STYLING
   Shown to admins when configuration actions are needed.
   ========================================================================== */

.cbm-admin-notice {
    position:    fixed;
    bottom:      0;
    left:        0;
    right:       0;
    background:  var(--cbm-accent);
    color:       #fff;
    padding:     var(--cbm-space-3) var(--cbm-space-6);
    font-size:   var(--cbm-text-sm);
    z-index:     var(--cbm-z-toast);
    display:     flex;
    gap:         var(--cbm-space-4);
    align-items: center;
}

.cbm-admin-notice a { color: #fff; font-weight: var(--cbm-weight-bold); }
.cbm-admin-notice button { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 2px 8px; border-radius: var(--cbm-radius-sm); cursor: pointer; margin-left: auto; }
.cbm-admin-notice button:hover { background: rgba(255,255,255,0.2); }

/* ==========================================================================
   6. COPY LINK FEEDBACK
   ========================================================================== */

.cbm-copied { position: relative; }
.cbm-copied::after {
    content:        'Copied!';
    position:       absolute;
    bottom:         calc(100% + 6px);
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--cbm-primary);
    color:          #fff;
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-bold);
    padding:        3px 8px;
    border-radius:  var(--cbm-radius-sm);
    white-space:    nowrap;
    pointer-events: none;
    animation:      cbm-fade-in 0.15s ease;
}

@keyframes cbm-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ==========================================================================
   7. ABOUT STRIP RESPONSIVE REFINEMENTS
   ========================================================================== */

/* On mobile, single column — text first, topics below */
@media (max-width: 767px) {
    .cbm-about-strip__inner {
        grid-template-columns: 1fr;
    }

    .cbm-about-strip__desc {
        max-width: 100%;
    }
}

/* ==========================================================================
   8. HORIZONTAL CARD DARK MODE — ensure thumb stays correctly sized ─────────
   ========================================================================== */

[data-theme="dark"] .cbm-card--horizontal {
    background:   var(--cbm-surface);
    border-color: var(--cbm-border);
}

[data-theme="dark"] .cbm-card--horizontal:hover {
    background: var(--cbm-surface-raised);
}

/* ==========================================================================
   9. CATEGORY HERO IMAGE — CONTRAST REFINEMENTS
   When an image is set, ensure text remains readable.
   ========================================================================== */

.cbm-category-hero--has-image .cbm-category-hero__title {
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.cbm-category-hero--has-image .cbm-category-hero__desc {
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* When image is set, increase overlay opacity slightly */
.cbm-category-hero--has-image .cbm-category-hero__overlay {
    background: linear-gradient(
        to right,
        rgba(10, 18, 35, 0.88) 0%,
        rgba(10, 18, 35, 0.60) 55%,
        rgba(10, 18, 35, 0.35) 100%
    );
}

/* ==========================================================================
   10. STREAM GRID SECONDARY — CARD IMAGE CONSISTENCY
   Ensures all three secondary cards in each category stream have
   identical left padding, eliminating the white-space discrepancy.
   ========================================================================== */

/* Force all secondary horizontal cards to identical box model */
.cbm-stream-grid__secondary .cbm-card--horizontal {
    padding:     var(--cbm-space-4);
    align-items: flex-start;
}

/* Thumbnail: fixed square, no overflow */
.cbm-stream-grid__secondary .cbm-card--horizontal .cbm-card--horizontal__thumb {
    width:       88px;
    min-width:   88px;
    height:      88px;
    flex-shrink: 0;
    overflow:    hidden;
    border-radius: var(--cbm-radius);
}

/* Image inside thumb fills it exactly */
.cbm-stream-grid__secondary .cbm-card--horizontal .cbm-img-ratio--square {
    width:        100%;
    height:       100%;
    aspect-ratio: unset;
}

.cbm-stream-grid__secondary .cbm-card--horizontal .cbm-img-ratio--square img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ==========================================================================
   11. MISC — SMALL GAPS FOUND DURING INTEGRATION TESTING
   ========================================================================== */

/* Ensure no-posts pages have a minimum height */
.cbm-category-page__content:empty,
.cbm-archive-page:empty {
    min-height: 40vh;
}

/* WordPress default caption alignment */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--cbm-text-xs); color: var(--cbm-text-muted); font-style: italic; text-align: center; margin-top: var(--cbm-space-2); }

/* Logged-in comment notice */
.comment-form .logged-in-as { font-size: var(--cbm-text-sm); color: var(--cbm-text-muted); margin: 0; }
.comment-form .logged-in-as a { color: var(--cbm-accent); }

/* WordPress generated classes for alignment */
.alignleft  { float: left;  margin: 0 var(--cbm-space-5) var(--cbm-space-3) 0; }
.alignright { float: right; margin: 0 0 var(--cbm-space-3) var(--cbm-space-5); }
.aligncenter { display: block; margin: var(--cbm-space-4) auto; }
.alignnone  { float: none; }

/* Clearfix for classic content */
.entry-content::after { content: ''; display: table; clear: both; }