/*
 * Community post extras shared by the profile page, the community-domain
 * discussions page and the thread page: photo grids and the moderator
 * review queue. Registered by views/community/_post-images.php and
 * _review-queue.php.
 */

/* Moderation review queue (post approval) */
.community-review-card {
    border-color: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-border-color));
}
.community-review-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid var(--bs-border-color);
}
.community-review-item:first-child {
    border-top: 0;
}
.community-review-item-body {
    flex: 1 1 16rem;
    min-width: 0;
}
.community-review-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.community-review-item,
.community-post-card,
.community-post-item,
.reply-item {
    transition: opacity 0.25s ease;
}
.is-moderated {
    opacity: 0;
}

/* Post photos */
.community-post-images {
    display: grid;
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.75rem 0;
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
}
.community-post-images--1 {
    grid-template-columns: minmax(0, 1fr);
}
.community-post-images--3 .community-post-image-link:first-child {
    grid-row: span 2;
}
.community-post-image-link {
    display: block;
    background: var(--bs-tertiary-bg);
}
.community-post-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 28rem;
    object-fit: cover;
}
.community-post-images--compact .community-post-image {
    max-height: 14rem;
    aspect-ratio: 4 / 3;
}
.community-post-images--compact.community-post-images--1 .community-post-image {
    aspect-ratio: 16 / 9;
}

/* Composer: busy submit button + photo previews */
.btn.is-busy:disabled {
    opacity: 1;
    cursor: progress;
}
.community-image-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.community-image-previews:empty {
    display: none;
}
.community-image-preview {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}
.community-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.community-image-preview-busy {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    color: var(--bs-primary);
}
.community-image-previews.is-uploading .community-image-preview-busy {
    display: flex;
}

/* Composer post-type toggle (Discussion / Question / Announcement):
   brand-coloured pills from the Appearance tab's Buttons card (--wb-btn-*)
   and the site-wide button shape/type tokens (--website-button-*). The
   #new-discussion-form prefix outranks the older per-page rules in
   community-profile.css and discussions.php. */
