/*!
 * Entity: First aid (firstaid)
 *   - .firstaid-archive, .firstaid-card, .firstaid-badge
 *   - .firstaid-single (reuses .article-single__* panels and components)
 */

:root {
    --fa-derhal: var(--red-600, #B8121F);
    --fa-derhal-bg: var(--red-50, #FDEBEC);
    --fa-tecili: #C2410C;
    --fa-tecili-bg: var(--amber-50, #FFF3E5);
    --fa-evde: #15803D;
    --fa-evde-bg: var(--green-50, #E9F9EF);
}

/* ---------- badge ---------- */

.firstaid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-helper, 0.8125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--fa-c);
    background: var(--fa-bg);
}

.firstaid-badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.firstaid-badge--derhal,
.firstaid-card--derhal,
.firstaid-urgency--derhal { --fa-c: var(--fa-derhal); --fa-bg: var(--fa-derhal-bg); }

.firstaid-badge--tecili,
.firstaid-card--tecili,
.firstaid-urgency--tecili { --fa-c: var(--fa-tecili); --fa-bg: var(--fa-tecili-bg); }

.firstaid-badge--evde,
.firstaid-card--evde,
.firstaid-urgency--evde { --fa-c: var(--fa-evde); --fa-bg: var(--fa-evde-bg); }

/* ---------- call buttons ---------- */

.firstaid-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid transparent;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}

.firstaid-call--danger {
    background: var(--fa-derhal);
    color: #fff;
}

.firstaid-call--danger:hover,
.firstaid-call--danger:focus-visible {
    background: #8F0E18;
    color: #fff;
}

.firstaid-call--primary {
    background: var(--brand-primary);
    color: #fff;
}

.firstaid-call--primary:hover,
.firstaid-call--primary:focus-visible {
    background: var(--brand-primary-dark);
    color: #fff;
}

.firstaid-call--ghost {
    background: var(--surface-card, #fff);
    border-color: var(--fa-derhal);
    color: var(--fa-derhal);
}

.firstaid-call--ghost:hover,
.firstaid-call--ghost:focus-visible {
    background: var(--fa-derhal);
    color: #fff;
}

/* ==========================================================
   Archive
   ========================================================== */

.firstaid-archive {
    padding-block: var(--space-6, 1.75rem) var(--space-8, 2.5rem);
}

.firstaid-alert {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    margin-bottom: var(--space-5, 1.5rem);
    background: var(--fa-derhal-bg);
    border: 1px solid #F5C2C7;
    border-left: 4px solid var(--fa-derhal);
    border-radius: var(--radius-lg, 0.75rem);
}

.firstaid-alert__icon {
    flex: 0 0 auto;
    color: var(--fa-derhal);
}

.firstaid-alert__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--text-primary);
}

.firstaid-alert .firstaid-call {
    flex: 0 0 auto;
}

.firstaid-archive__description {
    margin-bottom: var(--space-5, 1.5rem);
    color: var(--text-secondary);
}

.firstaid-archive__description > :last-child {
    margin-bottom: 0;
}

.firstaid-archive__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-4, 1rem);
}

.firstaid-archive__search {
    flex: 0 1 24rem;
    min-width: 0;
    margin: 0;
}

.firstaid-archive__search-input {
    width: 100%;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-card, #fff);
    color: var(--text-primary);
}

.firstaid-archive__search-input:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    border-color: var(--brand-primary);
}

.firstaid-archive__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.firstaid-archive__cat,
.firstaid-archive__back {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-surface-2);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
}

.firstaid-archive__cat:hover,
.firstaid-archive__cat:focus-visible,
.firstaid-archive__back:hover,
.firstaid-archive__back:focus-visible {
    background: var(--brand-primary);
    color: #fff;
}

.firstaid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem) var(--space-5, 1.5rem);
    margin: 0 0 var(--space-6, 1.75rem);
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--font-size-helper, 0.8125rem);
}

.firstaid-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.firstaid-archive__section {
    margin-bottom: var(--space-7, 2rem);
    scroll-margin-top: 6rem;
}

.firstaid-archive__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--space-4, 1rem);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold, 700);
}

.firstaid-archive__heading a {
    color: inherit;
    text-decoration: none;
}

.firstaid-archive__heading a:hover {
    color: var(--brand-primary);
}

.firstaid-archive__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    font-size: var(--font-size-helper, 0.8125rem);
}

.firstaid-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4, 1rem);
}

.firstaid-archive__empty {
    padding: var(--space-6, 1.75rem) 0;
    color: var(--text-secondary);
    text-align: center;
}

/* ---------- card ---------- */

.firstaid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    height: 100%;
    padding: var(--space-5, 1.5rem);
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default);
    border-top: 4px solid var(--fa-c);
    border-radius: var(--radius-lg, 0.75rem);
    transition: box-shadow .2s ease, transform .2s ease;
}

.firstaid-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
}

.firstaid-card[hidden] {
    display: none;
}

.firstaid-card__title {
    margin: var(--space-1, 0.25rem) 0 0;
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.35;
}

.firstaid-card__link {
    color: var(--text-primary);
    text-decoration: none;
}

.firstaid-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.firstaid-card:hover .firstaid-card__link,
.firstaid-card__link:focus-visible {
    color: var(--brand-primary);
}

