/* ═════════════════════════════════════════════════════════════════
   TDN MAGAZINE v3.0 — "AURORA" UPGRADES
   ─────────────────────────────────────────────────────────────────
   New UI elements introduced in v3:
     • Theme toggle (light/dark)
     • Command palette (⌘K / Ctrl+K live search)
     • Smart header (hide on scroll-down, reveal on scroll-up)
     • Enhanced back-to-top
     • Card micro-interactions (lift + accent-line)
     • Refined tags, buttons, focus states
     • Better article typography & pull-quote support
   ═════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════╗
   ║ THEME TOGGLE BUTTON                                      ║
   ║ Sits inside the header nav, beside social icons.         ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-fg);
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast),
                transform var(--dur-fast), color var(--dur-fast);
    position: relative;
}
.tdn-theme-toggle:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border);
    transform: rotate(-12deg);
}
.tdn-theme-toggle:active { transform: rotate(-12deg) scale(.94); }

.tdn-theme-toggle svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out);
}
/* Show sun in dark mode (click = go light), moon in light mode (click = go dark). */
.tdn-theme-toggle .tdn-theme-toggle__moon { display: block; }
.tdn-theme-toggle .tdn-theme-toggle__sun  { display: none;  }
:root[data-theme="dark"] .tdn-theme-toggle .tdn-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .tdn-theme-toggle .tdn-theme-toggle__sun  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-theme-toggle .tdn-theme-toggle__moon { display: none; }
    :root:not([data-theme="light"]) .tdn-theme-toggle .tdn-theme-toggle__sun  { display: block; }
}

/* Slightly different placement inside the header nav — sit between the
   nav links and social icons. In the existing header.css, .tdn-hdr-nav-social
   is a flex row; this works as a sibling. */
.tdn-hdr-nav-inner .tdn-theme-toggle {
    color: var(--color-fg);
    margin-right: 8px;
}

/* Mobile drawer variant — full-width labeled row, styled like menu items.
   Uses its own class (.tdn-hdr-drawer-theme) rather than inheriting from
   .tdn-theme-toggle so nothing from the compact header toggle bleeds in. */
.tdn-hdr-drawer-theme {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 24px;
    border: 0;
    border-top: 1px solid var(--color-border-soft);
    background: transparent;
    color: var(--color-fg);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), padding-left var(--dur-fast);
}
.tdn-hdr-drawer-theme:hover,
.tdn-hdr-drawer-theme:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-accent);
    padding-left: 28px;
    outline: none;
}
.tdn-hdr-drawer-theme__icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.tdn-hdr-drawer-theme__icons svg {
    width: 22px;
    height: 22px;
}
/* Show moon in light mode, sun in dark. */
.tdn-hdr-drawer-theme__sun { display: none; }
:root[data-theme="dark"] .tdn-hdr-drawer-theme__moon { display: none; }
:root[data-theme="dark"] .tdn-hdr-drawer-theme__sun  { display: inline-block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-hdr-drawer-theme__moon { display: none; }
    :root:not([data-theme="light"]) .tdn-hdr-drawer-theme__sun  { display: inline-block; }
}
/* Label swap: show "Dark mode" in light, "Light mode" in dark. */
.tdn-hdr-drawer-theme__label-dark { display: none; }
:root[data-theme="dark"] .tdn-hdr-drawer-theme__label-light { display: none; }
:root[data-theme="dark"] .tdn-hdr-drawer-theme__label-dark  { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tdn-hdr-drawer-theme__label-light { display: none; }
    :root:not([data-theme="light"]) .tdn-hdr-drawer-theme__label-dark  { display: inline; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ COMMAND PALETTE (⌘K / Ctrl+K)                            ║
   ║ Keyboard-first search overlay. Reuses REST API from the  ║
   ║ live-search module but with a richer UI.                 ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    height: 34px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast),
                color var(--dur-fast);
}
.tdn-cmdk-trigger:hover {
    border-color: var(--color-fg-subtle);
    color: var(--color-fg);
}
.tdn-cmdk-trigger svg { width: 14px; height: 14px; }
.tdn-cmdk-trigger__kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-fg-muted);
    line-height: 1;
}
@media (max-width: 900px) { .tdn-cmdk-trigger__kbd { display: none; } }
@media (max-width: 768px) { .tdn-cmdk-trigger { display: none; } }

