/* ==========================================================================
   TechNode HQ — Layouts
   Page-level layout structures: Site wrapper, Header, Navigation, Hero,
   Content Grids, Sidebar, Category Bar, Footer, Archive Header
   ========================================================================== */


/* ==========================================================================
   1. SITE LAYOUT (.tnhq-site)
   Flex column wrapper ensuring footer sticks to the bottom.
   ========================================================================== */

.tnhq-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tnhq-main {
    flex: 1;
    width: 100%;
}


/* ==========================================================================
   2. TOPBAR (.tnhq-topbar)
   Narrow utility bar above the header: trending topics, date, social links.
   ========================================================================== */

.tnhq-topbar {
    position: relative;
    width: 100%;
    height: var(--tnhq-topbar-height);
    background: var(--tnhq-bg-surface);
    border-bottom: 1px solid var(--tnhq-border-light);
    font-size: var(--tnhq-text-xs);
    color: var(--tnhq-text-tertiary);
    z-index: var(--tnhq-z-header);
}

.tnhq-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--tnhq-max-width);
    margin: 0 auto;
    padding: 0 var(--tnhq-space-6);
}

.tnhq-topbar__left,
.tnhq-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-4);
}

.tnhq-topbar__left a,
.tnhq-topbar__right a {
    color: var(--tnhq-text-tertiary);
    text-decoration: none;
    transition: color var(--tnhq-ease-fast);
}

.tnhq-topbar__left a:hover,
.tnhq-topbar__right a:hover {
    color: var(--tnhq-accent);
}

.tnhq-topbar__trending {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-2);
}

.tnhq-topbar__trending-label {
    font-weight: 600;
    color: var(--tnhq-accent);
    text-transform: uppercase;
    letter-spacing: var(--tnhq-tracking-wider);
    white-space: nowrap;
}


/* ==========================================================================
   3. HEADER (.tnhq-header)
   Sticky main navigation bar with glassmorphism backdrop.
   ========================================================================== */

.tnhq-header {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--tnhq-header-height);
    background: var(--tnhq-glass-bg);
    border-bottom: 1px solid var(--tnhq-glass-border);
    backdrop-filter: blur(var(--tnhq-glass-blur));
    -webkit-backdrop-filter: blur(var(--tnhq-glass-blur));
    z-index: var(--tnhq-z-header);
    transition: box-shadow var(--tnhq-ease-base);
}

/* Extra shadow when scrolled */
.tnhq-header.is-scrolled {
    box-shadow: var(--tnhq-shadow-md);
}

.tnhq-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--tnhq-max-width);
    margin: 0 auto;
    padding: 0 var(--tnhq-space-6);
}

/* Logo area */
.tnhq-header__logo {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-3);
    text-decoration: none;
    flex-shrink: 0;
}

.tnhq-header__logo img {
    height: 32px;
    width: auto;
}

.tnhq-header__logo-text {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-xl);
    font-weight: 700;
    color: var(--tnhq-text-primary);
    letter-spacing: var(--tnhq-tracking-tight);
}

.tnhq-header__logo-text span {
    color: var(--tnhq-accent);
}


/* ==========================================================================
   4. NAVIGATION (.tnhq-nav)
   Desktop horizontal navigation inside the header.
   ========================================================================== */

.tnhq-nav {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
    justify-content: center;
    min-width: 0; /* Allow shrinking */
}

/* WordPress-generated nav list */
.tnhq-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}

/* WordPress menu items — both custom classes and WP defaults */
.tnhq-nav__list > .menu-item {
    position: relative;
    flex-shrink: 0;
}

.tnhq-nav__list > .menu-item > a {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-1);
    padding: var(--tnhq-space-2) var(--tnhq-space-3);
    font-size: var(--tnhq-text-sm);
    font-weight: 500;
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    border-radius: var(--tnhq-radius-sm);
    white-space: nowrap;
    transition:
        color var(--tnhq-ease-fast),
        background var(--tnhq-ease-fast);
}

