/**
 * Zyonix Journal — assets/css/layout.css
 *
 * Structural layout: header, footer, page-level grids,
 * sidebar regions, breadcrumbs, and all template-specific
 * outer wrappers.
 *
 * This file builds on the design tokens defined in main.css.
 * It does NOT contain component internals (buttons, badges, cards) —
 * those live in components.css.
 *
 * Table of contents
 * ─────────────────
 *  01. Site structure (#page, #content, #colophon)
 *  02. Header — top bar
 *  03. Header — main bar
 *  04. Header — mobile nav overlay
 *  05. Header — journal sub-navigation
 *  06. Breadcrumb
 *  07. Front-page layout  (front-page.php)
 *  08. Journal home layout (taxonomy-journal.php)
 *  09. Volume page layout  (taxonomy-volume.php)
 *  10. Issue TOC layout    (taxonomy-issue.php)
 *  11. Article page layout (single-article.php)
 *  12. Archive layout      (archive-article.php)
 *  13. Page layout         (page.php)
 *  14. Blog / index layout (index.php)
 *  15. Search results
 *  16. 404 page
 *  17. Footer
 *  18. Responsive overrides
 *
 * @package Zyonix_Journal
 * @since   1.0.0
 */


/* ============================================================
   01. SITE STRUCTURE
   ============================================================ */

html,
body {
    height: 100%;
}

#page {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    background:     var(--color-bg-body);
}

#content {
    flex:           1 0 auto;
    padding-top:    var(--space-4);
    padding-bottom: var(--space-10);
}

/* Prevent content from sliding under sticky header */
#content,
.site-breadcrumb-bar {
    scroll-margin-top: var(--header-height);
}

/* ============================================================
   01A. CONTAINER COMPATIBILITY (stability layer)
   ============================================================ */

/* Many templates use .site-container; keep it as the canonical fixed-width wrapper */
.site-container,
.footer-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
}

/* Some newer bars reuse breadcrumb inner spacing */
.breadcrumb-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
}


/* ============================================================
   02. HEADER — TOP BAR
   ============================================================ */

.site-top-bar {
    background:    var(--color-gray-100);
    border-bottom: 1px solid var(--color-border-light);
    padding:       4px 0;
    font-size:     11px;
    color:         var(--color-text-muted);
    line-height:   1.35;
}

.site-top-bar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-3);
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 var(--space-5);
}

.site-top-bar-left,
.site-top-bar-right {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

/* Homepage: single editorial utility row (no right cluster). */
body.home .site-top-bar-inner {
    justify-content: flex-start;
}

body.home .site-top-bar-left {
    gap: var(--space-2);
}

body.home .site-top-bar .sep {
    opacity: 0.45;
    padding: 0 1px;
}

.site-top-bar a {
    color:           var(--color-text-muted);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.site-top-bar a:hover {
    color:           var(--color-primary);
    text-decoration: none;
}

/* ISSN in top bar */
.site-top-bar .issn-badge {
    font-family: var(--font-mono);
    font-size:   11px;
}

/* Open Access indicator */
.site-top-bar .oa-indicator {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    color:       var(--color-oa-green);
    font-weight: var(--font-semibold);
    font-size:   11px;
}


/* ============================================================
   03. HEADER — MAIN BAR
   ============================================================ */

#masthead {
    position:      sticky;
    top:           0;
    z-index:       var(--z-sticky);
    background:    var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow:    var(--shadow-sm);
    height:        var(--header-height);
    transition:    box-shadow var(--transition-base),
                   background var(--transition-base);
}

/* Homepage: stack utility bar + main row without fixed masthead height clipping. */
body.home #masthead {
    height: auto;
}

body.home .site-header-inner {
    height:     auto;
    min-height: 48px;
    padding:    6px 0;
    gap:        var(--space-3);
}

body.home .site-logo-img,
body.home .site-logo-wrap .custom-logo-link img {
    height: 34px;
}

body.home .site-title-text {
    font-size:   var(--text-lg);
    font-weight: var(--font-bold);
}

body.home .site-tagline {
    font-size:   10px;
    margin-top:  0;
}

body.home .primary-navigation .nav-menu > li > a {
    padding:   5px 10px;
    font-size: 12px;
}