/* Overlay */
.tdn-cmdk {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    background: rgba(12, 12, 12, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: tdn-cmdk-fade var(--dur-normal) var(--ease-out);
}
.tdn-cmdk.is-open { display: flex; }

@keyframes tdn-cmdk-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tdn-cmdk__panel {
    width: min(640px, calc(100vw - 32px));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-elevated);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: tdn-cmdk-rise var(--dur-normal) var(--ease-out);
}
@keyframes tdn-cmdk-rise {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tdn-cmdk__search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.tdn-cmdk__icon {
    width: 18px; height: 18px;
    color: var(--color-fg-muted);
    flex-shrink: 0;
}
.tdn-cmdk__input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 17px;
    font-family: var(--font-ui);
    color: var(--color-fg);
    outline: none;
    min-width: 0;
}
.tdn-cmdk__input::placeholder { color: var(--color-fg-subtle); }
.tdn-cmdk__esc {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-fg-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
}
.tdn-cmdk__esc:hover { background: var(--color-surface-hover); color: var(--color-fg); }

.tdn-cmdk__results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 0;
}
.tdn-cmdk__group-label {
    padding: 10px 14px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-fg-muted);
}
.tdn-cmdk__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-fg);
    font-size: var(--fs-sm);
    line-height: 1.4;
    transition: background var(--dur-fast);
}
.tdn-cmdk__item:hover,
.tdn-cmdk__item.is-active {
    background: var(--tdn-red-soft);
}
.tdn-cmdk__item-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--color-fg-muted);
}
.tdn-cmdk__item.is-active .tdn-cmdk__item-icon {
    color: var(--color-accent);
}
.tdn-cmdk__item-title {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tdn-cmdk__item-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-fg-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.tdn-cmdk__empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
}
.tdn-cmdk__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    font-size: 11px;
    color: var(--color-fg-muted);
}
.tdn-cmdk__footer-hints {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.tdn-cmdk__footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tdn-cmdk__footer-kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-fg);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ SMART HEADER (hide on scroll-down, reveal on scroll-up)  ║
   ╚═══════════════════════════════════════════════════════════╝ */

#tdn-header {
    transition: transform var(--dur-normal) var(--ease-in-out),
                box-shadow var(--dur-normal) var(--ease-in-out);
    will-change: transform;
}
body.tdn-scrolled-down #tdn-header {
    transform: translateY(calc(-1 * var(--header-height)));
}
@media (max-width: 768px) {
    body.tdn-scrolled-down #tdn-header {
        transform: translateY(calc(-1 * var(--header-mobile)));
    }
}
/* When the mobile drawer is open, never hide the header. */
body:has(.tdn-hdr-drawer.open) #tdn-header {
    transform: none !important;
}
/* Ditto: never hide when the cmd palette is open. */
body:has(.tdn-cmdk.is-open) #tdn-header {
    transform: none !important;
}

/* Slight elevation bump when scrolled */
body.tdn-scrolled #tdn-header {
    box-shadow: var(--shadow-md);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ BACK TO TOP — refined                                    ║
   ╚═══════════════════════════════════════════════════════════╝ */

#tdn-back-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--tdn-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.9);
    transition: opacity var(--dur-normal) var(--ease-out),
                transform var(--dur-normal) var(--ease-out),
                background var(--dur-fast);
    box-shadow: var(--shadow-lg);
    border: none;
    cursor: pointer;
}
#tdn-back-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
#tdn-back-top:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px) scale(1.04);
}
#tdn-back-top svg {
    width: 20px; height: 20px;
}
@media (max-width: 768px) {
    #tdn-back-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ CARD MICRO-INTERACTIONS (lift + accent line)             ║
   ║ Universally applied via class selectors — each card on   ║
   ║ the site gets the subtle lift + bottom accent on hover.  ║
   ╚═══════════════════════════════════════════════════════════╝ */

.hp-river__item,
.tdn-archive-card,
.tdn-related-card,
.hp-trending__item,
.hp-cat__card {
    position: relative;
    transition: transform var(--dur-normal) var(--ease-out),
                box-shadow var(--dur-normal) var(--ease-out);
}
.hp-river__item:hover,
.tdn-archive-card:hover,
.tdn-related-card:hover,
.hp-trending__item:hover,
.hp-cat__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* Image zoom on card hover — gentle, not distracting */
.hp-river__item .hp-river__img,
.tdn-archive-card img,
.tdn-related-card img,
.hp-trending__item img {
    transition: transform var(--dur-slow) var(--ease-out);
}
.hp-river__item:hover .hp-river__img,
.tdn-archive-card:hover img,
.tdn-related-card:hover img,
.hp-trending__item:hover img {
    transform: scale(1.04);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ BUTTON / LINK MICRO-INTERACTIONS                        ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background var(--dur-fast), color var(--dur-fast),
                border-color var(--dur-fast), transform var(--dur-fast),
                box-shadow var(--dur-fast);
    text-decoration: none;
}
.tdn-btn:hover { transform: translateY(-1px); }
.tdn-btn:active { transform: translateY(0); }

.tdn-btn--primary {
    background: var(--color-accent);
    color: var(--tdn-white);
}
.tdn-btn--primary:hover {
    background: var(--color-accent-hover);
    color: var(--tdn-white);
    box-shadow: var(--shadow-md);
}
.tdn-btn--ghost {
    background: transparent;
    color: var(--color-fg);
    border-color: var(--color-border);
}
.tdn-btn--ghost:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-fg-subtle);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ PULL-QUOTE for editorial articles                        ║
   ║ Use: <p class="tdn-pullquote">…</p> in article body      ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-article-content .tdn-pullquote,