.tnhq-nav__list > .menu-item > a:hover,
.tnhq-nav__list > .menu-item.current-menu-item > a {
    color: var(--tnhq-accent);
    background: var(--tnhq-accent-subtle);
}

.tnhq-nav__item {
    position: relative;
}

.tnhq-nav__link {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-1);
    padding: var(--tnhq-space-2) var(--tnhq-space-4);
    font-size: var(--tnhq-text-sm);
    font-weight: 500;
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    border-radius: var(--tnhq-radius-sm);
    transition:
        color var(--tnhq-ease-fast),
        background var(--tnhq-ease-fast);
    white-space: nowrap;
}

.tnhq-nav__link:hover,
.tnhq-nav__item.is-active > .tnhq-nav__link {
    color: var(--tnhq-accent);
    background: var(--tnhq-accent-subtle);
}

/* Accent underline for active item */
.tnhq-nav__item.is-active > .tnhq-nav__link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: var(--tnhq-space-4);
    right: var(--tnhq-space-4);
    height: 2px;
    background: var(--tnhq-accent);
    border-radius: var(--tnhq-radius-full);
}

/* Dropdown arrow icon */
.tnhq-nav__link .tnhq-nav__arrow {
    width: 12px;
    height: 12px;
    transition: transform var(--tnhq-ease-fast);
}

.tnhq-nav__item:hover .tnhq-nav__arrow {
    transform: rotate(180deg);
}

/* ---- Dropdown Panel ---- */
.tnhq-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    padding: var(--tnhq-space-2);
    background: var(--tnhq-glass-bg);
    border: 1px solid var(--tnhq-glass-border);
    border-radius: var(--tnhq-radius-md);
    backdrop-filter: blur(var(--tnhq-glass-blur));
    -webkit-backdrop-filter: blur(var(--tnhq-glass-blur));
    box-shadow: var(--tnhq-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition:
        opacity var(--tnhq-ease-fast),
        visibility var(--tnhq-ease-fast),
        transform var(--tnhq-ease-fast);
    z-index: var(--tnhq-z-dropdown);
}

.tnhq-nav__item:hover > .tnhq-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tnhq-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--tnhq-space-3);
    padding: var(--tnhq-space-3) var(--tnhq-space-4);
    font-size: var(--tnhq-text-sm);
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    border-radius: var(--tnhq-radius-sm);
    transition:
        background var(--tnhq-ease-fast),
        color var(--tnhq-ease-fast);
}

.tnhq-nav__dropdown-link:hover {
    background: var(--tnhq-accent-subtle);
    color: var(--tnhq-accent);
}


/* ==========================================================================
   5. HEADER ACTIONS (.tnhq-header__actions)
   Right side of header: search, dark mode toggle, subscribe CTA.
   ========================================================================== */

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

/* Search trigger button — with ⌘K hint */
.tnhq-search-trigger {
    position: relative;
    gap: var(--tnhq-space-2);
}

.tnhq-header__kbd {
    font-family: var(--tnhq-font-mono);
    font-size: 10px;
    padding: 1px 5px;
    background: var(--tnhq-bg-surface-hover);
    border: 1px solid var(--tnhq-border);
    border-radius: var(--tnhq-radius-sm);
    color: var(--tnhq-text-tertiary);
    line-height: 1.3;
}

/* Brand / Logo styling */
.tnhq-header__brand {
    flex-shrink: 0;
}

.tnhq-logo--text {
    text-decoration: none;
}

.tnhq-logo__name {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-xl);
    font-weight: 700;
    color: var(--tnhq-accent);
    letter-spacing: var(--tnhq-tracking-tight);
}

/* Mobile toggle — swap icons based on menu state */
.tnhq-mobile-toggle {
    display: none; /* Hidden on desktop by default */
}

.tnhq-mobile-toggle__close {
    display: none; /* Hide close icon by default */
}

