/*
 * btcp-patch1.css — v4.1 fixes
 * 1. Nav class alias: .btc-primary-nav mirrors .btc-header-nav
 * 2. Buy button class alias: .btc-buy-cta-btn mirrors .btc-header-cta
 * 3. Sidebar sticky on article pages (#secondary)
 * 4. Homepage sidebar sticky refinement
 */

/* ============================================================
   FIX 1: NAV — alias .btc-primary-nav → same as .btc-header-nav
   ============================================================ */

.btc-primary-nav {
    display:         flex;
    align-items:     center;
    gap:             4px;
    flex:            1;
    justify-content: center;
}

.btc-primary-nav > ul {
    display:     flex;
    align-items: center;
    gap:         4px;
    list-style:  none;
    margin:      0;
    padding:     0;
}

.btc-primary-nav > ul > li {
    position: relative;
}

.btc-primary-nav > ul > li > a {
    display:         flex;
    align-items:     center;
    gap:             4px;
    padding:         0 12px;
    height:          var(--header-h);
    font-size:       14px;
    font-weight:     500;
    color:           var(--text2);
    text-decoration: none;
    white-space:     nowrap;
    border-bottom:   2px solid transparent;
    transition:      color var(--transition), border-color var(--transition);
}

.btc-primary-nav > ul > li > a:hover,
.btc-primary-nav > ul > li.current-menu-item > a,
.btc-primary-nav > ul > li.current-menu-ancestor > a {
    color:              var(--accent);
    border-bottom-color: var(--accent);
}

/* Dropdown submenus */
.btc-primary-nav .sub-menu {
    position:      absolute;
    top:           calc(100% + 1px);
    left:          0;
    min-width:     220px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-top:    2px solid var(--accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow:    var(--shadow-lg);
    z-index:       999;
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(-6px);
    transition:    opacity var(--transition), visibility var(--transition), transform var(--transition);
    list-style:    none;
    padding:       6px 0;
    margin:        0;
}

.btc-primary-nav li:hover > .sub-menu,
.btc-primary-nav li:focus-within > .sub-menu {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

.btc-primary-nav .sub-menu li a {
    display:     block;
    padding:     9px 18px;
    font-size:   13px;
    font-weight: 500;
    color:       var(--text2);
    white-space: nowrap;
    transition:  color var(--transition), background var(--transition);
    border-bottom: none;
    height: auto;
}

.btc-primary-nav .sub-menu li a:hover {
    color:      var(--accent);
    background: var(--surface2);
}

/* ============================================================
   FIX 2: BUY BUTTON — alias .btc-buy-cta-btn → same as .btc-header-cta
   ============================================================ */

.btc-buy-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      var(--accent);
    color:           #000 !important;
    font-size:       13px;
    font-weight:     700;
    padding:         8px 18px;
    border-radius:   20px;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--transition), transform var(--transition);
    border:          none;
    letter-spacing:  .3px;
    line-height:     1;
}

.btc-buy-cta-btn:hover {
    background: #e8850f;
    color:      #000 !important;
    transform:  translateY(-1px);
}

/* Mobile CTA in nav drawer — keep consistent */
.btc-mobile-cta {
    width:           100%;
    justify-content: center;
    border-radius:   var(--radius);
    padding:         12px 18px;
    font-size:       15px;
}

/* ============================================================
   FIX 3: SIDEBAR STICKY — homepage (.btcp-sidebar-col) refinement
   ============================================================ */

/* Ensure the grid container allows sticky children */
.btcp-main-layout {
    align-items: start; /* critical for sticky to work inside grid */
}

/* Sticky sidebar on homepage */
.btcp-sidebar-col {
    position:   sticky;
    top:        calc(var(--header-h) + var(--ticker-h) + 16px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    align-self:  start; /* also needed for grid sticky */
}

.admin-bar .btcp-sidebar-col {
    top: calc(var(--header-h) + var(--ticker-h) + 32px + 16px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 32px - 32px);
}

/* ============================================================
   FIX 4: ARTICLE PAGE SIDEBAR (#secondary) — sticky
   ============================================================ */

body.single #secondary,
body.archive #secondary,
body.page #secondary {
    position:   sticky;
    top:        calc(var(--header-h) + var(--ticker-h) + 16px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    align-self: start;
}

body.single.admin-bar #secondary,
body.archive.admin-bar #secondary,
body.page.admin-bar #secondary {
    top: calc(var(--header-h) + var(--ticker-h) + 32px + 16px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 32px - 32px);
}

/* Make sure the article layout grid has align-items: start */
body.single .vmag-container,
body.archive .vmag-container {
    align-items: start;
}

/* ============================================================
   FIX 5: RESPONSIVE — hide nav on mobile, show hamburger
   ============================================================ */

