/**
 * SEO Specialist — site-wide page styles (inner pages + shared fixes)
 * Maps legacy markup to SEO Kenya design tokens. Copy in Blade is unchanged.
 */

/* ── Layout fixes ──────────────────────────────────────────────────────────── */
.sk-main > .sk-home:first-child {
    padding-top: 0;
}

/* ── Legacy hero → sk-hero look ──────────────────────────────────────────── */
.sk-main > .hero-section:first-child,
.sk-main > section.bg-light.border-bottom:first-child {
    padding-top: calc(var(--sk-main-offset, 7rem));
}

.hero-section {
    margin-top: 0;
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    background: var(--bs-primary-subtle);
    border-bottom: 1px solid color-mix(in srgb, var(--sk-accent) 12%, #fff);
    color: #1a1a1a;
}

.hero-section .display-4,
.hero-section .display-5 {
    font-family: var(--sk-font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sk-accent) !important;
    margin-bottom: 1.25rem;
}

.hero-section .mono-text {
    font-family: var(--sk-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.hero-section .hero-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #3d3d3d !important;
    max-width: 42rem;
}

.hero-section .row.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.hero-section .text-white {
    color: inherit !important;
}

.hero-section .btn-outline-light {
    color: var(--bs-primary);
    border: 3px solid var(--sk-accent);
    background: transparent;
    font-family: var(--sk-font-heading);
    font-weight: 600;
    border-radius: 0;
}

.hero-section .btn-outline-light:hover {
    background: var(--sk-accent);
    border-color: var(--sk-accent);
    color: #fff;
}

/* Legal / simple page hero */
section.bg-light.border-bottom {
    background: var(--bs-primary-subtle) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--sk-accent) 12%, #fff) !important;
}

section.bg-light.border-bottom h1 {
    font-family: var(--sk-font-heading);
    font-weight: 800;
    color: var(--sk-accent);
}

/* ── Section rhythm ────────────────────────────────────────────────────────── */
.sk-main > section.section-grey,
.sk-main section.section-grey {
    background: #fafafa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.sk-main > section.py-5:not(.hero-section),
.sk-main > section.container.py-5 {
    padding-top: clamp(3rem, 6vw, 5rem) !important;
    padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.sk-main h2.fw-bold,
.sk-main h1.fw-bold {
    font-family: var(--sk-font-heading);
    font-size: var(--sk-title-section, 1.667rem);
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.sk-main h3.h4,
.sk-main h3.h5,
.sk-main h4.h5 {
    font-family: var(--sk-font-heading);
    font-weight: 700;
}

.sk-main .lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #444;
}

.sk-main .text-muted {
    color: #666 !important;
}

.sk-main .text-primary {
    color: var(--bs-primary) !important;
}

/* ── Service summary tiles (seo-services grid) ─────────────────────────────── */
.sk-main a .bg-white.border.rounded,
.sk-main .bg-white.border.rounded {
    border-radius: 0 !important;
    border-color: #e8e8e8 !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sk-main a:hover .bg-white.border.rounded {
    border-color: color-mix(in srgb, var(--sk-accent) 40%, #e8e8e8) !important;
    background: color-mix(in srgb, var(--sk-accent) 3%, #fff) !important;
}

.sk-main a .fw-bold.text-dark {
    font-family: var(--sk-font-heading);
    color: #1a1a1a !important;
}

.sk-main a:hover .fw-bold.text-dark {
    color: var(--bs-primary) !important;
}

/* Related service link rows */
.sk-main .p-3.bg-white.border.rounded.h-100 {
    border-radius: 0 !important;
}

.sk-main a.text-decoration-none:hover .h6.fw-bold.text-dark {
    color: var(--bs-primary) !important;
}

/* ── Service detail anchors / long-form blocks ─────────────────────────────── */
.sk-main section[id^="local-"],
.sk-main section[id^="ecommerce"],
.sk-main section[id^="technical"],
.sk-main section[id^="lead-"],
.sk-main section[id^="content-"],
.sk-main section[id^="keyword-"],
.sk-main section[id^="on-page"],
.sk-main section[id^="link-"],
.sk-main section[id^="schema-"],
.sk-main section[id^="core-"],
.sk-main section[id^="international"],
.sk-main section[id^="youtube"],
.sk-main section[id^="voice-"],
.sk-main section[id^="training"],
.sk-main section[id^="competitive"] {
    scroll-margin-top: calc(var(--sk-navbar-height, 4rem) + 1rem);
}

.sk-main .cta-bordered {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── About page icons ──────────────────────────────────────────────────────── */
.sk-main .feature-box {
    text-align: center;
}

.sk-main .feature-box .bi,
.sk-main .feature-box i {
    color: var(--sk-accent);
}

.sk-main .card-clean .bi-patch-check-fill {
    color: #2e7d32;
}

/* ── Legal prose ───────────────────────────────────────────────────────────── */
.sk-main .legal-content h2 {
    font-family: var(--sk-font-heading);
    font-weight: 700;
    color: #1a1a1a;
}

.sk-main .legal-content ul,
.sk-main .legal-content ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.sk-main .legal-content li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
}

.sk-main .legal-content a {
    color: var(--bs-primary);
    font-weight: 600;
}

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.sk-main section.container.text-center .display-1 {
    font-family: var(--sk-font-heading);
    color: color-mix(in srgb, var(--sk-accent) 35%, #ccc);
}

.sk-main .btn-primary {
    border-radius: 0;
}

/* ── Forms in content ──────────────────────────────────────────────────────── */
.sk-main .form-control,
.sk-main .form-select {
    border-radius: 0;
    border-color: #ddd;
}

.sk-main .form-control:focus {
    border-color: var(--sk-accent);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--sk-accent) 20%, transparent);
}

.sk-main .form-control-lg {
    border-radius: 0;
}

/* ── Tables in content ─────────────────────────────────────────────────────── */
.sk-main .table:not(.table-custom) th {
    font-family: var(--sk-font-heading);
    font-weight: 700;
    background: #fafafa;
}

.sk-main .table-bordered {
    border-color: #e8e8e8;
}

/* ── Resource / checklist pages ──────────────────────────────────────────────── */
.sk-main .list-group-item {
    border-radius: 0;
    border-color: #eee;
}

.sk-main .badge {
    border-radius: 0;
    font-family: var(--sk-font-heading);
    font-weight: 600;
}