.tnhq-mobile-toggle[aria-expanded="true"] .tnhq-mobile-toggle__open {
    display: none;
}

.tnhq-mobile-toggle[aria-expanded="true"] .tnhq-mobile-toggle__close {
    display: block;
}


/* ==========================================================================
   6. MOBILE MENU (.tnhq-mobile-menu)
   Slide-in side panel for small screens.
   ========================================================================== */

/* The wrapper covers the full viewport when open */
.tnhq-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--tnhq-z-overlay);
    visibility: hidden;
    pointer-events: none;
    transition: visibility var(--tnhq-ease-base);
}

.tnhq-mobile-menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* Dark backdrop overlay */
.tnhq-mobile-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0;
    transition: opacity var(--tnhq-ease-base);
}

.tnhq-mobile-menu.is-open .tnhq-mobile-menu__overlay {
    opacity: 1;
}

/* The slide-in panel */
.tnhq-mobile-menu__panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: var(--tnhq-glass-bg);
    border-left: 1px solid var(--tnhq-glass-border);
    backdrop-filter: blur(var(--tnhq-glass-blur));
    -webkit-backdrop-filter: blur(var(--tnhq-glass-blur));
    z-index: 2;
    padding: var(--tnhq-space-6);
    transform: translateX(100%);
    transition: transform var(--tnhq-ease-base);
    display: flex;
    flex-direction: column;
}

.tnhq-mobile-menu.is-open .tnhq-mobile-menu__panel {
    transform: translateX(0);
}

/* Mobile menu header */
.tnhq-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tnhq-space-6);
    padding-bottom: var(--tnhq-space-4);
    border-bottom: 1px solid var(--tnhq-border-light);
}

.tnhq-mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: var(--tnhq-radius-sm);
    color: var(--tnhq-text-primary);
    cursor: pointer;
    transition: background var(--tnhq-ease-fast);
}

.tnhq-mobile-menu__close:hover {
    background: var(--tnhq-bg-surface-hover);
}

.tnhq-mobile-menu__nav {
    flex: 1;
    overflow-y: auto;
}

.tnhq-mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--tnhq-space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}

.tnhq-mobile-menu__list .menu-item a {
    display: block;
    padding: var(--tnhq-space-3) var(--tnhq-space-4);
    font-size: var(--tnhq-text-base);
    font-weight: 500;
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    border-radius: var(--tnhq-radius-sm);
    transition:
        background var(--tnhq-ease-fast),
        color var(--tnhq-ease-fast);
}

.tnhq-mobile-menu__list .menu-item a:hover {
    background: var(--tnhq-accent-subtle);
    color: var(--tnhq-accent);
}

/* Separator before page links (About, Contact) in mobile menu */
.tnhq-mobile-menu__item--page:first-of-type {
    margin-top: var(--tnhq-space-3);
    padding-top: var(--tnhq-space-3);
    border-top: 1px solid var(--tnhq-border-light);
}

.tnhq-mobile-menu__footer {
    margin-top: var(--tnhq-space-6);
    padding-top: var(--tnhq-space-4);
    border-top: 1px solid var(--tnhq-border-light);
}


/* ==========================================================================
   7. HERO SECTION (.tnhq-hero)
   Featured article area at the top of the homepage.
   ========================================================================== */

.tnhq-hero {
    padding: var(--tnhq-space-8) 0;
}

.tnhq-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--tnhq-space-6);
}

/* Main hero card spans the left two-thirds of the grid */
.tnhq-hero__primary {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Two smaller featured cards stacked on the right */
.tnhq-hero__secondary {
    grid-column: 3 / 4;
}

/* Make primary hero card image taller */
.tnhq-hero__primary .tnhq-card__image {
    aspect-ratio: 21 / 9;
}

.tnhq-hero__primary .tnhq-card__title {
    font-size: var(--tnhq-text-3xl);
    -webkit-line-clamp: unset;
}


/* ==========================================================================
   8. CONTENT GRIDS (.tnhq-grid)
   Responsive article card grids.
   ========================================================================== */

.tnhq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tnhq-space-6);
}

