:root {
    --tech-primary: #033692;
    --tech-primary-hover: #022566;
    --tech-primary-rgb: 3, 54, 146;
    --tech-gradient: linear-gradient(135deg, #033692 0%, #0d5bbd 50%, #021e54 100%);
    --tech-gradient-dark: linear-gradient(135deg, #02163b 0%, #033692 60%, #0548b8 100%);
    --tech-subtle: #eef4ff;
    --tech-accent: #00b4d8;
    --tech-gray-50: #f8fafc;
    --tech-gray-100: #f1f5f9;
    --tech-gray-200: #e2e8f0;
    --tech-gray-300: #cbd5e1;
    --tech-gray-400: #94a3b8;
    --tech-gray-500: #64748b;
    --tech-gray-600: #475569;
    --tech-gray-700: #334155;
    --tech-gray-800: #1e293b;
    --tech-gray-900: #0f172a;
}

/* ============================================================
   COLOR PALETTES
   Applied by adding a class to <body> (e.g. body.palette-emerald).
   Only the palette-specific custom properties need to change; the
   rest of the theme is built on the same --tech-* variables.
   ============================================================ */

/* Crimson (bright, elegant red) — default palette */
body.palette-crimson {
    --tech-primary: #E4144D;
    --tech-primary-hover: #c00e3f;
    --tech-primary-rgb: 228, 20, 77;
    --tech-gradient: linear-gradient(135deg, #C4112F 0%, #E4144D 45%, #FF6B8C 75%, #B30F28 100%);
    --tech-gradient-dark: linear-gradient(135deg, #7a0a1f 0%, #C4112F 50%, #E4144D 100%);
    --tech-subtle: #fdeef1;
    --tech-accent: #FF6B8C;
}

/* Emerald (environmental, fresh green) — recommended for environment journals */
body.palette-emerald {
    --tech-primary: #15803d;
    --tech-primary-hover: #166534;
    --tech-primary-rgb: 21, 128, 61;
    --tech-gradient: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #064e3b 100%);
    --tech-gradient-dark: linear-gradient(135deg, #052e16 0%, #15803d 60%, #166534 100%);
    --tech-subtle: #f0fdf4;
    --tech-accent: #059669;
}

/* Forest (deep, earthy green) */
body.palette-forest {
    --tech-primary: #166534;
    --tech-primary-hover: #145324;
    --tech-primary-rgb: 22, 101, 52;
    --tech-gradient: linear-gradient(135deg, #15803d 0%, #3f6212 50%, #052e16 100%);
    --tech-gradient-dark: linear-gradient(135deg, #04170c 0%, #166534 60%, #3f6212 100%);
    --tech-subtle: #f2fbf2;
    --tech-accent: #65a30d;
}

/* Teal / Aqua (ocean & water) */
body.palette-teal {
    --tech-primary: #0f766e;
    --tech-primary-hover: #115e59;
    --tech-primary-rgb: 15, 118, 110;
    --tech-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #134e4a 100%);
    --tech-gradient-dark: linear-gradient(135deg, #042f2e 0%, #0f766e 60%, #0d9488 100%);
    --tech-subtle: #f0fdfa;
    --tech-accent: #2dd4bf;
}

/* Sky / Atmosphere (clean blue-sky for environmental air/climate) */
body.palette-sky {
    --tech-primary: #0369a1;
    --tech-primary-hover: #075985;
    --tech-primary-rgb: 3, 105, 161;
    --tech-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #082f49 100%);
    --tech-gradient-dark: linear-gradient(135deg, #082f49 0%, #0369a1 60%, #0284c7 100%);
    --tech-subtle: #f0f9ff;
    --tech-accent: #0ea5e9;
}

/* Earth / Sunrise (terracotta & warm amber) */
body.palette-earth {
    --tech-primary: #b45309;
    --tech-primary-hover: #92400e;
    --tech-primary-rgb: 180, 83, 9;
    --tech-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #7c2d12 100%);
    --tech-gradient-dark: linear-gradient(135deg, #431407 0%, #b45309 60%, #d97706 100%);
    --tech-subtle: #fffbeb;
    --tech-accent: #f59e0b;
}

html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip;
}

body {
    height: auto !important;
    min-height: 100% !important;
    position: relative !important;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--tech-gray-900);
    background-color: var(--tech-gray-50);
    background-image: url('../images/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    line-height: 1.6;
}

.pkp_structure_page {
    overflow: visible !important;
    position: relative !important;
    background: rgba(248, 250, 252, 0.88);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.tech-top-bar {
    background: var(--tech-gradient-dark);
    color: #fff;
    font-size: 0.8rem;
    padding: 6px 0;
}

.tech-top-bar a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.tech-top-bar a:hover {
    color: #fff;
}

.issn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
}

/* ============================================================
   HEADER BANNER (page header image above the navbar)
   Aligned with the page content + sidebar column.
   ============================================================ */
.tech-header-banner {
    max-width: min(1280px, calc(100% - 48px));
    margin: 14px auto 0;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.tech-header-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.tech-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: min(1280px, calc(100% - 48px)) !important;
    margin: 0 auto 18px !important;
    z-index: 1040 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10) !important;
    transition: box-shadow 0.25s ease, background 0.25s ease !important;
    border-radius: 0 0 16px 16px !important;
    border: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Keep the navbar contents aligned with the content + sidebar column */
.tech-navbar .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.tech-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    padding: 8px 0;
}

.tech-brand-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 8px;
}

.tech-brand-info {
    display: flex;
    flex-direction: column;
}

.tech-brand-initials {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tech-primary);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.tech-brand-title {
    font-size: 0.72rem;
    color: var(--tech-gray-500);
    font-weight: 500;
    line-height: 1.2;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-nav .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.tech-nav .nav-item {
    display: inline-flex;
}

.tech-nav .nav-link {
    color: var(--tech-gray-700) !important;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 12px 16px !important;
    border-radius: 0;
    position: relative;
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.tech-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--tech-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

.tech-nav .nav-link:hover,
.tech-nav .nav-link.active,
.tech-nav .nav-link.show {
    color: var(--tech-primary) !important;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.tech-nav .nav-link:hover::after,
.tech-nav .nav-link.active::after,
.tech-nav .nav-link.show::after {
    transform: scaleX(1);
}

.tech-nav .nav-link em {
    font-style: normal;
    font-size: 0.9rem;
}

.tech-nav .nav-link .bi {
    font-size: 0.9rem;
}

/* Dashboard / Home unread-notification badge (task_count):
   without the base theme styles this renders as raw text, so give
   it a clean rounded badge consistent with the theme. */
.task_count,
.tech-nav .task_count,
.navbar .task_count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 10px;
    background: #e4144d;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tech-nav .dropdown-menu {
    margin-top: 10px;
    border-radius: 12px;
    overflow: hidden;
    padding: 8px;
    min-width: 230px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
}

.tech-nav .dropdown-menu .dropdown-item {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--tech-gray-700);
    transition: all 0.15s ease;
}

.tech-nav .dropdown-menu .dropdown-item:hover {
    background: var(--tech-subtle);
    color: var(--tech-primary);
}

@media (max-width: 991.98px) {
    .tech-nav .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }
    .tech-nav .nav-item {
        width: 100%;
    }
    .tech-nav .nav-link {
        width: 100%;
    }
    .tech-nav .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 16px;
    }
}

.btn-tech-search-nav {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tech-subtle);
    border: 1px solid var(--tech-gray-200);
    color: var(--tech-primary);
    position: relative;
    transform: translateX(-18px);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-tech-search-nav:hover {
    background: var(--tech-primary);
    color: #fff;
    border-color: var(--tech-primary);
}

.btn-tech-login-btn {
    background: var(--tech-subtle);
    border: 1px solid var(--tech-primary);
    color: var(--tech-primary);
    font-weight: 600;
    font-size: 0.825rem;
    padding: 7px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-tech-login-btn:hover {
    background: var(--tech-primary);
    color: #fff;
}

.btn-tech-register-btn {
    background: var(--tech-primary);
    border: 1px solid var(--tech-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.825rem;
    padding: 7px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-tech-register-btn:hover {
    background: var(--tech-primary-hover);
    border-color: var(--tech-primary-hover);
    color: #fff;
}

.btn-tech-submit-btn {
    background: var(--tech-gradient);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.825rem;
    padding: 9px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb), 0.3);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-tech-submit-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--tech-primary-rgb), 0.4);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.tech-hero {
    background: #ffffff;
    padding: 60px 0 50px;
    color: var(--tech-gray-900);
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--tech-gray-100);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06);
}

.tech-hero-orb-1,
.tech-hero-orb-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
}

.tech-hero-orb-1 {
    width: 400px;
    height: 400px;
    background: var(--tech-primary);
    top: -100px;
    right: -50px;
}

.tech-hero-orb-2 {
    width: 300px;
    height: 300px;
    background: var(--tech-primary);
    bottom: -80px;
    left: -60px;
}

.tech-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tech-subtle);
    border: 1px solid rgba(var(--tech-primary-rgb), 0.15);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tech-primary);
    backdrop-filter: blur(8px);
}

