/* ---------------------------------------------------------------------------
   Chat room pages: /chatroom/{slug}
   (resources/views/theme/chatroom.blade.php)

   Presentation only. No markup, href, ad slot or SEO change - every rule here
   restyles what the template already outputs.

   TWO THINGS TO KNOW ABOUT THIS THEME:
     1. Bootstrap 3 sets `html { font-size: 10px }`, so a `rem` here is 10px,
        not 16px. Sizes below are px to avoid that trap.
     2. style.css line 421 forces `.h2, h2 { font-size: 24px !important }` and
        `.h3, h3 { 20px !important }` sitewide, so headings need !important to
        be restyled at all.

   Palette from css/style.css: #db5a5a accent · #4e5860 headings · #ebece7 light
--------------------------------------------------------------------------- */

.cr {
    --accent: #db5a5a;
    --accent-deep: #b83f3f;
    --accent-wash: #fdf2f2;
    --ink: #3c4249;
    --body: #5f6368;
    --line: #e6e7e3;
    --paper: #fff;
    --lift: 0 10px 28px rgba(35, 37, 40, .09);
}

/* ---- shell + title ------------------------------------------------------ */

.cr .panel-default {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--lift);
}
.cr .panel-body { padding: clamp(18px, 3vw, 34px); }

.cr h1.heading-bg {
    font-size: clamp(24px, 3.4vw, 32px) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
    margin: 0 0 8px;
}

/* ---- the room copy ($info->post_content, author-managed HTML) ----------- */

.cr .room-copy { font-size: 15px; line-height: 1.78; color: var(--body); }
.cr .room-copy p { margin: 0 0 1.05em; }
.cr .room-copy a { color: var(--accent-deep); text-decoration: underline; }
.cr .room-copy a:hover { color: var(--accent); }
.cr .room-copy strong, .cr .room-copy b { color: var(--ink); }
.cr .room-copy h2, .cr .room-copy h3, .cr .room-copy h4 {
    font-size: 18px !important;
    font-weight: 700;
    color: var(--ink);
    margin: 1.5em 0 .45em;
}

/* ---- the join buttons: the whole point of the page ---------------------- */

.cr .join {
    margin: 26px 0 6px;
    padding: 22px;
    background: linear-gradient(180deg, #fbfbfa, #f5f5f3);
    border: 1px solid var(--line);
    border-radius: 14px;
    text-align: center;
}
.cr .join__hint {
    display: block;
    font-size: 12.5px;
    color: #8b8e92;
    margin-bottom: 14px;
}
.cr .join__hint a { color: #6f7376; text-decoration: underline; }

.cr .join .btn,
.cr .text-center > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    padding: 13px 26px;
    margin: 0 6px 8px;
    font-size: 15px !important;
    font-weight: 700;
    border: 0;
    border-radius: 999px;
    text-shadow: none;
    background-image: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cr .join .btn-danger {
    background: linear-gradient(120deg, var(--accent), #e87c74);
    box-shadow: 0 8px 22px rgba(219, 90, 90, .3);
    color: #fff;
}
.cr .join .btn-danger:hover,
.cr .join .btn-danger:focus {
    background: linear-gradient(120deg, var(--accent-deep), var(--accent));
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(219, 90, 90, .38);
    color: #fff;
}
.cr .join .btn-success {
    background: #fff;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--line);
}
.cr .join .btn-success:hover,
.cr .join .btn-success:focus {
    box-shadow: inset 0 0 0 2px var(--accent);
    color: var(--accent-deep);
    transform: translateY(-2px);
}

/* ---- sidebar ------------------------------------------------------------ */

.cr .cr-aside { text-align: left !important; }
.cr .cr-aside article {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow .16s ease, transform .16s ease;
}
.cr .cr-aside article:hover { box-shadow: var(--lift); transform: translateY(-2px); }
.cr .cr-aside .herald-post-thumbnail {
    /* Source images are 300x225 and were rendering at full height. A fixed box
       with object-fit also stops a broken image collapsing the card. */
    height: 148px;
    background: #f2f2f0;
    overflow: hidden;
}
.cr .cr-aside .herald-post-thumbnail img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cr .cr-aside .entry-header { padding: 12px 14px 14px; }
.cr .cr-aside .entry-title {
    font-size: 15px !important;
    line-height: 1.35;
    font-weight: 700;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cr .cr-aside .entry-title a { color: var(--ink); }
.cr .cr-aside .entry-title a:hover { color: var(--accent-deep); }

/* ---- footer article strip ---------------------------------------------- */

.cr .cr-more { margin-top: 8px !important; }
.cr .cr-more .title-blog {
    font-size: 15px !important;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    min-height: 74px;
    display: flex;
    align-items: center;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.cr .cr-more .title-blog:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(35, 37, 40, .08);
}
.cr .cr-more .title-blog a { color: var(--ink); }
.cr .cr-more .title-blog:hover a { color: var(--accent-deep); }
.cr .cr-more > div { margin-bottom: 14px; }

/* ---- misc -------------------------------------------------------------- */

.cr .demand-supply:empty { display: none; }

.cr a:focus:not(:focus-visible) { outline: none; }
.cr a:focus-visible {
    outline: 3px solid rgba(219, 90, 90, .45);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cr * { transition: none !important; }
    .cr .join .btn:hover,
    .cr .cr-aside article:hover { transform: none; }
}