/*
Theme Name: NdrieL
Theme URI: https://ndriel.com
Author: NdrieL
Author URI: https://ndriel.com
Description: NdrieL — a clean, light classic theme for the ndriel.com web-development tutorials site. Ports the in-house design model: white pages with a copper brand accent, a centered tabbed category masthead, a hero built around a dark code chip, and Prism / Okaidia dark code blocks rendered as titled window cards.
Version: 1.0.0
Requires at least: 6.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: ndriel
Tags: one-column, custom-logo, custom-menu, featured-images, blog, translation-ready
*/

/* ===================================================================
   Design tokens — the in-house model
   =================================================================== */
:root{
  /* ndriel site chrome (light) */
  --page:       #ffffff;
  --ink:        #17130f;   /* near-black headings */
  --ink-2:      #40372f;   /* body */
  --ink-3:      #857a70;   /* muted labels */
  --hair:       #eae5df;
  --hair-2:     #f2ede7;
  --copper:     #c36143;   /* ndriel brand link/accent */
  --copper-lt:  #d9764f;
  --copper-wash:#faf1ec;

  /* code block — Prism Okaidia (the site's real theme) */
  --code-bg:    #272822;
  --code-bar:   #201f1b;
  --t-base:     #f8f8f2;
  --t-comment:  #8292a2;
  --t-key:      #66d9ef;   /* keyword — cyan */
  --t-fn:       #e6db74;   /* function / class — yellow */
  --t-str:      #a6e22e;   /* string — green */
  --t-num:      #ae81ff;   /* number / boolean — purple */
  --t-tag:      #f92672;   /* tag / property — pink */

  /* layout */
  --content: 760px;
  --wide:    1200px;

  --mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ===================================================================
   Base
   =================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--copper);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}

h1,h2,h3,h4,h5,h6{color:var(--ink);line-height:1.2;letter-spacing:-.01em}
h1{font-size:2.1rem;font-weight:800}
h2{font-size:1.55rem;font-weight:700;margin-top:2.2em}
h3{font-size:1.25rem;font-weight:700;margin-top:1.8em}
p{margin:0 0 1.15em}

.container{max-width:var(--content);margin:0 auto;padding:0 24px}
.container-wide{max-width:var(--wide);margin:0 auto;padding:0 32px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:1000}

/* ===================================================================
   Masthead (in-house — centered, tabbed)
   =================================================================== */
.masthead{
  background:linear-gradient(180deg,#fdf6f2,#ffffff 80%);
  border-bottom:1px solid #efdcd2;
}
.mast-in{
  max-width:var(--wide);margin:0 auto;padding:32px 32px 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.brand-lock{display:flex;flex-direction:column;align-items:center;gap:11px}
.brand-lock .logo img{height:34px;width:auto;display:block}
.brand-lock .site-title{font-size:1.6rem;font-weight:800;color:var(--copper);letter-spacing:-.02em}
.tagline{
  font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-3);
}
.nav{display:flex;flex-wrap:wrap;justify-content:center;margin-top:26px;list-style:none;padding:0;gap:0}
.nav li{margin:0}
.nav a{
  display:block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);padding:13px 22px;margin-bottom:-1px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--copper);text-decoration:none}
.nav .here > a,
.nav .current-cat > a,
.nav .current-menu-item > a,
.nav .current_page_item > a{color:var(--copper);border-bottom-color:var(--copper)}

/* ===================================================================
   Hero (front page)
   =================================================================== */
.hero{padding:28px 0 8px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:#e7e4db;background:#272822;
  border-radius:9px;padding:8px 15px;margin:0 0 26px;
  box-shadow:0 10px 26px -14px rgba(39,40,34,.7);
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#a6e22e;
  box-shadow:0 0 0 4px rgba(166,226,46,.16);
}
.hero h1{
  font-size:clamp(36px,5.6vw,57px);line-height:1.05;letter-spacing:-.025em;
  font-weight:800;color:var(--ink);margin:0 0 24px;
}
.hero h1 .accent{color:var(--copper)}
.lede{font-size:19px;line-height:1.65;color:var(--ink-2);margin:0 auto;max-width:58ch}
.lede b{color:var(--ink);font-weight:600}

.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:40px auto 0}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--hair);border-radius:999px;padding:6px 13px 6px 9px;
  font-size:12.5px;color:var(--ink-2);background:#fff;
}
.chip i{width:11px;height:11px;border-radius:3px;display:block}
.chip .mono{font-size:11.5px;color:var(--ink-3)}

/* ===================================================================
   Post lists (front page + archives)
   =================================================================== */
.section-head{display:flex;align-items:baseline;gap:14px;margin:44px 0 26px}
.section-head .num{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--copper)}
.section-head h2{font-size:22px;font-weight:700;color:var(--ink);margin:0}