.tech-hero-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    color: var(--tech-gray-900);
}

.tech-hero-desc {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.7;
    max-width: 640px;
    text-align: justify;
    text-align-last: left;
    color: var(--tech-gray-700);
}

.btn-hero-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--tech-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(var(--tech-primary-rgb), 0.28);
}

.btn-hero-cta-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--tech-primary-rgb), 0.35);
    color: #fff;
}

.btn-hero-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--tech-primary);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 28px;
    border-radius: 8px;
    border: 2px solid rgba(var(--tech-primary-rgb), 0.4);
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-hero-cta-outline:hover {
    background: var(--tech-subtle);
    border-color: var(--tech-primary);
    color: var(--tech-primary);
}

.tech-showcase-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    color: var(--tech-gray-900);
}

/* Offset the showcase column down past the hero title so it lines up
   with the description text below the title, not the title itself. */
.tech-hero .row > .text-center {
    align-self: flex-start !important;
    padding-top: calc(2.2rem * 1.25 + 12px);
}

.tech-showcase-cover-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--tech-gray-200);
}

.tech-showcase-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.btn-tech-primary {
    background: var(--tech-primary);
    color: #fff;
    border: 1px solid var(--tech-primary);
    font-weight: 600;
    font-size: 0.825rem;
    padding: 7px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-tech-primary:hover {
    background: var(--tech-primary-hover);
    border-color: var(--tech-primary-hover);
    color: #fff;
}

.btn-tech-outline {
    background: transparent;
    color: var(--tech-primary);
    border: 1px solid var(--tech-primary);
    font-weight: 600;
    font-size: 0.825rem;
    padding: 7px 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-tech-outline:hover {
    background: var(--tech-primary);
    color: #fff;
}

/* ============================================================
   METRICS BAR
   ============================================================ */
.tech-metrics-bar {
    position: relative;
    z-index: 10;
    padding: 26px 0 10px;
}

/* Align the hero, metric bar and front-page containers with the
   content column (1211px) so everything lines up edge-to-edge. */
.tech-hero .container,
.tech-metrics-bar .container,
.page_index_journal > .container {
    max-width: min(1280px, calc(100% - 48px));
}

.tech-metric-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.tech-metric-body .tech-metric-label {
    line-height: 1.4;
}

.tech-metric-body .tech-metric-value {
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: normal;
}

.tech-metric-body .tech-metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tech-gray-900);
    line-height: 1.25;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.tech-metric-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    box-shadow: 0 6px 24px rgba(var(--tech-primary-rgb), 0.08);
    border: 1px solid var(--tech-gray-100);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gradient accent line on top of each card */
.tech-metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--mc-grad, var(--tech-gradient));
}

.tech-metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(var(--tech-primary-rgb), 0.18);
}

/* Every metric card gets its own tone for a more elegant, lively look */
.tech-metrics-bar .row > div:nth-child(1) .tech-metric-card {
    --mc-grad: var(--tech-gradient);
}