body.home .header-auth {
    font-size: 11px;
}

body.home .header-submit-btn {
    padding:     6px 12px;
    font-size:   12px;
    line-height: 1.2;
}

body.home .header-submit-btn svg {
    width:  13px;
    height: 13px;
}

/* MDPI-like tighter header defaults */
.site-header {
    border-bottom-color: var(--color-border);
}

/* Slightly elevated shadow when page has scrolled */
#masthead.is-scrolled {
    box-shadow: var(--shadow-md);
}

.site-header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 var(--space-5);
    gap:             var(--space-4);
}

/* Logo + site title (Customizer logo; title/tagline follow “Display Site Title…”) */
.site-branding {
    flex-shrink:   0;
    display:       flex;
    flex-wrap:     wrap;
    align-items:   center;
    gap:           var(--space-3);
    min-width:     0;
}

.site-logo-wrap {
    flex-shrink: 0;
    line-height: 0;
}

.site-logo-wrap .custom-logo-link {
    display: inline-block;
    line-height: 0;
}

.site-logo-wrap .custom-logo-link img {
    display:   block;
    height:    40px;
    width:     auto;
    max-width: 260px;
    object-fit: contain;
}

.site-logo-link {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    text-decoration: none;
    color:           inherit;
    min-width:       0;
}

.site-logo-link--fallback .site-title-group {
    min-width: 0;
}

.site-logo-img {
    height:  40px;
    width:   auto;
    display: block;
}

.site-title-link {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    color:           inherit;
    min-width:       0;
}

.site-title-link:hover .site-title-text,
.site-title-link:focus .site-title-text {
    color: var(--color-primary);
}

.site-title-group {
    display:        flex;
    flex-direction: column;
    gap:            0;
    min-width:      0;
}

.site-title.site-title-text,
.site-title-text {
    font-size:      var(--text-lg);
    font-weight:    var(--font-semibold);
    color:          var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
    line-height:    1.15;
    margin:         0;
}

.site-description.site-tagline,
.site-tagline {
    display:     block;
    font-size:   11px;
    color:       var(--color-text-muted);
    font-weight: var(--font-normal);
    margin:      2px 0 0;
    line-height: 1.3;
}

/* Primary navigation — inline, minimal (MDPI-inspired) */
.primary-navigation {
    flex:             1;
    display:          flex;
    align-items:      center;
    justify-content:  flex-end;
    background:       transparent;
    border:           none;
    box-shadow:       none;
}

.primary-navigation .nav-menu {
    display:         flex;
    align-items:     center;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             1px;
    list-style:      none;
    margin:          0;
    padding:         0;
}

.primary-navigation .nav-menu > li {
    position: relative;
}

.primary-navigation .nav-menu > li > a {
    display:         block;
    position:        relative;
    padding:         6px 10px;
    font-size:       13px;
    font-weight:     var(--font-medium);
    color:           var(--color-text-secondary);
    background:      transparent;
    border-radius:   0;
    text-decoration: none;
    white-space:     nowrap;
    transition:      color var(--transition-fast), box-shadow var(--transition-fast);
}

.primary-navigation .nav-menu > li.menu-item-has-children > a {
    padding-right: 16px;
}

.primary-navigation .nav-menu > li.menu-item-has-children > a::after {
    content:     '\25BE';
    position:    absolute;
    right:       4px;
    top:         50%;
    transform:   translateY(-50%);
    font-size:   9px;
    opacity:     0.55;
    line-height: 1;
}

.primary-navigation .nav-menu > li > a:hover,
.primary-navigation .nav-menu > li > a:focus-visible {
    color:           var(--color-text-primary);
    background:      transparent;
    box-shadow:      inset 0 -1px 0 0 var(--color-primary);
}

.primary-navigation .nav-menu > li.current-menu-item > a,
.primary-navigation .nav-menu > li.current-menu-ancestor > a,
.primary-navigation .nav-menu > li.current-menu-parent > a {
    color:           var(--color-primary);
    background:      transparent;
    box-shadow:      inset 0 -2px 0 0 var(--color-primary);
}

