/*
Theme Name: Mebel Jepara Asli
Theme URI: https://mebeljeparaasli.co.id
Author: Mebel Jepara Asli
Author URI: https://mebeljeparaasli.co.id
Description: Tema custom untuk toko furniture Jepara. Ringan tanpa WooCommerce, custom post type Produk lengkap dengan Schema.org, editor default WordPress (Gutenberg) dengan tipografi heading 1-5 otomatis rapi, gambar artikel otomatis responsif dari desktop ke mobile, warna dasar biru, dan tombol pemesanan via WhatsApp di halaman produk.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mja
*/

/* =========================================================
   0. RESET & VARIABLES
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #26313d;
    background: #f4f7fb;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

:root{
    --primary: #0B5FCB;
    --primary-dark: #084A9E;
    --primary-darker: #063569;
    --primary-light: #E9F1FD;
    --accent: #FFB020;
    --text: #26313d;
    --muted: #6b7785;
    --border: #e3e8ef;
    --bg: #f4f7fb;
    --white: #ffffff;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 2px 10px rgba(11,95,203,.08);
    --shadow-lg: 0 10px 30px rgba(11,95,203,.14);
    --container: 1220px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 42px 0; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; }
.section-title { font-size: 24px; font-weight: 800; color: var(--primary-darker); position: relative; padding-left: 16px; margin:0; }
.section-title::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:4px; background: linear-gradient(180deg,var(--primary),var(--accent)); }
.section-sub { color: var(--muted); font-size:14px; margin:6px 0 0 16px; }
.btn-more { border:1px solid var(--primary); color: var(--primary); background:#fff; padding:9px 18px; border-radius: 30px; font-weight:600; font-size:13px; white-space:nowrap; transition:.2s; }
.btn-more:hover { background: var(--primary); color:#fff; }

/* =========================================================
   1. TOPBAR & HEADER
========================================================= */
.mja-topbar { background: var(--primary-darker); color:#dce8fb; font-size:12.5px; }
.mja-topbar .container{ display:flex; justify-content:space-between; align-items:center; padding:6px 20px; flex-wrap:wrap; gap:6px; }
.mja-topbar a{ color:#dce8fb; }
.mja-topbar a:hover{ color:#fff; }
.mja-topbar ul{ display:flex; gap:16px; }

.mja-header { background: var(--white); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: sticky; top:0; z-index: 500; }
.mja-header .container{ display:flex; align-items:center; gap:22px; padding-top:14px; padding-bottom:14px; }
.mja-logo img{ max-height:52px; width:auto; display:block; }
.mja-logo{ font-size:22px; font-weight:800; color:var(--primary-darker); flex-shrink:0; }

.mja-cat-btn{ display:flex; align-items:center; gap:8px; background: var(--primary); color:#fff; border:0; padding:12px 18px; border-radius: var(--radius-sm); font-weight:700; font-size:14px; flex-shrink:0; }
.mja-cat-btn:hover{ background: var(--primary-dark); }

.mja-search{ flex:1; position:relative; }
.mja-search form{ display:flex; align-items:center; background: var(--bg); border:1px solid var(--border); border-radius: 30px; overflow:hidden; }
.mja-search input[type=search]{ flex:1; border:0; background:transparent; padding:12px 18px; font-size:14px; outline:none; }
.mja-search button{ background: var(--primary); border:0; color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-right:3px; }

.mja-header-links{ display:flex; align-items:center; gap:20px; font-size:14px; font-weight:600; flex-shrink:0; }
.mja-header-links a:hover{ color: var(--primary); }
.mja-header-toggle{ display:none; background:none; border:0; font-size:24px; color: var(--primary-darker); }

/* Category flyout dropdown */
.mja-cat-wrap{ position:relative; }
.mja-cat-panel{ display:none; position:absolute; top: calc(100% + 10px); left:0; width:280px; background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:10px; z-index:600; max-height: 70vh; overflow:auto; }
.mja-cat-panel.is-open{ display:block; }
.mja-cat-panel li a{ display:flex; justify-content:space-between; padding:9px 12px; border-radius:6px; font-size:14px; }
.mja-cat-panel li a:hover{ background: var(--primary-light); color: var(--primary-dark); }
.mja-cat-panel .count{ color: var(--muted); font-size:12px; }

.mja-primary-nav ul{ display:flex; gap:22px; }
.mja-primary-nav a{ font-weight:600; font-size:14px; }
.mja-primary-nav a:hover{ color: var(--primary); }

/* =========================================================
   2. MOBILE HEADER BAR
========================================================= */
@media (max-width: 900px){
    .mja-header .container{ flex-wrap:wrap; }
    .mja-search{ order:4; flex-basis:100%; }
    .mja-header-links{ display:none; }
    .mja-header-toggle{ display:block; margin-left:auto; }
    .mja-primary-nav{ display:none; }
}

/* =========================================================
   3. HERO / SLIDER
========================================================= */
.mja-hero{ padding: 20px 0 10px; }
.mja-hero-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:14px; }
.mja-slider{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background:#eef3fb; aspect-ratio: 16/7.3; }
.mja-slide{ position:absolute; inset:0; opacity:0; transition: opacity .6s ease; }
.mja-slide.is-active{ opacity:1; z-index:2; }
.mja-slide img, .mja-slide a{ display:block; width:100%; height:100%; object-fit:cover; }
.mja-slide img{ object-fit:cover; }
.mja-slider-dots{ position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:5; }
.mja-slider-dots button{ width:9px; height:9px; border-radius:50%; border:0; background: rgba(255,255,255,.6); }
.mja-slider-dots button.is-active{ background:#fff; width:22px; border-radius:6px; }
.mja-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,.35); color:#fff; border:0; width:36px; height:36px; border-radius:50%; z-index:5; font-size:16px; }
.mja-slider-arrow.prev{ left:12px; } .mja-slider-arrow.next{ right:12px; }

.mja-hero-side{ display:flex; flex-direction:column; gap:14px; }
.mja-hero-side a{ display:block; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); flex:1; }
.mja-hero-side img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 768px){
    .mja-hero-grid{ grid-template-columns:1fr; }
    .mja-hero-side{ flex-direction:row; }
    .mja-slider{ aspect-ratio:16/10; }
}

/* Promo banner full width */
.mja-promo-banner{ margin: 6px 0; }
.mja-promo-banner a{ display:block; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.mja-promo-banner img{ width:100%; display:block; }

/* =========================================================
   4. PRODUCT GRID / CARD
========================================================= */
.mja-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:16px; }
.mja-grid.cols-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1100px){ .mja-grid{ grid-template-columns: repeat(4,1fr);} }
@media (max-width:768px){ .mja-grid, .mja-grid.cols-4{ grid-template-columns: repeat(2,1fr); gap:12px;} }

.mja-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; transition:.2s; border:1px solid var(--border); }
.mja-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.mja-card-thumb{ position:relative; aspect-ratio:1/1; background:#f1f5fb; overflow:hidden; }
.mja-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:.3s; }
.mja-card:hover .mja-card-thumb img{ transform: scale(1.06); }
.mja-badge-sale{ position:absolute; top:8px; left:8px; background: var(--accent); color:#3a2600; font-size:11px; font-weight:800; padding:3px 9px; border-radius: 20px; }
.mja-card-body{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mja-card-cat{ font-size:11px; color: var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.mja-card-title{ font-size:14px; font-weight:600; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.mja-card-title a{ color:inherit; }
.mja-card-title a:hover{ color: var(--primary); }
.mja-price-row{ margin-top:auto; }
.mja-price-old{ font-size:12px; color:#9aa4b2; text-decoration:line-through; display:block; }
.mja-price{ font-size:16px; font-weight:800; color: var(--primary-dark); }
.mja-btn-wa{ margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; background: var(--primary); color:#fff !important; border:0; padding:10px; border-radius: var(--radius-sm); font-weight:700; font-size:13px; width:100%; transition:.2s; }
.mja-btn-wa:hover{ background: var(--primary-dark); color:#fff; }
.mja-btn-wa.outline{ background:#fff; color: var(--primary) !important; border:1px solid var(--primary); }
.mja-btn-wa.outline:hover{ background: var(--primary-light); }
.mja-btn-wa svg{ width:16px; height:16px; fill:currentColor; flex-shrink:0; }

/* =========================================================
   5. KATEGORI GRID (circle style)
========================================================= */
.mja-cat-grid{ display:grid; grid-template-columns: repeat(8,1fr); gap:16px; text-align:center; }
@media (max-width:900px){ .mja-cat-grid{ grid-template-columns: repeat(4,1fr);} }
@media (max-width:520px){ .mja-cat-grid{ grid-template-columns: repeat(3,1fr); gap:10px;} }
.mja-cat-item .mja-cat-thumb{ aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow: var(--shadow); border:3px solid #fff; outline:1px solid var(--border); margin-bottom:8px; }
.mja-cat-item img{ width:100%; height:100%; object-fit:cover; }
.mja-cat-item span{ font-size:13px; font-weight:600; }
.mja-cat-item:hover span{ color: var(--primary); }

/* =========================================================
   6. SORT / FILTER BAR (archive)
========================================================= */
.mja-sort{ display:flex; align-items:center; gap:12px; background:#eef3fb; padding:10px 16px; border-radius: var(--radius-sm); margin-bottom:18px; flex-wrap:wrap; }
.mja-sort span.label{ font-weight:700; font-size:13px; color: var(--primary-darker); }
.mja-sort a{ padding:8px 14px; border-radius:20px; background:#fff; font-size:13px; font-weight:600; border:1px solid var(--border); }
.mja-sort a.active{ background: var(--primary); color:#fff; border-color:var(--primary); }

/* =========================================================
   7. BLOG / ARTICLE CARDS
========================================================= */
.mja-post-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
@media (max-width:1100px){ .mja-post-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:768px){ .mja-post-grid{ grid-template-columns: repeat(2,1fr); gap:12px;} }
.mja-post-card{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; border:1px solid var(--border); }
.mja-post-thumb{ aspect-ratio:4/3; overflow:hidden; background:#f1f5fb; }
.mja-post-thumb img{ width:100%; height:100%; object-fit:cover; }
.mja-post-body{ padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mja-post-title{ font-size:14.5px; font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mja-post-title a:hover{ color: var(--primary); }
.mja-post-meta{ font-size:11.5px; color:var(--muted); }
.mja-post-excerpt{ font-size:12.5px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* =========================================================
   8. SINGLE PRODUK
========================================================= */
.mja-breadcrumb{ font-size:13px; color: var(--muted); margin-bottom:16px; }
.mja-breadcrumb a:hover{ color: var(--primary); }
.mja-produk-single{ display:grid; grid-template-columns: 1fr 1fr; gap:34px; background:#fff; padding:26px; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width:800px){ .mja-produk-single{ grid-template-columns:1fr; gap:18px; padding:16px; } }
.mja-produk-gallery-main{ border-radius: var(--radius); overflow:hidden; aspect-ratio:1/1; background:#f1f5fb; }
.mja-produk-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.mja-produk-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.mja-produk-thumbs img{ width:64px; height:64px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.mja-produk-thumbs img.is-active{ border-color: var(--primary); }

.mja-produk-info h1{ font-size:24px; font-weight:800; color: var(--primary-darker); margin:0 0 6px; }
.mja-produk-meta{ font-size:13px; color:var(--muted); margin-bottom:12px; }
.mja-produk-meta a:hover{ color:var(--primary); }
.mja-produk-price-box{ background: var(--primary-light); border-radius: var(--radius-sm); padding:16px; margin-bottom:16px; }
.mja-produk-price-box .old{ text-decoration:line-through; color:#93a0af; font-size:15px; margin-right:8px; }
.mja-produk-price-box .now{ font-size:28px; font-weight:900; color: var(--primary-dark); }
.mja-produk-note{ font-size:12.5px; color:var(--muted); margin-top:6px; font-style:italic; }
.mja-produk-specs{ list-style:none; margin:0 0 18px; padding:0; font-size:14px; }
.mja-produk-specs li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); }
.mja-produk-specs li strong{ color: var(--text); font-weight:600; }
.mja-produk-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.mja-produk-cta .mja-btn-wa{ width:auto; padding:14px 24px; font-size:15px; }
.mja-share{ display:flex; gap:8px; margin-top:18px; }
.mja-share a{ width:34px; height:34px; border-radius:50%; background: var(--primary-light); display:flex; align-items:center; justify-content:center; color: var(--primary-dark); }
.mja-share a:hover{ background: var(--primary); color:#fff; }

.mja-produk-desc{ background:#fff; padding:26px; border-radius: var(--radius); box-shadow: var(--shadow); margin-top:22px; }

/* Read more (baca selengkapnya) di deskripsi single produk */
.mja-readmore-wrap{ position:relative; margin-bottom:8px; }
.mja-readmore-content{ max-height:150px; overflow:hidden; transition: max-height .35s ease; }
.mja-readmore-content.is-expanded{ max-height:4000px; }
.mja-readmore-fade{ position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events:none; }
.mja-readmore-fade.is-hidden{ display:none; }
.mja-readmore-btn{ background:none; border:0; color: var(--primary); font-weight:700; font-size:13.5px; padding:0 0 18px; cursor:pointer; }
.mja-readmore-btn:hover{ text-decoration:underline; }

/* Tombol marketplace */
.mja-marketplace-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.mja-mp-btn{ border:1px solid var(--border); background:#fff; padding:9px 16px; border-radius: var(--radius-sm); font-size:13px; font-weight:700; color: var(--text); }
.mja-mp-btn:hover{ border-color: var(--primary); color: var(--primary); }

/* Tiga langkah */
.mja-3steps{ margin-top:34px; text-align:center; }
.mja-3steps-title{ font-size:20px; font-weight:800; color: var(--primary-darker); margin-bottom:22px; }
.mja-3steps-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:700px){ .mja-3steps-grid{ grid-template-columns:1fr; } }
.mja-3steps-item{ background:#fff; border-radius: var(--radius); padding:24px 18px; box-shadow: var(--shadow); }
.mja-3steps-item .num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: var(--primary); color:#fff; font-weight:800; margin-bottom:10px; }
.mja-3steps-item h4{ margin:6px 0; color: var(--primary-darker); font-size:15px; }
.mja-3steps-item p{ font-size:13px; color: var(--muted); margin:0; }

/* CTA kontak biru gelap */
.mja-cta-box{ margin-top:26px; background: var(--primary-darker); border-radius: var(--radius); padding:28px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; color:#fff; }
.mja-cta-label{ background:rgba(255,255,255,.15); color:#dce8fb; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
.mja-cta-info h3{ margin:10px 0 8px; font-size:20px; }
.mja-cta-info p{ margin:0 0 12px; color:#cfe0f6; font-size:13.5px; max-width:480px; }
.mja-cta-info ul{ font-size:13px; color:#dce8fb; }
.mja-cta-info ul li{ margin-bottom:4px; }
.mja-cta-action .mja-btn-wa{ width:auto; padding:14px 26px; background:#25d366; }
.mja-cta-action .mja-btn-wa:hover{ background:#1fae54; }
@media (max-width:640px){ .mja-cta-box{ flex-direction:column; align-items:flex-start; } .mja-cta-action{ width:100%; } .mja-cta-action .mja-btn-wa{ width:100%; } }

/* =========================================================
   9. ENTRY CONTENT TYPOGRAPHY (H1-H5 auto rapi + gambar responsif)
========================================================= */
.entry-content{ font-size:16px; color:#2c3947; max-width: 780px; }
.entry-content > *:first-child{ margin-top:0; }
.entry-content p{ margin:0 0 1.1em; }
.entry-content ul, .entry-content ol{ margin:0 0 1.1em; padding-left:22px; list-style:revert; }
.entry-content li{ margin-bottom:6px; }
.entry-content a{ color: var(--primary); text-decoration:underline; }
.entry-content blockquote{ border-left:4px solid var(--primary); background: var(--primary-light); padding:14px 18px; margin:0 0 1.2em; border-radius:0 8px 8px 0; font-style:italic; color:#334; }
.entry-content table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; }
.entry-content table th, .entry-content table td{ border:1px solid var(--border); padding:8px 10px; font-size:14px; }
.entry-content table th{ background: var(--primary-light); }

.entry-content h1{ font-size:30px; font-weight:800; line-height:1.3; color: var(--primary-darker); margin:1.6em 0 .6em; }
.entry-content h2{ font-size:24px; font-weight:800; line-height:1.35; color: var(--primary-darker); margin:1.6em 0 .6em; padding-left:14px; border-left:5px solid var(--primary); }
.entry-content h3{ font-size:20px; font-weight:700; color:#173a63; margin:1.4em 0 .5em; }
.entry-content h4{ font-size:17px; font-weight:700; color:#173a63; margin:1.3em 0 .5em; }
.entry-content h5{ font-size:15px; font-weight:700; color:#173a63; text-transform:uppercase; letter-spacing:.03em; margin:1.2em 0 .4em; }
.entry-content h6{ font-size:14px; font-weight:700; color: var(--muted); margin:1.2em 0 .4em; }
.entry-content h1:first-child, .entry-content h2:first-child{ margin-top:0; }

/* gambar & figure di artikel otomatis responsif desktop->mobile */
.entry-content img,
.entry-content .wp-block-image img,
.entry-content figure{ max-width:100%; height:auto; }
.entry-content figure{ margin:1.4em 0; }
.entry-content .wp-block-image img{ border-radius:10px; display:block; }
.entry-content figcaption{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:6px; }
.entry-content .alignwide{ max-width:100%; }
.entry-content .aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.entry-content iframe{ max-width:100%; }
.wp-block-embed__wrapper{ position:relative; }
@media (max-width:600px){
    .entry-content{ font-size:15px; }
    .entry-content h1{ font-size:23px; }
    .entry-content h2{ font-size:20px; }
    .entry-content h3{ font-size:17px; }
    .entry-content h4{ font-size:16px; }
}

/* =========================================================
   10. FOOTER
========================================================= */
.mja-footer{ background: var(--primary-darker); color:#cfe0f6; margin-top:40px; }
.mja-footer .container{ padding-top:44px; padding-bottom:20px; }
.mja-footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap:24px; }
@media (max-width:900px){ .mja-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .mja-footer-grid{ grid-template-columns: 1fr; } }
.mja-footer h4{ color:#fff; font-size:15px; margin:0 0 14px; }
.mja-footer ul li{ margin-bottom:9px; font-size:13.5px; }
.mja-footer a:hover{ color:#fff; }
.mja-footer-logo img{ max-height:44px; margin-bottom:12px; }
.mja-footer-desc{ font-size:13.5px; line-height:1.7; color:#aecbee; margin-bottom:14px; }
.mja-footer-contact li{ display:flex; gap:8px; align-items:flex-start; }
.mja-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding:16px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#9fc0e8; }

/* Floating WA */
.mja-wa-float{ position:fixed; right:18px; bottom:18px; width:58px; height:58px; border-radius:50%; background:#25d366; box-shadow:0 6px 18px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; z-index:900; }
.mja-wa-float svg{ width:30px; height:30px; fill:#fff; }

/* Mobile sticky bottom bar */
.mja-mobile-bar{ display:none; }
@media (max-width:760px){
    .mja-mobile-bar{ display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; box-shadow:0 -3px 14px rgba(0,0,0,.08); z-index:800; }
    .mja-mobile-bar a{ flex:1; text-align:center; padding:9px 0 7px; font-size:11px; color: var(--muted); font-weight:600; }
    .mja-mobile-bar a svg{ width:20px; height:20px; display:block; margin:0 auto 3px; fill:currentColor; }
    .mja-mobile-bar a.active, .mja-mobile-bar a:hover{ color: var(--primary); }
    body{ padding-bottom:58px; }
    .mja-wa-float{ display:none; }
}

/* =========================================================
   11. MISC (pagination, 404, search form, mobile off-canvas)
========================================================= */
.mja-pagination{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.mja-pagination a, .mja-pagination span{ padding:8px 14px; border-radius:6px; background:#fff; border:1px solid var(--border); font-size:14px; }
.mja-pagination .current{ background: var(--primary); color:#fff; border-color:var(--primary); }

.mja-mobile-panel{ position:fixed; inset:0; background:rgba(10,20,40,.5); z-index:1000; display:none; }
.mja-mobile-panel.is-open{ display:block; }
.mja-mobile-panel-inner{ background:#fff; width:82%; max-width:320px; height:100%; overflow:auto; padding:20px; }
.mja-mobile-panel-close{ background:none; border:0; font-size:22px; float:right; }
.mja-mobile-panel h4{ margin:18px 0 10px; color: var(--primary-darker); font-size:14px; }
.mja-mobile-panel ul li a{ display:block; padding:9px 0; font-size:14px; border-bottom:1px solid var(--border); }

.mja-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.mja-404{ text-align:center; padding:80px 20px; }
.mja-404 h1{ font-size:90px; color: var(--primary); margin:0; }

/* skip link accessibility */
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px; z-index:9999; }
.skip-link:focus{ left:10px; }

.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }