/*
 * CraftBook Magazine — Header & Navigation Styles
 * =================================================
 * Covers: utility bar, masthead wordmark, primary nav,
 *         mobile drawer, search modal, progress bar.
 *
 * All values use CSS custom properties from style.css.
 * Dark mode is handled automatically — no duplicate rules needed.
 *
 * Section index:
 *  1.  Site header wrapper & sticky behaviour
 *  2.  Utility bar (desktop-only strip above masthead)
 *  3.  Masthead (wordmark, controls row)
 *  4.  Typographic wordmark
 *  5.  Masthead control buttons (search, dark toggle, hamburger)
 *  6.  Primary navigation bar
 *  7.  Nav dropdown support
 *  8.  Mobile navigation drawer
 *  9.  Search modal
 * 10.  Reading progress bar
 * 11.  Responsive overrides
 * 12.  Print overrides
 */

/* ==========================================================================
   1. SITE HEADER WRAPPER
   ========================================================================== */

.cbm-site-header {
    position:         sticky;
    top:              0;
    left:             0;
    right:            0;
    z-index:          var(--cbm-z-sticky);
    background-color: var(--cbm-masthead-bg);
    box-shadow:       0 2px 12px rgba(0,0,0,0.15);
    transition:       var(--cbm-color-transition), box-shadow 0.2s ease;
}

/* Scrolled state — added by JS when user scrolls past 80px */
.cbm-site-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}

/* Scrolled + scrolling up — slightly more compact */
.cbm-site-header.is-compact {
    /* Optionally collapse the utility bar — handled by JS class toggle */
}

.cbm-site-header.is-compact .cbm-utility-bar {
    height:   0;
    overflow: hidden;
    padding:  0;
    border:   none;
}

/* ==========================================================================
   2. UTILITY BAR
   ========================================================================== */

.cbm-utility-bar {
    background-color: var(--cbm-primary);
    border-bottom:    1px solid rgba(255,255,255,0.08);
    transition:       height 0.25s ease, padding 0.25s ease, var(--cbm-color-transition);
    overflow:         hidden;
}

.cbm-utility-bar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          36px;
    gap:             var(--cbm-space-4);
}

.cbm-utility-bar__left {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    min-width:   0;
}

.cbm-utility-bar__date,
.cbm-utility-bar__tagline {
    font-size:      var(--cbm-text-xs);
    color:          rgba(255,255,255,0.6);
    white-space:    nowrap;
    letter-spacing: var(--cbm-tracking-wide);
}

.cbm-utility-bar__date {
    color:       rgba(255,255,255,0.45);
    font-weight: var(--cbm-weight-normal);
}

.cbm-utility-bar__sep {
    color:   rgba(255,255,255,0.25);
    font-size: 0.9em;
}

.cbm-utility-bar__tagline {
    font-weight:     var(--cbm-weight-medium);
    letter-spacing:  var(--cbm-tracking-caps);
    text-transform:  uppercase;
    font-size:       0.6rem;
    color:           rgba(255,255,255,0.5);
    /* Truncate gracefully on smaller desktops */
    overflow:        hidden;
    text-overflow:   ellipsis;
}

/* Social links */
.cbm-utility-bar__social {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-2);
    flex-shrink: 0;
}

.cbm-utility-bar__social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    color:           rgba(255,255,255,0.45);
    text-decoration: none;
    border-radius:   var(--cbm-radius-sm);
    transition:      color 0.15s ease, background-color 0.15s ease;
}

.cbm-utility-bar__social-link:hover {
    color:            rgba(255,255,255,0.9);
    background-color: rgba(255,255,255,0.08);
    text-decoration:  none;
}

.cbm-utility-bar__social-link svg {
    width:  14px;
    height: 14px;
}

/* ==========================================================================
   3. MASTHEAD
   ========================================================================== */

.cbm-masthead {
    background-color: var(--cbm-masthead-bg);
    padding:          var(--cbm-space-4) 0;
    transition:       var(--cbm-color-transition);
}

.cbm-masthead__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--cbm-space-4);
    min-height:      var(--cbm-masthead-height-sm); /* 56px */
}

.cbm-masthead__brand {
    display:        flex;
    flex-direction: column;
    gap:            var(--cbm-space-1);
    min-width:      0;
}

.cbm-masthead__tagline {
    font-family:    var(--cbm-font-body);
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-medium);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin:         0;
    white-space:    nowrap;
}