/* Dropdowns — wp_nav_menu .sub-menu + nested levels */
.primary-navigation .nav-menu .sub-menu,
.primary-navigation .nav-menu li > ul {
    display:       none;
    position:      absolute;
    top:           calc(100% + 2px);
    left:          0;
    z-index:       var(--z-dropdown);
    min-width:     208px;
    max-width:     min(320px, 92vw);
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:    0 6px 20px rgba(15, 23, 42, 0.08);
    padding:       4px 0;
    list-style:    none;
    margin:        0;
}

.primary-navigation .nav-menu li:hover > .sub-menu,
.primary-navigation .nav-menu li:focus-within > .sub-menu,
.primary-navigation .nav-menu li:hover > ul,
.primary-navigation .nav-menu li:focus-within > ul {
    display: block;
}

.primary-navigation .nav-menu .sub-menu .sub-menu,
.primary-navigation .nav-menu li > ul li > ul {
    top:        0;
    left:       100%;
    margin-left: 2px;
    margin-top: 0;
}

.primary-navigation .nav-menu .sub-menu li,
.primary-navigation .nav-menu li ul li {
    position: relative;
}

.primary-navigation .nav-menu .sub-menu a,
.primary-navigation .nav-menu li ul a {
    display:         block;
    padding:         7px 14px;
    font-size:       12px;
    font-weight:     var(--font-medium);
    color:           var(--color-text-secondary);
    text-decoration: none;
    background:      transparent;
    white-space:     nowrap;
    transition:      color var(--transition-fast), background var(--transition-fast);
}

.primary-navigation .nav-menu .sub-menu a:hover,
.primary-navigation .nav-menu .sub-menu a:focus-visible,
.primary-navigation .nav-menu li ul a:hover,
.primary-navigation .nav-menu li ul a:focus-visible {
    color:      var(--color-text-primary);
    background: rgba(0, 117, 180, 0.06);
}

.primary-navigation .nav-menu .sub-menu li + li,
.primary-navigation .nav-menu li ul li + li {
    border-top: 1px solid var(--color-border-light);
}

/* Header right area: search + mobile toggle */
.header-actions {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-shrink: 0;
}

/* Header auth links (Login | Register) */
.header-auth {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.header-auth a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.header-auth a:hover {
    color: var(--color-primary);
}
.header-auth .sep {
    color: var(--color-gray-400);
}

/* Compact inner-page search bar (below header) */
.header-search-bar {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-gray-50);
}
.header-search-bar .breadcrumb-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-2) var(--space-5);
}
.header-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    align-items: center;
}
.header-search-form .search-field {
    width: 100%;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    padding: 7px var(--space-3);
    font-size: var(--text-sm);
    background: var(--color-white);
}
.header-search-form .search-submit {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 7px var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    white-space: nowrap;
}
.header-search-form .search-submit:hover {
    background: var(--color-primary-dark);
}

/* Header search toggle */
.header-search-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      none;
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    cursor:          pointer;
    color:           var(--color-text-secondary);
    transition:      background var(--transition-fast),
                     color var(--transition-fast),
                     border-color var(--transition-fast);
}

.header-search-toggle:hover {
    background:   var(--color-primary-xlight);
    color:        var(--color-primary);
    border-color: var(--color-primary);
}

/* Mobile hamburger */
.mobile-menu-toggle {
    display:         none;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    background:      none;
    border:          none;
    cursor:          pointer;
    color:           var(--color-text-secondary);
    border-radius:   var(--radius-md);
    transition:      background var(--transition-fast),
                     color var(--transition-fast);
    padding:         0;
}

.mobile-menu-toggle:hover {
    background: var(--color-gray-100);
    color:      var(--color-primary);
}

/* Hamburger icon lines */
.hamburger {
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    width:          20px;
    height:         14px;
    pointer-events: none;
}

.hamburger span {
    display:       block;
    height:        2px;
    background:    currentColor;
    border-radius: 2px;
    transition:    transform var(--transition-base),
                   opacity var(--transition-base),
                   width var(--transition-base);
    transform-origin: center;
}

/* Open state: X shape */
.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
    width:   0;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ============================================================
   04. HEADER — MOBILE NAV OVERLAY
   ============================================================ */

/* ============================================================
   05. HEADER — JOURNAL SUB-NAVIGATION
   ============================================================ */

