/*
 * CraftBook Magazine — Footer & Supporting Stylesheet
 * =====================================================
 * Covers:
 *   1.  Site footer — main columns layout
 *   2.  Footer brand / wordmark
 *   3.  Footer navigation
 *   4.  Footer recent posts list
 *   5.  Footer bottom bar
 *   6.  Social links in footer
 *   7.  Back-to-top button
 *   8.  Widget area styles
 *   9.  Tag page specific styles
 *  10.  Comments section
 *  11.  Comment form
 *  12.  Dark mode overrides
 *  13.  Responsive breakpoints
 *
 * All colours use CSS custom properties from style.css :root.
 */

/* ==========================================================================
   1. SITE FOOTER — MAIN COLUMNS
   ========================================================================== */

.cbm-footer {
    background:  var(--cbm-primary);
    color:       rgba(255,255,255,0.75);
    margin-top:  auto; /* Push footer to bottom in flex layouts */
    transition:  var(--cbm-color-transition);
}

.cbm-footer__main {
    padding-top:    var(--cbm-space-16);
    padding-bottom: var(--cbm-space-12);
    border-bottom:  1px solid rgba(255,255,255,0.1);
}

.cbm-footer__columns {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--cbm-space-10);
}

.cbm-footer__col-heading {
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    margin-bottom:  var(--cbm-space-5);
    padding-bottom: var(--cbm-space-3);
    border-bottom:  1px solid rgba(255,255,255,0.1);
}

/* ==========================================================================
   2. FOOTER BRAND / WORDMARK
   ========================================================================== */

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

.cbm-footer__wordmark {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    line-height:     1;
    gap:             4px;
}

.cbm-footer__wordmark-craft,
.cbm-footer__wordmark-book {
    font-family:    var(--cbm-font-heading);
    font-size:      1.75rem;
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-tight);
    display:        inline;
}

.cbm-footer__wordmark-craft {
    color:      #ffffff;
    font-style: normal;
}

.cbm-footer__wordmark-book {
    color:      var(--cbm-accent);
    font-style: italic;
}

.cbm-footer__wordmark-edition {
    display:        block;
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-bold);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin-top:     4px;
}

.cbm-footer__wordmark:hover .cbm-footer__wordmark-craft {
    color: rgba(255,255,255,0.85);
}

.cbm-footer__tagline {
    font-size:   var(--cbm-text-sm);
    color:       rgba(255,255,255,0.55);
    line-height: var(--cbm-leading-relaxed);
    max-width:   280px;
    margin:      0;
}

/* ==========================================================================
   3. FOOTER NAVIGATION
   ========================================================================== */

.cbm-footer__nav-wrap {
    /* Wraps the column heading + nav list */
}

.cbm-footer__nav-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--cbm-space-2);
}

.cbm-footer__nav-list li a,
.cbm-footer__nav-list a {
    font-size:       var(--cbm-text-sm);
    color:           rgba(255,255,255,0.65);
    text-decoration: none;
    transition:      color 0.15s ease;
    display:         inline-flex;
    align-items:     center;
    gap:             var(--cbm-space-2);
    padding:         var(--cbm-space-1) 0;
}

.cbm-footer__nav-list li a:hover,
.cbm-footer__nav-list a:hover {
    color: var(--cbm-accent);
}

.cbm-footer__nav-list li.current-menu-item > a,
.cbm-footer__nav-list li.current_page_item > a {
    color: var(--cbm-accent);
}

/* ==========================================================================
   4. FOOTER RECENT POSTS LIST
   ========================================================================== */

.cbm-footer__recent-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--cbm-space-4);
}

.cbm-footer__recent-item {
    display:      flex;
    flex-direction: column;
    gap:          var(--cbm-space-1);
    padding-bottom: var(--cbm-space-4);
    border-bottom:  1px solid rgba(255,255,255,0.08);
}

.cbm-footer__recent-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cbm-footer__recent-link {
    font-size:       var(--cbm-text-sm);
    font-weight:     var(--cbm-weight-semibold);
    color:           rgba(255,255,255,0.8);
    text-decoration: none;
    line-height:     var(--cbm-leading-snug);
    transition:      color 0.15s ease;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;
}

.cbm-footer__recent-link:hover {
    color: var(--cbm-accent);
}

.cbm-footer__recent-date {
    font-size: var(--cbm-text-xs);
    color:     rgba(255,255,255,0.35);
}

/* ==========================================================================
   5. FOOTER BOTTOM BAR
   ========================================================================== */

.cbm-footer__bottom {
    padding-top:    var(--cbm-space-5);
    padding-bottom: var(--cbm-space-5);
}

.cbm-footer__bottom-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--cbm-space-4);
    flex-wrap:       wrap;
}

.cbm-footer__copyright {
    font-size: var(--cbm-text-xs);
    color:     rgba(255,255,255,0.4);
    margin:    0;
    order:     1;
}

.cbm-footer__legal-nav {
    order: 2;
}

.cbm-footer__legal-list {
    list-style:  none;
    margin:      0;
    padding:     0;
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-4);
    flex-wrap:   wrap;
}

