/*
 * CraftBook Magazine — Custom Block Styles
 * =========================================
 * CSS for all is-style-* variations registered in inc/block-styles.php
 * and patterns registered in inc/patterns.php.
 *
 * This file is loaded:
 *   — On the front end via wp_enqueue_scripts (inc/enqueue.php)
 *   — In the block editor via add_editor_style (inc/enqueue.php)
 *
 * CSS class convention:
 *   Front end:   .wp-block-{block}.is-style-{name}
 *   Editor:      Same — the editor wraps blocks in these classes too.
 *
 * Section index:
 *   1.  Quote styles
 *   2.  Heading styles
 *   3.  Paragraph styles
 *   4.  List styles
 *   5.  Image styles
 *   6.  Separator styles
 *   7.  Button styles
 *   8.  Group styles (callout-box, featured-panel, tip-box, stat-highlight)
 *   9.  Columns styles
 *  10.  Pattern-specific styles (key-facts, stat-showcase, newsletter, further-reading)
 *  11.  Dark mode overrides
 *  12.  Editor-specific adjustments
 */

/* ==========================================================================
   1. QUOTE STYLES
   ========================================================================== */

/* Pull Quote — large magazine-style */
.wp-block-quote.is-style-pull-quote,
.wp-block-pullquote.is-style-pull-quote {
    border-left:   none !important;
    border-top:    3px solid var(--cbm-accent);
    border-bottom: 3px solid var(--cbm-accent);
    border-radius: 0;
    background:    transparent;
    padding:       var(--cbm-space-8) 0;
    margin:        var(--cbm-space-10) 0;
}

.wp-block-quote.is-style-pull-quote p,
.wp-block-pullquote.is-style-pull-quote blockquote 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);
    letter-spacing: var(--cbm-tracking-tight);
}

/* Remove the default large opening quote for pull-quote style */
.wp-block-quote.is-style-pull-quote::before {
    content: none;
}

.wp-block-quote.is-style-pull-quote cite,
.wp-block-pullquote.is-style-pull-quote 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);
    display:     block;
    margin-top:  var(--cbm-space-4);
}

/* Editorial Note — smaller, subdued */
.wp-block-quote.is-style-editorial-note {
    border-left:   3px solid var(--cbm-border-strong);
    background:    var(--cbm-surface-raised);
    border-radius: 0 var(--cbm-radius-md) var(--cbm-radius-md) 0;
    padding:       var(--cbm-space-4) var(--cbm-space-5);
    margin:        var(--cbm-space-6) 0;
}

.wp-block-quote.is-style-editorial-note p {
    font-family:  var(--cbm-font-body);
    font-style:   italic;
    font-size:    var(--cbm-text-base);
    color:        var(--cbm-text-muted);
    line-height:  var(--cbm-leading-relaxed);
}

.wp-block-quote.is-style-editorial-note::before {
    content: none;
}

/* ==========================================================================
   2. HEADING STYLES
   ========================================================================== */

/* Section Label — ALL CAPS small label */
.wp-block-heading.is-style-section-label {
    font-family:    var(--cbm-font-body) !important;
    font-size:      var(--cbm-text-xs) !important;
    font-weight:    var(--cbm-weight-black) !important;
    letter-spacing: var(--cbm-tracking-caps) !important;
    text-transform: uppercase !important;
    color:          var(--cbm-text-muted) !important;
    margin-bottom:  var(--cbm-space-2);
}

/* Kicker — amber eyebrow text */
.wp-block-heading.is-style-kicker {
    font-family:    var(--cbm-font-body) !important;
    font-size:      var(--cbm-text-xs) !important;
    font-weight:    var(--cbm-weight-black) !important;
    letter-spacing: var(--cbm-tracking-caps) !important;
    text-transform: uppercase !important;
    color:          var(--cbm-accent) !important;
    margin-bottom:  var(--cbm-space-2);
}

/* Underlined — heading with accent underline */
.wp-block-heading.is-style-underlined {
    padding-bottom:  var(--cbm-space-3);
    border-bottom:   3px solid var(--cbm-accent);
    display:         inline-block;
}

/* ==========================================================================
   3. PARAGRAPH STYLES
   ========================================================================== */

/* Intro Text — larger first paragraph */
.wp-block-paragraph.is-style-intro-text {
    font-size:   var(--cbm-text-lg) !important;
    line-height: var(--cbm-leading-relaxed) !important;
    color:       var(--cbm-text);
    font-weight: var(--cbm-weight-normal);
}

/* Callout — amber-bordered highlight box */
.wp-block-paragraph.is-style-callout {
    background:    var(--cbm-surface-raised);
    border-left:   4px solid var(--cbm-accent);
    border-radius: 0 var(--cbm-radius-md) var(--cbm-radius-md) 0;
    padding:       var(--cbm-space-5) var(--cbm-space-6);
    font-size:     var(--cbm-text-md);
    line-height:   var(--cbm-leading-relaxed);
    margin:        var(--cbm-space-6) 0;
}