.journal-subnav-bar {
    background:    var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position:      sticky;
    top:           var(--header-height);
    z-index:       calc(var(--z-sticky) - 1);
}

.journal-subnav-inner {
    display:     flex;
    align-items: center;
    max-width:   var(--container-max);
    margin:      0 auto;
    padding:     0 var(--space-5);
    overflow-x:  auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.journal-subnav-inner::-webkit-scrollbar {
    display: none;
}

.journal-subnav-nav {
    display:     flex;
    align-items: stretch;
    gap:         0;
    white-space: nowrap;
    padding:     0;
}

.journal-subnav-nav li {
    list-style: none;
}

.journal-subnav-nav a {
    display:       flex;
    align-items:   center;
    padding:       10px var(--space-3);
    font-size:     var(--text-xs);
    font-weight:   var(--font-medium);
    color:         var(--color-text-muted);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition:    color var(--transition-fast),
                   border-color var(--transition-fast);
    white-space:   nowrap;
}

.journal-subnav-nav a:hover,
.journal-subnav-nav .is-active a,
.journal-subnav-nav .current-menu-item a {
    color:        var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}


/* ============================================================
   06. BREADCRUMB
   ============================================================ */

.site-breadcrumb-bar {
    background:    var(--color-white);
    border-bottom: 1px solid var(--color-border-light);
    padding:       var(--space-2) 0;
}

.breadcrumb-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
}

.breadcrumb-list {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         4px;
    list-style:  none;
    margin:      0;
    padding:     0;
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
}


/* ============================================================
   10. SEARCH RESULTS LAYOUT  (search.php)
   — Grid shell only; responsive overrides live in responsive.css.
   ============================================================ */

.sr-wrap{
    display:grid;
    grid-template-columns:minmax(0,240px) minmax(0,1fr) minmax(0,260px);
    grid-template-areas:"left main right";
    gap:0;
    max-width:var(--container-max);
    margin:var(--space-4) auto;
    align-items:start;
}

.sr-left{
    grid-area:left;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-right:none;
    border-radius:var(--radius-lg) 0 0 var(--radius-lg);
    position:sticky;
    top:88px;
    max-height:calc(100vh - 100px);
    overflow:auto;
}

.sr-main{
    grid-area:main;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-left:none;
    border-right:none;
    min-width:0;
    padding:var(--space-6);
}

.sr-right{
    grid-area:right;
    background:var(--color-white);
    border:1px solid var(--color-border);
    border-left:none;
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    position:sticky;
    top:88px;
    max-height:calc(100vh - 100px);
    overflow:auto;
}

.breadcrumb-list li {
    display:     flex;
    align-items: center;
    gap:         4px;
}

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

.breadcrumb-list a:hover {
    text-decoration: underline;
}

.breadcrumb-sep {
    color:       var(--color-gray-400);
    user-select: none;
    font-size:   10px;
}

.breadcrumb-current {
    color:        var(--color-text-muted);
    max-width:    280px;
    overflow:     hidden;
    text-overflow: ellipsis;
    white-space:  nowrap;
}


/* ============================================================
   07. FRONT-PAGE LAYOUT  (front-page.php)
   ============================================================ */

/* Hero section */
.fp-hero {
    background:    var(--color-primary);
    background:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 60%, #003d6b 100%);
    color:         var(--color-white);
    padding:       var(--space-8) 0 var(--space-6);
    position:      relative;
    overflow:      hidden;
}

.fp-hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.fp-hero-inner {
    position:   relative;
    z-index:    1;
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 var(--space-5);
    text-align: left;
}

.fp-hero-title {
    font-size:   var(--text-4xl);
    font-weight: var(--font-extrabold);
    color:       var(--color-white);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-4);
    letter-spacing: var(--tracking-tight);
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.fp-hero-subtitle {
    font-size:     var(--text-lg);
    color:         rgba(255,255,255,.85);
    max-width:     600px;
    margin:        0 0 var(--space-5);
    line-height:   var(--leading-relaxed);
}

.fp-hero-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
    flex-wrap:       wrap;
}

/* Featured articles / recent slider */
.fp-featured {
    max-width: var(--container-max);
    margin:    var(--space-10) auto;
    padding:   0 var(--space-5);
}

