/*
Theme Name:        CraftBook UK Magazine Custom Theme V1
Theme URI:         https://www.craftbook.co.uk
Description:       A professional standalone magazine theme for CraftBook — exploring technology, creativity, business and society from a UK perspective. Built from the ground up as an independent WordPress theme with no parent theme dependency. Features a full editorial magazine layout, dark mode, custom block patterns, block style variations, structured data, performance optimisations, and a custom admin settings panel.
Author:            CraftBook
Author URI:        https://www.craftbook.co.uk
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       craftbook-magazine
Tags:              magazine, news, blog, technology, business, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, block-styles, wide-blocks, dark-mode

STANDALONE THEME — NO PARENT REQUIRED
======================================
This is a fully independent WordPress theme. It does not require or use
any parent theme. Install and activate directly.

MAINTENANCE GUIDE
=================
All design tokens (colours, fonts, spacing) are CSS custom properties
defined in SECTION 1 below. Change a value here and it propagates
sitewide. Never hardcode hex colours or pixel values elsewhere.

All PHP feature modules live in /inc/ — one file per feature.
All CSS components are split by page type in /assets/css/.
All JavaScript is in /assets/js/ — dark-mode.js loads blocking,
main.js loads deferred.

To update safely:
  - Edit only files in this theme directory.
  - Increment the Version number above and CBM_VERSION in functions.php
    after any change to force browsers to reload updated assets.
  - Run php -l on any PHP file after editing to catch syntax errors.
*/

/* ==========================================================================
   SECTION 1: CSS CUSTOM PROPERTIES — THE DESIGN TOKEN SYSTEM
   Every colour, font, spacing, shadow and transition used throughout
   the theme is defined here. Change values here ONLY.
   ========================================================================== */

