/* ==========================================================================
   guide.css
   Shared reskin stylesheet for all EzPepGuides *_Protocol.html pages.

   Every guide page ships an identical (legacy) inline <style> block that
   hard-codes the old navy/gold color scheme. Rather than hand-edit 73 files'
   worth of inline CSS, this stylesheet is linked AFTER that inline <style>
   block (immediately before </head>) so that, at equal selector specificity,
   the cascade's "last rule wins" tie-break lets these declarations take
   over. Selectors below intentionally mirror the inline block's selectors
   (same class names, same pseudo-elements, same nth-child) so every legacy
   rule gets a same-specificity override here.

   Design system: Meta-commerce (see ../DESIGN.md) — stark white canvas,
   ink text, hairline borders, flat 8/16/24/32px-radius cards, pill badges,
   cobalt/oculus-purple accents used sparingly.
   ========================================================================== */

/* ---- Base page ---- */

body {
    font-family: "Optimistic VF", Montserrat, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #ffffff;
    color: #1c1e21;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
}

/* ---- Container: flat card, no shadow ---- */

.container {
    max-width: 900px;
    background: #ffffff;
    border-radius: 32px;
    border: 1px solid #dee3e9;
    box-shadow: none;
    overflow: hidden;
}

/* ---- Header: dark promo-strip ---- */

.header {
    background: #0a1317;
    color: #ffffff;
    padding: 48px 30px;
    text-align: center;
    border-bottom: none;
}

.header h1 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0;
}

.divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.25);
    margin: 15px 0;
}

/* ---- Section titles ---- */

.section-title {
    font-size: 24px;
    font-weight: 500;
    color: #0a1317;
    letter-spacing: 0;
}

.icon {
    font-size: 24px;
}

/* ---- Info / reconstitution / cycle boxes: soft-surface cards, no stripe ---- */

.info-box,
.reconstitution-box,
.cycle-box {
    background: #f1f4f7;
    border-left: none;
    border-radius: 16px;
    padding: 24px;
}

.info-item,
.reconstitution-item,
.cycle-item {
    font-size: 15px;
    line-height: 1.6;
}

.info-item strong,
.reconstitution-item strong,
.cycle-item strong {
    color: #0a1317;
}

/* ---- Detail / syringe boxes: white card with hairline border ---- */

.detail-box,
.syringe-info {
    background: #ffffff;
    border: 1px solid #dee3e9;
    border-radius: 16px;
    padding: 24px;
}

.detail-box li,
.syringe-info li {
    color: #0a1317;
}

.detail-box li:before,
.syringe-info li:before {
    color: #0064e0;
}

/* ---- Tables: spec-table style, no shadow, no navy header ---- */

table {
    border: 1px solid #dee3e9;
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

th {
    background: #ffffff;
    color: #1c1e21;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.14px;
    border-bottom: 1px solid #ced0d4;
}

td {
    font-size: 14px;
    color: #444950;
    border-bottom: 1px solid #dee3e9;
}

tr:nth-child(even) {
    background: #f8fafb;
}

.dose-col {
    color: #0a1317;
    font-weight: 700;
}

/* ---- Titration protocol: pill week badges ---- */

.week-badge {
    min-width: 100px;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
}

.week-1 {
    background: #31a24c;
    color: #ffffff;
}

.week-2 {
    background: #0064e0;
    color: #ffffff;
}

.week-3 {
    background: #f2a918;
    color: #0a1317;
}

.week-4 {
    background: #a121ce;
    color: #ffffff;
}

.protocol-details {
    background: #f1f4f7;
    border-radius: 8px;
    border-left: none;
}

/* ---- Notes box: warranty-card style ---- */

.notes-box {
    background: #f1f4f7;
    border-left: none;
    border-radius: 24px;
    padding: 32px;
}

.notes-box h3 {
    color: #0a1317;
}

.notes-box li {
    color: #1c1e21;
}

.notes-box li:before {
    color: #31a24c;
}

/* ---- Overview prose ----------------------------------------------------
   The guides now carry their own .overview-intro / .overview-research styling
   inline, and this stylesheet loads after that block, so any `.info-box p` or
   `.info-box a` rule here would win the cascade at equal specificity and
   override that design (green international links turning cobalt, every
   paragraph picking up the lede size). The overview is therefore left to the
   page's own rules on purpose.
   ------------------------------------------------------------------------ */


.research-block ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

.research-block li {
    color: #1c1e21;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    padding-left: 4px;
}

.research-block li:last-child {
    margin-bottom: 0;
}

/* ---- Disclaimer: caption style, hairline rule instead of dashed box ---- */

.disclaimer {
    background: transparent;
    border: none;
    border-top: 1px solid #dee3e9;
    border-radius: 0;
    padding: 16px 0 0 0;
    font-size: 12px;
    color: #8595a4;
    margin-top: 20px;
    text-align: center;
    font-style: italic;
}