.fp-section-heading {
    font-size:     var(--text-2xl);
    font-weight:   var(--font-bold);
    color:         var(--color-text-primary);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
    display:       flex;
    align-items:   baseline;
    justify-content: space-between;
    gap:           var(--space-4);
}

.fp-section-heading a {
    font-size:   var(--text-sm);
    font-weight: var(--font-medium);
    color:       var(--color-primary);
    text-decoration: none;
}

.fp-section-heading a:hover {
    text-decoration: underline;
}

/* Three-column layout on fp */
.fp-columns {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
    display:   grid;
    grid-template-columns: 240px 1fr 260px;
    gap:       var(--space-6);
    align-items: start;
}

.fp-col-left,
.fp-col-right {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

/* Load more trigger */
.fp-load-more-wrap {
    text-align: center;
    padding:    var(--space-6) 0;
}

/* Subject journals grid */
.fp-subjects-section {
    background: var(--color-white);
    border-top: 2px solid var(--color-border);
    padding:    var(--space-10) 0;
    margin-top: var(--space-10);
}

.fp-subjects-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
}

.fp-journal-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   var(--space-5);
    margin-top:            var(--space-6);
}


/* ============================================================
   08. JOURNAL HOME LAYOUT  (taxonomy-journal.php)
   — Grid shell only; journal.css handles widgets / typography.
   ============================================================ */

.tj-wrap {
    display:               grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 200px);
    grid-template-areas:   "left main right";
    gap:                   0;
    max-width:             var(--container-max);
    margin:                10px auto 20px;
    align-items:           start;
}

.tj-left {
    grid-area:      left;
    border-right:   1px solid var(--color-border);
    background:     var(--color-white);
    position:       sticky;
    top:            88px;
    max-height:     calc(100vh - 100px);
    overflow-y:     auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    font-size:      0.8125rem;
}

.tj-main {
    grid-area:      main;
    background:     var(--color-white);
    border-left:    1px solid var(--color-border);
    border-right:   1px solid var(--color-border);
    min-width:      0;
    padding-bottom: 16px;
    font-size:      0.875rem;
}

.tj-right {
    grid-area:      right;
    border-left:    1px solid var(--color-border);
    background:     var(--color-white);
    position:       sticky;
    top:            88px;
    max-height:     calc(100vh - 100px);
    overflow-y:     auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    font-size:      0.8125rem;
}

.tj-left::-webkit-scrollbar,
.tj-right::-webkit-scrollbar {
    width: 3px;
}

.tj-left::-webkit-scrollbar-thumb,
.tj-right::-webkit-scrollbar-thumb {
    background:    var(--color-border-dark);
    border-radius: 2px;
}


/* ============================================================
   09. VOLUME PAGE LAYOUT  (taxonomy-volume.php)
   ============================================================ */

.tv-wrap {
    display:               grid;
    grid-template-columns: 240px 1fr 50px;
    grid-template-areas:   "left main right";
    gap:                   0;
    max-width:             var(--container-max);
    margin:                var(--space-4) auto;
    align-items:           start;
    background:            var(--color-white);
    border:                1px solid var(--color-border);
    border-radius:         var(--radius-lg);
    box-shadow:            var(--shadow-card);
    overflow:              visible;
}

.tv-left  { grid-area: left;  }
.tv-main  { grid-area: main;  }
.tv-right { grid-area: right; }

.tv-left {
    border-right: 1px solid var(--color-border);
    position:     sticky;
    top:          calc(var(--header-height) + 8px);
    max-height:   calc(100vh - var(--header-height) - 20px);
    overflow-y:   auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    background:   var(--color-white);
}

.tv-left::-webkit-scrollbar  { width: 3px; }
.tv-left::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}