#new-discussion-form .post-type-tabs {
    gap: 0.5rem;
}
#new-discussion-form .post-type-tabs .nav-link {
    --type-brand: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500, #3f7d5c))));
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 1rem;
    border: 1px solid var(--type-brand);
    border-radius: var(--website-button-radius, var(--radius-full, 999px));
    background: transparent;
    /* !important: theme.css paints every .nav-link with an !important colour */
    color: var(--type-brand) !important;
    font-weight: var(--website-button-weight, 600);
    text-transform: var(--website-button-transform, none);
    letter-spacing: var(--website-button-tracking, 0);
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#new-discussion-form .post-type-tabs .nav-link:hover {
    border-color: var(--type-brand);
    background: color-mix(in srgb, var(--type-brand) 8%, transparent);
    transform: translateY(-1px);
}
#new-discussion-form .post-type-tabs .nav-link.active {
    border-color: var(--type-brand);
    background: var(--type-brand);
    color: var(--wb-btn-text, var(--website-btn-primary-text, var(--website-button-text-color, #fff))) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--type-brand) 35%, transparent);
}
#new-discussion-form .post-type-tabs .nav-link.active:hover {
    background: var(--wb-btn-hover-bg, var(--type-brand));
    color: var(--wb-btn-hover-text, var(--wb-btn-text, #fff)) !important;
}
@media (prefers-reduced-motion: reduce) {
    #new-discussion-form .post-type-tabs .nav-link {
        transition: none;
    }
    #new-discussion-form .post-type-tabs .nav-link:hover {
        transform: none;
    }
}

/* Toggle buttons with state (meeting "When": Start now / Pick a time,
   duration and time chips) - same brand pills as the post-type toggle. */
.community-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    clear: both; /* sits under a floated Bootstrap <legend> */
}
.community-toggle {
    --type-brand: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500, #3f7d5c))));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.05rem;
    border: 1px solid var(--type-brand);
    border-radius: var(--website-button-radius, var(--radius-full, 999px));
    background: transparent;
    color: var(--type-brand);
    font-weight: var(--website-button-weight, 600);
    text-transform: var(--website-button-transform, none);
    letter-spacing: var(--website-button-tracking, 0);
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.community-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, var(--type-brand) 8%, transparent);
    transform: translateY(-1px);
}
.community-toggle.is-active {
    background: var(--type-brand);
    color: var(--wb-btn-text, var(--website-btn-primary-text, var(--website-button-text-color, #fff)));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--type-brand) 35%, transparent);
}
.community-toggle:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-style: dashed;
}
.community-toggle:focus-visible {
    outline: 2px solid var(--type-brand);
    outline-offset: 2px;
}
.community-toggle-group--sm .community-toggle {
    padding: 0.3rem 0.85rem;
    font-size: 0.875rem;
}
.community-time-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 0.4rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: 2px;
}
.community-time-chip {
    padding: 0.35rem 0.4rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
/* Calendar selection in the brand colour (the reservation CSS uses Bootstrap primary) */
.community-meeting-when .booking-slot-picker .bsp-cal-day.bsp-available {
    background: color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 12%, transparent);
    color: var(--wb-btn-bg, var(--color-primary-600, #2f6049));
}
.community-meeting-when .booking-slot-picker .bsp-cal-day.bsp-available:hover,
.community-meeting-when .booking-slot-picker .bsp-cal-day.bsp-selected {
    background: var(--wb-btn-bg, var(--color-primary-500, #3f7d5c));
    color: var(--wb-btn-text, #fff);
}
.community-meeting-when .booking-slot-picker .bsp-cal-day:disabled {
    cursor: not-allowed;
}
.community-when-summary {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md, 0.5rem);
    background: color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 10%, transparent);
    color: var(--wb-btn-bg, var(--color-primary-700, #264d3b));
    font-weight: 600;
    transition: box-shadow 0.2s ease;
}
.community-when-summary.is-empty {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-weight: 500;
}
.community-when-summary.is-attention {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-danger) 45%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .community-toggle { transition: none; }
    .community-toggle:hover:not(:disabled) { transform: none; }
}

/* Community action buttons (channels, meetings, resources, composer,
   moderation): colours come from .btn-brand-primary /
   .btn-outline-brand-primary (the Appearance tab's Buttons card via
   --wb-btn-*), shape and type from the site-wide --website-button-* tokens,
   pill by default like the rest of the community page. */
.btn.community-action-btn {
    border-radius: var(--website-button-radius, var(--radius-full, 999px));
    font-weight: var(--website-button-weight, 600);
    text-transform: var(--website-button-transform, none);
    letter-spacing: var(--website-button-tracking, 0);
    padding: 0.4rem 1rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn.community-action-btn.btn-brand-primary {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 35%, transparent);
}
.btn.community-action-btn:hover,
.btn.community-action-btn:focus-visible {
    transform: translateY(-1px);
}
.btn.community-action-btn.btn-brand-primary:hover,
.btn.community-action-btn.btn-brand-primary:focus-visible {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 45%, transparent);
}
.btn.community-action-btn:active {
    transform: translateY(0);
}
/* Square-ish icon-only action (e.g. Remove), same height as its neighbours */
.btn.community-icon-btn {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}
.community-resource-actions {
    align-items: center;
}

/* Join meeting: a little bigger; pulses gently while the meeting is on. */
.btn.community-join-btn {
    padding: 0.45rem 1.15rem;
}
.btn.community-join-btn.is-live {
    animation: community-join-pulse 2s ease-in-out infinite;
}
@keyframes community-join-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 45%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wb-btn-bg, var(--color-primary-500, #3f7d5c)) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .btn.community-action-btn,
    .btn.community-join-btn.is-live {
        transition: none;
        animation: none;
    }
}


/* Owner tools (the host/moderator of a meeting or channel): brand-tinted
   round buttons, set apart from the solid Join and the outline Open/Details
   buttons, in the community's own button colour. */
.btn.community-owner-btn {
    --owner-brand: var(--wb-btn-bg, var(--website-btn-primary-bg, var(--website-button-bg-color, var(--color-primary-500, #3f7d5c))));
    border: 1.5px solid var(--owner-brand);
    background: color-mix(in srgb, var(--owner-brand) 14%, transparent);
    color: var(--owner-brand);
}
.btn.community-owner-btn:hover,
.btn.community-owner-btn:focus-visible {
    background: var(--owner-brand);
    border-color: var(--owner-brand);
    color: var(--wb-btn-text, #fff);
}
.btn.community-owner-btn.community-icon-btn {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 50%;
}