/**
 * AXIS Theme - Main Stylesheet
 * OJS 3.3 Compatible
 * Version: 4.23
 */
/* ============================================================================
   BASE & VARIABLES
   ========================================================================== */
/* Fonts loaded in header.tpl */
/* CSS Custom Properties (Dynamic from theme options) */
:root {
	/* Colors - will be overridden by theme options */
	--axis-primary: #4F46E5;
	--axis-primary-dark: #4338ca;
	--axis-secondary: #10B981;
	/* Light mode colors */
	--axis-text: #1E293B;
	--axis-text-secondary: #64748B;
	--axis-background: #FFFFFF;
	--axis-surface: #F8FAFC;
	--axis-border: #E2E8F0;
	/* Spacing */
	--axis-spacing-unit: 24px;
	--axis-container-width: 1200px;
	/* Typography - Single font family (overridden by theme option in header.tpl) */
	--axis-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--axis-font-mono: 'Courier New', monospace;
	/* Transitions */
	--axis-transition: all 0.3s ease;
	--axis-transition-fast: all 0.15s ease;
	/* Shadows */
	--axis-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--axis-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--axis-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--axis-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	/* Border radius */
	--axis-radius-sm: 4px;
	--axis-radius-md: 8px;
	--axis-radius-lg: 12px;
	--axis-radius-xl: 16px;
}

/* ============================================================================
   RESET & BASE STYLES
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* CRITICAL: Ensure scrolling works */
html {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--axis-font-family);
	font-size: 16px;
	line-height: 1.6;
	color: var(--axis-text);
	background-color: var(--axis-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100%;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--axis-font-family);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1rem 0;
	color: var(--axis-text);
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 1.875rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

/* Global font for buttons and form elements */
button,
input,
select,
textarea {
	font-family: var(--axis-font-family);
}

p {
	margin: 0 0 1rem 0;
}

a {
	color: var(--axis-primary);
	text-decoration: none;
	transition: var(--axis-transition-fast);
}

a:hover {
	color: #291fd9;
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================================================
   LAYOUT
   ========================================================================== */
.axis-container {
	max-width: var(--axis-container-width);
	margin: 0 auto;
	padding: 0 var(--axis-spacing-unit);
}

.axis-main {
	min-height: calc(100vh - 400px);
}

.axis-content-wrapper {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: calc(var(--axis-spacing-unit) * 2);
}

@media (max-width: 1024px) {
	.axis-content-wrapper {
		grid-template-columns: 1fr;
	}

	.axis-content-wrapper .axis-sidebar-wrapper {
		order: -1;
	}
}

.axis-main-content {
	flex: 1;
}

/* ============================================================================
   HEADER
   ========================================================================== */
.axis-header {
	background: var(--axis-background);
	border-bottom: 1px solid var(--axis-border);
	position: relative;
	z-index: 1000;
	box-shadow: var(--axis-shadow-sm);
	transition: box-shadow 0.3s ease, backdrop-filter 0.3s ease;
	backdrop-filter: blur(8px);
	background: rgba(255, 255, 255, 0.95);
}

/* Enhanced shadow when scrolling */
.axis-header.scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border-bottom-color: transparent;
}

/* Header container needs position relative for mobile search */
.axis-header>.axis-container {
	position: relative;
}

.axis-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--axis-spacing-unit) / 2) 0;
	gap: var(--axis-spacing-unit);
}

.axis-header__brand {
	flex-shrink: 1;
	/* Allow shrinking if needed */
	max-width: 45%;
	/* Limit to ~40-50% of header width */
	min-width: 200px;
	/* Minimum readable width */
}

.axis-logo {
	max-height: 100px;
	/* Maximum logo height (works for both site and journal) */
	width: auto;
}

.axis-brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Allow text to shrink */
}

.axis-brand-text__name {
	font-family: var(--axis-font-family);
	font-size: var(--axis-font-xl);
	font-weight: 700;
	color: var(--axis-text);
	line-height: 1.2;
	/* Allow wrapping to second line if needed */
}

.axis-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	/* Take remaining space */
	justify-content: flex-end;
	/* Align items to right */
	min-width: 0;
	/* Allow shrinking */
}

.axis-header__search form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	/* Ensure vertical alignment */
}

.axis-search-input {
	padding: 0.5rem 1rem;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-sm);
	width: 180px;
	/* Narrower, more compact */
	height: 45px;
	/* User tested and specified 45px */
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Include border in height */
}

/* Header search input - more specific to override page search CSS */
.axis-header__search .axis-search-input {
	height: 45px !important;
	/* User specified - override page search 56px */
}

.axis-search-input:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

@media (max-width: 768px) {
	.axis-search-input {
		width: 120px;
		/* Even more compact on mobile */
	}
}

.axis-search-button {
	padding: 0.75rem 1.5rem;
	background: var(--axis-primary);
	color: white;
	border: none;
	border-radius: var(--axis-radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* Space between icon and text */
	transition: var(--axis-transition-fast);
	font-weight: 500;
	font-size: var(--axis-font-base);
	white-space: nowrap;
}

.axis-search-button svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.axis-search-button:hover {
	background: var(--axis-primary-dark);
	color: #ffffff;
}

.axis-header__actions .axis-search-button:hover svg {
	stroke: #ffffff;
}

/* Header search button: Icon-only, square, matches other icons */
.axis-header__actions .axis-search-button {
	width: 40px;
	height: 40px;
	padding: 0;
	min-width: 40px;
	border-radius: 6px;
}

.axis-header__actions .axis-search-button span {
	display: none;
	/* Hide "Search" text in header */
}

.axis-header__actions .axis-search-button svg {
	width: 20px;
	height: 20px;
}

/* Dark mode toggle */
.axis-icon-button {
	width: 40px;
	/* Match ALL header elements - 40px! */
	height: 40px;
	/* Match ALL header elements - 40px! */
	padding: 0;
	/* Remove padding, use fixed size */
	background: transparent;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--axis-transition-fast);
	box-sizing: border-box;
	/* Include border in dimensions */
}

.axis-icon-button:hover {
	background: var(--axis-surface);
}

.axis-icon-button svg {
	width: 20px;
	height: 20px;
}

.axis-icon-sun {
	display: block;
}

.axis-icon-moon {
	display: none;
}

.dark-mode .axis-icon-sun {
	display: none;
}

.dark-mode .axis-icon-moon {
	display: block;
}

/* Mobile menu toggle */
.axis-mobile-menu-toggle {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 0.5rem;
	background: transparent;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	cursor: pointer;
}

@media (max-width: 768px) {
	.axis-mobile-menu-toggle {
		display: flex;
	}
}

.axis-hamburger-line {
	width: 24px;
	height: 2px;
	background: var(--axis-text);
	transition: var(--axis-transition-fast);
}

.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(2) {
	opacity: 0;
}

.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Primary Navigation */
.axis-primary-nav {
	padding: 1rem 0;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Sticky styles are applied via JavaScript inline */

@media (max-width: 768px) {
	.axis-primary-nav {
		display: none;
	}

	.axis-primary-nav.is-open {
		display: block;
	}
}

.axis-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* Left align */
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5rem;
	row-gap: 0.75rem;
	/* Alt satırlar için biraz daha fazla boşluk */
}

/* Tablet: Compact mode - daha fazla sığar */
@media (max-width: 1200px) and (min-width: 769px) {
	.axis-nav-list {
		gap: 0.35rem;
		row-gap: 0.65rem;
	}

	.axis-nav-list a {
		padding: 0.65rem 1rem;
		/* Daha kompakt */
		font-size: 0.9rem;
	}
}

@media (max-width: 768px) {
	.axis-nav-list {
		flex-direction: column;
		gap: 0.5rem;
	}
}

.axis-nav-list li {
	margin: 0;
	position: relative;
}

/* Modern navigation link styling - ALWAYS button-shaped */
.axis-nav-list a {
	font-family: var(--axis-font-family);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--axis-text);
	text-decoration: none;
	transition: var(--axis-transition-fast);
	padding: 0.75rem 1.25rem;
	border-radius: var(--axis-radius-md);
	display: inline-block;
	position: relative;
	overflow: hidden;
	/* DEFAULT: Button shape visible */
	border: 1.5px solid var(--axis-border);
	background: transparent;
}

/* Hover effects - color change + underline */
.axis-nav-list a:hover {
	color: var(--axis-primary);
	border-color: var(--axis-primary);
	background: rgba(79, 70, 229, 0.03);
	text-decoration: none;
}

/* Active page indicator - filled button */
.axis-nav-list li.current-menu-item>a,
.axis-nav-list a[aria-current="page"] {
	color: var(--axis-primary);
	font-weight: 600;
	background: rgba(79, 70, 229, 0.08);
	border-color: var(--axis-primary);
	box-shadow: inset 0 -3px 0 0 var(--axis-primary);
}

/* Animated underline effect on hover */
.axis-nav-list a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--axis-primary);
	transition: width 0.3s ease, left 0.3s ease;
}

.axis-nav-list a:hover::before {
	width: 80%;
	left: 10%;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.axis-footer {
	background: var(--axis-surface);
	border-top: 1px solid var(--axis-border);
	margin-top: calc(var(--axis-spacing-unit) * 4);
	padding: calc(var(--axis-spacing-unit) * 2) 0;
}

.axis-footer__content {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--axis-spacing-unit) * 2);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

@media (max-width: 768px) {
	.axis-footer__content {
		grid-template-columns: 1fr;
	}
}

.axis-footer__title {
	font-size: var(--axis-font-base);
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--axis-text);
}

.axis-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-footer__links li {
	margin-bottom: 0.5rem;
}

.axis-footer__links a {
	color: var(--axis-text-secondary);
	font-size: 0.875rem;
}

.axis-footer__links a:hover {
	color: var(--axis-primary);
}

.axis-footer__bottom {
	border-top: 1px solid var(--axis-border);
	padding-top: calc(var(--axis-spacing-unit));
	text-align: center;
	width: 100%;
}

.axis-footer__bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
}

@media (max-width: 768px) {
	.axis-footer__bottom-content {
		flex-direction: column;
		gap: 1rem;
	}
}

.axis-footer__legal-links {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 1.5rem;
}

.axis-footer__legal-links a {
	color: var(--axis-text-secondary);
}

.axis-footer__legal-links a:hover {
	color: var(--axis-primary);
}

/* Back to top button */
.axis-back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 48px;
	height: 48px;
	background: var(--axis-primary);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--axis-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: var(--axis-transition);
	z-index: 999;
}

.axis-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.axis-back-to-top:hover {
	background: #291fd9;
	transform: translateY(-4px);
}

/* ============================================================================
   SITE FOOTER (Site-Level Only)
   ============================================================================ */

.axis-site-footer__columns {
	display: grid;
	gap: calc(var(--axis-spacing-unit) * 3);
	padding: 20px 0 calc(var(--axis-spacing-unit) * 3) 0;
	border-bottom: 1px solid var(--axis-border);
}

/* Dynamic column widths based on count */
.axis-site-footer__columns--1 {
	grid-template-columns: 1fr;
}

.axis-site-footer__columns--2 {
	grid-template-columns: repeat(2, 1fr);
}

.axis-site-footer__columns--3 {
	grid-template-columns: repeat(3, 1fr);
}

.axis-site-footer__columns--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Vertical dividers between columns */
.axis-site-footer__column {
	position: relative;
	padding-left: calc(var(--axis-spacing-unit) * 2);
}

.axis-site-footer__column:first-child {
	padding-left: 0;
}

.axis-site-footer__column:not(:first-child)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--axis-border);
}

/* Column title */
.axis-site-footer__title {
	font-size: var(--axis-font-lg);
	font-weight: 600;
	color: var(--axis-text-primary);
	margin: 0 0 calc(var(--axis-spacing-unit)) 0;
}