.tv-main {
    padding:      var(--space-6) var(--space-7) var(--space-8);
    min-width:    0;
    border-left:  1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.tv-right {
    border-left: 1px solid var(--color-border);
    display:     flex;
    flex-direction: column;
    align-items: center;
    padding:     var(--space-5) 0;
    position:    sticky;
    top:         calc(var(--header-height) + 8px);
    max-height:  calc(100vh - var(--header-height) - 20px);
    background:  var(--color-white);
}


/* ============================================================
   10. ISSUE TOC LAYOUT  (taxonomy-issue.php)
   ============================================================ */

.ti-wrap {
    display:               grid;
    grid-template-columns: 240px 1fr 50px;
    grid-template-areas:   "left main right";
    gap:                   0;
    max-width:             var(--container-max);
    margin:                var(--space-4) auto;
    align-items:           start;
    background:            var(--color-white);
    border:                1px solid var(--color-border);
    border-radius:         var(--radius-lg);
    box-shadow:            var(--shadow-card);
    overflow:              visible;
}

.ti-left  { grid-area: left;  }
.ti-main  { grid-area: main;  }
.ti-right { grid-area: right; }

.ti-left {
    border-right: 1px solid var(--color-border);
    position:     sticky;
    top:          calc(var(--header-height) + 8px);
    max-height:   calc(100vh - var(--header-height) - 20px);
    overflow-y:   auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    background:   var(--color-white);
}

.ti-left::-webkit-scrollbar  { width: 3px; }
.ti-left::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}

.ti-main {
    padding:       var(--space-6) var(--space-7) var(--space-8);
    min-width:     0;
    border-left:   1px solid var(--color-border);
    border-right:  1px solid var(--color-border);
}

.ti-right {
    border-left: 1px solid var(--color-border);
    display:     flex;
    flex-direction: column;
    align-items: center;
    padding:     var(--space-5) 0;
    position:    sticky;
    top:         calc(var(--header-height) + 8px);
    max-height:  calc(100vh - var(--header-height) - 20px);
    background:  var(--color-white);
}


/* ============================================================
   11. ARTICLE PAGE LAYOUT  (single-article.php)
   ============================================================ */

.zyonix-mdpi-wrap {
    display:               grid;
    grid-template-columns: 240px 1fr 60px;
    grid-template-areas:   "left main right";
    gap:                   0;
    max-width:             var(--container-max);
    margin:                var(--space-4) auto;
    align-items:           start;
    background:            var(--color-white);
    border:                1px solid var(--color-border);
    border-radius:         var(--radius-lg);
    box-shadow:            var(--shadow-card);
    overflow:              visible;
}

.zyonix-left  { grid-area: left;  }
.zyonix-main  { grid-area: main;  }
.zyonix-right { grid-area: right; }

.zyonix-left {
    border-right: 1px solid var(--color-border);
    position:     sticky;
    top:          calc(var(--header-height) + 8px);
    max-height:   calc(100vh - var(--header-height) - 20px);
    overflow-y:   auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    background:   var(--color-white);
}

.zyonix-left::-webkit-scrollbar  { width: 3px; }
.zyonix-left::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}

.zyonix-main {
    min-width:    0;
    padding:      var(--space-5) var(--space-8);
    border-left:  1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.zyonix-right {
    border-left: 1px solid var(--color-border);
    display:     flex;
    flex-direction: column;
    align-items: center;
    padding:     var(--space-5) 0;
    gap:         2px;
    position:    sticky;
    top:         calc(var(--header-height) + 8px);
    max-height:  calc(100vh - var(--header-height) - 20px);
    overflow-y:  auto;
    background:  var(--color-white);
}

.zyonix-right::-webkit-scrollbar  { display: none; }


/* ============================================================
   12. ARCHIVE LAYOUT  (archive-article.php)
   ============================================================ */

.aa-wrap {
    display:               grid;
    grid-template-columns: 260px 1fr;
    grid-template-areas:   "sidebar main";
    gap:                   0;
    max-width:             var(--container-max);
    margin:                var(--space-4) auto;
    padding:               0 var(--space-5);
    align-items:           start;
}

.aa-sidebar { grid-area: sidebar; }
.aa-main    { grid-area: main;    }

.aa-sidebar {
    position:      sticky;
    top:           calc(var(--header-height) + 8px);
    max-height:    calc(100vh - var(--header-height) - 20px);
    overflow-y:    auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
}

.aa-sidebar::-webkit-scrollbar  { width: 3px; }
.aa-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}

.aa-main {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-left:   var(--space-4);
    overflow:      hidden;
    box-shadow:    var(--shadow-card);
}