/* Open Access card: the round OA logo shown inside the icon */
.tech-metrics-bar .row > div:nth-child(1) .tech-metric-card {
    background-image: none;
}

.tech-metrics-bar .row > div:nth-child(1) .tech-metric-card::before {
    display: initial;
}

.tech-metrics-bar .row > div:nth-child(1) .tech-metric-card .tech-metric-icon {
    background-image: url('../images/open-access.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    box-shadow: 0 6px 14px rgba(var(--tech-primary-rgb), 0.2);
}

.tech-metrics-bar .row > div:nth-child(1) .tech-metric-card .tech-metric-icon i {
    display: none;
}

.tech-metrics-bar .row > div:nth-child(2) .tech-metric-card {
    --mc-grad: linear-gradient(135deg, var(--tech-primary), var(--tech-accent));
}
.tech-metrics-bar .row > div:nth-child(3) .tech-metric-card {
    --mc-grad: linear-gradient(135deg, var(--tech-accent), var(--tech-primary));
}
.tech-metrics-bar .row > div:nth-child(4) .tech-metric-card {
    --mc-grad: var(--tech-gradient-dark);
}

.tech-metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--mc-grad, var(--tech-gradient));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(var(--tech-primary-rgb), 0.3);
    transition: transform 0.3s ease;
}

.tech-metric-card:hover .tech-metric-icon {
    transform: scale(1.08) rotate(-6deg);
}

.tech-metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tech-gray-900);
    line-height: 1.1;
}

.tech-metric-label {
    font-size: 0.7rem;
    color: var(--tech-gray-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ============================================================
   ABOUT CARD
   ============================================================ */
.tech-about-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
    margin-bottom: 1.5rem;
    /* Maximize the box: span the full main column, matching the hero */
    margin-left: 0;
    margin-right: 0;
}

/* The journal body (about box + latest articles) stretches to the full
   main column, the same width as the hero and the maximized about box. */
.page_index_journal > .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.page_index_journal > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

.page_index_journal > .container > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
}

.tech-about-specs-grid {
    margin-top: 0.5rem;
}

/* Justify the journal description text inside the About card */
.tech-about-card {
    text-align: justify;
}

.tech-about-card .tech-about-spec-label,
.tech-about-card .tech-about-spec-value,
.tech-about-card .btn {
    text-align: left;
}

.tech-about-spec-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--tech-primary);
    border-left: 4px solid var(--tech-primary);
    border-radius: 6px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(var(--tech-primary-rgb), 0.05);
    height: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

.tech-about-spec-item:hover {
    border-color: var(--tech-primary-hover);
    border-left-color: var(--tech-accent);
    background: var(--tech-subtle);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--tech-primary-rgb), 0.12);
}

.tech-about-spec-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(var(--tech-primary-rgb), 0.08);
    color: var(--tech-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.tech-about-spec-item:hover .tech-about-spec-icon {
    background: var(--tech-primary);
    color: #ffffff;
    transform: scale(1.04);
}

.tech-about-spec-content {
    flex: 1;
    min-width: 0;
}

.tech-about-spec-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tech-gray-500);
    margin-bottom: 2px;
    line-height: 1.1;
}

.tech-about-spec-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tech-gray-900);
    line-height: 1.25;
    word-break: break-word;
}

/* ============================================================
   INDEXING CARD
   ============================================================ */
.tech-indexing-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
    margin-bottom: 1.5rem;
}

.tech-indexing-custom-content img {
    max-width: 100%;
    height: auto;
    max-height: 50px;
    margin: 4px;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border-radius: 4px;
}

.tech-indexing-custom-content img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* ============================================================
   SECTION / COLUMN TITLES
   ============================================================ */
.tech-col-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--tech-gray-900);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--tech-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tech-col-title i {
    color: var(--tech-primary);
}

/* ============================================================
   ISSUE HEADER CARD
   ============================================================ */
.tech-issue-header-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.tech-col-title.mb-3.pb-2.border-bottom {
    font-size: 0.95rem;
    text-transform: none;
    font-weight: 700;
}

/* ============================================================
   ARTICLE CARDS
   ============================================================ */
.tech-article-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--tech-gray-100);
    box-shadow: 0 2px 10px rgba(var(--tech-primary-rgb), 0.04);
    transition: all 0.25s ease;
}

.tech-article-card:hover {
    box-shadow: 0 6px 24px rgba(var(--tech-primary-rgb), 0.1);
    border-color: var(--tech-primary);
    transform: translateY(-2px);
}

.tech-article-cover-col {
    flex: 0 0 auto;
    width: 130px;
    margin-right: 20px;
}

.tech-article-cover-link {
    width: 130px;
    height: 130px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--tech-primary);
    border-left: 4px solid var(--tech-primary);
    background: #ffffff;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.tech-article-cover-link:hover,
.tech-article-card:hover .tech-article-cover-link {
    border-color: var(--tech-primary-hover);
    border-left-color: var(--tech-accent);
    box-shadow: 0 6px 18px rgba(var(--tech-primary-rgb), 0.22);
    transform: translateY(-2px);
}

.tech-article-cover-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
    border-radius: 3px;
    display: block;
    transition: transform 0.3s ease;
}

.tech-article-card:hover .tech-article-cover-img {
    transform: scale(1.04);
}

.tech-article-body-col {
    padding-left: 4px;
}

.tech-article-category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tech-gray-500);
    background: var(--tech-subtle);
    padding: 3px 10px;
    border-radius: 4px;
}

.tech-article-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 8px 0;
}

.tech-article-title a {
    color: var(--tech-gray-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.tech-article-title a:hover {
    color: var(--tech-primary);
}

.tech-article-authors {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--tech-gray-600);
    flex-wrap: wrap;
}

.tech-doi-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tech-primary);
    background: var(--tech-subtle);
    padding: 3px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.tech-doi-pill:hover {
    background: var(--tech-primary);
    color: #fff;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.tech-sidebar-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
    margin-bottom: 1.5rem;
}

.tech-sidebar-card .tech-sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tech-gray-900);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--tech-primary);
}

