/* ============================================================
   RATETY — MAIN STYLESHEET
   All styles for index.html and post.html live here.
   No inline or embedded styles — everything is in this file.

   TABLE OF CONTENTS
   1.  Reset & base
   2.  Typography
   3.  TOP navbar
   4.  LEFT / RIGHT sidebars
   5.  MIDDLE content area (homepage)
   6.  Post cards (homepage)
   7.  Star rating display
   8.  Top Comment badge + preview box
   9.  Post page layout
   10. Post page metadata block (source / outlet / link)
   11. Comments section
   12. Modal overlay (dark backdrop)
   13. Modal cards (Log In + Sign Up dialogs)
   14. Buttons
   15. Hover & focus states
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   Removes browser default spacing and box-sizing quirks so
   every element behaves predictably.
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;    /* padding + border included in element width */
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background-color: #ffffff;
    /* Body itself does not scroll — only the MIDDLE column scrolls */
    overflow: hidden;
}


/* ============================================================
   2. TYPOGRAPHY
   Base text sizes used across both pages.
   ============================================================ */

h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

h3 {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

p {
    line-height: 1.55;
    color: #444;
}

/* All links: inherit parent color, no underline by default */
a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   3. TOP NAVBAR
   Fixed bar pinned to the very top on every page.
   Three zones: logo (left), search (center), auth buttons (right).
   ============================================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 100;             /* sits above all scrollable content */
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
}

/* ----- Logo (left zone) ----- */
.navbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;           /* never squishes */
    text-decoration: none;
}

.navbar-logo img {
    height: 42px;             /* scale logo image to fit the bar */
    width: auto;
}

/* ----- Search bar (center zone) ----- */
.navbar-search {
    flex: 1;                  /* grows to fill available horizontal space */
    display: flex;
    justify-content: center;
}

.navbar-search input {
    width: 220px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 20px;      /* pill shape */
    padding: 0 14px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background-color: #f5f5f5;
    outline: none;
}

/* ----- Auth buttons (right zone) ----- */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}


/* ============================================================
   4. LEFT / RIGHT SIDEBARS
   Fixed columns that stay in place while MIDDLE scrolls.
   Currently empty — reserved for future use.
   ============================================================ */

.sidebar-left,
.sidebar-right {
    position: fixed;
    top: 52px;                /* start just below the navbar */
    bottom: 0;
    width: 15%;
    background-color: #ffffff;
}

.sidebar-left {
    left: 0;
    border-right: 1px solid #e0e0e0;
}

.sidebar-right {
    right: 0;
    border-left: 1px solid #e0e0e0;
}


/* ============================================================
   5. MIDDLE CONTENT AREA (homepage)
   The only section of the homepage that scrolls.
   Sits between the two fixed sidebars, below the fixed navbar.
   ============================================================ */

.content-middle {
    margin-top: 92px;                     /* clear navbar (52px) + sort bar (40px) */
    margin-left: 15%;                     /* clear the fixed left sidebar */
    margin-right: 15%;                    /* clear the fixed right sidebar */
    height: calc(100vh - 92px);           /* fill remaining vertical space */
    overflow-y: auto;                     /* this column scrolls */
    padding: 28px 80px;
}


/* ============================================================
   6. POST CARDS (homepage)
   Each card shows title, star rating, description, and top comment.
   ============================================================ */

.post-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 18px 20px 16px;
    margin-bottom: 20px;
}

/* Row: title on the left, star block on the right */
.post-card-header {
    display: flex;
    align-items: flex-start;      /* stars align to top of multi-line title */
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

/* Post title styled as a link — underline appears on hover (see section 15) */
.post-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    text-decoration: none;
    flex: 1;
}

