/*
Theme Name: Arrowlancer
Theme URI: https://arrowlancer.ma
Author: Arrowlancer
Author URI: https://arrowlancer.ma
Description: Blog theme for arrowlancer.ma. Shares the main site's stylesheet (https://arrowlancer.ma/assets/site.css) and adds article typography. Light, editorial, Newsreader + Source Sans 3; dark mode follows the OS.
Version: 2.0.0
License: Proprietary
Text Domain: arrowlancer
*/

/* The shared stylesheet (enqueued in functions.php) defines the tokens, header, footer, .wrap,
   .eyebrow, .link, .btn, .nf and the dark palette. Everything below is blog-only. */

.nav a.current{color:var(--orange)}

/* list pages */
.blog-head{padding-block:clamp(48px,7vw,96px) clamp(24px,4vw,48px)}
.blog-head h1{font-size:clamp(36px,5vw,64px); line-height:1.02; margin-top:16px; max-width:18ch}
.blog-head .lede{font-size:clamp(18px,1.6vw,21px); color:var(--ink-2); max-width:56ch; margin-top:20px}
.blog-list{padding-block:0 clamp(48px,7vw,96px)}
.post-row{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:24px clamp(24px,4vw,48px); border-top:1px solid var(--rule); padding:32px 0; align-items:start}
.post-thumb img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.post-body h2{font-size:clamp(24px,2.4vw,32px); line-height:1.15; margin-top:12px}
.post-body h2 a:hover{color:var(--orange)}
.post-body p{color:var(--ink-2); margin-top:12px; max-width:60ch}
.post-body .link{display:inline-block; margin-top:16px; font-weight:500}
@media (max-width:700px){ .post-row{grid-template-columns:1fr} }
.pagination{display:flex; flex-wrap:wrap; gap:8px 20px; border-top:1px solid var(--rule); padding-top:28px; margin-top:8px; font-family:var(--mono); font-size:14px}
.pagination .page-numbers{color:var(--ink-2)}
.pagination a.page-numbers:hover{color:var(--orange)}
.pagination .current{color:var(--ink); border-bottom:1px solid var(--orange)}
.empty{border-top:1px solid var(--rule); padding-block:48px}
.empty h2{font-size:28px}
.empty p{color:var(--ink-2); margin-top:12px}

/* article */
.article .wrap{max-width:760px}
.article-head{padding-block:clamp(40px,6vw,80px) clamp(24px,4vw,40px)}
.article-head .crumbs{margin-bottom:28px; font-size:15px}
.article-head h1{font-size:clamp(34px,4.6vw,60px); line-height:1.05; margin-top:14px}
.article-head .meta{font-family:var(--mono); font-size:13px; color:var(--ink-3); margin-top:20px}
.article-hero .wrap{max-width:1000px}
.article-hero img{display:block; width:100%; height:auto; border:1px solid var(--rule)}
.article-body{padding-block:clamp(32px,5vw,64px) clamp(48px,7vw,96px)}
.toc{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; margin-bottom:40px}
.toc .eyebrow{display:block; margin-bottom:10px}
.toc ol{margin:0; padding-left:22px; display:grid; gap:6px; font-size:15px}
.toc li.sub{padding-left:16px; list-style:none; color:var(--ink-2)}
.toc a:hover{color:var(--orange)}

.prose{font-size:18px; line-height:1.65; overflow-wrap:anywhere}
.prose > *{margin:0}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(26px,3vw,34px); line-height:1.15; margin-top:2em; padding-top:.9em; border-top:1px solid var(--rule)}
.prose h3{font-size:22px; line-height:1.25; margin-top:1.8em}
.prose h4{font-family:var(--body); font-weight:600; font-size:18px; margin-top:1.5em}
.prose h2 + *, .prose h3 + *, .prose h4 + *{margin-top:.6em}
.prose a{border-bottom:1px solid var(--orange)}
.prose a:hover{color:var(--orange)}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:1.4em; display:grid; gap:.4em}
.prose li > ul,.prose li > ol{margin-top:.4em}
.prose blockquote{margin-inline:0; padding-left:20px; border-left:2px solid var(--orange); font-family:var(--display); font-size:1.15em; line-height:1.4; color:var(--ink)}
.prose img{max-width:100%; height:auto; display:block; border:1px solid var(--rule)}
.prose figure{margin-inline:0}
.prose figcaption{font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:8px}
.prose code{font-family:var(--mono); font-size:.9em; background:var(--paper-2); padding:.1em .35em}
.prose pre{background:var(--paper-2); padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.5}
.prose pre code{background:none; padding:0; font-size:inherit}
.prose table{width:100%; border-collapse:collapse; font-size:15px; display:block; overflow-x:auto}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
.prose th{font-weight:600; border-bottom-color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--rule); margin-block:2em}
.prose mark{background:var(--orange); color:var(--on-orange); padding:0 .15em}
.prose .wp-block-embed iframe,.prose iframe{max-width:100%}
.tags{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:48px; padding-top:20px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.tags a::before{content:"#"; color:var(--ink-3)}
.tags a:hover{color:var(--orange)}

/* end-of-article call to action */
.post-cta{background:var(--orange); color:var(--on-orange)}
.post-cta .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; padding-block:clamp(40px,6vw,72px)}
.post-cta h2{font-size:clamp(30px,3.6vw,46px); line-height:1.05}
.post-cta p{font-size:18px; margin-top:12px; max-width:44ch; opacity:.85}
.btn-ink{display:inline-block; background:#1B1714; color:#F2ECE4; font-weight:600; font-size:16px; padding:14px 26px; border:1px solid #1B1714; transition:background .15s,color .15s}
.btn-ink:hover{background:transparent; color:#1B1714}

/* WordPress admin bar, when logged in */
body.admin-bar .top{top:0}