.tech-sidebar-card .tech-sidebar-title i {
    color: var(--tech-primary);
}

.tech-sidebar-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tech-sidebar-card ul li {
    padding: 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--tech-primary);
    border-left: 4px solid var(--tech-primary);
    border-radius: 4px;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(var(--tech-primary-rgb), 0.08);
    overflow: hidden;
    display: block;
    box-sizing: border-box;
}

.tech-sidebar-card ul li:hover {
    border-color: var(--tech-primary-hover);
    background: var(--tech-subtle);
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb), 0.16);
}

.tech-sidebar-card ul li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--tech-gray-900);
    font-size: 0.85rem;
    line-height: 1.3;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.tech-sidebar-card ul li a:hover {
    background: transparent;
    border-color: transparent;
    color: var(--tech-primary);
    transform: none;
    box-shadow: none;
}

.tech-sidebar-card ul li a i {
    color: var(--tech-primary);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.tech-footer {
    background: var(--tech-gradient-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 40px 0 20px;
    margin-top: 40px;
}

.tech-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.tech-footer a:hover {
    color: #fff;
}

.tech-footer-brand {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.tech-footer-desc {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.8;
    max-width: 400px;
}

.tech-footer-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
}

.tech-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tech-footer-links li a {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tech-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    margin-top: 30px;
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: center;
}

/* ============================================================
   FLOATING ACTIONS
   ============================================================ */
.tech-floating-actions {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    z-index: 9990;
    pointer-events: none;
}

.tech-floating-actions > * {
    pointer-events: auto;
}

.tech-float-whatsapp {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 16px 10px 14px;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 0.875rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

.tech-float-whatsapp i {
    font-size: 1.35rem;
    line-height: 1;
    display: inline-block;
    animation: techWaPulse 2.5s infinite;
}

.tech-float-whatsapp:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

@keyframes techWaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(-6deg); }
}

.tech-back-to-top {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tech-primary) 0%, var(--tech-accent) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(var(--tech-primary-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.85);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    font-size: 1.2rem;
}

.tech-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tech-back-to-top:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 26px rgba(var(--tech-primary-rgb), 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
    color: #ffffff;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.tech-search-form {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
}

.tech-search-form .form-control {
    border-radius: 8px;
    border: 2px solid var(--tech-gray-200);
    padding: 10px 16px;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.tech-search-form .form-control:focus {
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 3px rgba(var(--tech-primary-rgb), 0.1);
}

.tech-search-form .btn {
    border-radius: 8px;
    font-weight: 600;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.tech-page-header {
    background: var(--tech-primary);
    color: #fff;
    margin-bottom: 30px;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 18px;
    padding: 38px 0;
    box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb), 0.18);
}

.tech-page-header .container {
    max-width: min(1280px, calc(100% - 48px));
    padding-left: 28px;
    padding-right: 28px;
    text-align: center;
}

.tech-page-header h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
}

.tech-page-header p {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.6;
    opacity: 0.9;
    max-width: 780px;
    margin: 0 auto;
}

.tech-content-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
    margin-bottom: 1.5rem;
}

.tech-content-card h2,
.tech-content-card h3 {
    color: var(--tech-primary);
}

/* About the Journal page: justify paragraph text */
.page_about .content,
.page_about .content p,
.tech-content-card .content,
.tech-content-card .content p {
    text-align: justify;
    text-align-last: left;
}

/* ============================================================
   ARTICLE PAGE - ARTICLE DETAILS (modern default-style layout)
   Article renders inside .page_article with the classic OJS
   article-details structure reproduced for the Paryavarana theme:
   breadcrumbs, h1.page-header title, then a two-column row made
   of .article-sidebar (left) and .article-main-col (right).
   ============================================================ */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page_article h1.page-header {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--tech-gray-900);
    line-height: 1.3;
    margin: 0 0 0.25rem;
}

.page_article .subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tech-gray-500);
    margin: 0 0 1.2rem;
}

.page_article .cmp_notification.notice {
    background: var(--tech-subtle);
    border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.article-details > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.7fr;
    gap: 28px;
    align-items: start;
    margin-top: 1.25rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Left sidebar column */
.article-details .article-sidebar {
    background: var(--tech-gray-50);
    border: 1px solid var(--tech-gray-100);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.article-details .cover-image img.img-responsive {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--tech-gray-200);
}

/* Download buttons */
.article-details .download .obj_galley_link,
.article-details .download .obj_galley_link_supplementary {
    display: block;
    text-align: center;
    background: var(--tech-primary);
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.article-details .download .obj_galley_link::before {
    content: "\F356";
    font-family: "bootstrap-icons";
    margin-right: 8px;
    vertical-align: -2px;
}

.article-details .download .obj_galley_link:hover,
.article-details .download .obj_galley_link_supplementary:hover {
    background: var(--tech-primary-hover);
    transform: translateY(-1px);
}

.article-details .download .supplementary-galleys {
    margin-top: 10px;
}

.article-details .supplementary-galleys .obj_galley_link_supplementary {
    background: var(--tech-gray-600);
    padding: 8px 12px;
    font-size: 0.85rem;
}

/* Info list (Published / DOI / Keywords) */
.article-details .list-group {
    margin: 0;
}

.article-details .list-group-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--tech-gray-200);
    font-size: 0.85rem;
    color: var(--tech-gray-700);
}

.article-details .list-group-item:first-child {
    padding-top: 0;
}

.article-details .list-group-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.article-details .list-group-item strong {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--tech-gray-800);
    margin-bottom: 4px;
}

.article-details .list-group-item a {
    color: var(--tech-primary);
    text-decoration: none;
    word-break: break-all;
}

.article-details .list-group-item a:hover {
    text-decoration: underline;
}

/* Main column */
.article-details .article-main {
    padding-top: 4px;
}

.article-details .authors .author {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--tech-gray-100);
}

.article-details .authors .author:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.article-details .authors strong {
    font-size: 1rem;
    color: var(--tech-gray-900);
}

