/* Force Inter font across the entire single post template */
.uxarmy-single-hero,
.uxarmy-single-hero *,
.uxarmy-single,
.uxarmy-single * {
    font-family: 'Inter', sans-serif !important;
}

/* Background colour set via inline style (Pods field: hero_bg_color). */
.uxarmy-single-hero {
    max-width:     1240px         !important;
    margin:        20px auto 0    !important;
    padding:       32px 48px 40px !important;
    border-radius: 10px           !important;
    box-sizing:    border-box;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.uxarmy-single-hero__breadcrumb {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     16px;
    font-weight:   400;
    line-height:   1.6;
    color:         #6b7280;
    margin-bottom: 24px;
}

.uxarmy-single-hero__breadcrumb a {
    color:           #000 !important;
    font-size:       17px !important;
    font-weight:     400  !important;
}

.uxarmy-single-hero__breadcrumb a:hover {
    color:           #374151 !important;
    text-decoration: none    !important;
}

.uxarmy-single-hero__breadcrumb-sep {
    color: #9ca3af;
}

/* Hide Home breadcrumb from UI (schema includes it for SEO, but UI shows Resources first) */
.uxarmy-single-hero__breadcrumb a:first-of-type[href="/"],
.uxarmy-single-hero__breadcrumb a:first-of-type[href*="domain.com/"],
.uxarmy-single-hero__breadcrumb ~ a[data-breadcrumb="home"] {
    display: none;
}

.uxarmy-single-hero__breadcrumb a.uxarmy-single-hero__breadcrumb-cat {
    font-weight: 600 !important;
}

/* ── Hero two-column grid ────────────────────────────────────────────────── */
.uxarmy-single-hero__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   48px;
    align-items:           center;
}

