/*
 Theme Name: Snake & Moon
 Author: Mrs. Lee Okwei
 Version: 5.1
*/

/* ── Variables ── */
:root{
  --bg:#252827;
  --bg-header:#333333;
  --text:#d9d9d9;
  --accent:#f8cf2c;
  --muted:#999999;
  --hover:#a0b4c4;
  --border:rgba(255,255,255,0.1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}

/* ── Base ── */
html{font-size:16px}
body{font-family:'Lato',sans-serif;font-size:1.2rem;font-weight:400;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--hover);font-weight:700}

/* ── Hamburger toggle ── */
.nav-toggle{display:none;flex-direction:column;justify-content:space-between;width:22px;height:16px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--text);transition:transform 0.2s,opacity 0.2s}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Header (fullwidth — matches Neve HFG main row: 100px height, #333 bg) ── */
.site-header{width:100%;background:var(--bg-header);position:relative}
.header-inner{max-width:1170px;margin:0 auto;padding:0 2.5em;height:100px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{width:50px;height:auto;display:block}
.site-title{font-family:'Lato',sans-serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:0;margin:0}
.header-right{display:flex;align-items:center;gap:1.5em}
.site-byline{color:var(--muted);font-size:0.8rem;white-space:nowrap}

/* ── Nav (matches Neve: 1em, weight 600, lowercase, letter-spacing 0, gap 20px) ── */
.nav-menu{display:flex;list-style:none;gap:20px;flex-wrap:wrap}
.nav-menu>li>a{font-family:'Lato',sans-serif;font-size:1rem;font-weight:600;text-transform:lowercase;letter-spacing:0;line-height:1.6;text-decoration:none;color:var(--text)}
.nav-menu>li>a:hover{color:var(--hover);font-weight:700}
.nav-menu>li.current-menu-item>a,.nav-menu>li.current-menu-ancestor>a{color:var(--hover);font-weight:700}
.nav-menu li{position:relative}
.nav-menu .sub-menu{display:none;position:absolute;top:100%;left:0;background:var(--bg-header);border:1px solid var(--border);min-width:14em;z-index:100;list-style:none;padding:0.6em 0;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.nav-menu li:hover>.sub-menu{display:block}
.nav-menu .sub-menu a{font-size:0.75rem;font-weight:600;text-transform:lowercase;padding:0.5em 1.25em;display:block;white-space:nowrap;color:var(--text);text-decoration:none}
.nav-menu .sub-menu a:hover{color:var(--hover);font-weight:700;background:rgba(255,255,255,0.04)}

/* ── Layout ── */
.site{max-width:1170px;margin:0 auto;padding:0 2.5em}
.site-content{max-width:900px;margin:0 auto;padding:3em 0}

/* ── Article header ── */
.entry-header{text-align:center;margin-top:2em;margin-bottom:2.5em}
.entry-tags{margin-bottom:0.75em}
.post-tag{font-family:'Lato',sans-serif;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);text-decoration:none;margin:0 0.4em}
.post-tag:hover{color:var(--hover);font-weight:700}
.entry-title{font-family:'Abril Fatface',serif;font-size:4rem;line-height:1.1;margin-bottom:0.6em;color:var(--muted)}
.entry-title a{text-decoration:none;color:var(--text)}
.entry-title a:hover{color:var(--hover);font-weight:700}

/* ── Category links ── */
.entry-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em;margin-bottom:0.75em}
.cat-tag{font-family:'Lato',sans-serif;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--accent);text-decoration:none}
.cat-tag:hover{color:var(--hover);font-weight:700}
.cat-tag:not(:last-child)::after{content:',';color:var(--muted)}