.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{
  border:1px solid var(--hair);border-radius:14px;background:#fff;padding:22px 22px 24px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.card:hover{border-color:#e6d3c8;box-shadow:0 18px 40px -30px rgba(39,40,34,.5);transform:translateY(-2px)}
.card .kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--copper);margin:0 0 10px;
}
.card h3{margin:0 0 10px;font-size:1.15rem;line-height:1.3}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--copper);text-decoration:none}
.card .excerpt{font-size:15px;color:var(--ink-2);margin:0 0 14px}
.card .meta{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}

/* hairline divider above a section */
.section-rule{border-top:1px solid var(--hair);margin-top:60px;padding-top:8px}
.section-rule .section-head{margin-top:34px}

/* section head "more" link (right-aligned) */
.section-head .more{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.section-head .more:hover{color:var(--copper);text-decoration:none}

/* ---- Featured tutorial (large hero-width card) ---- */
.post-featured{margin-top:60px;padding-top:8px;border-top:1px solid var(--hair)}
.post-featured .section-head{margin-top:34px}
.featured-card{
  display:grid;grid-template-columns:44% 1fr;
  border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:#fff;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.featured-card:hover{border-color:#e6d3c8;box-shadow:0 26px 60px -34px rgba(39,40,34,.55);transform:translateY(-2px);text-decoration:none}
.featured-card__media{position:relative;background:var(--hair-2);min-height:200px}
.featured-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.featured-card__body{padding:26px 30px 28px}
.featured-tag{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--copper);border-radius:999px;padding:3px 11px;margin:0 0 14px;
}
.featured-card .kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--copper);margin:0 0 8px;
}
.featured-card h3{font-size:1.5rem;line-height:1.22;margin:0 0 10px;color:var(--ink)}
.featured-card:hover h3{color:var(--copper)}
.featured-card .excerpt{font-size:15.5px;color:var(--ink-2);margin:0 0 16px}
.featured-more{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--copper)}