.uxarmy-single-hero__content {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

/* Category badge (span) — bg colour set via inline style */
.uxarmy-single-hero__category-badge {
    display:        inline-block !important;
    align-self:     flex-start   !important;
    color:          #ffffff      !important;
    padding:        12px 20px    !important;
    border-radius:  999px        !important;
    font-size:      12px         !important;
    font-weight:    600          !important;
    text-transform: uppercase    !important;
    letter-spacing: 0.5px        !important;
    line-height:    1.4          !important;
    margin-bottom:  16px         !important;
}

/* Title */
.uxarmy-single-hero__title {
    font-size:                 44px     !important;
    font-weight:               700      !important;
    color:                     #000     !important;
    -webkit-text-stroke-color: #000     !important;
    line-height:               1.2      !important;
    margin:                    0 0 28px !important;
    padding:                   0        !important;
    letter-spacing:            -0.5px   !important;
}

/* Excerpt */
.uxarmy-single-hero__excerpt {
    font-size:   18px    !important;
    font-weight: 400     !important;
    line-height: 30px    !important;
    color:       #374151 !important;
    margin:      0 0 32px !important;
    max-width:   580px;
}

/* ── Author box ──────────────────────────────────────────────────────────── */
.uxarmy-single-hero__author-box {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
}

.uxarmy-single-hero__author-left {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.uxarmy-single-hero__avatar {
    width:         43px !important;
    height:        43px !important;
    border-radius: 50%  !important;
    object-fit:    cover !important;
    flex-shrink:   0;
}

.uxarmy-single-hero__author-info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.uxarmy-single-hero__author-name {
    font-size:   1rem;
    font-weight: 600;
    color:       #202939;
    line-height: 1.3;
}

.uxarmy-single-hero__author-role {
    font-size:   12px;
    font-weight: 400;
    color:       #202939;
    line-height: 1.3;
}

.uxarmy-single-hero__author-divider {
    width:         2px;
    height:        40px;
    background:    #04CFCF;
    border-radius: 1px;
    flex-shrink:   0;
}

/* Post meta (date + reading time) */
.uxarmy-single-hero__post-meta {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.uxarmy-single-hero__meta-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    font-weight: 600;
    color:       #202939;
    line-height: 30px;
}

.uxarmy-single-hero__meta-item svg {
    flex-shrink: 0;
}

/* ── Hero share icons — hidden on desktop, visible on mobile ─────────────── */
.uxarmy-single-hero__mobile-share {
    display: none;
}

.uxarmy-single-hero__share-label {
    font-family:  'Inter', sans-serif;
    font-size:    14px;
    font-weight:  600;
    color:        #202939;
    white-space:  nowrap;
}

.uxarmy-single-hero__mobile-share .share-icons-wrapper {
    display:     flex   !important;
    align-items: center !important;
    gap:         8px    !important;
}

.uxarmy-single-hero__mobile-share .share-icon {
    display:     inline-flex !important;
    align-items: center     !important;
    background:  none       !important;
    border:      none       !important;
    padding:     0          !important;
    cursor:      pointer;
}

.uxarmy-single-hero__mobile-share .share-icon img {
    width:  22px !important;
    height: 22px !important;
}

/* ── Right: thumbnail ────────────────────────────────────────────────────── */
.uxarmy-single-hero__thumb {
    margin:  0 !important;
    padding: 0 !important;
}

.uxarmy-single-hero__thumb-img {
    width:          90%  !important;
    height:         auto !important;
    display:        inline-block !important;
    border-radius:  12px !important;
    object-fit:     cover;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER 2 — Body
   ═══════════════════════════════════════════════════════════════════════ */

.uxarmy-single {
    max-width:  1240px         !important;
    margin:     0 auto         !important;
    padding:    48px 16px 80px !important;
    box-sizing: border-box     !important;
    color:      #202939        !important;
}

.uxarmy-single__layout {
    display:               grid;
    grid-template-columns: 30% 1fr;
    gap:                   20px;
    align-items:           start;
}

/* ── Sidebar (TOC + Share) ───────────────────────────────────────────────── */
.uxarmy-single__sidebar {
    position:       sticky;
    top:            100px;
    max-height:     calc(100vh - 120px);
    display:        flex;
    flex-direction: column;
    order:          -1;
}

@media (min-width: 1025px) {
    .uxarmy-single__sidebar .uxarmy-toc {
        margin: 0;
    }

    .uxarmy-single__sidebar .uxarmy-toc__header {
        margin-bottom: 26px;
    }

    .uxarmy-single__sidebar .uxarmy-toc__header svg {
        margin-left: 6px;
    }

    .uxarmy-single__sidebar .uxarmy-toc__heading {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #202939;
        font-style: normal;
    }

    .uxarmy-single__sidebar .uxarmy-toc__list {
        position: relative;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .uxarmy-single__sidebar .uxarmy-toc__item {
        position: relative;
        margin: 0 0 14px 0 !important;
        padding: 0 0 0 42px !important;
    }

    .uxarmy-single__sidebar .uxarmy-toc__item::before {
        content: '';
        position: absolute;
        left: 3.5px;
        top: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #7b7b85;
        background: #fff;
        transition: border-color 0.2s ease;
        z-index: 1;
    }

    .uxarmy-single__sidebar .uxarmy-toc__item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 12px;
        top: 14px;
        bottom: -28px;
        width: 3px;
        border-radius: 999px;
        background: #7a8ba4;
        z-index: 0;
    }

    .uxarmy-single__sidebar .uxarmy-toc__item.is-active::before,
    .uxarmy-single__sidebar .uxarmy-toc__item:hover::before,
    .uxarmy-single__sidebar .uxarmy-toc__item:focus-within::before {
        border-color: rgb(5, 104, 253);
    }

    .uxarmy-single__sidebar .uxarmy-toc__item.is-active .uxarmy-toc__link::before,
    .uxarmy-single__sidebar .uxarmy-toc__item:hover .uxarmy-toc__link::before,
    .uxarmy-single__sidebar .uxarmy-toc__item:focus-within .uxarmy-toc__link::before {
        opacity: 1;
        transform: scale(1);
    }

    .uxarmy-single__sidebar .uxarmy-toc__num {
        display: none;
    }

    .uxarmy-single__sidebar .uxarmy-toc__link {
        display: block;
        position: relative;
        color: rgb(83, 90, 116) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.5;
        font-style: normal;
        text-transform: none;
    }

    .uxarmy-single__sidebar .uxarmy-toc__link::before {
        content: '';
        position: absolute;
        left: -32.5px;
        top: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(5, 104, 253);
        z-index: 2;
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .uxarmy-single__sidebar .uxarmy-toc__link:hover,
    .uxarmy-single__sidebar .uxarmy-toc__item.is-active .uxarmy-toc__link {
        color: rgb(5, 104, 253) !important;
        text-decoration: none;
    }
}

/* Keep legacy reset only on tablet/mobile layouts */
@media (max-width: 1024px) {
    .uxarmy-single__sidebar .uxarmy-toc__item {
        margin-left:  0 !important;
        padding-left: 0 !important;
    }
}

/* Active TOC item — matches the hover color from blog-grid.css */
.uxarmy-toc__item.is-active .uxarmy-toc__link {
    color: rgb(5, 104, 253) !important;
}

.uxarmy-toc__item.is-active .uxarmy-toc__num {
    color: rgb(5, 104, 253) !important;
}

/* ── Mobile TOC (sticky, collapsible) — hidden on desktop ────────────────── */
.uxarmy-single__mobile-toc {
    display: none;
}
.uxarmy-single__content figure {
    overflow-x: hidden;
    margin: 0 !important;
}

figure.wp-block-table {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

figure.wp-block-table table {
    margin-bottom: 0;
}

/* Header row: clickable button — icon + "Table of Contents" + chevron */
.uxarmy-single__mobile-toc-header {
    display:            flex !important;
    align-items:        center !important;
    gap:                8px !important;
    padding:            14px 16px !important;
    font-size:          14px !important;
    font-weight:        700 !important;
    color:              #0f172a !important;
    text-transform:     uppercase !important;
    letter-spacing:     0.08em !important;
    line-height:        1.4 !important;
    width:              100% !important;
    box-sizing:         border-box !important;
    border:             none !important;
    border-radius:      0 !important;
    background:         transparent !important;
    background-color:   transparent !important;
    box-shadow:         none !important;
    outline:            none !important;
    cursor:             pointer !important;
    margin:             0 !important;
    font-family:        'Inter', sans-serif !important;
    text-decoration:    none !important;
    text-align:         left !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    touch-action:       manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Chevron arrow */
.uxarmy-single__mobile-toc-chevron {
    margin-left:  auto !important;
    flex-shrink:  0 !important;
    display:      inline-block !important;
    border:       solid #0f172a !important;
    border-width: 0 2px 2px 0 !important;
    padding:      4px !important;
    transform:    rotate(45deg) !important;
    transition:   transform 0.2s ease !important;
}

.uxarmy-single__mobile-toc-header[aria-expanded="true"] .uxarmy-single__mobile-toc-chevron {
    transform: rotate(-135deg) !important;
}

/* TOC body */
.uxarmy-single__mobile-toc-body {
    padding:    0 16px;
    width:      100% !important;
    box-sizing: border-box !important;
}

/* Ensure the TOC list has no extra margins */
.uxarmy-single__mobile-toc .uxarmy-toc__list {
    margin:      0 !important;
    padding:     0 !important;
    list-style:  none !important;
}

/* Hide the shortcode's own header (we use our custom header above) */
.uxarmy-single__mobile-toc .uxarmy-toc__header {
    display: none !important;
}

.uxarmy-single__mobile-toc .uxarmy-toc {
    margin: 0;
    padding-bottom: 12px;
}

.uxarmy-single__mobile-toc .uxarmy-toc__item {
    margin-left:  0 !important;
    padding-left: 0 !important;
}

.uxarmy-single__mobile-toc .uxarmy-toc__link,
.uxarmy-single__sidebar .uxarmy-toc__link {
    cursor:                     pointer !important;
    touch-action:               manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Collapsed state: hide the TOC until its header is opened. */
.uxarmy-single__mobile-toc.is-collapsed .uxarmy-single__mobile-toc-body {
    display: none !important;
}

/* A sticky, closed TOC previews only a heading that has reached the TOC. */
.uxarmy-single__mobile-toc.is-collapsed.is-sticky.has-active-heading .uxarmy-single__mobile-toc-body {
    display: block !important;
}

.uxarmy-single__mobile-toc.is-collapsed.is-sticky.has-active-heading .uxarmy-toc__item {
    display: none !important;
}

.uxarmy-single__mobile-toc.is-collapsed.is-sticky.has-active-heading .uxarmy-toc__item.is-active {
    display: list-item !important;
}

/* Expanded state: show all items */
.uxarmy-single__mobile-toc.is-expanded .uxarmy-toc__item {
    display: list-item !important;
}

/* ── Share on: section in sidebar ────────────────────────────────────────── */
.uxarmy-single__share {
    padding-top: 4px;
    flex-shrink: 0;
}

.uxarmy-single__share-label {
    display:       block;
    font-size:     14px;
    font-weight:   600;
    color:         #202939;
    margin-bottom: 12px;
}

.uxarmy-single__share .share-icons-wrapper {
    display:     flex   !important;
    align-items: center !important;
    gap:         8px    !important;
    flex-wrap:   wrap   !important;
}

.uxarmy-single .share-icons-wrapper .share-icon {
    display:     inline-flex !important;
    align-items: center     !important;
    transition:  transform 0.2s ease;
    background:  none;
    border:      none;
    padding:     0;
    cursor:      pointer;
}

.uxarmy-single .share-icons-wrapper .share-icon:hover {
    transform: translateY(-4px);
}

.uxarmy-single .share-icons-wrapper .share-icon img {
    width:  26px !important;
    height: 26px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Article Content — only styles NOT covered by the global style guide CSS.
   ═══════════════════════════════════════════════════════════════════════ */

.uxarmy-single__content {
    min-width: 0;
}

.uxarmy-single__content a {
    text-decoration: underline !important;
}

.uxarmy-single__content a.link-icon,
.uxarmy-single__content a.uxarmy-cta-banner__btn,
.uxarmy-single__content a.uxarmy-cta-banner-image__btn,
.uxarmy-single__content a.uxarmy-single__explore-btn,
.uxarmy-single__content .social-share-icons a,
.uxarmy-single__content .wp-block-button a {
    text-decoration: none !important;
}

.uxarmy-single__content :is(h1, h2, h3, h4, h5, h6) a {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
}

.uxarmy-single__content figure img {
    margin: 15px 0;
    border-radius: 10px;
}

.uxarmy-single__content figcaption {
    text-align: center;
    margin-bottom:30px;
}

.uxarmy-single__content ul,
.uxarmy-single__content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.uxarmy-single__content ul {
    list-style: none !important;
    padding-left: 0;
}

.uxarmy-single__content ul > li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.uxarmy-single__content ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9em;
    width: 12px;
    height: 12px;
    background: url('https://uxarmy.com/wp-content/uploads/2026/04/bullet.svg') no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
}

.uxarmy-single__content ul > li:last-child {
    margin-bottom: 0;
}

.uxarmy-single__content ul ul,
.uxarmy-single__content ul ol,
.uxarmy-single__content ol ul,
.uxarmy-single__content ol ol {
    list-style: circle !important;
    padding-left: 15px;
}

.uxarmy-single__content ul ul > li,
.uxarmy-single__content ul ol > li,
.uxarmy-single__content ol ul > li,
.uxarmy-single__content ol ol > li {
    position: static;
    padding-left: 0;
}

.uxarmy-single__content ul ul > li::before,
.uxarmy-single__content ul ol > li::before,
.uxarmy-single__content ol ul > li::before,
.uxarmy-single__content ol ol > li::before {
    content: none;
}

.uxarmy-single__content table thead:first-child tr:first-child th {
    background: #2e62e9 !important;
    color: #ffffff !important;
}

.uxarmy-single__content blockquote {
    border-left:   4px solid #2e62e9 !important;
    margin:        0!important;
    padding:       16px 24px !important;
    background:    #f8f9fb   !important;
    border-radius: 0 8px 8px 0;
}

.uxarmy-single__content blockquote p {
    font-style: italic !important;
    color:      #374151 !important;
    margin:     0       !important;
}

.uxarmy-single__content code {
    background:    #f6f8fa;
    padding:       2px 6px;
    border-radius: 4px;
    font-size:     15px;
    font-family:   'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

.uxarmy-single__content pre {
    background:    #f6f8fa !important;
    padding:       20px    !important;
    border-radius: 8px     !important;
    overflow-x:    auto    !important;
    margin:        24px 0  !important;
    border:        1px solid #e8e8f1;
}

.uxarmy-single__content pre code {
    background: transparent;
    padding:    0;
}

.uxarmy-single__content .wp-block-note,
.uxarmy-single__content .info-box,
.uxarmy-single__content .note-box {
    background:    #FFF3D6;
    padding:       24px 28px;
    border-radius: 8px;
    margin:        28px 0;
}

.uxarmy-single__content .wp-block-tip,
.uxarmy-single__content .pro-tip-box,
.uxarmy-single__content .tip-box {
    background:    #EAEFFD;
    padding:       24px 28px;
    border-radius: 8px;
    margin:        28px 0;
}

.uxarmy-single__content hr {
    border:     none;
    border-top: 1px solid #e5e7eb;
    margin:     40px 0;
}

.uxarmy-single__content a.link-icon {
    display:         inline-flex !important;
    align-items:     center;
    margin-left:     8px;
    text-decoration: none !important;
    vertical-align:  middle;
    cursor:          pointer;
    opacity:         0;
    transition:      opacity 0.2s;
}

.uxarmy-single__content h2:hover a.link-icon,
.uxarmy-single__content a.link-icon:focus {
    opacity: 1 !important;
}

.uxarmy-single__content a.link-icon img {
    transform:  rotate(130deg) !important;
    display:    block          !important;
    margin-top: 0              !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER 3 — Footer sections
   ═══════════════════════════════════════════════════════════════════════ */

.uxarmy-single__related {
    margin-top: 48px;
}

.uxarmy-single__section-heading {
    font-size:   28px   !important;
    font-weight: 700    !important;
    color:       #111827 !important;
    margin:      0 0 32px !important;
    padding:     0       !important;
    line-height: 1.3    !important;
    text-align:  center !important;
}

.uxarmy-single__explore-all {
    text-align: center;
    margin-top: 40px;
}

.uxarmy-single__explore-btn {
    display:         inline-flex  !important;
    align-items:     center      !important;
    gap:             8px         !important;
    padding:         12px 28px   !important;
    border:          2px solid #2e62e9 !important;
    border-radius:   8px         !important;
    color:           #2e62e9     !important;
    background:      transparent !important;
    font-size:       15px        !important;
    font-weight:     600         !important;
    text-decoration: none        !important;
    transition:      background 0.2s ease, color 0.2s ease;
}

.uxarmy-single__explore-btn:hover {
    background:      #2e62e9 !important;
    color:           #ffffff !important;
    text-decoration: none    !important;
}

.uxarmy-single__explore-btn svg {
    transition: transform 0.2s ease;
}

.uxarmy-single__explore-btn:hover svg {
    transform: translateX(4px);
}

/* ── Toast notification (copy link) ──────────────────────────────────────── */
#uxarmy-copy-toast {
    position:       fixed;
    bottom:         32px;
    left:           50%;
    transform:      translateX(-50%) translateY(12px);
    background:     #3451d1;
    color:          #fff;
    padding:        14px 24px;
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    gap:            12px;
    font-size:      15px;
    font-weight:    500;
    line-height:    1.4;
    white-space:    nowrap;
    z-index:        999999;
    opacity:        0;
    pointer-events: none;
    box-shadow:     0 4px 20px rgba(0, 0, 0, 0.18);
    transition:     opacity 0.22s ease, transform 0.22s ease;
}

#uxarmy-copy-toast.is-visible {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

.uxarmy-toast-icon {
    width:           26px;
    height:          26px;
    background:      rgba(255, 255, 255, 0.22);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       14px;
    font-weight:     700;
    flex-shrink:     0;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1024px) {
    .uxarmy-single-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .uxarmy-single-hero__title {
        font-size: 36px !important;
    }
    .uxarmy-single-hero__thumb {
        max-width: 540px;
    }
    .uxarmy-single__layout {
        grid-template-columns: 1fr !important;
    }
    .uxarmy-single__sidebar {
        display: none;
    }
    .uxarmy-single__mobile-toc {
        display:          block;
        position:         sticky;
        top:              0;
        z-index:          100;
        background:       #fff !important;
        background-color: #fff !important;
        margin-left:      -24px !important;
        margin-right:     -24px !important;
        padding-left:     0 !important;
        padding-right:    0 !important;
    }
    
    body.single-post .elementor-element-523ea1f,
    body.single-post .ux-header {
    width: 100% !important;
    }
    body.single-post .ux-header {
        position: static !important;
    }
    body.single-post .ux-header__spacer {
        display: none !important;
    }
    
    /* Hero share icons on mobile */
    .uxarmy-single-hero__mobile-share {
        display:     flex;
        align-items: center;
        gap:         12px;
        margin-bottom:  20px;
    }
    /* Hide heading copy-link icons on mobile */
    .uxarmy-single__content a.link-icon {
        display: none !important;
    }
}

@media (max-width: 768px) {
    figure.wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .uxarmy-single-hero {
        padding:       24px 16px 32px !important;
        margin:        0 auto         !important;
        border-radius: 0              !important;
    }
    .uxarmy-single-hero__grid {
        gap: 0 !important;
    }
    .uxarmy-single-hero__title {
        font-size: 30px !important;
    }
    .uxarmy-single-hero__excerpt {
        font-size:   18px !important;
        font-weight: 400  !important;
        line-height: 30px !important;
        margin: 18px 0px  !important;
    }
    .uxarmy-single-hero__author-box {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }
    .uxarmy-single-hero__author-divider {
        display: none;
    }
    .uxarmy-single {
        padding: 32px 16px 60px !important;
    }
    .uxarmy-single__mobile-toc {
        margin-left:  -16px !important;
        margin-right: -16px !important;
    }
    .uxarmy-single__section-heading {
        font-size: 24px !important;
    }
}

@media (max-width: 500px) {
    .uxarmy-single-hero__title {
        font-size:      24px   !important;
        letter-spacing: -0.3px !important;
    }
    .uxarmy-single-hero__meta-item {
        font-size: 13px;
    }
    .uxarmy-single-hero__avatar {
        width:  36px !important;
        height: 36px !important;
    }
    .uxarmy-single .share-icons-wrapper .share-icon img {
        width:  22px !important;
        height: 22px !important;
    }
    .uxarmy-single-hero__thumb-img {
        border-radius: 8px !important;
    }
    .uxarmy-single__explore-btn {
        width:           100% !important;
        justify-content: center !important;
    }
}

/* ── Skip link (keyboard users) ────────────────────────────────────────────── */
.uxarmy-skip-link {
    position:   absolute;
    left:       -9999px;
    top:        auto;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    z-index:    100000;
    background: #2e62e9;
    color:      #fff;
    padding:    12px 24px;
    font-size:  14px;
    font-weight:600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
}

.uxarmy-skip-link:focus {
    position: fixed;
    top:      0;
    left:     50%;
    transform: translateX(-50%);
    width:    auto;
    height:   auto;
    overflow: visible;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .uxarmy-blog-card,
    .uxarmy-blog-card__thumb,
    .uxarmy-blog-card__read-more,
    .uxarmy-single__explore-btn,
    .uxarmy-single__explore-btn svg,
    .uxarmy-single .share-icons-wrapper .share-icon,
    .uxarmy-single__content a.link-icon,
    .uxarmy-single__mobile-toc-chevron,
    #uxarmy-copy-toast {
        transition: none !important;
        animation:  none !important;
    }
    .uxarmy-blog-card:hover {
        transform: none !important;
    }
    .uxarmy-single .share-icons-wrapper .share-icon:hover {
        transform: none !important;
    }
    .uxarmy-single__explore-btn:hover svg {
        transform: none !important;
    }
}