/* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   POST HEADER
   ========================================================= */

.post-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
    min-width: 0;
}

.profile-photo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
}


/* =========================================================
   POST TEXT
   ========================================================= */

.post-text {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 15px;

    font-size: 1.2em;
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   POST MEDIA
   ========================================================= */

.post-media {
    width: 100%;
    margin-top: 15px;
    overflow: hidden;
}

.post-media img,
.post-media video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.post-media video {
    background: #000;
    border-radius: 8px;
}


/* =========================================================
   POST METRICS
   ========================================================= */

.post-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 10px;

    font-size: 0.9em;
}


/* =========================================================
   LINK PREVIEW
   ========================================================= */

.link-preview {
    width: 100%;
    max-width: 100%;

    margin-top: 20px;
    padding: 0;

    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 8px;

    overflow: hidden;
}

.link-preview > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.link-info {
    margin-top: 5px;

    font-size: 0.9em;

    overflow-wrap: anywhere;
}


/* =========================================================
   OPEN GRAPH PREVIEW
   ========================================================= */

.og-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: 100%;
    max-width: 100%;

    padding: 10px;

    border-radius: 8px;

    overflow: hidden;
}

.og-image {
    display: block;

    width: 120px;
    height: 120px;

    flex: 0 0 120px;

    object-fit: cover;
    border-radius: 8px;
}

.og-details {
    flex: 1 1 auto;
    min-width: 0;
}