/* Title divider (reuse existing style) */
.axis-site-footer__title+.axis-footer__divider {
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

/* Column content */
.axis-site-footer__content {
	color: var(--axis-text-secondary);
	font-size: var(--axis-font-sm);
	line-height: 1.6;
}

.axis-site-footer__content a {
	color: var(--axis-text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.axis-site-footer__content a:hover {
	color: var(--axis-primary);
}

.axis-site-footer__content ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-site-footer__content li {
	margin-bottom: calc(var(--axis-spacing-unit) * 0.5);
}

.axis-site-footer__content p {
	margin: 0 0 calc(var(--axis-spacing-unit)) 0;
}

.axis-site-footer__content p:last-child {
	margin-bottom: 0;
}

/* Footer bottom */
/* Footer bottom section - centered by default for plain text,
   but HTML elements with their own alignment styles will override this */
.axis-site-footer__bottom {
	padding: calc(var(--axis-spacing-unit) * 2) 0;
	border-top: 1px solid var(--axis-border);
	text-align: center;
	color: var(--axis-text-tertiary);
	font-size: var(--axis-font-sm);
}

.axis-site-footer__bottom p {
	margin: 0;
}

.axis-site-footer__bottom a {
	color: var(--axis-text-tertiary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.axis-site-footer__bottom a:hover {
	color: var(--axis-primary);
}

/* Dark mode */
body.dark-mode .axis-site-footer__column:not(:first-child)::before {
	background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {

	.axis-site-footer__columns--2,
	.axis-site-footer__columns--3,
	.axis-site-footer__columns--4 {
		grid-template-columns: 1fr;
		gap: calc(var(--axis-spacing-unit) * 2);
	}

	.axis-site-footer__column {
		padding-left: 0;
	}

	.axis-site-footer__column:not(:first-child)::before {
		display: none;
	}

	.axis-site-footer__column:not(:last-child) {
		padding-bottom: calc(var(--axis-spacing-unit) * 2);
		border-bottom: 1px solid var(--axis-border);
	}
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.axis-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--axis-font-family);
	font-weight: 500;
	font-size: var(--axis-font-base);
	border-radius: var(--axis-radius-md);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: var(--axis-transition-fast);
}

.axis-btn--primary {
	background: var(--axis-primary);
	color: white;
	border: 2px solid var(--axis-primary);
}

.axis-btn--primary:hover {
	background: transparent;
	color: var(--axis-primary);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.axis-btn--secondary {
	background: transparent;
	color: white;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.axis-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--axis-primary);
	color: white;
	text-decoration: none;
	transform: translateY(-2px);
}

.axis-btn--small {
	padding: 0.5rem 1rem;
	font-size: var(--axis-font-sm);
}

.axis-btn--large {
	padding: 1rem 2rem;
	font-size: var(--axis-font-lg);
}

/* ============================================================================
   HERO SECTION
   ========================================================================== */
.axis-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(var(--axis-spacing-unit) * 2);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
}

/* Full-width hero - extends beyond container to viewport edges */
.axis-hero--full-width {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
	margin-top: 0;
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

/* Ensure wrapper content stays centered in full-width mode */
.axis-hero--full-width .axis-hero__wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.axis-hero__image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.axis-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.axis-hero__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

.axis-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	color: white;
	padding: 2rem;
}

/* Hero wrapper - contains cover + content */
.axis-hero__wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* Hero with cover: content on right */
.axis-hero--with-cover .axis-hero__wrapper {
	justify-content: center;
}

/* SLIDER MODE: stretch so cover and slider share the same height */
.axis-hero--slider.axis-hero--with-cover .axis-hero__wrapper {
	align-items: stretch;
}

/* Journal cover image (left side) - fixed proportions for consistency */
.axis-hero__cover {
	flex-shrink: 0;
	width: 280px;
	aspect-ratio: 5 / 7;
	/* 280 × 392 px — standard journal cover proportion */
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 10px 30px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease;
}

.axis-hero__cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* fills the box even if source aspect differs */
	display: block;
	transition: transform 0.3s ease;
}

.axis-hero__cover:hover .axis-hero__cover-image {
	transform: scale(1.03);
}

/* Content when cover exists */
.axis-hero--with-cover .axis-hero__content {
	flex: 1;
	min-width: 0;
	/* CRITICAL: allow flex item to shrink below content min-width (prevents slider pushing cover out) */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Vertically center in right area */
	text-align: center;
	/* Center text, not left-aligned */
	padding: 0 2rem;
	/* Horizontal padding */
}

/* Content without cover (centered) */
.axis-hero:not(.axis-hero--with-cover) .axis-hero__content {
	text-align: center;
	padding: 2rem;
}

/* Slider Home embedded in hero (wider when no journal cover) */
.axis-hero--slider .axis-hero__slider {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* Prevent slider's intrinsic width from blowing up its flex parent */
	margin: 0 auto 1.5rem auto;
	overflow: hidden;
	/* Keep swiper contained so it never overlaps the cover */
}

.axis-hero--slider .axis-hero__slider .swiper-container {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.axis-hero--slider .axis-hero__title {
	margin-bottom: 1rem;
}

/* Slider + cover together: CSS GRID for deterministic two-column sizing.
   IMPORTANT: grid container with just max-width collapses to max-content width
   (280px cover + auto content=0 = ~328px). We MUST force width:100% so the grid
   actually spans the full wrapper. */
.axis-hero--slider.axis-hero--with-cover .axis-hero__wrapper {
	display: grid !important;
	width: 100% !important;
	box-sizing: border-box !important;
	grid-template-columns: 280px minmax(0, 1fr) !important;
	grid-template-rows: 392px !important;
	gap: 3rem !important;
	align-items: stretch !important;
	justify-items: stretch !important;
	justify-content: stretch !important;
	flex-wrap: unset !important;
}

.axis-hero--slider.axis-hero--with-cover .axis-hero__cover {
	width: 280px !important;
	height: 392px !important;
	aspect-ratio: auto !important;
	/* row height is already pinned */
	grid-column: 1 !important;
	grid-row: 1 !important;
}

.axis-hero--slider.axis-hero--with-cover .axis-hero__content {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* In slider+cover mode, hide the journal title and action buttons inside content so the
   slider can fill the exact same height as the cover. Users who prefer the title visible
   can override these rules in custom CSS. */
.axis-hero--slider.axis-hero--with-cover .axis-hero__title,
.axis-hero--slider.axis-hero--with-cover .axis-hero__actions {
	display: none;
}

/* Slider matches cover height exactly. Cover is 280px × 5/7 ≈ 392px tall; we pin
   the slider to the same size so it always shows even if the flex chain's computed
   height collapses to zero for any reason. */
.axis-hero--slider.axis-hero--with-cover .axis-hero__slider {
	flex: 0 0 auto;
	width: 100%;
	height: 392px;
	min-height: 392px;
	margin: 0;
}

/* Cancel the content column's padding/centering that can steal space */
.axis-hero--slider.axis-hero--with-cover .axis-hero__content {
	padding: 0 !important;
	justify-content: flex-start !important;
	text-align: left !important;
}

/* Slider without cover: 21:9 ultrawide cinematic format, centered */
.axis-hero--slider:not(.axis-hero--with-cover) .axis-hero__slider {
	width: 100%;
	max-width: 1600px;
	aspect-ratio: 21 / 9;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================================
   CINEMATIC SLIDER (.axis-cine) — custom SliderHome renderer in Axis theme
   ============================================================================ */
.axis-cine {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
	background: #0f172a;
	isolation: isolate;
}

.axis-cine .swiper-container {
	width: 100% !important;
	height: 100% !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
	overflow: hidden;
}

.axis-cine .swiper-wrapper {
	padding-bottom: 0 !important;
	align-items: stretch !important;
	height: 100% !important;
}

.axis-cine .swiper-slide {
	width: 100% !important;
	height: 100% !important;
	flex-shrink: 0 !important;
	display: block !important;
	position: relative !important;
	overflow: hidden;
}

.axis-cine__slide {
	position: relative;
	overflow: hidden;
}

/* Full-bleed image. The !important flags beat Axis's global `img { height: auto }` reset
   which is defined later in this stylesheet and would otherwise win on specificity tie. */
.axis-cine__img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	display: block !important;
	animation: axis-cine-kenburns 20s ease-in-out infinite alternate;
}

@keyframes axis-cine-kenburns {
	0% {
		transform: scale(1.00) translate(0, 0);
	}

	100% {
		transform: scale(1.08) translate(-1%, -1%);
	}
}

.axis-cine__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.5) 35%,
			rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
	z-index: 1;
}

.axis-cine__caption {
	position: absolute;
	left: 2rem;
	right: 2rem;
	bottom: 2rem;
	color: #fff;
	max-width: 60%;
	z-index: 3;
}

.axis-cine__caption-text {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.axis-cine__caption-text h1,
.axis-cine__caption-text h2,
.axis-cine__caption-text h3,
.axis-cine__caption-text h4 {
	margin: 0 0 0.5rem;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
	line-height: 1.2;
}

.axis-cine__caption-text p {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	opacity: 0.95;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.axis-cine__caption-text a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.axis-cine__btn {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	background: #fff;
	color: var(--axis-ink, #0f172a);
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	font-size: 0.85rem;
	transition: transform 0.2s, background 0.2s, color 0.2s;
	margin-top: 0.5rem;
}

.axis-cine__btn:hover {
	transform: translateY(-2px);
	background: var(--axis-primary-color, #4F46E5);
	color: #fff;
}

.axis-cine__counter {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	color: #fff;
	font-family: 'JetBrains Mono', 'Courier New', monospace;
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	background: rgba(0, 0, 0, 0.35);
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 10;
}

.axis-cine__copyright {
	position: absolute;
	right: 1rem;
	top: 1rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.65rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	z-index: 4;
}

.axis-cine .swiper-button-next,
.axis-cine .swiper-button-prev {
	width: 44px !important;
	height: 44px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border-radius: 50% !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff !important;
	transition: background 0.25s, transform 0.25s, border-color 0.25s;
	border: 1px solid rgba(255, 255, 255, 0.25);
	margin-top: -22px !important;
	z-index: 10;
	--swiper-theme-color: #fff;
	--swiper-navigation-color: #fff;
}

.axis-cine .swiper-button-next:hover,
.axis-cine .swiper-button-prev:hover {
	background: var(--axis-primary-color, #4F46E5) !important;
	transform: scale(1.08);
	border-color: var(--axis-primary-color, #4F46E5);
}

.axis-cine .swiper-button-next::after,
.axis-cine .swiper-button-prev::after {
	font-size: 16px !important;
	font-weight: 700;
}

.axis-cine .swiper-pagination {
	bottom: 1.5rem !important;
	z-index: 10;
	--swiper-theme-color: #fff;
	--swiper-pagination-color: #fff;
}

.axis-cine .swiper-pagination-bullet {
	background: #fff !important;
	opacity: 0.4 !important;
	width: 10px !important;
	height: 10px !important;
	transition: all 0.3s;
	margin: 0 4px !important;
}

.axis-cine .swiper-pagination-bullet-active {
	opacity: 1 !important;
	width: 28px !important;
	border-radius: 5px !important;
}

/* Hide SliderHome's native slider-text overlay if it somehow bleeds through */
.axis-cine .slider-text {
	display: none !important;
}

/* Mobile: stack cover + content */
@media (max-width: 768px) {
	.axis-hero__wrapper {
		flex-direction: column;
		gap: 1.5rem;
		align-items: center !important;
		/* override stretch from slider+cover rules */
	}

	/* Slider+cover wrapper uses CSS Grid on desktop. On mobile we must FORCE it
	   back to a single-column flex column or the cover & slider stay side by side
	   (the grid-template-columns rule on the desktop side ships !important). */
	.axis-hero--slider.axis-hero--with-cover .axis-hero__wrapper {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		gap: 1.5rem !important;
		align-items: center !important;
	}

	.axis-hero--slider.axis-hero--with-cover .axis-hero__cover {
		grid-column: auto !important;
		grid-row: auto !important;
		flex: none !important;
		width: 200px !important;
		height: 280px !important;
	}

	.axis-hero--slider.axis-hero--with-cover .axis-hero__content {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		height: auto !important;
	}

	.axis-hero__cover {
		width: 200px;
		/* aspect-ratio keeps it 200×280 */
	}

	/* On mobile we drop the fixed 16:9 aspect ratio and let the slider's height
	   follow the actual image height (no letterbox = no wasted vertical space). */
	.axis-hero--slider.axis-hero--with-cover .axis-hero__slider {
		aspect-ratio: auto !important;
		flex: none;
		width: 100%;
		height: auto !important;
		min-height: 0;
	}

	.axis-cine,
	.axis-cine .swiper-container,
	.axis-cine .swiper-wrapper,
	.axis-cine .swiper-slide {
		height: auto !important;
		min-height: 0 !important;
	}

	/* Image flows naturally — no absolute positioning, no aspect-cropping.
	   Ken Burns animation is disabled (incompatible with relative flow). */
	.axis-cine__img {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		max-height: 60vh;
		/* prevent extreme tall images from dominating viewport */
		object-fit: contain !important;
		animation: none !important;
		display: block;
	}

	/* Gradient overlay only sits at the bottom (over the image) — not over an
	   empty letterbox area like before. */
	.axis-cine__overlay {
		top: auto !important;
		height: 40% !important;
	}

	/* On mobile we drop the counter entirely — the dark pill eats vertical space
	   without adding real value on small screens (slide count is obvious from the
	   pagination dots, or irrelevant for single-slide cases). */
	.axis-cine__counter {
		display: none !important;
	}

	/* Caption stays inside the image area */
	.axis-cine__caption {
		bottom: 1rem !important;
	}

	/* Single-slide cinematic: hide navigation arrows (no swipe target) and tighten
	   the dark background to the image area (no chrome around it). */
	.axis-cine--single .swiper-button-prev,
	.axis-cine--single .swiper-button-next,
	.axis-cine--single .swiper-pagination {
		display: none !important;
	}

	/* Slider mode keeps the journal title and action buttons hidden on mobile too —
	   the slider provides its own headlines/CTAs, an extra block would be redundant. */
	.axis-cine__caption {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		max-width: 92%;
	}

	.axis-cine__caption-text h1,
	.axis-cine__caption-text h2,
	.axis-cine__caption-text h3 {
		font-size: 1.15rem;
	}

	.axis-hero--with-cover .axis-hero__content {
		text-align: center;
		padding: 0 1rem;
		/* Less padding on mobile */
	}

}

.axis-hero__title {
	font-size: var(--axis-font-3xl);
	margin-bottom: 1rem;
	text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
	/* Light mode: white glow */
}

/* Dark mode: black shadow for contrast */
body.dark-mode .axis-hero__title {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
	.axis-hero__title {
		font-size: var(--axis-font-2xl);
	}
}

/* Hero description wrapper - Glassmorphism container */
.axis-hero__description-wrapper {
	max-width: 60%;
	/* Limit to 60% width (20% padding each side) */
	margin: 0 auto 2rem auto;
	/* Center and spacing */

	/* Glassmorphism effect */
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

/* Description wrapper when cover exists (centered in right area) */
.axis-hero--with-cover .axis-hero__description-wrapper {
	max-width: 100%;
	margin: 0 auto 2rem auto;
	/* Center horizontally */
}

/* Mobile: always centered */
@media (max-width: 768px) {
	.axis-hero__description-wrapper {
		max-width: 90%;
	}

	.axis-hero--with-cover .axis-hero__description-wrapper {
		margin: 0 auto 2rem auto;
	}
}

/* Hero description text - Just text styles */
.axis-hero__description {
	font-size: var(--axis-font-lg);
	margin: 0;
	line-height: 1.6;
	text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
	/* Light mode: white glow */
	color: inherit;
}

/* Dark mode: black shadow for contrast */
body.dark-mode .axis-hero__description {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Read more link in hero section - minimal style */
.axis-hero__read-more {
	display: inline;
	/* Inline, not block */
	margin-left: 0.25rem;
	/* Less margin */
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-size: var(--axis-font-base);
	font-weight: 400;
	/* Normal weight, not bold */
	transition: var(--axis-transition-fast);
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	/* Subtle underline */
	padding-bottom: 2px;
	text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
	/* Light mode: white glow */
}

/* Dark mode: black shadow */
body.dark-mode .axis-hero__read-more {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* No dot before link anymore - minimal style */

.axis-hero__read-more:hover {
	color: rgba(255, 255, 255, 1);
	border-bottom-color: rgba(255, 255, 255, 0.8);
	/* Brighter underline */
}

.axis-hero__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Actions centered when cover exists (same as default) */
.axis-hero--with-cover .axis-hero__actions {
	justify-content: center;
	/* Keep centered */
}

/* Mobile: always centered */
@media (max-width: 768px) {
	.axis-hero__actions {
		justify-content: center;
	}
}

/* Continue in next part... */
/* ============================================================================
   SECTIONS & PAGE HEADERS
   ========================================================================== */
.axis-page-header {
	text-align: center;
	padding: calc(var(--axis-spacing-unit) * 2) 0;
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-page-description {
	font-size: var(--axis-font-lg);
	color: var(--axis-text-secondary);
	margin: 0;
	/* Remove auto margins, wrapper handles centering */
	line-height: 1.6;
}

/* Glassmorphism wrapper for page description */
.axis-page-description-wrapper {
	max-width: 60%;
	/* Limit to 60% width (20% padding each side) */
	margin: 0 auto 2rem auto;

	/* Glassmorphism effect - Light mode */
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* Page header actions (buttons) */
.axis-page-header__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

.axis-section {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
}

.axis-section__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: calc(var(--axis-spacing-unit));
}

@media (max-width: 768px) {
	.axis-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
}

.axis-section__title {
	font-size: var(--axis-font-2xl);
	margin: 0;
}

/* Issue articles - Table of Contents styling */
.axis-issue-articles .axis-section__title {
	text-align: center;
	display: inline-block;
	position: relative;
	padding: 0.75rem 2rem;
	background: transparent;
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-xl);
	font-weight: 600;
	margin: 0 auto 3rem;
	left: 50%;
	transform: translateX(-50%);
}

/* Decorative line under ToC title */
.axis-issue-articles .axis-section__title::after {
	content: '';
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 3px;
	background: linear-gradient(90deg,
			transparent 0%,
			var(--axis-primary) 50%,
			transparent 100%);
	opacity: 0.6;
}

.axis-homepage .axis-issue-articles {
	margin-top: 32px;
}

.axis-homepage .axis-issue-articles .axis-section__header {
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--axis-border);
	padding-bottom: 16px;
}

.axis-homepage .axis-issue-articles .axis-section__title {
	position: static;
	left: auto;
	display: block;
	padding: 0;
	margin: 0;
	transform: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	font-size: 1.5rem;
}

.axis-homepage .axis-issue-articles .axis-section__title::after {
	display: none;
}

.axis-homepage .axis-issue-heading {
	min-width: 0;
}

.axis-homepage .axis-issue-identification {
	margin-top: 4px;
	color: var(--axis-primary);
	font-size: 1.125rem;
	font-weight: 600;
}

@media (max-width: 768px) {
	.axis-homepage .axis-issue-articles .axis-section__header {
		align-items: flex-start;
	}
}

.axis-section__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--axis-font-family);
	font-weight: 500;
	color: var(--axis-primary);
}

.axis-section__link:hover {
	text-decoration: none;
	color: #291fd9;
}

.axis-section__link svg {
	width: 16px;
	height: 16px;
}

/* ============================================================================
   STATISTICS BAR
   ========================================================================== */
.axis-stats-bar {
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: calc(var(--axis-spacing-unit));
	margin-top: 40px;
	/* Space from header when hero is disabled */
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

/* ============================================================================
   EDITOR'S PICK — featured articles ribbon (between stats bar and tabs)
   4 styles: spotlight, carousel, bento, flip. Shared shell + per-style layout.
   ============================================================================ */
.axis-epick {
	margin: 0 0 2rem;
	padding: 1.5rem 0;
	position: relative;
}

.axis-epick__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.axis-epick__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--axis-primary-color, #4F46E5);
	background: rgba(79, 70, 229, 0.1);
	padding: 6px 14px;
	border-radius: 999px;
}

.axis-epick__title {
	font-size: 20px !important;
	font-weight: 800 !important;
	margin: 0 !important;
	letter-spacing: -0.3px;
	flex: 1;
	color: var(--axis-ink, #0F172A);
}

html.dark-mode .axis-epick__title {
	color: #F1F5F9;
}

.axis-epick__subtitle {
	font-size: 12px;
	color: var(--axis-muted, #64748B);
	font-weight: 500;
}

.axis-epick__section {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--axis-primary-color, #4F46E5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}

.axis-epick__meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: auto;
}

.axis-epick__pill {
	font-size: 10px;
	padding: 3px 9px;
	background: rgba(79, 70, 229, 0.08);
	color: var(--axis-primary-color, #4F46E5);
	border-radius: 4px;
	font-weight: 600;
}

.axis-epick__pill--pdf {
	background: var(--axis-primary-color, #4F46E5);
	color: #fff;
}

.axis-epick__date {
	margin-left: auto;
	font-size: 10.5px;
	color: var(--axis-muted, #64748B);
	font-weight: 600;
	font-family: 'JetBrains Mono', monospace;
}

/* --- SPOTLIGHT ----------------------------------------------------------- */
.axis-epick__layout--spotlight {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

.axis-epick__hero {
	position: relative;
	min-height: 380px;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, #4338CA 0%, #0F172A 100%);
	color: #fff;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
	transition: transform 0.35s;
}

.axis-epick__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(79, 70, 229, .4) 0%, rgba(16, 185, 129, .2) 100%),
		var(--epick-hero-img, linear-gradient(135deg, #4338CA 0%, #0F172A 100%));
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.axis-epick__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .4) 50%, transparent 100%);
	z-index: 1;
}

.axis-epick__hero>* {
	position: relative;
	z-index: 2;
}

.axis-epick__hero:hover {
	transform: translateY(-4px);
	color: #fff;
}

.axis-epick__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	align-self: flex-start;
	margin-bottom: 12px;
}

.axis-epick__hero .axis-epick__section {
	color: rgba(255, 255, 255, .8) !important;
	margin-bottom: 8px;
}

.axis-epick__hero-title {
	font-size: 26px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px;
	color: #fff !important;
	margin: 0 0 12px !important;
	max-width: 95%;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axis-epick__hero-authors {
	font-size: 13px;
	color: rgba(255, 255, 255, .85);
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axis-epick__hero .axis-epick__pill {
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(8px);
	color: #fff;
}

.axis-epick__hero .axis-epick__pill--pdf {
	background: var(--axis-primary-color, #4F46E5);
}

.axis-epick__side {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.axis-epick__side-card {
	background: var(--axis-surface, #fff);
	border: 1px solid var(--axis-border, #E2E8F0);
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	flex: 1;
	min-height: 110px;
	transition: all 0.25s;
}

.axis-epick__side-card:hover {
	border-color: var(--axis-primary-color, #4F46E5);
	transform: translateX(-3px);
	box-shadow: -6px 0 20px -8px rgba(79, 70, 229, 0.25);
}

.axis-epick__side-cover {
	width: 62px;
	height: 86px;
	border-radius: 8px;
	flex-shrink: 0;
	background:
		linear-gradient(135deg, rgba(79, 70, 229, .15), rgba(16, 185, 129, .15)),
		#F1F5F9;
	background-size: cover;
	background-position: center;
}

.axis-epick__side-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.axis-epick__side-body h4 {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.1px;
	margin: 0 0 6px !important;
	color: var(--axis-ink, #0F172A);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

html.dark-mode .axis-epick__side-body h4 {
	color: #F1F5F9;
}

.axis-epick__authors-mini {
	font-size: 11.5px;
	color: var(--axis-muted, #64748B);
	margin-bottom: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- CAROUSEL ------------------------------------------------------------ */
.axis-epick__layout--carousel {
	position: relative;
}

.axis-epick__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3rem) / 4);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.25rem 0 1rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.axis-epick__track::-webkit-scrollbar {
	display: none;
}

@media (max-width: 1100px) {
	.axis-epick__track {
		grid-auto-columns: calc((100% - 2rem) / 3);
	}
}

@media (max-width: 768px) {
	.axis-epick__track {
		grid-auto-columns: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 520px) {
	.axis-epick__track {
		grid-auto-columns: 85%;
	}
}

.axis-epick__card {
	background: var(--axis-surface, #fff);
	border: 1px solid var(--axis-border, #E2E8F0);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	scroll-snap-align: start;
	transition: all 0.3s;
}

.axis-epick__card:hover {
	border-color: var(--axis-primary-color, #4F46E5);
	transform: translateY(-5px);
	box-shadow: 0 12px 32px rgba(79, 70, 229, 0.14);
}

.axis-epick__card-cover {
	aspect-ratio: 3 / 2;
	background:
		linear-gradient(135deg, var(--axis-primary-color, #4F46E5), var(--axis-secondary, #10B981));
	background-size: cover;
	background-position: center;
	position: relative;
}

.axis-epick__card-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, .7);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.axis-epick__card-body {
	padding: 1.25rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.axis-epick__card-body h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px;
	margin: 0 0 8px !important;
	color: var(--axis-ink, #0F172A);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 58px;
}

html.dark-mode .axis-epick__card-body h4 {
	color: #F1F5F9;
}

.axis-epick__card-body .axis-epick__authors {
	font-size: 12px;
	color: var(--axis-muted, #64748B);
	margin-bottom: 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.axis-epick__nav {
	position: absolute;
	top: calc(50% + 0.5rem);
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--axis-surface, #fff);
	border: 1px solid var(--axis-border, #E2E8F0);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	color: var(--axis-ink, #0F172A);
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.25s;
	padding: 0;
}

.axis-epick__nav:hover {
	background: var(--axis-primary-color, #4F46E5);
	color: #fff;
	border-color: var(--axis-primary-color, #4F46E5);
	transform: translateY(-50%) scale(1.08);
}

.axis-epick__nav--prev {
	left: -20px;
}

.axis-epick__nav--next {
	right: -20px;
}

@media (max-width: 900px) {
	.axis-epick__nav--prev {
		left: 2px;
	}

	.axis-epick__nav--next {
		right: 2px;
	}
}

/* --- BENTO --------------------------------------------------------------- */
.axis-epick__layout--bento {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 190px 190px;
	gap: 1rem;
}

.axis-epick__bento-card {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: all 0.35s;
	min-height: 190px;
	background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
}

.axis-epick__bento-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
	color: #fff;
}

.axis-epick__bento-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--epick-hero-img, none);
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.axis-epick__bento-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 55%, transparent 100%);
	z-index: 1;
}

.axis-epick__bento-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem;
	z-index: 2;
}

.axis-epick__bento-body h4 {
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.2px;
	margin: 0 0 6px !important;
	color: #fff !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axis-epick__bento-body .axis-epick__section {
	color: rgba(255, 255, 255, .8) !important;
	margin-bottom: 6px;
}

.axis-epick__bento-body .axis-epick__authors {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.axis-epick__bento-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .2);
	backdrop-filter: blur(8px);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
}

.axis-epick__bento-card--featured {
	grid-row: 1 / 3;
	min-height: 0;
}

.axis-epick__bento-card--featured .axis-epick__bento-body {
	padding: 1.75rem;
}

.axis-epick__bento-card--featured .axis-epick__bento-body h4 {
	font-size: 24px !important;
	-webkit-line-clamp: 3;
}

.axis-epick__bento-card--featured .axis-epick__bento-body .axis-epick__authors {
	font-size: 13px;
}

/* Rotating fallback gradients when no cover image present */
.axis-epick__bento-card--c1::before {
	background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.axis-epick__bento-card--c2::before {
	background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.axis-epick__bento-card--c3::before {
	background-image: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.axis-epick__bento-card--c4::before {
	background-image: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.axis-epick__bento-card--featured::before {
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* --- FLIP CARDS ---------------------------------------------------------- */
.axis-epick__layout--flip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.axis-epick__flip-card {
	position: relative;
	height: 280px;
	perspective: 1000px;
	cursor: pointer;
}

.axis-epick__flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
	transform-style: preserve-3d;
}

.axis-epick__flip-card:hover .axis-epick__flip-inner,
.axis-epick__flip-card:focus-within .axis-epick__flip-inner {
	transform: rotateY(180deg);
}

.axis-epick__flip-front,
.axis-epick__flip-back {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border: 1px solid var(--axis-border, #E2E8F0);
	background: var(--axis-surface, #fff);
}

.axis-epick__flip-front {
	display: flex;
	flex-direction: column;
}

.axis-epick__flip-cover {
	height: 60%;
	position: relative;
	background: var(--epick-hero-img, linear-gradient(135deg, #667eea, #764ba2));
	background-size: cover;
	background-position: center;
}

.axis-epick__flip-ribbon {
	position: absolute;
	top: 14px;
	right: -26px;
	background: linear-gradient(135deg, var(--axis-primary-color, #4F46E5), var(--axis-secondary, #10B981));
	color: #fff;
	padding: 4px 32px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transform: rotate(45deg);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.axis-epick__flip-body {
	padding: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.axis-epick__flip-body h4 {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.1px;
	margin: 0 !important;
	color: var(--axis-ink, #0F172A);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

html.dark-mode .axis-epick__flip-body h4 {
	color: #F1F5F9;
}

.axis-epick__flip-back {
	background: linear-gradient(135deg, var(--axis-primary-color, #4F46E5) 0%, var(--axis-secondary, #10B981) 100%);
	color: #fff;
	transform: rotateY(180deg);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-epick__flip-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}

.axis-epick__flip-back h4 {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
	color: #fff !important;
}

.axis-epick__flip-authors {
	font-size: 11px;
	opacity: 0.9;
	margin-bottom: 6px;
}

.axis-epick__flip-abstract {
	font-size: 11.5px !important;
	line-height: 1.5 !important;
	flex: 1;
	opacity: 0.95;
	color: #fff;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axis-epick__flip-btn {
	font-size: 10.5px;
	font-weight: 700;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 6px;
	color: #fff !important;
	text-decoration: none;
	margin-top: auto;
	align-self: flex-start;
	transition: background 0.2s;
}

.axis-epick__flip-btn:hover {
	background: rgba(255, 255, 255, 0.35);
	color: #fff !important;
}

/* --- MONOGRAM FALLBACK (no cover image) ---------------------------------- */
/* When a featured article has no cover image uploaded, we show the first letter
   of its title as a large serif glyph in the background. Gives every card a
   distinctive identity even without custom artwork — and respects Turkish
   characters (İ, Ş, Ğ, Ü, Ö, Ç) because PHP builds the letter with mb_substr. */
.axis-epick__mono {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.18);
	pointer-events: none;
	user-select: none;
	z-index: 0;
	text-align: center;
	white-space: nowrap;
	font-feature-settings: 'lnum' 1;
	/* lining figures — cleaner for letters too */
}

.axis-epick__mono--hero {
	font-size: 260px;
}

.axis-epick__mono--bento-featured {
	font-size: 240px;
}

.axis-epick__mono--card {
	font-size: 140px;
}

.axis-epick__mono--bento {
	font-size: 130px;
}

.axis-epick__mono--side {
	font-size: 52px;
	color: rgba(255, 255, 255, 0.25);
}

.axis-epick__mono--flip {
	font-size: 120px;
}

/* When there's no image the gradient from the theme primary/secondary becomes
   richer (deeper left-side anchor) so the monogram has enough contrast */
.axis-epick__hero--no-image::before,
.axis-epick__bento-card--no-image::before {
	background:
		linear-gradient(135deg,
			var(--axis-primary-color, #4F46E5) 0%,
			var(--axis-primary-dark, #3730A3) 50%,
			var(--axis-secondary, #10B981) 100%) !important;
}

.axis-epick__card-cover--no-image {
	background: linear-gradient(135deg,
			var(--axis-primary-color, #4F46E5) 0%,
			var(--axis-secondary, #10B981) 100%);
	position: relative;
	overflow: hidden;
}

.axis-epick__side-cover--no-image {
	background: linear-gradient(135deg,
			var(--axis-primary-color, #4F46E5),
			var(--axis-secondary, #10B981));
	position: relative;
	overflow: hidden;
}

.axis-epick__flip-front--no-image .axis-epick__flip-cover {
	background: linear-gradient(135deg,
			var(--axis-primary-color, #4F46E5) 0%,
			var(--axis-secondary, #10B981) 100%);
}

/* --- DARK MODE OVERRIDES ------------------------------------------------- */
/* Cards use var(--axis-surface) which flips automatically via dark-mode.css
   (#FFFFFF → #1E293B). These rules add the text-color / border tweaks so
   titles, metadata and author names stay readable on dark backgrounds. */
html.dark-mode .axis-epick__card,
html.dark-mode .axis-epick__side-card {
	background: var(--axis-surface, #1E293B);
	border-color: var(--axis-border, #334155);
}

html.dark-mode .axis-epick__card-body h4,
html.dark-mode .axis-epick__side-body h4,
html.dark-mode .axis-epick__flip-body h4 {
	color: #F1F5F9;
}

html.dark-mode .axis-epick__authors,
html.dark-mode .axis-epick__authors-mini,
html.dark-mode .axis-epick__date {
	color: #94A3B8;
}

html.dark-mode .axis-epick__pill {
	background: rgba(148, 163, 184, 0.15);
	color: #CBD5E1;
}

html.dark-mode .axis-epick__pill--pdf {
	background: var(--axis-primary-color, #4F46E5);
	color: #fff;
}

html.dark-mode .axis-epick__flip-front {
	background: var(--axis-surface, #1E293B);
	border-color: var(--axis-border, #334155);
}

html.dark-mode .axis-epick__nav {
	background: var(--axis-surface, #1E293B);
	border-color: var(--axis-border, #334155);
	color: #F1F5F9;
}

html.dark-mode .axis-epick__nav:hover {
	background: var(--axis-primary-color, #4F46E5);
	color: #fff;
}

/* --- RESPONSIVE ---------------------------------------------------------- */
@media (max-width: 900px) {
	.axis-epick__layout--spotlight {
		grid-template-columns: 1fr;
	}

	.axis-epick__hero {
		min-height: 280px;
	}

	.axis-epick__hero-title {
		font-size: 22px !important;
	}

	.axis-epick__layout--bento {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, 170px);
	}

	.axis-epick__bento-card--featured {
		grid-row: 1 / 3;
		grid-column: 1 / 3;
	}

	.axis-epick__layout--flip {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.axis-epick__layout--bento {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(5, 160px);
	}

	.axis-epick__bento-card--featured {
		grid-row: 1;
		grid-column: 1;
	}

	.axis-epick__layout--flip {
		grid-template-columns: 1fr;
	}

	.axis-epick__flip-card {
		height: 240px;
	}
}

.axis-stats-bar__inner {
	display: flex;
	justify-content: space-between;
	/* Equal spacing */
	gap: 1.5rem;
	flex-wrap: wrap;
	/* Wrap on small screens */
}

@media (max-width: 768px) {
	.axis-stats-bar__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 2 columns on mobile */
		gap: 1rem;
	}
}

.axis-stat {
	display: flex;
	flex-direction: column;
	/* Stack value and label */
	text-align: center;
	flex: 1;
	/* Equal width */
	min-width: 120px;
}

.axis-stat__value {
	height: 3rem;
	/* FIXED height - not min! */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--axis-font-2xl);
	font-weight: 700;
	color: var(--axis-primary);
	font-family: var(--axis-font-family);
}

.axis-stat__license-icon {
	height: 40px;
	max-height: 40px;
	/* Strict limit */
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.axis-stat__label {
	height: 2.5rem;
	/* FIXED height for 1-2 lines */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	/* Allow wrapping for long labels */
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-top: 0.5rem;
	line-height: 1.2;
	padding: 0 0.25rem;
	/* Small padding */
}

/* ============================================================================
   ARTICLE CARDS & GRID
   ========================================================================== */
.axis-article-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Grid: 4 columns on desktop */
	gap: calc(var(--axis-spacing-unit));
}

.axis-article-grid--grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {

	.axis-article-grid,
	.axis-article-grid--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {

	.axis-article-grid,
	.axis-article-grid--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {

	.axis-article-grid,
	.axis-article-grid--grid {
		grid-template-columns: 1fr;
	}
}

/* List layout - horizontal cards */
.axis-article-grid--list {
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.axis-article-grid--list .axis-article-card {
	flex-direction: row;
	align-items: flex-start;
}

.axis-article-grid--list .axis-article-card__image {
	flex-shrink: 0;
	width: 280px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	/* Ensure cropping */
}

/* List layout - cover image should contain (not crop) */
.axis-article-grid--list .axis-article-card__cover {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Don't crop! */
	object-position: center;
	/* Center both axes */
}

.axis-article-grid--list .axis-article-card__content {
	flex: 1;
	padding: 1.5rem 2rem;
	display: flex !important;
	flex-direction: column !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.axis-article-grid--list .axis-article-card__title {
	font-size: var(--axis-font-xl);
	margin-bottom: 0.75rem;
}

.axis-article-grid--list .axis-article-card__abstract {
	font-size: var(--axis-font-md);
	line-height: var(--axis-leading-normal);
	margin-bottom: 1rem;
}

.axis-article-grid--list .axis-article-card__meta {
	margin-top: 1rem;
}

@media (max-width: 968px) {
	.axis-article-grid--list .axis-article-card {
		flex-direction: column;
	}

	.axis-article-grid--list .axis-article-card__image {
		width: 100%;
	}

	.axis-article-grid--list .axis-article-card__content {
		padding: 1.5rem;
	}
}

/* Magazine layout - masonry style */
.axis-article-grid--magazine {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Magazine: 3 columns on desktop */
	gap: 2rem;
	grid-auto-rows: auto;
}

@media (max-width: 900px) {
	.axis-article-grid--magazine {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.axis-article-grid--magazine {
		grid-template-columns: 1fr;
	}
}

.axis-article-grid--magazine .axis-article-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.axis-article-grid--magazine .axis-article-card__image {
	aspect-ratio: 4 / 3;
	/* Taller image for magazine feel */
	position: relative;
	overflow: hidden;
}

.axis-article-grid--magazine .axis-article-card__cover {
	transition: transform 0.5s ease;
}

.axis-article-grid--magazine .axis-article-card:hover .axis-article-card__cover {
	transform: scale(1.08);
}

.axis-article-grid--magazine .axis-article-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.axis-article-grid--magazine .axis-article-card__title {
	font-size: var(--axis-font-lg);
	line-height: var(--axis-leading-tight);
	margin-bottom: 0.75rem;
}

.axis-article-grid--magazine .axis-article-card__abstract {
	font-size: var(--axis-font-sm);
	line-height: var(--axis-leading-normal);
	color: var(--axis-text-secondary);
	margin-top: auto;
}

@media (max-width: 768px) {
	.axis-article-grid--magazine {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	.axis-article-grid {
		grid-template-columns: 1fr;
	}
}

.axis-article-card {
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
	transition: var(--axis-transition);
	display: flex;
	flex-direction: column;
}

.axis-article-card:hover {
	box-shadow: var(--axis-shadow-md);
	transform: translateY(-4px);
}

.axis-article-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--axis-surface);
	position: relative;
	/* For preview button positioning */
}

.axis-article-card__image a {
	display: block;
	height: 100%;
}

/* Placeholder for articles without cover image */
.axis-article-card__image--placeholder {
	background: linear-gradient(135deg,
			var(--axis-primary) 0%,
			rgba(44, 95, 141, 0.75) 100%);
	position: relative;
}

.axis-article-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	transition: all var(--axis-transition-normal);
}

.axis-article-card:hover .axis-article-placeholder {
	opacity: 1;
	transform: scale(1.05);
}

.axis-article-placeholder__icon {
	color: rgba(255, 255, 255, 0.95);
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Dark mode adjustments for placeholder */
html.dark-mode .axis-article-card__image--placeholder {
	background: linear-gradient(135deg,
			rgba(44, 95, 141, 0.3) 0%,
			rgba(44, 95, 141, 0.15) 100%);
}

html.dark-mode .axis-article-placeholder__icon {
	color: rgba(255, 255, 255, 0.7);
}

.axis-article-card__cover {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Changed from cover - shows full image without cropping */
	background: var(--axis-surface);
	/* Background for letterbox/pillarbox */
	transition: var(--axis-transition);
}

.axis-article-card:hover .axis-article-card__cover {
	transform: scale(1.05);
}

.axis-article-card__content {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.axis-article-card__section {
	font-size: var(--axis-font-xs);
	font-weight: 600;
	text-transform: none;
	color: var(--axis-secondary);
	margin-bottom: 0.5rem;
	letter-spacing: normal;
}

.axis-article-card__title {
	font-size: var(--axis-font-lg);
	font-weight: 600;
	line-height: var(--axis-leading-tight);
	margin-bottom: 0.75rem;
}

.axis-article-card__title a {
	color: var(--axis-text);
	text-decoration: none;
}

.axis-article-card__title a:hover {
	color: var(--axis-primary);
}

.axis-article-card__authors {
	font-size: var(--axis-font-base);
	font-weight: 500;
	color: var(--axis-text);
	margin-bottom: 0.75rem;
}

.axis-article-card__abstract {
	font-size: var(--axis-font-sm);
	line-height: var(--axis-leading-normal);
	color: var(--axis-text-secondary);
	margin-bottom: 1rem;
	flex: 1;
}

.axis-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--axis-font-xs);
	color: var(--axis-text-secondary);
	margin-bottom: 1rem;
}

.axis-article-card__meta svg {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-right: 4px;
}

.axis-article-card__galleys {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

.axis-article-card__galley-link {
	padding: 0.5rem 1rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-sm);
	font-weight: 500;
	color: var(--axis-text);
	transition: var(--axis-transition-fast);
}

.axis-article-card__galley-link:hover {
	background: var(--axis-primary);
	color: white;
	border-color: var(--axis-primary);
	text-decoration: none;
}

/* ============================================================================
   ISSUE SPOTLIGHT
   ========================================================================== */
.axis-issue-spotlight {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: calc(var(--axis-spacing-unit) * 2);
	padding: calc(var(--axis-spacing-unit) * 2);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
}

@media (max-width: 768px) {
	.axis-issue-spotlight {
		grid-template-columns: 1fr;
	}
}

.axis-issue-spotlight__cover-image {
	width: 100%;
	border-radius: var(--axis-radius-md);
	box-shadow: var(--axis-shadow-md);
}

.axis-issue-spotlight__title {
	font-size: var(--axis-font-xl);
	margin-bottom: 0.5rem;
}

.axis-issue-spotlight__title a {
	color: var(--axis-text);
	text-decoration: none;
}

.axis-issue-spotlight__title a:hover {
	color: var(--axis-primary);
}

.axis-issue-spotlight__date {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 1rem;
}

.axis-issue-spotlight__description {
	margin-bottom: 1.5rem;
	line-height: 1.7;
}

/* ============================================================================
   ARTICLE DETAIL
   ========================================================================== */
.axis-article-detail {
	max-width: 800px;
	margin: 0 auto;
}

.axis-article-detail__header {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-article-detail__section {
	font-size: var(--axis-font-sm);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--axis-secondary);
	margin-bottom: 1rem;
	letter-spacing: 0.05em;
}

.axis-article-detail__title {
	font-size: var(--axis-font-3xl);
	line-height: 1.2;
	margin-bottom: 1rem;
}

@media (max-width: 768px) {
	.axis-article-detail__title {
		font-size: var(--axis-font-2xl);
	}
}

.axis-article-detail__subtitle {
	font-size: var(--axis-font-xl);
	font-weight: 400;
	color: var(--axis-text-secondary);
	margin-bottom: 2rem;
}

.axis-article-detail__authors {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border-radius: var(--axis-radius-lg);
}

.axis-author-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.axis-author {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.axis-author__name {
	font-weight: 600;
	font-size: var(--axis-font-lg);
	color: var(--axis-text);
}

.axis-author__affiliation {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
}

.axis-author__orcid {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	text-decoration: none;
}

.axis-author__orcid:hover {
	color: #A6CE39;
}

.axis-author__orcid svg {
	width: 16px;
	height: 16px;
}

.axis-article-detail__meta {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border-radius: var(--axis-radius-lg);
}

.axis-meta-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.axis-meta-item {
	display: flex;
	gap: 0.5rem;
	font-size: var(--axis-font-sm);
}

.axis-meta-item--doi {
	font-weight: 500;
}

.axis-meta-item__label {
	font-weight: 600;
	color: var(--axis-text-secondary);
	min-width: 120px;
}

.axis-meta-item__value {
	color: var(--axis-text);
}

.axis-article-detail__abstract,
.axis-article-detail__keywords,
.axis-article-detail__galleys,
.axis-article-detail__share,
.axis-article-detail__references,
.axis-article-detail__citation {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-article-detail__section-title {
	font-size: var(--axis-font-xl);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--axis-border);
}

.axis-article-detail__abstract-content {
	font-size: var(--axis-font-md);
	line-height: var(--axis-leading-relaxed);
}

.axis-keyword-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-keyword {
	padding: 0.5rem 1rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-sm);
	color: var(--axis-text);
}

.axis-galley-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.axis-galley-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--axis-primary);
	color: white;
	border-radius: var(--axis-radius-md);
	font-weight: 500;
	transition: var(--axis-transition-fast);
}

.axis-galley-button:hover {
	background: #291fd9;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--axis-shadow-md);
}

.axis-galley-button svg {
	width: 20px;
	height: 20px;
}

/* Supplementary Files Section */
.axis-supplementary-section {
	margin-top: 1.5rem;
}

.axis-supplementary-divider {
	height: 1px;
	background: var(--axis-border-color);
	margin-bottom: 1rem;
}

.axis-supplementary-title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--axis-text-secondary);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.axis-galley-list--supplementary {
	gap: 0.5rem;
}

.axis-galley-button--supplementary {
	background: var(--axis-background-alt);
	border: 1px dashed var(--axis-border-color);
	font-size: 0.9rem;
}

.axis-galley-button--supplementary:hover {
	background: var(--axis-background);
	border-style: solid;
	border-color: var(--axis-primary);
}

/* Social sharing */
.axis-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.axis-share-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	transition: var(--axis-transition-fast);
}

.axis-share-button--twitter {
	background: #1DA1F2;
	color: white;
}

.axis-share-button--twitter:hover {
	background: #0c85d0;
}

.axis-share-button--facebook {
	background: #1877F2;
	color: white;
}

.axis-share-button--facebook:hover {
	background: #0b5fcc;
}

.axis-share-button--linkedin {
	background: #0A66C2;
	color: white;
}

.axis-share-button--linkedin:hover {
	background: #084c91;
}

.axis-share-button--email {
	background: var(--axis-surface);
	color: var(--axis-text);
	border: 1px solid var(--axis-border);
}

.axis-share-button--email:hover {
	background: var(--axis-text);
	color: white;
}

.axis-reference-list {
	list-style: decimal;
	padding-left: 1.5rem;
}

.axis-reference-list li {
	margin-bottom: 0.75rem;
	line-height: 1.6;
}

.axis-citation-box {
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border-left: 4px solid var(--axis-primary);
	border-radius: var(--axis-radius-md);
}

.axis-citation-text {
	font-family: var(--axis-font-mono);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--axis-text);
}

/* Continue... */
/* ============================================================================
   SIDEBAR
   ========================================================================== */
.axis-sidebar {
	display: flex;
	flex-direction: column;
	gap: calc(var(--axis-spacing-unit));
}

.axis-sidebar__block {
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
}

.axis-sidebar__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	color: var(--axis-text);
}

.axis-sidebar__search-input {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: 0.9375rem;
}

.axis-sidebar__search-input:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.axis-search-group {
	display: flex;
	gap: 0.5rem;
}

.axis-sidebar__search-button {
	padding: 0.75rem;
	background: var(--axis-primary);
	color: white;
	border: none;
	border-radius: var(--axis-radius-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--axis-transition-fast);
}

.axis-sidebar__search-button:hover {
	background: #291fd9;
}

.axis-sidebar__issue-link {
	display: block;
	text-decoration: none;
	transition: var(--axis-transition);
}

.axis-sidebar__issue-link:hover {
	opacity: 0.8;
}

.axis-sidebar__issue-cover {
	width: 100%;
	border-radius: var(--axis-radius-md);
	margin-bottom: 1rem;
	box-shadow: var(--axis-shadow-sm);
}

.axis-sidebar__issue-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-sidebar__issue-title {
	font-weight: 600;
	color: var(--axis-text);
}

.axis-sidebar__issue-date {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
}

.axis-sidebar__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-sidebar__list-item {
	margin-bottom: 0.75rem;
}

.axis-sidebar__list-item:last-child {
	margin-bottom: 0;
}

.axis-sidebar__announcement-link,
.axis-sidebar__section-link {
	display: block;
	color: var(--axis-text);
	text-decoration: none;
	transition: var(--axis-transition-fast);
}

.axis-sidebar__announcement-link:hover,
.axis-sidebar__section-link:hover {
	color: var(--axis-primary);
}

.axis-sidebar__announcement-title {
	font-weight: 500;
	display: block;
	margin-bottom: 0.25rem;
}

.axis-sidebar__announcement-date {
	font-size: var(--axis-font-xs);
	color: var(--axis-text-secondary);
}

.axis-sidebar__view-all {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-weight: 500;
	color: var(--axis-primary);
}

.axis-sidebar__view-all svg {
	width: 16px;
	height: 16px;
}

.axis-sidebar__view-all:hover {
	text-decoration: none;
}

.axis-sidebar__stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--axis-border);
}

.axis-sidebar__stat-item:last-child {
	border-bottom: none;
}

.axis-sidebar__stat-label {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
}

.axis-sidebar__stat-value {
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--axis-primary);
}

/* ============================================================================
   ISSUE PAGE
   ========================================================================== */
.axis-issue-header {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-issue-header__wrapper {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: calc(var(--axis-spacing-unit) * 2);
}

/* No cover - single column */
.axis-issue-header__wrapper--no-cover {
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
	/* Center the wrapper */
}

/* No cover - centered title and date */
.axis-issue-header__wrapper--no-cover .axis-issue-header__title {
	text-align: center;
}

.axis-issue-header__wrapper--no-cover .axis-issue-header__date {
	justify-content: center;
}

/* No cover - justified description */
.axis-issue-header__wrapper--no-cover .axis-issue-header__description {
	text-align: justify;
}

/* Galleys - always centered below description */
.axis-issue-header__galleys {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/* With cover - galleys centered in right column */
.axis-issue-header__wrapper:not(.axis-issue-header__wrapper--no-cover) .axis-issue-header__galleys {
	justify-content: center;
}

/* Issue Files section */
.axis-issue-files {
	margin-top: 2rem;
	text-align: center;
}

.axis-issue-files__title {
	display: inline-block;
	position: relative;
	padding: 0.5rem 1.5rem;
	background: transparent;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-base);
	font-weight: 600;
	margin-bottom: 2rem;
}

/* Decorative line under Issue Files title */
.axis-issue-files__title::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 2px;
	background: linear-gradient(90deg,
			transparent 0%,
			var(--axis-primary) 50%,
			transparent 100%);
	opacity: 0.6;
}

.axis-issue-files__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/* Dark mode */
html.dark-mode .axis-issue-files__title {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 768px) {
	.axis-issue-header__wrapper {
		grid-template-columns: 1fr;
	}
}

.axis-issue-header__cover-image {
	width: 100%;
	border-radius: var(--axis-radius-lg);
	box-shadow: var(--axis-shadow-md);
}

.axis-issue-header__title {
	font-size: var(--axis-font-3xl);
	margin-bottom: 1rem;
}

.axis-issue-header__date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--axis-font-base);
	color: var(--axis-text-secondary);
	margin-bottom: 1.5rem;
}

.axis-issue-header__date svg {
	width: 18px;
	height: 18px;
}

.axis-issue-header__description {
	line-height: 1.7;
}

/* Inline galleys (when no cover) */
.axis-issue-header__galleys {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.axis-issue-galleys__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.axis-article-list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--axis-spacing-unit));
}

.axis-article-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: calc(var(--axis-spacing-unit));
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	transition: var(--axis-transition);
}

.axis-article-item:hover {
	box-shadow: var(--axis-shadow-md);
}

@media (max-width: 768px) {
	.axis-article-item {
		grid-template-columns: 1fr;
	}
}

.axis-article-item__title {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

.axis-article-item__title a {
	color: var(--axis-text);
	text-decoration: none;
}

.axis-article-item__title a:hover {
	color: var(--axis-primary);
}

.axis-article-item__authors {
	font-size: 0.9375rem;
	color: var(--axis-text-secondary);
	margin-bottom: 0.75rem;
}

.axis-article-item__abstract {
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.axis-article-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
}

.axis-article-item__galleys {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
}

.axis-galley-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--axis-primary);
	color: white;
	border-radius: var(--axis-radius-md);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: var(--axis-transition-fast);
	white-space: nowrap;
}

.axis-galley-link:hover {
	background: #291fd9;
	transform: translateY(-2px);
}

.axis-galley-link--small {
	padding: 0.375rem 0.75rem;
	font-size: 0.8125rem;
}

.axis-galley-link svg {
	width: 16px;
	height: 16px;
}

/* ============================================================================
   ARCHIVE PAGE
   ========================================================================== */
.axis-archive-year {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
}

.axis-archive-year__toggle {
	display: none;
}

.axis-archive-year__toggle:checked~.axis-archive-year__content {
	max-height: none;
	padding: calc(var(--axis-spacing-unit));
}

.axis-archive-year__toggle:checked~.axis-archive-year__header .axis-archive-year__icon {
	transform: rotate(180deg);
}

.axis-archive-year__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	cursor: pointer;
	user-select: none;
	transition: var(--axis-transition-fast);
}

.axis-archive-year__header:hover {
	background: #f1f5f9;
}

.axis-archive-year__title {
	font-size: var(--axis-font-xl);
	margin: 0;
}

.axis-archive-year__count {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
}

.axis-archive-year__icon {
	width: 20px;
	height: 20px;
	transition: var(--axis-transition);
}

.axis-archive-year__content {
	max-height: 0;
	overflow: hidden;
	padding: 0;
	transition: padding 0.3s ease;
}

.axis-issue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: calc(var(--axis-spacing-unit));
}

@media (max-width: 768px) {
	.axis-issue-grid {
		grid-template-columns: 1fr;
	}
}

.axis-issue-card {
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
	transition: var(--axis-transition);
}

.axis-issue-card:hover {
	box-shadow: var(--axis-shadow-md);
	transform: translateY(-4px);
}

.axis-issue-card__cover {
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.axis-issue-card__cover a {
	display: block;
	height: 100%;
}

.axis-issue-card__cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--axis-transition);
}

.axis-issue-card:hover .axis-issue-card__cover-image {
	transform: scale(1.05);
}

.axis-issue-card__content {
	padding: 1.5rem;
}

.axis-issue-card__title {
	font-size: var(--axis-font-lg);
	margin-bottom: 0.5rem;
}

.axis-issue-card__title a {
	color: var(--axis-text);
	text-decoration: none;
}

.axis-issue-card__title a:hover {
	color: var(--axis-primary);
}

.axis-issue-card__date {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 1rem;
}

.axis-issue-card__description {
	font-size: var(--axis-font-sm);
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* ============================================================================
   MOST VIEWED PAGE
   ========================================================================== */
.axis-most-viewed-list {
	display: flex;
	flex-direction: column;
	gap: calc(var(--axis-spacing-unit));
}

.axis-most-viewed-item {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: calc(var(--axis-spacing-unit));
	padding: calc(var(--axis-spacing-unit));
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	transition: var(--axis-transition);
}

.axis-most-viewed-item:hover {
	box-shadow: var(--axis-shadow-md);
}

@media (max-width: 768px) {
	.axis-most-viewed-item {
		grid-template-columns: 1fr;
	}
}

.axis-most-viewed-item__rank {
	display: flex;
	align-items: center;
	justify-content: center;
}

.axis-rank-number {
	font-size: 2rem;
	font-weight: 700;
	color: var(--axis-primary);
	font-family: var(--axis-font-family);
}

.axis-most-viewed-item__title {
	font-size: var(--axis-font-lg);
	margin-bottom: 0.5rem;
}

.axis-most-viewed-item__title a {
	color: var(--axis-text);
	text-decoration: none;
}

.axis-most-viewed-item__title a:hover {
	color: var(--axis-primary);
}

.axis-most-viewed-item__authors {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 0.5rem;
}

.axis-most-viewed-item__abstract {
	font-size: var(--axis-font-sm);
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.axis-most-viewed-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 0.75rem;
}

.axis-most-viewed-item__stats {
	display: flex;
	align-items: center;
	justify-content: center;
}

.axis-view-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--axis-background);
	border: 2px solid var(--axis-primary);
	border-radius: var(--axis-radius-md);
}

.axis-view-count svg {
	width: 24px;
	height: 24px;
	color: var(--axis-primary);
}

.axis-view-count__number {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--axis-primary);
	font-family: var(--axis-font-family);
}

.axis-view-count__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--axis-text-secondary);
	letter-spacing: 0.05em;
}

/* ============================================================================
   EMPTY STATES
   ========================================================================== */
.axis-empty-state {
	text-align: center;
	padding: calc(var(--axis-spacing-unit) * 4) calc(var(--axis-spacing-unit) * 2);
}

.axis-empty-state__content {
	max-width: 400px;
	margin: 0 auto;
}

.axis-empty-state__icon {
	color: var(--axis-text-secondary);
	opacity: 0.5;
	margin-bottom: 1.5rem;
}

.axis-empty-state__title {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
	color: var(--axis-text);
}

.axis-empty-state__description {
	color: var(--axis-text-secondary);
}

/* ============================================================================
   RICH CONTENT (for admin-edited content)
   ========================================================================== */
.axis-rich-content,
.axis-content-block {
	line-height: 1.7;
}

.axis-rich-content h1,
.axis-content-block h1,
.axis-rich-content h2,
.axis-content-block h2,
.axis-rich-content h3,
.axis-content-block h3,
.axis-rich-content h4,
.axis-content-block h4,
.axis-rich-content h5,
.axis-content-block h5,
.axis-rich-content h6,
.axis-content-block h6 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.axis-rich-content p,
.axis-content-block p {
	margin-bottom: 1rem;
}

.axis-rich-content ul,
.axis-content-block ul,
.axis-rich-content ol,
.axis-content-block ol {
	margin-bottom: 1rem;
	padding-left: 2rem;
}

.axis-rich-content ul li,
.axis-content-block ul li,
.axis-rich-content ol li,
.axis-content-block ol li {
	margin-bottom: 0.5rem;
}

.axis-rich-content table,
.axis-content-block table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	border: 1px solid var(--axis-border);
}

.axis-rich-content table th,
.axis-content-block table th,
.axis-rich-content table td,
.axis-content-block table td {
	padding: 0.75rem;
	border: 1px solid var(--axis-border);
	text-align: left;
}

.axis-rich-content table th,
.axis-content-block table th {
	background: var(--axis-surface);
	font-weight: 600;
}

.axis-rich-content iframe,
.axis-content-block iframe {
	max-width: 100%;
	margin-bottom: 1.5rem;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
}

.axis-rich-content img,
.axis-content-block img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1.5rem;
	border-radius: var(--axis-radius-md);
}

.axis-rich-content blockquote,
.axis-content-block blockquote {
	border-left: 4px solid var(--axis-primary);
	padding-left: 1.5rem;
	margin: 1.5rem 0;
	color: var(--axis-text-secondary);
	font-style: italic;
}

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

.axis-skip-link:focus {
	top: 0;
}

/* ============================================================================
   RESPONSIVE HELPERS
   ========================================================================== */
@media print {

	.axis-header,
	.axis-footer,
	.axis-sidebar,
	.axis-share-buttons,
	.axis-back-to-top {
		display: none;
	}

	.axis-main-content {
		width: 100%;
		max-width: none;
	}
}

/* ============================================================================
   DROPDOWN MENU FIX
   ========================================================================== */

/* Hide dropdown menus by default */
.axis-nav-list ul {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	box-shadow: var(--axis-shadow-xl);
	min-width: 220px;
	padding: 0.5rem;
	z-index: 1000;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

/* Show dropdown on hover with animation */
.axis-nav-list li:hover>ul {
	display: block;
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

/* Style dropdown items */
.axis-nav-list ul li {
	padding: 0;
	margin: 0.25rem 0;
}

.axis-nav-list ul a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--axis-text);
	white-space: nowrap;
	border-radius: var(--axis-radius-sm);
	font-size: 0.9rem;
}

.axis-nav-list ul a:hover {
	background: var(--axis-surface);
	color: var(--axis-primary);
	text-decoration: none;
	transform: translateX(4px);
	box-shadow: var(--axis-shadow-sm);
}

/* Parent item indicator - modern rotating arrow */
.axis-nav-list>li>a {
	position: relative;
}

.axis-nav-list>li:has(ul)>a::after {
	content: '▼';
	font-size: 0.65em;
	margin-left: 0.5rem;
	opacity: 0.6;
	display: inline-block;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Rotate arrow on hover */
.axis-nav-list>li:has(ul):hover>a::after {
	transform: rotate(-180deg);
	opacity: 1;
}

/* Mobile menu dropdowns */
@media (max-width: 768px) {
	.axis-nav-list ul {
		position: static;
		display: none;
		box-shadow: none;
		border: none;
		padding-left: 1rem;
		background: transparent;
	}

	.axis-nav-list li:hover>ul {
		display: none;
	}

	/* Click to toggle on mobile - requires checkbox hack or JS */
	.axis-nav-list li.has-children>a {
		pointer-events: none;
	}

	.axis-nav-list li.has-children ul {
		display: block;
		opacity: 0.8;
	}
}

/* ============================================================================
   DROPDOWN MENU FIX - Hide submenus by default
   ========================================================================== */

.axis-nav-list ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	box-shadow: var(--axis-shadow-lg);
	min-width: 200px;
	padding: 0.5rem 0;
	z-index: 1000;
	list-style: none;
	margin: 0;
}

.axis-nav-list>li {
	position: relative;
}

.axis-nav-list li:hover>ul {
	display: block;
}

.axis-nav-list ul li {
	padding: 0;
	margin: 0;
}

.axis-nav-list ul a {
	display: block;
	padding: 0.75rem 1.5rem;
	color: var(--axis-text);
	white-space: nowrap;
	font-size: 0.9375rem;
}

.axis-nav-list ul a:hover {
	background: var(--axis-surface);
	color: var(--axis-primary);
	text-decoration: none;
}

/* Dropdown indicator */
.axis-nav-list>li:has(ul)>a::after {
	content: '▾';
	font-size: 0.8em;
	margin-left: 0.5rem;
	opacity: 0.6;
}

@media (max-width: 768px) {
	.axis-nav-list ul {
		position: static;
		box-shadow: none;
		border: none;
		padding-left: 1.5rem;
		background: transparent;
	}
}


/* ============================================================================
   USER MENU STYLING
   ========================================================================== */

.axis-user-menu {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* User buttons (not logged in) */
.axis-user-buttons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.axis-btn--text {
	background: transparent;
	border: none;
	color: var(--axis-text);
	padding: 0.5rem 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.axis-btn--text:hover {
	color: var(--axis-primary);
	background: transparent;
}

/* User dropdown (logged in) */
.axis-user-dropdown {
	position: relative;
}

.axis-user-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	color: var(--axis-text);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	font-size: 0.9375rem;
}

.axis-user-button:hover {
	border-color: var(--axis-primary);
	background: var(--axis-background);
}

.axis-user-name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.axis-user-dropdown-icon {
	transition: transform var(--axis-transition-normal);
}

.axis-user-button[aria-expanded="true"] .axis-user-dropdown-icon {
	transform: rotate(180deg);
}

/* User menu dropdown */
.axis-user-menu-dropdown {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 200px;
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	box-shadow: var(--axis-shadow-lg);
	padding: 0.5rem 0;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all var(--axis-transition-normal);
}

.axis-user-menu-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.axis-user-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.axis-user-menu-list li {
	margin: 0;
	padding: 0;
}

.axis-user-menu-list a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--axis-text);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	font-size: 0.9375rem;
}

.axis-user-menu-list a:hover {
	background: var(--axis-surface);
	color: var(--axis-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.axis-user-name {
		display: none;
	}

	.axis-user-button {
		padding: 0.5rem;
	}

	.axis-user-buttons {
		gap: 0.5rem;
	}

	.axis-btn--text span {
		display: none;
	}

	.axis-user-menu-dropdown {
		right: auto;
		left: 0;
	}
}

/* ============================================================================
   NAVIGATION WITH USER MENU - Redesigned
   ========================================================================== */

/* Navigation wrapper - flexbox for left/right split */
.axis-nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.axis-nav-primary {
	flex: 1;
}

.axis-nav-user {
	flex-shrink: 0;
}

/* User menu in navigation (not logged in) */
.axis-nav-user-list {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.axis-nav-user-list li {
	margin: 0;
	padding: 0;
}

/* Equal-sized buttons for login/register */
.axis-nav-user-list .axis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 100px;
	/* Equal minimum width */
	white-space: nowrap;
}

/* Icon inside button */
.axis-nav-user-list .axis-btn svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.axis-nav-user-list .axis-nav-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	color: var(--axis-text);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-nav-user-list .axis-nav-link:hover {
	color: var(--axis-primary);
}


/* User dropdown in navigation (logged in) */
.axis-user-nav-dropdown {
	position: relative;
}

.axis-user-nav-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: transparent;
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	color: var(--axis-text);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	font-size: 0.9375rem;
	font-weight: 500;
}

.axis-user-nav-button:hover {
	border-color: var(--axis-primary);
	color: var(--axis-primary);
	background: var(--axis-surface);
}

.axis-user-nav-name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.axis-user-nav-arrow {
	transition: transform var(--axis-transition-normal);
}

.axis-user-nav-button[aria-expanded="true"] .axis-user-nav-arrow {
	transform: rotate(180deg);
}

/* User dropdown menu */
.axis-user-nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	min-width: 220px;
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	box-shadow: var(--axis-shadow-lg);
	padding: 0.5rem 0;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	display: none;
	transform: translateY(-10px);
	transition: all var(--axis-transition-normal);
}

.axis-user-nav-dropdown-menu.is-open {
	opacity: 1;
	visibility: visible;
	display: block;
	transform: translateY(0);
}

.axis-user-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.axis-user-nav-list li {
	margin: 0;
	padding: 0;
}

.axis-user-nav-list a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--axis-text);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	font-size: 0.9375rem;
}

.axis-user-nav-list a:hover {
	background: var(--axis-surface);
	color: var(--axis-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.axis-nav-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.axis-nav-user {
		border-top: 1px solid var(--axis-border);
		padding-top: 1rem;
	}

	.axis-nav-user-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.axis-nav-user-list li {
		width: 100%;
	}

	.axis-nav-user-list .axis-btn {
		width: 100%;
		text-align: center;
	}

	.axis-user-nav-dropdown-menu {
		position: static;
		box-shadow: none;
		border: none;
		background: transparent;
		padding-left: 1rem;
	}
}

/* ============================================================================
   LANGUAGE SELECTOR - Improved Design
   ========================================================================== */

.axis-language-toggle {
	position: relative;
}

.axis-language-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0 2.5rem 0 1rem;
	/* Remove vertical padding */
	height: 40px;
	/* Match ALL header elements - 40px! */
	background: var(--axis-surface);
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	color: var(--axis-text);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	min-width: 120px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	/* Include border in height */
}

.axis-language-select:hover {
	border-color: var(--axis-primary);
	background-color: var(--axis-background);
}

.axis-language-select:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Dark mode adjustments for language selector */
.dark-mode .axis-language-select {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23aaa" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
}

/* Remove default select styles */
.axis-language-select option {
	background: var(--axis-background);
	color: var(--axis-text);
	padding: 0.5rem;
}

/* Mobile */
@media (max-width: 768px) {
	.axis-language-select {
		min-width: 100px;
		font-size: 0.875rem;
		padding: 0.5rem 2rem 0.5rem 0.75rem;
	}
}

/* ============================================================================
   HEADER ACTIONS - Updated (user menu moved to navigation)
   ========================================================================== */

.axis-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Ensure dark mode toggle is visible */
.axis-icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--axis-surface);
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	color: var(--axis-text);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
}

.axis-icon-button:hover {
	border-color: var(--axis-primary);
	background: var(--axis-background);
	color: var(--axis-primary);
}

.axis-icon-sun,
.axis-icon-moon {
	width: 20px;
	height: 20px;
}

.axis-icon-sun {
	display: block;
}

.axis-icon-moon {
	display: none;
}

.dark-mode .axis-icon-sun {
	display: none;
}

.dark-mode .axis-icon-moon {
	display: block;
}

@media (max-width: 768px) {
	.axis-header__actions {
		gap: 0.5rem;
	}

	.axis-icon-button {
		width: 36px;
		height: 36px;
	}
}

/* ========================================================================
   Social Media Icons (Rich Header Style)
   ======================================================================== */

.axis-social-media {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Reduced from 0.75rem to save space */
}

/* Hide social media in minimal and standard header styles */
.axis-header--minimal .axis-social-media,
.axis-header--standard .axis-social-media {
	display: none !important;
}

/* Show social media only in rich header style */
.axis-header--rich .axis-social-media {
	display: flex;
}

.axis-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	/* Match ALL header elements - 40px! */
	height: 40px;
	/* Match ALL header elements - 40px! */
	border-radius: var(--axis-radius-md);
	background-color: transparent;
	color: var(--axis-text-secondary);
	transition: all var(--axis-transition);
	text-decoration: none;
	box-sizing: border-box;
}

.axis-social-link:hover {
	background-color: var(--axis-surface);
	color: var(--axis-primary);
	transform: translateY(-2px);
}

.axis-social-link:focus {
	outline: 2px solid var(--axis-primary);
	outline-offset: 2px;
}

.axis-social-link svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Mobile: Hide social media on small screens for minimal header */
@media (max-width: 767px) {
	.axis-social-media {
		display: none;
	}
}

/* Tablet and up: Show social media */
@media (min-width: 768px) {
	.axis-social-media {
		display: flex;
	}
}

/* Dark mode adjustments */
html.dark-mode .axis-social-link {
	color: var(--axis-text-secondary);
}

html.dark-mode .axis-social-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--axis-primary);
}


/* Disabled social media links (when URL is just #) */
.axis-social-link--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.axis-social-link--disabled:hover {
	background-color: transparent;
	transform: none;
	color: var(--axis-text-secondary);
}

html.dark-mode .axis-social-link--disabled:hover {
	background-color: transparent;
}


/* Header responsive adjustments */
@media (max-width: 1024px) {
	.axis-header__brand {
		max-width: 40%;
		/* Slightly narrower on tablets */
		min-width: 180px;
	}

	.axis-brand-text__name {
		font-size: 1.25rem;
		/* Smaller font */
	}

	.axis-header__actions {
		gap: 0.75rem;
		/* Reduce gap between actions */
	}
}

@media (max-width: 768px) {

	/* MOBILE: Two-row stacked header */
	.axis-header__inner {
		flex-direction: column;
		align-items: stretch;
		gap: calc(var(--axis-spacing-unit) / 2);
		padding: calc(var(--axis-spacing-unit) / 2) 0;
	}

	/* Row 1: Logo/Journal Name - Full Width */
	.axis-header__brand {
		max-width: 100%;
		min-width: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		padding-bottom: calc(var(--axis-spacing-unit) / 2);
		border-bottom: 1px solid var(--axis-border);
	}

	.axis-brand-text__name {
		font-size: 1.25rem;
		text-align: center;
	}

	/* Row 2: Actions toolbar - centered with hamburger on right */
	.axis-header__actions {
		gap: 0.75rem;
		flex: 0;
		justify-content: center;
		/* Center the actions */
		position: relative;
		padding-right: 56px;
		/* Reserve space for hamburger (40px + gap) */
		padding-left: 0;
		/* Will be set if social media exists */
	}

	/* If social media exists, add left padding for balance */
	.axis-header__actions:has(.axis-social-media) {
		padding-left: 0;
		/* Social media provides its own space */
	}

	/* Hamburger stays on right */
	.axis-mobile-menu-toggle {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 10;
		/* Above other elements */
	}

	/* Social media group on left */
	.axis-social-media {
		display: flex;
		gap: 0.5rem;
		margin-right: auto;
		/* Push to left */
	}

	/* Tools group in center */
	.axis-mobile-search-link,
	#axis-dark-mode-toggle,
	.axis-language-toggle {
		/* Centered by default */
	}

	/* Hide desktop search box on mobile */
	.axis-header__search {
		display: none !important;
	}
}


/* ========================================================================
   Glassmorphism Responsive Adjustments
   ======================================================================== */

@media (max-width: 1024px) {

	.axis-hero__description-wrapper,
	.axis-page-description-wrapper {
		max-width: 70%;
		/* Slightly wider on tablets */
		padding: 1.5rem;
	}

	.axis-hero__description {
		font-size: var(--axis-font-lg);
	}
}

@media (max-width: 768px) {

	.axis-hero__description-wrapper,
	.axis-page-description-wrapper {
		max-width: 85%;
		/* Wider on mobile */
		padding: 1.25rem;
	}

	.axis-hero__description {
		font-size: var(--axis-font-base);
	}
}

@media (max-width: 480px) {

	.axis-hero__description-wrapper,
	.axis-page-description-wrapper {
		max-width: 95%;
		/* Almost full width on small mobile */
		padding: 1rem;
	}
}


/* ========================================================================
   Statistics Bar - Enhanced
   ======================================================================== */

/* CC License icon styling */
.axis-cc-icon {
	height: 31px;
	width: auto;
	display: block;
	margin: 0 auto;
}

/* Stats bar responsive - allow wrapping with more items */
@media (max-width: 1200px) {
	.axis-stats-bar__inner {
		gap: 1.5rem;
	}

	.axis-stat {
		min-width: 120px;
	}
}

@media (max-width: 768px) {
	.axis-stats-bar__inner {
		gap: 1rem;
		justify-content: center;
	}

	.axis-stat {
		min-width: 100px;
	}

	.axis-cc-icon {
		height: 24px;
	}
}

/* License stat special styling */
.axis-stat--license .axis-stat__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}

/* SVG icons in stats */
.axis-stat svg {
	display: block;
	margin: 0 auto;
	width: 30px;
	/* Increased from 20px */
	height: 30px;
	/* Increased from 20px */
	color: var(--axis-primary);
	flex-shrink: 0;
	/* Don't shrink in flex container */
}

html.dark-mode .axis-stat svg {
	color: var(--axis-primary);
}

/* Title wrapper with issue badge */
.axis-section__title-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Issue badge - minimal button style */
.axis-issue-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.875rem;
	font-size: var(--axis-font-xs);
	font-weight: 500;
	font-family: var(--axis-font-family);
	color: var(--axis-primary);
	background: rgba(44, 95, 141, 0.08);
	border: 1px solid rgba(44, 95, 141, 0.2);
	border-radius: var(--axis-radius-md);
	white-space: nowrap;
	transition: all var(--axis-transition-normal);
}

.axis-issue-badge:hover {
	background: rgba(44, 95, 141, 0.12);
	border-color: rgba(44, 95, 141, 0.3);
	transform: translateY(-1px);
}

/* Dark mode adjustments */
html.dark-mode .axis-issue-badge {
	background: rgba(44, 95, 141, 0.15);
	border-color: rgba(44, 95, 141, 0.25);
}

html.dark-mode .axis-issue-badge:hover {
	background: rgba(44, 95, 141, 0.22);
	border-color: rgba(44, 95, 141, 0.35);
}

/* ============================================================================
   IMAGE PREVIEW BUTTON & LIGHTBOX
   ========================================================================== */

/* Preview button on article card images */
.axis-image-preview-btn {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--axis-radius-md);
	cursor: pointer;
	opacity: 0;
	transition: all var(--axis-transition-normal);
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.axis-article-card__image:hover .axis-image-preview-btn {
	opacity: 1;
}

.axis-image-preview-btn:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.axis-image-preview-btn svg {
	color: var(--axis-primary);
}

html.dark-mode .axis-image-preview-btn {
	background: rgba(30, 30, 30, 0.95);
	border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .axis-image-preview-btn:hover {
	background: rgba(40, 40, 40, 1);
}

/* Lightbox Modal */
.axis-lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.92);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	backdrop-filter: blur(8px);
}

.axis-lightbox.is-open {
	display: flex;
}

.axis-lightbox__content {
	max-width: 90vw;
	max-height: 90vh;
	position: relative;
	animation: lightboxZoomIn 0.3s ease;
}

@keyframes lightboxZoomIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.axis-lightbox__image {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: var(--axis-radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.axis-lightbox__close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--axis-radius-md);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	color: white;
}

.axis-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

.axis-lightbox__caption {
	position: absolute;
	bottom: -3rem;
	left: 0;
	right: 0;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	font-size: 0.875rem;
	padding: 0 1rem;
}

@media (max-width: 768px) {
	.axis-lightbox {
		padding: 1rem;
	}

	.axis-lightbox__close {
		top: -2.5rem;
	}

	.axis-lightbox__caption {
		bottom: -2.5rem;
		font-size: 0.8125rem;
	}
}

/* Clickable image for preview */
.axis-image-clickable {
	cursor: pointer;
	position: relative;
	transition: all var(--axis-transition-normal);
}

.axis-image-clickable:hover {
	opacity: 1;
	transform: scale(1.02);
}

/* Dark overlay on hover */
.axis-image-clickable::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0);
	transition: all var(--axis-transition-normal);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.axis-image-clickable:hover::after {
	background: rgba(0, 0, 0, 0.3);
	content: '🔍';
	/* Zoom icon */
	font-size: 3rem;
	color: white;
}

html.dark-mode .axis-image-clickable:hover::after {
	background: rgba(0, 0, 0, 0.5);
}

/* Article card footer with galleys and view button */
/* ===========================================
   ARTICLE CARD FOOTER - GALLEY LAYOUT SYSTEM
   =========================================== */

/* Card footer container */
.axis-article-card__footer {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--axis-border);
}

/* All buttons in one flex container */
.axis-article-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Base button style - applies to ALL buttons (galleys + view) */
.axis-article-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	font-size: var(--axis-font-sm);
	font-weight: 500;
	color: var(--axis-text-secondary);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 60px;
}

.axis-article-card__btn:hover {
	color: var(--axis-primary);
	border-color: var(--axis-primary);
	background: var(--axis-surface);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* View button - SAME style as galley buttons, no special treatment */
.axis-article-card__btn--view {
	/* Inherits everything from .axis-article-card__btn */
	/* No different styling - acts like a galley button */
}

.axis-article-card__btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Dark mode */
html.dark-mode .axis-article-card__btn:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Keep old class names for backward compatibility */
.axis-article-card__galleys {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.axis-article-card__galley-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.875rem;
	font-size: var(--axis-font-sm);
	font-weight: 500;
	color: var(--axis-text-secondary);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	flex: 1 1 auto;
	min-width: 60px;
}

.axis-article-card__galley-link:hover {
	color: var(--axis-primary);
	border-color: var(--axis-primary);
	background: var(--axis-surface);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* View button - SAME style as galley buttons */
.axis-article-card__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	font-size: var(--axis-font-sm);
	font-weight: 500;
	color: var(--axis-text-secondary);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 60px;
}

.axis-article-card__view-btn:hover {
	color: var(--axis-primary);
	background: var(--axis-surface);
	border-color: var(--axis-primary);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.axis-article-card__view-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Dark mode adjustments */
html.dark-mode .axis-article-card__view-btn:hover {
	background: rgba(var(--axis-primary-rgb), 0.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile: Stack buttons */
@media (max-width: 576px) {
	.axis-article-card__buttons {
		flex-direction: column;
	}

	.axis-article-card__btn {
		width: 100%;
	}

	.axis-article-card__view-btn {
		width: 100%;
	}
}

/* ========================================
   TABBED HOMEPAGE - NO SIDEBAR
   ======================================== */

/* Homepage without sidebar - full width */
.axis-homepage--no-sidebar {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Tabs Container */
.axis-tabs-container {
	margin-top: 3rem;
	margin-bottom: 4rem;
}

/* Slanted Tab Navigation - Inspired by uploaded design */
.axis-tabs-nav {
	display: flex;
	gap: 0.5rem;
	margin-bottom: -1px;
	position: relative;
	z-index: 2;
}

.axis-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 2rem;
	padding-right: 2.5rem;
	font-family: var(--axis-font-family);
	font-size: 1rem;
	font-weight: 500;
	color: var(--axis-text-secondary);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-bottom: none;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	transform: skewX(-10deg);
	transform-origin: bottom left;
	margin-right: -0.5rem;
}

.axis-tab-btn>* {
	transform: skewX(10deg);
	display: inline-flex;
	align-items: center;
}

.axis-tab-btn svg {
	flex-shrink: 0;
}

.axis-tab-btn:hover {
	color: var(--axis-primary);
	background: var(--axis-surface-hover);
	transform: skewX(-10deg) translateY(-2px);
}

.axis-tab-btn--active {
	color: #fff;
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	transform: skewX(-10deg) translateY(0);
	z-index: 3;
}

.axis-tab-btn--active:hover {
	transform: skewX(-10deg) translateY(0);
}

/* Tab Content */
.axis-tabs-content {
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: 0 var(--axis-radius-lg) var(--axis-radius-lg) var(--axis-radius-lg);
	padding: 2.5rem;
	position: relative;
	z-index: 1;
}

.axis-tab-panel {
	display: none;
}

.axis-tab-panel--active {
	display: block;
	animation: axis-fade-in 0.3s ease-out;
}

@keyframes axis-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Grid - 4 columns for no-sidebar layout */
/* Default (Grid layout) — 4 columns on desktop, responsive below */
.axis-homepage--no-sidebar .axis-article-grid,
.axis-homepage--no-sidebar .axis-article-grid--grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Magazine layout — 3 columns on desktop */
.axis-homepage--no-sidebar .axis-article-grid--magazine {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* List view always 1 column - IMPORTANT! */
.axis-homepage--no-sidebar .axis-article-grid--list {
	grid-template-columns: 1fr !important;
}

@media (max-width: 1100px) {

	.axis-homepage--no-sidebar .axis-article-grid,
	.axis-homepage--no-sidebar .axis-article-grid--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.axis-homepage--no-sidebar .axis-article-grid--magazine {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {

	.axis-homepage--no-sidebar .axis-article-grid,
	.axis-homepage--no-sidebar .axis-article-grid--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {

	.axis-homepage--no-sidebar .axis-article-grid,
	.axis-homepage--no-sidebar .axis-article-grid--grid,
	.axis-homepage--no-sidebar .axis-article-grid--magazine {
		grid-template-columns: 1fr;
	}
}

/* Legacy support block */
@media (min-width: 1200px) {

	/* List view always 1 column even on large screens */
	.axis-homepage--no-sidebar .axis-article-grid--list {
		grid-template-columns: 1fr !important;
	}

	.axis-homepage--no-sidebar .axis-article-grid--magazine {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Announcements Grid */
.axis-announcements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.axis-announcements-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Announcement Card */
.axis-announcement-card {
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: 1.75rem;
	transition: all var(--axis-transition-normal);
}

.axis-announcement-card:hover {
	border-color: var(--axis-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.axis-announcement-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.axis-announcement-card__title {
	font-size: var(--axis-font-lg);
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	flex: 1;
}

.axis-announcement-card__title a {
	color: var(--axis-text);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-announcement-card__title a:hover {
	color: var(--axis-primary);
}

.axis-announcement-card__date {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

.axis-announcement-card__excerpt {
	font-size: var(--axis-font-sm);
	line-height: 1.6;
	color: var(--axis-text-secondary);
	margin-bottom: 1.25rem;
}

.axis-announcement-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--axis-font-sm);
	font-weight: 500;
	color: var(--axis-primary);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
}

.axis-announcement-card__link:hover {
	gap: 0.75rem;
}

.axis-announcement-card__link svg {
	width: 16px;
	height: 16px;
	transition: transform var(--axis-transition-normal);
}

.axis-announcement-card__link:hover svg {
	transform: translateX(4px);
}

/* Empty State */
.axis-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--axis-text-secondary);
}

.axis-empty-state svg {
	margin: 0 auto 1.5rem;
	opacity: 0.5;
}

.axis-empty-state p {
	font-size: 1.125rem;
	margin: 0;
}

/* Dark Mode Adjustments */
html.dark-mode .axis-tab-btn {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-tab-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

html.dark-mode .axis-tab-btn--active {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
}

html.dark-mode .axis-tabs-content {
	background: rgba(255, 255, 255, 0.02);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-announcement-card {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-announcement-card:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--axis-primary);
}

/* Responsive */
@media (max-width: 768px) {
	.axis-tabs-nav {
		flex-direction: column;
		gap: 0.75rem;
	}

	.axis-tab-btn {
		transform: skewX(0);
		border-bottom: 1px solid var(--axis-border);
		border-radius: var(--axis-radius-md);
		margin-right: 0;
	}

	.axis-tab-btn>* {
		transform: skewX(0);
	}

	.axis-tab-btn--active {
		transform: skewX(0);
	}

	.axis-tabs-content {
		border-radius: var(--axis-radius-lg);
		padding: 1.5rem;
	}

	.axis-homepage--no-sidebar {
		padding: 0 1rem;
	}

	.axis-announcements-grid {
		grid-template-columns: 1fr;
	}
}

/* View Count Badge (Most Viewed tab) */
.axis-view-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
	color: #fff;
	border-radius: var(--axis-radius-full);
	font-size: 0.875rem;
	font-weight: 500;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.axis-view-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Dark mode: lighter background */
html.dark-mode .axis-view-badge {
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);
	color: #fff;
}

/* Hover effect */
.axis-article-card:hover .axis-view-badge {
	background: var(--axis-primary);
	transform: scale(1.05);
	transition: all var(--axis-transition-normal);
}

html.dark-mode .axis-article-card:hover .axis-view-badge {
	background: var(--axis-primary);
}

/* View count in article meta */
.axis-article-card__views {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--axis-primary);
	font-weight: 500;
}

.axis-article-card__views svg {
	flex-shrink: 0;
}

/* Make view count more prominent in Most Viewed tab */
.axis-tab-panel[data-panel="popular"] .axis-article-card__views {
	color: var(--axis-primary);
	font-weight: 600;
	font-size: var(--axis-font-sm);
}

/* Dark mode */
html.dark-mode .axis-article-card__views {
	color: var(--axis-primary);
}

/* DOI link styling */
.axis-article-card__doi a {
	color: inherit;
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-article-card__doi a:hover {
	color: var(--axis-primary);
	text-decoration: underline;
}

/* Section badge improvements */
.axis-article-card__section {
	display: inline-block;
	font-size: var(--axis-font-xs);
	font-weight: 600;
	text-transform: none;
	color: var(--axis-primary);
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	padding: 0.25rem 0.75rem;
	border-radius: var(--axis-radius-full);
	margin-bottom: 0.75rem;
	letter-spacing: normal;
}

html.dark-mode .axis-article-card__section {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--axis-primary);
}

/* Hide sidebar on homepage - no sidebar layout */
.axis-homepage--no-sidebar .axis-sidebar,
.axis-homepage--no-sidebar .axis-sidebar-wrapper {
	display: none !important;
}

/* Load More Announcements */
.axis-announcement-card--hidden {
	display: none;
}

.axis-load-more-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--axis-border);
}

.axis-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	background: var(--axis-primary);
	color: white;
	border: none;
	border-radius: var(--axis-radius-lg);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.axis-load-more-btn:hover {
	background: var(--axis-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.axis-load-more-btn:active {
	transform: translateY(0);
}

.axis-load-more-btn svg {
	transition: transform var(--axis-transition-normal);
}

.axis-load-more-btn:hover svg {
	transform: translateY(2px);
}

.axis-load-more-info {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	font-weight: 500;
}

.axis-load-more-info #announcementsShowing {
	color: var(--axis-primary);
	font-weight: 700;
}

/* Dark mode */
html.dark-mode .axis-load-more-btn {
	background: var(--axis-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark-mode .axis-load-more-btn:hover {
	background: var(--axis-primary-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Footer Redesign - 3 Columns with Dividers */

/* Footer title divider - elegant shadow line */
.axis-footer__divider {
	width: 120px;
	height: 2px;
	background: linear-gradient(90deg, var(--axis-primary), transparent);
	margin: 0.75rem 0 1.5rem 0;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html.dark-mode .axis-footer__divider {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Footer ISSN badges */
.axis-footer__issn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.axis-issn-badge {
	display: inline-flex;
	align-items: stretch;
	border-radius: var(--axis-radius-md);
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 500;
	border: 1px solid var(--axis-border);
}

.axis-issn-badge__label {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.625rem;
	background: #8f1b59;
	color: white;
	font-weight: 600;
	letter-spacing: 0.025em;
}

.axis-issn-badge__value {
	display: flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	background: var(--axis-surface);
	color: var(--axis-text);
	font-family: var(--axis-font-mono);
	letter-spacing: 0.05em;
}

.axis-issn-badge--online .axis-issn-badge__label {
	background: #8f1b59;
}

/* Dark mode ISSN badges */
html.dark-mode .axis-issn-badge {
	border-color: rgba(255, 255, 255, 0.15);
}

html.dark-mode .axis-issn-badge__value {
	background: rgba(255, 255, 255, 0.08);
	color: var(--axis-text);
}

/* Footer social media */
.axis-footer__social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.axis-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--axis-surface);
	color: var(--axis-text-secondary);
	border-radius: var(--axis-radius-md);
	border: 1px solid var(--axis-border);
	transition: all var(--axis-transition-normal);
}

.axis-footer__social-link:hover {
	background: var(--axis-primary);
	color: white;
	border-color: var(--axis-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

html.dark-mode .axis-footer__social-link {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-footer__social-link:hover {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Footer contact */
.axis-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.axis-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--axis-font-sm);
	line-height: 1.6;
	color: var(--axis-text-secondary);
}

.axis-footer__contact-item svg {
	flex-shrink: 0;
	margin-top: 0.125rem;
	color: var(--axis-primary);
}

.axis-footer__contact-item a {
	color: var(--axis-text-secondary);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-footer__contact-item a:hover {
	color: var(--axis-primary);
	text-decoration: underline;
}

/* Footer bottom - custom content (admin HTML). Global img{display:block} breaks text-align:center
   on <p> — block images stay left-aligned; use inline-block here. */
.axis-footer__custom {
	text-align: center;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	line-height: 1.6;
	max-width: 100%;
}

.axis-footer__custom p {
	margin: 0.5rem 0;
	text-align: center;
}

.axis-footer__custom img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	margin: 0 0.2em;
}

.axis-footer__custom a {
	color: var(--axis-primary);
	text-decoration: none;
}

.axis-footer__custom a:hover {
	text-decoration: underline;
}

/* Read more link in footer description */
.axis-footer__read-more {
	display: inline-block;
	margin-left: 0.35rem;
	color: var(--axis-primary);
	text-decoration: none;
	font-size: var(--axis-font-sm);
	font-weight: 500;
	transition: var(--axis-transition-fast);
	position: relative;
}

.axis-footer__read-more::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background: var(--axis-primary);
	border-radius: 50%;
	margin-right: 0.35rem;
	vertical-align: middle;
	opacity: 0.5;
}

.axis-footer__read-more:hover {
	color: var(--axis-secondary);
	text-decoration: none;
}

.axis-footer__read-more:hover::before {
	background: var(--axis-secondary);
	opacity: 1;
}

/* Improve column spacing */
.axis-footer__column {
	position: relative;
}

/* Add subtle separator between columns on desktop */
@media (min-width: 768px) {
	.axis-footer__column:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 1px;
		background: linear-gradient(to bottom,
				transparent,
				var(--axis-border) 20%,
				var(--axis-border) 80%,
				transparent);
		opacity: 0.5;
	}

	html.dark-mode .axis-footer__column:not(:last-child)::after {
		background: linear-gradient(to bottom,
				transparent,
				rgba(255, 255, 255, 0.1) 20%,
				rgba(255, 255, 255, 0.1) 80%,
				transparent);
	}
}

/* ========================================
   PRE-FOOTER SECTIONS
   ======================================== */

/* Indexing Section */
.axis-indexing-section {
	background: var(--axis-surface);
	padding: 4rem 0;
	margin-top: 4rem;
	border-top: 1px solid var(--axis-border);
}

.axis-indexing-section__title {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	color: var(--axis-text-primary);
	margin: 0 0 0.75rem 0;
}

.axis-indexing-section__divider {
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--axis-primary), transparent);
	margin: 0 auto 3rem auto;
	border-radius: 2px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html.dark-mode .axis-indexing-section__divider {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Indexing Badges */
.axis-indexing-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
}

.axis-indexing-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: white;
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--axis-text-primary);
	transition: all var(--axis-transition-normal);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.axis-indexing-badge:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.axis-indexing-badge__check {
	flex-shrink: 0;
	color: currentColor;
}

/* Auto colors for popular databases */
.axis-indexing-badge[data-indexing*="Scopus"] {
	border-color: #FF6B00;
	color: #FF6B00;
	background: rgba(255, 107, 0, 0.05);
}

.axis-indexing-badge[data-indexing*="Scopus"]:hover {
	background: #FF6B00;
	color: white;
	box-shadow: 0 8px 20px rgba(255, 107, 0, 0.25);
}

.axis-indexing-badge[data-indexing*="Web of Science"],
.axis-indexing-badge[data-indexing*="WoS"] {
	border-color: #0066CC;
	color: #0066CC;
	background: rgba(0, 102, 204, 0.05);
}

.axis-indexing-badge[data-indexing*="Web of Science"]:hover,
.axis-indexing-badge[data-indexing*="WoS"]:hover {
	background: #0066CC;
	color: white;
	box-shadow: 0 8px 20px rgba(0, 102, 204, 0.25);
}

.axis-indexing-badge[data-indexing*="DOAJ"] {
	border-color: #28A745;
	color: #28A745;
	background: rgba(40, 167, 69, 0.05);
}

.axis-indexing-badge[data-indexing*="DOAJ"]:hover {
	background: #28A745;
	color: white;
	box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
}

.axis-indexing-badge[data-indexing*="Crossref"] {
	border-color: #ED1C24;
	color: #ED1C24;
	background: rgba(237, 28, 36, 0.05);
}

.axis-indexing-badge[data-indexing*="Crossref"]:hover {
	background: #ED1C24;
	color: white;
	box-shadow: 0 8px 20px rgba(237, 28, 36, 0.25);
}

.axis-indexing-badge[data-indexing*="PubMed"] {
	border-color: #326295;
	color: #326295;
	background: rgba(50, 98, 149, 0.05);
}

.axis-indexing-badge[data-indexing*="PubMed"]:hover {
	background: #326295;
	color: white;
	box-shadow: 0 8px 20px rgba(50, 98, 149, 0.25);
}

.axis-indexing-badge[data-indexing*="Google Scholar"] {
	border-color: #4285F4;
	color: #4285F4;
	background: rgba(66, 133, 244, 0.05);
}

.axis-indexing-badge[data-indexing*="Google Scholar"]:hover {
	background: #4285F4;
	color: white;
	box-shadow: 0 8px 20px rgba(66, 133, 244, 0.25);
}

.axis-indexing-badge[data-indexing*="ProQuest"] {
	border-color: #8B4513;
	color: #8B4513;
	background: rgba(139, 69, 19, 0.05);
}

.axis-indexing-badge[data-indexing*="ProQuest"]:hover {
	background: #8B4513;
	color: white;
	box-shadow: 0 8px 20px rgba(139, 69, 19, 0.25);
}

.axis-indexing-badge[data-indexing*="EBSCO"] {
	border-color: #00A99D;
	color: #00A99D;
	background: rgba(0, 169, 157, 0.05);
}

.axis-indexing-badge[data-indexing*="EBSCO"]:hover {
	background: #00A99D;
	color: white;
	box-shadow: 0 8px 20px rgba(0, 169, 157, 0.25);
}

/* Dark mode for indexing */
html.dark-mode .axis-indexing-section {
	background: rgba(255, 255, 255, 0.02);
	border-top-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-indexing-badge {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}

html.dark-mode .axis-indexing-badge:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* CTA Section */
.axis-cta-section {
	padding: 4rem 0;
	background: var(--axis-background);
}

.axis-cta-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, 1fr);
}

/* Adaptive grid - 6 columns on wide screens */
@media (min-width: 1440px) {
	.axis-cta-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) and (max-width: 1439px) {
	.axis-cta-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.axis-cta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.axis-cta-grid {
		grid-template-columns: 1fr;
	}
}

/* CTA Card */
.axis-cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.5rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	text-decoration: none;
	color: var(--axis-text-primary);
	transition: all var(--axis-transition-normal);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.axis-cta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border-color: var(--axis-primary);
}

.axis-cta-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--axis-radius-md);
	margin-bottom: 1rem;
	transition: all var(--axis-transition-normal);
}

.axis-cta-card:hover .axis-cta-card__icon {
	transform: scale(1.1);
}

.axis-cta-card__icon svg {
	color: var(--axis-primary);
}

/* Icon backgrounds */
.axis-cta-card__icon--submit {
	background: rgba(79, 70, 229, 0.1);
}

.axis-cta-card__icon--review {
	background: rgba(16, 185, 129, 0.1);
}

.axis-cta-card__icon--guidelines {
	background: rgba(245, 158, 11, 0.1);
}

.axis-cta-card__icon--archives {
	background: rgba(59, 130, 246, 0.1);
}

.axis-cta-card__icon--search {
	background: rgba(139, 92, 246, 0.1);
}

.axis-cta-card__icon--privacy {
	background: rgba(236, 72, 153, 0.1);
}

.axis-cta-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 0.5rem 0;
	color: var(--axis-text-primary);
	line-height: 1.4;
}

.axis-cta-card__description {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	margin: 0 0 1rem 0;
	line-height: 1.6;
	flex: 1;
}

.axis-cta-card__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--axis-primary);
	transition: all var(--axis-transition-normal);
}

.axis-cta-card:hover .axis-cta-card__link {
	gap: 0.5rem;
}

/* Dark mode for CTA */
html.dark-mode .axis-cta-card {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-mode .axis-cta-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	border-color: var(--axis-primary);
}

/* Responsive adjustments for narrow cards (6-column) */
@media (min-width: 1440px) {
	.axis-cta-card {
		padding: 1.5rem 1rem;
	}

	.axis-cta-card__icon {
		width: 48px;
		height: 48px;
	}

	.axis-cta-card__title {
		font-size: 1rem;
	}

	.axis-cta-card__description {
		font-size: 0.8125rem;
	}
}

/* ================================================================
   PRE-FOOTER SECTIONS
   ================================================================ */

/* SECTION 1: Indexed & Abstracted In */
.axis-indexing-section {
	background: var(--axis-surface);
	padding: 4rem 0;
	margin-top: 4rem;
	border-top: 1px solid var(--axis-border);
}

.axis-indexing-section__title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--axis-text-primary);
	text-align: center;
	margin: 0 0 0.75rem 0;
}

.axis-indexing-section__divider {
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, var(--axis-primary), transparent);
	margin: 0 auto 3rem auto;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.axis-indexing-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	align-items: center;
}

.axis-indexing-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: white;
	border: 2px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--axis-text-primary);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.axis-indexing-badge:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.axis-indexing-badge__name {
	font-weight: 600;
}

.axis-indexing-badge__check {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Auto-color matching for famous indexing databases */
.axis-indexing-badge[data-indexing*="Scopus"] {
	border-color: #FF6B00;
	color: #FF6B00;
}

.axis-indexing-badge[data-indexing*="Scopus"]:hover {
	background: #FF6B00;
	color: white;
	border-color: #FF6B00;
}

.axis-indexing-badge[data-indexing*="Scopus"]:hover .axis-indexing-badge__check {
	stroke: white;
}

.axis-indexing-badge[data-indexing*="Web of Science"],
.axis-indexing-badge[data-indexing*="WoS"] {
	border-color: #0066CC;
	color: #0066CC;
}

.axis-indexing-badge[data-indexing*="Web of Science"]:hover,
.axis-indexing-badge[data-indexing*="WoS"]:hover {
	background: #0066CC;
	color: white;
	border-color: #0066CC;
}

.axis-indexing-badge[data-indexing*="DOAJ"] {
	border-color: #28A745;
	color: #28A745;
}

.axis-indexing-badge[data-indexing*="DOAJ"]:hover {
	background: #28A745;
	color: white;
	border-color: #28A745;
}

.axis-indexing-badge[data-indexing*="Crossref"] {
	border-color: #ED1C24;
	color: #ED1C24;
}

.axis-indexing-badge[data-indexing*="Crossref"]:hover {
	background: #ED1C24;
	color: white;
	border-color: #ED1C24;
}

.axis-indexing-badge[data-indexing*="PubMed"] {
	border-color: #326295;
	color: #326295;
}

.axis-indexing-badge[data-indexing*="PubMed"]:hover {
	background: #326295;
	color: white;
	border-color: #326295;
}

.axis-indexing-badge[data-indexing*="Google Scholar"],
.axis-indexing-badge[data-indexing*="Scholar"] {
	border-color: #4285F4;
	color: #4285F4;
}

.axis-indexing-badge[data-indexing*="Google Scholar"]:hover,
.axis-indexing-badge[data-indexing*="Scholar"]:hover {
	background: #4285F4;
	color: white;
	border-color: #4285F4;
}

.axis-indexing-badge[data-indexing*="ProQuest"] {
	border-color: #8B4513;
	color: #8B4513;
}

.axis-indexing-badge[data-indexing*="ProQuest"]:hover {
	background: #8B4513;
	color: white;
	border-color: #8B4513;
}

.axis-indexing-badge[data-indexing*="EBSCO"] {
	border-color: #00A99D;
	color: #00A99D;
}

.axis-indexing-badge[data-indexing*="EBSCO"]:hover {
	background: #00A99D;
	color: white;
	border-color: #00A99D;
}

/* Dark mode for indexing badges */
html.dark-mode .axis-indexing-badge {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-indexing-badge:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* ================================================================
   SECTION 2: Call to Action Cards
   ================================================================ */

.axis-cta-section {
	background: var(--axis-background);
	padding: 4rem 0;
}

.axis-cta-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	/* Mobile: 2 columns */
}

/* Adaptive Grid - RESPONSIVE BREAKPOINTS */

/* Tablet: 2x3 grid */
@media (min-width: 768px) and (max-width: 1023px) {
	.axis-cta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Small Desktop: 3x2 grid */
@media (min-width: 1024px) and (max-width: 1439px) {
	.axis-cta-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Large Desktop: 6 columns! */
@media (min-width: 1440px) {
	.axis-cta-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* CTA Card Design */
.axis-cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2rem 1.5rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.axis-cta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	border-color: var(--axis-primary);
}

.axis-cta-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(var(--axis-primary-rgb), 0.1);
	border-radius: var(--axis-radius-md);
	margin-bottom: 1.25rem;
	transition: all var(--axis-transition-normal);
}

.axis-cta-card__icon svg {
	color: var(--axis-primary);
	transition: all var(--axis-transition-normal);
}

.axis-cta-card:hover .axis-cta-card__icon {
	background: var(--axis-primary);
	transform: scale(1.05);
}

.axis-cta-card:hover .axis-cta-card__icon svg {
	color: white;
}

.axis-cta-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--axis-text-primary);
	margin: 0 0 0.75rem 0;
	line-height: 1.4;
}

.axis-cta-card__description {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--axis-text-secondary);
	margin: 0 0 1.25rem 0;
	flex-grow: 1;
}

.axis-cta-card__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--axis-primary);
	transition: all var(--axis-transition-normal);
}

.axis-cta-card:hover .axis-cta-card__link {
	transform: translateX(4px);
}

/* Dark mode for CTA cards */
html.dark-mode .axis-cta-card {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-cta-card:hover {
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Mobile: Stack all cards */
@media (max-width: 767px) {
	.axis-cta-grid {
		grid-template-columns: 1fr;
	}

	.axis-cta-card {
		padding: 1.5rem;
	}

	.axis-cta-card__icon {
		width: 48px;
		height: 48px;
	}
}

/* Narrow desktop (1440px): Optimize card padding for 6-column */
@media (min-width: 1440px) {
	.axis-cta-card {
		padding: 1.75rem 1.25rem;
	}

	.axis-cta-card__icon {
		width: 52px;
		height: 52px;
	}

	.axis-cta-card__title {
		font-size: 1rem;
	}

	.axis-cta-card__description {
		font-size: 0.8125rem;
	}
}

/* CTA Card Hover - Fix text colors (no change on hover) */
.axis-cta-card:hover .axis-cta-card__title {
	color: var(--axis-text-primary);
	/* Stay same */
}

.axis-cta-card:hover .axis-cta-card__description {
	color: var(--axis-text-secondary);
	/* Stay same */
}

/* CTA Card - Prevent text color/underline changes on hover */
.axis-cta-card,
.axis-cta-card:hover,
.axis-cta-card:focus,
.axis-cta-card:active {
	text-decoration: none !important;
}

.axis-cta-card .axis-cta-card__title {
	color: var(--axis-text-primary);
	text-decoration: none;
}

.axis-cta-card .axis-cta-card__description {
	color: var(--axis-text-secondary);
	text-decoration: none;
}

.axis-cta-card:hover .axis-cta-card__title,
.axis-cta-card:focus .axis-cta-card__title {
	color: var(--axis-text-primary);
	text-decoration: none;
}

.axis-cta-card:hover .axis-cta-card__description,
.axis-cta-card:focus .axis-cta-card__description {
	color: var(--axis-text-secondary);
	text-decoration: none;
}

/* ================================================================

/* ================================================================
   ARCHIVE PAGE - 4 LAYOUTS
   ================================================================ */

/* Common Archive Page Styles */
.axis-archive-page {
	padding: 2rem 0 4rem 0;
}

.axis-page-header {
	text-align: center;
	margin-bottom: 3rem;
}


/* Year Section Common Styles */
.axis-archive-year__title {
	font-size: var(--axis-font-2xl);
	font-weight: 700;
	color: var(--axis-primary);
	margin: 0;
}

.axis-archive-year__stats {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	font-weight: 500;
}

.axis-archive-year__stats-separator {
	margin: 0 0.5rem;
	opacity: 0.5;
}

/* Issue Card Common Styles */
.axis-issue-card {
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
	transition: all var(--axis-transition-normal);
}

.axis-issue-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	border-color: rgba(var(--axis-primary-rgb), 0.3);
}

.axis-issue-card__cover {
	position: relative;
	overflow: hidden;
	background: var(--axis-background);
}

.axis-issue-card__cover img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--axis-transition-normal);
}

.axis-issue-card:hover .axis-issue-card__cover img {
	transform: scale(1.05);
}

.axis-issue-card__badge {
	background: var(--axis-primary);
	color: white;
	padding: 0.375rem 0.75rem;
	border-radius: var(--axis-radius-md);
	font-size: var(--axis-font-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.axis-issue-card__content {
	padding: 1.5rem;
}

.axis-issue-card__header-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.axis-issue-card__title {
	font-size: var(--axis-font-lg);
	font-weight: 700;
	margin: 0;
	flex: 1;
}

.axis-issue-card__title a {
	color: var(--axis-text-primary);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-issue-card__title a:hover {
	color: var(--axis-primary);
}

.axis-issue-card__date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 0.75rem;
}

.axis-issue-card__date svg {
	color: var(--axis-primary);
	flex-shrink: 0;
}

.axis-issue-card__stats {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.axis-issue-card__stat {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
}

.axis-issue-card__stat svg {
	color: var(--axis-primary);
	flex-shrink: 0;
}

.axis-issue-card__description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--axis-text-secondary);
	margin-bottom: 1.25rem;
}

.axis-issue-card__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.axis-issue-card--current {
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 1px rgba(var(--axis-primary-rgb), 0.1);
}

/* Current issue in cover layout - same as other cards */
html:not(.dark-mode) .axis-issue-card--current.axis-issue-card--cover {
	border: none !important;
	background: #FAFAFA !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	overflow: hidden !important;
}

html:not(.dark-mode) .axis-issue-card--current.axis-issue-card--cover:hover {
	background: #F5F5F5 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

html.dark-mode .axis-issue-card--current.axis-issue-card--cover {
	border: none !important;
	box-shadow: none !important;
}

/* ================================================================
   LAYOUT 1: ACCORDION
   ================================================================ */

.axis-archive-accordion {
	/* Remove max-width restriction - use full container width like other layouts */
	margin: 0 auto;
}

.axis-archive-year-section {
	margin-bottom: 2rem;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
	background: var(--axis-surface);
}

.axis-archive-year__toggle {
	display: none;
}

.axis-archive-year__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 2rem;
	background: var(--axis-surface);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	border-bottom: 1px solid transparent;
}

.axis-archive-year__header:hover {
	background: rgba(var(--axis-primary-rgb), 0.03);
}

.axis-archive-year__header-content {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: 1;
}

.axis-archive-year__icon {
	color: var(--axis-primary);
	transition: transform var(--axis-transition-normal);
	flex-shrink: 0;
}

.axis-archive-year__toggle:checked+.axis-archive-year__header .axis-archive-year__icon {
	transform: rotate(180deg);
}

.axis-archive-year__toggle:checked+.axis-archive-year__header {
	border-bottom-color: var(--axis-border);
}

.axis-archive-year__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.axis-archive-year__toggle:checked+.axis-archive-year__header+.axis-archive-year__content {
	max-height: 10000px;
	transition: max-height 0.6s ease-in;
}

.axis-issue-list {
	padding: 1rem;
}

.axis-issue-card--accordion {
	display: grid;
	grid-template-columns: 180px minmax(220px, 1fr) 2fr;
	gap: 1.5rem;
	margin-bottom: 1rem;
	align-items: start;
}

.axis-issue-card--accordion:last-child {
	margin-bottom: 0;
}

.axis-issue-card--accordion .axis-issue-card__cover {
	width: 100%;
	border-radius: var(--axis-radius-md);
	overflow: hidden;
}

/* Cover image - height-based, no cropping */
.axis-issue-card--accordion .axis-issue-card__cover img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	max-height: 280px;
}

.axis-issue-card--accordion .axis-issue-card__content {
	/* Meta column - flexible */
}

/* Description Column (3rd column) */
.axis-issue-card__description-column {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--axis-text-secondary);
	padding-left: 1.5rem;
	border-left: 2px solid var(--axis-border);
}

/* Accordion: Badge on right side, not on cover */
.axis-issue-card--accordion .axis-issue-card__badge {
	flex-shrink: 0;
}

/* ================================================================
   LAYOUT 2: GRID BY YEAR (improved spacing)
   ================================================================ */

.axis-archive-grid-by-year {
	max-width: 1200px;
	margin: 0 auto;
}

.axis-archive-grid-by-year .axis-archive-year-section {
	margin-bottom: 4rem;
	padding: 2rem;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
}

.axis-archive-year__header-grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 2px solid var(--axis-border);
}

.axis-issue-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 2rem;
}

.axis-issue-card--grid {
	display: flex;
	flex-direction: column;
}

.axis-issue-card--grid .axis-issue-card__cover {
	aspect-ratio: 3 / 4;
}

.axis-issue-card--grid .axis-issue-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.axis-issue-card--grid .axis-issue-card__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.axis-issue-card--grid .axis-issue-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.axis-issue-card--grid .axis-issue-card__actions {
	margin-top: auto;
}

/* ================================================================
   LAYOUT 3: GRID WITH COVERS (4 columns - NIVO style)
   ================================================================ */

.axis-archive-grid-covers {
	max-width: 1400px;
	margin: 0 auto;
}

.axis-issue-grid-covers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

/* Light mode - no padding, mockup at edges */
html:not(.dark-mode) .axis-issue-card--cover {
	text-align: center;
	background: #FAFAFA;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
}

html:not(.dark-mode) .axis-issue-card--cover .axis-cover-mockup {
	border-radius: 0 !important;
	/* Remove border-radius to align with card edges */
}

html:not(.dark-mode) .axis-issue-card--cover:hover {
	background: #F5F5F5;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
	transform: translateY(-4px);
}

/* Dark mode - keep transparent */
html.dark-mode .axis-issue-card--cover {
	text-align: center;
	border: none !important;
	background: transparent;
	box-shadow: none !important;
}

html.dark-mode .axis-issue-card--cover .axis-cover-mockup {
	border-radius: 0 !important;
	/* Remove border-radius to align with card edges */
}

html.dark-mode .axis-issue-card--cover:hover {
	transform: translateY(-4px);
	box-shadow: none;
}

.axis-issue-card--cover .axis-issue-card__cover {
	margin-bottom: 1rem;
	border-radius: var(--axis-radius-lg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all var(--axis-transition-normal);
	position: relative;
}

.axis-issue-card--cover:hover .axis-issue-card__cover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.axis-issue-card--cover .axis-issue-card__cover img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--axis-radius-lg);
}

.axis-issue-card--cover .axis-issue-card__badge--cover {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	font-size: 0.625rem;
	padding: 0.25rem 0.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Light mode - info area with background */
html:not(.dark-mode) .axis-issue-card--cover .axis-issue-card__info {
	padding: 1rem 1.25rem;
	background: #FFFFFF;
	margin-top: 0;
}

/* Dark mode - transparent info area */
html.dark-mode .axis-issue-card--cover .axis-issue-card__info {
	padding: 0;
	background: transparent;
}

.axis-issue-card--cover .axis-issue-card__title {
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.axis-issue-card--cover .axis-issue-card__date {
	justify-content: center;
	font-size: 0.8125rem;
	margin: 0;
}

.axis-issue-card--cover .axis-issue-card__date svg {
	width: 12px;
	height: 12px;
}

/* ================================================================
   LAYOUT 4: COMPACT LIST BY YEAR (NIVO style)
   ================================================================ */

.axis-archive-compact-list {
	max-width: 1200px;
	margin: 0 auto;
}

.axis-compact-year-section {
	margin-bottom: 3rem;
}

.axis-compact-year__header {
	background: var(--axis-surface);
	padding: 1rem 1.5rem;
	border-radius: var(--axis-radius-lg);
	margin-bottom: 1rem;
	border: 1px solid var(--axis-border);
}

.axis-compact-year__title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--axis-primary);
	margin: 0;
}

.axis-compact-issue-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	overflow: hidden;
}

.axis-compact-issue {
	border-right: 1px solid var(--axis-border);
	border-bottom: 1px solid var(--axis-border);
}

.axis-compact-issue:nth-child(4n) {
	border-right: none;
}

.axis-compact-issue__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	text-decoration: none;
	color: var(--axis-text-primary);
	transition: all var(--axis-transition-normal);
}

.axis-compact-issue__link:hover {
	background: rgba(var(--axis-primary-rgb), 0.05);
	color: var(--axis-primary);
}

.axis-compact-issue__title {
	font-weight: 600;
	font-size: 0.9375rem;
}

.axis-compact-issue__badge {
	background: var(--axis-primary);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: var(--axis-radius-sm);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Grid with Covers: Responsive */
@media (max-width: 1280px) {
	.axis-issue-grid-covers {
		grid-template-columns: repeat(3, 1fr);
	}

	.axis-compact-issue-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.axis-compact-issue:nth-child(4n) {
		border-right: 1px solid var(--axis-border);
	}

	.axis-compact-issue:nth-child(3n) {
		border-right: none;
	}
}

@media (max-width: 1024px) {
	.axis-issue-grid-covers {
		grid-template-columns: repeat(2, 1fr);
	}

	.axis-compact-issue-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.axis-compact-issue:nth-child(3n) {
		border-right: 1px solid var(--axis-border);
	}

	.axis-compact-issue:nth-child(2n) {
		border-right: none;
	}
}

@media (max-width: 767px) {
	.axis-page-title {
		font-size: 2rem;
	}

	.axis-page-description {
		font-size: 1rem;
	}

	.axis-archive-year__title {
		font-size: var(--axis-font-xl);
	}

	.axis-archive-year__header {
		padding: 1rem 1.5rem;
	}

	.axis-archive-year__header-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.axis-issue-card--accordion {
		flex-direction: column;
	}

	.axis-issue-card--accordion .axis-issue-card__cover {
		width: 100%;
	}

	.axis-issue-grid {
		grid-template-columns: 1fr;
	}

	.axis-issue-grid-covers {
		grid-template-columns: 1fr;
	}

	.axis-compact-issue-list {
		grid-template-columns: 1fr;
	}

	.axis-compact-issue {
		border-right: none;
	}

	.axis-archive-grid-by-year .axis-archive-year-section {
		padding: 1.5rem;
	}
}

/* ================================================================
   DARK MODE
   ================================================================ */

html.dark-mode .axis-issue-card {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-issue-card:hover {
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

html.dark-mode .axis-archive-year__header:hover {
	background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .axis-compact-year__header {
	background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .axis-compact-issue-list {
	background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .axis-compact-issue__link:hover {
	background: rgba(var(--axis-primary-rgb), 0.1);
}

html.dark-mode .axis-archive-grid-by-year .axis-archive-year-section {
	background: rgba(255, 255, 255, 0.03);
}

/* ================================================================
   MOCKUP COVER (Grid with Covers layout - when no image)
   ================================================================ */


/* ================================================
   MOCKUP COVER - CLEAN VERSION (v2.5.6)
   ================================================ */

/* ===== BASE STYLES ===== */
.axis-cover-mockup {
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	border-radius: var(--axis-radius-lg);
	transition: all var(--axis-transition-normal);
}

/* ===== LIGHT MODE ===== */
html:not(.dark-mode) .axis-cover-mockup {
	/* Background: Neutral elegant */
	background: linear-gradient(135deg,
			rgba(0, 0, 0, 0.08) 0%,
			rgba(0, 0, 0, 0.04) 50%,
			rgba(0, 0, 0, 0.08) 100%);
	background-color: #F8F9FA;

	/* Border: Admin color accent */
	border: 4px solid rgba(var(--axis-primary-rgb), 0.7);

	/* Text: Dark for contrast */
	color: #1F2937;

	/* Shadows */
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.15),
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 0 60px rgba(0, 0, 0, 0.05);
}

/* Texture overlay (light mode) */
html:not(.dark-mode) .axis-cover-mockup::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(0deg,
			rgba(255, 255, 255, 0.03) 0px,
			transparent 1px,
			transparent 2px,
			rgba(255, 255, 255, 0.03) 3px),
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.03) 0px,
			transparent 1px,
			transparent 2px,
			rgba(255, 255, 255, 0.03) 3px);
	pointer-events: none;
}

/* Hover (light mode) */
html:not(.dark-mode) .axis-issue-card:hover .axis-cover-mockup {
	border-color: rgba(var(--axis-primary-rgb), 0.9);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.2),
		inset 0 0 0 1px rgba(255, 255, 255, 0.15),
		inset 0 0 60px rgba(0, 0, 0, 0.08);
}

/* ===== DARK MODE ===== */
html.dark-mode .axis-cover-mockup {
	/* Background: Sophisticated dark */
	background: linear-gradient(135deg,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0.04) 50%,
			rgba(255, 255, 255, 0.08) 100%) !important;
	background-color: #1F2937 !important;

	/* Border: Admin color accent (softer) */
	border: 4px solid rgba(var(--axis-primary-rgb), 0.6) !important;

	/* Text: Light for contrast */
	color: #F3F4F6 !important;

	/* Shadows (subtle in dark) */
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.3),
		inset 0 0 0 1px rgba(255, 255, 255, 0.05),
		inset 0 0 60px rgba(0, 0, 0, 0.1) !important;
}

/* CRITICAL: Override link styles inside mockup */
/* Remove underline from link itself */
a:has(.axis-cover-mockup),
a:hover:has(.axis-cover-mockup),
a:focus:has(.axis-cover-mockup) {
	text-decoration: none !important;
}

/* Remove underline from mockup container */
a .axis-cover-mockup,
a:hover .axis-cover-mockup,
a:focus .axis-cover-mockup {
	text-decoration: none !important;
}

/* Remove underline from all children */
a .axis-cover-mockup *,
a:hover .axis-cover-mockup *,
a:focus .axis-cover-mockup * {
	text-decoration: none !important;
}

/* Hover (dark mode) */
html.dark-mode .axis-issue-card:hover .axis-cover-mockup {
	border-color: rgba(var(--axis-primary-rgb), 0.8);
	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.4),
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		inset 0 0 60px rgba(0, 0, 0, 0.15);
}

/* ===== CONTENT WRAPPER ===== */
.axis-cover-mockup__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem 1.5rem;
	width: 100%;
	text-align: center;
	position: relative;
	z-index: 1;
}

/* ===== ISSUE LABEL BOX ===== */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__label,
a html:not(.dark-mode) .axis-cover-mockup__label {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: rgba(31, 41, 55, 0.15);
	border: 2px solid rgba(31, 41, 55, 0.3);
	border-radius: var(--axis-radius-md);
	color: #1F2937;
	margin-bottom: 0.5rem;
}

/* Dark mode */
html.dark-mode .axis-cover-mockup__label,
a html.dark-mode .axis-cover-mockup__label {
	display: inline-block !important;
	padding: 0.5rem 1rem !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin-bottom: 0.5rem !important;
	border-radius: var(--axis-radius-md) !important;
	background: rgba(255, 255, 255, 0.15) !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	color: #F9FAFB !important;
}

/* ===== LINE (LABEL:VALUE PAIRS) ===== */
.axis-cover-mockup__line {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

/* Labels (VOLUME:, ISSUE:, YEAR:) */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__line-label,
a html:not(.dark-mode) .axis-cover-mockup__line-label {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(31, 41, 55, 0.7);
}

/* Dark mode */
html.dark-mode .axis-cover-mockup__line-label,
a html.dark-mode .axis-cover-mockup__line-label {
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: rgba(243, 244, 246, 0.7) !important;
}

/* Values (3, 4, 2021) - LARGE & BOLD */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__line-value,
a html:not(.dark-mode) .axis-cover-mockup__line-value {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	color: #111827;
}

/* Dark mode */
html.dark-mode .axis-cover-mockup__line-value,
a html.dark-mode .axis-cover-mockup__line-value {
	font-size: 2rem !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	color: #FFFFFF !important;
}

/* ===== TITLE (Special Issue) ===== */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__title,
a html:not(.dark-mode) .axis-cover-mockup__title {
	font-size: 1.25rem;
	font-weight: 600;
	font-style: italic;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(31, 41, 55, 0.2);
	margin-top: 0.5rem;
	color: rgba(31, 41, 55, 0.85);
}

/* Dark mode */
html.dark-mode .axis-cover-mockup__title,
a html.dark-mode .axis-cover-mockup__title {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	font-style: italic !important;
	padding-top: 0.75rem !important;
	margin-top: 0.5rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: rgba(249, 250, 251, 0.9) !important;
}

/* ===== DEPRECATED (Hide old styles) ===== */
.axis-cover-mockup__identification,
.axis-cover-mockup__year {
	display: none;
}


/* ================================================================
   COVER PLACEHOLDER (Grid with Real Covers - No Cover Fallback)
   ================================================================ */

.axis-cover-placeholder {
	width: 100%;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--axis-surface);
	border: 2px dashed var(--axis-border);
	border-radius: var(--axis-radius-lg);
	transition: all var(--axis-transition-normal);
}

.axis-cover-placeholder__content {
	text-align: center;
	padding: 2rem;
	opacity: 0.5;
}

.axis-cover-placeholder__icon {
	display: block;
	margin: 0 auto 1rem;
	color: var(--axis-text-secondary);
}

.axis-cover-placeholder__text {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--axis-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Hover effect */
.axis-issue-card--cover:hover .axis-cover-placeholder {
	border-color: var(--axis-primary);
	background: rgba(var(--axis-primary-rgb), 0.03);
}

.axis-issue-card--cover:hover .axis-cover-placeholder__content {
	opacity: 0.7;
}

/* Dark mode */
html.dark-mode .axis-cover-placeholder {
	background: rgba(255, 255, 255, 0.02);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-issue-card--cover:hover .axis-cover-placeholder {
	border-color: rgba(var(--axis-primary-rgb), 0.6);
	background: rgba(var(--axis-primary-rgb), 0.05);
}

/* ================================================================
   ACCORDION RESPONSIVE
   ================================================================ */

@media (max-width: 992px) {
	.axis-issue-card--accordion {
		grid-template-columns: 140px minmax(180px, 1fr) 1.5fr;
		gap: 1rem;
	}

	/* Cover image - smaller max-height on tablet */
	.axis-issue-card--accordion .axis-issue-card__cover img {
		max-height: 220px;
	}

	.axis-cover-placeholder-accordion {
		height: 200px;
	}

	.axis-issue-card__description-column {
		padding-left: 1rem;
		font-size: 0.875rem;
	}
}

@media (max-width: 768px) {
	.axis-issue-card--accordion {
		grid-template-columns: 1fr;
	}

	/* Cover image - full width on mobile */
	.axis-issue-card--accordion .axis-issue-card__cover img {
		max-height: none;
		max-width: 400px;
		margin: 0 auto;
	}

	.axis-cover-placeholder-accordion {
		height: 300px;
		max-width: 400px;
		margin: 0 auto;
	}

	.axis-issue-card__description-column {
		padding-left: 0;
		padding-top: 1rem;
		border-left: none;
		border-top: 1px solid var(--axis-border);
	}
}

/* Dark mode - description column */
html.dark-mode .axis-issue-card__description-column {
	color: rgba(255, 255, 255, 0.65);
	border-left-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
	html.dark-mode .axis-issue-card__description-column {
		border-top-color: rgba(255, 255, 255, 0.1);
	}
}

/* ================================================================
   ACCORDION PLACEHOLDER (when no cover image)
   ================================================================ */

.axis-cover-placeholder-accordion {
	width: 100%;
	height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--axis-surface);
	border: 2px dashed var(--axis-border);
	border-radius: var(--axis-radius-md);
}

.axis-cover-placeholder-accordion svg {
	opacity: 0.3;
	color: var(--axis-text-secondary);
}

/* Dark mode */
html.dark-mode .axis-cover-placeholder-accordion {
	background: rgba(255, 255, 255, 0.02);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ================================================================
   ACCORDION - NO COVER (2 column layout)
   ================================================================ */

.axis-issue-card--no-cover {
	grid-template-columns: minmax(250px, 1fr) 2fr !important;
}

@media (max-width: 992px) {
	.axis-issue-card--no-cover {
		grid-template-columns: minmax(200px, 1fr) 1.5fr !important;
	}
}

@media (max-width: 768px) {
	.axis-issue-card--no-cover {
		grid-template-columns: 1fr !important;
	}
}

/* Issue header - no cover (single column) */
.axis-issue-header__wrapper:has(.axis-issue-header__info:first-child) {
	grid-template-columns: 1fr;
}

/* Dark mode - Table of Contents title */
html.dark-mode .axis-issue-articles .axis-section__title {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.02);
}

html.dark-mode .axis-issue-articles .axis-section__title::after {
	background: linear-gradient(90deg,
			transparent 0%,
			var(--axis-primary) 50%,
			transparent 100%);
}

/* ============================================================================
   ARTICLE DETAIL PAGE - 2-COLUMN LAYOUT
   ========================================================================== */

/* Article page container - 2 columns */
.axis-article-page {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: calc(var(--axis-spacing-unit) * 3);
	max-width: var(--axis-container-width);
	margin: 0 auto;
	padding: calc(var(--axis-spacing-unit) * 3) var(--axis-spacing-unit);
}

@media (max-width: 1024px) {
	.axis-article-page {
		grid-template-columns: 1fr;
		gap: calc(var(--axis-spacing-unit) * 2);
	}

	.axis-article-sidebar {
		order: 2;
		/* Move sidebar below content on mobile */
	}
}

/* ============================================================================
   ARTICLE SIDEBAR (Left column - Metadata)
   ========================================================================== */

.axis-article-sidebar {
	/* Sticky removed - let content flow naturally */
	text-align: left;
}

.axis-sidebar-block {
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
	border-bottom: 1px solid var(--axis-border);
}

.axis-sidebar-block:last-child {
	border-bottom: none;
}

.axis-sidebar-block__title {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--axis-text-secondary);
	margin: 0 0 0.75rem 0;
}

.axis-sidebar-block__content {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--axis-text);
}

.axis-sidebar-block__content--small {
	font-size: 0.8125rem;
	line-height: 1.7;
}

.axis-sidebar-link {
	color: var(--axis-primary);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-sidebar-link:hover {
	color: #291fd9;
	text-decoration: underline;
}

/* Keywords list */
.axis-keyword-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.axis-keyword-item {
	background: var(--axis-background-secondary);
	padding: 0.375rem 0.75rem;
	border-radius: var(--axis-radius-sm);
	font-size: 0.8125rem;
	color: var(--axis-text-secondary);
	border: 1px solid var(--axis-border);
}

/* Galley buttons (Downloads) */
.axis-galley-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-galley-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--axis-primary);
	color: white;
	text-decoration: none;
	border-radius: var(--axis-radius-md);
	font-weight: 500;
	font-size: 0.9375rem;
	transition: all var(--axis-transition-normal);
}

.axis-galley-button:hover {
	background: #291fd9;
	transform: translateY(-2px);
	box-shadow: var(--axis-shadow-md);
}

.axis-galley-button svg {
	flex-shrink: 0;
}

/* Dark mode sidebar */
html.dark-mode .axis-keyword-item {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   ARTICLE MAIN (Right column - Content)
   ========================================================================== */

.axis-article-main {
	min-width: 0;
	/* Prevent grid overflow */
}

/* Article header */
.axis-article-header {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-article-header__title {
	font-size: var(--axis-font-2xl);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 1rem 0;
	color: var(--axis-text);
}

.axis-article-header__subtitle {
	font-size: var(--axis-font-xl);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	color: var(--axis-text-secondary);
}

/* ============================================================================
   AUTHORS & AFFILIATIONS
   ========================================================================== */

.axis-article-authors {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
	padding-bottom: calc(var(--axis-spacing-unit) * 2);
	border-bottom: 1px solid var(--axis-border);
}

/* Author list */
.axis-author-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.axis-author-item {
	display: inline;
	white-space: nowrap;
	/* Prevent wrapping within author name */
}

.axis-author-item::after {
	content: ', ';
	/* Comma + space together */
	color: var(--axis-text-secondary);
}

.axis-author-item:last-child::after {
	content: '';
}

.axis-author-name {
	font-size: var(--axis-font-base);
	font-weight: 500;
	color: var(--axis-text);
}

.axis-author-affiliation-number {
	font-size: var(--axis-font-xs);
	color: var(--axis-primary);
	font-weight: 600;
	margin-left: 0.15rem;
	/* Small space between name and number */
}

.axis-author-orcid {
	display: inline-flex;
	align-items: center;
	margin-left: 0.25rem;
}

.axis-author-orcid svg {
	width: 16px;
	height: 16px;
}

.axis-author-corresponding {
	color: var(--axis-primary);
	font-size: var(--axis-font-sm);
}

/* Affiliations list (numbered) */
.axis-affiliation-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-affiliation-item {
	display: flex;
	gap: 0.5rem;
	font-size: var(--axis-font-sm);
	line-height: var(--axis-leading-normal);
	color: var(--axis-text-secondary);
}

.axis-affiliation-number {
	color: var(--axis-primary);
	font-weight: 600;
	flex-shrink: 0;
}

.axis-affiliation-text {
	flex: 1;
}

/* ============================================================================
   ARTICLE SECTIONS
   ========================================================================== */

.axis-article-abstract,
.axis-article-citation,
.axis-article-author-bios,
.axis-article-references {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
}

.axis-article-section-title {
	font-size: var(--axis-font-xl);
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	color: var(--axis-text);
	position: relative;
	padding-bottom: 0.75rem;
}

.axis-article-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--axis-primary);
	border-radius: 2px;
}

/* Abstract */
.axis-article-abstract__content {
	font-size: var(--axis-font-md);
	line-height: var(--axis-leading-relaxed);
	color: var(--axis-text);
}

/* Author biographies — accordion (<details>/<summary>, before references) */
.axis-article-author-bios__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.axis-author-bio-accordion {
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	background: var(--axis-surface);
	overflow: hidden;
}

.axis-author-bio-accordion__summary {
	list-style: none;
	cursor: pointer;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: var(--axis-font-md);
	font-weight: 600;
	color: var(--axis-text);
	line-height: var(--axis-leading-normal);
	transition: background var(--axis-transition-fast);
	user-select: none;
}

.axis-author-bio-accordion__summary::-webkit-details-marker {
	display: none;
}

.axis-author-bio-accordion__summary::marker {
	display: none;
}

.axis-author-bio-accordion__summary:hover {
	background: var(--axis-background);
}

.axis-author-bio-accordion[open] .axis-author-bio-accordion__summary {
	border-bottom: 1px solid var(--axis-border);
}

.axis-author-bio-accordion__title {
	flex: 1;
	min-width: 0;
}

.axis-author-bio-accordion__affiliation {
	font-weight: 500;
	color: var(--axis-text-secondary);
}

.axis-author-bio-accordion__chevron {
	flex-shrink: 0;
	color: var(--axis-text-secondary);
	transition: transform var(--axis-transition-fast);
}

.axis-author-bio-accordion[open] .axis-author-bio-accordion__chevron {
	transform: rotate(180deg);
}

.axis-author-bio-accordion__content {
	padding: 1rem 1.25rem 1.25rem;
}

.axis-author-bio-accordion__text {
	font-size: var(--axis-font-base);
	line-height: var(--axis-leading-relaxed);
	color: var(--axis-text);
}

.axis-author-bio-accordion__text p {
	margin: 0 0 0.75rem 0;
}

.axis-author-bio-accordion__text p:last-child {
	margin-bottom: 0;
}

/* ============================================================================
   HOW TO CITE - Tab-based with CSL Plugin
   ========================================================================== */

.axis-article-citation {
	margin: calc(var(--axis-spacing-unit) * 3) 0;
}

/* Tab Buttons */
.axis-citation-tab-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem !important;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid var(--axis-border);
	padding-bottom: 1rem;
}

.axis-citation-tab-button {
	padding: 0.375rem 0.625rem !important;
	background: transparent;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-sm);
	font-size: 0.75rem !important;
	font-weight: 500;
	color: var(--axis-text-secondary);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
	white-space: nowrap;
}

.axis-citation-tab-button:hover {
	background: var(--axis-background-secondary);
	border-color: var(--axis-primary);
	color: var(--axis-text);
}

.axis-citation-tab-button--active {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	color: white;
}

.axis-citation-tab-button--active:hover {
	background: var(--axis-primary);
	color: white;
}

/* Citation Output */
.axis-citation-output {
	padding: 1.5rem;
	background: var(--axis-background-secondary);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--axis-text);
	min-height: 80px;
}

.axis-citation-output em {
	font-style: italic;
}

/* Download Buttons */
.axis-citation-downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.axis-citation-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: transparent;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-sm);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--axis-text);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
}

.axis-citation-download-btn:hover {
	background: var(--axis-background-secondary);
	border-color: var(--axis-primary);
	color: var(--axis-primary);
}

.axis-citation-download-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Dark mode citation */
html.dark-mode .axis-citation-output {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-citation-tab-button {
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-citation-tab-button:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--axis-primary);
}

html.dark-mode .axis-citation-download-btn {
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-citation-download-btn:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.axis-citation-tab-buttons {
		gap: 0.375rem;
	}

	.axis-citation-tab-button {
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	.axis-citation-output {
		padding: 1rem;
		font-size: 0.875rem;
	}

	.axis-citation-downloads {
		flex-direction: column;
	}

	.axis-citation-download-btn {
		justify-content: center;
	}
}


html.dark-mode .axis-citation-summary:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   REFERENCES
   ========================================================================== */

.axis-reference-list {
	list-style: none;
	counter-reset: reference-counter;
	padding: 0;
	margin: 0;
}

.axis-reference-item {
	counter-increment: reference-counter;
	display: flex;
	gap: 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--axis-text);
}

.axis-reference-item::before {
	content: counter(reference-counter);
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--axis-background-secondary);
	border: 1px solid var(--axis-border);
	border-radius: 50%;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--axis-primary);
}