/* Short description paragraph inside a card */
.post-card-description {
    font-size: 13px;
    color: #444;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* Relative time label ("2d ago") — small, gray, unobtrusive */
.post-time-ago {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
}


/* ============================================================
   7. STAR RATING DISPLAY
   Used on both the homepage cards and the full post page.
   Gold for filled stars, light gray for empty stars.
   ============================================================ */

/* Wraps the star row + rating count; right-aligned */
.rating-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

/* The row of five star characters */
.stars {
    display: flex;
    gap: 2px;
    font-size: 28px;
    line-height: 1;
}

/* Empty (unfilled) star */
.star {
    color: #ddd;
}

/* Filled star — gold color matching the mockup */
.star.filled {
    color: #f5c518;
}

/* Larger variant used on the full post page */
.stars.large {
    font-size: 30px;
}

/* The "(Xk ratings)" text below the stars */
.rating-count {
    font-size: 11px;
    color: #6e6e6e;
    margin-top: 3px;
}

.rating-count.large {
    font-size: 13px;
    margin-top: 5px;
}


/* ============================================================
   8. TOP COMMENT BADGE + PREVIEW BOX
   A blue pill label followed by a bordered comment preview.
   ============================================================ */

/* Blue pill badge */
.top-comment-badge {
    display: inline-block;
    background-color: #2828ff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;          /* pill shape */
    letter-spacing: 0.04em;
    margin-bottom: 7px;
}

/* Bordered box containing the top comment text */
.top-comment-box {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: #555;
    line-height: 1.5;
}

/* "Username:" prefix inside the preview box */
.top-comment-box .comment-preview-author {
    font-style: italic;
}


/* ============================================================
   9. POST PAGE LAYOUT
   The full post page has no sidebars.
   Content is centered with a max-width for readability.
   ============================================================ */

/* Centers content and keeps it readable on wide screens */
.post-page-wrapper {
    max-width: 860px;
    margin: 52px auto 0;          /* 52px = navbar height; clears fixed bar without extra padding */
    padding: 28px 40px 60px;
    height: calc(100vh - 52px);   /* fills remaining viewport below the navbar */
    overflow-y: auto;             /* body is overflow:hidden (homepage layout), so scroll here */
}

/* Row: large title on the left, star block on the right */
.post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.post-title {
    flex: 1;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
}

/* Full-length description on the post page */
.post-description {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 18px;
}


/* ============================================================
   10. POST PAGE METADATA BLOCK
   Shows Source, Reported by, and More Information link.
   Right-aligned, sitting below the description.
   ============================================================ */

.post-meta {
    text-align: right;
    font-size: 12px;
    color: #666;
    line-height: 2;
    margin-bottom: 36px;
}

/* "More Information" link — underlined by default, underline removed on hover */
.more-info-link {
    color: #2828ff;
    text-decoration: underline;     /* underline visible by default */
    display: block;
}


/* ============================================================
   11. COMMENTS SECTION
   Sits below the post metadata on the full post page.
   Includes the count header, a write-comment input, and comment list.
   ============================================================ */

.comments-section {
    border-top: 1px solid #e0e0e0;
    padding-top: 22px;
}

/* "X Comments" heading above the list */
.comments-heading {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 14px;
}

/* "Write your comment..." text area */
.comment-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    resize: vertical;
    min-height: 44px;
    outline: none;
    margin-bottom: 28px;
    display: block;
}

/* Individual comment block */
.comment {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f0f0f0;
}

.comment:last-child {
    border-bottom: none;
}

/* Username displayed above the comment body */
.comment-username {
    font-size: 13px;
    font-weight: 700;
    color: #2828ff;           /* blue, matching the mockup */
    margin-bottom: 5px;
}

/* The comment body text — rendered as plain text to prevent XSS */
.comment-body {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* Row with like star + count, Reply, View Replies */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: #6e6e6e;
}

