/* Door into Jewel (WEBSITE-DOOR-001): floating WhatsApp button and emergency strip.
   Loaded by every public page. Checked by tests/door_check.py. */

.emergency-strip {
    max-width: 1200px;
    margin: 40px auto 24px;
    padding: 14px 20px;
    background: #FEF2F2;
    border-left: 4px solid #DC2626;
    border-radius: 12px;
    color: #7F1D1D;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    position: relative;
    z-index: 1;
}
.emergency-strip a {
    color: #B91C1C;
    text-decoration: underline;
}

.jewel-float {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1000; /* below the cookie bar, which is shown until dismissed */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
}
/* While the cookie bar shows, lift the button clear of it (RULING-2).
   Browsers without :has() keep the button under the bar, never over Accept. */
body:has(.cookie-consent.show) .jewel-float {
    bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}
.jewel-float:hover,
.jewel-float:focus-visible {
    color: #fff;
    transform: translateY(-2px);
}
.jewel-float:focus-visible {
    outline: 3px solid #1A1A2E;
    outline-offset: 3px;
}
.jewel-float svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Jewel AI by HealthGrid Africa (RULING-5): brand marks that tie the service
   name to the company for Meta's display-name review. Brand colours #3F8CCB
   (blue) and #8DC73F (green). Blue text is set bold at 20px or larger, where
   its 3.6:1 contrast on white meets WCAG AA for large text; green is used on
   the dark footer and as a non-text accent only. */
.brand-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 16px;
    border: 2px solid #8DC73F;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #3F8CCB;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}
.brand-eyebrow span {
    color: #3F8CCB;
}
/* The home header is about 234px tall (180px logo); the hero's 140px top
   padding let the header cover the first line. Start the hero below it so the
   brand line shows. Desktop only; smaller screens keep their own padding. */
@media (min-width: 1025px) {
    section.hero:has(.brand-eyebrow) {
        padding-top: 270px;
    }
}
.brand-line {
    margin-top: 16px !important;
    font-weight: 600;
}
.brand-line a {
    color: #3F8CCB;
    font-weight: 700;
}
.footer-bottom p + .footer-service {
    margin-top: 8px;
}
.footer-service .brand-jewel {
    color: #8DC73F;
    font-weight: 700;
}
.jewel-float > span {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.jewel-float small {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.95;
}

@media (max-width: 480px) {
    .jewel-float {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        padding: 14px;
    }
    .jewel-float span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .emergency-strip {
        margin: 32px 16px 20px;
    }
}

@media print {
    .jewel-float { display: none; }
}

/* FAQ (WEBSITE-DOOR-001 pass 3). Jewel's own words, and answers awaiting approval. */
.faq-quote {
    margin: 12px 0 16px;
    padding: 12px 16px;
    border-left: 3px solid #25D366;
    background: rgba(37, 211, 102, 0.06);
    border-radius: 8px;
}
.faq-quote figcaption {
    font-size: 0.85rem;
    font-weight: 600;
    color: #128C7E;
    margin-bottom: 4px;
}
.faq-quote p {
    margin: 0;
    font-style: italic;
}
.faq-draft {
    outline: 2px dashed #D97706;
    outline-offset: 4px;
    background: #FFFBEB;
}
.faq-draft::before {
    content: "DRAFT, not for upload: ";
    font-weight: 700;
    color: #B45309;
}
.faq-drafted {
    outline: 2px dashed #2563EB;
    outline-offset: 4px;
    background: #EFF6FF;
}
.faq-drafted::before {
    content: "EXISTING DRAFT, awaiting CEO confirmation: ";
    font-weight: 700;
    color: #1D4ED8;
}