:root {

    /* ── Brand colours ── */
    --cbm-primary:           #1B2A4A;
    --cbm-accent:            #D4841A;
    --cbm-accent-hover:      #B8700F;
    --cbm-secondary:         #3D7A8A;
    --cbm-secondary-hover:   #2E6070;

    /* ── Backgrounds ── */
    --cbm-bg:                #F7F5F2;
    --cbm-surface:           #FFFFFF;
    --cbm-surface-raised:    #F0EDE9;
    --cbm-masthead-bg:       #1B2A4A;

    /* ── Text ── */
    --cbm-text:              #1A1A1A;
    --cbm-text-muted:        #6B7280;
    --cbm-text-inverse:      #F7F5F2;
    --cbm-text-heading:      #1B2A4A;
    --cbm-text-link:         #D4841A;
    --cbm-text-link-hover:   #B8700F;

    /* ── Borders ── */
    --cbm-border:            #E2DDD7;
    --cbm-border-strong:     #C9C3BB;
    --cbm-border-accent:     #D4841A;

    /* ── Category colours ── */
    --cbm-cat-technology:    #1B4F72;
    --cbm-cat-business:      #1D6A3A;
    --cbm-cat-creativity:    #7B3F9E;
    --cbm-cat-society:       #9E3A2F;
    --cbm-cat-interactive:   #3D7A8A;

    /* ── Status ── */
    --cbm-focus:             #D4841A;
    --cbm-error:             #C0392B;
    --cbm-success:           #1D6A3A;
    --cbm-warning:           #D4841A;

    /* ── Overlays ── */
    --cbm-overlay:           rgba(27, 42, 74, 0.65);
    --cbm-overlay-light:     rgba(27, 42, 74, 0.35);

    /* ── Typography ── */
    --cbm-font-heading:      'Playfair Display', Georgia, 'Times New Roman', serif;
    --cbm-font-body:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cbm-font-mono:         'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* ── Type scale (Major Third — 1.25 ratio) ── */
    --cbm-text-xs:           0.64rem;
    --cbm-text-sm:           0.8rem;
    --cbm-text-base:         1rem;
    --cbm-text-md:           1.125rem;
    --cbm-text-lg:           1.25rem;
    --cbm-text-xl:           1.563rem;
    --cbm-text-2xl:          1.953rem;
    --cbm-text-3xl:          2.441rem;
    --cbm-text-4xl:          3.052rem;
    --cbm-text-hero:         3.815rem;

    /* ── Line heights ── */
    --cbm-leading-tight:     1.2;
    --cbm-leading-snug:      1.35;
    --cbm-leading-normal:    1.6;
    --cbm-leading-relaxed:   1.75;

    /* ── Font weights ── */
    --cbm-weight-normal:     400;
    --cbm-weight-medium:     500;
    --cbm-weight-semibold:   600;
    --cbm-weight-bold:       700;
    --cbm-weight-black:      900;

    /* ── Letter spacing ── */
    --cbm-tracking-tight:    -0.02em;
    --cbm-tracking-normal:    0;
    --cbm-tracking-wide:      0.05em;
    --cbm-tracking-caps:      0.12em;

    /* ── Spacing (4px base unit) ── */
    --cbm-space-1:    0.25rem;
    --cbm-space-2:    0.5rem;
    --cbm-space-3:    0.75rem;
    --cbm-space-4:    1rem;
    --cbm-space-5:    1.25rem;
    --cbm-space-6:    1.5rem;
    --cbm-space-8:    2rem;
    --cbm-space-10:   2.5rem;
    --cbm-space-12:   3rem;
    --cbm-space-16:   4rem;
    --cbm-space-20:   5rem;
    --cbm-space-24:   6rem;

    --cbm-section-gap:       var(--cbm-space-16);
    --cbm-section-gap-sm:    var(--cbm-space-10);

    /* ── Layout ── */
    --cbm-max-width:         1200px;
    --cbm-max-width-prose:   720px;
    --cbm-max-width-narrow:  560px;
    --cbm-container-pad-x:   1.5rem;

    /* ── Grid ── */
    --cbm-grid-gap:          1.5rem;
    --cbm-grid-gap-sm:       1rem;

    /* ── Borders & radii ── */
    --cbm-radius-sm:         2px;
    --cbm-radius:            4px;
    --cbm-radius-md:         6px;
    --cbm-radius-lg:         10px;
    --cbm-radius-pill:       9999px;

    /* ── Shadows ── */
    --cbm-shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
    --cbm-shadow:        0 2px 8px rgba(0,0,0,0.10);
    --cbm-shadow-md:     0 4px 16px rgba(0,0,0,0.12);
    --cbm-shadow-lg:     0 8px 32px rgba(0,0,0,0.14);
    --cbm-shadow-card:   0 2px 12px rgba(27,42,74,0.08);

    /* ── Transitions ── */
    --cbm-transition:         all 0.2s ease;
    --cbm-transition-fast:    all 0.12s ease;
    --cbm-transition-slow:    all 0.35s ease;
    --cbm-transition-color:   color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

    /* ── Z-index scale ── */
    --cbm-z-below:       -1;
    --cbm-z-base:         0;
    --cbm-z-raised:       10;
    --cbm-z-dropdown:     100;
    --cbm-z-sticky:       200;
    --cbm-z-overlay:      300;
    --cbm-z-modal:        400;
    --cbm-z-toast:        500;

    /* ── Header dimensions ── */
    --cbm-masthead-height:      72px;
    --cbm-masthead-height-sm:   56px;
    --cbm-ticker-height:        36px;
    --cbm-nav-height:           48px;

    /* ── Feature toggles ── */
    --cbm-newsletter-display:   none;   /* Off by default; enable via Customiser */
    --cbm-color-transition:     background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ==========================================================================
   SECTION 2: DARK MODE
   ========================================================================== */

[data-theme="dark"] {
    --cbm-bg:                #0F1724;
    --cbm-surface:           #1A2535;
    --cbm-surface-raised:    #212F42;
    --cbm-masthead-bg:       #0D1520;
    --cbm-primary:           #4A7BA7;
    --cbm-accent:            #E8A040;
    --cbm-accent-hover:      #F0B050;
    --cbm-secondary:         #5BA8BA;
    --cbm-secondary-hover:   #6FC0D4;
    --cbm-text:              #E8E4DC;
    --cbm-text-muted:        #9CA3AF;
    --cbm-text-inverse:      #0F1724;
    --cbm-text-heading:      #EEE9DF;
    --cbm-text-link:         #E8A040;
    --cbm-text-link-hover:   #F0B050;
    --cbm-border:            #2A3A52;
    --cbm-border-strong:     #3A4F6A;
    --cbm-border-accent:     #E8A040;
    --cbm-cat-technology:    #5B9EC9;
    --cbm-cat-business:      #4CAF70;
    --cbm-cat-creativity:    #B07DC9;
    --cbm-cat-society:       #D4726A;
    --cbm-cat-interactive:   #5BA8BA;
    --cbm-shadow-sm:         0 1px 3px rgba(0,0,0,0.3);
    --cbm-shadow:            0 2px 8px rgba(0,0,0,0.4);
    --cbm-shadow-md:         0 4px 16px rgba(0,0,0,0.45);
    --cbm-shadow-lg:         0 8px 32px rgba(0,0,0,0.5);
    --cbm-shadow-card:       0 2px 12px rgba(0,0,0,0.35);
    --cbm-overlay:           rgba(10,20,40,0.72);
    --cbm-overlay-light:     rgba(10,20,40,0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cbm-bg:                #0F1724;
        --cbm-surface:           #1A2535;
        --cbm-surface-raised:    #212F42;
        --cbm-masthead-bg:       #0D1520;
        --cbm-primary:           #4A7BA7;
        --cbm-accent:            #E8A040;
        --cbm-accent-hover:      #F0B050;
        --cbm-secondary:         #5BA8BA;
        --cbm-secondary-hover:   #6FC0D4;
        --cbm-text:              #E8E4DC;
        --cbm-text-muted:        #9CA3AF;
        --cbm-text-inverse:      #0F1724;
        --cbm-text-heading:      #EEE9DF;
        --cbm-text-link:         #E8A040;
        --cbm-text-link-hover:   #F0B050;
        --cbm-border:            #2A3A52;
        --cbm-border-strong:     #3A4F6A;
        --cbm-border-accent:     #E8A040;
        --cbm-cat-technology:    #5B9EC9;
        --cbm-cat-business:      #4CAF70;
        --cbm-cat-creativity:    #B07DC9;
        --cbm-cat-society:       #D4726A;
        --cbm-cat-interactive:   #5BA8BA;
        --cbm-shadow-sm:         0 1px 3px rgba(0,0,0,0.3);
        --cbm-shadow:            0 2px 8px rgba(0,0,0,0.4);
        --cbm-shadow-md:         0 4px 16px rgba(0,0,0,0.45);
        --cbm-shadow-lg:         0 8px 32px rgba(0,0,0,0.5);
        --cbm-shadow-card:       0 2px 12px rgba(0,0,0,0.35);
        --cbm-overlay:           rgba(10,20,40,0.72);
        --cbm-overlay-light:     rgba(10,20,40,0.45);
    }
}

/* ==========================================================================
   SECTION 3: CSS RESET & BASE
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    font-size:              16px;
    scroll-behavior:        smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust:         100%;
    transition:             var(--cbm-color-transition);
}

body {
    font-family:             var(--cbm-font-body);
    font-size:               var(--cbm-text-md);
    font-weight:             var(--cbm-weight-normal);
    line-height:             var(--cbm-leading-normal);
    color:                   var(--cbm-text);
    background-color:        var(--cbm-bg);
    transition:              var(--cbm-color-transition);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height:              100vh;
    display:                 flex;
    flex-direction:          column;
}

/* Ensure main content grows to push footer down */
#cbm-main-content {
    flex: 1;
}