.article-details .article-author-affiliation,
.article-details .article-author-user-group,
.article-details .article-author-orcid {
    font-size: 0.85rem;
    color: var(--tech-gray-600);
    margin-top: 4px;
}

.article-details .article-author-affiliation svg,
.article-details .article-author-affiliation img {
    max-height: 1.1em;
    vertical-align: text-bottom;
    margin-left: 4px;
}

.article-details .article-summary {
    margin-top: 1.25rem;
}

.article-details .article-summary h2,
.article-details .article-references h2,
.article-details .article-downloads-chart h2 {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tech-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tech-subtle);
    margin: 0 0 1rem;
}

.article-details .article-abstract,
.article-details .article-references-content {
    text-align: justify;
    color: var(--tech-gray-800);
    line-height: 1.7;
    font-size: 0.95rem;
}

.article-details .article-references-content p {
    margin-bottom: 0.75rem;
}

.article-details .article-references-content p:last-child {
    margin-bottom: 0;
}

/* Panels (author bios, issue, section, copyright, citations, etc.) */
.article-details .panel {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(var(--tech-primary-rgb), 0.05);
}

.article-details .panel-heading {
    padding: 12px 18px;
    border-bottom: 1px solid var(--tech-gray-100);
    background: var(--tech-gray-50);
}

.article-details .panel-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tech-gray-800);
    margin: 0;
}

.article-details .panel-body {
    padding: 16px 18px;
    font-size: 0.9rem;
    color: var(--tech-gray-800);
    line-height: 1.65;
}

.article-details .panel-body a {
    color: var(--tech-primary);
}

.article-details .panel-body .title {
    font-weight: 600;
}

.article-details .panel-body ul,
.article-details .panel-body ul.categories {
    margin: 0;
    padding-left: 18px;
}

.article-details .panel-body img {
    max-width: 100%;
    height: auto;
}

.article-details .author-bio {
    margin-bottom: 12px;
}

.article-details .author-bio:last-child {
    margin-bottom: 0;
}

.article-details .author-bio .value {
    margin-top: 4px;
}

.article-details .article-more-details > .panel:last-child {
    margin-bottom: 0;
}

/* Plugin-injected blocks (e.g. Citation Style Language "How to Cite") */
.article-details .article-more-details .item.citation,
.article-details .article-more-details .item {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(var(--tech-primary-rgb), 0.05);
}

.article-details .article-more-details .item .sub_item {
    padding: 14px 18px;
}

.article-details .article-more-details .item .label {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tech-gray-800);
    padding-bottom: 8px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--tech-gray-100);
}

/* "More Citation Formats" toggle - must not inherit the section
   label styling above (it is a nested button, not a section title) */
.article-details .article-more-details .item .label.citation_formats_button {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tech-gray-700);
    border-bottom: 0;
    margin: 0;
    padding: 10px 14px;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 0;
}

.article-details .article-more-details .value {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--tech-gray-800);
}

.article-details .article-more-details .citation_display {
    word-break: break-word;
}

.article-details .article-more-details .btn-group {
    margin: 10px 18px 18px;
}

.article-details .article-more-details .btn-group .btn {
    background: var(--tech-gray-50);
    border: 1px solid var(--tech-gray-200);
    color: var(--tech-gray-700);
    padding: 8px 14px !important;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px !important;
}

.article-details .article-more-details .btn-group .btn:hover {
    background: var(--tech-subtle);
    border-color: var(--tech-primary);
    color: var(--tech-primary);
}

.article-details .article-more-details .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--tech-gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    padding: 6px;
    margin-top: 4px;
    max-height: 320px;
    overflow-y: auto;
    list-style: none;
    min-width: 200px;
    z-index: 1000;
}

.article-details .article-more-details .btn-group {
    position: relative;
}

.article-details .article-more-details .dropdown-menu.show {
    display: block;
}

.article-details .article-more-details .dropdown-menu li {
    padding: 0;
}

.article-details .article-more-details .dropdown-menu a {
    display: block;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--tech-gray-700);
    text-decoration: none;
}

.article-details .article-more-details .dropdown-menu a:hover {
    background: var(--tech-subtle);
    color: var(--tech-primary);
}

/* Article references (fallback classic markup) */
.article-details .article-more-details .references {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 1.25rem;
}

.article-details .article-more-details .references .label {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tech-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tech-subtle);
    margin: 0 0 1rem;
}

/* Responsive: stack the article sidebar above the content */
@media (max-width: 991.98px) {
    .article-details > .row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================================================
   GALLEY / PDF VIEWER PAGE (plugins/generic/pdfJsViewer)
   A standalone page: header.header_view followed by
   #pdfCanvasContainer.galley_view > iframe. The default theme CSS
   that sizes these is unavailable, so the iframe collapses to its
   inline min-height and clips the bottom of the PDF. We make the
   viewer fill the viewport instead.
   ============================================================ */
.header_view {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--tech-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header_view a.return {
    color: var(--tech-gray-500);
    font-size: 1.1rem;
    text-decoration: none;
    line-height: 1;
}

.header_view a.return:hover {
    color: var(--tech-primary);
}

.header_view a.return::before {
    content: "\F12F";
    font-family: "bootstrap-icons";
}

.header_view a.download::before {
    content: "\F356";
    font-family: "bootstrap-icons";
}

.header_view a.title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tech-gray-900);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header_view a.title:hover {
    color: var(--tech-primary);
}

.header_view a.download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tech-primary);
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
}

.header_view a.download:hover {
    background: var(--tech-primary-hover);
}

.header_view a.download .label {
    color: #fff;
}

#pdfCanvasContainer.galley_view {
    height: calc(100vh - 56px);
    box-sizing: border-box;
    position: relative;
}

#pdfCanvasContainer.galley_view iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    border: 0;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.tech-pagination .page-link {
    color: var(--tech-primary);
    border: 1px solid var(--tech-gray-200);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tech-pagination .page-link:hover {
    background: var(--tech-primary);
    color: #fff;
    border-color: var(--tech-primary);
}