/* ── Date below tags ── */
.dateline-tag{font-style:normal;font-weight:300}
.dateline-tag::after{content:' | ';color:#ffffff;font-style:normal}
.entry-dateline{font-family:'Lato',sans-serif;font-weight:300;font-style:italic;font-size:1.25rem;color:#ffffff;margin-top:0.75em;line-height:1.6}

/* ── Dateline / kicker (first para in content: "Research Analysis | May 2, 2026") ── */

/* ── Pullquote ── */
.sm-pullquote{font-family:'Lato',sans-serif;font-weight:300;font-style:italic;font-size:1.5rem;line-height:1.6;color:#cccccc;padding:0.2em 0 0.2em 1.25em;width:70%;margin:1.5em auto;border-left:3px solid var(--muted)}
.sm-pullquote::before,.sm-pullquote::after{display:none}

/* ── Back to top ── */
#back-to-top{position:fixed;bottom:30px;right:20px;background:#f8cf2c;color:#252827;border:none;border-radius:3px;padding:8px 10px;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:999;transition:opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;opacity:0;visibility:hidden}
#back-to-top.visible{display:flex;opacity:1;visibility:visible}
#back-to-top:hover,#back-to-top:focus{background:#f8cf2c;color:#252827;text-decoration:none}
#back-to-top svg{width:16px;height:16px;display:block}

/* ── Content ── */
.entry-content{font-size:1.2rem;line-height:1.75;color:var(--text)}
.entry-content p{margin-bottom:1.5em}
.entry-content h2{font-family:'Abril Fatface',serif;font-size:2.4rem;line-height:1.15;margin:3em 0 1.5em;color:var(--text)}
.entry-content h3{font-family:'Abril Fatface',serif;font-size:1.5rem;line-height:1.2;margin:2em 0 0.4em;color:var(--text)}
.entry-content h2+p:not([id^="fn-"])::first-letter,.entry-content h3+p:not([id^="fn-"])::first-letter{float:left;font-family:'Abril Fatface',serif;font-size:3.5em;line-height:0.75;margin:0.05em 0.1em 0 0;color:var(--accent)}
.entry-content a{color:var(--accent)}
.entry-content a:hover{color:var(--hover);font-weight:700}
.entry-content blockquote{border-left:3px solid var(--border);padding-left:1.5em;margin:1.5em 0;font-style:italic;color:var(--muted)}
.entry-content ul,.entry-content ol{margin:0 0 1.5em 1.5em;color:var(--text)}
.entry-content sup{font-size:0.68em;vertical-align:super;margin-right:0.2em}
.entry-content em{font-style:italic}
.entry-content strong{font-weight:700;color:var(--text)}

/* ── Footnotes ── */
.entry-content p[id^="fn-"]{font-size:1.05rem;color:var(--muted);margin-bottom:2.75em;line-height:1.6}

/* ── Archive ── */
.archive-title{font-family:'Abril Fatface',serif;font-size:2rem;color:var(--text);margin-bottom:1.5em}
.post-list{list-style:none}
.post-list-item{padding:1.5em 0;border-bottom:1px solid var(--border)}
.post-list-item h2{font-family:'Abril Fatface',serif;font-size:1.4rem;margin-bottom:0.3em;color:var(--text)}
.post-list-item h2 a{text-decoration:none;color:var(--text)}
.post-list-item h2 a:hover{color:var(--hover);font-weight:700}
.post-list-item .post-meta{font-size:0.75rem;color:var(--muted);margin-bottom:0.5em;text-transform:uppercase;letter-spacing:0.06em}
.post-list-item p{font-size:0.9rem;color:var(--muted)}

/* ── Footer ── */
.site-footer{display:none}

/* ── Tablet (≤768px) ── */
@media(max-width:768px){
  .site{padding:0 1.5em}
  .header-inner{padding-left:1.5em;padding-right:1.5em;flex-wrap:nowrap}
  .site-byline{display:none}
  .nav-toggle{display:flex}
  .nav-menu{display:none;position:absolute;top:100px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg-header);padding:1em 2em;border-top:1px solid var(--border);z-index:200}
  .nav-menu.is-open{display:flex}
  .nav-menu>li>a{padding:0.5em 0}
  .entry-title{font-size:2.5rem}
  .entry-meta{font-size:0.65rem}
  .cat-tag{font-size:0.65rem}
  .entry-dateline{font-size:0.9rem}
  .entry-content h2{font-size:1.7rem}
  .entry-content h3{font-size:1.3rem}
  .sm-pullquote{font-size:1.2rem;width:100%}
}

/* ── Small mobile (≤480px) ── */
@media(max-width:480px){
  .site{padding:0 1em}
  .header-inner{padding-left:1em;padding-right:1em}
  .site-title{font-size:1rem}
  .nav-menu .sub-menu{position:static;border:none;box-shadow:none;padding-left:1em;background:transparent}
  .entry-title{font-size:1.9rem}
  .entry-content h2{font-size:1.5rem;margin-top:2em}
  .entry-content h3{font-size:1.2rem}
  .entry-content h2+p:not([id^="fn-"])::first-letter,.entry-content h3+p:not([id^="fn-"])::first-letter{float:none;font-size:1em;margin:0}
  .sm-pullquote{padding:0.5em 1.2em}
}