/* ---- Browse by topic (category cards) ---- */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.topic{
  display:block;border:1px solid var(--hair);border-radius:14px;background:#fff;
  padding:22px 22px 20px;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.topic:hover{border-color:#e6d3c8;box-shadow:0 18px 40px -30px rgba(39,40,34,.5);transform:translateY(-2px);text-decoration:none}
.topic .ic{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--copper-wash);color:var(--copper);margin:0 0 14px;font-family:var(--mono);font-weight:700;font-size:15px;
}
.topic h3{font-size:1.12rem;margin:0 0 8px;color:var(--ink)}
.topic:hover h3{color:var(--copper)}
.topic p{font-size:14.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.55}
.topic .count{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.topic .count b{color:var(--copper)}

/* ---- Most read (ranked list) ---- */
.rank-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.rank{display:flex;align-items:baseline;gap:16px;padding:14px 6px;border-bottom:1px solid var(--hair-2)}
.rank .r{font-family:var(--mono);font-size:20px;font-weight:800;color:#e2d5cc;min-width:34px}
.rank .rank-body{flex:1;min-width:0}
.rank .kick{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper);display:block;margin:0 0 3px}
.rank .t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.35}
.rank .t:hover{color:var(--copper);text-decoration:none}
.rank .v{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap;align-self:center}

/* ---- Start here (stepper — after shadcn-vue) ---- */
.start-intro{font-size:15px;color:var(--ink-2);margin:-14px 0 26px}
.stepper{display:flex;list-style:none;margin:0;padding:0}
.stepper .step{flex:1;min-width:0}
.step-head{display:flex;align-items:center;margin:0 0 14px}
.step .dot{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;font-weight:700;
  color:var(--copper);background:var(--copper-wash);border:1.5px solid #eccfc2;
}
.step.is-start .dot{color:#fff;background:var(--copper);border-color:var(--copper);box-shadow:0 0 0 4px var(--copper-wash)}
.step .line{flex:1;height:2px;background:var(--hair);margin:0 12px;border-radius:2px}
.step-text{padding-right:20px}
.step-title{font-size:12.5px;color:var(--ink-3);margin:0 0 5px}
.step-desc{display:block;font-size:15px;font-weight:600;line-height:1.32;color:var(--ink)}
.step-desc:hover{color:var(--copper);text-decoration:none}

/* ===================================================================
   Single post / page
   =================================================================== */
.entry{padding:44px 0 20px}
.entry-header{margin-bottom:30px}
.entry-header .kicker{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--copper);margin:0 0 14px;
}
.entry-header h1{font-size:clamp(30px,4.4vw,44px);line-height:1.1;margin:0 0 18px}
.entry-meta{font-size:13px;color:var(--ink-3);font-family:var(--mono)}
.entry-meta a{color:var(--ink-3)}
.entry-updated{font-style:italic;color:#a89e94}
.featured{margin:0 0 32px;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
.featured img{display:block;width:100%}

.entry-content{font-size:17px}
.entry-content h2,.entry-content h3,.entry-content h4{margin-top:1.8em;margin-bottom:.5em}
.entry-content ul,.entry-content ol{margin:0 0 1.15em;padding-left:1.4em}
.entry-content li{margin-bottom:.4em}
.entry-content i,.entry-content em{color:var(--copper)}
.entry-content blockquote{
  margin:1.6em 0;padding:6px 22px;border-left:3px solid var(--copper);
  color:var(--ink-2);background:var(--copper-wash);border-radius:0 10px 10px 0;
}
.entry-content img{border-radius:12px}

/* inline code — brand copper on soft wash */
.entry-content :not(pre) > code{
  font-family:var(--mono);font-size:.85em;
  color:var(--copper);background:var(--copper-wash);
  border:1px solid #f0dcd2;border-radius:6px;padding:2px 7px;
}

/* ===================================================================
   Code blocks — Prism / Okaidia rendered as window cards
   (prism.css supplies the token colours; this is the card chrome)
   =================================================================== */
.entry-content pre[class*=language-],
.entry-content div.code-toolbar{
  margin:1.6em 0;
}
.entry-content pre[class*=language-]{
  border-radius:12px;
  padding:20px 22px 22px;
  overflow-x:auto;
  line-height:1.5;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 50px -28px rgba(39,40,34,.55);
}
/* traffic-light window bar above every block */
.entry-content div.code-toolbar > pre[class*=language-],
.entry-content > pre[class*=language-]{
  padding-top:44px;
}
.entry-content div.code-toolbar::before,
.entry-content > pre[class*=language-]::before{
  content:"";position:absolute;top:15px;left:18px;z-index:5;
  width:11px;height:11px;border-radius:50%;
  background:#ff5f56;
  box-shadow:19px 0 0 #ffbd2e, 38px 0 0 #27c93f;
}
.entry-content div.code-toolbar{position:relative;border-radius:12px}
.entry-content div.code-toolbar > pre[class*=language-]{margin:0}

/* Prism copy button, restyled to the in-house chip */
.entry-content div.code-toolbar > .toolbar{top:11px;right:12px}
.entry-content div.code-toolbar > .toolbar > .toolbar-item > button{
  font-family:var(--mono);font-size:11.5px;
  color:#cfcabf;background:rgba(224,224,224,.16);
  box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:7px;
  padding:5px 11px;
}
.entry-content div.code-toolbar > .toolbar > .toolbar-item > button:hover{
  color:#fff;background:rgba(224,224,224,.28);
}

/* ===================================================================
   Comments (basic)
   =================================================================== */
.comments{margin-top:56px;padding-top:32px;border-top:1px solid var(--hair)}
.comments h2{margin-top:0}
.comment-list{list-style:none;margin:0;padding:0}
.comment-list li{margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--hair-2)}
.comment-author{font-weight:600;color:var(--ink)}
.comment-meta{font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;border:1px solid var(--hair);border-radius:9px;padding:10px 12px;font:inherit;margin:6px 0 14px;
}

/* ===================================================================
   Buttons, pagination
   =================================================================== */
.btn,button,input[type=submit]{
  display:inline-block;font:inherit;font-weight:600;cursor:pointer;
  color:#fff;background:var(--copper);border:0;border-radius:9px;padding:10px 20px;
  transition:background .15s;
}
.btn:hover,button:hover,input[type=submit]:hover{background:var(--copper-lt);text-decoration:none}
.pagination{display:flex;justify-content:center;gap:8px;margin:52px 0 0;flex-wrap:wrap}
.pagination .page-numbers{
  border:1px solid var(--hair);border-radius:9px;padding:8px 14px;color:var(--ink-2);font-size:14px;
}
.pagination .page-numbers.current{background:var(--copper);color:#fff;border-color:var(--copper)}
.pagination a.page-numbers:hover{border-color:var(--copper);color:var(--copper);text-decoration:none}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{
  margin-top:96px;padding:34px 0;border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--ink-3);line-height:1.7;
}
.site-footer .footer-in{
  max-width:var(--wide);margin:0 auto;padding:0 32px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;align-items:center;
}
.site-footer a{color:var(--ink-2)}
.footer-copy{order:1}
.footer-nav{order:2;display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.footer-nav li{margin:0}
.footer-nav a{color:var(--ink-2);font-weight:600}
.footer-nav a:hover{color:var(--copper);text-decoration:none}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width:760px){
  .mast-in{padding:24px 18px 0}
  .nav{margin-top:18px}
  .nav a{font-size:12px;padding:11px 14px;letter-spacing:.05em}
  .brand-lock .logo img{height:30px}
  .tagline{letter-spacing:.24em}
  .hero{padding:20px 0 4px}
  .post-grid{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:1fr}
  .rank-list{grid-template-columns:1fr}
  .featured-card{grid-template-columns:1fr}
  .featured-card__media{min-height:0;aspect-ratio:16/9}
  .container{padding:0 20px}

  /* stepper: vertical on mobile */
  .stepper{flex-direction:column}
  .stepper .step{display:flex;gap:16px}
  .step-head{flex-direction:column;align-items:center;margin:0}
  .step .line{width:2px;height:auto;flex:1;min-height:22px;margin:6px 0}
  .step-text{padding:4px 0 24px}
}