.tnhq-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.tnhq-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.tnhq-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================================
   9. CONTENT + SIDEBAR (.tnhq-content-sidebar)
   Two-column layout with sticky sidebar.
   ========================================================================== */

.tnhq-content-sidebar {
    display: grid;
    grid-template-columns: 1fr var(--tnhq-sidebar-width);
    gap: var(--tnhq-space-10);
    align-items: start;
}

.tnhq-content-sidebar__main {
    min-width: 0; /* Prevent overflow from grid child */
}

.tnhq-content-sidebar__sidebar {
    position: sticky;
    top: calc(var(--tnhq-header-height) + var(--tnhq-space-6));
    display: flex;
    flex-direction: column;
    gap: var(--tnhq-space-6);
    max-height: calc(100vh - var(--tnhq-header-height) - var(--tnhq-space-12));
    overflow-y: auto;
}

/* Sidebar widget container */
.tnhq-sidebar-widget {
    padding: var(--tnhq-space-5);
    background: var(--tnhq-bg-surface);
    border: 1px solid var(--tnhq-border-light);
    border-radius: var(--tnhq-radius-lg);
}

.tnhq-sidebar-widget__title {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tnhq-tracking-wider);
    color: var(--tnhq-text-tertiary);
    margin-bottom: var(--tnhq-space-4);
    padding-bottom: var(--tnhq-space-3);
    border-bottom: 1px solid var(--tnhq-border-light);
}


/* ==========================================================================
   10. CATEGORY TABS BAR (.tnhq-category-bar)
   Horizontal scrolling tab bar for category navigation.
   ========================================================================== */

.tnhq-category-bar {
    position: relative;
    border-bottom: 1px solid var(--tnhq-border-light);
    margin-bottom: var(--tnhq-space-8);
}

.tnhq-category-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tnhq-space-1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
    padding: 0 var(--tnhq-space-6);
}

.tnhq-category-bar__inner::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.tnhq-category-bar__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--tnhq-space-2);
    padding: var(--tnhq-space-4) var(--tnhq-space-5);
    font-size: var(--tnhq-text-sm);
    font-weight: 500;
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--tnhq-ease-fast),
        background var(--tnhq-ease-fast);
}

.tnhq-category-bar__tab:hover {
    color: var(--tnhq-text-primary);
}

/* Active tab — accent underline */
.tnhq-category-bar__tab.is-active {
    color: var(--tnhq-accent);
    font-weight: 600;
}

.tnhq-category-bar__tab.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: var(--tnhq-space-5);
    right: var(--tnhq-space-5);
    height: 2px;
    background: var(--tnhq-accent);
    border-radius: var(--tnhq-radius-full);
}

/* Article count chip */
.tnhq-category-bar__count {
    font-size: var(--tnhq-text-xs);
    padding: 0 var(--tnhq-space-2);
    background: var(--tnhq-bg-surface-hover);
    border-radius: var(--tnhq-radius-full);
    color: var(--tnhq-text-tertiary);
    line-height: 1.6;
}

/* Scroll edge shadows — applied via JS toggling classes */
.tnhq-category-bar.has-scroll-left::before,
.tnhq-category-bar.has-scroll-right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: var(--tnhq-z-base);
}

.tnhq-category-bar.has-scroll-left::before {
    left: 0;
    background: linear-gradient(to right, var(--tnhq-bg-primary), transparent);
}

.tnhq-category-bar.has-scroll-right::after {
    right: 0;
    background: linear-gradient(to left, var(--tnhq-bg-primary), transparent);
}


/* ==========================================================================
   11. SECTION HEADERS
   Reusable section title rows (e.g. "Latest News", "AI & Machine Learning").
   ========================================================================== */

