/* ==========================================
   THEPETGRID — COMMUNITY FEED
========================================== */

[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.header-container {
    width: min(1180px, calc(100% - 40px));
    min-height: 76px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #172033;
    font-size: 22px;
    font-weight: 800;
    white-space: nowrap;
}

.logo-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffb020, #ff7a00);
    box-shadow: 0 8px 20px rgba(255, 138, 0, 0.25);
}

.main-nav,
.header-actions {
    display: flex;
    align-items: center;
}

.main-nav { gap: 25px; }
.header-actions { gap: 12px; white-space: nowrap; }

.main-nav a {
    position: relative;
    color: #526078;
    font-size: 15px;
    font-weight: 600;
}

.main-nav a:hover,
.main-nav a.active { color: #f57c00; }

.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb020, #ff7a00);
}

.add-pet-btn,
.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

.add-pet-btn {
    color: #fff;
    background: linear-gradient(135deg, #ffb020, #ff7a00);
    box-shadow: 0 10px 24px rgba(255, 132, 0, 0.25);
}

.login-btn {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
}

.community-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

.community-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 38px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 176, 32, 0.26), transparent 35%),
        rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(20, 20, 20, 0.09));
    backdrop-filter: blur(18px);
}

.community-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 14px;
    padding:8px 16px;
    background:rgba(8,15,34,.45);
    border:1px solid rgba(255,176,32,.28);
    border-radius:999px;
    color:#ffb020;
    font-size:12px;
    font-weight:900;
    letter-spacing:.22em;
    text-transform:uppercase;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.community-hero h1 {
    max-width: 730px;
    margin: 0;
    color: #172033;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.community-hero p:not(.community-eyebrow) {
    max-width: 670px;
    margin: 16px 0 0;
    color: #64748b;
    font-size: 18px;
    line-height: 1.6;
}

.community-hero-badge {
    flex: 0 0 auto;
    min-width: 170px;
    padding: 24px;
    text-align: center;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.community-hero-badge strong {
    display: block;
    color: #f57c00;
    font-size: 34px;
}

.community-hero-badge span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}

.community-main { min-width: 0; }

.create-post-card,
.sidebar-card,
.community-post,
.empty-feed {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
}

.create-post-card {
    padding: 24px;
    border-radius: 24px;
}

.create-post-heading,
.post-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.community-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

/* Post avatars need their own fixed frame. Without it, width/height 100%
   can expand against the full post column. */
.post-author > a {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: #fff5e6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(247, 148, 0, .18);
}

.post-author > a .community-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}

.community-avatar-frame {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: #fff5e6;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(247, 148, 0, 0.22), 0 8px 20px rgba(15, 23, 42, 0.1);
}

.community-avatar-frame .community-avatar {
    transform: scale(1.18);
}

.create-post-heading h2,
.feed-header h2,
.sidebar-card h2 {
    margin: 0;
    color: #172033;
}

.create-post-heading p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

#postText {
    width: 100%;
    min-height: 132px;
    margin-top: 20px;
    padding: 18px;
    resize: vertical;
    color: #172033;
    background: #fffaf3;
    border: 1px solid #eadfce;
    border-radius: 18px;
    outline: none;
    line-height: 1.6;
}

#postText:focus {
    border-color: #ffad1f;
    box-shadow: 0 0 0 4px rgba(255, 173, 31, 0.15);
}

.image-preview-box {
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    border-radius: 18px;
    background: #f8fafc;
}

.image-preview-box img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}

.remove-image-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 23, 42, 0.78);
    font-size: 24px;
    cursor: pointer;
}

.composer-footer,
.composer-tools,
.composer-submit,
.feed-header,
.post-header,
.post-actions {
    display: flex;
    align-items: center;
}

.composer-footer,
.feed-header,
.post-header { justify-content: space-between; }

.composer-footer {
    gap: 18px;
    margin-top: 18px;
}

.composer-tools,
.composer-submit { gap: 10px; }

.composer-tool,
#taggedPet,
.clear-posts-button {
    min-height: 40px;
    padding: 0 13px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
}