.tech-pagination .page-item.active .page-link {
    background: var(--tech-primary);
    border-color: var(--tech-primary);
    color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .tech-hero-title {
        font-size: 1.6rem;
    }

    .tech-brand-title {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .tech-hero {
        padding: 40px 0 30px;
    }

    .tech-hero-title {
        font-size: 1.4rem;
    }

    .tech-metric-card {
        padding: 14px 16px;
    }

    .tech-metric-value {
        font-size: 1.05rem;
    }

    /* Phones: give the metric tiles all the space their icon + long labels
       need. The card becomes a vertical stat tile and the container stops
       being inset, so values stay on one readable line. */
    @media (max-width: 575.98px) {
        .tech-metrics-bar .container {
            max-width: none;
            padding-left: 12px;
            padding-right: 12px;
        }

        .tech-metric-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            padding: 12px 14px;
        }

        .tech-metric-icon {
            width: 34px;
            height: 34px;
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        .tech-metric-body {
            width: 100%;
        }

        .tech-metric-body .tech-metric-label {
            font-size: 0.62rem;
            line-height: 1.2;
            min-height: calc(2 * 1.2 * 0.62rem);
        }

        .tech-metric-body .tech-metric-value {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 1rem;
        }
    }

    .tech-about-card,
    .tech-indexing-card {
        padding: 20px;
    }

    .tech-article-cover-col {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
    }

    .tech-article-cover-link {
        width: 135px !important;
        height: 135px !important;
    }

    .tech-article-body-col {
        padding-left: 0 !important;
    }

    .tech-floating-actions {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }

    .tech-float-whatsapp {
        padding: 10px;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        justify-content: center;
    }

    .tech-float-whatsapp .tech-float-label {
        display: none;
    }

    .tech-back-to-top {
        width: 40px;
        height: 40px;
    }
}

/* ============================================================
   MISC
   ============================================================ */
.visually-hidden-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.z-index-top {
    z-index: 99999;
}

.shadow-2xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.copy-doi-btn {
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-doi-btn:hover {
    background: var(--tech-primary) !important;
    color: #fff !important;
    border-color: var(--tech-primary) !important;
}

/* Hide default OJS structure elements we replace */
.pkp_structure_header,
.pkp_structure_footer {
    display: none;
}

/* ============================================================
   PAGE CONTENT LAYOUT
   Internal pages (archive, issue, article, about, search, etc.)
   render inside .pkp_structure_content > .pkp_structure_main.
   We center and constrain the width so content lines up with the
   navbar container.
   ============================================================ */
.pkp_structure_content {
    max-width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
    --tech-pad: 16px;
    --tech-gap: 28px;
    --tech-sbw: 320px;
}

/* Wide metrics bar: stretch out of the sidebar-narrowed main column so it
   spans the same width as the rest of the page (desktop only). On the home
   page the sidebar is pushed below the metrics bar. */
@media (min-width: 1200px) {
    .tech-metrics-bar {
        margin-left: calc(-1 * var(--tech-pad));
        margin-right: calc(-1 * (var(--tech-gap) + var(--tech-sbw) + var(--tech-pad)));
        min-height: 132px;
    }

    .tech-metrics-bar .container {
        max-width: none;
        padding-left: var(--tech-pad);
        padding-right: var(--tech-pad);
    }

    body.pkp_page_index .tech-metric-body .tech-metric-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.pkp_page_index .pkp_structure_sidebar {
        margin-top: calc(26px + var(--tech-metrics-h, 132px));
    }
}

.pkp_structure_main {
    padding: 26px 0 50px;
    flex: 1 1 0;
    min-width: 0;
}

.pkp_structure_main .page {
    max-width: min(1210px, 100%);
}

/* Generic OJS headings on internal pages */
.pkp_structure_main .page h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tech-gray-800);
    margin: 0.2rem 0 1.2rem;
}

/* Archive page grid spans wider than the generic .page limit */
.pkp_structure_main .page_issue_archive {
    max-width: none;
}

/* Sidebar column (rendered globally beside .pkp_structure_main) */
.pkp_structure_sidebar {
    flex: 0 0 320px;
    max-width: 320px;
    padding: 26px 0 50px;
}

/* Sidebar-bearing pages: reset any extra padding on main */
.pkp_structure_content.has_sidebar .pkp_structure_main {
    padding-right: 0;
}

@media (max-width: 991.98px) {
    .pkp_structure_content {
        gap: 8px;
    }
    .pkp_structure_sidebar {
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: 8px;
    }
}

/* ============================================================
   SIDEBAR BLOCKS (standard OJS blocks within our grid)
   ============================================================ */
.pkp_block {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.06);
    border: 1px solid var(--tech-gray-100);
    margin-bottom: 1.2rem;
}

.pkp_block .title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tech-gray-900);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tech-primary);
}

.pkp_block .content {
    font-size: 0.85rem;
    color: var(--tech-gray-700);
}

.pkp_block .content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkp_block .content ul li {
    padding: 0;
    margin: 4px 0;
}

.pkp_block .content ul li a {
    color: var(--tech-gray-700);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
    padding: 4px 0;
}

.pkp_block .content ul li a:hover {
    color: var(--tech-primary);
}

.pkp_block.block_information,
.pkp_block.block_developed_by,
.pkp_block.block_web_feed,
.pkp_block.block_language_toggle {
    text-align: left;
}

.pkp_block.block_web_feed a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tech-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    margin-right: 8px;
}

.pkp_block.block_web_feed a:hover {
    text-decoration: underline;
}

/* Custom sidebar blocks: make contained images fit the block
   width/height precisely and center them evenly (left-right) */
.pkp_block.block_custom .content img,
.pkp_block .content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Make the "Make a Submission" sidebar link look like a button */
.pkp_block.block_make_submission .content {
    text-align: center;
}

a.block_make_submission_link,
.pkp_block.block_make_submission a.block_make_submission_link {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--tech-primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb, 190, 24, 60), 0.28);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