.tnhq-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tnhq-space-6);
    gap: var(--tnhq-space-4);
}

.tnhq-section-header__title {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-2xl);
    font-weight: 700;
    color: var(--tnhq-text-primary);
}

.tnhq-section-header__title span {
    color: var(--tnhq-accent);
}

.tnhq-section-header__link {
    font-size: var(--tnhq-text-sm);
    font-weight: 500;
    color: var(--tnhq-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--tnhq-ease-fast);
}

.tnhq-section-header__link:hover {
    color: var(--tnhq-accent-hover);
}


/* ==========================================================================
   12. FOOTER (.tnhq-footer)
   Multi-column site footer.
   ========================================================================== */

.tnhq-footer {
    background: var(--tnhq-bg-surface);
    border-top: 1px solid var(--tnhq-border-light);
    padding-top: var(--tnhq-space-16);
}

.tnhq-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--tnhq-space-10);
    max-width: var(--tnhq-max-width);
    margin: 0 auto;
    padding: 0 var(--tnhq-space-6);
}

.tnhq-footer__col-title {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tnhq-tracking-wider);
    color: var(--tnhq-text-primary);
    margin-bottom: var(--tnhq-space-5);
}

.tnhq-footer__about-text {
    font-size: var(--tnhq-text-sm);
    color: var(--tnhq-text-secondary);
    line-height: var(--tnhq-leading-relaxed);
    margin-bottom: var(--tnhq-space-4);
}

.tnhq-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tnhq-space-3);
}

.tnhq-footer__links a {
    font-size: var(--tnhq-text-sm);
    color: var(--tnhq-text-secondary);
    text-decoration: none;
    transition: color var(--tnhq-ease-fast);
}

.tnhq-footer__links a:hover {
    color: var(--tnhq-accent);
}

/* Social icons row in footer */
.tnhq-footer__social {
    display: flex;
    gap: var(--tnhq-space-3);
    flex-wrap: wrap;
}

.tnhq-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--tnhq-radius-full);
    background: var(--tnhq-bg-surface-hover);
    color: var(--tnhq-text-secondary);
    transition:
        background var(--tnhq-ease-fast),
        color var(--tnhq-ease-fast);
}

.tnhq-footer__social a:hover {
    background: var(--tnhq-accent-muted);
    color: var(--tnhq-accent);
}

.tnhq-footer__social svg {
    width: 16px;
    height: 16px;
}

/* Footer Bottom Bar */
.tnhq-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tnhq-space-4);
    max-width: var(--tnhq-max-width);
    margin: var(--tnhq-space-12) auto 0;
    padding: var(--tnhq-space-6);
    border-top: 1px solid var(--tnhq-border-light);
    font-size: var(--tnhq-text-xs);
    color: var(--tnhq-text-tertiary);
}

.tnhq-footer__bottom a {
    color: var(--tnhq-text-tertiary);
    text-decoration: none;
    transition: color var(--tnhq-ease-fast);
}

.tnhq-footer__bottom a:hover {
    color: var(--tnhq-accent);
}

.tnhq-footer__bottom-links {
    display: flex;
    gap: var(--tnhq-space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}


/* ==========================================================================
   13. ARCHIVE / CATEGORY PAGE (.tnhq-archive-header)
   Header section for category, tag, and search-results pages.
   ========================================================================== */

.tnhq-archive-header {
    padding: var(--tnhq-space-12) 0 var(--tnhq-space-8);
    text-align: center;
}

.tnhq-archive-header__label {
    display: inline-flex;
    align-items: center;
    gap: var(--tnhq-space-2);
    font-size: var(--tnhq-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tnhq-tracking-wider);
    color: var(--tnhq-accent);
    margin-bottom: var(--tnhq-space-3);
}

.tnhq-archive-header__title {
    font-family: var(--tnhq-font-heading);
    font-size: var(--tnhq-text-4xl);
    font-weight: 700;
    color: var(--tnhq-text-primary);
    margin-bottom: var(--tnhq-space-3);
}

.tnhq-archive-header__description {
    font-size: var(--tnhq-text-base);
    color: var(--tnhq-text-secondary);
    max-width: 600px;
    margin: 0 auto var(--tnhq-space-4);
    line-height: var(--tnhq-leading-relaxed);
}

.tnhq-archive-header__count {
    font-size: var(--tnhq-text-sm);
    color: var(--tnhq-text-tertiary);
}


/* ==========================================================================
   14. PAGINATION (.tnhq-pagination)
   Page navigation for archives and search results.
   ========================================================================== */

.tnhq-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tnhq-space-2);
    padding: var(--tnhq-space-10) 0;
}