.axis-references-raw {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--axis-text);
}

/* Dark mode references */
html.dark-mode .axis-reference-item::before {
	background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   RESPONSIVE - Mobile
   ========================================================================== */

@media (max-width: 768px) {
	.axis-article-header__title {
		font-size: var(--axis-font-xl);
	}

	.axis-article-header__subtitle {
		font-size: var(--axis-font-lg);
	}

	.axis-article-section-title {
		font-size: var(--axis-font-lg);
	}

	.axis-article-abstract__content {
		font-size: var(--axis-font-base);
	}
}

/* ============================================================================
   ARTICLE PAGE - v2.9.1 FIXES
   ========================================================================== */

/* Sidebar divider - subtle border on right */
.axis-article-sidebar {
	border-right: 1px solid var(--axis-border);
	padding-right: calc(var(--axis-spacing-unit) * 3);
}

html.dark-mode .axis-article-sidebar {
	border-right-color: rgba(255, 255, 255, 0.1);
}

/* Issue cover image */
.axis-issue-cover {
	display: block;
	margin-bottom: 1rem;
}

.axis-issue-cover__image {
	width: 100%;
	height: auto;
	border-radius: var(--axis-radius-md);
	border: 1px solid var(--axis-border);
}

/* Authors - inline display */
.axis-author-list {
	display: inline;
	margin: 0 0 1.5rem 0;
	line-height: 1.8;
}

.axis-author-item {
	display: inline;
	font-size: var(--axis-font-base);
	font-weight: 500;
	color: var(--axis-text);
	white-space: nowrap;
	/* Prevent wrapping within author name */
}

.axis-author-item::after {
	content: none;
	/* Remove old comma */
}

/* ============================================================================
   CITATION TABS
   ========================================================================== */

.axis-citation-tabs {
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	overflow: hidden;
}

.axis-citation-tab-buttons {
	display: flex;
	border-bottom: 1px solid var(--axis-border);
	background: var(--axis-background-secondary);
}

.axis-citation-tab-button {
	flex: 1;
	padding: 0.875rem 1rem;
	background: transparent;
	border: none;
	border-right: 1px solid var(--axis-border);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--axis-text-secondary);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
}