/* The star + count "like" element */
.comment-like {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Like star: gray by default; turns gold when the user has liked the comment */
.like-star {
    color: #ccc;
    font-size: 14px;
}

.like-star.lit {
    color: #f5c518;
}

/* Reply / View Replies buttons (formerly links) */
.comment-actions a,
.comment-actions button {
    color: #6e6e6e;
    text-decoration: none;
    background: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}


/* ============================================================
   12. MODAL OVERLAY
   Semi-transparent dark backdrop shown behind any open modal.
   Clicking it closes the modal.
   ============================================================ */

.modal-overlay {
    display: none;                    /* hidden until a modal opens */
    position: fixed;
    inset: 0;                         /* covers the entire screen */
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 200;
}


/* ============================================================
   13. MODAL CARDS (Log In + Sign Up dialogs)
   Centered white cards that appear above the overlay.
   ============================================================ */

.modal {
    display: none;                    /* hidden until triggered */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* perfectly centered */
    background-color: #ffffff;
    border-radius: 16px;
    padding: 44px 52px;
    width: 430px;
    max-width: 92vw;
    z-index: 300;                     /* above the overlay */
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

/* X close button in the top-right corner of a modal */
.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 22px;
    color: #767676;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    padding: 4px 6px;
    font-family: inherit;
}

/* "Log In" / "Sign Up" heading inside the modal */
.modal-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1a1a1a;
}

/* Privacy policy note below the title */
.modal-policy {
    font-size: 12px;
    color: #666;
    margin-bottom: 28px;
    line-height: 1.5;
}

.modal-policy a {
    color: #2828ff;
    text-decoration: underline;
}

/* Email / Password text inputs inside modals */
.modal-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;   /* underline-only style matching mockup */
    padding: 10px 4px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    outline: none;
    margin-bottom: 20px;
    background: transparent;
    text-align: left;
}

.modal-input::placeholder {
    color: #767676;
}

/* Thin horizontal rule between social buttons and email field */
.modal-divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
    margin: 4px 0 20px;
}


/* ============================================================
   14. BUTTONS
   All button styles used across the site.
   ============================================================ */

/* "Log in" — black pill button in the navbar */
.btn-login {
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

/* "Sign up" — lime-yellow pill button in the navbar */
.btn-signup {
    background-color: #c8f526;
    color: #1a1a1a;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

/* Blue "Continue" button at the bottom of modals */
.btn-continue {
    width: 100%;
    background-color: #2828ff;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
}

/* Blue social login buttons ("Continue with Google", etc.) */
.btn-social {
    width: 100%;
    background-color: #2828ff;
    color: #ffffff;
    border: none;
    border-radius: 24px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 10px;
}


/* ============================================================
   15. HOVER & FOCUS STATES
   All interactive hover behaviors defined in the mockup spec.
   ============================================================ */

/* Post card title: underline appears on hover — signals it's clickable */
.post-card-title:hover {
    text-decoration: underline;
}

/* "More Information" on post page: underline DISAPPEARS on hover (reversed) */
.more-info-link:hover {
    text-decoration: none;
}

/* Slight opacity on navbar buttons for tactile feedback */
.btn-login:hover,
.btn-signup:hover {
    opacity: 0.82;
}

/* Modal buttons: subtle brightness shift on hover */
.btn-continue:hover,
.btn-social:hover {
    opacity: 0.88;
}

/* Modal X close button: darkens on hover */
.modal-close:hover {
    color: #1a1a1a;
}

/* Comment action links/buttons: darken on hover */
.comment-actions a:hover,
.comment-actions button:hover {
    color: #333;
    text-decoration: underline;
}

/* Search bar: highlight border on focus */
.navbar-search input:focus {
    border-color: #2828ff;
    background-color: #ffffff;
}

/* Write comment textarea: highlight border on focus */
.comment-input:focus {
    border-color: #2828ff;
}


/* ============================================================
   16. INTERACTIVE STARS (post page)
   Stars on the post page are hoverable and clickable to submit a rating.
   ============================================================ */

/* Every star row (cards + post page) is a clickable target */
.stars .star {
    cursor: pointer;
    transition: color 0.1s;
}


/* ============================================================
   17. COMMENT SUBMIT BUTTON
   Small button that appears below the "Write your comment" textarea.
   ============================================================ */

.btn-comment-submit {
    display: block;
    margin-bottom: 24px;
    padding: 8px 22px;
    background-color: #2828ff;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.btn-comment-submit:hover {
    opacity: 0.88;
}


/* ============================================================
   18. COMMENT THREE-DOT MENU
   Shown only on comments the current user posted.
   Clicking the three dots reveals a small dropdown with a
   "Delete comment" option.
   ============================================================ */

/* Wrapper — position: relative anchors the dropdown below the button */
.comment-menu {
    position: relative;
    margin-left: auto;   /* pushes the button to the far right of the actions row */
}

/* The ⋮ button */
.comment-menu-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #767676;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    font-family: inherit;
}

.comment-menu-btn:hover {
    color: #333;
}

/* The popup card that appears below the ⋮ button */
.comment-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 22px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 50;
    min-width: 150px;
    padding: 6px 0;
}