/* ==========================================================================
   4. TYPOGRAPHIC WORDMARK
   ========================================================================== */

.cbm-wordmark {
    display:         inline-flex;
    flex-direction:  column;
    text-decoration: none;
    line-height:     1;
    gap:             2px;
}

.cbm-wordmark:hover {
    text-decoration: none;
}

.cbm-wordmark__text {
    display:        block;
    font-family:    var(--cbm-font-heading);
    font-size:      clamp(1.75rem, 4vw, 2.8rem); /* Fluid size: 28px → 44.8px */
    line-height:    1;
    letter-spacing: -0.03em;
    white-space:    nowrap;
}

/*
 * "Craft" — bold roman, white
 * The visual weight of bold Playfair Display anchors the wordmark.
 */
.cbm-wordmark__craft {
    font-weight:  900;
    font-style:   normal;
    color:        #ffffff;
    transition:   color 0.2s ease;
}

/*
 * "Book" — italic, amber accent
 * The contrast between roman "Craft" and italic "Book" in the accent
 * colour creates a distinctive masthead that reads as one word
 * but has visual movement — a classic editorial technique.
 */
.cbm-wordmark__book {
    font-weight:  700;
    font-style:   italic;
    color:        var(--cbm-accent);
    transition:   color 0.2s ease;
}

.cbm-wordmark:hover .cbm-wordmark__craft {
    color: rgba(255,255,255,0.85);
}

.cbm-wordmark:hover .cbm-wordmark__book {
    color: var(--cbm-accent-hover);
}

/* "Magazine" edition label below the main wordmark */
.cbm-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.35);
    margin-top:     2px;
}

/* Smaller wordmark inside mobile nav drawer */
.cbm-wordmark--mobile .cbm-wordmark__text {
    font-size: 1.75rem;
}

/* ==========================================================================
   5. MASTHEAD CONTROL BUTTONS
   ========================================================================== */

.cbm-masthead__controls {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-2);
    flex-shrink: 0;
}