.aam-header {
    padding:       var(--space-5) var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.aam-article-list {
    padding: 0 var(--space-6);
}


/* ============================================================
   13. PAGE LAYOUT  (page.php)
   ============================================================ */

.pg-wrap {
    display:               grid;
    grid-template-columns: 1fr 260px;
    grid-template-areas:   "main sidebar";
    gap:                   var(--space-6);
    max-width:             var(--container-max);
    margin:                var(--space-6) auto;
    padding:               0 var(--space-5);
    align-items:           start;
}

.pg-main    { grid-area: main;    }
.pg-sidebar { grid-area: sidebar; }

.pg-wrap--full {
    grid-template-columns: 1fr;
    grid-template-areas:   "main";
    max-width:             900px;
}

.pg-article {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-card);
}

.pg-sidebar {
    position:   sticky;
    top:        calc(var(--header-height) + 8px);
    max-height: calc(100vh - var(--header-height) - 20px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-4);
}

.pg-sidebar::-webkit-scrollbar  { width: 3px; }
.pg-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}


/* ============================================================
   14. BLOG / INDEX LAYOUT  (index.php)
   ============================================================ */

.ix-wrap {
    display:               grid;
    grid-template-columns: 1fr 280px;
    grid-template-areas:   "main sidebar";
    gap:                   var(--space-6);
    max-width:             var(--container-max);
    margin:                var(--space-6) auto;
    padding:               0 var(--space-5);
    align-items:           start;
}

/* When no sidebar exists */
.ix-wrap:not(:has(.ix-sidebar)) {
    grid-template-columns: 1fr;
    grid-template-areas:   "main";
    max-width:             860px;
}

.ix-main    { grid-area: main;    min-width: 0; }
.ix-sidebar { grid-area: sidebar; }

.ix-sidebar {
    position:   sticky;
    top:        calc(var(--header-height) + 8px);
    max-height: calc(100vh - var(--header-height) - 20px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-4);
}

.ix-sidebar::-webkit-scrollbar  { width: 3px; }
.ix-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border-dark); border-radius: 2px;
}


/* ============================================================
   15. SEARCH RESULTS
   ============================================================ */

.search-results-wrap {
    max-width: var(--container-max);
    margin:    var(--space-6) auto;
    padding:   0 var(--space-5);
}

.search-results-header {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    border-left:   4px solid var(--color-primary);
}

.search-results-title {
    font-size:     var(--text-2xl);
    font-weight:   var(--font-bold);
    margin-bottom: var(--space-3);
    color:         var(--color-text-primary);
}


/* ============================================================
   16. 404 PAGE
   ============================================================ */

.error-404-wrap {
    max-width:  600px;
    margin:     var(--space-16) auto;
    padding:    0 var(--space-5);
    text-align: center;
}

.error-404-code {
    font-size:      120px;
    font-weight:    var(--font-extrabold);
    color:          var(--color-primary);
    opacity:        0.12;
    line-height:    1;
    letter-spacing: -8px;
    margin-bottom:  var(--space-4);
    font-family:    var(--font-primary);
}

.error-404-title {
    font-size:     var(--text-4xl);
    font-weight:   var(--font-bold);
    color:         var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.error-404-text {
    font-size:     var(--text-lg);
    color:         var(--color-text-muted);
    margin-bottom: var(--space-8);
    max-width:     480px;
    margin-left:   auto;
    margin-right:  auto;
}

.error-404-actions {
    display:         flex;
    justify-content: center;
    gap:             var(--space-3);
    margin-bottom:   var(--space-8);
    flex-wrap:       wrap;
}


/* ============================================================
   17. FOOTER
   ============================================================ */

#colophon {
    background:    var(--color-footer-bg);
    color:         var(--color-footer-text);
    padding:       var(--space-10) 0 0;
    flex-shrink:   0;
}

.footer-inner {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-5);
}

.footer-grid {
    display:               grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    gap:                   var(--space-8);
    padding-bottom:        var(--space-8);
    border-bottom:         1px solid rgba(255,255,255,.1);
    margin-bottom:         var(--space-6);
}