/* Key Fact — tinted panel with bold treatment */
.wp-block-paragraph.is-style-key-fact {
    background:     rgba(212, 132, 26, 0.08);
    border:         1px solid rgba(212, 132, 26, 0.2);
    border-radius:  var(--cbm-radius-md);
    padding:        var(--cbm-space-5) var(--cbm-space-6);
    font-size:      var(--cbm-text-md);
    font-weight:    var(--cbm-weight-semibold);
    line-height:    var(--cbm-leading-relaxed);
    margin:         var(--cbm-space-6) 0;
    color:          var(--cbm-text-heading);
}

/* ==========================================================================
   4. LIST STYLES
   ========================================================================== */

/* Checklist — green tick icons */
.wp-block-list.is-style-checklist {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-checklist li {
    padding-left:   var(--cbm-space-8);
    position:       relative;
    margin-bottom:  var(--cbm-space-3);
    line-height:    var(--cbm-leading-relaxed);
}

.wp-block-list.is-style-checklist li::before {
    content:     '✓';
    position:    absolute;
    left:        0;
    top:         0;
    width:       var(--cbm-space-6);
    height:      var(--cbm-space-6);
    background:  var(--cbm-cat-business);
    color:       #fff;
    border-radius: var(--cbm-radius-pill);
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   0.7em;
    font-weight: var(--cbm-weight-black);
    flex-shrink: 0;
    line-height: 1;
}

/* Key Points — amber diamond markers */
.wp-block-list.is-style-key-points {
    list-style: none;
    padding-left: 0;
}

.wp-block-list.is-style-key-points li {
    padding-left:  var(--cbm-space-8);
    position:      relative;
    margin-bottom: var(--cbm-space-3);
    font-weight:   var(--cbm-weight-medium);
    line-height:   var(--cbm-leading-relaxed);
}

.wp-block-list.is-style-key-points li::before {
    content:    '◆';
    position:   absolute;
    left:       0;
    top:        0.15em;
    color:      var(--cbm-accent);
    font-size:  0.65em;
}

/* Further Reading list — clean links, no bullets */
.cbm-further-reading__list {
    list-style: none !important;
    padding:    0 !important;
}

.cbm-further-reading__list li {
    padding:       var(--cbm-space-3) 0;
    border-bottom: 1px solid var(--cbm-border);
    font-size:     var(--cbm-text-base);
    font-weight:   var(--cbm-weight-medium);
}

.cbm-further-reading__list li:last-child {
    border-bottom: none;
}

.cbm-further-reading__list li::before {
    display: none !important;
}

.cbm-further-reading__list a {
    color:           var(--cbm-text-link);
    text-decoration: none;
    transition:      color 0.15s ease;
}

.cbm-further-reading__list a::before {
    content:     '→ ';
    color:       var(--cbm-accent);
    font-weight: var(--cbm-weight-bold);
}

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

/* ==========================================================================
   5. IMAGE STYLES
   ========================================================================== */

.wp-block-image.is-style-rounded img {
    border-radius: var(--cbm-radius-lg);
}

.wp-block-image.is-style-shadow img {
    box-shadow:    var(--cbm-shadow-md);
    border-radius: var(--cbm-radius-md);
}

.wp-block-image.is-style-bordered img {
    border:        3px solid var(--cbm-border);
    border-radius: var(--cbm-radius-md);
    padding:       var(--cbm-space-1);
    background:    var(--cbm-surface);
}

/* ==========================================================================
   6. SEPARATOR STYLES
   ========================================================================== */

/* Editorial — short centred amber rule */
.wp-block-separator.is-style-editorial {
    border-color:  var(--cbm-accent) !important;
    border-width:  3px !important;
    max-width:     80px;
    margin-left:   auto;
    margin-right:  auto;
}

/* Dotted */
.wp-block-separator.is-style-dotted {
    border-style:  dotted !important;
    border-color:  var(--cbm-border-strong) !important;
    border-width:  2px !important;
}

/* ==========================================================================
   7. BUTTON STYLES
   ========================================================================== */

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-element-button.is-style-outline {
    background:      transparent !important;
    color:           var(--cbm-accent) !important;
    border:          2px solid var(--cbm-accent) !important;
    border-radius:   var(--cbm-radius) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-element-button.is-style-outline:hover {
    background:      var(--cbm-accent) !important;
    color:           #fff !important;
}

/* Text Link button */
.wp-block-button.is-style-text-link .wp-block-button__link,
.wp-element-button.is-style-text-link {
    background:      transparent !important;
    color:           var(--cbm-accent) !important;
    border:          none !important;
    padding:         0 !important;
    border-radius:   0 !important;
    font-weight:     var(--cbm-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
    color: var(--cbm-accent-hover) !important;
}

/* ==========================================================================
   8. GROUP STYLES
   ========================================================================== */

/* Callout Box — amber left border */
.wp-block-group.is-style-callout-box {
    border-left:   4px solid var(--cbm-accent);
    border-radius: 0 var(--cbm-radius-md) var(--cbm-radius-md) 0;
    background:    var(--cbm-surface-raised);
    padding:       var(--cbm-space-6) var(--cbm-space-8);
}

/* Featured Panel — dark navy */
.wp-block-group.is-style-featured-panel {
    background:    var(--cbm-primary);
    color:         #ffffff;
    border-radius: var(--cbm-radius-lg);
    padding:       var(--cbm-space-10) var(--cbm-space-10);
}

.wp-block-group.is-style-featured-panel p {
    color: rgba(255,255,255,0.85);
}

.wp-block-group.is-style-featured-panel h1,
.wp-block-group.is-style-featured-panel h2,
.wp-block-group.is-style-featured-panel h3,
.wp-block-group.is-style-featured-panel h4 {
    color: #ffffff;
}

/* Tip Box — teal left border */
.wp-block-group.is-style-tip-box {
    border-left:   4px solid var(--cbm-secondary);
    border-radius: 0 var(--cbm-radius-md) var(--cbm-radius-md) 0;
    background:    rgba(61, 122, 138, 0.07);
    padding:       var(--cbm-space-5) var(--cbm-space-6);
}

/* Stat Highlight — top accent border */
.wp-block-group.is-style-stat-highlight {
    border-radius: var(--cbm-radius-md);
    background:    var(--cbm-surface-raised);
    padding:       var(--cbm-space-6);
    border-top:    3px solid var(--cbm-accent);
}

/* ==========================================================================
   9. COLUMNS STYLES
   ========================================================================== */

/* Divided — vertical rules between columns */
.wp-block-columns.is-style-divided {
    gap: var(--cbm-space-8) !important;
}

.wp-block-columns.is-style-divided > .wp-block-column:not(:last-child) {
    border-right: 1px solid var(--cbm-border);
    padding-right: var(--cbm-space-8);
}

/* ==========================================================================
   10. PATTERN-SPECIFIC STYLES
   ========================================================================== */

/* Key Facts Panel */
.cbm-key-facts {
    margin: var(--cbm-space-8) 0;
}

.cbm-key-facts__list li {
    margin-bottom: var(--cbm-space-3);
    line-height:   var(--cbm-leading-relaxed);
}

.cbm-key-facts__list li:last-child {
    margin-bottom: 0;
}

/* Stat Showcase */
.cbm-stat-showcase {
    margin: var(--cbm-space-10) 0;
}

.cbm-stat-showcase__item {
    /* Individual stat cards — styled by is-style-stat-highlight */
}

/* Inline Newsletter */
.cbm-inline-newsletter {
    margin: var(--cbm-space-10) 0;
    position: relative;
    overflow: hidden;
}

/* Decorative radial gradient behind newsletter */
.cbm-inline-newsletter::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(
        circle at 80% 50%,
        rgba(212, 132, 26, 0.15) 0%,
        transparent 60%
    );
    pointer-events: none;
}

/* Further Reading */
.cbm-further-reading {
    margin: var(--cbm-space-10) 0;
}

/* Comparison columns */
.cbm-comparison {
    margin: var(--cbm-space-8) 0;
}

.cbm-comparison__col {
    /* Styled per column via inline classes */
}

/* Tip/Insight box */
.cbm-tip-box {
    margin: var(--cbm-space-6) 0;
}

/* Article hero header pattern */
.cbm-pattern-article-header {
    padding-top: var(--cbm-space-10);
}

/* ==========================================================================
   11. DARK MODE OVERRIDES
   ========================================================================== */

[data-theme="dark"] .wp-block-quote.is-style-editorial-note,
[data-theme="dark"] .wp-block-paragraph.is-style-callout {
    background: var(--cbm-surface-raised);
}

[data-theme="dark"] .wp-block-paragraph.is-style-key-fact {
    background:  rgba(232, 160, 64, 0.08);
    border-color: rgba(232, 160, 64, 0.2);
}

[data-theme="dark"] .wp-block-group.is-style-callout-box,
[data-theme="dark"] .wp-block-group.is-style-stat-highlight {
    background: var(--cbm-surface-raised);
}

[data-theme="dark"] .wp-block-group.is-style-tip-box {
    background: rgba(91, 168, 186, 0.07);
}

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

[data-theme="dark"] .wp-block-list.is-style-checklist li::before {
    background: var(--cbm-cat-business);
}

[data-theme="dark"] .wp-block-image.is-style-bordered img {
    border-color: var(--cbm-border);
    background:   var(--cbm-surface);
}

[data-theme="dark"] .wp-block-columns.is-style-divided > .wp-block-column:not(:last-child) {
    border-right-color: var(--cbm-border);
}

/* ==========================================================================
   12. EDITOR-SPECIFIC ADJUSTMENTS
   Scoped to the editor wrapper to avoid bleeding into the front end.
   ========================================================================== */

.editor-styles-wrapper .cbm-key-facts {
    margin: 0;
}

.editor-styles-wrapper .cbm-inline-newsletter {
    margin: 0;
}

.editor-styles-wrapper .wp-block-pullquote.is-style-pull-quote {
    text-align: left;
}

/* Ensure pattern labels are readable in dark editor themes */
.editor-styles-wrapper .wp-block-heading.is-style-kicker {
    color: var(--cbm-accent) !important;
}

.editor-styles-wrapper .wp-block-heading.is-style-section-label {
    color: var(--cbm-text-muted) !important;
}