/* Base button style — shared by search, dark toggle, hamburger */
.cbm-masthead__btn {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            44px;
    height:           44px;
    padding:          0;
    background:       transparent;
    border:           1px solid rgba(255,255,255,0.0);
    border-radius:    var(--cbm-radius);
    color:            rgba(255,255,255,0.7);
    cursor:           pointer;
    transition:       color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.cbm-masthead__btn:hover {
    color:            rgba(255,255,255,1);
    background-color: rgba(255,255,255,0.08);
    border-color:     rgba(255,255,255,0.1);
}

.cbm-masthead__btn:focus-visible {
    outline:       3px solid var(--cbm-accent);
    outline-offset: 2px;
}

.cbm-masthead__btn svg {
    width:  22px;
    height: 22px;
    pointer-events: none;
}

/* Dark mode toggle — sun/moon icon management */
/* Initial state (light mode): show moon, hide sun */
.cbm-dark-toggle .cbm-icon-sun  { display: none;  }
.cbm-dark-toggle .cbm-icon-moon { display: block; }

/* dark-mode.js sets these via updateToggleButtons() */
/* When dark mode is active: show sun (click to go light) */
/* When light mode active: show moon (click to go dark) */

/* Hamburger — three bars */
.cbm-hamburger {
    flex-direction: column;
    gap:            5px;
}

.cbm-hamburger__bar {
    display:          block;
    width:            22px;
    height:           2px;
    background-color: rgba(255,255,255,0.75);
    border-radius:    2px;
    transform-origin: center;
    transition:       transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

/* Animated state when menu is open */
.cbm-hamburger.is-active .cbm-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.cbm-hamburger.is-active .cbm-hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.cbm-hamburger.is-active .cbm-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Hamburger only visible below 1024px */
@media (min-width: 1024px) {
    .cbm-hamburger {
        display: none;
    }
}

/* ==========================================================================
   6. PRIMARY NAVIGATION BAR
   ========================================================================== */

.cbm-nav-primary {
    background-color: color-mix(in srgb, var(--cbm-masthead-bg) 100%, black 15%);
    border-top:       1px solid rgba(255,255,255,0.06);
    position:         relative;
    transition:       var(--cbm-color-transition);
}

/* Fallback for browsers without color-mix */
@supports not (background-color: color-mix(in srgb, red 50%, blue)) {
    .cbm-nav-primary {
        background-color: rgba(10, 18, 32, 0.95);
    }
}

.cbm-nav-primary__inner {
    display:         flex;
    align-items:     stretch;
    justify-content: space-between;
    min-height:      var(--cbm-nav-height); /* 48px */
}

/* Menu list */
.cbm-nav-primary__list {
    display:     flex;
    align-items: stretch;
    list-style:  none;
    margin:      0;
    padding:     0;
    gap:         0;
}

/* Each nav item */
.cbm-nav-primary__list > li {
    position:    relative;
    display:     flex;
    align-items: stretch;
}

/* Nav links */
.cbm-nav-primary__list > li > a {
    display:         flex;
    align-items:     center;
    padding:         0 var(--cbm-space-5);
    font-family:     var(--cbm-font-body);
    font-size:       var(--cbm-text-sm);
    font-weight:     var(--cbm-weight-semibold);
    letter-spacing:  var(--cbm-tracking-wide);
    text-transform:  uppercase;
    color:           rgba(255,255,255,0.65);
    text-decoration: none;
    white-space:     nowrap;
    border-bottom:   3px solid transparent;
    transition:      color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    position:        relative;
}

.cbm-nav-primary__list > li > a span {
    /* Link text is wrapped in <span> by wp_nav_menu() */
    pointer-events: none;
}

.cbm-nav-primary__list > li > a:hover {
    color:            rgba(255,255,255,1);
    border-bottom-color: var(--cbm-accent);
    background-color: rgba(255,255,255,0.04);
    text-decoration:  none;
}

/* Active / current page */
.cbm-nav-primary__list > li.current-menu-item > a,
.cbm-nav-primary__list > li.current-menu-ancestor > a,
.cbm-nav-primary__list > li.current-menu-parent > a {
    color:            rgba(255,255,255,1);
    border-bottom-color: var(--cbm-accent);
}

/* Category-specific accent colours on hover */
.cbm-nav-primary__list > li.menu-cat-technology > a:hover,
.cbm-nav-primary__list > li.menu-cat-technology.current-menu-item > a {
    border-bottom-color: var(--cbm-cat-technology);
}
.cbm-nav-primary__list > li.menu-cat-business > a:hover,
.cbm-nav-primary__list > li.menu-cat-business.current-menu-item > a {
    border-bottom-color: var(--cbm-cat-business);
}
.cbm-nav-primary__list > li.menu-cat-creativity > a:hover,
.cbm-nav-primary__list > li.menu-cat-creativity.current-menu-item > a {
    border-bottom-color: var(--cbm-cat-creativity);
}
.cbm-nav-primary__list > li.menu-cat-society > a:hover,
.cbm-nav-primary__list > li.menu-cat-society.current-menu-item > a {
    border-bottom-color: var(--cbm-cat-society);
}

/* "All Articles" link at far right */
.cbm-nav-primary__all-link {
    display:         flex;
    align-items:     center;
    padding:         0 var(--cbm-space-5);
    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:           var(--cbm-accent);
    text-decoration: none;
    border-left:     1px solid rgba(255,255,255,0.08);
    white-space:     nowrap;
    transition:      color 0.15s ease;
    flex-shrink:     0;
}

.cbm-nav-primary__all-link:hover {
    color:           var(--cbm-accent-hover);
    text-decoration: none;
}

/* Hide primary nav on mobile (mobile drawer takes over) */
@media (max-width: 1023px) {
    .cbm-nav-primary {
        display: none;
    }
}

/* ==========================================================================
   7. NAV DROPDOWNS
   ========================================================================== */

/* Sub-menu container */
.cbm-nav-primary__list li ul.sub-menu {
    position:         absolute;
    top:              100%;
    left:             0;
    z-index:          var(--cbm-z-dropdown);
    min-width:        200px;
    background:       var(--cbm-surface);
    border:           1px solid var(--cbm-border);
    border-top:       3px solid var(--cbm-accent);
    border-radius:    0 0 var(--cbm-radius-md) var(--cbm-radius-md);
    box-shadow:       var(--cbm-shadow-md);
    list-style:       none;
    padding:          var(--cbm-space-2) 0;
    margin:           0;

    /* Hidden by default */
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(-8px);
    transition:       opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events:   none;
}

/* Show on hover or when .is-open (JS-managed for keyboard) */
.cbm-nav-primary__list li:hover > ul.sub-menu,
.cbm-nav-primary__list li.is-open > ul.sub-menu {
    opacity:        1;
    visibility:     visible;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Sub-menu items */
.cbm-nav-primary__list li ul.sub-menu li a {
    display:         block;
    padding:         var(--cbm-space-3) var(--cbm-space-5);
    font-size:       var(--cbm-text-sm);
    font-weight:     var(--cbm-weight-medium);
    color:           var(--cbm-text);
    text-decoration: none;
    text-transform:  none;
    letter-spacing:  normal;
    border-bottom:   none;
    transition:      background-color 0.12s ease, color 0.12s ease;
    white-space:     nowrap;
}

.cbm-nav-primary__list li ul.sub-menu li a:hover {
    background-color: var(--cbm-surface-raised);
    color:            var(--cbm-accent);
    border-bottom:    none;
}

/* Dropdown indicator arrow on parent items that have children */
.cbm-nav-primary__list li.menu-item-has-children > a::after {
    content:        '';
    display:        inline-block;
    width:          0;
    height:         0;
    border-left:    4px solid transparent;
    border-right:   4px solid transparent;
    border-top:     4px solid rgba(255,255,255,0.4);
    margin-left:    var(--cbm-space-2);
    transition:     transform 0.15s ease;
    vertical-align: middle;
}

.cbm-nav-primary__list li.menu-item-has-children:hover > a::after,
.cbm-nav-primary__list li.menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
    border-top-color: rgba(255,255,255,0.75);
}

/* ==========================================================================
   8. MOBILE NAVIGATION DRAWER
   ========================================================================== */

.cbm-mobile-nav {
    position:   fixed;
    inset:      0;
    z-index:    var(--cbm-z-modal);
    display:    flex;
    align-items: stretch;

    /* Hidden by default */
    visibility: hidden;
    pointer-events: none;
}

.cbm-mobile-nav.is-open {
    visibility:     visible;
    pointer-events: auto;
}

/* The drawer panel itself — slides in from the left */
.cbm-mobile-nav__inner {
    position:         relative;
    z-index:          2;
    width:            min(360px, 88vw);
    max-height:       100dvh;  /* dvh = dynamic viewport height (handles mobile browser chrome) */
    overflow-y:       auto;
    overscroll-behavior: contain;
    background-color: var(--cbm-masthead-bg);
    display:          flex;
    flex-direction:   column;
    gap:              0;
    padding:          0;

    /* Slide in from left */
    transform:    translateX(-100%);
    transition:   transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.cbm-mobile-nav.is-open .cbm-mobile-nav__inner {
    transform: translateX(0);
}

/* Header row inside drawer */
.cbm-mobile-nav__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--cbm-space-5) var(--cbm-space-6);
    border-bottom:   1px solid rgba(255,255,255,0.08);
    flex-shrink:     0;
}

/* Close button */
.cbm-mobile-nav__close {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            44px;
    height:           44px;
    background:       transparent;
    border:           1px solid rgba(255,255,255,0.1);
    border-radius:    var(--cbm-radius);
    color:            rgba(255,255,255,0.7);
    cursor:           pointer;
    transition:       background-color 0.15s ease, color 0.15s ease;
    flex-shrink:      0;
}

.cbm-mobile-nav__close:hover {
    background-color: rgba(255,255,255,0.1);
    color:            #fff;
}

/* Primary link list */
.cbm-mobile-nav__list {
    list-style:  none;
    margin:      0;
    padding:     var(--cbm-space-4) 0;
}

.cbm-mobile-nav__list--primary {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cbm-mobile-nav__list li a {
    display:         block;
    padding:         var(--cbm-space-4) var(--cbm-space-6);
    font-family:     var(--cbm-font-heading);
    font-size:       var(--cbm-text-xl);
    font-weight:     var(--cbm-weight-bold);
    color:           rgba(255,255,255,0.85);
    text-decoration: none;
    letter-spacing:  -0.01em;
    border-left:     3px solid transparent;
    transition:      color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.cbm-mobile-nav__list li a:hover {
    color:            #fff;
    border-left-color: var(--cbm-accent);
    background-color: rgba(255,255,255,0.04);
    text-decoration:  none;
}

.cbm-mobile-nav__list li.current-menu-item > a {
    color:             #fff;
    border-left-color: var(--cbm-accent);
}

/* Secondary links — smaller */
.cbm-mobile-nav__list--secondary li a {
    font-family:  var(--cbm-font-body);
    font-size:    var(--cbm-text-base);
    font-weight:  var(--cbm-weight-medium);
    color:        rgba(255,255,255,0.5);
    letter-spacing: normal;
    padding:      var(--cbm-space-3) var(--cbm-space-6);
}

.cbm-mobile-nav__list--secondary li a:hover {
    color:       rgba(255,255,255,0.85);
}

/* Sub-menus in mobile drawer — stacked, not hidden */
.cbm-mobile-nav__list .sub-menu {
    list-style: none;
    margin:     0;
    padding:    0;
    background: rgba(0,0,0,0.15);
}

.cbm-mobile-nav__list .sub-menu li a {
    font-family:  var(--cbm-font-body);
    font-size:    var(--cbm-text-base);
    font-weight:  var(--cbm-weight-normal);
    padding-left: var(--cbm-space-10);
}

/* Footer of drawer — dark mode toggle */
.cbm-mobile-nav__footer {
    margin-top:  auto;
    padding:     var(--cbm-space-6);
    border-top:  1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.cbm-mobile-nav__dark-toggle {
    display:     flex;
    align-items: center;
    gap:         var(--cbm-space-3);
    background:  transparent;
    border:      1px solid rgba(255,255,255,0.15);
    border-radius: var(--cbm-radius);
    padding:     var(--cbm-space-3) var(--cbm-space-4);
    color:       rgba(255,255,255,0.65);
    cursor:      pointer;
    font-family: var(--cbm-font-body);
    font-size:   var(--cbm-text-sm);
    font-weight: var(--cbm-weight-medium);
    width:       100%;
    transition:  background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cbm-mobile-nav__dark-toggle:hover {
    background-color: rgba(255,255,255,0.08);
    color:            rgba(255,255,255,0.9);
    border-color:     rgba(255,255,255,0.25);
}

/* Backdrop */
.cbm-mobile-nav__backdrop {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: rgba(0,0,0,0.65);
    opacity:    0;
    transition: opacity 0.3s ease;
    cursor:     pointer;
}

.cbm-mobile-nav.is-open .cbm-mobile-nav__backdrop {
    opacity: 1;
}

/* Hide mobile drawer on desktop */
@media (min-width: 1024px) {
    .cbm-mobile-nav {
        display: none !important;
    }
}

/* ==========================================================================
   9. SEARCH MODAL
   ========================================================================== */

.cbm-search-modal {
    position:       fixed;
    inset:          0;
    z-index:        var(--cbm-z-modal);
    display:        flex;
    align-items:    flex-start;
    justify-content: center;
    padding-top:    clamp(60px, 12vh, 120px);
    padding-left:   var(--cbm-space-6);
    padding-right:  var(--cbm-space-6);

    /* Hidden by default */
    visibility:     hidden;
    pointer-events: none;
}

.cbm-search-modal.is-open {
    visibility:     visible;
    pointer-events: auto;
}

/* Backdrop */
.cbm-search-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(10, 15, 25, 0.88);
    opacity:    0;
    transition: opacity 0.2s ease;
    cursor:     pointer;
}

.cbm-search-modal.is-open .cbm-search-modal__backdrop {
    opacity: 1;
}

/* Content panel */
.cbm-search-modal__inner {
    position:         relative;
    z-index:          2;
    width:            100%;
    max-width:        680px;
    transform:        translateY(-16px);
    opacity:          0;
    transition:       transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.cbm-search-modal.is-open .cbm-search-modal__inner {
    transform: translateY(0);
    opacity:   1;
}

/* Close button (top-right of modal) */
.cbm-search-modal__close {
    position:   absolute;
    top:        -48px;
    right:      0;
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      44px;
    height:     44px;
    background: rgba(255,255,255,0.1);
    border:     1px solid rgba(255,255,255,0.2);
    border-radius: var(--cbm-radius);
    color:      rgba(255,255,255,0.8);
    cursor:     pointer;
    transition: background-color 0.15s ease;
}

.cbm-search-modal__close:hover {
    background: rgba(255,255,255,0.2);
    color:      #fff;
}

/* Content */
.cbm-search-modal__content {
    background:    var(--cbm-surface);
    border-radius: var(--cbm-radius-lg);
    padding:       var(--cbm-space-8);
    box-shadow:    var(--cbm-shadow-lg);
}

.cbm-search-modal__heading {
    font-family:   var(--cbm-font-heading);
    font-size:     var(--cbm-text-2xl);
    font-weight:   var(--cbm-weight-bold);
    color:         var(--cbm-text-heading);
    margin-bottom: var(--cbm-space-6);
    line-height:   var(--cbm-leading-snug);
}

/* Search input row */
.cbm-search-modal__input-wrap {
    display:       flex;
    align-items:   stretch;
    border:        2px solid var(--cbm-border);
    border-radius: var(--cbm-radius-md);
    overflow:      hidden;
    transition:    border-color 0.15s ease;
    margin-bottom: var(--cbm-space-6);
}

.cbm-search-modal__input-wrap:focus-within {
    border-color: var(--cbm-accent);
}

.cbm-search-modal__input {
    flex:        1;
    padding:     var(--cbm-space-4) var(--cbm-space-5);
    font-family: var(--cbm-font-body);
    font-size:   var(--cbm-text-lg);
    color:       var(--cbm-text);
    background:  transparent;
    border:      none;
    outline:     none;
    line-height: 1.3;
}

.cbm-search-modal__input::placeholder {
    color: var(--cbm-text-muted);
}

/* Remove browser default search clear button */
.cbm-search-modal__input::-webkit-search-decoration,
.cbm-search-modal__input::-webkit-search-cancel-button {
    display: none;
}

.cbm-search-modal__submit {
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     0 var(--cbm-space-5);
    background:  var(--cbm-accent);
    border:      none;
    color:       #fff;
    cursor:      pointer;
    transition:  background-color 0.15s ease;
    flex-shrink: 0;
}

.cbm-search-modal__submit:hover {
    background: var(--cbm-accent-hover);
}

.cbm-search-modal__submit svg {
    width:  22px;
    height: 22px;
}

/* Quick links */
.cbm-search-modal__quick-label {
    font-size:      var(--cbm-text-xs);
    font-weight:    var(--cbm-weight-bold);
    letter-spacing: var(--cbm-tracking-caps);
    text-transform: uppercase;
    color:          var(--cbm-text-muted);
    margin-bottom:  var(--cbm-space-3);
}

.cbm-search-modal__quick-links {
    display:  flex;
    flex-wrap: wrap;
    gap:      var(--cbm-space-2);
}

/* ==========================================================================
   10. READING PROGRESS BAR
   ========================================================================== */

.cbm-progress-bar {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--cbm-z-toast);
    height:     3px;
    background: transparent;
    pointer-events: none;
}

.cbm-progress-bar__fill {
    height:     100%;
    width:      0%;
    background: linear-gradient(90deg, var(--cbm-accent) 0%, var(--cbm-secondary) 100%);
    transition: width 0.1s linear;
    will-change: width;
}

/* ==========================================================================
   11. RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet: hide tagline in utility bar, compress masthead */
@media (max-width: 1023px) {
    .cbm-utility-bar {
        display: none; /* Full utility bar hidden on mobile/tablet */
    }

    .cbm-masthead__tagline {
        display: none;
    }

    .cbm-masthead__inner {
        min-height: var(--cbm-masthead-height-sm);
        padding:    var(--cbm-space-3) 0;
    }
}

/* Narrow mobile: smaller wordmark */
@media (max-width: 479px) {
    .cbm-wordmark__text {
        font-size: 1.6rem;
    }

    .cbm-wordmark__edition {
        display: none;
    }

    .cbm-masthead__btn {
        width:  40px;
        height: 40px;
    }
}

/* Touch devices: increase tap targets */
@media (hover: none) and (pointer: coarse) {
    .cbm-nav-primary__list > li > a {
        padding: 0 var(--cbm-space-4);
    }

    .cbm-mobile-nav__list li a {
        padding-top:    var(--cbm-space-5);
        padding-bottom: var(--cbm-space-5);
    }
}

/* Landscape mobile: compact masthead */
@media (max-height: 500px) and (orientation: landscape) {
    .cbm-masthead {
        padding: var(--cbm-space-2) 0;
    }

    .cbm-masthead__inner {
        min-height: 48px;
    }

    .cbm-mobile-nav__list li a {
        padding-top:    var(--cbm-space-3);
        padding-bottom: var(--cbm-space-3);
        font-size:      var(--cbm-text-lg);
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    .cbm-site-header {
        border-bottom: 2px solid ButtonText;
    }

    .cbm-wordmark__book {
        color: Highlight;
    }

    .cbm-masthead__btn {
        forced-color-adjust: auto;
    }
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
    .cbm-site-header,
    .cbm-mobile-nav,
    .cbm-search-modal,
    .cbm-progress-bar {
        display: none !important;
    }
}