@media (max-width: 1024px) {
    .btc-primary-nav {
        display: none;
    }
    .btc-hamburger {
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .btc-buy-cta-btn:not(.btc-mobile-cta) .btc-cta-arrow {
        display: none;
    }
    .btc-buy-cta-btn:not(.btc-mobile-cta) {
        padding:   7px 12px;
        font-size: 12px;
    }
}

/* ============================================================
   FIX 6: ARTICLE HEADINGS — force white/light colors on dark bg
   ============================================================ */

/* H1 article title */
h1.entry-title,
.entry-title,
.post-title,
body.single h1 {
    color: var(--text) !important;
}

/* H2, H3, H4 inside article content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    color: var(--text) !important;
}

/* General headings everywhere that VMag might override */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    color: var(--text);
}

/* Card titles on homepage/archives */
.btcp-card-title a,
.btcp-card-title {
    color: var(--text) !important;
}

/* Widget titles, sidebar headings */
.widget-title,
.widgettitle,
.widget h2,
.widget h3 {
    color: var(--text) !important;
}

/* ============================================================
   SHARE BUTTONS — Premium design
   ============================================================ */

.btc-share-bar {
    margin:          28px 0;
    padding:         20px 24px;
    background:      var(--surface);
    border:          1px solid var(--border);
    border-radius:   var(--radius);
    border-left:     3px solid var(--accent);
}

.btc-share-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:       var(--text3);
    margin-bottom: 14px;
}

.btc-share-buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.btc-share-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         9px 16px;
    border-radius:   100px;
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    color:           #fff;
    background:      var(--share-color, #444);
    border:          none;
    cursor:          pointer;
    line-height:     1;
    transition:      transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    white-space:     nowrap;
    font-family:     inherit;
}

.btc-share-btn:hover {
    transform:  translateY(-2px);
    opacity:    0.92;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    color:      #fff;
}

.btc-share-btn:active {
    transform: translateY(0);
}

/* X/Twitter — black with subtle border */
.btc-share-twitter {
    background: #000;
    border:     1px solid rgba(255,255,255,.15);
}

/* Copy button — neutral */
.btc-share-copy {
    background: var(--surface2);
    border:     1px solid var(--border);
    color:      var(--text2);
}
.btc-share-copy:hover {
    color: var(--text);
}
.btc-share-copied {
    background: var(--green) !important;
    color:      #fff !important;
    border-color: transparent !important;
}

/* SVG icons */
.btc-share-btn svg {
    flex-shrink: 0;
}

/* Mobile — hide labels on small screens */
@media (max-width: 640px) {
    .btc-share-btn span {
        display: none;
    }
    .btc-share-btn {
        padding:       10px 12px;
        border-radius: 50%;
        width:         40px;
        height:        40px;
        justify-content: center;
    }
    .btc-share-buttons {
        gap: 10px;
    }
}

/* ============================================================
   FIX 7: SINGLE/PAGE SIDEBAR LAYOUT — vmag-container must flex
   ============================================================ */

/* Force flex row on single posts and pages */
body.single .vmag-container,
body.page .vmag-container,
body.archive .vmag-container {
    display:     flex !important;
    flex-wrap:   nowrap !important;
    align-items: start !important;
    gap:         28px;
    max-width:   1360px;
    margin:      0 auto;
    padding:     0 24px;
    box-sizing:  border-box;
}

/* Main content area — takes available space */
body.single #primary,
body.page #primary,
body.archive #primary {
    flex:      1 1 0%;
    min-width: 0;
}

/* Sidebar — fixed 300px, sticky */
body.single #secondary,
body.page #secondary,
body.archive #secondary {
    flex:       0 0 300px;
    width:      300px;
    min-width:  0;
    position:   sticky;
    top:        calc(var(--header-h) + var(--ticker-h) + 16px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    align-self: start;
}

body.single.admin-bar #secondary,
body.page.admin-bar #secondary,
body.archive.admin-bar #secondary {
    top: calc(var(--header-h) + var(--ticker-h) + 48px);
    max-height: calc(100vh - var(--header-h) - var(--ticker-h) - 64px);
}

/* Breadcrumbs full width above the flex row */
body.single #vmag-breadcrumbs,
body.page #vmag-breadcrumbs,
body.archive #vmag-breadcrumbs {
    flex-basis: 100%;
    order:      -1;
    width:      100%;
    max-width:  1360px;
    margin:     0 auto;
    padding:    0 24px;
    box-sizing: border-box;
}

/* Responsive — stack below 1024px */
@media (max-width: 1024px) {
    body.single .vmag-container,
    body.page .vmag-container,
    body.archive .vmag-container {
        flex-direction: column !important;
    }
    body.single #secondary,
    body.page #secondary,
    body.archive #secondary {
        flex:       1 1 100%;
        width:      100%;
        position:   static;
        max-height: none;
    }
}