/* Skill Suites theme — component styles (complements theme.json) */

:root{
  --ss-primary:#0D5C73; --ss-primary-dark:#083D4F; --ss-soft:#E8F1F4;
  --ss-border:#dde7ea; --ss-ink:#0b1f26; --ss-muted:#5a6b70; --ss-surface:#f6fafb;
  --ss-radius:12px; --ss-shadow:0 1px 2px rgba(8,61,79,.05),0 8px 24px rgba(8,61,79,.06);
}

html{scroll-behavior:smooth}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--ss-border);
  backdrop-filter:saturate(1.1) blur(6px);background:rgba(255,255,255,.86)!important}
.site-header .wp-block-site-title a{color:var(--ss-ink)}
.site-header .wp-block-navigation{font-weight:500}
.site-header .wp-block-navigation a{color:var(--ss-ink);text-decoration:none}
.site-header .wp-block-navigation a:hover{color:var(--ss-primary)}
.site-search .wp-block-search__inside-wrapper{border:1px solid var(--ss-border);border-radius:999px;
  background:var(--ss-surface);padding:2px 2px 2px 12px;max-width:230px}
.site-search input{background:transparent;border:0;font-size:.9rem}
.site-search button{border-radius:999px;background:var(--ss-primary)}

/* ---------- Article layout ---------- */
.ss-article-grid{align-items:flex-start}
.ss-article-col .entry-content{font-size:1.0625rem;line-height:1.78;max-width:42rem}
.ss-article-col .wp-block-post-title{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12;
  letter-spacing:-.02em;margin:.2rem 0 .4rem}
.entry-content > *{max-width:42rem}
.entry-content > .alignwide,.entry-content > .alignfull,.entry-content figure.wp-block-table,
.entry-content .ss-ad,.entry-content .ss-figure,.entry-content pre{max-width:none}
.entry-content h2{margin-top:2.4rem;scroll-margin-top:90px}
.entry-content h3{margin-top:1.7rem;scroll-margin-top:90px}
.entry-content :is(h2,h3) a.ss-anchor{opacity:0;margin-left:.35rem;text-decoration:none;color:var(--ss-primary);font-weight:400}
.entry-content :is(h2,h3):hover a.ss-anchor{opacity:1}

/* ---------- Byline ---------- */
.ss-postmeta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;color:var(--ss-muted);
  font-size:.92rem;margin:0 0 1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ss-border)}
.ss-postmeta img{border-radius:50%;width:40px;height:40px}
.ss-postmeta__avatar{display:inline-flex}
.ss-postmeta__by strong{color:var(--ss-ink)}
.ss-postmeta__sep{color:#b9c7cc}
.ss-postmeta a{color:var(--ss-primary);text-decoration:none}

/* ---------- Sidebar + TOC ---------- */
.ss-sidebar{position:sticky;top:86px}
.ss-toc{border:1px solid var(--ss-border);border-radius:var(--ss-radius);padding:1rem 1.1rem;background:#fff}
.ss-toc__title{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-muted);
  font-weight:700;margin:0 0 .6rem}
.ss-toc ul{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.35}
.ss-toc li{margin:.18rem 0}
.ss-toc li.lvl-3{padding-left:.85rem}
.ss-toc a{color:var(--ss-muted);text-decoration:none;display:block;padding:.18rem .2rem;border-left:2px solid transparent}
.ss-toc a:hover{color:var(--ss-primary)}
.ss-toc a.is-active{color:var(--ss-primary-dark);font-weight:600;border-left-color:var(--ss-primary)}
.ss-widget__title{font-size:.72rem!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ss-muted);font-weight:700}
.ss-latest{list-style:none;margin:.4rem 0 0;padding:0}
.ss-latest li{padding:.5rem 0;border-bottom:1px solid var(--ss-border);font-size:.92rem;line-height:1.3}
.ss-latest a{text-decoration:none;color:var(--ss-ink);font-weight:500}
.ss-latest a:hover{color:var(--ss-primary)}
.ss-latest .wp-block-latest-posts__post-date{display:block;color:var(--ss-muted);font-size:.78rem;margin-top:.15rem}

/* ---------- Ads ---------- */
.ss-ad{display:flex;justify-content:center;align-items:center;margin:1.75rem auto;text-align:center}
.ss-ad img{max-width:100%;height:auto;border-radius:10px;display:block;box-shadow:var(--ss-shadow)}
.ss-ad::after{content:"Sponsored";position:relative;display:none}
.ss-ad--leaderboard{margin-top:.5rem}
.ss-ad--rectangle{margin:0 0 1.25rem}
.ss-ad--incontent,.ss-ad--below{margin:2.25rem auto}

/* ---------- Cards (archives + home) ---------- */
.ss-cards__grid{gap:1.5rem!important}
.ss-card{transition:transform .15s ease,box-shadow .15s ease;height:100%}
.ss-card:hover{transform:translateY(-2px);box-shadow:var(--ss-shadow)}
.ss-card .wp-block-post-title a{color:var(--ss-ink);text-decoration:none}
.ss-card .wp-block-post-title a:hover{color:var(--ss-primary)}
.ss-card__cat a{color:var(--ss-primary);text-decoration:none;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;font-size:.72rem}
.ss-card .wp-block-post-excerpt{color:var(--ss-muted)}
.ss-card__meta{color:var(--ss-muted);font-size:.82rem}
.ss-card img{width:100%;object-fit:cover}