/* Open state — toggled by clicking the ⋮ button */
.comment-menu-dropdown.open {
    display: block;
}

/* Each option inside the dropdown */
/* Specificity bumped to .comment-actions .comment-menu-item so this wins over
   the gray set by ".comment-actions button" above */
.comment-actions .comment-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    color: #c0392b;   /* red — signals a destructive action */
}

.comment-actions .comment-menu-item:hover {
    background-color: #f5f5f5;
}


/* ============================================================
   19. MODAL FEEDBACK MESSAGES
   Small status/error text shown inside auth modals.
   Color is overridden by auth.js: green for success, red (default) for errors.
   ============================================================ */

.modal-msg {
    font-size: 13px;
    margin-top: 8px;
    color: #c0392b;   /* default: error red */
}


/* ============================================================
   20. NAVBAR LOGGED-IN STATE
   Shown by auth.js when the user is signed in.
   Replaces the Log In / Sign Up buttons with a greeting + Log Out.
   ============================================================ */

.nav-greeting {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
}

.btn-account {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #6e6e6e;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 0;
}

.btn-account:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Override full padding shorthand so left/right takes effect */
#modal-account {
    padding: 44px 24px;
}

/* Centered section labels inside account modal — uniform top gap */
#modal-account .modal-policy {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 14px;
}

/* Title bottom margin so title→first-section gap also = 48px (20 + 28) */
#acct-title {
    margin-bottom: 20px;
}

/* Space between last password field and Save Changes button */
#acct-save-all {
    margin-top: 48px;
}

/* Row wrapping pencil icon + input */
.acct-field-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
}

/* Input inside a field row — flex fills remaining width, override standalone margin */
.acct-field-row .modal-input {
    flex: 1;
    margin-bottom: 0;
}

/* Pencil icon — sits at baseline of the input underline */
.acct-pencil {
    flex-shrink: 0;
    color: #767676;
    margin-bottom: 10px;
    cursor: pointer;
}

.acct-pencil:hover {
    color: #555;
}

.acct-pencil.acct-pencil-active {
    color: #2828ff;
}

/* Username, email, and current-password readonly fields are click-to-edit */
#acct-username[readonly],
#acct-email[readonly],
#acct-old-password[readonly] {
    pointer-events: auto;
    cursor: text;
}

/* Forgot password link at the bottom of the account modal */
.acct-reset-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}
.acct-reset-link a {
    color: #6e6e6e;
    text-decoration: none;
}
.acct-reset-link a:hover {
    color: #555;
    text-decoration: underline;
}

/* Greyed-out save button when no changes have been made */
#acct-save-all:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Readonly inputs look like static text — pencil click enables editing */
.modal-input[readonly] {
    border-bottom-color: transparent;
    cursor: default;
    pointer-events: none;
}

.btn-logout {
    padding: 8px 20px;
    background-color: #1a1a1a;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.btn-logout:hover {
    opacity: 0.80;
}


/* ============================================================
   21. MODAL LINKS
   Text links inside modals — e.g. "Forgot password?" and
   "Sign in with email link" in the Log In modal.
   ============================================================ */

.modal-link {
    display: block;
    font-size: 13px;
    color: #2828ff;
    text-decoration: underline;
    margin-top: 10px;
    cursor: pointer;
}

.modal-link:hover {
    opacity: 0.75;
}


/* ============================================================
   22. DISABLED COMMENT FORM (logged-out state)
   Textarea and submit button are disabled when not logged in.
   A "Sign up to comment" prompt appears in their place.
   ============================================================ */

.comment-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    resize: none;
}

.btn-comment-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.comment-login-prompt {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
    margin-bottom: 16px;
}