a.block_make_submission_link:hover,
.pkp_block.block_make_submission a.block_make_submission_link:hover {
    background: var(--tech-primary-hover, #7f1232);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--tech-primary-rgb, 190, 24, 60), 0.34);
}

/* ============================================================
   ARCHIVE PAGE
   ============================================================ */
.page_issue_archive {
    padding: 20px 0 40px;
}

.page_issue_archive h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--tech-gray-800);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page_issue_archive h1::before {
    content: "\F43C";
    font-family: "bootstrap-icons";
    color: var(--tech-primary);
    font-size: 1.4rem;
}

.issues_archive {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.issues_archive > li {
    margin: 0;
}

/* Breadcrumbs */
.cmp_breadcrumbs {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}

.cmp_breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.cmp_breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--tech-gray-500);
}

.cmp_breadcrumbs a {
    color: var(--tech-primary);
    text-decoration: none;
    font-weight: 600;
}

.cmp_breadcrumbs a:hover {
    text-decoration: underline;
}

.cmp_breadcrumbs .separator {
    color: var(--tech-gray-300);
}

/* Article card (TOC / home) galley: PDF download button */
.tech-article-card .obj_galley_link,
.tech-article-card .obj_galley_link_supplementary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #dc2626;
    color: #fff !important;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tech-article-card .obj_galley_link::before {
    content: "\F356";
    font-family: "bootstrap-icons";
    font-size: 0.95rem;
    line-height: 1;
}

.tech-article-card .obj_galley_link:hover,
.tech-article-card .obj_galley_link_supplementary:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

/* Issue card */
.tech-issue-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--tech-gray-100);
    box-shadow: 0 2px 18px rgba(var(--tech-primary-rgb), 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tech-issue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(21, 128, 61, 0.14);
}

.tech-issue-cover {
    display: block;
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--tech-subtle), #fff);
    overflow: hidden;
    border-bottom: 1px solid var(--tech-gray-100);
}

.tech-issue-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tech-issue-card:hover .tech-issue-cover img {
    transform: scale(1.04);
}

.tech-issue-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tech-primary);
    font-size: 3.2rem;
    background: linear-gradient(135deg, var(--tech-subtle), rgba(var(--tech-primary-rgb), 0.08));
}

.tech-issue-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tech-issue-series {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tech-primary);
    background: var(--tech-subtle);
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 10px;
}

.tech-issue-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tech-gray-800);
    margin-bottom: 8px;
    line-height: 1.35;
}

.tech-issue-title a {
    color: inherit;
    text-decoration: none;
}

.tech-issue-title a:hover {
    color: var(--tech-primary);
}

.tech-issue-desc {
    font-size: 0.85rem;
    color: var(--tech-gray-500);
    margin-bottom: 14px;
    flex: 1;
}

.tech-issue-btn {
    margin-top: auto;
    align-self: flex-start;
    background: var(--tech-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    transition: all 0.2s ease;
}

.tech-issue-btn:hover {
    background: var(--tech-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* Archive pagination */
.archive_pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.archive_pagination .cmp_pagination,
.page_issue_archive .cmp_pagination {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 30px;
}

.page_issue_archive .cmp_pagination a,
.page_issue_archive .cmp_pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--tech-gray-200);
    color: var(--tech-gray-600);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
}

.page_issue_archive .cmp_pagination a:hover {
    background: var(--tech-subtle);
    color: var(--tech-primary);
    border-color: var(--tech-primary);
}

.page_issue_archive .cmp_pagination .current {
    background: var(--tech-primary);
    color: #fff;
    border-color: var(--tech-primary);
}

@media (max-width: 767.98px) {
    .issues_archive {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   INDEXED BY (above footer)
   ============================================================ */
.tech-indexed-by {
    background: var(--tech-gray-50);
    border-top: 1px solid var(--tech-gray-100);
    padding: 4px 0 0;
}

.tech-indexed-by-inner {
    text-align: center;
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(var(--tech-primary-rgb), 0.05);
}

.tech-indexing-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tech-indexing-list li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--tech-subtle);
    border: 1px solid rgba(var(--tech-primary-rgb), 0.12);
    color: var(--tech-gray-700);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 7px 14px;
    border-radius: 40px;
    transition: all 0.2s ease;
}

.tech-indexing-list li:hover {
    background: var(--tech-primary);
    color: #fff;
    border-color: var(--tech-primary);
}

.tech-indexing-list li .bi {
    color: var(--tech-primary);
}

.tech-indexing-list li:hover .bi {
    color: #fff;
}

.tech-indexing-custom-content {
    font-size: 0.9rem;
    color: var(--tech-gray-500);
}

/* ============================================================
   OJS FORM PAGES (login, register, forgot password, etc.)
   ============================================================ */
.pkp_structure_main .page_login,
.pkp_structure_main .page_register,
.pkp_structure_main .page_lost_password,
.pkp_structure_main .page_register_complete {
    width: 100%;
    max-width: none;
}

.pkp_structure_main .page_content {
    max-width: 560px;
}

/* Card wrapping the form */
.pkp_structure_main .page_login .cmp_form,
.pkp_structure_main .page_register .cmp_form,
.pkp_structure_main .page_lost_password .cmp_form {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 4px 22px rgba(var(--tech-primary-rgb), 0.08);
    margin-top: 6px;
}

/* Intro paragraph (e.g. required fields note) */
.pkp_structure_main .page_login > p,
.pkp_structure_main .page_register > p {
    color: var(--tech-gray-500);
    font-size: 0.88rem;
}

.pkp_structure_main .required {
    color: var(--tech-primary);
    font-weight: 700;
}

/* Form fields layout */
.page_login .fields,
.page_register .fields,
.page_lost_password .fields {
    margin: 0;
    padding: 0;
    border: none;
}

.page_login .fields > div,
.page_register .fields > div,
.page_lost_password .fields > div {
    margin-bottom: 16px;
}

.page_login .fields > div label,
.page_register .fields > div label,
.page_lost_password .fields > div label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--tech-gray-700);
}

.page_login .label,
.page_register .label,
.page_lost_password .label {
    font-weight: 600;
    font-size: 0.85rem;
}