/* ---------- Code ---------- */
.entry-content pre,.entry-content pre.wp-block-code{position:relative;background:#0b2a35;color:#e9f3f6;
  border-radius:var(--ss-radius);padding:1rem 1.15rem;overflow:auto;font-size:.88rem;line-height:1.6;
  border:1px solid #0a3340}
.entry-content pre code{background:transparent;color:inherit;padding:0;font-size:inherit;white-space:pre}
.entry-content :not(pre) > code{background:var(--ss-soft);color:var(--ss-primary-dark);
  padding:.12em .4em;border-radius:5px;font-size:.92em}
.ss-copy{position:absolute;top:8px;right:8px;border:1px solid #1f4a5a;background:#0f3a49;color:#cfe6ed;
  font-size:.72rem;padding:3px 9px;border-radius:6px;cursor:pointer;opacity:0;transition:opacity .15s}
.entry-content pre:hover .ss-copy{opacity:1}
.ss-copy.copied{background:var(--ss-primary);color:#fff;border-color:var(--ss-primary)}

/* ---------- Tables / quotes / figures ---------- */
.entry-content table{border-collapse:collapse;width:100%;font-size:.95rem}
.entry-content th,.entry-content td{border:1px solid var(--ss-border);padding:.6rem .85rem;text-align:left}
.entry-content thead th,.entry-content table tr:first-child th{background:var(--ss-primary);color:#fff}
.entry-content tbody tr:nth-child(even) td{background:var(--ss-surface)}
.entry-content figure.wp-block-table{overflow-x:auto}
.entry-content blockquote{border-left:4px solid var(--ss-primary);padding-left:1.1rem;color:var(--ss-ink);font-style:normal}

/* ---------- Series components (native to the theme) ---------- */
.ss-series-card{border:1px solid #cfe0e6;background:var(--ss-soft);border-left:5px solid var(--ss-primary);
  border-radius:var(--ss-radius);padding:1rem 1.25rem;margin:0 0 1.75rem}
.ss-series-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ss-primary);background:#fff;border:1px solid #cfe0e6;border-radius:999px;
  padding:2px 10px;margin-bottom:8px}
.ss-series-card strong{display:block;font-size:1.1rem;color:var(--ss-primary-dark)}
.ss-series-card p{margin:.4rem 0 0;font-size:.95rem}
.ss-tldr{background:#fff;border:1px solid var(--ss-border);border-radius:var(--ss-radius);
  padding:.4rem 1.4rem 1.1rem;margin:0 0 1.75rem;box-shadow:var(--ss-shadow)}
.ss-tldr h2{margin-top:1rem!important;font-size:1.1rem!important;color:var(--ss-primary)}
.ss-callout{background:var(--ss-surface);border:1px solid var(--ss-border);border-left:5px solid var(--ss-primary);
  border-radius:8px;padding:.9rem 1.15rem;margin:1.5rem 0}
.ss-callout strong{color:var(--ss-primary-dark)}
.ss-snippet{background:var(--ss-primary-dark);color:#e9f3f6;border-radius:8px;padding:.75rem 1rem;
  margin:1.1rem 0;overflow-x:auto;font-size:.9rem}
.ss-snippet code{background:transparent;color:#e9f3f6;padding:0}
.ss-figure{margin:1.6rem 0;text-align:center}
.ss-figure svg{max-width:100%;height:auto}
.ss-figure figcaption{font-size:.85rem;color:var(--ss-muted);margin-top:8px}
.ss-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--ss-border);
  border-bottom:1px solid var(--ss-border);padding:1rem 0;margin:1.9rem 0;font-size:.92rem}
.ss-nav span{max-width:48%}

/* ---------- Author + post nav ---------- */
.ss-author-card .wp-block-avatar{flex:0 0 auto}
.ss-postnav{display:inline-block;margin:.4rem .8rem .4rem 0;font-weight:600;text-decoration:none}
.ss-post-tags a{display:inline-block;background:var(--ss-surface);border:1px solid var(--ss-border);
  border-radius:999px;padding:.1rem .7rem;margin:.15rem .25rem .15rem 0;font-size:.82rem;text-decoration:none}

/* ---------- Buttons / hero ---------- */
.ss-hero__title{max-width:20ch;margin-inline:auto}
.is-style-outline .wp-block-button__link{border:1.5px solid rgba(255,255,255,.6)!important;background:transparent!important}

/* ---------- Footer ---------- */
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer__cols{gap:2.5rem}
.site-footer__brand{max-width:30rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .ss-article-grid{display:block}
  .ss-article-grid .wp-block-column{flex-basis:100%!important;width:100%!important}
  .ss-sidebar-col{margin-top:2.5rem}
  .ss-sidebar{position:static}
  .ss-toc{display:none}            /* in-content TOC handled below on mobile */
}
@media (max-width:600px){
  .ss-nav span{max-width:100%}
  .ss-article-col .entry-content{font-size:1.02rem}
  .ss-postmeta{font-size:.86rem}
}