.og-title {
    font-size: 1.1rem;
    font-weight: bold;

    color: inherit;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.og-title:hover {
    text-decoration: underline;
}

.og-description {
    margin: 6px 0 0;

    font-size: 0.9rem;
    line-height: 1.5;

    color: inherit;

    opacity: 0.8;

    overflow-wrap: anywhere;
}

.og-site-name {
    margin-top: 7px;

    font-size: 0.8rem;

    opacity: 0.7;
}


/* =========================================================
   COMMENTS
   ========================================================= */

.comment {
    width: 100%;
    max-width: 100%;

    margin-top: 15px;
    margin-bottom: 20px;

    padding: 12px;

    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;

    overflow: hidden;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.comment-photo,
.comment-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 50%;
    object-fit: cover;
}

.comment-user-info {
    min-width: 0;
}

.comment-name {
    font-weight: bold;
}

.comment-username {
    margin-left: 5px;

    opacity: 0.7;

    font-style: italic;
}

.comment-time {
    display: block;

    margin-top: 5px;

    opacity: 0.6;

    font-size: 0.8em;
}

.comment-text {
    margin: 10px 0 0;

    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   COMMENT INPUT
   ========================================================= */

.comment-section {
    width: 100%;
    max-width: 760px;

    margin: 25px auto;
    padding: 15px;

    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 10px;
}

.comment-section h2 {
    margin: 0 0 15px;

    font-size: 1.25rem;
}

.comment-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.comment-field label {
    font-weight: 600;
}

.comment-input {
    display: block;

    width: 100%;
    max-width: 100%;
    min-height: 120px;

    padding: 12px 14px;

    margin: 0;

    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 8px;

    /*
     * IMPORTANT:
     * Do not force background/color here.
     * This allows your existing dark/light mode
     * to control the textarea.
     */
    background: inherit;
    color: inherit;

    font: inherit;
    font-size: 16px;
    line-height: 1.5;

    resize: vertical;

    overflow-x: hidden;
}

.comment-input::placeholder {
    color: inherit;
    opacity: 0.55;
}

.comment-input:focus {
    outline: 3px solid rgba(0, 186, 232, 0.18);
    border-color: #00bae8;
}


/* =========================================================
   COMMENT BUTTON
   ========================================================= */

#submitComment,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 8px 16px;

    margin-top: 10px;

    background-color: #00bae8;
    color: #fff;

    font: inherit;
    font-size: 0.9em;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
}

#submitComment:hover,
.button:hover {
    background-color: #008cba;
}

#submitComment:disabled,
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#submitComment:focus-visible,
.button:focus-visible {
    outline: 3px solid rgba(0, 186, 232, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   COMMENT STATUS
   ========================================================= */

.comment-status {
    min-height: 1.4em;

    margin-top: 8px;
    margin-bottom: 0;

    font-size: 0.9em;
}


/* =========================================================
   COMMENTS / RECENT POSTS CONTAINERS
   ========================================================= */

#commentsSection,
#recentPosts {
    width: 100%;
    max-width: 760px;

    margin: 25px auto;
}

#commentsSection h2,
#recentPosts h2 {
    margin: 0 0 15px;
}


/* =========================================================
   NESTED REPLIES
   ========================================================= */

.replies,
.comment-replies {
    margin-left: 20px;
    margin-top: 12px;

    padding-left: 15px;

    border-left: 2px solid rgba(128, 128, 128, 0.3);

    max-width: calc(100% - 20px);

    overflow: hidden;
}

.comment-replies {
    margin-left: 30px;
    padding-left: 10px;
}

.reply,
.comment-reply {
    width: 100%;
    max-width: 100%;

    margin-bottom: 10px;
    padding: 10px;

    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 6px;

    overflow: hidden;
}

.reply-photo {
    width: 25px;
    height: 25px;

    margin-right: 8px;

    border-radius: 50%;
    object-fit: cover;
}

.comment-avatar-small {
    width: 30px;
    height: 30px;

    margin-right: 5px;

    border-radius: 50%;
    object-fit: cover;
}

.reply-name {
    font-weight: bold;
}

.reply-username {
    margin-left: 5px;

    opacity: 0.7;

    font-style: italic;
}

.reply-text {
    margin-top: 5px;

    font-size: 0.95em;
    line-height: 1.5;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.reply-time {
    display: block;

    margin-top: 5px;

    opacity: 0.6;

    font-size: 0.75em;
}

.no-replies {
    font-style: italic;
    font-size: 0.9em;
    opacity: 0.7;
}


/* =========================================================
   REPLY BUTTON
   ========================================================= */

.reply-button,
.submit-reply {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 7px 13px;

    margin-top: 10px;

    background-color: #00bae8;
    color: #fff;

    font: inherit;
    font-size: 0.9em;
    font-weight: 600;

    border: none;
    border-radius: 6px;

    cursor: pointer;
}

.reply-button:hover,
.submit-reply:hover {
    background-color: #008cba;
}


/* =========================================================
   REPLY INPUT
   ========================================================= */

.reply-input-container {
    margin-top: 10px;
}

.reply-input-container[hidden] {
    display: none;
}

.reply-input-container label {
    display: block;

    margin-bottom: 6px;

    font-weight: 600;
}

.reply-input {
    display: block;

    width: 100%;
    max-width: 100%;
    min-height: 90px;

    padding: 10px 12px;

    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 7px;

    background: inherit;
    color: inherit;

    font: inherit;
    font-size: 16px;
    line-height: 1.5;

    resize: vertical;
}

.reply-input::placeholder {
    color: inherit;
    opacity: 0.55;
}

.reply-input:focus {
    outline: 3px solid rgba(0, 186, 232, 0.18);
    border-color: #00bae8;
}

.reply-status {
    min-height: 1.3em;

    margin-top: 5px;

    font-size: 0.85em;
}


/* =========================================================
   HASHTAGS
   ========================================================= */

.hashtag {
    color: #007bff;
    text-decoration: none;

    overflow-wrap: anywhere;
}

.hashtag:hover {
    text-decoration: underline;
}


/* =========================================================
   GENERAL USER CONTENT WRAPPING
   ========================================================= */

/*
 * Do NOT use:
 *
 * a, span, p, div {
 *     overflow-wrap: break-word;
 * }
 *
 * That rule is too broad and can affect your entire website.
 */

.post-text,
.comment-text,
.reply-text,
.link-info,
.og-title,
.og-description,
.hashtag {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .post-header {
        gap: 6px;
    }

    .post-text {
        padding: 10px 5px;

        font-size: 1rem;
        line-height: 1.55;
    }

    .post-metrics {
        gap: 8px;
        font-size: 0.82em;
    }


    /* OG preview becomes vertical */
    .og-preview {
        flex-direction: column;
    }

    .og-image {
        width: 100%;
        height: 180px;

        flex: none;
    }


    /* Comment box */
    .comment-section {
        width: 100%;

        margin: 20px auto;
        padding: 12px;

        border-radius: 9px;
    }

    .comment-input {
        min-height: 130px;

        font-size: 16px;
    }


    /* Full-width post button on mobile */
    #submitComment {
        width: 100%;
    }


    #commentsSection,
    #recentPosts {
        width: 100%;

        margin: 20px auto;

        padding-left: 10px;
        padding-right: 10px;
    }


    .comment {
        padding: 10px;
    }


    .comment-text {
        margin-top: 10px;
    }


    /* Reduce nested indentation */
    .replies,
    .comment-replies {
        margin-left: 8px;
        padding-left: 10px;
    }


    .reply {
        padding: 8px;
    }


    .submit-reply {
        width: 100%;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    .profile-photo {
        width: 36px;
        height: 36px;
    }

    .comment-photo,
    .comment-avatar {
        width: 36px;
        height: 36px;
    }

    .comment-username,
    .username {
        font-size: 0.8em;
    }

    .og-image {
        height: 150px;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}