img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* ==========================================================================
   SECTION 4: ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline:        3px solid var(--cbm-focus);
    outline-offset: 2px;
    border-radius:  var(--cbm-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.cbm-skip-link {
    position:    absolute;
    top:         -100%;
    left:        var(--cbm-space-4);
    z-index:     var(--cbm-z-toast);
    padding:     var(--cbm-space-3) var(--cbm-space-6);
    background:  var(--cbm-accent);
    color:       #fff;
    font-weight: var(--cbm-weight-bold);
    border-radius: 0 0 var(--cbm-radius) var(--cbm-radius);
    text-decoration: none;
    transition:  top 0.15s ease;
}
.cbm-skip-link:focus { top: 0; }

.cbm-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   SECTION 5: TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--cbm-font-heading);
    font-weight:    var(--cbm-weight-bold);
    line-height:    var(--cbm-leading-tight);
    color:          var(--cbm-text-heading);
    letter-spacing: var(--cbm-tracking-tight);
    transition:     var(--cbm-color-transition);
}

h1 { font-size: var(--cbm-text-4xl); }
h2 { font-size: var(--cbm-text-3xl); }
h3 { font-size: var(--cbm-text-2xl); }
h4 { font-size: var(--cbm-text-xl);  }
h5 { font-size: var(--cbm-text-lg);  font-weight: var(--cbm-weight-semibold); }
h6 { font-size: var(--cbm-text-base); font-weight: var(--cbm-weight-semibold); }

