/* ==========================================================================
   guides.css — styling for the static /guides/ content pages.
   These pages are plain HTML served directly by Azure Static Web Apps (they
   are NOT part of the Blazor SPA), so they cannot use MudBlazor or app.css
   component styles. Colours and type here mirror app.css so the guides look
   like the rest of the site.
   ========================================================================== */

:root {
    --pmp-primary: #003b95;
    --pmp-primary-dark: #002d70;
    --pmp-text: #212121;
    --pmp-muted: #757575;
    --pmp-border: #e0e0e0;
    --pmp-bg-soft: #f5f5f5;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--pmp-text);
    background: #fff;
    -webkit-text-size-adjust: 100%;
}

/* ── Header ── */
.guide-header {
    background: linear-gradient(0deg, #f6f4f4 0%, #ffffff 100%);
    border-bottom: 1px solid var(--pmp-border);
    padding: 12px 24px;
}

.guide-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.guide-header img { height: 70px; display: block; }

.guide-header-cta {
    background: var(--pmp-primary);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.guide-header-cta:hover { background: var(--pmp-primary-dark); }

/* ── Layout ── */
.guide-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.guide-wide { max-width: 1100px; }

/* ── Breadcrumb ── */
.guide-breadcrumb {
    font-size: 0.85rem;
    color: var(--pmp-muted);
    margin-bottom: 24px;
}

.guide-breadcrumb a { color: var(--pmp-muted); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--pmp-primary); text-decoration: underline; }
.guide-breadcrumb span { margin: 0 6px; }

/* ── Typography ── */
.guide-main h1 {
    font-size: 2.1rem;
    line-height: 1.25;
    margin: 0 0 12px;
    font-weight: 700;
}

.guide-meta {
    color: var(--pmp-muted);
    font-size: 0.88rem;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pmp-border);
}

.guide-standfirst {
    font-size: 1.12rem;
    line-height: 1.7;
    color: #424242;
    margin-bottom: 32px;
}

.guide-main h2 {
    font-size: 1.45rem;
    line-height: 1.3;
    margin: 44px 0 14px;
    font-weight: 650;
}

.guide-main h3 {
    font-size: 1.12rem;
    margin: 28px 0 10px;
    font-weight: 650;
}

.guide-main p { line-height: 1.75; margin: 0 0 18px; }
.guide-main ul, .guide-main ol { line-height: 1.75; padding-left: 22px; margin: 0 0 20px; }
.guide-main li { margin-bottom: 9px; }
.guide-main a { color: var(--pmp-primary); }
.guide-main strong { font-weight: 650; }

/* ── Callout ── */
.guide-callout {
    background: #f0f5fc;
    border-left: 4px solid var(--pmp-primary);
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 0 4px 4px 0;
}

.guide-callout p:last-child { margin-bottom: 0; }
.guide-callout strong { color: var(--pmp-primary); }

/* ── Tables ── */
.guide-table-wrap { overflow-x: auto; margin: 24px 0; }

.guide-main table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    font-size: 0.94rem;
}

.guide-main th, .guide-main td {
    border: 1px solid var(--pmp-border);
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
}

.guide-main th { background: var(--pmp-bg-soft); font-weight: 650; }

/* ── Checklist ── */
.guide-checklist { list-style: none; padding-left: 0; }
.guide-checklist li { padding-left: 30px; position: relative; }
.guide-checklist li::before {
    content: '\2713';
    position: absolute;
    left: 4px;
    color: var(--pmp-primary);
    font-weight: 700;
}

/* ── CTA ── */
.guide-cta {
    background: var(--pmp-bg-soft);
    border: 1px solid var(--pmp-border);
    border-radius: 8px;
    padding: 28px;
    margin: 44px 0 0;
    text-align: center;
}

.guide-cta h2 { margin-top: 0 !important; font-size: 1.3rem; }
.guide-cta p { color: #555; }

.guide-cta-btn {
    display: inline-block;
    background: var(--pmp-primary);
    color: #fff;
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 8px;
}

.guide-cta-btn:hover { background: var(--pmp-primary-dark); }

/* ── Related ── */
.guide-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--pmp-border); }
.guide-related h2 { margin-top: 0 !important; font-size: 1.2rem; }
.guide-related ul { list-style: none; padding-left: 0; }
.guide-related li { margin-bottom: 10px; }

/* ── Index page ── */
.guide-index-intro { font-size: 1.1rem; line-height: 1.7; color: #424242; max-width: 720px; margin-bottom: 8px; }

.guide-cat { margin-top: 48px; }
.guide-cat h2 { font-size: 1.35rem; margin-bottom: 6px; }
.guide-cat-desc { color: var(--pmp-muted); margin-bottom: 20px; }

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.guide-card {
    border: 1px solid var(--pmp-border);
    border-radius: 8px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.guide-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.08); border-color: var(--pmp-primary); }
.guide-card h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--pmp-primary); line-height: 1.35; }
.guide-card p { margin: 0; color: var(--pmp-muted); font-size: 0.92rem; line-height: 1.6; }

/* ── Footer ── */
.guide-footer { background: var(--pmp-bg-soft); border-top: 1px solid var(--pmp-border); }

.guide-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
}

.guide-footer-brand img { height: 40px; margin-bottom: 14px; }
.guide-footer-brand p { color: var(--pmp-muted); max-width: 300px; line-height: 1.6; margin: 0; }

.guide-footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.guide-footer-col h4 { font-size: 1rem; font-weight: 600; margin: 0 0 14px; }
.guide-footer-col a { display: block; color: var(--pmp-muted); text-decoration: none; margin-bottom: 11px; }
.guide-footer-col a:hover { color: var(--pmp-primary); }

.guide-footer-bottom { background: #e8e8e8; padding: 18px 24px; text-align: center; }
.guide-footer-bottom p { color: var(--pmp-muted); font-size: 0.9rem; margin: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .guide-header img { height: 45px; }
    .guide-main { padding: 24px 18px 48px; }
    .guide-main h1 { font-size: 1.6rem; }
    .guide-main h2 { font-size: 1.25rem; }
    .guide-footer-container { grid-template-columns: 1fr; gap: 32px; }
    .guide-footer-links { gap: 36px; }
}