.axis-citation-tab-button:last-child {
	border-right: none;
}

.axis-citation-tab-button:hover {
	background: var(--axis-background);
	color: var(--axis-text);
}

.axis-citation-tab-button--active {
	background: var(--axis-background);
	color: var(--axis-primary);
	font-weight: 600;
	position: relative;
}

.axis-citation-tab-button--active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--axis-primary);
}

.axis-citation-tab-contents {
	position: relative;
}

.axis-citation-tab-content {
	display: none;
	padding: 1.5rem;
}

.axis-citation-tab-content--active {
	display: block;
}

.axis-citation-text {
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--axis-text);
}

.axis-citation-bibtex {
	background: var(--axis-background-secondary);
	padding: 1rem;
	border-radius: var(--axis-radius-sm);
	border: 1px solid var(--axis-border);
	font-family: var(--axis-font-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--axis-text);
	overflow-x: auto;
}

/* Dark mode */
html.dark-mode .axis-citation-tab-buttons {
	background: rgba(255, 255, 255, 0.03);
}

html.dark-mode .axis-citation-tab-button--active {
	background: rgba(255, 255, 255, 0.05);
}

html.dark-mode .axis-citation-bibtex {
	background: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
   REFERENCES - SHOW MORE/LESS
   ========================================================================== */

.axis-reference-item--hidden {
	display: none;
}

.axis-reference-toggle {
	text-align: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--axis-border);
}