p {
    margin-bottom: var(--cbm-space-5);
    line-height:   var(--cbm-leading-relaxed);
}
p:last-child { margin-bottom: 0; }

a {
    color:                   var(--cbm-text-link);
    text-decoration:         underline;
    text-underline-offset:   3px;
    text-decoration-thickness: 1px;
    transition:              var(--cbm-transition-color);
}
a:hover {
    color:                   var(--cbm-text-link-hover);
    text-decoration-thickness: 2px;
}

strong, b { font-weight: var(--cbm-weight-bold); }
em, i     { font-style:  italic; }

/* ── Entry content (article body) ── */
.entry-content {
    font-size:   var(--cbm-text-md);
    line-height: var(--cbm-leading-relaxed);
    max-width:   var(--cbm-max-width-prose);
    margin-left: auto;
    margin-right: auto;
}

.entry-content > * + * { margin-top: var(--cbm-space-5); }

.entry-content h2 {
    margin-top:    var(--cbm-space-12);
    margin-bottom: var(--cbm-space-4);
    padding-bottom: var(--cbm-space-2);
    border-bottom: 2px solid var(--cbm-border);
}
.entry-content h3 { margin-top: var(--cbm-space-8); margin-bottom: var(--cbm-space-3); }
.entry-content h4 { margin-top: var(--cbm-space-6); margin-bottom: var(--cbm-space-2); }

/* Drop cap — first letter of first paragraph */
.entry-content > p:first-of-type::first-letter {
    font-family:   var(--cbm-font-heading);
    font-size:     3.8em;
    font-weight:   var(--cbm-weight-black);
    color:         var(--cbm-accent);
    float:         left;
    line-height:   0.85;
    margin-right:  0.08em;
    margin-top:    0.06em;
}
.entry-content > p:first-of-type {
    font-size:   var(--cbm-text-lg);
    line-height: var(--cbm-leading-relaxed);
}

/* Blockquote */
.entry-content blockquote {
    position:      relative;
    margin:        var(--cbm-space-10) 0;
    padding:       var(--cbm-space-6) var(--cbm-space-8);
    border-left:   4px solid var(--cbm-border-accent);
    background:    var(--cbm-surface-raised);
    border-radius: 0 var(--cbm-radius-md) var(--cbm-radius-md) 0;
}
.entry-content blockquote p {
    font-family:  var(--cbm-font-heading);
    font-style:   italic;
    font-size:    var(--cbm-text-lg);
    line-height:  var(--cbm-leading-snug);
    color:        var(--cbm-text-heading);
    margin-bottom: 0;
}
.entry-content blockquote::before {
    content:     '\201C';
    font-family: var(--cbm-font-heading);
    font-size:   4rem;
    color:       var(--cbm-accent);
    line-height: 1;
    position:    absolute;
    top:         var(--cbm-space-2);
    left:        var(--cbm-space-4);
    opacity:     0.6;
}

/* Code */
code {
    font-family:   var(--cbm-font-mono);
    font-size:     0.875em;
    background:    var(--cbm-surface-raised);
    color:         var(--cbm-secondary);
    padding:       0.1em 0.35em;
    border-radius: var(--cbm-radius-sm);
    border:        1px solid var(--cbm-border);
}
pre {
    background:    var(--cbm-surface-raised);
    border:        1px solid var(--cbm-border);
    border-radius: var(--cbm-radius-md);
    padding:       var(--cbm-space-6);
    overflow-x:    auto;
    margin:        var(--cbm-space-6) 0;
}
pre code { background: transparent; border: none; padding: 0; font-size: var(--cbm-text-sm); color: var(--cbm-text); }

/* Lists */
.entry-content ul, .entry-content ol {
    padding-left: var(--cbm-space-6);
    margin:       var(--cbm-space-5) 0;
}
.entry-content li { margin-bottom: var(--cbm-space-2); line-height: var(--cbm-leading-relaxed); }
.entry-content ul li::marker { color: var(--cbm-accent); }

hr { border: none; border-top: 2px solid var(--cbm-border); margin: var(--cbm-space-10) 0; }

