/*
Theme Name: CertiSpark
Description: CertiSpark public site theme, ported from the static v1 site.
Version: 1.0.0
*/

html, body { margin: 0; min-height: 100%; }
body { background: #faf6ef; }

.cs-frame {
    --cs-pine: #123a2c;
    --cs-pine-deep: #0c2a20;
    --cs-cream: #faf6ef;
    --cs-sage: #8fb8a2;
    --cs-amber: #f2a33c;
    --cs-ink: #1c2b26;
    --cs-ink-2: #4d5a54;
    --cs-hairline: #e5ded2;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--cs-ink);
    background: var(--cs-cream);
    min-height: 100vh;
}
.cs-frame section { scroll-margin-top: 12px; }

/* Nav */
.cs-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--cs-cream);
    border-bottom: 1px solid var(--cs-hairline);
    flex-wrap: wrap;
}
.cs-logo-link { display: inline-flex; }
.cs-logo-img { height: 26px; width: auto; display: block; align-self: flex-start; flex: none; }
.cs-logo-img-footer { height: 22px; }
.cs-nav-links { display: none; gap: 18px; margin-left: 8px; flex: 1; }
.cs-nav-links a {
    padding: 8px 0;
    font-size: 14px; color: var(--cs-ink-2);
    text-decoration: none;
}
.cs-nav-links a:hover { color: var(--cs-pine); }
.cs-soon {
    margin-left: auto;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--cs-pine);
    background: #fff;
    border: 1.5px solid var(--cs-sage);
    border-radius: 999px;
    padding: 7px 14px;
    text-transform: uppercase;
}

/* Buttons */
.cs-btn {
    display: inline-block;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
}
.cs-btn-primary { background: var(--cs-pine); color: #fff; }
.cs-btn-primary:hover { background: var(--cs-pine-deep); }
.cs-btn-ghost { background: transparent; color: var(--cs-pine); box-shadow: inset 0 0 0 1.5px var(--cs-pine); }

/* Hero */
.cs-hero {
    display: grid;
    gap: 24px;
    padding: 32px 20px 36px;
    background: linear-gradient(180deg, #fdfaf4 0%, var(--cs-cream) 100%);
}
.cs-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-pine);
    margin: 0 0 10px;
}
.cs-hero h1 {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--cs-pine-deep);
    margin: 0 0 14px;
}
.cs-hero-sub { font-size: 16px; line-height: 1.55; color: var(--cs-ink-2); margin: 0 0 20px; }
.cs-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.cs-hero-meta { font-size: 12.5px; color: var(--cs-ink-2); margin: 0; }
.cs-hero-art img {
    width: 100%;
    display: block;
    border-radius: 16px;
    border: 1px solid var(--cs-hairline);
}

/* Strip */
.cs-strip {
    display: grid;
    gap: 1px;
    background: var(--cs-hairline);
    border-top: 1px solid var(--cs-hairline);
    border-bottom: 1px solid var(--cs-hairline);
}
.cs-strip-item {
    background: #fff;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-strip-item strong { font-size: 14px; color: var(--cs-pine); }
.cs-strip-item span { font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); }

/* Sections */
.cs-section { padding: 36px 20px; border-bottom: 1px solid var(--cs-hairline); }
.cs-section h2 {
    font-size: 25px;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--cs-pine-deep);
    margin: 0 0 12px;
}
.cs-section-sub { font-size: 15px; line-height: 1.55; color: var(--cs-ink-2); margin: 0 0 20px; }

/* Steps */
.cs-steps { display: grid; gap: 14px; }
.cs-step {
    background: #fff;
    border: 1px solid var(--cs-hairline);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cs-sage);
    color: var(--cs-pine-deep);
    font-weight: 800; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cs-step strong { font-size: 15.5px; color: var(--cs-pine-deep); }
.cs-step span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); }

/* Course modules */
.cs-course { background: #fff; }
.cs-modules { display: grid; gap: 10px; }
.cs-module {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; color: var(--cs-ink);
    background: var(--cs-cream);
    border: 1px solid var(--cs-hairline);
    border-radius: 10px;
    padding: 12px 14px;
}
.cs-module-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-amber); flex: none; }

/* Features */
.cs-features { display: grid; gap: 14px; }
.cs-feature {
    border-left: 3px solid var(--cs-sage);
    padding: 4px 0 4px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.cs-feature strong { font-size: 15px; color: var(--cs-pine-deep); }
.cs-feature span { font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); }