.page_login input[type="text"],
.page_login input[type="password"],
.page_login input[type="email"],
.page_register input[type="text"],
.page_register input[type="password"],
.page_register input[type="email"],
.page_lost_password input[type="text"],
.page_lost_password input[type="email"],
.page_login select,
.page_register select,
.page_lost_password select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tech-gray-200);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--tech-gray-800);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page_login input:focus,
.page_register input:focus,
.page_lost_password input:focus {
    outline: none;
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 3px rgba(var(--tech-primary-rgb), 0.12);
}

/* Remember me checkbox */
.page_login .checkbox,
.page_register .checkbox {
    display: flex;
    align-items: center;
}

.page_login .checkbox label,
.page_register .checkbox label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

.page_login .checkbox input,
.page_register .checkbox input {
    width: auto;
}

.page_login .checkbox .label,
.page_register .checkbox .label {
    font-weight: 500;
    color: var(--tech-gray-600);
}

/* Buttons */
.page_login .buttons,
.page_register .buttons,
.page_lost_password .buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.page_login button.submit,
.page_register button.submit,
.page_lost_password button.submit {
    background: var(--tech-gradient);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 28px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb), 0.28);
    transition: all 0.2s ease;
}

.page_login button.submit:hover,
.page_register button.submit:hover,
.page_lost_password button.submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--tech-primary-rgb), 0.38);
}

.page_login .buttons a,
.page_register .buttons a {
    color: var(--tech-primary);
    font-weight: 600;
    text-decoration: none;
}

.page_login .buttons a:hover,
.page_register .buttons a:hover {
    text-decoration: underline;
}

/* Register form section headings (fieldset legends) */
.page_register fieldset {
    margin: 0 0 20px;
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1px solid var(--tech-gray-100);
}

.page_register fieldset:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.page_register legend {
    float: none;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tech-primary);
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.2;
}

/* Consent / opt-in checkboxes must sit inline with their text */
.page_register .optin label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tech-gray-700);
}

.page_register .optin input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin-top: 2px;
    accent-color: var(--tech-primary);
}

.page_register .optin a {
    color: var(--tech-primary);
    text-decoration: underline;
}

.page_register .reviewer_interests {
    margin-top: 14px;
}

/* Forgot password link inside field */
.page_login .password a {
    color: var(--tech-primary);
    font-size: 0.82rem;
    text-decoration: none;
}

.page_login .password a:hover {
    text-decoration: underline;
}

/* ============================================================
   SEARCH PAGE (OJS standard search form)
   The base theme styles are not loaded, so we style the search
   form to match the theme.
   ============================================================ */
.page_search {
    max-width: 860px;
}

/* Breadcrumbs */
.page_search .cmp_breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 14px;
    font-size: 0.82rem;
}

.page_search .cmp_breadcrumbs a {
    color: var(--tech-primary);
    text-decoration: none;
}

.page_search .cmp_breadcrumbs .current {
    color: var(--tech-gray-600);
}

.page_search .cmp_breadcrumbs .separator {
    color: var(--tech-gray-400);
}

/* Search form card */
.page_search .cmp_form {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 22px rgba(var(--tech-primary-rgb), 0.08);
}

/* Search input */
.page_search .search_input input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--tech-gray-200);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--tech-gray-800);
    background: #fff;
}

.page_search .search_input input:focus {
    outline: none;
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 3px rgba(var(--tech-primary-rgb), 0.12);
}

/* Advanced filters */
.page_search .search_advanced {
    border: 1px solid var(--tech-gray-100);
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
}

.page_search .search_advanced legend {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tech-gray-700);
    padding: 0 8px;
}

/* Date range: two columns */
.page_search .date_range {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.page_search .date_range .from,
.page_search .date_range .to {
    flex: 1 1 300px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.page_search .date_range fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.page_search .date_range fieldset legend {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tech-gray-500);
    padding: 0;
}

.page_search .date_range label {
    font-size: 0.78rem;
    color: var(--tech-gray-500);
}

.page_search .date_range select {
    padding: 6px 8px;
    border: 1px solid var(--tech-gray-200);
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    color: var(--tech-gray-800);
}

/* By Author */
.page_search .author {
    margin-top: 14px;
}

.page_search .author .label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 6px;
    color: var(--tech-gray-700);
}

.page_search .author input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--tech-gray-200);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--tech-gray-800);
}

.page_search .author input:focus {
    outline: none;
    border-color: var(--tech-primary);
    box-shadow: 0 0 0 3px rgba(var(--tech-primary-rgb), 0.12);
}

/* Submit button */
.page_search .submit {
    margin-top: 18px;
}

.page_search button.submit {
    background: var(--tech-gradient);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 30px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb), 0.28);
    transition: all 0.2s ease;
}

.page_search button.submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--tech-primary-rgb), 0.38);
}

/* Search results */
.page_search .search_results {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.page_search .search_results li {
    margin-bottom: 14px;
}

.page_search .search_results .obj_article_summary {
    background: #fff;
    border: 1px solid var(--tech-gray-100);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 12px rgba(var(--tech-primary-rgb), 0.05);
}

/* Notification */
.page_search .cmp_notification,
.page_search .cmp_notification.notice {
    background: var(--tech-subtle);
    border: 1px solid rgba(var(--tech-primary-rgb), 0.15);
    color: var(--tech-gray-700);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 18px;
    font-size: 0.9rem;
}

/* ============================================================
   ACCESSIBILITY & EDIT LINK
   ============================================================ */
/* Visually hide text that is only meant for screen readers so it
   does not render as large visible text (base theme styles that
   normally hide this are not loaded by this theme). */
.pkp_screen_reader,
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
}

/* Compact "Edit" link shown to journal managers, rendered as a
   small superscript control in the top-right of a section. */
.cmp_edit_link {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--tech-primary);
    background: var(--tech-subtle);
    padding: 1px 7px;
    border-radius: 8px;
    vertical-align: super;
    line-height: 1.3;
    margin-left: 6px;
    transition: all 0.2s ease;
}

.cmp_edit_link:hover {
    background: var(--tech-primary);
    color: #ffffff;
    text-decoration: none;
}