.footer-branding {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.footer-logo img {
    height:  40px;
    width:   auto;
    filter:  brightness(0) invert(1);
    opacity: 0.9;
}

.footer-logo-text {
    font-size:   var(--text-xl);
    font-weight: var(--font-extrabold);
    color:       var(--color-white);
}

.footer-tagline {
    font-size:   var(--text-sm);
    color:       rgba(255,255,255,.55);
    line-height: var(--leading-relaxed);
}

.footer-social-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-top:  var(--space-2);
}

.footer-social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    background:      rgba(255,255,255,.1);
    border-radius:   var(--radius-md);
    color:           rgba(255,255,255,.7);
    text-decoration: none;
    transition:      background var(--transition-fast),
                     color var(--transition-fast);
}

.footer-social-link:hover {
    background: var(--color-primary);
    color:      var(--color-white);
    text-decoration: none;
}

.footer-col-heading {
    font-size:      var(--text-xs);
    font-weight:    var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color:          var(--color-white);
    margin-bottom:  var(--space-4);
}

.footer-menu,
.footer-journal-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-2);
}

.footer-menu a,
.footer-journal-list a {
    font-size:       var(--text-sm);
    color:           rgba(255,255,255,.65);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.footer-menu a:hover,
.footer-journal-list a:hover {
    color:           var(--color-white);
    text-decoration: none;
}

/* Footer bottom bar — compact editorial strip */
.footer-bottom {
    margin-top:      var(--space-2);
    padding:         6px 0 8px;
    border-top:      1px solid rgba(255, 255, 255, 0.08);
    background:    rgba(0, 0, 0, 0.14);
}

.footer-bottom .footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             6px 12px;
    row-gap:         4px;
}

.footer-bottom-right {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px 14px;
}

.footer-copyright {
    font-size:   11px;
    line-height: 1.35;
    color:       rgba(255, 255, 255, 0.42);
    max-width:   100%;
}

.footer-copyright a {
    color:           inherit;
    text-decoration: none;
}

.footer-copyright a:hover {
    color:           rgba(255, 255, 255, 0.75);
    text-decoration: underline;
}

.footer-copyright-sep {
    opacity: 0.55;
}

.footer-legal-links {
    display:     flex;
    align-items: center;
    gap:         10px 14px;
    flex-wrap:   wrap;
    margin:      0;
    padding:     0;
    list-style:  none;
}

.footer-legal-links a {
    font-size:       11px;
    color:           rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition:      color var(--transition-fast);
}

.footer-bottom .license-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         2px 6px;
    font-size:       10px;
    line-height:     1.2;
    color:           rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border-radius:   var(--radius-sm);
    border:          1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom .license-badge svg {
    width:  12px;
    height: 12px;
    flex-shrink: 0;
}

.footer-bottom .license-badge:hover {
    color:            rgba(255, 255, 255, 0.75);
    border-color:     rgba(255, 255, 255, 0.22);
    text-decoration:  none;
}

.footer-legal-links a:hover {
    color:           rgba(255,255,255,.8);
    text-decoration: none;
}

.footer-cc {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-xs);
    color:       rgba(255,255,255,.4);
}

.footer-cc a {
    color:           rgba(255,255,255,.5);
    text-decoration: none;
}

.footer-cc a:hover {
    color: rgba(255,255,255,.8);
    text-decoration: none;
}

/* Email signup in footer */
.footer-email-form {
    display:    flex;
    gap:        var(--space-2);
    margin-top: var(--space-3);
}

.footer-email-input {
    flex:          1;
    padding:       6px var(--space-3);
    font-size:     var(--text-sm);
    background:    rgba(255,255,255,.1);
    border:        1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-md);
    color:         var(--color-white);
    min-width:     0;
}

.footer-email-input::placeholder {
    color: rgba(255,255,255,.4);
}

.footer-email-input:focus {
    outline:      none;
    border-color: var(--color-primary);
    background:   rgba(255,255,255,.15);
}

.footer-email-btn {
    padding:       6px var(--space-3);
    background:    var(--color-primary);
    border:        1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color:         var(--color-white);
    font-size:     var(--text-sm);
    font-weight:   var(--font-semibold);
    cursor:        pointer;
    font-family:   var(--font-primary);
    white-space:   nowrap;
    transition:    background var(--transition-fast);
}

.footer-email-btn:hover {
    background: var(--color-primary-dark);
}


/* Responsive overrides live in assets/css/responsive.css */