/* ============================================================
   23. SORT BAR (homepage only)
   Fixed horizontal tab row that sits between the navbar and the
   post feed. Only visible on index.html.
   ============================================================ */

.sort-bar {
    position: fixed;
    top: 52px;                  /* flush under the navbar */
    left: 15%;                  /* aligned with the middle content column */
    right: 15%;
    height: 40px;
    z-index: 99;                /* below navbar (z-index 100) */
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 80px;            /* matches .content-middle horizontal padding */
    gap: 6px;
}

.sort-label {
    font-size: 12px;
    color: #6e6e6e;
    margin-right: 4px;
    flex-shrink: 0;
}

/* The mobile toggle never shows on desktop */
.sort-toggle { display: none; }
/* display:contents makes the five buttons flow into the bar's flex row exactly
   as before, as if .sort-options weren't there — desktop layout is unchanged. */
.sort-options { display: contents; }

.sort-btn {
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    font-family: inherit;
    color: #444;
    background-color: transparent;
    border: 1px solid #d0d0d0;
    border-radius: 13px;        /* pill shape */
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}

.sort-btn:hover {
    background-color: #eaeaea;
    border-color: #bbb;
}

.sort-btn.active {
    background-color: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}



/* ============================================================
   24. COMMENT ERROR MESSAGE
   Shown inline below the "Post Comment" button when spam
   prevention or length checks block a submit.
   ============================================================ */

.comment-error {
    font-size: 13px;
    color: #c0392b;
    margin-top: 6px;
    margin-bottom: 4px;
}


/* ============================================================
   25. REPLIES
   Nested replies are indented below their parent comment with
   a left border accent. The reply-form is an inline textarea
   that appears when Reply is clicked.
   ============================================================ */

.comment-replies {
    margin-left: 32px;
    border-left: 2px solid #e0e0e0;
    padding-left: 12px;
    margin-top: 8px;
}

.comment.reply {
    font-size: 0.93em;
}

