/* Spicy Jiko — WordPress layer: journal, pages, menus, accessibility */

.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--navy); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700; text-decoration:none}
.skip-link:focus{left:12px}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* menus from Appearance → Menus */
.nav ul .current-menu-item > a, .nav ul .current_page_item > a{color:var(--navy)}
.nav .logo img{max-height:42px}

/* inner pages don't have the mobile dock */
body.sj-inner footer{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
footer a{color:inherit}
footer small a{text-decoration:underline; text-underline-offset:3px}

/* journal header */
.j-head{background:var(--soft); position:relative; overflow:hidden; padding-block:clamp(48px,7vw,96px) clamp(36px,5vw,64px)}
.j-head .wrap{position:relative; z-index:2; display:grid; gap:14px}
.j-head .sk{position:absolute; color:var(--green); opacity:.45}
.j-404{background:var(--yellow); min-height:52vh}
.wrap.narrow{max-width:780px}

/* journal list */
.j-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.j-card .j-img{display:block; overflow:hidden}
.j-card .j-img img{width:100%; aspect-ratio:1/.8; object-fit:cover; transition:transform .4s}
.j-card:hover .j-img img{transform:scale(1.03)}
.j-t{font-family:var(--serif); font-size:28px; line-height:1.05}
.j-t a{text-decoration:none}
.j-t a:hover{text-decoration:underline; text-underline-offset:4px}
.j-pager{margin-top:36px}
.j-pager .nav-links{display:flex; gap:8px; flex-wrap:wrap}
.j-pager .page-numbers{display:grid; place-items:center; min-width:44px; height:44px; padding:0 12px; border-radius:999px; border:1.5px solid var(--line); text-decoration:none; font-weight:600}
.j-pager .current{background:var(--navy); border-color:var(--navy); color:#fff}
.j-empty{display:grid; gap:14px; justify-items:start}

/* single */
.j-hero{margin-top:clamp(-28px,-3vw,-12px)}
.j-hero img{border-radius:12px; width:100%; height:auto}
.entry{padding-block:clamp(28px,4vw,48px); font-size:18px; line-height:1.7}
.entry > * + *{margin-top:1.1em}
.entry h2{font-family:var(--serif); font-size:clamp(32px,3.6vw,44px); line-height:1.05; margin-top:1.4em}
.entry h3{font-family:var(--serif); font-size:28px; line-height:1.1; margin-top:1.2em}
.entry a{color:var(--green); text-underline-offset:3px}
.entry img{height:auto; border-radius:10px}
.entry ul,.entry ol{padding-left:1.3em}
.entry li + li{margin-top:.35em}
.entry blockquote{margin:1.4em 0; padding:0 0 0 20px; border-left:4px solid var(--lime); font-family:var(--serif); font-size:28px; line-height:1.2}
.entry figure{margin:1.4em 0}
.entry figcaption{font-size:14px; color:var(--muted); margin-top:6px}
.entry table{width:100%; border-collapse:collapse; font-size:16px}
.entry th,.entry td{border-bottom:1px solid var(--line); padding:8px 6px; text-align:left}
.entry .wp-block-button__link{background:var(--navy); color:#fff; border-radius:999px; padding:14px 24px; font-weight:700; text-decoration:none}
.alignwide{margin-inline:calc(-1 * clamp(0px,8vw,120px))}
.alignfull{margin-inline:calc(50% - 50vw); max-width:100vw}
.aligncenter{margin-inline:auto}
.j-cta{display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; background:var(--lime); border-radius:14px; padding:22px 24px; margin-bottom:28px}
.j-cta p{max-width:46ch}
.j-nav{display:flex; justify-content:space-between; gap:16px; padding-bottom:56px; font-weight:600}
.j-nav a{color:var(--muted); text-decoration:none}
.j-nav a:hover{color:var(--navy)}

/* comments + search */
.j-comments{padding-bottom:64px; display:grid; gap:18px}
.j-clist{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.j-clist .comment-body{background:var(--soft); border-radius:12px; padding:16px}
.j-comments textarea,.j-comments input[type=text],.j-comments input[type=email],.j-comments input[type=url],.j-search input{width:100%; font:inherit; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px}
.j-search{display:flex; gap:8px}

@media (max-width:880px){ .j-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .j-grid{grid-template-columns:1fr}
  body.sj-inner .nav .btn.sj-shoplink{display:inline-flex}
}

/* admin bar offset for the sticky nav */
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}