.axis-reference-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--axis-background-secondary);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--axis-text);
	cursor: pointer;
	transition: all var(--axis-transition-normal);
}

.axis-reference-toggle-btn:hover {
	background: var(--axis-background);
	border-color: var(--axis-primary);
	color: var(--axis-primary);
}

.axis-reference-toggle-icon {
	transition: transform var(--axis-transition-normal);
}

/* Dark mode */
html.dark-mode .axis-reference-toggle-btn {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-reference-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   GALLEY BUTTON HOVER FIX
   ========================================================================== */

.axis-galley-button {
	color: white !important;
	/* Force white text */
}

.axis-galley-button:hover {
	background: #291fd9;
	color: white !important;
	/* Force white text on hover */
}

html.dark-mode .axis-galley-button {
	color: white !important;
}

html.dark-mode .axis-galley-button:hover {
	background: #291fd9;
	color: white !important;
}

/* ============================================================================
   ARTICLE SIDEBAR - ISSUE BLOCK (v2.9.3)
   ========================================================================== */

/* Issue block - no border on top for cover image */
.axis-sidebar-block--issue {
	padding-bottom: calc(var(--axis-spacing-unit) * 2);
	border-bottom: 1px solid var(--axis-border);
}

/* Issue cover in sidebar */
.axis-issue-cover {
	display: block;
	margin-bottom: 1rem;
}

.axis-issue-cover__image {
	width: 100%;
	height: auto;
	border-radius: var(--axis-radius-md);
	border: 1px solid var(--axis-border);
}

/* Issue identification link */
.axis-sidebar-link--issue {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 1.5rem;
}

/* Subtitle for galley section */
.axis-sidebar-block__subtitle {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--axis-text-secondary);
	margin: 0 0 0.75rem 0;
}

/* Galley list in sidebar - compact */
.axis-sidebar-block--issue .axis-galley-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Galley buttons in sidebar - smaller, cleaner */
.axis-sidebar-block--issue .axis-galley-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	background: var(--axis-primary);
	color: white !important;
	text-decoration: none;
	border-radius: var(--axis-radius-md);
	font-weight: 500;
	font-size: 0.875rem;
	transition: all var(--axis-transition-normal);
}

.axis-sidebar-block--issue .axis-galley-button:hover {
	background: #291fd9;
	transform: translateY(-1px);
	box-shadow: var(--axis-shadow-sm);
	color: white !important;
}

.axis-sidebar-block--issue .axis-galley-button svg {
	flex-shrink: 0;
}

/* Dark mode */
html.dark-mode .axis-sidebar-block--issue .axis-galley-button {
	color: white !important;
}

html.dark-mode .axis-sidebar-block--issue .axis-galley-button:hover {
	background: #291fd9;
	color: white !important;
}

/* ============================================================================
   ABOUT & INFO PAGES - UNIFIED STYLES
   ========================================================================== */

/* Page wrapper */
.axis-page {
	min-height: 60vh;
}

.axis-page-container {
	max-width: var(--axis-container-width);
	margin: 0 auto;
	padding: calc(var(--axis-spacing-unit) * 2) var(--axis-spacing-unit);
}

/* Page header */
.axis-page-header {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
	padding-bottom: calc(var(--axis-spacing-unit) * 2);
	border-bottom: 2px solid var(--axis-border);
}

.axis-page-title {
	font-size: var(--axis-font-3xl);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	color: var(--axis-text);
}

@media (max-width: 768px) {
	.axis-page-title {
		font-size: 2rem;
	}
}

/* Page content */
.axis-page-content {
	/* Full width - no restriction */
}

/* Content sections */
.axis-content-section {
	margin-bottom: calc(var(--axis-spacing-unit) * 4);
}

.axis-content-section__title {
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 1.5rem 0;
	color: var(--axis-text);
	position: relative;
	padding-bottom: 0.75rem;
}

.axis-content-section__title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--axis-primary);
	border-radius: 2px;
}

.axis-content-section__body {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--axis-text);
}

/* Rich content support (tables, lists, etc) */
.axis-content-section__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.axis-content-section__body table th,
.axis-content-section__body table td {
	padding: 0.75rem;
	border: 1px solid var(--axis-border);
	text-align: left;
}

.axis-content-section__body table th {
	background: var(--axis-background-secondary);
	font-weight: 600;
}

.axis-content-section__body ul,
.axis-content-section__body ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.axis-content-section__body li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.axis-content-section__body p {
	margin-bottom: 1rem;
}

.axis-content-section__body h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 2rem 0 1rem 0;
	color: var(--axis-text);
}

/* Empty state */
.axis-empty-state {
	text-align: center;
	padding: calc(var(--axis-spacing-unit) * 6) var(--axis-spacing-unit);
}

.axis-empty-state__icon {
	color: var(--axis-text-secondary);
	margin-bottom: 1.5rem;
	opacity: 0.5;
}

.axis-empty-state__text {
	font-size: 1.125rem;
	color: var(--axis-text-secondary);
	margin: 0;
}

/* ============================================================================
   CONTACT PAGE SPECIFIC
   ========================================================================== */

.axis-contact-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: calc(var(--axis-spacing-unit) * 4);
}

.axis-page--contact .axis-contact-layout {
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
}

.axis-page--contact .axis-contact-card {
	box-sizing: border-box;
	min-width: 0;
}

.axis-page--contact .axis-contact-card a {
	overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
	.axis-contact-layout {
		grid-template-columns: 1fr;
	}
}

/* Contact cards */
.axis-contact-card {
	background: var(--axis-background-secondary);
	padding: calc(var(--axis-spacing-unit) * 2);
	border-radius: var(--axis-radius-lg);
	border: 1px solid var(--axis-border);
}

.axis-contact-card__name {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--axis-text);
	margin-bottom: 0.5rem;
}

.axis-contact-card__title {
	font-size: 1rem;
	color: var(--axis-text-secondary);
	margin-bottom: 0.25rem;
}

.axis-contact-card__affiliation {
	font-size: 0.9375rem;
	color: var(--axis-text-secondary);
	margin-bottom: 1.5rem;
}

.axis-contact-card__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	font-size: 0.9375rem;
}

.axis-contact-card__item svg {
	flex-shrink: 0;
	color: var(--axis-primary);
}

.axis-contact-card__item a {
	color: var(--axis-primary);
	text-decoration: none;
	transition: color var(--axis-transition-normal);
}

.axis-contact-card__item a:hover {
	color: #291fd9;
	text-decoration: underline;
}

/* Contact sidebar */
.axis-contact-sidebar {
	position: sticky;
	top: calc(var(--axis-spacing-unit) * 2);
	align-self: start;
}

.axis-sidebar-section {
	background: var(--axis-background-secondary);
	padding: calc(var(--axis-spacing-unit) * 1.5);
	border-radius: var(--axis-radius-md);
	border: 1px solid var(--axis-border);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-sidebar-section__title {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--axis-text-secondary);
	margin: 0 0 1rem 0;
}

.axis-sidebar-section__body {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--axis-text);
}

/* ============================================================================
   SUBMISSIONS PAGE - SECTION POLICIES
   ========================================================================== */

.axis-section-policy {
	background: var(--axis-background-secondary);
	padding: calc(var(--axis-spacing-unit) * 2);
	border-radius: var(--axis-radius-md);
	border-left: 4px solid var(--axis-primary);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-section-policy__title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--axis-text);
	margin: 0 0 1rem 0;
}

.axis-section-policy__content {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--axis-text);
}

/* Dark mode */
html.dark-mode .axis-page-header {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-contact-card,
html.dark-mode .axis-sidebar-section,
html.dark-mode .axis-section-policy {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   CONTENT BOX - Subtle border and shadow
   ========================================================================== */

.axis-content-box {
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: calc(var(--axis-spacing-unit) * 3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
	.axis-content-box {
		padding: calc(var(--axis-spacing-unit) * 2);
	}
}

/* Content box typography */
.axis-content-box p {
	margin-bottom: 1rem;
	line-height: 1.8;
}

.axis-content-box h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 2rem 0 1rem 0;
	color: var(--axis-text);
}

.axis-content-box h2:first-child {
	margin-top: 0;
}

.axis-content-box h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 1.5rem 0 1rem 0;
	color: var(--axis-text);
}

.axis-content-box ul,
.axis-content-box ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.axis-content-box li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.axis-content-box table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.axis-content-box table th,
.axis-content-box table td {
	padding: 0.75rem;
	border: 1px solid var(--axis-border);
	text-align: left;
}

.axis-content-box table th {
	background: var(--axis-background-secondary);
	font-weight: 600;
}

.axis-content-box a {
	color: var(--axis-primary);
	text-decoration: none;
}

.axis-content-box a:hover {
	text-decoration: underline;
}

/* Masthead / editorial team: TinyMCE often uses | separated inline icon links (.j_board); global img{display:block}
   and .axis-rich-content img{margin-bottom} break those rows — reset inside this box only */
.axis-editorial-team-html {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.axis-editorial-team-html img {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 0.2em;
	border-radius: 2px;
}

.axis-editorial-team-html p {
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.75;
}

.axis-editorial-team-html a {
	display: inline;
	vertical-align: baseline;
}

.axis-editorial-team-html .j_board {
	display: block;
}

.axis-editorial-team-html table {
	display: table;
	width: 100%;
	table-layout: auto;
}

.axis-editorial-team-html thead {
	display: table-header-group;
}

.axis-editorial-team-html tbody {
	display: table-row-group;
}

.axis-editorial-team-html tr {
	display: table-row;
}

.axis-editorial-team-html th,
.axis-editorial-team-html td {
	display: table-cell;
	vertical-align: top;
}

/* Dark mode */
html.dark-mode .axis-content-box {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   SKIP TO CONTENT LINK - Accessibility (hide but accessible)
   ========================================================================== */


.axis-skip-link:focus {
	top: 0;
}

/* Remove any red border that might be showing */

/* ============================================================================
   ARTICLE COVER IMAGE (v2.11.1)
   ========================================================================== */

.axis-article-cover {
	display: block;
	margin-bottom: 1rem;
}

.axis-article-cover__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--axis-radius-md);
	border: 1px solid var(--axis-border);
}

/* ============================================================================
   SKIP TO CONTENT LINK - Properly Hidden
   ========================================================================== */

.axis-skip-link {
	position: absolute !important;
	top: -999px !important;
	left: -999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

.axis-skip-link:focus {
	position: fixed !important;
	top: 10px !important;
	left: 10px !important;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	background: var(--axis-primary);
	color: white !important;
	padding: 12px 24px;
	border-radius: 4px;
	font-weight: 600;
	z-index: 99999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   ARTICLE COVER - Clickable with Overlay
   ========================================================================== */

.axis-article-cover--clickable {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.axis-article-cover__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
	border-radius: var(--axis-radius-md);
}

.axis-article-cover--clickable:hover .axis-article-cover__overlay {
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
}

.axis-article-cover__overlay svg {
	color: white;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.axis-article-cover--clickable:hover .axis-article-cover__image {
	transform: scale(1.03);
}

.axis-article-cover__image {
	transition: all 0.3s ease;
	pointer-events: none;
}

/* ============================================================================
   IMAGE MODAL
   ========================================================================== */

.axis-image-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.axis-image-modal--active {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.axis-image-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.92);
	cursor: pointer;
}

.axis-image-modal__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	z-index: 1;
}

.axis-image-modal__img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.axis-image-modal__close {
	position: absolute;
	top: -50px;
	right: 0;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.axis-image-modal__close:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: rotate(90deg);
}

@media (max-width: 768px) {
	.axis-image-modal__close {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
	}

	.axis-image-modal__content {
		max-width: 95vw;
		max-height: 95vh;
	}
}

/* ============================================================================
   SUBMISSION CHECKLIST STYLING
   ========================================================================== */

.axis-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1rem;
	line-height: 1.6;
}

.axis-checklist li:before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--axis-primary);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.875rem;
}

.axis-checklist li:last-child {
	margin-bottom: 0;
}

/* Dark mode */
html.dark-mode .axis-checklist li:before {
	background: var(--axis-primary);
	color: white;
}

/* ============================================================================
   SECTION ITEMS (Submissions Page)
   ========================================================================== */

.axis-section-item {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
	padding-bottom: calc(var(--axis-spacing-unit) * 3);
	border-bottom: 1px solid var(--axis-border);
}

.axis-section-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.axis-section-item__title {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
	color: var(--axis-text);
}

.axis-section-item__policy {
	margin-bottom: 1.5rem;
	line-height: 1.7;
	color: var(--axis-text-secondary);
}

.axis-section-item__policy p {
	margin-bottom: 1rem;
}

.axis-section-item__policy p:last-child {
	margin-bottom: 0;
}

.axis-section-item__actions {
	margin-top: 1.5rem;
}

/* Button Styles - Submissions Page Specific */
.axis-btn-primary {
	background: transparent;
	color: var(--axis-primary);
	border: 2px solid var(--axis-primary);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--axis-radius-md);
	transition: all var(--axis-transition-normal);
	cursor: pointer;
}

.axis-btn-primary:hover {
	background: var(--axis-primary);
	color: #ffffff !important;
	border-color: var(--axis-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.axis-btn svg {
	flex-shrink: 0;
}

/* Dark mode */
html.dark-mode .axis-section-item {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .axis-section-item__title {
	color: var(--axis-text);
}

html.dark-mode .axis-section-item__policy {
	color: var(--axis-text-secondary);
}

html.dark-mode .axis-btn-primary {
	background: transparent;
	color: #ffffff;
	border-color: var(--axis-primary);
}

html.dark-mode .axis-btn-primary:hover {
	background: var(--axis-primary);
	color: #ffffff !important;
	border-color: var(--axis-primary);
}

/* Mobile responsive */
@media (max-width: 768px) {
	.axis-section-item {
		margin-bottom: calc(var(--axis-spacing-unit) * 2);
		padding-bottom: calc(var(--axis-spacing-unit) * 2);
	}

	.axis-section-item__title {
		font-size: 1.25rem;
	}

	.axis-btn {
		width: 100%;
		justify-content: center;
		padding: 0.875rem 1rem;
	}
}

/* ============================================================================
   CONTACT PAGE - PUBLISHER & SOCIAL MEDIA
   ========================================================================== */

/* Publisher Link */
.axis-publisher-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--axis-primary);
	text-decoration: none;
	font-weight: 500;
	transition: all var(--axis-transition-normal);
}

.axis-publisher-link:hover {
	color: var(--axis-primary-dark);
	text-decoration: underline;
}

.axis-publisher-link svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Social Media Links */
.axis-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.axis-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--axis-background-secondary);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	color: var(--axis-text-secondary);
	text-decoration: none;
	transition: all var(--axis-transition-normal);
}

.axis-social-link:hover {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.axis-social-link svg {
	flex-shrink: 0;
}

/* Dark mode */
html.dark-mode .axis-publisher-link {
	color: var(--axis-primary-light);
}

html.dark-mode .axis-publisher-link:hover {
	color: var(--axis-primary);
}

html.dark-mode .axis-social-link {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--axis-text-secondary);
}

html.dark-mode .axis-social-link:hover {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	color: white;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.axis-social-links {
		gap: 0.4rem;
	}

	.axis-social-link {
		width: 36px;
		height: 36px;
	}

	.axis-social-link svg {
		width: 18px;
		height: 18px;
	}
}

/* ============================================================================
   ANNOUNCEMENTS - Simple & Clean
   ========================================================================== */

/* Announcements List */
.axis-announcements-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.axis-announcement-item {
	background: var(--axis-surface);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: 1.5rem;
	transition: all var(--axis-transition-normal);
}

.axis-announcement-item:hover {
	border-color: var(--axis-primary);
	transform: translateY(-2px);
	box-shadow: var(--axis-shadow-md);
}

.axis-announcement-item__title {
	margin: 0 0 0.75rem 0;
	font-size: var(--axis-font-lg);
	font-weight: 600;
	line-height: 1.4;
}

.axis-announcement-item__title a {
	color: var(--axis-heading);
	text-decoration: none;
	transition: color var(--axis-transition-fast);
}

.axis-announcement-item__title a:hover {
	color: var(--axis-primary);
}

.axis-announcement-item__meta {
	font-size: var(--axis-font-sm);
	color: var(--axis-text-secondary);
	margin-bottom: 0.75rem;
}

.axis-announcement-item__description {
	color: var(--axis-text);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.axis-announcement-item__actions {
	display: flex;
}



.axis-link-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--axis-primary);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: all var(--axis-transition-fast);
}

.axis-link-more:hover {
	gap: 0.75rem;
	text-decoration: none;
}

.axis-link-more svg {
	transition: transform var(--axis-transition-fast);
}

.axis-link-more:hover svg {
	transform: translateX(2px);
}

/* Page Meta (for dates, etc) */
/* Page Meta (for dates, etc) */
.axis-page-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	margin-top: 0.75rem;
}

.axis-page-meta svg {
	flex-shrink: 0;
}

/* Page Actions (for back buttons, etc) */
.axis-page-actions {
	margin-top: 2rem;
}


/* Link Back */
.axis-link-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--axis-text-secondary);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: all var(--axis-transition-fast);
}

.axis-link-back:hover {
	color: var(--axis-primary);
	gap: 0.75rem;
	text-decoration: none;
}

.axis-link-back svg {
	transition: transform var(--axis-transition-fast);
}

.axis-link-back:hover svg {
	transform: translateX(-2px);
}


/* ============================================================================
   MESSAGE & ERROR PAGES
   ========================================================================== */

/* Message Box (System Messages) */
.axis-message-box {
	max-width: 600px;
	margin: calc(var(--axis-spacing-unit) * 4) auto;
	padding: calc(var(--axis-spacing-unit) * 2);
	border-radius: var(--axis-radius-lg);
	text-align: center;
}

.axis-message-box--info {
	background: rgba(79, 70, 229, 0.05);
	border: 2px solid rgba(79, 70, 229, 0.2);
}

.axis-message-box--error {
	background: rgba(239, 68, 68, 0.05);
	border: 2px solid rgba(239, 68, 68, 0.2);
}

.axis-message-box--success {
	background: rgba(16, 185, 129, 0.05);
	border: 2px solid rgba(16, 185, 129, 0.2);
}

.axis-message-box--warning {
	background: rgba(245, 158, 11, 0.05);
	border: 2px solid rgba(245, 158, 11, 0.2);
}

.axis-message-box__icon {
	margin-bottom: 1.5rem;
}

.axis-message-box--info .axis-message-box__icon svg {
	color: var(--axis-primary);
}

.axis-message-box--error .axis-message-box__icon svg {
	color: #EF4444;
}

.axis-message-box--success .axis-message-box__icon svg {
	color: #10B981;
}

.axis-message-box--warning .axis-message-box__icon svg {
	color: #F59E0B;
}

.axis-message-box__content {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--axis-text);
}

.axis-message-actions {
	text-align: center;
	margin-top: calc(var(--axis-spacing-unit) * 2);
}

.axis-message-actions .axis-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Error Box */
.axis-error-box {
	max-width: 700px;
	margin: calc(var(--axis-spacing-unit) * 4) auto;
	padding: calc(var(--axis-spacing-unit) * 3);
	text-align: center;
}

.axis-error-box__icon {
	margin-bottom: 2rem;
}

.axis-error-box__icon svg {
	color: #EF4444;
	margin: 0 auto;
}

.axis-error-box__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--axis-heading);
	margin-bottom: 1rem;
}

.axis-error-box__message {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--axis-text-secondary);
	margin-bottom: 2rem;
}

.axis-error-box__actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.axis-error-box__actions .axis-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Button Styles for Messages/Errors */
.axis-btn {
	padding: 0.75rem 1.5rem;
	border-radius: var(--axis-radius-md);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--axis-transition-fast);
	border: 2px solid transparent;
	cursor: pointer;
	font-size: 0.9375rem;
}

.axis-btn--primary {
	background: var(--axis-primary);
	color: white;
	border-color: var(--axis-primary);
}

.axis-btn--primary:hover {
	background: #3730A3;
	border-color: #3730A3;
	transform: translateY(-1px);
	box-shadow: var(--axis-shadow-md);
}

.axis-btn--secondary {
	background: transparent;
	color: var(--axis-primary);
	border-color: var(--axis-primary);
}

.axis-btn--secondary:hover {
	background: var(--axis-primary);
	color: white;
	transform: translateY(-1px);
}

/* Dark Mode */
html.dark-mode .axis-message-box--info {
	background: rgba(79, 70, 229, 0.1);
	border-color: rgba(79, 70, 229, 0.3);
}

html.dark-mode .axis-message-box--error {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.3);
}

html.dark-mode .axis-message-box--success {
	background: rgba(16, 185, 129, 0.1);
	border-color: rgba(16, 185, 129, 0.3);
}

html.dark-mode .axis-message-box--warning {
	background: rgba(245, 158, 11, 0.1);
	border-color: rgba(245, 158, 11, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
	.axis-error-box__title {
		font-size: 1.5rem;
	}

	.axis-error-box__actions {
		flex-direction: column;
	}

	.axis-error-box__actions .axis-btn {
		width: 100%;
		justify-content: center;
	}
}


/* ============================================================================
   HERO FALLBACK - No Image Styling (Same as with image)
   ========================================================================== */

/* When no image, use SECONDARY color + overlay (customizable from admin!) */
.axis-hero--no-image {
	background: var(--axis-secondary);
	position: relative;
}

/* Dark overlay (same as with image) */
.axis-hero--no-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
	pointer-events: none;
	z-index: 1;
}

/* Content on top of overlay */
.axis-hero--no-image .axis-hero__content {
	position: relative;
	z-index: 2;
}

/* Light mode - use secondary with lighter overlay */
html:not(.dark-mode) .axis-hero--no-image {
	/* Keep secondary color in light mode too */
	background: var(--axis-secondary);
	/* But add subtle lightening filter */
	filter: brightness(1.1) saturate(0.9);
}

/* Light mode - lighter overlay */
html:not(.dark-mode) .axis-hero--no-image::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}



/* ============================================================================
   AUTH PAGES - Login, Register, Lost Password
   ========================================================================== */

/* Auth page wrapper - centered card */
.axis-auth-page {
	min-height: calc(100vh - 400px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--axis-spacing-unit) * 3) calc(var(--axis-spacing-unit) * 2);
}

.axis-auth-card {
	background: var(--axis-card-bg);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: calc(var(--axis-spacing-unit) * 3);
	max-width: 480px;
	width: 100%;
	box-shadow: var(--axis-shadow-md);
}

.axis-auth-card__header {
	text-align: center;
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-auth-card__title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: calc(var(--axis-spacing-unit));
	color: var(--axis-heading-color);
}

.axis-auth-card__subtitle {
	font-size: 1rem;
	color: var(--axis-text-secondary);
	margin: 0;
}

/* Login message / notices */
.axis-auth-notice {
	background: rgba(var(--axis-primary-rgb), 0.1);
	border: 1px solid rgba(var(--axis-primary-rgb), 0.3);
	border-radius: var(--axis-radius-md);
	padding: calc(var(--axis-spacing-unit));
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	color: var(--axis-primary);
	font-size: 0.9375rem;
}

/* Error messages */
.axis-form-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: var(--axis-radius-md);
	padding: calc(var(--axis-spacing-unit));
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	color: #EF4444;
	font-size: 0.9375rem;
}

html:not(.dark-mode) .axis-form-error {
	background: rgba(239, 68, 68, 0.15);
}

/* Success messages */
.axis-form-success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.3);
	border-radius: var(--axis-radius-md);
	padding: calc(var(--axis-spacing-unit));
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	color: #10B981;
	font-size: 0.9375rem;
}

/* Form fields */
.axis-form-group {
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-form-label {
	display: block;
	font-weight: 500;
	margin-bottom: calc(var(--axis-spacing-unit) * 0.5);
	color: var(--axis-text-primary);
	font-size: 0.9375rem;
}

.axis-form-label .required {
	color: #EF4444;
	margin-left: 2px;
}

.axis-form-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-md);
	background: var(--axis-bg);
	color: var(--axis-text-primary);
	font-size: 1rem;
	transition: all var(--axis-transition-normal);
	font-family: inherit;
}

.axis-form-input:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}

.axis-form-input::placeholder {
	color: var(--axis-text-tertiary);
}

/* Textarea */
textarea.axis-form-input {
	resize: vertical;
	min-height: 120px;
}

/* Checkbox */
.axis-form-checkbox {
	display: flex;
	align-items: center;
	gap: calc(var(--axis-spacing-unit) * 0.5);
}

.axis-form-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--axis-primary);
}

.axis-form-checkbox label {
	cursor: pointer;
	font-size: 0.9375rem;
	color: var(--axis-text-primary);
	margin: 0;
}

/* Form helper text */
.axis-form-helper {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	margin-top: calc(var(--axis-spacing-unit) * 0.5);
}

/* Form link (forgot password, etc) */
.axis-form-link {
	display: inline-block;
	margin-top: calc(var(--axis-spacing-unit) * 0.5);
	font-size: 0.9375rem;
	color: var(--axis-primary);
	text-decoration: none;
	transition: color var(--axis-transition-fast);
}

.axis-form-link:hover {
	color: var(--axis-link-hover);
	text-decoration: underline;
}

/* Form footer / actions */
.axis-form-actions {
	margin-top: calc(var(--axis-spacing-unit) * 2);
	display: flex;
	flex-direction: column;
	gap: calc(var(--axis-spacing-unit));
}

.axis-form-actions .axis-btn {
	width: 100%;
	justify-content: center;
}

/* Divider */
.axis-auth-divider {
	text-align: center;
	margin: calc(var(--axis-spacing-unit) * 2) 0;
	position: relative;
}

.axis-auth-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--axis-border);
}

.axis-auth-divider span {
	background: var(--axis-card-bg);
	padding: 0 calc(var(--axis-spacing-unit));
	position: relative;
	z-index: 1;
	color: var(--axis-text-secondary);
	font-size: 0.875rem;
}

/* Additional links (register, back to login) */
.axis-auth-footer {
	text-align: center;
	margin-top: calc(var(--axis-spacing-unit) * 2);
	padding-top: calc(var(--axis-spacing-unit) * 2);
	border-top: 1px solid var(--axis-border);
}

.axis-auth-footer p {
	margin: 0;
	color: var(--axis-text-secondary);
	font-size: 0.9375rem;
}

.axis-auth-footer a {
	color: var(--axis-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--axis-transition-fast);
}

.axis-auth-footer a:hover {
	color: var(--axis-link-hover);
	text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
	.axis-auth-page {
		padding: calc(var(--axis-spacing-unit) * 2) calc(var(--axis-spacing-unit));
	}

	.axis-auth-card {
		padding: calc(var(--axis-spacing-unit) * 2);
	}

	.axis-auth-card__title {
		font-size: 1.75rem;
	}
}


/* Select (dropdown) styling */
select.axis-form-input {
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
}

select.axis-form-input::-ms-expand {
	display: none;
}

/* Fieldset reset */
fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

legend {
	padding: 0;
	margin-bottom: 16px;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--axis-heading-color);
}


/* ============================================
   RANKING BADGE (Most Viewed)
   ============================================ */
.axis-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	background: var(--axis-primary);
	color: #ffffff;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.axis-rank-badge__number {
	line-height: 1;
}