.cbm-footer__legal-list li a {
    font-size:       var(--cbm-text-xs);
    color:           rgba(255,255,255,0.4);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.cbm-footer__legal-list li a:hover {
    color: rgba(255,255,255,0.7);
}

/* ==========================================================================
   6. SOCIAL LINKS IN FOOTER
   ========================================================================== */

.cbm-footer__social {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    flex-wrap:   wrap;
}

.cbm-footer__social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    background:      rgba(255,255,255,0.06);
    border:          1px solid rgba(255,255,255,0.12);
    border-radius:   var(--cbm-radius);
    color:           rgba(255,255,255,0.6);
    text-decoration: none;
    transition:      background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cbm-footer__social-link:hover {
    background:   var(--cbm-accent);
    border-color: var(--cbm-accent);
    color:        #ffffff;
    text-decoration: none;
}

.cbm-footer__social-link svg {
    width:  18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   7. BACK-TO-TOP BUTTON
   ========================================================================== */

.cbm-footer__back-to-top {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    background:      rgba(255,255,255,0.08);
    border:          1px solid rgba(255,255,255,0.15);
    border-radius:   var(--cbm-radius);
    color:           rgba(255,255,255,0.6);
    cursor:          pointer;
    transition:      background 0.2s ease, color 0.2s ease;
    flex-shrink:     0;
    order:           3;
}

.cbm-footer__back-to-top:hover {
    background: var(--cbm-accent);
    border-color: var(--cbm-accent);
    color:      #ffffff;
}

/* Show/hide via JS — visible after scroll */
.cbm-footer__back-to-top {
    opacity:    1;
    transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
}

/* ==========================================================================
   8. WIDGET AREA STYLES
   Widget content in footer columns inherits from above, but these
   rules ensure WordPress default widgets render cleanly.
   ========================================================================== */

/* Widget title */
.cbm-widget__title {
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-black);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
    margin-bottom:  var(--cbm-space-5);
    padding-bottom: var(--cbm-space-3);
    border-bottom:  1px solid rgba(255,255,255,0.1);
}

/* Widget: Recent Posts */
.cbm-widget .wp-block-latest-posts,
.widget_recent_entries ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.widget_recent_entries li {
    padding:     var(--cbm-space-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.widget_recent_entries li:last-child {
    border-bottom: none;
}

.widget_recent_entries a {
    font-size:       var(--cbm-text-sm);
    color:           rgba(255,255,255,0.75);
    text-decoration: none;
    line-height:     var(--cbm-leading-snug);
    transition:      color 0.15s ease;
}

.widget_recent_entries a:hover {
    color: var(--cbm-accent);
}

/* Widget: Categories */
.widget_categories ul {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        var(--cbm-space-2);
}

.widget_categories a {
    font-size:       var(--cbm-text-sm);
    color:           rgba(255,255,255,0.65);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.widget_categories a:hover {
    color: var(--cbm-accent);
}

/* Widget: Text / HTML */
.widget_text p {
    font-size:   var(--cbm-text-sm);
    color:       rgba(255,255,255,0.65);
    line-height: var(--cbm-leading-relaxed);
}

.widget_text a {
    color: var(--cbm-accent);
}

/* ==========================================================================
   9. TAG PAGE SPECIFIC STYLES
   ========================================================================== */

.cbm-tag-header {
    margin-bottom: var(--cbm-space-10);
}

.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.1);
    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);
}

/* ==========================================================================
   10. COMMENTS SECTION
   ========================================================================== */

.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 {
    /* Threaded replies indented */
}

.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__meta {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-1);
}

.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);
}

/* Comments 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;
}

/* ==========================================================================
   11. 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--inline {
    /* Stays full-width on mobile, goes inline on desktop (see breakpoints) */
}

.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;
    line-height:   var(--cbm-leading-normal);
}

.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;
    font-family:     var(--cbm-font-body);
    line-height:     var(--cbm-leading-relaxed);
}

.cbm-comment-form__guidelines {
    font-size:  var(--cbm-text-xs);
    color:      var(--cbm-text-muted);
    margin-top: var(--cbm-space-2);
    font-style: italic;
}

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

.cbm-comment-form__submit-wrap {
    /* Wrapper around the submit button */
}

.cbm-comment-form__submit {
    /* Inherits cbm-btn cbm-btn--primary from button classes */
    margin-top: var(--cbm-space-4);
}

/* Logged-in 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);
}

/* Comments-locked notice */
.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);
}

/* ==========================================================================
   12. DARK MODE OVERRIDES
   ========================================================================== */

[data-theme="dark"] .cbm-footer {
    background: var(--cbm-masthead-bg);
}

[data-theme="dark"] .cbm-footer__main {
    border-bottom-color: rgba(255,255,255,0.06);
}

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

[data-theme="dark"] .cbm-comment-form__input,
[data-theme="dark"] .cbm-comment-form__textarea {
    background:  var(--cbm-surface);
    border-color: var(--cbm-border);
    color:       var(--cbm-text);
}

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

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

/* ==========================================================================
   13. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ── Mobile: 0-767px — base styles above ────────────────────────────────── */

/* ── Tablet: 768px ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {

    .cbm-footer__columns {
        grid-template-columns: 1fr 1fr;
    }

    /* Comment form: name + email side by side */
    .comment-form .cbm-comment-form__field--inline {
        /* Two inline fields share a row */
    }

    .comment-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--cbm-space-4);
    }

    /* Comment text area and submit span full width */
    .cbm-comment-form__field:first-child,
    .comment-form .cbm-comment-form__field--checkbox,
    .cbm-comment-form__submit-wrap {
        grid-column: 1 / -1;
    }

    .cbm-footer__bottom-inner {
        flex-wrap: nowrap;
    }
}

/* ── Desktop: 1024px ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

    .cbm-footer__columns {
        grid-template-columns: 2fr 1.5fr 1.5fr;
        gap: var(--cbm-space-16);
    }

    .cbm-footer__main {
        padding-top: var(--cbm-space-20);
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cbm-footer__back-to-top,
    .cbm-footer__social-link {
        transition: none;
    }
}