/* ── Wide and full alignments in entry-content ── */
.entry-content .alignwide {
    max-width:    var(--cbm-max-width);
    width:        100%;
    margin-left:  calc((var(--cbm-max-width-prose) - var(--cbm-max-width)) / 2);
    margin-right: calc((var(--cbm-max-width-prose) - var(--cbm-max-width)) / 2);
}
.entry-content .alignfull {
    max-width: none;
    width:     100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.entry-content iframe { max-width: 100%; display: block; }
.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; }

/* ── Full-width page template — no prose constraint ── */
.cbm-layout-fullwidth .entry-content {
    max-width:   var(--cbm-max-width);
    margin-left: auto;
    margin-right: auto;
}
.cbm-layout-fullwidth .entry-content .alignfull {
    max-width:    none;
    width:        100%;
    margin-left:  0;
    margin-right: 0;
}

/* ==========================================================================
   SECTION 6: LAYOUT UTILITIES
   ========================================================================== */

.cbm-container {
    width:         100%;
    max-width:     var(--cbm-max-width);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--cbm-container-pad-x);
    padding-right: var(--cbm-container-pad-x);
}
.cbm-container--narrow { max-width: var(--cbm-max-width-prose); }
.cbm-section       { padding-top: var(--cbm-section-gap);    padding-bottom: var(--cbm-section-gap);    }
.cbm-section--sm   { padding-top: var(--cbm-section-gap-sm); padding-bottom: var(--cbm-section-gap-sm); }

/* ==========================================================================
   SECTION 7: IMAGES
   ========================================================================== */

.cbm-img-ratio               { position: relative; overflow: hidden; }
.cbm-img-ratio--16-9         { aspect-ratio: 16 / 9; }
.cbm-img-ratio--4-3          { aspect-ratio:  4 / 3; }
.cbm-img-ratio--3-2          { aspect-ratio:  3 / 2; }
.cbm-img-ratio--square       { aspect-ratio:  1 / 1; }
.cbm-img-ratio img           { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; }
.cbm-card:hover .cbm-img-ratio img { transform: scale(1.03); }
figcaption { font-size: var(--cbm-text-sm); color: var(--cbm-text-muted); text-align: center; margin-top: var(--cbm-space-2); font-style: italic; }

/* ==========================================================================
   SECTION 8: CARDS
   ========================================================================== */