.reply-form {
    margin-top: 8px;
    margin-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reply-form textarea {
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
    min-height: 52px;
    font-family: inherit;
    outline: none;
}

.reply-form textarea:focus {
    border-color: #2828ff;
}

.btn-reply-submit {
    align-self: flex-start;
    padding: 6px 16px;
    background-color: #2828ff;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.btn-reply-submit:hover {
    opacity: 0.88;
}

.btn-reply-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


/* ============================================================
   26. RESPONSIVE — SCROLL MODEL (≤1023px)
   Release the locked-body / inner-scroll model so the browser
   scrolls natively on tablets and phones.
   ============================================================ */

@media (max-width: 1023px) {
    body { overflow: auto; }

    .content-middle {
        height: auto;
        overflow-y: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 24px 20px;
        margin-top: 100px;
    }

    .post-page-wrapper {
        height: auto;
        overflow-y: visible;
    }

    .sidebar-left, .sidebar-right { display: none; }

    .sort-bar { left: 0; right: 0; padding: 0 16px; }
}

@media (max-width: 480px) {
    .content-middle { padding: 16px 14px; }
}


/* ============================================================
   26a. RESPONSIVE — NAVBAR (≤767px)
   ============================================================ */

@media (max-width: 767px) {
    .navbar { padding: 0 12px; gap: 8px; }
    .navbar-search input { width: 100%; min-width: 0; }
    .navbar-logo img { height: 34px; }
    .btn-login, .btn-signup, .btn-logout { padding: 8px 14px; }
    .nav-greeting { display: none; }
}


/* ============================================================
   26b. RESPONSIVE — SORT BAR AS COLLAPSIBLE MENU (≤767px)
   ============================================================ */

@media (max-width: 767px) {

  /* Bar now holds only the toggle; let the popup overflow below it */
  .sort-bar { overflow: visible; gap: 0; padding: 0 12px; }

  /* Swap the inline desktop label for the toggle button (a white pill) */
  .sort-label { display: none; }
  .sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 18px;
    font-family: inherit;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    white-space: nowrap;
  }
  .sort-toggle:hover { background-color: #f2f2f2; }
  .sort-toggle-icon { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s; }
  /* Chevron flips up while the menu is open */
  .sort-toggle[aria-expanded="true"] .sort-toggle-icon { transform: rotate(180deg); }

  /* The popup: vertical list anchored to the page's left edge, hidden until open.
     .sort-bar is position:fixed, so it is the containing block for this absolute panel. */
  .sort-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #d8d8d8;
    border-top: none;
    border-radius: 0 0 12px 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 6px;
    gap: 2px;
    z-index: 120;
  }
  .sort-options.open { display: flex; }

  /* Each option: full-width, left-aligned, 44px tap target, explicit colors */
  .sort-options .sort-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 44px;
    text-align: left;
    background-color: #ffffff;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
  }
  .sort-options .sort-btn:hover  { background-color: #f2f2f2; }
  .sort-options .sort-btn.active { background-color: #1a1a1a; color: #ffffff; }
}


/* ============================================================
   26c. RESPONSIVE — POST CARD + POST PAGE STACKING (≤767px)
   ============================================================ */

@media (max-width: 767px) {
    .post-card-header { flex-direction: column; gap: 8px; }
    .rating-block { align-items: flex-start; }

    .post-page-wrapper { padding: 20px 16px 48px; }
    .post-header { flex-direction: column; gap: 12px; }
    .post-title { font-size: 24px; }
    .post-description { font-size: 15px; }
    .post-meta { text-align: left; }

    .comment-replies { margin-left: 14px; padding-left: 10px; }
    .reply-form { margin-left: 14px; }
}


/* ============================================================
   26d. RESPONSIVE — MODALS (≤480px)
   ============================================================ */

@media (max-width: 480px) {
    .modal {
        width: 100%;
        max-width: 100vw;
        height: 100%;
        max-height: 100vh;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
        padding: 56px 22px 32px;
        overflow-y: auto;
        justify-content: flex-start;
    }
    #modal-account { padding: 56px 18px 32px; }
}


/* ============================================================
   26e. TOUCH TABLETS — Landscape (≥1024px, pointer: coarse)
   Adopt the relaxed scroll + collapsed sidebars model on touch
   devices at desktop widths without affecting mouse desktops.
   ============================================================ */

@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
    body { overflow: auto; }
    .content-middle {
        height: auto;
        overflow-y: visible;
        margin-left: 0;
        margin-right: 0;
        padding: 28px 40px;
    }
    .post-page-wrapper { height: auto; overflow-y: visible; }
    .sidebar-left, .sidebar-right { display: none; }
    .sort-bar { left: 0; right: 0; padding: 0 40px; }
}


/* ============================================================
   27. ACCESSIBILITY — FOCUS VISIBILITY
   Consistent visible focus ring for all interactive elements.
   Uses :focus-visible so mouse users are unaffected.
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2828ff;
    outline-offset: 2px;
}

/* Search input placeholder — apply same fix as modal inputs */
.navbar-search input::placeholder {
    color: #767676;
}

/* Screen-reader-only utility — visually hidden but available to AT */
.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;
}

/* Skip-to-content link — hidden off-screen until focused by keyboard */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 400;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* Reset h2 defaults on card-title heading wrapper */
.post-card-title-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    flex: 1;
}


/* ============================================================
   28. ACCESSIBILITY — TOUCH TARGETS + HOVER AFFORDANCES + MOTION
   ============================================================ */

/* Minimum 44px touch targets on coarse-pointer (touch) devices */
@media (pointer: coarse) {
    .sort-btn { height: 40px; padding: 0 16px; }
    .modal-close { padding: 12px 14px; }
    .comment-menu-btn { padding: 8px 10px; }
    .btn-comment-submit, .btn-reply-submit { padding: 12px 22px; }
    .comment-actions a, .comment-actions button, .comment-like { min-height: 44px; display: inline-flex; align-items: center; }
    .acct-pencil { padding: 8px; }
}

/* Post card titles: persistent underline on touch (no hover state) */
.post-card-title { text-decoration: none; }
.post-card-title:hover, .post-card-title:focus-visible { text-decoration: underline; }
@media (pointer: coarse) { .post-card-title { text-decoration: underline; } }

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}