.tnhq-pagination a,
.tnhq-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--tnhq-space-3);
    font-size: var(--tnhq-text-sm);
    font-weight: 500;
    color: var(--tnhq-text-secondary);
    background: var(--tnhq-bg-surface);
    border: 1px solid var(--tnhq-border-light);
    border-radius: var(--tnhq-radius-md);
    text-decoration: none;
    transition:
        background var(--tnhq-ease-fast),
        color var(--tnhq-ease-fast),
        border-color var(--tnhq-ease-fast);
}

.tnhq-pagination a:hover {
    background: var(--tnhq-bg-surface-hover);
    color: var(--tnhq-text-primary);
    border-color: var(--tnhq-border);
}

.tnhq-pagination .current {
    background: var(--tnhq-accent);
    color: var(--tnhq-text-inverse);
    border-color: var(--tnhq-accent);
    font-weight: 600;
}


/* ==========================================================================
   15. FOCUS INDICATORS & KEYBOARD ACCESSIBILITY (WCAG 2.4.7 / 2.4.11)
   Visible focus styles for all interactive elements.
   ========================================================================== */

/* Nav links */
.tnhq-nav__list > .menu-item > a:focus-visible,
.tnhq-nav__link:focus-visible {
    color: var(--tnhq-accent);
    background: var(--tnhq-accent-subtle);
    outline: 2px solid var(--tnhq-accent);
    outline-offset: -2px;
}

/* Dropdown links */
.tnhq-nav__dropdown-link:focus-visible {
    background: var(--tnhq-accent-subtle);
    color: var(--tnhq-accent);
    outline: 2px solid var(--tnhq-accent);
    outline-offset: -2px;
}

/* Keyboard-opened dropdown visibility (WCAG 2.1.1) */
.tnhq-nav__item.is-open > .tnhq-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tnhq-nav__item.is-open > .tnhq-nav__link .tnhq-nav__arrow {
    transform: rotate(180deg);
}

/* Pagination */
.tnhq-pagination a:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
    border-color: var(--tnhq-accent);
    color: var(--tnhq-accent);
}

/* Category tabs */
.tnhq-category-bar__tab:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: -2px;
    border-radius: var(--tnhq-radius-sm);
    color: var(--tnhq-accent);
}

/* Topbar links */
.tnhq-topbar__left a:focus-visible,
.tnhq-topbar__right a:focus-visible,
.tnhq-topbar__social:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
    color: var(--tnhq-accent);
}

/* Footer links */
.tnhq-footer__links a:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
    color: var(--tnhq-accent);
}

.tnhq-footer__social a:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
    background: var(--tnhq-accent-muted);
    color: var(--tnhq-accent);
}

.tnhq-footer__bottom a:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
    color: var(--tnhq-accent);
}

/* Mobile menu links */
.tnhq-mobile-menu__list .menu-item a:focus-visible {
    background: var(--tnhq-accent-subtle);
    color: var(--tnhq-accent);
    outline: 2px solid var(--tnhq-accent);
    outline-offset: -2px;
}

/* Section header links */
.tnhq-section-header__link:focus-visible {
    outline: 2px solid var(--tnhq-accent);
    outline-offset: 2px;
}