.cbm-card {
    background:    var(--cbm-surface);
    border-radius: var(--cbm-radius-md);
    box-shadow:    var(--cbm-shadow-card);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow 0.2s ease, transform 0.2s ease;
    border:        1px solid var(--cbm-border);
}
.cbm-card:hover { box-shadow: var(--cbm-shadow-md); transform: translateY(-2px); }
.cbm-card__body { padding: var(--cbm-space-5); flex: 1; display: flex; flex-direction: column; }
.cbm-card__meta {
    display: flex; align-items: center; gap: var(--cbm-space-3);
    font-size: var(--cbm-text-sm); color: var(--cbm-text-muted); margin-bottom: var(--cbm-space-3);
    flex-wrap: wrap;
}
.cbm-card__title {
    font-family: var(--cbm-font-heading); font-size: var(--cbm-text-xl);
    font-weight: var(--cbm-weight-bold); line-height: var(--cbm-leading-snug);
    color: var(--cbm-text-heading); margin-bottom: var(--cbm-space-3); letter-spacing: var(--cbm-tracking-tight);
}
.cbm-card__title a { color: inherit; text-decoration: none; }
.cbm-card__title a:hover { color: var(--cbm-accent); }
.cbm-card__excerpt {
    font-size: var(--cbm-text-base); color: var(--cbm-text-muted); line-height: var(--cbm-leading-relaxed); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cbm-card__footer { padding: var(--cbm-space-4) var(--cbm-space-5); border-top: 1px solid var(--cbm-border); display: flex; align-items: center; justify-content: space-between; }

/* ==========================================================================
   SECTION 9: BADGES, BUTTONS, UTILITIES
   ========================================================================== */

.cbm-badge {
    display: inline-block; padding: var(--cbm-space-1) var(--cbm-space-3);
    font-size: var(--cbm-text-xs); font-weight: var(--cbm-weight-bold);
    letter-spacing: var(--cbm-tracking-caps); text-transform: uppercase;
    border-radius: var(--cbm-radius-sm); text-decoration: none; transition: var(--cbm-transition);
}
.cbm-badge--technology  { background: var(--cbm-cat-technology);  color: #fff; }
.cbm-badge--business    { background: var(--cbm-cat-business);    color: #fff; }
.cbm-badge--creativity  { background: var(--cbm-cat-creativity);  color: #fff; }
.cbm-badge--society     { background: var(--cbm-cat-society);     color: #fff; }
.cbm-badge--interactive { background: var(--cbm-cat-interactive); color: #fff; }
.cbm-badge--default     { background: var(--cbm-primary);         color: #fff; }
.cbm-badge:hover        { opacity: 0.85; text-decoration: none; }

.cbm-btn {
    display: inline-flex; align-items: center; gap: var(--cbm-space-2);
    padding: var(--cbm-space-3) var(--cbm-space-6); font-family: var(--cbm-font-body);
    font-size: var(--cbm-text-base); font-weight: var(--cbm-weight-semibold); line-height: 1;
    text-decoration: none; border: 2px solid transparent; border-radius: var(--cbm-radius);
    cursor: pointer; transition: var(--cbm-transition); white-space: nowrap;
}
.cbm-btn--primary { background: var(--cbm-accent); color: #fff; border-color: var(--cbm-accent); }
.cbm-btn--primary:hover { background: var(--cbm-accent-hover); border-color: var(--cbm-accent-hover); color: #fff; text-decoration: none; }
.cbm-btn--secondary { background: transparent; color: var(--cbm-accent); border-color: var(--cbm-accent); }
.cbm-btn--secondary:hover { background: var(--cbm-accent); color: #fff; text-decoration: none; }
.cbm-btn--ghost { background: transparent; color: var(--cbm-text); border-color: var(--cbm-border); }
.cbm-btn--ghost:hover { background: var(--cbm-surface-raised); border-color: var(--cbm-border-strong); text-decoration: none; }
.cbm-btn--sm { padding: var(--cbm-space-2) var(--cbm-space-4); font-size: var(--cbm-text-sm); }

.cbm-read-more {
    font-size: var(--cbm-text-sm); font-weight: var(--cbm-weight-semibold);
    color: var(--cbm-accent); text-decoration: none;
    letter-spacing: var(--cbm-tracking-wide); text-transform: uppercase;
}
.cbm-read-more::after { content: ' →'; display: inline-block; transition: transform 0.15s ease; }
.cbm-read-more:hover { color: var(--cbm-accent-hover); text-decoration: none; }
.cbm-read-more:hover::after { transform: translateX(3px); }

.cbm-section-header {
    display: flex; align-items: center; gap: var(--cbm-space-4);
    margin-bottom: var(--cbm-space-8); padding-bottom: var(--cbm-space-4); border-bottom: 2px solid var(--cbm-border);
}
.cbm-section-header__left { display: flex; align-items: center; gap: var(--cbm-space-4); }
.cbm-section-header__label {
    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: #fff; background: var(--cbm-primary);
    padding: var(--cbm-space-1) var(--cbm-space-3); border-radius: var(--cbm-radius-sm);
}
.cbm-section-header__title { font-family: var(--cbm-font-heading); font-size: var(--cbm-text-2xl); font-weight: var(--cbm-weight-bold); color: var(--cbm-text-heading); margin: 0; }
.cbm-section-header__link { margin-left: auto; font-size: var(--cbm-text-sm); font-weight: var(--cbm-weight-semibold); color: var(--cbm-accent); text-decoration: none; white-space: nowrap; }
.cbm-section-header__link:hover { color: var(--cbm-accent-hover); text-decoration: underline; }

/* Category-specific label colours */
.cbm-section-header__label--technology  { background: var(--cbm-cat-technology);  }
.cbm-section-header__label--business    { background: var(--cbm-cat-business);    }
.cbm-section-header__label--creativity  { background: var(--cbm-cat-creativity);  }
.cbm-section-header__label--society     { background: var(--cbm-cat-society);     }
.cbm-section-header__label--interactive { background: var(--cbm-cat-interactive); }

/* ==========================================================================
   SECTION 10: BREADCRUMBS & PAGINATION
   ========================================================================== */

.cbm-breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--cbm-space-2); font-size: var(--cbm-text-sm); color: var(--cbm-text-muted); margin-bottom: var(--cbm-space-6);
}
.cbm-breadcrumbs a { color: var(--cbm-text-muted); text-decoration: none; }
.cbm-breadcrumbs a:hover { color: var(--cbm-accent); }
.cbm-breadcrumbs__sep { opacity: 0.4; font-size: 0.8em; }

.cbm-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: var(--cbm-space-2); margin-top: var(--cbm-space-12); flex-wrap: wrap;
}
.cbm-pagination a, .cbm-pagination span {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 var(--cbm-space-3);
    border: 1px solid var(--cbm-border); border-radius: var(--cbm-radius);
    font-size: var(--cbm-text-sm); font-weight: var(--cbm-weight-semibold);
    text-decoration: none; color: var(--cbm-text); background: var(--cbm-surface); transition: var(--cbm-transition);
}
.cbm-pagination a:hover { background: var(--cbm-accent); border-color: var(--cbm-accent); color: #fff; }
.cbm-pagination .current, .cbm-pagination span.current { background: var(--cbm-primary); border-color: var(--cbm-primary); color: #fff; }

/* ==========================================================================
   SECTION 11: SCROLL REVEAL & UTILITIES
   ========================================================================== */

.cbm-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; }
.cbm-reveal--visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SECTION 12: RESPONSIVE — BASE BREAKPOINTS
   ========================================================================== */

@media (min-width: 480px)  { :root { --cbm-container-pad-x: 2rem; } }
@media (min-width: 768px)  { :root { --cbm-container-pad-x: 2.5rem; } h1 { font-size: var(--cbm-text-hero); } h2 { font-size: var(--cbm-text-4xl); } h3 { font-size: var(--cbm-text-3xl); } }
@media (min-width: 1024px) { :root { --cbm-container-pad-x: 3rem; } }
@media (min-width: 1200px) { :root { --cbm-container-pad-x: 4rem; } }

@media (hover: none) and (pointer: coarse) { .cbm-btn { min-height: 44px; min-width: 44px; } }
@media (max-width: 768px) and (orientation: landscape) { :root { --cbm-masthead-height: var(--cbm-masthead-height-sm); --cbm-section-gap: var(--cbm-space-10); } }

/* ==========================================================================
   SECTION 13: PRINT
   ========================================================================== */

@media print {
    :root { --cbm-bg: #fff; --cbm-surface: #fff; --cbm-text: #000; --cbm-text-heading: #000; --cbm-border: #ccc; }
    .cbm-masthead, .cbm-nav-primary, .cbm-newsletter, .cbm-footer, .cbm-related, .cbm-btn, .cbm-dark-toggle { display: none !important; }
    .entry-content { max-width: 100%; }
    a::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #666; }
    h1, h2, h3 { page-break-after: avoid; }
}

/* ==========================================================================
   SECTION 14: CLASSIC EDITOR COMPATIBILITY
   WordPress Classic Editor outputs different markup than the Block Editor.
   These rules ensure Classic Editor page/post content renders cleanly.
   ========================================================================== */

/* Classic Editor content wrapper */
.cbm-classic-content .entry-content,
.cbm-is-classic .entry-content {
    max-width: var(--cbm-max-width-prose);
    margin-left: auto;
    margin-right: auto;
}

/* Full-width classic content (interactive tools pages) */
.cbm-layout-fullwidth .cbm-classic-content .entry-content,
.cbm-layout-fullwidth .cbm-is-classic .entry-content {
    max-width:    var(--cbm-max-width);
    margin-left:  auto;
    margin-right: auto;
}

/* Classic Editor image alignment classes */
.entry-content img.alignleft  { float: left;  margin: 0 var(--cbm-space-6) var(--cbm-space-4) 0; }
.entry-content img.alignright { float: right; margin: 0 0 var(--cbm-space-4) var(--cbm-space-6); }
.entry-content img.aligncenter { display: block; margin: var(--cbm-space-6) auto; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text { font-size: var(--cbm-text-sm); color: var(--cbm-text-muted); font-style: italic; text-align: center; margin-top: var(--cbm-space-2); }

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

/* Embedded iframes in classic content (games, chatbot, quiz) */
.cbm-layout-fullwidth .entry-content iframe,
.cbm-layout-fullwidth .entry-content embed,
.cbm-layout-fullwidth .entry-content object {
    max-width:  100%;
    width:      100%;
    display:    block;
    border:     none;
}