/*
Theme Name: nerangMTB
Theme URI: https://nerangmtb.com/
Author: nerangMTB
Description: A minimal theme for the nerangMTB articles site. It matches the trail map (forest green, warm paper, Bricolage Grotesque and Figtree) and keeps the content simple: posts in the Alert, Events and News categories feed the news rail on the map.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nerangmtb
*/

/* ---------- palette (same values as the map) ---------- */
:root{
  --bg:#E7EBE2; --paper:#F4F5EF; --ink:#1C2B26; --muted:#5E6E66; --line:#C8D0C3;
  --forest:#23443A; --lichen:#9FB595; --sandstone:#D9C9A6; --blue:#2F6DB5; --alert:#C2412D;
  --rail:#23443A; --rail-ink:#EAF0E6; --shadow:0 12px 32px rgba(28,43,38,.14);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,sans-serif;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15201C; --paper:#1D2A25; --ink:#E6EDE3; --muted:#9AAAA1; --line:#34443D;
    --forest:#0F1814; --lichen:#6F8766; --sandstone:#4A4232; --blue:#5C97DD; --alert:#E0664F;
    --rail:#0F1814; --rail-ink:#DDE6DA; --shadow:0 12px 32px rgba(0,0,0,.45);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body)}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:100;background:var(--paper);padding:8px 14px;border-radius:8px;width:auto;height:auto;clip:auto}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}

/* ---------- header ---------- */
.site-head{background:var(--rail);color:var(--rail-ink)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-block:10px}
.brand{font:800 22px/1 var(--display);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand img{width:26px;height:26px}
.site-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.site-nav ul{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0}
.site-nav a{display:inline-block;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;color:var(--rail-ink);border:1px solid rgba(255,255,255,.22)}
.site-nav a:hover,.site-nav .current-menu-item>a,.site-nav .current-cat>a,.site-nav a[aria-current="page"]{background:var(--rail-ink);color:var(--forest)}
.site-nav .to-map{background:var(--lichen);color:var(--forest);border-color:var(--lichen);font-weight:600}

/* ---------- page headings ---------- */
.page-head{padding:44px 0 18px}
.page-head h1{font:800 clamp(34px,5vw,54px)/1 var(--display);letter-spacing:-.035em}
.page-head p{color:var(--muted);margin-top:10px;max-width:56ch}

/* ---------- post cards (same look as the news rail on the map) ---------- */
.feed{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding-bottom:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s ease}
.card:hover{transform:translateY(-2px)}
.card a{text-decoration:none;display:flex;flex-direction:column;height:100%}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--lichen),var(--forest))}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px}
.card h2{font:700 20px/1.2 var(--display);letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15px}
.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.cat{font-weight:600}
.cat.is-alert{color:var(--alert)}

/* ---------- single post / page ---------- */
.article{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,4vw,44px);margin:36px auto;max-width:760px}
.article h1{font:800 clamp(30px,5vw,46px)/1.05 var(--display);letter-spacing:-.03em;margin:8px 0 18px}
.article .hero{border-radius:12px;overflow:hidden;margin:0 0 24px}
.entry>*+*{margin-top:1.1em}
.entry h2{font:700 26px/1.2 var(--display);letter-spacing:-.02em;margin-top:1.6em}
.entry h3{font:700 20px/1.25 var(--display);margin-top:1.4em}
.entry a{color:var(--forest);text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-color-scheme:dark){.entry a{color:var(--lichen)}}
.entry ul,.entry ol{padding-left:1.4em}
.entry blockquote{border-left:4px solid var(--lichen);padding:2px 0 2px 16px;color:var(--muted)}
.entry img,.entry figure{border-radius:10px}
.entry figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.entry table{width:100%;border-collapse:collapse;font-size:15px}
.entry th,.entry td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.entry code,.entry pre{font-size:.92em;background:var(--bg);border-radius:6px}
.entry code{padding:2px 5px}.entry pre{padding:14px;overflow:auto}
.article-foot{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.btn{display:inline-block;padding:9px 16px;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid var(--line)}
.btn.pri{background:var(--forest);color:#EAF0E6;border-color:var(--forest)}

/* ---------- pagination, search, 404 ---------- */
.pagination{padding:8px 0 40px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination a,.pagination span{padding:7px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;background:var(--paper);font-size:14px}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.search-form{display:flex;gap:8px;margin-top:14px}
.search-form input[type=search]{flex:1;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--paper);color:var(--ink)}
.search-form button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:9px 16px;background:var(--forest);color:#EAF0E6;cursor:pointer}
.empty{padding:40px 0;color:var(--muted)}

/* ---------- footer ---------- */
.site-foot{color:var(--muted);font-size:13px;padding:28px 0 44px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
.site-foot a{text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}