/* FAQ */
.cs-faq details {
    background: #fff;
    border: 1px solid var(--cs-hairline);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.cs-faq summary {
    font-size: 14.5px; font-weight: 700; color: var(--cs-pine-deep);
    cursor: pointer;
}
.cs-faq details p { font-size: 13.5px; line-height: 1.55; color: var(--cs-ink-2); margin: 10px 0 2px; }

/* Footer */
.cs-footer {
    padding: 24px 20px 28px;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--cs-pine-deep);
}
.cs-footer-note { font-size: 12.5px; color: #b9cdc3; }

/* Wider screens */
@media (min-width: 700px) {
    .cs-nav-links { display: flex; }
    .cs-hero { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 48px 36px 52px; }
    .cs-hero h1 { font-size: 44px; }
    .cs-strip { grid-template-columns: repeat(3, 1fr); }
    .cs-section { padding: 48px 36px; }
    .cs-steps { grid-template-columns: repeat(3, 1fr); }
    .cs-modules { grid-template-columns: 1fr 1fr; }
    .cs-features { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .cs-nav { padding: 16px 36px; }
    .cs-footer { padding: 28px 36px 32px; }
}

/* Course catalogue grid */
.cs-course-grid { display: grid; gap: 14px; }
.cs-course-card {
    display: flex; flex-direction: column; gap: 8px;
    background: #fff;
    border: 1px solid var(--cs-hairline);
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: var(--cs-ink);
}
.cs-course-card:hover { border-color: var(--cs-sage); }
.cs-course-card-first { border: 2px solid var(--cs-pine); }
.cs-course-cat {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cs-pine);
}
.cs-course-card strong { font-size: 16px; line-height: 1.3; color: var(--cs-pine-deep); }
.cs-course-tag { font-size: 13.5px; line-height: 1.5; color: var(--cs-ink-2); flex: 1; }
.cs-course-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.cs-course-arrow { color: var(--cs-pine); font-size: 16px; }
.cs-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--cs-pine);
    background: #fff;
    border: 1.5px solid var(--cs-sage);
    border-radius: 999px;
    padding: 5px 12px;
    text-transform: uppercase;
}
.cs-course-soonline { margin: 4px 0 0; }
.cs-course-note { font-size: 13px; color: var(--cs-ink-2); margin: 18px 0 0; }
.cs-hero-simple { padding-bottom: 20px; }
.cs-section-link { padding-top: 24px; padding-bottom: 24px; }

@media (min-width: 700px) {
    .cs-course-grid { grid-template-columns: repeat(3, 1fr); }
}

/* v3: catalogue, filters, breadcrumbs */
.cs-crumbs{font-size:13px;color:var(--cs-ink-2);padding:14px 20px 0}
.cs-crumbs a{color:var(--cs-pine)}
.cs-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.cs-chip{border:1.5px solid var(--cs-sage);background:#fff;color:var(--cs-pine);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.cs-chip[aria-pressed=true],.cs-chip.on{background:var(--cs-pine);color:#fff;border-color:var(--cs-pine)}
.cs-filter-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cs-ink-2);margin:14px 0 6px}
.cs-count{font-size:13.5px;color:var(--cs-ink-2);margin:0 0 14px}
.cs-flags{display:flex;gap:6px;flex-wrap:wrap}
.cs-flag{font-size:11.5px;font-weight:700;border:1px solid var(--cs-hairline);border-radius:6px;padding:2px 7px;color:var(--cs-ink-2);background:var(--cs-cream)}
.cs-prose p{font-size:15px;line-height:1.6;color:var(--cs-ink-2);max-width:68ch}
.cs-note{background:#fff;border:1px solid var(--cs-hairline);border-left:3px solid var(--cs-amber);border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--cs-ink-2);margin-top:18px}
.cs-hidden{display:none!important}
.cs-hero-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.cs-logo-img{height:26px;width:auto}
.cs-logo-img-footer{height:22px;width:auto}
.cs-search{width:100%;max-width:420px;box-sizing:border-box;border:1.5px solid var(--cs-sage);border-radius:999px;padding:11px 16px;font-size:15px;font-family:inherit;background:#fff;color:var(--cs-ink);margin-bottom:6px}
.cs-links{display:flex;flex-wrap:wrap;gap:10px}
.cs-footer a{color:#b9cdc3;font-size:13px}
.cs-footer-links{display:flex;flex-wrap:wrap;gap:14px}
.cs-page-head{padding:28px 20px 8px}
.cs-page-head h1{font-size:32px;line-height:1.15;letter-spacing:-.03em;color:var(--cs-pine-deep);margin:0 0 10px}
@media(min-width:700px){.cs-page-head{padding:40px 36px 8px}.cs-page-head h1{font-size:40px}.cs-course-grid{grid-template-columns:repeat(3,1fr)}.cs-crumbs{padding:16px 36px 0}}

/* v2: mobile polish */
@media (max-width:699px){
  .cs-nav{row-gap:4px}
  .cs-nav-links{display:flex;flex-wrap:wrap;gap:2px 16px;order:3;flex-basis:100%;margin-left:0}
  .cs-nav-links a{padding:6px 0;font-size:13.5px}
  .cs-hero{padding:26px 20px 28px}
  .cs-hero h1{font-size:30px}
  .cs-hero-art img{aspect-ratio:16/10;object-fit:cover}
  .cs-page-head{padding:24px 20px 6px}
  .cs-page-head h1{font-size:28px}
  .cs-crumbs{padding:12px 20px 0;font-size:12.5px;line-height:1.8}
}