/* Urgent Care Accordion */
.section-urgentcare {
    .container {
        max-width: 1000px;
    }

    .section-header p {
        max-width: 800px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

.uc-accordion {
    margin-top: calc(var(--item-gap) * 2);
    display: flex;
    flex-direction: column;
}

/* Individual accordion item */
.uc-item {
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;

    & + .uc-item {
        margin-top: calc(var(--item-gap) * 0.75);
    }
}

.uc-header {
    display: flex;
    align-items: center;
    padding: calc(var(--item-gap) * 0.75) var(--item-gap);
    gap: var(--item-gap);
    color: var(--dark);
}

.uc-toggle {
    display: flex;
    align-items: center;
    flex: 1;
    gap: var(--item-gap);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;

    &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: -3px;
    }
}

.uc-title {
    font-size: var(--text-lg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--dark);
    flex-shrink: 1;
}

.uc-website {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--medium);
    text-decoration: none;
    flex-shrink: 0;

    &:hover,
    &:focus-visible {
        color: var(--dark);
        text-decoration: underline;

        i,
        i::before {
            text-decoration: none;
        }
    }
}

.uc-header > i {
    margin-left: auto;
    font-size: var(--text-base);
    color: var(--medium);
    transition: transform var(--trans-fast);
    flex-shrink: 0;
    cursor: pointer;

    &:hover {
        color: var(--dark);
    }
}

/* CTA buttons - hidden on desktop, visible on mobile */
.uc-ctas {
    display: none;
}

.uc-content {
    border-top: 1px solid var(--border-gray);
    padding: var(--item-gap);

    h4 {
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--medium);
        margin-bottom: calc(var(--item-gap) * 0.5);
        text-transform: none;
    }
}

.uc-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--item-gap);

    .uc-col {
        padding: calc(var(--item-gap) * 0.5) 0;

        & + .uc-col {
            border-left: 1px solid var(--border-gray);
            padding-left: var(--item-gap);
        }
    }
}

.uc-col {
    p {
        font-size: var(--text-sm);
        line-height: 1.6;
        text-align: left;

        &:last-child {
            margin-bottom: 0;
        }
    }

    a {
        color: var(--dark);
        text-decoration: none;

        &:hover,
        &:focus-visible {
            color: var(--medium);
            text-decoration: underline;
        }
    }
}

/* Dark background overrides */
.bg-dark,
.bg-dark-dim,
.bg-dark-tint {
    .uc-item {
        border-color: rgba(var(--white-rgb), 0.15);
        background: rgba(var(--white-rgb), 0.05);
    }

    .uc-title {
        color: var(--white);
    }

    .uc-content {
        border-color: rgba(var(--white-rgb), 0.15);
    }

    .uc-website {
        &:hover,
        &:focus-visible {
            color: var(--white);
        }
    }

    .uc-col p,
    .uc-col a {
        color: var(--white);
    }

    .uc-details .uc-col + .uc-col {
        border-color: rgba(var(--white-rgb), 0.15);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .uc-header {
        flex-wrap: wrap;
        gap: calc(var(--item-gap) * 0.5);
        padding: calc(var(--item-gap) * 0.6) calc(var(--item-gap) * 0.75);
    }

    .uc-toggle {
        gap: calc(var(--item-gap) * 0.5);
    }

    .uc-title {
        flex: 1;
        font-size: var(--text-base);
    }

    .uc-website {
        display: none;
    }

    .uc-ctas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--item-gap) * 0.5);
        padding: 0 calc(var(--item-gap) * 0.75) calc(var(--item-gap) * 0.6);
    }

    .uc-details {
        grid-template-columns: 1fr;
        gap: 0;

        .uc-col {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--item-gap);
            align-items: start;
            padding: calc(var(--item-gap) * 0.5) 0;

            h4 {
                margin-bottom: 0;
            }

            p {
                grid-column: 2;
            }

            & + .uc-col {
                border-left: none;
                border-top: 1px solid var(--border-gray);
                padding-left: 0;
                padding-top: calc(var(--item-gap) * 0.5);
            }
        }
    }
}