.firstaid-card__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.firstaid-card__more {
    margin-top: var(--space-2, 0.5rem);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 0.9375rem;
}

/* ==========================================================
   Single
   ========================================================== */

.firstaid-hero {
    background: var(--fa-bg, var(--brand-accent-t1));
}

.firstaid-hero--derhal { --fa-bg: var(--fa-derhal-bg); }
.firstaid-hero--tecili { --fa-bg: var(--fa-tecili-bg); }
.firstaid-hero--evde   { --fa-bg: var(--fa-evde-bg); }

.firstaid-hero__body {
    justify-content: flex-start;
    gap: var(--space-5, 1.5rem);
}

.firstaid-urgency {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
    background: var(--fa-c);
    border-radius: var(--radius-lg, 0.75rem);
    color: #fff;
}

.firstaid-urgency__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.firstaid-urgency__text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.firstaid-urgency__title {
    font-family: var(--font-family-heading);
    font-size: 1.375rem;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.25;
}

.firstaid-urgency__note {
    font-size: 0.9375rem;
    line-height: 1.5;
    opacity: .95;
}

.firstaid-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-top: auto;
}

.firstaid-hero__actions .firstaid-call--danger,
.firstaid-hero__actions .firstaid-call--primary {
    font-size: 1.125rem;
    padding: 0.9rem 1.75rem;
}

/* steps: title bold, text below */
.firstaid-steps .firstaid-steps__title {
    margin-bottom: 0.25rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary);
}

.firstaid-steps .firstaid-steps__text {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.article-single__panel ol.firstaid-steps {
    margin-bottom: 0;
}

.article-single__panel ul.firstaid-signs {
    margin-bottom: 0;
}

@media (min-width: 992px) {

    .article-single__panel ul.firstaid-signs {
        columns: 2;
        column-gap: var(--space-7, 2rem);
    }

    .article-single__panel ul.firstaid-signs > li {
        break-inside: avoid;
    }
}

/* don'ts: red list with crosses */
.firstaid-single__panel--dont {
    background: var(--fa-derhal-bg);
}

.firstaid-single__panel--dont .article-single__heading {
    color: var(--fa-derhal);
}

.article-single__panel ul.firstaid-donts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-single__panel ul.firstaid-donts > li {
    position: relative;
    margin: 0 0 var(--space-3, 0.75rem);
    padding-left: 2.25rem;
}

.article-single__panel ul.firstaid-donts > li:last-child {
    margin-bottom: 0;
}

.article-single__panel ul.firstaid-donts > li::before {
    content: "\2715";
    position: absolute;
    left: 0;
    top: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fa-derhal);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

/* the 103 callout: red, no grey panel around it */
.article-single__panel.firstaid-single__panel--flat {
    padding: 0;
    background: transparent;
}

.article-single__panel .callout.firstaid-callout-103 {
    --callout-bg: var(--fa-derhal-bg);
    --callout-edge: #F5C2C7;
    --callout-accent: var(--fa-derhal);
    --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8Z'/%3E%3C/svg%3E");
    margin: 0;
    padding-block: var(--space-5, 1.5rem);
}

.firstaid-callout-103__title {
    font-size: 1.375rem;
    margin-bottom: var(--space-3, 0.75rem);
}

.article-single__panel .callout.firstaid-callout-103 ul {
    list-style: disc;
}

.firstaid-callout-103__action {
    margin-top: var(--space-4, 1rem);
}

/* links */
.firstaid-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-5, 1.5rem);
}

.firstaid-links__group {
    padding: var(--space-5, 1.5rem);
    background: var(--brand-surface);
    border-radius: var(--radius-xl, 1rem);
}

.firstaid-links__heading {
    margin-bottom: var(--space-3, 0.75rem);
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold, 700);
}

.firstaid-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.firstaid-links__link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    line-height: 1.4;
    text-decoration: none;
}

.firstaid-links__link:hover,
.firstaid-links__link:focus-visible {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.firstaid-links__link--emergency {
    border-color: var(--fa-derhal);
    color: var(--fa-derhal);
    font-weight: var(--font-weight-semibold, 600);
}

.firstaid-links__link--emergency:hover,
.firstaid-links__link--emergency:focus-visible {
    background: var(--fa-derhal);
    border-color: var(--fa-derhal);
}

.firstaid-single__meta .article-topics {
    margin-top: var(--space-4, 1rem);
}

.firstaid-more {
    padding-block: var(--space-6, 1.75rem) var(--space-8, 2.5rem);
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 991.98px) {

    .firstaid-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    .firstaid-alert {
        flex-wrap: wrap;
    }

    .firstaid-alert__text {
        flex-basis: calc(100% - 3rem);
    }

    .firstaid-alert .firstaid-call {
        width: 100%;
    }

    .firstaid-archive__search {
        flex-basis: 100%;
    }

    .firstaid-archive__cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .firstaid-archive__cat {
        white-space: nowrap;
    }

    .firstaid-archive__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .firstaid-urgency {
        padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    }

    .firstaid-urgency__icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .firstaid-urgency__title {
        font-size: 1.1875rem;
    }

    .firstaid-hero__actions .firstaid-call {
        width: 100%;
    }
}