.tdn-article-content p.has-drop-cap {
    /* leave existing drop-cap rule alone */
}
.tdn-article-content .tdn-pullquote {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1rem + 1.5vw, 1.85rem);
    font-weight: 400;
    line-height: 1.3;
    font-style: italic;
    color: var(--color-fg);
    padding: 24px 0 24px 28px;
    margin: 36px 0;
    border-left: 4px solid var(--color-accent);
    position: relative;
}
.tdn-article-content .tdn-pullquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 18px;
    font-size: 6rem;
    line-height: 1;
    font-family: var(--font-display);
    color: var(--color-accent);
    opacity: .15;
    font-style: normal;
    pointer-events: none;
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ TAG CHIPS — v3 refinement                                ║
   ║ Rounded-full pills with subtle border. Accessible focus. ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-article-tags a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-fg);
    font-size: var(--fs-xs);
    font-weight: 500;
    transition: all var(--dur-fast);
    text-decoration: none;
}
.tdn-article-tags a::before {
    content: '#';
    color: var(--color-fg-subtle);
    font-weight: 600;
    margin-right: -2px;
}
.tdn-article-tags a:hover {
    background: var(--color-accent);
    color: var(--tdn-white);
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--tdn-red-glow);
}
.tdn-article-tags a:hover::before {
    color: rgba(255,255,255,.6);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ ENHANCED ARTICLE TYPOGRAPHY                              ║
   ╚═══════════════════════════════════════════════════════════╝ */

.tdn-article-title {
    font-size: var(--fs-5xl);
    line-height: var(--lh-tight);
    letter-spacing: -.015em;
}
.tdn-article-content {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
}
.tdn-article-content h2 {
    font-size: var(--fs-2xl);
    margin-top: 2em;
    letter-spacing: -.01em;
}
.tdn-article-content h3 {
    font-size: var(--fs-xl);
    margin-top: 1.8em;
}
.tdn-article-content p + p {
    margin-top: 1em;
}

/* Highlight <mark> inside article */
.tdn-article-content mark {
    background: linear-gradient(180deg, transparent 62%, var(--tdn-red-glow) 62%);
    padding: 0 2px;
    color: inherit;
}

/* First paragraph dek treatment */
.tdn-article-content > p:first-of-type {
    font-size: calc(var(--fs-md) * 1.05);
    color: var(--color-fg-soft);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ IMAGE PROGRESSIVE LOAD (blur-up ready)                  ║
   ╚═══════════════════════════════════════════════════════════╝ */

img[loading="lazy"] {
    transition: opacity var(--dur-slow) var(--ease-out);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ KEYBOARD FOCUS POLISH                                    ║
   ║ Cards get a soft accent ring when tabbed to.             ║
   ╚═══════════════════════════════════════════════════════════╝ */

.hp-river__item a:focus-visible,
.tdn-archive-card a:focus-visible,
.tdn-related-card a:focus-visible {
    outline: none;
}
.hp-river__item:has(a:focus-visible),
.tdn-archive-card:has(a:focus-visible),
.tdn-related-card:has(a:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║ PRINT STYLES                                            ║
   ╚═══════════════════════════════════════════════════════════╝ */

@media print {
    #tdn-header,
    .tdn-hdr-dateline,
    .tdn-hdr-nav,
    .tdn-breadcrumbs,
    .tdn-sidebar,
    .tdn-article-share-btns,
    .tdn-related,
    .tdn-post-nav,
    .tdn-footer,
    #tdn-back-top,
    #tdn-progress-bar,
    #tdn-offline-banner,
    .tdn-ticker,
    .tdn-cmdk,
    .tdn-theme-toggle {
        display: none !important;
    }
    body {
        padding-top: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
    .tdn-article {
        max-width: 100% !important;
    }
    .tdn-article-content a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    .tdn-article-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8em;
        font-weight: normal;
        color: #555;
    }
}