.composer-tool {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#taggedPet { max-width: 170px; }

.composer-submit span {
    color: #94a3b8;
    font-size: 12px;
}

.publish-button {
    min-height: 44px;
    padding: 0 22px;
    color: #fff;
    background: linear-gradient(135deg, #ffb020, #ff7a00);
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(255, 122, 0, 0.24);
}

.publish-button:disabled { opacity: 0.55; cursor: not-allowed; }

.composer-message {
    min-height: 20px;
    margin: 12px 0 0;
    color: #b45309;
    font-size: 13px;
    font-weight: 700;
}

.feed-header {
    gap: 20px;
    margin: 30px 0 16px;
}

.clear-posts-button { cursor: pointer; }

.community-feed { display: grid; gap: 18px; }

.community-post {
    overflow: hidden;
    border-radius: 24px;
}

.post-header { gap: 16px; padding: 20px 22px 14px; }

.post-author-info { min-width: 0; }

.post-author-name {
    display: block;
    color: #172033;
    font-weight: 800;
}

.post-meta {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 12px;
}

.post-delete-button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
}

.post-content {
    padding: 0 22px 18px;
}

.post-text {
    margin: 0;
    color: #334155;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.post-tag {
    display: inline-flex;
    margin-top: 14px;
    padding: 7px 11px;
    color: #9a4a00;
    background: #fff5e6;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.post-image {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    background: #f1f5f9;
}

.post-stats {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    color: #64748b;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    font-size: 13px;
}

.post-actions { padding: 9px 12px 12px; gap: 8px; }

.post-action {
    flex: 1;
    min-height: 42px;
    border-radius: 11px;
    color: #526078;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

.post-action:hover { background: #fff7ed; color: #e56d00; }
.post-action.is-liked { color: #e11d48; background: #fff1f2; }

.empty-feed {
    padding: 52px 24px;
    text-align: center;
    border-radius: 24px;
}

.empty-feed > div { font-size: 44px; }
.empty-feed h3 { margin: 12px 0 6px; color: #172033; }
.empty-feed p { margin: 0; color: #64748b; }

.community-sidebar {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 18px;
}

.sidebar-card {
    padding: 23px;
    border-radius: 22px;
}

.sidebar-card ul {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding-left: 20px;
    color: #64748b;
    line-height: 1.5;
}

.sidebar-highlight {
    background: linear-gradient(145deg, #fff7e8, #ffffff);
}

.sidebar-icon { font-size: 34px; }
.sidebar-highlight p { color: #64748b; line-height: 1.6; }
.sidebar-highlight a { color: #d86900; font-weight: 800; }

@media (max-width: 980px) {
    .header-container { flex-wrap: wrap; padding: 14px 0; }
    .main-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 5px; }
    .community-layout { grid-template-columns: 1fr; }
    .community-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .community-page,
    .header-container { width: min(100% - 24px, 1180px); }
    .community-page { padding-top: 24px; }
    .community-hero { align-items: flex-start; flex-direction: column; padding: 26px 22px; }
    .community-hero-badge { width: 100%; }
    .composer-footer,
    .feed-header { align-items: stretch; flex-direction: column; }
    .composer-tools { flex-wrap: wrap; }
    .composer-submit { justify-content: space-between; }
    .community-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .logo { font-size: 19px; }
    .add-pet-btn { display: none; }
    .create-post-card { padding: 18px; }
    .post-header,
    .post-content { padding-left: 17px; padding-right: 17px; }
    .post-action { font-size: 13px; }
}

/* ==========================================
   COMMUNITY COMMENTS SYSTEM
========================================== */

.comments-count-button {
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.comments-count-button:hover {
    color: #e56d00;
}

.post-action.is-comment-active {
    color: #d86900;
    background: #fff7ed;
}

.comments-section {
    padding: 20px 22px 22px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 250, 243, 0.65),
            #ffffff
        );
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.comments-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.comments-section-header h3 {
    margin: 3px 0 0;
    color: #172033;
    font-size: 19px;
}

.comments-eyebrow {
    display: block;
    color: #c65f00;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.close-comments-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 11px;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.close-comments-button:hover {
    color: #c2410c;
    background: #fff7ed;
    transform: rotate(4deg);
}

.comments-list {
    display: grid;
    gap: 15px;
}

.community-comment {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.comment-avatar-link {
    flex: 0 0 auto;
}

.comment-avatar,
.comment-composer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    object-fit: cover;
    background: #fff5e6;
    border: 1px solid rgba(247, 148, 0, 0.16);
}

.comment-main {
    flex: 1;
    min-width: 0;
}

.comment-bubble {
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 6px 17px 17px 17px;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}

.comment-author-name {
    min-width: 0;
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comment-author-name:hover {
    color: #e56d00;
}

.comment-bubble p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.comment-time {
    display: block;
    margin: 6px 0 0 4px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
}

.delete-comment-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #94a3b8;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.65;
    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.community-comment:hover .delete-comment-button {
    opacity: 1;
}

.delete-comment-button:hover {
    color: #be123c;
    background: #fff1f2;
}

.no-comments-message {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.82);
    border: 1px dashed rgba(15, 23, 42, 0.12);
    border-radius: 16px;
}

.no-comments-message > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 13px;
    font-size: 20px;
}

.no-comments-message strong {
    display: block;
    color: #334155;
    font-size: 13px;
}

.no-comments-message p {
    margin: 3px 0 0;
    font-size: 12px;
}

.comment-form {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 19px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.comment-input-wrapper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #eadfce;
    border-radius: 17px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.comment-input-wrapper:focus-within {
    border-color: #ffad1f;
    box-shadow:
        0 0 0 4px rgba(255, 173, 31, 0.13);
}

.comment-input {
    display: block;
    width: 100%;
    min-height: 49px;
    max-height: 150px;
    padding: 14px 15px 7px;
    resize: none;
    overflow-y: auto;
    color: #172033;
    background: transparent;
    border: 0;
    outline: none;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.comment-input::placeholder {
    color: #94a3b8;
}

.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 7px 7px 14px;
}

.comment-character-count {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
}

.send-comment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 36px;
    padding: 0 15px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffb020,
            #ff7a00
        );
    border: 0;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 7px 17px rgba(255, 122, 0, 0.21);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.send-comment-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 10px 22px rgba(255, 122, 0, 0.27);
}

.send-comment-button:active {
    transform: translateY(0);
}

@media (max-width: 720px) {
    .comments-section {
        padding:
            18px 17px 20px;
    }

    .comment-form {
        gap: 9px;
    }

    .comment-avatar,
    .comment-composer-avatar {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }
}

@media (max-width: 520px) {
    .comments-section-header {
        margin-bottom: 15px;
    }

    .comment-bubble {
        padding: 11px 12px;
    }

    .comment-form {
        align-items: flex-start;
    }

    .comment-composer-avatar {
        width: 34px;
        height: 34px;
    }

    .comment-input {
        min-height: 46px;
        padding:
            12px 12px 6px;
        font-size: 13px;
    }

    .comment-form-footer {
        padding:
            3px 6px 6px 12px;
    }

    .send-comment-button {
        min-width: 65px;
        padding: 0 12px;
    }
}


/* ==================================================
   THEPETGRID — COMMUNITY CATEGORY CHIPS
================================================== */

.community-categories{
  margin:18px 0 26px;
}

.community-categories__track{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.community-category{
  appearance:none;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#263248;
  font:inherit;
  font-size:.88rem;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(15,23,42,.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.community-category:hover{
  transform:translateY(-2px);
  border-color:rgba(245,158,11,.42);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}

.community-category:focus-visible{
  outline:3px solid rgba(245,158,11,.22);
  outline-offset:2px;
}

.community-category.is-active{
  border-color:transparent;
  background:linear-gradient(135deg,#ffbe3d,#ff8b11);
  color:#fff;
  box-shadow:0 11px 28px rgba(245,158,11,.28);
}

/* Composer category control */
.composer-tool--category{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:#f8fafc;
  color:#40506b;
  font-weight:800;
}

#postCategory{
  min-height:42px;
  min-width:190px;
  padding:0 38px 0 13px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:12px;
  background:#fff;
  color:#253046;
  font:inherit;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}

#postCategory:focus{
  outline:none;
  border-color:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.12);
}

/* Make composer tools feel like one design system */
.composer-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.composer-tool{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 13px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:#f8fafc;
  color:#40506b;
  font-weight:800;
}

#taggedPet{
  min-height:42px;
  padding:0 36px 0 13px;
  border:1px solid rgba(148,163,184,.26);
  border-radius:12px;
  background:#fff;
  color:#40506b;
  font:inherit;
  font-size:.88rem;
  font-weight:700;
}

/* Dark Atlas-shell context: keep the filter row clean */
.atlas-shell .community-categories{
  position:relative;
  z-index:2;
}

@media(max-width:760px){
  .community-categories{
    margin:14px 0 22px;
    overflow:hidden;
  }

  .community-categories__track{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .community-categories__track::-webkit-scrollbar{
    display:none;
  }

  .community-category{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  #postCategory{
    min-width:170px;
  }
}


/* ==================================================
   THEPETGRID — LIVE COMMUNITY SIDEBAR
================================================== */

.community-sidebar-list{
  display:grid;
  gap:8px;
  margin-top:15px
}

.community-sidebar-empty{
  margin:0;
  padding:12px 0;
  color:#7b879d;
  font-size:.82rem;
  line-height:1.5
}

.community-live-item{
  width:100%;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(15,23,42,.07);
  border-radius:14px;
  background:#fff;
  color:#253046;
  text-decoration:none;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease
}

.community-live-item:hover{
  transform:translateY(-1px);
  border-color:rgba(245,158,11,.28);
  box-shadow:0 8px 20px rgba(15,23,42,.08)
}

.community-live-item__icon,
.community-helper-rank{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff7ed;
  font-size:1rem
}

.community-live-item--lost .community-live-item__icon{
  background:#fff1f2
}

.community-live-item__body{
  min-width:0
}

.community-live-item__body strong,
.community-live-item__body small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.community-live-item__body strong{
  color:#243047;
  font-size:.82rem;
  font-weight:850
}

.community-live-item__body small{
  margin-top:3px;
  color:#8390a7;
  font-size:.7rem;
  font-weight:600
}

.community-live-item__arrow{
  color:#f59e0b;
  font-size:.8rem;
  font-weight:900
}

.community-sidebar-link{
  display:inline-flex;
  margin-top:14px;
  color:#d86900;
  font-size:.78rem;
  font-weight:850;
  text-decoration:none
}

.community-sidebar-link:hover{
  text-decoration:underline
}

/* Category badge on posts */
.post-category{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  margin-right:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  color:#536176;
  font-size:.72rem;
  font-weight:800
}

.post-category--lost-found{
  background:#fff1f2;
  color:#be123c;
  border-color:#fecdd3
}

.post-category--adoption,
.post-category--success{
  background:#ecfdf5;
  color:#047857;
  border-color:#bbf7d0
}

.post-category--questions{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe
}

.post-category--health{
  background:#f5f3ff;
  color:#6d28d9;
  border-color:#ddd6fe
}

@media(max-width:980px){
  .community-sidebar-list{
    margin-top:12px
  }
}



/* ==================================================
   DEFINITIVE COMMUNITY CATEGORY STRIP FIX
   Keep all categories on one line and never fall back
   to browser default button styling.
================================================== */

.community-categories{
    display:block !important;
    width:100% !important;
    margin:18px 0 28px !important;
    overflow:hidden !important;
}

.community-categories__track{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:4px 2px 10px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
}

.community-categories__track::-webkit-scrollbar{
    display:none !important;
}

.community-categories button.community-category{
    appearance:none !important;
    -webkit-appearance:none !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-height:42px !important;
    padding:0 16px !important;
    margin:0 !important;
    border:1px solid rgba(148,163,184,.28) !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#263248 !important;
    box-shadow:0 5px 18px rgba(15,23,42,.08) !important;
    font:inherit !important;
    font-size:.88rem !important;
    font-weight:750 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
}

.community-categories button.community-category:hover{
    transform:translateY(-1px) !important;
    border-color:rgba(245,158,11,.45) !important;
    box-shadow:0 9px 22px rgba(15,23,42,.11) !important;
}

.community-categories button.community-category.is-active{
    border-color:transparent !important;
    background:linear-gradient(135deg,#ffbe3d,#ff8b11) !important;
    color:#ffffff !important;
    box-shadow:0 11px 28px rgba(245,158,11,.28) !important;
}

@media(max-width:760px){
    .community-categories button.community-category{
        min-height:40px !important;
        padding:0 14px !important;
        font-size:.84rem !important;
    }
}


/* ==================================================
   FINAL COMMUNITY CATEGORY LAYOUT
   Desktop: clean wrapped rows inside the left column.
   Mobile: horizontal scrolling.
================================================== */

.community-main{
    min-width:0 !important;
    overflow:visible !important;
}

.community-categories{
    width:100% !important;
    max-width:100% !important;
    margin:18px 0 28px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}

.community-categories__track{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:2px 0 !important;
    box-sizing:border-box !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
}

.community-categories button.community-category{
    appearance:none !important;
    -webkit-appearance:none !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:0 15px !important;
    margin:0 !important;
    border:1px solid rgba(148,163,184,.28) !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#263248 !important;
    font:inherit !important;
    font-size:.86rem !important;
    font-weight:750 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 18px rgba(15,23,42,.07) !important;
}

.community-categories button.community-category.is-active{
    border-color:transparent !important;
    background:linear-gradient(135deg,#ffbe3d,#ff8b11) !important;
    color:#fff !important;
    box-shadow:0 10px 24px rgba(245,158,11,.25) !important;
}

/* Tablet/mobile: one swipeable line */
@media(max-width:760px){
    .community-categories{
        overflow:hidden !important;
    }

    .community-categories__track{
        flex-wrap:nowrap !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:2px 2px 9px !important;
        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .community-categories__track::-webkit-scrollbar{
        display:none !important;
    }

    .community-categories button.community-category{
        min-height:40px !important;
        padding:0 14px !important;
        font-size:.83rem !important;
    }
}


/* ==================================================
   COMMUNITY PHASE 1 — LIVE SIDEBAR
================================================== */

.community-sidebar-list{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.community-sidebar-empty{
    margin:0;
    padding:10px 0;
    color:#7b879d;
    font-size:.82rem;
    line-height:1.5;
}

.community-live-item{
    width:100%;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px;
    border:1px solid rgba(15,23,42,.07);
    border-radius:14px;
    background:#fff;
    color:#253046;
    text-align:left;
    text-decoration:none;
    font:inherit;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.community-live-item:hover{
    transform:translateY(-1px);
    border-color:rgba(245,158,11,.28);
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.community-live-item__icon,
.community-helper-rank{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff7ed;
    font-size:1rem;
}

.community-live-item--lost .community-live-item__icon{
    background:#fff1f2;
}

.community-live-item--home .community-live-item__icon{
    background:#ecfdf5;
}

.community-live-item__body{
    min-width:0;
}

.community-live-item__body strong,
.community-live-item__body small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.community-live-item__body strong{
    color:#243047;
    font-size:.82rem;
    font-weight:850;
}

.community-live-item__body small{
    margin-top:3px;
    color:#8390a7;
    font-size:.7rem;
    font-weight:600;
}

.community-live-item__arrow{
    color:#f59e0b;
    font-size:.8rem;
    font-weight:900;
}

.community-sidebar-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-top:13px;
}

.community-sidebar-small-button{
    min-height:34px;
    padding:0 11px;
    border:1px solid #fed7aa;
    border-radius:10px;
    background:#fff7ed;
    color:#c2410c;
    font:inherit;
    font-size:.72rem;
    font-weight:800;
    cursor:pointer;
}

.community-sidebar-small-button:disabled{
    cursor:wait;
    opacity:.65;
}

.community-sidebar-link{
    color:#d86900;
    font-size:.76rem;
    font-weight:850;
    text-decoration:none;
}

.community-sidebar-link:hover{
    text-decoration:underline;
}

/* Post category badge */
.post-category{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    margin-right:8px;
    padding:6px 10px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:999px;
    background:#f8fafc;
    color:#536176;
    font-size:.72rem;
    font-weight:800;
}

.post-category--lost-found{
    border-color:#fecdd3;
    background:#fff1f2;
    color:#be123c;
}

.post-category--adoption,
.post-category--success{
    border-color:#bbf7d0;
    background:#ecfdf5;
    color:#047857;
}

.post-category--health{
    border-color:#ddd6fe;
    background:#f5f3ff;
    color:#6d28d9;
}

.post-category--questions{
    border-color:#bfdbfe;
    background:#eff6ff;
    color:#1d4ed8;
}


/* ==================================================
   COMMUNITY 11.1 — NOTIFICATIONS / REPUTATION / REACTIONS
================================================== */

.community-notification-button{
    position:relative;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(15,23,42,.10);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
}

.community-notification-button b{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    display:grid;
    place-items:center;
    padding:0 5px;
    border:2px solid #fff;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:.62rem;
}

.community-notifications-panel{
    position:fixed;
    top:84px;
    right:18px;
    z-index:9800;
    width:min(390px,calc(100vw - 36px));
    max-height:calc(100vh - 105px);
    overflow:auto;
    border:1px solid rgba(15,23,42,.10);
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 90px rgba(15,23,42,.24);
}

.community-notifications-panel[hidden]{
    display:none!important;
}

.community-notifications-panel__header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:16px;
    border-bottom:1px solid rgba(15,23,42,.07);
    background:rgba(255,255,255,.97);
}

.community-notifications-panel__header h2{
    margin:0;
    color:#172033;
    font-size:1.1rem;
}

.community-notifications-panel__header button{
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:#f8fafc;
    cursor:pointer;
}

.community-notifications-panel__list{
    display:grid;
    gap:4px;
    padding:8px;
}

.community-notification-item{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
    padding:11px;
    border-radius:13px;
    color:#263248;
    text-decoration:none;
}

.community-notification-item.is-unread{
    background:#fff7ed;
}

.community-notification-item__icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#f8fafc;
}

.community-notification-item__body strong,
.community-notification-item__body small,
.community-notification-item__body time{
    display:block;
}

.community-notification-item__body small{
    margin-top:2px;
    color:#64748b;
    font-size:.75rem;
}

.community-notification-item__body time{
    margin-top:4px;
    color:#94a3b8;
    font-size:.66rem;
}

.community-notifications-panel__read{
    width:calc(100% - 16px);
    margin:0 8px 8px;
    min-height:40px;
    border:1px solid #fed7aa;
    border-radius:12px;
    background:#fff7ed;
    color:#c2410c;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.post-header__actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.post-pinned-badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 9px;
    border-radius:999px;
    background:#fff7ed;
    color:#c2410c;
    font-size:.68rem;
    font-weight:850;
}

.post-pin-button{
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:#f8fafc;
    cursor:pointer;
}

.post-reputation{
    display:flex;
    gap:6px;
    margin-top:5px;
}

.post-reputation span{
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:#f8fafc;
    color:#6b7280;
    font-size:.64rem;
    font-weight:750;
}

.post-reactions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:0 14px 12px;
}

.post-reaction{
    min-width:38px;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:0 8px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:999px;
    background:#fff;
    cursor:pointer;
}

.post-reaction:hover,
.post-reaction.is-active{
    border-color:#fdba74;
    background:#fff7ed;
}

.post-reaction b{
    color:#7c5b35;
    font-size:.68rem;
}

.community-profile-popover{
    position:absolute;
    z-index:9900;
    width:285px;
    padding:16px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.22);
}

.community-profile-popover[hidden]{
    display:none!important;
}

.community-profile-popover__top{
    display:flex;
    align-items:center;
    gap:11px;
}

.community-profile-popover__top img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}

.community-profile-popover__top strong,
.community-profile-popover__top small{
    display:block;
}

.community-profile-popover__top small{
    margin-top:2px;
    color:#94a3b8;
    font-size:.72rem;
}

.community-profile-popover__badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:13px;
}

.community-profile-popover__badges span{
    padding:5px 8px;
    border-radius:999px;
    background:#fff7ed;
    color:#b45309;
    font-size:.67rem;
    font-weight:800;
}

.community-profile-popover__stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:13px;
}

.community-profile-popover__stats span{
    padding:9px 6px;
    border-radius:11px;
    background:#f8fafc;
    color:#64748b;
    text-align:center;
    font-size:.65rem;
}

.community-profile-popover__stats b{
    display:block;
    color:#172033;
    font-size:.9rem;
}

.community-profile-popover>a{
    display:block;
    margin-top:12px;
    color:#d86900;
    font-size:.75rem;
    font-weight:850;
    text-decoration:none;
}

@media(max-width:720px){
    .community-profile-popover{
        display:none!important;
    }

    .community-notifications-panel{
        top:70px;
        right:9px;
        width:calc(100vw - 18px);
    }
}

/* ==========================================
   COMMUNITY MOBILE HEADER FIX
========================================== */

@media (max-width: 900px) {

    .main-header .main-nav {
        display: none !important;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 8px 0;
    }

    .main-header .main-nav.is-open {
        display: flex !important;
    }

    .main-header .main-nav a {
        width: 100%;
    }

}

@media (min-width: 901px) {

    .main-header .main-nav {
        display: flex !important;
    }

}
/* ==================================================
   COMMUNITY — SIX CORE CATEGORIES
   Added 2026-08-13. Keeps the feed simple as it grows.
================================================== */
.post-category--health-care{
    background:#f5f3ff;
    color:#6d28d9;
    border-color:#ddd6fe;
}
.post-category--training-advice{
    background:#eff6ff;
    color:#1d4ed8;
    border-color:#bfdbfe;
}
.post-category--adoption-rescue{
    background:#ecfdf5;
    color:#047857;
    border-color:#bbf7d0;
}
.post-category--memorials{
    background:#faf5ff;
    color:#7e22ce;
    border-color:#e9d5ff;
}