/* Dark mode */
body.dark-mode .axis-rank-badge {
	background: var(--axis-primary);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================

/* ============================================
   ARTICLE BADGES (Type & DOI) - UPDATED
   ============================================ */

/* Badge Container */
.axis-article-badges {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* Badge Base Style */
.axis-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	transition: all 0.2s ease;
	text-decoration: none;
	cursor: default;
	white-space: nowrap;
	/* Keep badge content on single line */
}

.axis-badge__icon {
	flex-shrink: 0;
}

/* DOI Icon (IMG) */
.axis-badge__icon--doi {
	display: block;
}

.axis-badge__text {
	display: inline;
}

/* Article Type Badge (Left) - Primary color lighter tone */
.axis-badge--type {
	background: rgba(44, 95, 141, 0.1);
	/* Primary color 10% opacity */
	color: var(--axis-primary);
	border: 2px solid rgba(44, 95, 141, 0.25);
}

.axis-badge--type .axis-badge__icon {
	/* Icon uses currentColor from parent */
	color: var(--axis-primary);
}

/* DOI Badge (Right) - Link, Blue theme */
.axis-badge--doi {
	background: rgba(59, 130, 246, 0.1);
	color: #3b82f6;
	border: 2px solid rgba(59, 130, 246, 0.3);
	cursor: pointer;
}

/* NO text decoration on DOI link */
.axis-badge--doi,
.axis-badge--doi:hover,
.axis-badge--doi:focus,
.axis-badge--doi:active {
	text-decoration: none !important;
}

.axis-badge--doi:hover {
	background: rgba(59, 130, 246, 0.2);
	border-color: rgba(59, 130, 246, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.axis-badge--doi:active {
	transform: translateY(0);
}

/* Dark Mode Adjustments */
body.dark-mode .axis-badge--type {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .axis-badge--type .axis-badge__icon {
	/* Icon inherits white from parent color */
	color: #ffffff;
}

body.dark-mode .axis-badge--doi {
	background: rgba(59, 130, 246, 0.15);
	color: #60a5fa;
	border-color: rgba(96, 165, 250, 0.4);
}

body.dark-mode .axis-badge--doi:hover {
	background: rgba(59, 130, 246, 0.25);
	border-color: rgba(96, 165, 250, 0.6);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Responsive */
@media (max-width: 640px) {
	.axis-article-badges {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.axis-badge {
		font-size: 0.75rem;
		/* Smaller for long DOIs */
		padding: 6px 12px;
	}

	.axis-badge__icon,
	.axis-badge__icon--doi {
		width: 14px;
		height: 14px;
	}
}

/* ============================================
   COMPACT METADATA ITEMS (Sidebar)
   ============================================ */

/* Compact block - reduced spacing */
.axis-sidebar-block--compact {
	padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

/* Metadata item - inline label:value */
.axis-metadata-item {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.axis-metadata-item:last-child {
	margin-bottom: 0;
}

/* Label - semi-bold, muted */
.axis-metadata-label {
	font-weight: 600;
	color: var(--axis-text-muted);
	white-space: nowrap;
}

/* Value - regular weight */
.axis-metadata-value {
	color: var(--axis-text);
	font-weight: 400;
}

/* Dark mode */
body.dark-mode .axis-metadata-label {
	color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .axis-metadata-value {
	color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   SOCIAL SHARING BUTTONS
   ============================================ */

.axis-article-share {
	margin-top: calc(var(--axis-spacing-unit) * 4);
	padding-top: calc(var(--axis-spacing-unit) * 3);
	border-top: 1px solid var(--axis-border);
}

.axis-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: calc(var(--axis-spacing-unit) * 2);
}

.axis-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	border: 2px solid transparent;
}

.axis-share-btn svg {
	flex-shrink: 0;
}

.axis-share-btn span {
	white-space: nowrap;
}

/* Twitter */
.axis-share-btn--twitter {
	background: #1DA1F2;
	color: #ffffff;
}

.axis-share-btn--twitter:hover {
	background: #0d8bd9;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
}

/* Facebook */
.axis-share-btn--facebook {
	background: #1877F2;
	color: #ffffff;
}

.axis-share-btn--facebook:hover {
	background: #0e63d4;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

/* LinkedIn */
.axis-share-btn--linkedin {
	background: #0A66C2;
	color: #ffffff;
}

.axis-share-btn--linkedin:hover {
	background: #084f96;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

/* Email */
.axis-share-btn--email {
	background: var(--axis-bg-secondary);
	color: var(--axis-text);
	border-color: var(--axis-border);
}

.axis-share-btn--email:hover {
	background: var(--axis-bg);
	border-color: var(--axis-primary);
	color: var(--axis-primary);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
body.dark-mode .axis-share-btn--email {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .axis-share-btn--email:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--axis-primary);
}

/* Responsive */
@media (max-width: 640px) {
	.axis-share-buttons {
		flex-direction: column;
	}

	.axis-share-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ============================================
   MINIMAL SOCIAL SHARE ICONS (Sidebar)
   ============================================ */

.axis-sidebar-block--share {
	padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

/* Inline: "Paylaş: [icons]" */
.axis-share-inline {
	display: flex;
	align-items: center;
	gap: 12px;
}

.axis-share-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--axis-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.axis-share-icons {
	display: flex;
	gap: 8px;
}

.axis-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: var(--axis-bg-secondary);
	color: var(--axis-text-muted);
	transition: all 0.2s ease;
	text-decoration: none;
}

.axis-share-icon svg {
	flex-shrink: 0;
}

.axis-share-icon:hover {
	color: var(--axis-primary);
	background: rgba(44, 95, 141, 0.1);
	transform: translateY(-2px);
}

/* Dark mode */
body.dark-mode .axis-share-label {
	color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .axis-share-icon {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .axis-share-icon:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/* ============================================
   KEYWORDS - COMMA SEPARATED TEXT
   ============================================ */

.axis-keywords-text {
	line-height: 1.7;
	color: var(--axis-text);
}

/* Dark mode */
body.dark-mode .axis-keywords-text {
	color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   MOBILE EXPANDABLE SEARCH
   ============================================ */

/* Mobile search container - hidden by default */
.axis-mobile-search {
	display: none;
	/* Completely hidden */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--axis-bg);
	border-top: 1px solid var(--axis-border);
	padding: 1rem;
	z-index: 100;
	/* Lower than header actions */
}

/* Show on mobile only when active */
@media (max-width: 768px) {
	.axis-mobile-search.is-active {
		display: block;
		/* Show when active */
		animation: slideDown 0.2s ease;
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile search form */
.axis-mobile-search form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* Close button */
.axis-mobile-search-close {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--axis-bg-secondary);
	border: 1px solid var(--axis-border);
	border-radius: 6px;
	color: var(--axis-text);
	cursor: pointer;
	transition: all 0.2s ease;
}

.axis-mobile-search-close:hover {
	background: var(--axis-bg-tertiary);
	color: var(--axis-primary);
}

/* Search input - full width */
.axis-mobile-search-input {
	flex: 1;
	height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--axis-border);
	border-radius: 6px;
	font-size: 1rem;
	background: var(--axis-bg);
	color: var(--axis-text);
}

.axis-mobile-search-input:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}

/* Submit button */
.axis-mobile-search-submit {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--axis-primary);
	border: none;
	border-radius: 6px;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.axis-mobile-search-submit:hover {
	opacity: 0.9;
	transform: scale(1.05);
}

/* Hide other actions when search is active */
@media (max-width: 1023px) {
	.axis-header__actions.search-active>*:not(.axis-mobile-menu-toggle) {
		opacity: 0;
		pointer-events: none;
	}
}

/* Dark mode */
body.dark-mode .axis-mobile-search {
	background: var(--axis-bg);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-mobile-search-close {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .axis-mobile-search-close:hover {
	background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-mobile-search-input {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   MOBILE HEADER - SEARCH BUTTON
   ============================================ */

@media (max-width: 768px) {

	/* Mobile search trigger button */
	.axis-header__actions .axis-search-button {
		display: flex;
		width: 40px;
		height: 40px;
		padding: 0;
		align-items: center;
		justify-content: center;
		background: var(--axis-primary);
		color: #ffffff;
		border: none;
		border-radius: 6px;
		cursor: pointer;
	}

	/* Hide text in header search button */
	.axis-header__actions .axis-search-button span {
		display: none;
	}
}

/* ============================================
   MOBILE SEARCH TRIGGER BUTTON
   ============================================ */

/* Hide mobile search trigger on desktop */
.axis-mobile-search-trigger {
	display: none;
}

@media (max-width: 768px) {

	/* Show mobile search trigger */
	.axis-mobile-search-trigger {
		display: flex;
		width: 40px;
		height: 40px;
		padding: 0;
		align-items: center;
		justify-content: center;
		background: var(--axis-primary);
		color: #ffffff;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.axis-mobile-search-trigger:hover {
		opacity: 0.9;
		transform: scale(1.05);
	}
}

/* ============================================
   MOBILE HEADER - DARK MODE
   ============================================ */

@media (max-width: 768px) {
	body.dark-mode .axis-header__brand {
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
}

/* ============================================
   MOBILE SEARCH LINK (Simple)
   ============================================ */

/* Hide mobile search link on desktop */
.axis-mobile-search-link {
	display: none;
}

@media (max-width: 768px) {

	/* Show mobile search link */
	.axis-mobile-search-link {
		display: flex;
		width: 40px;
		height: 40px;
		padding: 0;
		align-items: center;
		justify-content: center;
		background: var(--axis-bg-secondary);
		color: var(--axis-text);
		border: 1px solid var(--axis-border);
		border-radius: 6px;
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.axis-mobile-search-link:hover {
		background: var(--axis-bg-tertiary);
		color: var(--axis-primary);
		transform: scale(1.05);
	}

	.axis-mobile-search-link svg {
		flex-shrink: 0;
	}
}

/* Dark mode */
body.dark-mode .axis-mobile-search-link {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .axis-mobile-search-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/* ============================================
   MOBILE HEADER - SOCIAL MEDIA
   ============================================ */

@media (max-width: 768px) {

	/* Always show social media on mobile if available */
	.axis-social-media {
		display: flex !important;
		gap: 0.5rem;
	}

	.axis-social-link {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--axis-bg-secondary);
		border: 1px solid var(--axis-border);
		border-radius: 6px;
		color: var(--axis-text-muted);
		transition: all 0.2s ease;
	}

	.axis-social-link:hover {
		color: var(--axis-primary);
		background: var(--axis-bg-tertiary);
	}

	.axis-social-link svg {
		width: 18px;
		height: 18px;
	}
}

/* Dark mode for social icons */
body.dark-mode .axis-social-link {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .axis-social-link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/* ============================================
   SEARCH PAGE
   ============================================ */

.axis-page--search {
	padding: calc(var(--axis-spacing-unit) * 3) 0;
}

.axis-search-form {
	background: var(--axis-bg);
	border: 1px solid var(--axis-border);
	border-radius: 12px;
	padding: calc(var(--axis-spacing-unit) * 2);
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
}

/* Main Search Input */
.axis-search-main {
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-search-input-group {
	display: flex;
	gap: 0.5rem;
}

.axis-search-input {
	flex: 1;
	padding: 1rem 1.5rem;
	border: 2px solid var(--axis-border);
	border-radius: 8px;
	font-size: 1rem;
	transition: all 0.2s ease;
	height: 56px;
	/* Explicit height to match button */
	box-sizing: border-box;
}

.axis-search-input:focus {
	outline: none;
	border-color: var(--axis-primary);
	box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}

/* Search page button - more specific selector to override global */
.axis-search-input-group .axis-search-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: var(--axis-primary);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	height: 56px;
	/* Match input height */
	box-sizing: border-box;
}

.axis-search-input-group .axis-search-button:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Advanced Filters */
.axis-search-advanced {
	border-top: 1px solid var(--axis-border);
	padding-top: calc(var(--axis-spacing-unit) * 1.5);
	margin-top: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-search-advanced-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--axis-primary);
	cursor: pointer;
	list-style: none;
}

.axis-search-advanced-toggle::-webkit-details-marker {
	display: none;
}

.axis-search-filters {
	margin-top: calc(var(--axis-spacing-unit) * 1.5);
	display: grid;
	gap: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-filter-label {
	font-weight: 600;
	color: var(--axis-text);
}

.axis-label-sm {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	margin-bottom: 0.25rem;
	display: block;
}

.axis-date-range {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 1rem;
	align-items: center;
}

.axis-date-separator {
	color: var(--axis-text-muted);
}

.axis-date-input {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.axis-select,
.axis-input {
	padding: 0.75rem 1rem;
	border: 1px solid var(--axis-border);
	border-radius: 6px;
	background: var(--axis-bg);
	color: var(--axis-text);
	font-size: 1rem;
}

.axis-select:focus,
.axis-input:focus {
	outline: none;
	border-color: var(--axis-primary);
}

/* Results */
.axis-results-header {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-results-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--axis-text);
}

.axis-results-list {
	display: grid;
	gap: calc(var(--axis-spacing-unit) * 2);
}

.axis-result-item {
	background: var(--axis-bg);
	border: 1px solid var(--axis-border);
	border-radius: 8px;
	padding: calc(var(--axis-spacing-unit) * 1.5);
	transition: all 0.2s ease;
}

.axis-result-item:hover {
	border-color: var(--axis-primary);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* No Results */
.axis-no-results {
	text-align: center;
	padding: calc(var(--axis-spacing-unit) * 4);
}

.axis-no-results-icon {
	color: var(--axis-text-muted);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-no-results-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--axis-text);
	margin-bottom: 0.5rem;
}

.axis-no-results-message {
	font-size: 1.125rem;
	color: var(--axis-text-secondary);
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-no-results-tips {
	max-width: 500px;
	margin: 0 auto;
	text-align: left;
	background: var(--axis-bg-secondary);
	padding: calc(var(--axis-spacing-unit) * 1.5);
	border-radius: 8px;
}

.axis-no-results-tips h3 {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.axis-no-results-tips ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-no-results-tips li {
	padding: 0.5rem 0;
	padding-left: 1.5rem;
	position: relative;
}

.axis-no-results-tips li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--axis-primary);
}

/* Responsive */
@media (max-width: 768px) {
	.axis-search-input-group {
		flex-direction: column;
	}

	.axis-date-range {
		grid-template-columns: 1fr;
	}

	.axis-date-separator {
		display: none;
	}
}

/* Dark mode */
body.dark-mode .axis-search-form,
body.dark-mode .axis-result-item {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-no-results-tips {
	background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   SITE INDEX (Multiple Journals)
   ============================================ */

.axis-page--site-index {
	padding: calc(var(--axis-spacing-unit) * 1.5) 0 calc(var(--axis-spacing-unit) * 2) 0;
	min-height: auto;
}

.axis-site-about {
	max-width: 1200px;
	margin: 0 auto calc(var(--axis-spacing-unit) * 1.5);
	padding: calc(var(--axis-spacing-unit) * 1.5);
	background: var(--axis-bg-secondary);
	border-radius: 12px;
	border: 1px solid var(--axis-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	line-height: 1.5;
	color: var(--axis-text-secondary);
	font-size: 0.9375rem;
}

.axis-journals {
	margin-top: 0;
}

.axis-page-title--centered {
	text-align: center;
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	font-size: 2rem;
	font-weight: 700;
}

/* Journal Grid - STRICT 2 Columns - Higher specificity */
.axis-journals-grid--horizontal {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: calc(var(--axis-spacing-unit) * 1.25);
	max-width: 1200px;
	margin: 0 auto;
}

/* Journal Card - Horizontal Layout - NIVO STYLE: 2 rows */
.axis-journal-card--horizontal {
	background: var(--axis-bg-secondary);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--axis-border);
	transition: all 0.3s ease;
	display: grid;
	grid-template-columns: 180px 1fr;
	grid-template-rows: auto auto;
	gap: 0;
	padding: 0;
	height: fit-content;
}

.axis-journal-card--horizontal:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	border-color: var(--axis-primary);
}

/* Image Wrapper - Top left */
.axis-journal-card--horizontal .axis-journal-card__image-wrapper {
	width: 180px;
	height: 240px;
	flex-shrink: 0;
	grid-row: 1;
	grid-column: 1;
	padding: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-journal-card--horizontal .axis-journal-card__image {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid var(--axis-border);
}

.axis-journal-card--horizontal .axis-journal-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.axis-journal-card--horizontal .axis-journal-card__image--placeholder {
	background: var(--axis-bg-secondary);
	border: 2px dashed var(--axis-border);
}

.axis-journal-card--horizontal .axis-journal-card__image--placeholder svg {
	color: var(--axis-text-tertiary);
	opacity: 0.3;
	width: 48px;
	height: 48px;
}

/* Content - Top right */
.axis-journal-card--horizontal .axis-journal-card__content {
	display: flex;
	flex-direction: column;
	gap: calc(var(--axis-spacing-unit) * 0.75);
	min-width: 0;
	grid-row: 1;
	grid-column: 2;
	padding: calc(var(--axis-spacing-unit) * 1.5);
	padding-left: 0;
}

.axis-journal-card--horizontal .axis-journal-card__title {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.axis-journal-card--horizontal .axis-journal-card__title a {
	color: var(--axis-text-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.axis-journal-card--horizontal .axis-journal-card__title a:hover {
	color: var(--axis-primary);
}

/* ISSN - Under title */
.axis-journal-card--horizontal .axis-journal-card__issn {
	display: flex;
	gap: calc(var(--axis-spacing-unit) * 0.75);
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
	flex-wrap: wrap;
}

.axis-journal-card--horizontal .axis-issn-item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--axis-bg-primary);
	border: 1px solid var(--axis-border);
	border-radius: 6px;
	font-size: 0.875rem;
}

.axis-journal-card--horizontal .axis-issn-item strong {
	color: var(--axis-text-primary);
	font-weight: 600;
}

/* Actions - Bottom row, FULL WIDTH */
.axis-journal-card--horizontal .axis-journal-card__actions {
	display: flex;
	gap: calc(var(--axis-spacing-unit) * 0.75);
	flex-wrap: wrap;
	grid-row: 2;
	grid-column: 1 / -1;
	padding: calc(var(--axis-spacing-unit) * 1.25);
	border-top: 1px solid var(--axis-border);
	background: var(--axis-bg-primary);
	align-items: center;
}

.axis-journal-card--horizontal .axis-btn--small {
	padding: 0.5rem 1.25rem;
	font-size: var(--axis-font-sm);
	white-space: nowrap;
	font-weight: 500;
}

/* Dark mode */
body.dark-mode .axis-journal-card--horizontal {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-journal-card--horizontal:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--axis-primary);
}

body.dark-mode .axis-journal-card--horizontal .axis-journal-card__image {
	background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .axis-journal-card--horizontal .axis-issn-item {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-journal-card--horizontal .axis-journal-card__actions {
	background: rgba(255, 255, 255, 0.02);
	border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-journal-card--horizontal .axis-journal-card__image {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
	.axis-journals-grid--horizontal {
		grid-template-columns: 1fr !important;
		gap: calc(var(--axis-spacing-unit) * 1.5);
	}

	.axis-journal-card--horizontal {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 0;
		padding: 0;
	}

	.axis-journal-card--horizontal .axis-journal-card__image-wrapper {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		max-width: 200px;
		margin: 0 auto;
		grid-row: 1;
		grid-column: 1;
		padding: calc(var(--axis-spacing-unit) * 1.5);
	}

	.axis-journal-card--horizontal .axis-journal-card__content {
		grid-row: 2;
		grid-column: 1;
		padding: 0 calc(var(--axis-spacing-unit) * 1.5) calc(var(--axis-spacing-unit) * 1.5);
		text-align: center;
	}

	.axis-journal-card--horizontal .axis-journal-card__title {
		font-size: 1.25rem;
	}

	.axis-journal-card--horizontal .axis-journal-card__issn {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}

	.axis-journal-card--horizontal .axis-journal-card__actions {
		grid-row: 3;
		grid-column: 1;
		flex-direction: column;
		gap: calc(var(--axis-spacing-unit) * 0.75);
		padding: calc(var(--axis-spacing-unit) * 1.5);
	}

	.axis-journal-card--horizontal .axis-btn--small {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	/* Page-level mobile adjustments */
	.axis-page--site-index {
		padding: calc(var(--axis-spacing-unit)) 0;
	}

	.axis-site-about {
		margin: 0 calc(var(--axis-spacing-unit)) calc(var(--axis-spacing-unit) * 1.5);
		padding: calc(var(--axis-spacing-unit));
		font-size: var(--axis-font-sm);
	}

	.axis-page-title--centered {
		font-size: 1.5rem;
		margin-bottom: calc(var(--axis-spacing-unit));
	}
}

/* ============================================
   SUBSCRIPTIONS
   ============================================ */

.axis-page--subscriptions,
.axis-page--user-subscriptions {
	padding: calc(var(--axis-spacing-unit) * 3) 0;
}

.axis-subscription-section {
	margin-bottom: calc(var(--axis-spacing-unit) * 4);
}

.axis-section-title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.axis-section-description {
	color: var(--axis-text-secondary);
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-subscription-table {
	overflow-x: auto;
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-subscription-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--axis-bg);
	border: 1px solid var(--axis-border);
	border-radius: 8px;
}

.axis-subscription-table thead {
	background: var(--axis-bg-secondary);
}

.axis-subscription-table th,
.axis-subscription-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--axis-border);
}

.axis-subscription-table th {
	font-weight: 600;
	color: var(--axis-text);
}

.axis-subscription-table tr:last-child td {
	border-bottom: none;
}

.axis-sub-name {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.axis-sub-desc {
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
}

.axis-sub-cost {
	font-weight: 600;
	color: var(--axis-primary);
}

.axis-subscription-action {
	margin-top: calc(var(--axis-spacing-unit) * 1.5);
}

.axis-subscription-card {
	padding: calc(var(--axis-spacing-unit) * 1.5);
	background: var(--axis-bg);
	border: 1px solid var(--axis-border);
	border-radius: 8px;
	margin-bottom: 1rem;
}

.axis-info-box {
	padding: calc(var(--axis-spacing-unit) * 1.5);
	background: var(--axis-bg-secondary);
	border-radius: 8px;
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

/* ============================================
   CATALOG CATEGORY
   ============================================ */

.axis-page--catalog-category {
	padding: calc(var(--axis-spacing-unit) * 3) 0;
}

.axis-category-info {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: calc(var(--axis-spacing-unit) * 2);
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
	padding: calc(var(--axis-spacing-unit) * 2);
	background: var(--axis-bg-secondary);
	border-radius: 12px;
}

.axis-category-image img {
	width: 100%;
	border-radius: 8px;
}

.axis-category-description {
	color: var(--axis-text-secondary);
	line-height: 1.6;
}

.axis-subcategories {
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
}

.axis-subcategories h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.axis-subcategories ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-subcategories li a {
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--axis-bg-secondary);
	border: 1px solid var(--axis-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--axis-text);
	transition: all 0.2s ease;
}

.axis-subcategories li a:hover {
	background: var(--axis-primary);
	border-color: var(--axis-primary);
	color: #ffffff;
}

.axis-category-articles h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

/* ============================================
   BUTTONS
   ============================================ */

.axis-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
}

/* ============================================
   FORM WRAPPER
   ============================================ */

.axis-form-wrapper {
	max-width: 600px;
	margin: calc(var(--axis-spacing-unit) * 2) 0;
	padding: calc(var(--axis-spacing-unit) * 2);
	background: var(--axis-bg);
	border: 1px solid var(--axis-border);
	border-radius: 12px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.axis-category-info {
		grid-template-columns: 1fr;
	}

	.axis-subscription-table {
		font-size: 0.875rem;
	}

	.axis-subscription-table th,
	.axis-subscription-table td {
		padding: 0.75rem 0.5rem;
	}
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode .axis-journal-card,
body.dark-mode .axis-subscription-card,
body.dark-mode .axis-form-wrapper {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-site-about,
body.dark-mode .axis-info-box,
body.dark-mode .axis-category-info {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .axis-subscription-table thead {
	background: rgba(255, 255, 255, 0.05);
}

/* ============================================
   SEARCH RESULTS - COMPACT LAYOUT
   ============================================ */

/* Compact article card without image */
.axis-results-list .axis-article-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0;
	border-radius: 8px;
	overflow: visible;
}

.axis-results-list .axis-article-card__content {
	padding: calc(var(--axis-spacing-unit) * 1.5);
	flex: 1;
}

/* Make metadata more compact */
.axis-results-list .axis-article-meta {
	margin-top: 0.75rem;
}

/* Smaller title in search results */
.axis-results-list .axis-article-title {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 0.75rem;
}

/* Compact authors */
.axis-results-list .axis-article-authors {
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

/* Compact abstract */
.axis-results-list .axis-article-abstract {
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-top: 0.75rem;
}

/* Remove excessive spacing */
.axis-results-list .axis-article-section {
	font-size: 0.8125rem;
}

/* More compact meta info */
.axis-results-list .axis-article-meta-item {
	font-size: 0.8125rem;
}

/* Responsive */
@media (max-width: 768px) {
	.axis-results-list .axis-article-card {
		flex-direction: column;
	}
}

/* ============================================
   SEARCH - CUSTOM DATE SELECTS
   ============================================ */

.axis-date-selects {
	display: flex;
	gap: 0.5rem;
}

.axis-date-selects select {
	flex: 1;
	min-width: 0;
}

/* Year select wider */
.axis-date-selects select[name*="Year"] {
	flex: 0 0 90px;
}

/* Month select wider */
.axis-date-selects select[name*="Month"] {
	flex: 1 1 auto;
	min-width: 120px;
}

/* Day select narrow */
.axis-date-selects select[name*="Day"] {
	flex: 0 0 70px;
}

@media (max-width: 768px) {
	.axis-date-selects {
		flex-direction: column;
	}

	.axis-date-selects select {
		width: 100%;
	}
}

/* ============================================
   ARTICLE - CATEGORIES SIDEBAR
   ============================================ */

.axis-sidebar-block--categories {
	margin-bottom: calc(var(--axis-spacing-unit) * 2);
}

.axis-category-inline {
	line-height: 1.6;
}

.axis-category-link-inline {
	color: var(--axis-primary);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline;
}

.axis-category-link-inline:hover {
	color: var(--axis-text-primary);
	text-decoration: underline;
}

/* Dark mode */
body.dark-mode .axis-category-link-inline {
	color: var(--axis-primary);
}

body.dark-mode .axis-category-link-inline:hover {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
}

/* ============================================
   SITE FOOTER (indexSite.tpl)
   ============================================ */

.axis-site-footer {
	background: var(--axis-bg-secondary);
	border-top: 1px solid var(--axis-border);
	padding: calc(var(--axis-spacing-unit) * 4) 0 calc(var(--axis-spacing-unit) * 2);
	margin-top: calc(var(--axis-spacing-unit) * 6);
}

.axis-site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--axis-spacing-unit) * 3);
	margin-bottom: calc(var(--axis-spacing-unit) * 3);
}

.axis-site-footer__column {
	min-width: 0;
}

.axis-site-footer__title {
	font-size: var(--axis-font-lg);
	font-weight: 600;
	color: var(--axis-text-primary);
	margin: 0 0 calc(var(--axis-spacing-unit));
}

.axis-site-footer__content {
	font-size: var(--axis-font-sm);
	line-height: 1.6;
	color: var(--axis-text-secondary);
}

.axis-site-footer__content p {
	margin: 0 0 calc(var(--axis-spacing-unit));
}

.axis-site-footer__content a {
	color: var(--axis-primary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.axis-site-footer__content a:hover {
	color: var(--axis-text-primary);
	text-decoration: underline;
}

.axis-site-footer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-site-footer__nav li {
	margin-bottom: calc(var(--axis-spacing-unit) * 0.75);
}

.axis-site-footer__nav a {
	color: var(--axis-text-secondary);
	text-decoration: none;
	font-size: 0.9375rem;
	transition: color 0.2s ease;
	display: inline-block;
}

.axis-site-footer__nav a:hover {
	color: var(--axis-primary);
	transform: translateX(4px);
}

/* Dark mode */
body.dark-mode .axis-site-footer {
	background: rgba(255, 255, 255, 0.03);
	border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-site-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
	.axis-site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--axis-spacing-unit) * 2);
	}
}

@media (max-width: 768px) {
	.axis-site-footer__grid {
		grid-template-columns: 1fr;
	}

	.axis-site-footer__bottom {
		flex-direction: column;
		gap: calc(var(--axis-spacing-unit));
		text-align: center;
	}
}

/* ============================================
   SITE INDEX - JOURNAL CARDS ENHANCEMENTS
   ============================================ */

.axis-journal-card__image--placeholder {
	background: var(--axis-bg-secondary);
	border: 1px solid var(--axis-border);
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
}

.axis-journal-card__image--placeholder svg {
	color: var(--axis-text-tertiary);
	opacity: 0.5;
}

.axis-journal-card__issn {
	display: flex;
	gap: calc(var(--axis-spacing-unit) * 1.5);
	margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
	font-size: 0.875rem;
	color: var(--axis-text-secondary);
}

.axis-issn-item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.axis-issn-item strong {
	color: var(--axis-text-primary);
	font-weight: 600;
}

.axis-journal-card__actions {
	display: flex;
	gap: calc(var(--axis-spacing-unit));
	flex-wrap: wrap;
}

.axis-btn--small {
	padding: 0.5rem 1rem;
	font-size: var(--axis-font-sm);
}

.axis-btn--outline {
	background: transparent;
	border: 1px solid var(--axis-border);
	color: var(--axis-text-primary);
}

.axis-btn--outline:hover {
	background: var(--axis-bg-secondary);
	border-color: var(--axis-primary);
	color: var(--axis-primary);
}

/* Dark mode */
body.dark-mode .axis-journal-card__image--placeholder {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-btn--outline {
	border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .axis-btn--outline:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--axis-primary);
}

/* Responsive */
@media (max-width: 768px) {
	.axis-journal-card__issn {
		flex-direction: column;
		gap: 0.5rem;
	}

	.axis-journal-card__actions {
		flex-direction: column;
	}

	.axis-btn--small {
		width: 100%;
		text-align: center;
	}
}

/* ============================================================================
   AUTH PAGES FIX - Login, Register, Forgot Password Submit Buttons
   ============================================================================ */

/* Login page submit button */
.page_login button[type="submit"],
.page_login input[type="submit"] {
	background-color: var(--axis-primary) !important;
	color: #ffffff !important;
	border: 2px solid var(--axis-primary) !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-size: 1rem !important;
	min-width: 120px !important;
}

.page_login button[type="submit"]:hover,
.page_login input[type="submit"]:hover {
	background-color: transparent !important;
	color: var(--axis-primary) !important;
	border-color: var(--axis-primary) !important;
}

/* Register page submit button */
.page_user.op_register button[type="submit"],
.page_user.op_register input[type="submit"] {
	background-color: var(--axis-primary) !important;
	color: #ffffff !important;
	border: 2px solid var(--axis-primary) !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-size: 1rem !important;
	min-width: 120px !important;
}

.page_user.op_register button[type="submit"]:hover,
.page_user.op_register input[type="submit"]:hover {
	background-color: transparent !important;
	color: var(--axis-primary) !important;
	border-color: var(--axis-primary) !important;
}

/* Forgot password page submit button */
.page_login.op_lostPassword button[type="submit"],
.page_login.op_lostPassword input[type="submit"] {
	background-color: var(--axis-primary) !important;
	color: #ffffff !important;
	border: 2px solid var(--axis-primary) !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-size: 1rem !important;
	min-width: 120px !important;
}

.page_login.op_lostPassword button[type="submit"]:hover,
.page_login.op_lostPassword input[type="submit"]:hover {
	background-color: transparent !important;
	color: var(--axis-primary) !important;
	border-color: var(--axis-primary) !important;
}

/* Dark mode adjustments */
html.dark-mode .page_login button[type="submit"],
html.dark-mode .page_login input[type="submit"],
html.dark-mode .page_user.op_register button[type="submit"],
html.dark-mode .page_user.op_register input[type="submit"],
html.dark-mode .page_login.op_lostPassword button[type="submit"],
html.dark-mode .page_login.op_lostPassword input[type="submit"] {
	background-color: var(--axis-primary) !important;
	color: #ffffff !important;
	border-color: var(--axis-primary) !important;
}

html.dark-mode .page_login button[type="submit"]:hover,
html.dark-mode .page_login input[type="submit"]:hover,
html.dark-mode .page_user.op_register button[type="submit"]:hover,
html.dark-mode .page_user.op_register input[type="submit"]:hover,
html.dark-mode .page_login.op_lostPassword button[type="submit"]:hover,
html.dark-mode .page_login.op_lostPassword input[type="submit"]:hover {
	background-color: transparent !important;
	color: var(--axis-primary) !important;
	border-color: var(--axis-primary) !important;
}

/* ============================================================================

/* ============================================================================
   CUSTOM BLOCKS SECTION (Before Footer) - TITLE OUTSIDE CARD
   ========================================================================== */

.axis-custom-blocks-section {
	background: var(--axis-surface);
	padding: 3rem 0;
	margin-top: 3rem;
	border-top: 1px solid var(--axis-border);
	border-bottom: 1px solid var(--axis-border);
}

.axis-custom-blocks-container-full {
	width: 100%;
	max-width: 100% !important;
	/* Override any container limits */
	padding: 0 3rem;
	/* More breathing room */
}

/* Full-width mode: Show more blocks, slightly smaller for better fit */
.axis-custom-blocks-container-full .axis-custom-block-wrapper {
	flex: 0 0 300px;
	/* Slightly wider than boxed (280px) */
	min-width: 300px;
	max-width: 300px;
}

/* Visual distinction: Darker background for full-width */
.axis-custom-blocks-container-full~.axis-custom-blocks-section {
	background: var(--axis-background);
}


.axis-custom-blocks-scroll {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	padding-bottom: 1rem;

	/* Styled scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--axis-primary) transparent;
}

.axis-custom-blocks-scroll::-webkit-scrollbar {
	height: 8px;
}

.axis-custom-blocks-scroll::-webkit-scrollbar-track {
	background: var(--axis-surface);
	border-radius: 4px;
}

.axis-custom-blocks-scroll::-webkit-scrollbar-thumb {
	background: var(--axis-primary);
	border-radius: 4px;
	transition: background var(--axis-transition-fast);
}

.axis-custom-blocks-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--axis-secondary);
}

/* Block Wrapper (title + card container) */
.axis-custom-block-wrapper {
	flex: 0 0 280px;
	min-width: 280px;
	max-width: 280px;
	display: flex;
	flex-direction: column;
}

/* Block Title (outside card, on top) */
.axis-custom-block__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	color: var(--axis-primary);
	line-height: 1.4;
	padding: 0 0.25rem;
}

/* Block Card (content only) */
.axis-custom-block {
	position: relative;
	/* For absolute positioned indicator and gradient */
	flex: 1;
	background: var(--axis-background);
	border: 1px solid var(--axis-border);
	border-radius: var(--axis-radius-lg);
	padding: 1.5rem;
	overflow-y: auto;
	overflow-x: hidden;
	transition: all var(--axis-transition);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	max-height: 350px;
}

.axis-custom-block-wrapper:hover .axis-custom-block {
	transform: translateY(-4px);
	box-shadow: var(--axis-shadow-lg);
	border-color: var(--axis-primary);
}

.axis-custom-block-wrapper:hover .axis-custom-block__title {
	color: var(--axis-secondary);
}

/* Block Content */
.axis-custom-block__content {
	position: relative;
	/* For absolute positioned gradient */
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--axis-text-secondary);
}

/* Content inside blocks */
.axis-custom-block__content p {
	margin: 0 0 0.75rem 0;
}

.axis-custom-block__content p:last-child {
	margin-bottom: 0;
}

.axis-custom-block__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0.5rem 0;
	border-radius: var(--axis-radius-md);
}

.axis-custom-block__content a {
	color: var(--axis-primary);
	text-decoration: none;
	transition: color var(--axis-transition-fast);
}

.axis-custom-block__content a:hover {
	color: var(--axis-secondary);
	text-decoration: underline;
}

/* Custom scrollbar - ALWAYS VISIBLE */
.axis-custom-block::-webkit-scrollbar {
	width: 8px;
	/* Always visible, no hover needed */
}

.axis-custom-block::-webkit-scrollbar-track {
	background: var(--axis-surface);
	border-radius: 4px;
}

.axis-custom-block::-webkit-scrollbar-thumb {
	background: var(--axis-primary);
	border-radius: 4px;
	transition: background 0.2s ease;
}

.axis-custom-block::-webkit-scrollbar-thumb:hover {
	background: var(--axis-secondary);
}

/* Firefox scrollbar - ALWAYS VISIBLE */
.axis-custom-block {
	scrollbar-width: thin;
	/* Always visible */
	scrollbar-color: var(--axis-primary) var(--axis-surface);
}

/* Responsive */
@media (max-width: 1024px) {
	.axis-custom-block-wrapper {
		flex: 0 0 260px;
		min-width: 260px;
		max-width: 260px;
	}
}

@media (max-width: 768px) {
	.axis-custom-blocks-section {
		padding: 2rem 0;
		margin-top: 2rem;
	}

	.axis-custom-blocks-container-full {
		padding: 0 1rem;
	}

	.axis-custom-block-wrapper {
		flex: 0 0 240px;
		min-width: 240px;
		max-width: 240px;
	}

	.axis-custom-block {
		max-height: 320px;
		padding: 1.25rem;
	}

	.axis-custom-blocks-scroll {
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.axis-custom-block-wrapper {
		flex: 0 0 220px;
		min-width: 220px;
		max-width: 220px;
	}
}


/* ============================================================================
   FULL-WIDTH MODE ENHANCEMENTS
   ========================================================================== */

/* Full-width section: Edge-to-edge appearance */
.axis-custom-blocks-section--full {
	background: var(--axis-background);
	/* Different from boxed */
	padding: 3rem 0;
}

/* Full-width container styling */
.axis-custom-blocks-container-full {
	width: 100%;
	max-width: 100% !important;
	/* Override any container limits */
	padding: 0 3rem;
	/* More breathing room on edges */
}

/* Full-width: Slightly wider blocks for better use of space */
.axis-custom-blocks-section--full .axis-custom-block-wrapper {
	flex: 0 0 300px;
	/* 300px vs 280px in boxed */
	min-width: 300px;
	max-width: 300px;
}

/* Full-width: Remove some borders for cleaner edge-to-edge look */
.axis-custom-blocks-section--full {
	border-top: none;
	border-bottom: 1px solid var(--axis-border);
	box-shadow: 0 1px 0 var(--axis-border);
	/* Subtle top shadow instead */
}

/* Responsive: Full-width adjustments */
@media (max-width: 1024px) {
	.axis-custom-blocks-container-full {
		padding: 0 2rem;
	}

	.axis-custom-blocks-section--full .axis-custom-block-wrapper {
		flex: 0 0 280px;
		/* Same as boxed on smaller screens */
		min-width: 280px;
		max-width: 280px;
	}
}

@media (max-width: 768px) {
	.axis-custom-blocks-container-full {
		padding: 0 1.5rem;
	}
}

@media (max-width: 480px) {
	.axis-custom-blocks-container-full {
		padding: 0 1rem;
	}
}


/* ============================================================================
   SCROLL INDICATORS FOR CUSTOM BLOCKS
   ========================================================================== */

/* 1. FADE GRADIENT at bottom (always visible) */
.axis-custom-block__content::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom,
			transparent 0%,
			var(--axis-background) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--axis-transition);
}

/* Show gradient when content is scrollable */
.axis-custom-block.has-scroll .axis-custom-block__content::after {
	opacity: 1;
}

.axis-custom-block.scroll-at-bottom .axis-custom-block__content::after {
	opacity: 0;
}

/* Keyword cloud block: wide layout is clipped by overflow-x:hidden + max-height; auto-scroll fights the widget */
.axis-custom-block[data-block-id*="keywordcloud"] {
	overflow-x: auto;
	overflow-y: visible;
	max-height: none;
	min-height: 200px;
}

.axis-custom-block[data-block-id*="keywordcloud"] .axis-custom-block__content {
	overflow: visible;
	min-height: 160px;
}

.axis-custom-block[data-block-id*="keywordcloud"] .axis-custom-block__content::after {
	display: none;
}

/* Dark mode adjustments */
body.dark-mode .axis-custom-block__content::after {
	background: linear-gradient(to bottom,
			transparent 0%,
			rgba(255, 255, 255, 0.03) 100%);
}

body.dark-mode .axis-custom-block__scroll-indicator {
	background: #818CF8;
	box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}

body.dark-mode .axis-custom-block__scroll-indicator:hover {
	background: #34D399;
	box-shadow: 0 2px 12px rgba(52, 211, 153, 0.5);
}


/* ============================================================================
   ABOUT JOURNAL TAB CONTENT
   ============================================================================ */

.axis-about-journal-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.axis-about-section {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--axis-border);
}

.axis-about-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.axis-about-section__title {
	font-size: var(--axis-font-2xl);
	font-weight: 700;
	color: var(--axis-heading);
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.axis-about-section__title::before {
	content: '';
	width: 4px;
	height: 1.5rem;
	background: var(--axis-primary);
	border-radius: var(--axis-radius-sm);
}

.axis-about-section__content {
	font-size: var(--axis-font-base);
	line-height: 1.7;
	color: var(--axis-text);
}

.axis-about-section__content p {
	margin-bottom: 1rem;
}

.axis-about-section__content p:last-child {
	margin-bottom: 0;
}

.axis-about-section__content a.axis-btn {
	margin-top: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.axis-about-section__content strong {
	color: var(--axis-heading);
	font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
	.axis-about-journal-content {
		padding: 1.5rem 1rem;
	}

	.axis-about-section {
		margin-bottom: 2rem;
		padding-bottom: 1.5rem;
	}

	.axis-about-section__title {
		font-size: var(--axis-font-xl);
	}
}


/* Fix: Prevent grid column overflow */
.axis-footer__column {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Ensure content wraps properly */
.axis-footer__description,
.axis-footer__contact-item,
.axis-footer__links {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Breathing room before column divider (vertical line) on the right */
.axis-footer__description {
	padding-right: 5px;
}

/* Ensure links inside footer description don't break grid */
.axis-footer__description a {
	display: inline !important;
	max-width: 100% !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}

/* ============================================================================
   MOBILE COMPACT LAYOUT — kept at end of file so cascade wins over earlier
   defaults (same-specificity rules: last one wins).
   ============================================================================ */
@media (max-width: 768px) {

	/* Outer container — every pixel matters on a 393px screen */
	.axis-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	/* Article card content padding 24 → 14, title 20 → 16 */
	.axis-article-card__content {
		padding: 14px 14px 16px !important;
	}

	.axis-article-card__title {
		font-size: 1rem !important;
		line-height: 1.3 !important;
		margin-bottom: 0.5rem !important;
	}

	.axis-article-card__abstract {
		font-size: 0.8125rem !important;
		line-height: 1.5 !important;
	}

	.axis-article-card__authors {
		font-size: 0.8125rem !important;
	}

	/* Recent Articles grid — single column, tight gap, NO outer padding */
	.axis-article-grid,
	.axis-article-grid--grid,
	.axis-article-grid--list,
	.axis-article-grid--magazine,
	.axis-homepage--no-sidebar .axis-article-grid,
	.axis-homepage--no-sidebar .axis-article-grid--grid,
	.axis-homepage--no-sidebar .axis-article-grid--magazine {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		padding: 0 !important;
	}

	/* Tabs container shouldn't add extra horizontal padding on mobile */
	.axis-tabs-container,
	.axis-tab-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Editor's Pick — fit within viewport, single column for all layouts */
	.axis-epick {
		padding: 1rem 0 !important;
		margin-bottom: 1.5rem !important;
	}

	.axis-epick__layout--spotlight,
	.axis-epick__layout--bento,
	.axis-epick__layout--flip {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.axis-epick__hero,
	.axis-epick__bento-card,
	.axis-epick__bento-card--featured,
	.axis-epick__side-card,
	.axis-epick__card,
	.axis-epick__flip-card {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.axis-epick__hero,
	.axis-epick__bento-card--featured {
		min-height: 220px !important;
	}

	.axis-epick__hero-title {
		font-size: 18px !important;
		line-height: 1.25 !important;
		-webkit-line-clamp: 4 !important;
	}

	.axis-epick__bento-card--featured .axis-epick__bento-body h4 {
		font-size: 18px !important;
		line-height: 1.25 !important;
		-webkit-line-clamp: 4 !important;
	}

	.axis-epick__bento-body h4,
	.axis-epick__card-body h4,
	.axis-epick__side-body h4,
	.axis-epick__flip-body h4 {
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	.axis-epick__side-card {
		min-height: auto !important;
	}

	.axis-epick__side-cover {
		width: 56px !important;
		height: 78px !important;
	}

	/* Carousel track items — full-width visible card */
	.axis-epick__layout--carousel .axis-epick__track {
		grid-auto-columns: 88% !important;
		gap: 10px !important;
		padding: 4px 0 12px !important;
	}

	.axis-epick__nav--prev {
		left: -4px !important;
	}

	.axis-epick__nav--next {
		right: -4px !important;
	}

	/* Monograms scaled to small cards (huge serif overflows tiny boxes) */
	.axis-epick__mono--hero,
	.axis-epick__mono--bento-featured {
		font-size: 180px !important;
	}

	.axis-epick__mono--card,
	.axis-epick__mono--bento {
		font-size: 100px !important;
	}

	.axis-epick__mono--flip {
		font-size: 90px !important;
	}

	.axis-epick__mono--side {
		font-size: 36px !important;
	}
}

/* ============================================================================
   MOBILE COMPACT — phase 2 fixes
   Found via measurement:
   - .axis-homepage adds 16px side padding → kills 32px of useful space
   - Spotlight grid track resolves to intrinsic (min-content) width → hero overflows
     parent. minmax(0, 1fr) forces it to shrink.
   - .axis-epick__hero has 32px internal padding → too much on a phone
   ============================================================================ */
@media (max-width: 768px) {

	.axis-homepage,
	.axis-homepage--no-sidebar {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.axis-epick__layout--spotlight {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.axis-epick__layout--bento {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.axis-epick__hero,
	.axis-epick__bento-card,
	.axis-epick__bento-card--featured {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.axis-epick__hero {
		padding: 18px !important;
	}

	.axis-epick__bento-body {
		padding: 14px !important;
	}

	.axis-epick__bento-card--featured .axis-epick__bento-body {
		padding: 18px !important;
	}
}

/* ============================================================================
   MOBILE COMPACT — phase 3: kill tabs-content side padding (24px each side)
   ============================================================================ */
@media (max-width: 768px) {

	.axis-tabs-content,
	.axis-tab-panel {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ============================================================================
   SOCIAL MEDIA ICONS
   ============================================================================ */
.axis-social-media {
	display: flex;
	align-items: center;
	gap: 8px;
}

.axis-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--axis-text-secondary, #64748b);
	background: transparent;
	transition: color 0.2s ease, background 0.2s ease;
	text-decoration: none;
}

.axis-social-link:hover {
	color: var(--axis-primary, #FF9203);
	background: rgba(255, 146, 3, 0.1);
}

html.dark-mode .axis-social-link {
	color: #94a3b8;
}

html.dark-mode .axis-social-link:hover {
	color: var(--axis-primary, #FF9203);
	background: rgba(255, 146, 3, 0.15);
}

@media (max-width: 767px) {
	.axis-social-media {
		display: none;
	}
}

/* ============================================================================
   LIGHTBOX
   ============================================================================ */
.axis-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.axis-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.axis-lightbox__content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.axis-lightbox__image {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
	display: block;
}

.axis-lightbox__caption {
	margin-top: 12px;
	color: #e2e8f0;
	font-size: 0.9375rem;
	text-align: center;
	max-width: 600px;
	line-height: 1.5;
}

.axis-lightbox__close {
	position: absolute;
	top: -44px;
	right: -8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ffffff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
	padding: 0;
}

.axis-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Clickable image indicator */
.axis-image-clickable {
	cursor: zoom-in;
}

.axis-image-clickable:hover {
	opacity: 0.92;
}


/* ============================================================================
   FOOTER COMPLETE REDESIGN — matches reference HTML exactly
   ============================================================================ */

/* Footer 3-column grid */
.axis-footer__content {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
	padding: 48px 0 32px;
	border-bottom: 1px solid var(--axis-border, #e2e8f0);
}

@media (max-width: 1024px) {
	.axis-footer__content {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.axis-footer__column--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.axis-footer__content {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Footer column base */
.axis-footer__column {
	display: flex;
	flex-direction: column;
}

/* Footer title */
.axis-footer__title {
	font-size: 1rem;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 12px 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

html.dark-mode .axis-footer__title {
	color: #f1f5f9;
}

/* Decorative divider line */
.axis-footer__divider {
	height: 2px;
	width: 40px;
	background: var(--axis-primary, #FF9203);
	margin-bottom: 20px;
	border-radius: 2px;
}

/* Footer journal title */
.axis-footer__journal-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 12px 0;
	color: #1e293b;
}

.axis-footer__journal-title a {
	color: inherit;
	text-decoration: none;
}

html.dark-mode .axis-footer__journal-title {
	color: #f1f5f9;
}

/* Description in brand column */
.axis-footer__description {
	font-size: 0.875rem;
	color: #64748b;
	line-height: 1.7;
	margin-bottom: 16px;
}

html.dark-mode .axis-footer__description {
	color: #94a3b8;
}

.axis-footer__read-more {
	color: var(--axis-primary, #FF9203);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.axis-footer__read-more:hover {
	text-decoration: underline;
}

/* ISSN badges */
.axis-footer__issn {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.axis-issn-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: 0.8125rem;
}

html.dark-mode .axis-issn-badge {
	background: #1e293b;
	border-color: #334155;
}

.axis-issn-badge--online {
	background: rgba(255, 146, 3, 0.08);
	border-color: rgba(255, 146, 3, 0.3);
}

html.dark-mode .axis-issn-badge--online {
	background: rgba(255, 146, 3, 0.12);
}

.axis-issn-badge__label {
	font-weight: 700;
	color: var(--axis-primary, #FF9203);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.axis-issn-badge__value {
	color: #475569;
	font-weight: 500;
}

html.dark-mode .axis-issn-badge__value {
	color: #94a3b8;
}

/* Social links in footer brand column */
.axis-footer__social {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.axis-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	text-decoration: none;
}

.axis-footer__social-link:hover {
	background: var(--axis-primary, #FF9203);
	color: #ffffff;
	border-color: var(--axis-primary, #FF9203);
	text-decoration: none;
}

html.dark-mode .axis-footer__social-link {
	background: #1e293b;
	border-color: #334155;
	color: #94a3b8;
}

html.dark-mode .axis-footer__social-link:hover {
	background: var(--axis-primary, #FF9203);
	color: #ffffff;
	border-color: var(--axis-primary, #FF9203);
}

/* Navigation links in footer */
.axis-footer__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.axis-footer__links li {
	margin: 0;
}

.axis-footer__links a {
	color: #64748b;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.axis-footer__links a::before {
	content: '›';
	color: var(--axis-primary, #FF9203);
	font-weight: 700;
	line-height: 1;
}

.axis-footer__links a:hover {
	color: var(--axis-primary, #FF9203);
	text-decoration: none;
}

html.dark-mode .axis-footer__links a {
	color: #94a3b8;
}

/* Contact items */
.axis-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.axis-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	color: #64748b;
}

.axis-footer__contact-item svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--axis-primary, #FF9203);
}

.axis-footer__contact-item a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.2s ease;
}

.axis-footer__contact-item a:hover {
	color: var(--axis-primary, #FF9203);
}

html.dark-mode .axis-footer__contact-item {
	color: #94a3b8;
}

html.dark-mode .axis-footer__contact-item a {
	color: #94a3b8;
}

/* Footer bottom bar */
.axis-footer__bottom {
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.axis-footer__custom {
	font-size: 0.875rem;
	color: #64748b;
	line-height: 1.6;
}

.axis-footer__custom a {
	color: var(--axis-primary, #FF9203);
}

html.dark-mode .axis-footer__custom {
	color: #94a3b8;
}

.axis-footer__publishing-system img {
	height: 28px;
	width: auto;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.axis-footer__publishing-system img:hover {
	opacity: 1;
}

/* Override old footer CSS that might conflict */
.axis-footer .axis-footer__content {
	display: grid !important;
}

/* Footer dark-mode main background */
html.dark-mode .axis-footer {
	background: #0f172a;
	border-top-color: #1e293b;
}

/* ============================================================================
   FOOTER LOGO LINK
   ============================================================================ */
.axis-footer__logo-link {
	display: inline-block;
	margin-bottom: 12px;
}

.axis-footer__logo {
	max-height: 60px;
	width: auto;
}

/* ============================================================================
   GLOBAL CSS VARIABLE FIXES — align with reference design
   ============================================================================ */

/* Override broken primary color default (was #4F46E5, should be #FF9203) */
:root {
	--axis-primary: #FF9203;
	--axis-primary-dark: #e08003;
	--axis-secondary: #4487B6;
	--axis-primary-rgb: 255, 146, 3;
	--axis-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Fix: link hover color (was wrong purple) */
a:hover {
	color: var(--axis-primary-dark, #e08003);
}

/* Fix: nav link hover background (was purple-tinted) */
.axis-nav-list a:hover {
	background: rgba(255, 146, 3, 0.05) !important;
	border-color: var(--axis-primary) !important;
}

/* Fix: active nav item color */
.axis-nav-list li.current-menu-item>a,
.axis-nav-list a[aria-current="page"] {
	background: rgba(255, 146, 3, 0.1) !important;
	border-color: var(--axis-primary) !important;
	box-shadow: inset 0 -3px 0 0 var(--axis-primary) !important;
}

/* Fix: search input focus (was purple) */
.axis-search-input:focus {
	border-color: var(--axis-primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 146, 3, 0.15) !important;
}

/* Fix: btn primary hover (was purple) */
.axis-btn--primary:hover {
	box-shadow: 0 4px 12px rgba(255, 146, 3, 0.3) !important;
}

/* Fix: back-to-top hover */
.axis-back-to-top:hover {
	background: var(--axis-primary-dark) !important;
}

/* ============================================================================
   HEADER IMPROVEMENTS — match reference exactly
   ============================================================================ */

/* Header: match reference background (white with subtle shadow) */
.axis-header {
	background: #ffffff !important;
	backdrop-filter: none !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

html.dark-mode .axis-header {
	background: #0f172a !important;
}

/* Header inner: tighten padding to match reference */
.axis-header__inner {
	padding: 12px 0 !important;
	min-height: 70px;
}

/* Logo: reference uses max-height: 80px */
.axis-logo {
	max-height: 80px !important;
	width: auto;
}

/* Navigation: Pill buttons with border matching reference design exactly */
.axis-nav-list>li>a {
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	padding: 8px 16px !important;
	font-size: 0.9375rem !important;
	color: #334155 !important;
	font-weight: 500 !important;
	border-radius: 8px !important;
	position: relative;
	transition: all 0.2s ease !important;
	display: inline-block !important;
	line-height: 1.4 !important;
}

.axis-nav-list>li>a:hover {
	border-color: var(--axis-primary) !important;
	color: var(--axis-primary) !important;
	background: rgba(255, 146, 3, 0.04) !important;
	text-decoration: none !important;
}

.axis-nav-list>li.current-menu-item>a,
.axis-nav-list>li>a[aria-current="page"] {
	border-color: var(--axis-primary) !important;
	color: var(--axis-primary) !important;
	background: rgba(255, 146, 3, 0.08) !important;
	font-weight: 600 !important;
}

html.dark-mode .axis-nav-list>li>a {
	border-color: #334155 !important;
	background: #1e293b !important;
	color: #cbd5e1 !important;
}

html.dark-mode .axis-nav-list>li>a:hover {
	border-color: var(--axis-primary) !important;
	color: var(--axis-primary) !important;
	background: rgba(255, 146, 3, 0.12) !important;
}

/* Remove the ::before underline pseudo-element */
.axis-nav-list a::before {
	display: none !important;
}

/* Submenus */
.axis-nav-list li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	padding: 6px 0;
	z-index: 999;
	list-style: none;
	margin: 0;
}

html.dark-mode .axis-nav-list li ul {
	background: #1e293b;
	border-color: #334155;
}

.axis-nav-list li:hover>ul,
.axis-nav-list li.is-open>ul {
	display: block;
}

.axis-nav-list li ul li a {
	display: block;
	padding: 8px 16px !important;
	color: #334155 !important;
	font-size: 0.9rem !important;
	border-radius: 0 !important;
}

.axis-nav-list li ul li a:hover {
	background: rgba(255, 146, 3, 0.08) !important;
}

/* Navigation padding between header and nav */
.axis-primary-nav {
	background: var(--axis-surface, #f8fafc);
	border-top: 1px solid var(--axis-border, #e2e8f0);
}

html.dark-mode .axis-primary-nav {
	background: #0f172a;
	border-top-color: #1e293b;
}

.axis-nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

/* ============================================================================
   MAIN CONTENT SPACING
   ============================================================================ */

/* Give main content area proper top padding */
.axis-main>.axis-container {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* Homepage has hero so no extra top padding needed */
.axis-page.axis-index>.axis-container {
	padding-top: 0;
}

/* ============================================================================
   ARTICLE GRID IMPROVEMENTS
   ============================================================================ */

/* Default grid: 3 columns matches reference better */
.axis-article-grid--grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
}

@media (max-width: 900px) {
	.axis-article-grid--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.axis-article-grid--grid {
		grid-template-columns: 1fr !important;
	}
}

/* Article card improvements */
.axis-article-card {
	border-radius: 10px !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.axis-article-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Article placeholder uses primary color gradient */
.axis-article-card__image--placeholder {
	background: linear-gradient(135deg,
			var(--axis-primary, #FF9203) 0%,
			rgba(68, 135, 182, 0.75) 100%) !important;
}

/* Article section badge */
.axis-article-card__section {
	display: inline-block;
	background: rgba(255, 146, 3, 0.1);
	color: var(--axis-primary, #FF9203);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 4px;
	margin-bottom: 8px;
}

/* Article card title */
.axis-article-card__title {
	font-size: 1rem !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	margin-bottom: 8px !important;
}

.axis-article-card__title a {
	color: #1e293b !important;
}

.axis-article-card__title a:hover {
	color: var(--axis-primary) !important;
	text-decoration: none !important;
}

html.dark-mode .axis-article-card__title a {
	color: #f1f5f9 !important;
}

/* Article authors */
.axis-article-card__authors {
	font-size: 0.875rem !important;
	color: #64748b !important;
	margin-bottom: 8px !important;
}

/* Article abstract */
.axis-article-card__abstract {
	font-size: 0.875rem !important;
	color: #475569 !important;
	line-height: 1.6 !important;
}

/* Article meta date */
.axis-article-card__date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	color: #94a3b8;
}

/* Article action button */
.axis-article-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 12px !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	color: var(--axis-secondary, #4487B6) !important;
	background: rgba(68, 135, 182, 0.08) !important;
	border: 1px solid rgba(68, 135, 182, 0.25) !important;
	border-radius: 5px !important;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.axis-article-card__btn:hover {
	background: var(--axis-secondary, #4487B6) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ============================================================================
   ISSUE ARCHIVE GRID
   ============================================================================ */

/* Issue cover cards */
.axis-issue-grid-covers {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

@media (max-width: 1100px) {
	.axis-issue-grid-covers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.axis-issue-grid-covers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.axis-issue-grid-covers {
		grid-template-columns: 1fr;
	}
}

.axis-issue-card--cover {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

html.dark-mode .axis-issue-card--cover {
	background: #1e293b;
	border-color: #334155;
}

.axis-issue-card--cover:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.axis-issue-card__cover {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f1f5f9;
}

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

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

.axis-issue-card__body {
	padding: 14px 16px;
}

.axis-issue-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 6px 0;
	line-height: 1.3;
}

.axis-issue-card__title a {
	color: inherit;
	text-decoration: none;
}

.axis-issue-card__title a:hover {
	color: var(--axis-primary);
}

.axis-issue-card__date {
	font-size: 0.8125rem;
	color: #94a3b8;
}

html.dark-mode .axis-issue-card__title {
	color: #f1f5f9;
}

/* Cover mockup (when no cover image exists) */
.axis-cover-mockup {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--axis-primary, #FF9203) 0%, var(--axis-secondary, #4487B6) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.axis-cover-mockup__content {
	text-align: center;
	color: #ffffff;
}

.axis-cover-mockup__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.8;
	margin-bottom: 12px;
	font-weight: 600;
}

.axis-cover-mockup__line {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 0.875rem;
}

.axis-cover-mockup__line-label {
	opacity: 0.75;
	font-size: 0.75rem;
}

.axis-cover-mockup__line-value {
	font-weight: 700;
	font-size: 1.25rem;
}

/* ============================================================================
   SEARCH PAGE FIXES
   ============================================================================ */
.axis-search-page .axis-search-form {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html.dark-mode .axis-search-page .axis-search-form {
	background: #1e293b;
	border-color: #334155;
}

/* ============================================================================
   PAGE CONTENT BOXES
   ============================================================================ */
.axis-content-box {
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	padding: 32px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	line-height: 1.8;
}

html.dark-mode .axis-content-box {
	background: #1e293b;
	border-color: #334155;
}

/* About / editorial team content */
.axis-content-box h1,
.axis-content-box h2,
.axis-content-box h3 {
	color: #1e293b;
	margin-top: 1.5rem;
}

html.dark-mode .axis-content-box h1,
html.dark-mode .axis-content-box h2,
html.dark-mode .axis-content-box h3 {
	color: #f1f5f9;
}

/* ============================================================================
   RESPONSIVE FIXES
   ============================================================================ */

@media (max-width: 768px) {
	.axis-header__search {
		display: none;
	}

	.axis-mobile-search-link {
		display: flex !important;
	}

	.axis-footer__content {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		padding: 32px 0 !important;
	}
}

@media (max-width: 1024px) {
	.axis-social-media {
		display: none;
	}
}

/* Mobile search link — hide on desktop */
.axis-mobile-search-link {
	display: none;
}

@media (max-width: 768px) {
	.axis-mobile-search-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--axis-text);
	}
}


/* ============================================================================
   FORM STYLES — axis-form-input, axis-form-label, axis-form-group
   ============================================================================ */

.axis-form-input {
	width: 100%;
	padding: 10px 14px;
	font-size: 0.9375rem;
	font-family: var(--axis-font-family);
	color: #1e293b;
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	line-height: 1.5;
}

.axis-form-input:focus {
	border-color: var(--axis-primary, #FF9203);
	box-shadow: 0 0 0 3px rgba(255, 146, 3, 0.15);
}

.axis-form-input::placeholder {
	color: #94a3b8;
}

html.dark-mode .axis-form-input {
	background: #1e293b;
	border-color: #334155;
	color: #e2e8f0;
}

html.dark-mode .axis-form-input:focus {
	border-color: var(--axis-primary, #FF9203);
	box-shadow: 0 0 0 3px rgba(255, 146, 3, 0.12);
}

/* Select */
select.axis-form-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* Textarea */
textarea.axis-form-input {
	resize: vertical;
	min-height: 100px;
}

/* Form group */
.axis-form-group {
	margin-bottom: 16px;
}

.axis-form-label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: #1e293b;
	margin-bottom: 6px;
}

html.dark-mode .axis-form-label {
	color: #cbd5e1;
}

/* Page layout: page header */
.axis-page-header {
	margin-bottom: 28px;
}

.axis-page-title {
	font-size: 2rem;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 8px 0;
	line-height: 1.2;
}

html.dark-mode .axis-page-title {
	color: #f1f5f9;
}

.axis-page-description {
	font-size: 1.0625rem;
	color: #64748b;
	margin: 0;
}

/* Notification boxes */
.axis-notification {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	border: 1px solid transparent;
}

.axis-notification--warning {
	background: #fffbeb;
	border-color: #fbbf24;
	color: #92400e;
}

.axis-notification--error {
	background: #fef2f2;
	border-color: #fca5a5;
	color: #991b1b;
}

.axis-notification--success {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}

.axis-notification--info {
	background: #eff6ff;
	border-color: #93c5fd;
	color: #1e40af;
}

html.dark-mode .axis-notification--warning {
	background: rgba(251, 191, 36, 0.1);
	border-color: rgba(251, 191, 36, 0.3);
	color: #fde68a;
}

html.dark-mode .axis-notification--error {
	background: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.3);
	color: #fca5a5;
}

/* Page container — centers narrow pages like login/register */
.axis-page-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* ============================================================================
   ARCHIVE PAGE
   ============================================================================ */

.axis-archive-page .axis-page-header {
	padding-bottom: 16px;
	border-bottom: 2px solid var(--axis-border, #e2e8f0);
	margin-bottom: 32px;
}

.axis-archive-grid-by-year {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.axis-year-group__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 16px;
	padding-left: 12px;
	border-left: 4px solid var(--axis-primary, #FF9203);
}

html.dark-mode .axis-year-group__title {
	color: #f1f5f9;
}

/* ============================================================================
   ISSUE PAGE
   ============================================================================ */

.axis-issue-section {
	margin-bottom: 48px;
}

.axis-section__title {
	font-size: 1.375rem;
	color: #1e293b;
	margin: 0 0 20px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--axis-primary, #FF9203);
	font-weight: 700;
}

html.dark-mode .axis-section__title {
	color: #f1f5f9;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

.axis-breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.875rem;
	color: #94a3b8;
	margin-bottom: 20px;
	padding: 8px 0;
}

.axis-breadcrumbs a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.15s ease;
}

.axis-breadcrumbs a:hover {
	color: var(--axis-primary, #FF9203);
	text-decoration: none;
}

.axis-breadcrumbs__separator {
	color: #cbd5e1;
	font-size: 0.75rem;
}

.axis-breadcrumbs__current {
	color: var(--axis-primary, #FF9203);
	font-weight: 500;
}

html.dark-mode .axis-breadcrumbs a {
	color: #94a3b8;
}

/* ============================================================================
   USER NAV BAR (Login / Register links area in header)
   ============================================================================ */

.axis-user-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.axis-user-nav-list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.axis-user-nav-list a {
	display: inline-block;
	font-size: 0.875rem;
	color: #475569;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 5px;
	transition: background 0.15s ease, color 0.15s ease;
}

.axis-user-nav-list a:hover {
	background: rgba(255, 146, 3, 0.07);
	color: var(--axis-primary);
	text-decoration: none;
}

html.dark-mode .axis-user-nav-list a {
	color: #94a3b8;
}

/* ============================================================================
   SKIP LINK
   ============================================================================ */

.axis-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--axis-primary, #FF9203);
	color: #ffffff;
	padding: 8px 16px;
	border-radius: 0 0 8px 0;
	font-weight: 600;
	z-index: 99999;
	text-decoration: none;
	transition: top 0.2s ease;
}

.axis-skip-link:focus {
	top: 0;
}


/* ============================================================================
   BREADCRUMBS — Complete Reset & Modern Minimal Style
   ============================================================================ */
.cmp_breadcrumbs,
nav[aria-label="You are here:"],
nav.cmp_breadcrumbs {
	margin: 0 0 1.75rem 0 !important;
	padding: 0 !important;
}

.cmp_breadcrumbs ol,
nav[aria-label="You are here:"] ol,
.axis-breadcrumbs ol {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0.35rem !important;
	font-size: 0.875rem !important;
	color: #64748b !important;
}

.cmp_breadcrumbs ol li,
nav[aria-label="You are here:"] ol li,
.axis-breadcrumbs ol li {
	display: inline-flex !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
}

.cmp_breadcrumbs ol li::marker,
nav[aria-label="You are here:"] ol li::marker {
	display: none !important;
	content: "" !important;
}

.cmp_breadcrumbs ol li a,
nav[aria-label="You are here:"] ol li a {
	color: #64748b !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	transition: color 0.15s ease !important;
}

.cmp_breadcrumbs ol li a:hover,
nav[aria-label="You are here:"] ol li a:hover {
	color: var(--axis-primary) !important;
	text-decoration: underline !important;
}

.cmp_breadcrumbs ol li.current,
.cmp_breadcrumbs ol li[aria-current="page"],
nav[aria-label="You are here:"] ol li.current {
	color: #1e293b !important;
	font-weight: 600 !important;
}

.cmp_breadcrumbs ol li:not(:last-child)::after,
nav[aria-label="You are here:"] ol li:not(:last-child)::after {
	content: "/" !important;
	margin-left: 0.35rem !important;
	margin-right: 0.15rem !important;
	color: #94a3b8 !important;
	font-weight: 400 !important;
}

/* ============================================================================
   HERO ACTIONS & STATS BAR (Matches Reference Design)
   ============================================================================ */
.axis-hero__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1rem !important;
	margin-top: 1.5rem !important;
	flex-wrap: wrap !important;
}

.axis-hero__actions .axis-btn {
	background: var(--axis-primary, #FF9203) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0.75rem 1.75rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
	box-shadow: 0 4px 12px rgba(255, 146, 3, 0.25) !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.axis-hero__actions .axis-btn:hover {
	background: var(--axis-primary-dark, #e08003) !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(255, 146, 3, 0.35) !important;
}

/* Stats Bar */
.axis-stats-bar {
	max-width: 1200px !important;
	margin: 2rem auto 2.5rem auto !important;
	padding: 0 1rem !important;
}

.axis-stats-bar__inner {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	align-items: center !important;
	padding: 1.75rem 1rem !important;
	gap: 1rem !important;
}

html.dark-mode .axis-stats-bar__inner {
	background: #1e293b !important;
	border-color: #334155 !important;
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.2) !important;
}

.axis-stat {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	gap: 0.35rem !important;
}

.axis-stat__value {
	font-size: 2rem !important;
	font-weight: 700 !important;
	color: var(--axis-primary, #FF9203) !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 32px !important;
}

.axis-stat__value svg {
	stroke: var(--axis-primary, #FF9203) !important;
	width: 28px !important;
	height: 28px !important;
}

.axis-stat__label {
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	color: #64748b !important;
}

html.dark-mode .axis-stat__label {
	color: #94a3b8 !important;
}

@media (max-width: 900px) {
	.axis-stats-bar__inner {
		grid-template-columns: repeat(3, 1fr) !important;
		row-gap: 1.5rem !important;
	}
}

@media (max-width: 500px) {
	.axis-stats-bar__inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Header Social Links in Top Bar */
.axis-social-media {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
}

.axis-social-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border-radius: 8px !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #475569 !important;
	transition: all 0.2s ease !important;
}

.axis-social-link:hover {
	color: var(--axis-primary, #FF9203) !important;
	border-color: var(--axis-primary, #FF9203) !important;
	background: rgba(255, 146, 3, 0.05) !important;
	transform: translateY(-1px) !important;
}

html.dark-mode .axis-social-link {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #cbd5e1 !important;
}

html.dark-mode .axis-social-link:hover {
	border-color: var(--axis-primary, #FF9203) !important;
	color: var(--axis-primary, #FF9203) !important;
}

/* ============================================================================
   MOBILE HEADER OPTIMIZATIONS (375px - 768px)
   ============================================================================ */
@media (max-width: 768px) {
	.axis-header__inner {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}

	.axis-header__brand {
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.axis-header__actions {
		gap: 6px !important;
		width: 100% !important;
		justify-content: space-between !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding-bottom: 4px !important;
	}

	.axis-social-media {
		gap: 4px !important;
	}

	.axis-social-link {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		padding: 0 !important;
	}

	.axis-social-link svg {
		width: 15px !important;
		height: 15px !important;
	}

	.axis-icon-button {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
	}

	.axis-mobile-menu-toggle {
		display: flex !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 6px !important;
	}
}

/* ============================================================================
   MOBILE HEADER 2-ROW GRID (Logo + Hamburger in Row 1, Actions in Row 2)
   ============================================================================ */
@media (max-width: 768px) {
	.axis-header__inner {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		align-items: center !important;
		gap: 8px !important;
	}

	.axis-header__brand {
		grid-column: 1 / 2 !important;
		grid-row: 1 / 2 !important;
	}

	.axis-mobile-menu-toggle {
		grid-column: 2 / 3 !important;
		grid-row: 1 / 2 !important;
		display: flex !important;
		width: 38px !important;
		height: 38px !important;
		align-items: center !important;
		justify-content: center !important;
		border: 1px solid #e2e8f0 !important;
		border-radius: 8px !important;
		background: #ffffff !important;
		cursor: pointer !important;
	}

	html.dark-mode .axis-mobile-menu-toggle {
		background: #1e293b !important;
		border-color: #334155 !important;
	}

	.axis-header__actions {
		grid-column: 1 / 3 !important;
		grid-row: 2 / 3 !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		overflow-x: auto !important;
		padding-bottom: 4px !important;
		width: 100% !important;
	}
}

/* Mobile header cleaner display: hide header social icons on mobile so search, theme toggle, and menu toggle fit perfectly */
@media (max-width: 640px) {
	.axis-social-media {
		display: none !important;
	}

	.axis-mobile-menu-toggle {
		display: flex !important;
		width: 36px !important;
		height: 36px !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* ==========================================================================
   PKP PDF Viewer Styles & Screen Reader Accessibility
   ========================================================================== */

.pkp_screen_reader {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body:has(.galley_view) {
	margin: 0 !important;
	padding: 0 !important;
	height: 100vh !important;
	overflow: hidden !important;
}

.header_view {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 52px !important;
	background: #1e293b !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 16px !important;
	z-index: 10000 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
	box-sizing: border-box !important;
}

.header_view a {
	color: #ffffff !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	font-family: inherit !important;
}

.header_view .return {
	font-weight: 500 !important;
	font-size: 0.875rem !important;
	padding: 6px 14px !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, 0.12) !important;
	transition: background 0.2s ease !important;
	flex-shrink: 0 !important;
}

.header_view .return:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #ffffff !important;
}

.header_view .return::before {
	content: "← " !important;
	font-weight: bold !important;
	margin-right: 6px !important;
}

.header_view .title {
	flex: 1 1 auto !important;
	margin: 0 16px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	text-align: center !important;
	color: #f1f5f9 !important;
}

.header_view .download {
	flex-shrink: 0 !important;
	background: var(--axis-primary, #FF9203) !important;
	color: #ffffff !important;
	padding: 6px 16px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	transition: background 0.2s ease !important;
	gap: 6px !important;
}

.header_view .download:hover {
	background: var(--axis-primary-dark, #e17400) !important;
}

.header_view .download::before {
	content: "⬇ " !important;
}

.galley_view {
	position: fixed !important;
	top: 52px !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	overflow: hidden !important;
	background: #334155 !important;
	z-index: 1 !important;
}

.galley_view iframe {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	display: block !important;
}

/* Dark mode for PDF viewer header */
html.dark-mode .header_view {
	background: #0f172a !important;
	border-bottom: 1px solid #334155 !important;
}

/* ==========================================================================
   Responsive Typography & Word Wrap Fixes for Mobile & Narrow Screens
   ========================================================================== */

.axis-article-detail__title,
.axis-page-title,
.axis-issue-header__title,
h1,
h2,
h3 {
	overflow-wrap: break-word !important;
	word-break: break-word !important;
}

@media (max-width: 640px) {
	.axis-article-detail__title {
		font-size: 1.625rem !important;
		line-height: 1.3 !important;
	}

	.axis-page-title {
		font-size: 1.75rem !important;
	}

	.axis-page-container,
	.axis-container {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}
}

@media (max-width: 380px) {
	.axis-article-detail__title {
		font-size: 1.375rem !important;
		line-height: 1.25 !important;
	}

	.axis-page-title {
		font-size: 1.5rem !important;
	}

	.axis-header__brand img {
		max-width: 170px !important;
		height: auto !important;
	}
}