/* TREADS NEW FILE */

/* body setup  */

body { 
    padding-top: 72px;
    font-size: 1em;
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

/* Tester feedback (2026-09-16): "Change the default link colour to
   the same colour as the active item on the main menu. I think it's
   #17a2b8" - confirmed correct: .mainmenu .nav-link.active and
   .nav-community .nav-link.active both already use this exact value
   further down this same file. */
a {
    color: #17a2b8;
    text-decoration: none;
}

textarea {
    box-sizing: border-box;
    resize: none;
}

/* Headings that are important */

.h4, h4 {    
    font-size: 20px;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 2px;
    margin-bottom: 0px;
}

/* These items are needed */

.g56 {
    display: none;
}

.badge-pill {
    padding-top: .6em;
    padding-left: .7em;
}

.commentit {
    padding-top: 6px;
    font-size: 13px;
}

/* Tester feedback (2026-09-16): the comment textarea (once the
   collapsed "Join the conversation..." box is clicked open), the Edit
   Comment modal's textarea, and the Edit Status/Edit Caption modal's
   textarea all read too large relative to the rest of the feed -
   sized down to match. */
.comment-body,
.edit-comment-textarea,
.edit-status-textarea {
    font-size: 13px;
}

/* "Show N hidden replies" toggle (tester feedback 2026-09-16, item 3)
   - reads as a quiet secondary action, not a full-weight link, same
   register as the commentit/leave-comment de-chunking above. */
.show-hidden-replies {
    color: #65676b;
    font-weight: 500;
}

.show-hidden-replies:hover {
    color: #050505;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .show-hidden-replies {
        color: #b0b3b8;
    }
    .show-hidden-replies:hover {
        color: #e4e6eb;
    }
}

/* Feed post heading (tester feedback 2026-09-16, item 10): "$DISPLAY_NAME
   to the left of the @username. The displayname should be a link to
   the profile but should be the same colour as the rest of the text.
   The username @username should be a different colour than the
   default link blue." Also doubles as the fix for item 8's "sub
   comment" screenshot - a comment's author name (Comments.php's
   render_comment) reuses this same .feed-author-displayname class so
   it reads as a name, not a same-colour-as-content mention, when a
   reply's own @mention text sits directly next to it. */
.feed-author-displayname {
    color: inherit;
}

.feed-author-displayname:hover {
    text-decoration: underline;
}

.feed-author-username {
    color: #65676b;
}

.feed-author-username:hover {
    color: #65676b;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .feed-author-username {
        color: #b0b3b8;
    }
    .feed-author-username:hover {
        color: #b0b3b8;
    }
}

/* Notifications list (tester feedback 2026-09-17): "make the unread
   notifications a darker colour than the seen ones" - unread rows only
   had Bootstrap's stock .list-group-item-light background (a very
   faint off-white tint) to go on, and the notification text itself was
   marked up with a .text-gray-dark class that was never actually
   defined anywhere in this codebase, so every row's text rendered at
   the exact same default colour regardless of read state - unread and
   seen were nearly indistinguishable. Unread now renders bold/near-
   black; seen fades to the same muted grey used for de-emphasized text
   elsewhere on the site (.feed-author-username, .show-hidden-replies).
   See Notifications.php's Display_Notifications() - .list-group-item-light
   is added to the <a> only when $group['is_unread'] is true. */
.list-group-item .text-gray-dark {
    color: #65676b;
    font-weight: 400;
}

.list-group-item-light .text-gray-dark {
    color: #050505;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .list-group-item .text-gray-dark {
        color: #b0b3b8;
    }
    .list-group-item-light .text-gray-dark {
        color: #e4e6eb;
    }
}

/* tables */

.table-treads td {
    font-size: 12px;
}


/* Stuff for the footpath feed */


.item-comment-menu {
    display: none;  
}



.item-menu {
    display: none;
}

/* Edit Caption/Delete Photo dropdown in the full-screen photo viewer
   popup (tester feedback: "it would be good if you could update the
   photo comment in the popup or delete the photo... a drop down box
   on the other side of the username?" - see framework.js's
   Load_Media_Viewer). Deliberately its own class rather than reusing
   .item-menu above - that one is display:none by default and only
   ever revealed by ".card:hover" (or the touch-device media query
   further down), and the popup header isn't inside a .card, so the
   button would never have appeared here. */
.photo-viewer-owner-menu .dropdown-toggle {
    padding: 0 8px;
}

.status, .status-body {
    overflow:visible;
    zoom: 1;
}

.status-item-menu li {
    font-size: 12px;
}

.status-body {
    margin-top: 5px;
}

/* feed post text (the $status_body content inside each .card-feed's
   .card-body - Feed::Display_Feed()) was rendering at the browser
   default size, which read large next to everything else on a feed
   card (tester feedback: "make the text slightly smaller"). Scoped to
   .card-feed .card-body only, so usernames/headings in .card-header and
   buttons in .card-footer are untouched. */
.card-feed .card-body {
    font-size: 0.9rem;
}

.status-alert-image {
    height: 40px;   
}

.border-1 {
 border-radius: 5px;
 border: 1px solid rgba(0,0,0,.125);

}

.overflowx-visable {
    overflow-x: visible !important;
} 

.dropdown-item {
  font-size: 12px;
}

.well-footpath {
    margin-bottom: 5px; 
}

.feed-margin {
  margin-top: 10px;
  padding-bottom: 10px;

}

.btn-primary {
    color: #fff;
    background-color: #757575;
    border-color: #757575;
}

.btn-secondary {
    color: #5b5b5b;
    background-color: #c0c0c0;
    border-color: #c0c0c0;
}

.comment-disabled {
    background-color: #ccc;
    padding: 5px;
    border: 1px solid #666;
    color: #666;
}

.list-comment-item {
    padding: 5px;
  border: 0;
}

/* brief flash on the specific comment a /@username/comment/{id}
   permalink (or the older #comment{id} hash) points at - see
   framework.js's scroll-to-comment handler. Transition-based rather
   than a CSS animation so it fades back out smoothly when the
   .comment-highlight class is removed a couple of seconds later. */
.comment-highlight {
    background-color: #fff3cd;
    transition: background-color 1s ease;
}

.media-body {
  margin-top: 0;
}



.flat-top {
    border-top-left-radius: 0px; border-top-right-radius: 0px;  
}

.nav-left {
    margin-bottom: 10px;
}

.btn:focus {
    box-shadow: none;
}

/* model styles for bootstarp5 */

.modal-header {

}

.footprint-text {
    border: 0;
    padding: 0;
}

.footprint-text:focus {
    box-shadow: none !important;
}

.modal-footer {

}

.modal-media {
    opacity:0.6 !important;
}

.modal-fullscreen {
    background-color:rgba(255,255,255,0.2);
}


/* sizing style for different screen sizes */

@media only screen and (max-width: 576px) {
  
    body {
        /*padding-top: 90px;*/
    } 
  
    .navbar-top {
        padding: .5rem 1rem;
    }
   
}

@media (min-width: 992px) {

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0rem;
        padding-left: 0rem; 
    }

}

/* buttons */

/* HEADER */

.navbar-top {
   padding: .2rem  0 0 0;
}

.btn-group-xs > .btn, .btn-xs {
  padding-top  : .30rem;
  padding-bottom  : .30rem;
  padding-left  : .30rem;
  padding-right  : .30rem;
  font-size  : .800rem;
  line-height  : .7;
  height: 1.4rem;
  border-radius : .2rem;
}

@media only screen and (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 0;
    left: 15px;
    z-index: 99;
    width: 280px;
    height: 100%;
    background-color: #ddd;
    overflow: auto;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
}



.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

.media-label {
    font-size: 11pt;
}




.menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
}

.up_box {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0px;
}

.top-numbers {
    color:#000;
    position: absolute;
    left: 0px;
    top: 0px;
    text-decoration: none;  
    font-size:8pt; 
    font-weight:900;
    line-height: 10px;
    color:black; 
    background: yellow; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 2px 3px 2px 3px;
    height: 14px;
}

.unseen {
    background:#999;
}

.unseen .chat-body {
    font-weight: 900;
}

.highlight-hover {
    padding: 8px 0px 8px 0px;
    margin: 0px 5px 0px 5px;
}

.highlight-hover:hover {
    background: #ddd;   
}

.margin-10px-left {
    margin-left: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.nav>li.zero-lr>a {
    position: relative;
    display: block;
    padding: 15px 2px;
}



/* this is the alert status for the pop up alert box when it happenes. */

.status_update_box
{
    display:block;
    position:fixed;
    bottom:50px;
    left:50px;
}
.status_update_box .wrapper {
  display: table-cell;
  vertical-align: bottom;
  height: auto;
  width:300px;
}

.form-control {
    font-size: inherit;

}

/* card feed changes for profile feeds. */


.card:hover .item-menu {
    display:block;
}

/* tester feedback: "Edit status/image inline on the feed... works on
   desktop doesn't work on mobile" - the three-dot menu that Edit
   Status/Edit Photo live inside (.item-menu) was only ever revealed by
   the :hover rule above. Touch devices have no persistent hover state,
   so on a phone or tablet that button just never appeared - there was
   nothing wrong with edit-status/edit-photo themselves, they were
   simply unreachable. (hover: none) targets touch-primary devices
   specifically, so this always shows the menu there while leaving the
   desktop hover-to-reveal behaviour untouched. */
@media (hover: none) {
    .item-menu {
        display: block;
    }
}

.card-feed {
  margin-top: 10px;
  border: 0;

}

.card-feed:hover {
  background-color: #f8f9fa;
}

.card-feed .card-header {
  padding: 0px;
  background: 0;
}

.card-feed .card-footer {
  padding: 10px;
  background: 0;
}

.card-feed .card-body {
  padding: 0;

}

.card-com {
    /* used to hardcode a 21em card height - much taller than the
       square image (.image-wrapper below, which already sizes itself
       via aspect-ratio) plus a username line and two small buttons
       actually need, leaving a big block of empty space under every
       card (tester feedback on the Community page's Suggested Today
       grid). Let the card size to its own content instead. */
    height: auto;
}

.image-wrapper {
    /* square, not a fixed 14em-tall rectangle - the fixed height
       combined with object-fit:fill below was stretching every photo
       to whatever shape the box happened to be, distorting anything
       that wasn't already that exact ratio. aspect-ratio keeps the
       box itself square at any column width (this only appears in
       the Community page's "Suggested Today" grid). */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}

.image-wrapper a {
    /* the anchor was an inline element with no size of its own, so
       the img's width/height:100% below had nothing real to resolve
       against - the box just shrank to the image's intrinsic size
       instead of actually filling the square, which is why cropping
       wasn't visibly "zooming in" to cover it. Making the anchor
       fill the wrapper gives the img a real 100%/100% box to cover. */
    display: block;
    width: 100%;
    height: 100%;
}

.image-wrapper a img,
.image-wrapper > img {
    /* cover + crop to fill the square, zoomed in from the centre,
       instead of stretching (object-fit:fill) to whatever the box's
       own ratio was. The bare ".image-wrapper > img" half of this
       covers callers with no <a> in between (e.g. /myphotos' grid,
       which isn't a click-through link) - same square treatment,
       just resolving straight against the wrapper's own 100%/100%
       box instead of an anchor's. */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* This is important for the upload page */

#dragandrophandler {
  border:2px dotted #0B85A1;
  color:#92AAB0;
  text-align:center;
  vertical-align:middle;
  padding:10px 10px 10 10px;
  margin-bottom:10px;
  font-size:200%;
}

.progressBar {
    width: 200px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}
 
.progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5; border-radius: 3px; 
}
.statusbar
{
    border-top:1px solid #A9CCD1;
    min-height:25px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
}
.statusbar:nth-child(odd){
    background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
    background-color:#A8352F;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
    color:#fff;
    font-family:arial;font-size:13px;font-weight:normal;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
    }



/*
---------------------------------------------------- 
FILE: treads-production.css                          
---------------------------------------------------- 
DEVELOPER: PHILIP J. NEWMAN  (Primal Media Limited)  
---------------------------------------------------- 
VERSION 0.0.1                                        
---------------------------------------------------- 

THIS PAGE PROVIDES PROCESSES FOR THE STYLESHEETS FOR TREADS.NZ
SCRIPT (c) PRIMAL MEDIA LIMITED

*/

/* BODY SETUP  */

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
    }
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

button:focus {
    outline: none;
}

/* SIDE MENU */

.menu-icon {
    font-size: 1.5em;
    width: 60px;
    vertical-align: middle;
}

@media (max-width: 992px) {
    
    .menu-text {
        display: none;
    }

    .menu-left {
        max-width: 10% !important;
    }
    
    .menu-icon {
        width: 0;
    }

}

/* MAIN MENU */

.mainmenu {


}

.mainmenu.nav-pills .nav-link.active, 
.mainmenu.nav-pills .show>.nav-link {
    color: #17a2b8;
    background-color: transparent;
    border-radius: 25px 5px 5px 25px;
    font-size: 1.2em;
    font-weight: bold;

}

/* tester feedback (2026-09-17): a double-digit unread count (eg "51")
   made the badge drop onto its own line below "Notifications" -
   .nav-link's icon/text/badge are three separate inline spans with
   nothing stopping them wrapping once their combined width outgrows
   the sidebar, and a 2-digit badge was just enough to tip that over.
   Flexbox keeps all three on one row regardless of badge width. */
.mainmenu.nav-pills .nav-link {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 25px 5px 5px 25px;
    font-size: 1.2em;
    color: #333;
    font-weight: bold;
}

.mainmenu.nav-pills .nav-link:hover {
    border-radius: 25px 5px 5px 25px;
    font-size: 1.2em;
    background-color: #c0c0c0;
    color: #000;
}

/* MIDDLE COLUMN */

.col-middle {
  
}

/* FEED ITEMS */

.btn-comment {
    border-radius: 0px 25px 25px 0px !important;
    height: 32px;
}

.thumbnail-sm {
  border-radius: 20px;
  padding: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.circle {
  border-radius: 50%;
}

.status-comment:hover .item-comment-menu {
    display:block;  
}

.status-comment-body {
  background: rgba(0,0,0,.03);
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.875rem; /* smaller than the surrounding post text - matches Bootstrap's .small */
}

.status-comment-new {
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
}

.status-comment-dropdown {
    display: none;
}

.status-comment-body:hover .status-comment-dropdown {
    display:block;  
}

/* NAV MENUS MENU */

@media (max-width: 768px) {
    .hover.nav-item a {
        padding-left: 1em;
        padding-right: 1em;
        font-size: 1.2em;
    }   
}

.hover.nav-item a:hover {
    background-color: #c0c0c0;
}

.hover.nav-item a:focus {
    background-color: #827d7d;
}

.nav-community .nav-link {
    border-radius: 0;
    border:0;
    font-size: 0.8em;
    font-weight:bold;
    background-color: transparent;
    color: #000;
}

.nav-community .nav-link:hover,
.nav-community .nav-link.active:hover {
    border-radius: 0;
    border:0;
    background-color: #c0c0c0;
    color: #000;
    border-bottom: 3px solid transparent;
}
.nav-community .nav-link.active {
    border-radius: 0;
    border:0;
    background-color: transparent;
    color: #17a2b8;
    border-bottom: 3px solid #17a2b8;

}

/* list groups */

.list-group-item {
    font-size: 1.0em;
    border-color: #c0c0c0;
    background-color: transparent;
}

.list-group-item.active, 
.list-group-item.active:focus, 
.list-group-item.active:hover {
    background-color: #c0c0c0;
    border-color: #c0c0c0;
    color: #000;
}

.list-group-item.active

.main-menu .list-group-item {
    padding: 10px 15px;
    font-size: 12px;
}

/* image popup's comment list (Load_Media_Viewer() in framework.js) -
   list-group-flush deliberately drops the outer border/rounded corners
   so it sits flush inside the modal's card, but that also zeroes out
   left/right padding on Bootstrap's default .list-group-item, leaving
   comment text running edge-to-edge - bulkier and more cramped than
   every other list-group on the site (tester feedback). Scoped to just
   this viewer's comment list rather than every list-group-flush, since
   plenty of other pages use that class and look fine as-is. */
.photo-viewer-comments.list-group-flush > .list-group-item {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Tester feedback (item 7): "like/reply buttons look too bootstrap/
   chunky sitewide - make them look less chunky". These are small,
   frequent, low-emphasis social actions (like a photo/status/comment,
   leave a comment, reply) that were rendered as full solid Bootstrap
   pill buttons (.btn-secondary/.btn-danger btn-xs/btn-sm) everywhere -
   Feed.php's card, the comment thread (Comments.php), the full-screen
   photo viewer (framework.js). Restyled to a lighter, text/ghost-button
   look (no fill, no border, a faint hover background) closer to how
   X/Twitter-style low-emphasis action buttons read, while keeping a
   real hit target and a visible hover/focus state. Deliberately scoped
   to these specific classes rather than .btn generally, so primary
   CTAs and form submit buttons (Post, Save, Send Message, etc) are
   completely unaffected.
   - .likeit / .likeit-others: the heart "like"/"N likes" buttons
     (feed cards, comments, the full-screen photo viewer's like bar).
   - .commentit: "Join the conversation" trigger and the reply icon button.
   - .leave-comment: the actual "Say It" comment-submit button - kept
     slightly more visible (it's a real submit action, not just an
     open/toggle), but still de-chunked to match.
   like_value .btn-danger ("liked" state, filled solid red pill by
   default) is toned down to a plain red text/icon rather than a solid
   fill, so a liked item still reads as clearly different without going
   back to a heavy pill. */
.likeit,
.likeit-others,
a.commentit {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #65676b !important;
    font-weight: 500;
}

.likeit:hover,
.likeit-others:hover,
a.commentit:hover,
.likeit:focus-visible,
.likeit-others:focus-visible,
a.commentit:focus-visible {
    background-color: rgba(0,0,0,.06) !important;
    color: #050505 !important;
}

.likeit.btn-danger {
    color: #dc3545 !important;
}

.likeit.btn-danger:hover {
    background-color: rgba(220,53,69,.08) !important;
    color: #dc3545 !important;
}

.leave-comment {
    background-color: transparent !important;
    border: 1px solid #ccd0d5 !important;
    color: #050505 !important;
    box-shadow: none !important;
}

.leave-comment:hover {
    background-color: rgba(0,0,0,.06) !important;
}

@media (prefers-color-scheme: dark) {
    .likeit,
    .likeit-others,
    a.commentit {
        color: #b0b3b8 !important;
    }
    .likeit:hover,
    .likeit-others:hover,
    a.commentit:hover {
        background-color: rgba(255,255,255,.08) !important;
        color: #e4e6eb !important;
    }
    .leave-comment {
        border-color: #3e4042 !important;
        color: #e4e6eb !important;
    }
    .leave-comment:hover {
        background-color: rgba(255,255,255,.08) !important;
    }
}

/* Tester feedback (item 8): "in the full-screen photo popup: align the
   image description with the user's avatar; de-chunk/remove the heavy
   like bar and comments bar". The like bar's .card-header and the
   comments list's default Bootstrap card border/background read as
   one more heavy, boxed section stacked under an already-boxed modal -
   lightened to a plain, borderless block so the popup feels like one
   coherent panel rather than cards-inside-a-card. Scoped to this
   viewer specifically (framework.js's Load_Media_Viewer) rather than
   every .card on the site. */
.photo-viewer-caption,
.photo-viewer-comments-wrap > .card {
    border: none;
    background-color: transparent;
}

.photo-viewer-comments-wrap > .card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding-left: 0;
    padding-right: 0;
}

@media (prefers-color-scheme: dark) {
    .photo-viewer-comments-wrap > .card > .card-header {
        border-bottom-color: rgba(255,255,255,.1);
    }
}

/* the caption used to sit nested under the username (indented to
   match it, not the avatar), which read as visually offset from the
   avatar column it's meant to belong to - now a full-width line below
   the avatar/username row, flush with the avatar's own left edge. */
.photo-viewer-caption {
    padding: 0;
    margin: 0 0 .75rem 0;
}

/* 
--------------
FRONT PAGE ITEMS
--------------
*/

 .image-column {
    background-image: url('/images/frontpage-03.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling in this column */
}

.scroll-column {
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Allow vertical scrolling */
}


/* ============================================================
   MODERNIZATION PASS — same palette, consistent depth/spacing
   ============================================================ */

/* Give every card a consistent soft radius + subtle shadow instead
   of the current mix of rounded-0 flush cards and default cards. */
.card {
    border-radius: 12px;
    border-color: #e9e9e9;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* The "Welcome" card and any other .border-top-0.rounded-0 card that
   sits directly under the tab strip should match the same radius,
   not look like a separate flush panel. */
.tab-content .card.border-top-0.rounded-0 {
    border-radius: 12px;
    border-top: 1px solid #e9e9e9 !important;
    margin-top: 12px;
}

.card-feed {
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border-color: #e9e9e9 !important;
}

.card-feed:hover {
    background-color: #fafafa;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Timestamp under a username reads as a plain link right now (same
   blue as everything else). Muting it creates clearer hierarchy
   between "who" and "when" without introducing a new color. */
.card-feed .card-header .flex-fill a small {
    color: #6c757d;
}

.card-feed .card-header .flex-fill a small .fa {
    color: #6c757d;
}

/* Nav tabs (Home / News & Blogs / Trending): more breathing room,
   clearer active state, softer hover than the flat default. */
.nav-community {
    border-bottom: 1px solid #e9e9e9;
}

.nav-community .nav-link {
    padding: 12px 4px;
    border-bottom: 3px solid transparent;
}

.nav-community .nav-link.active {
    border-bottom: 3px solid #17a2b8;
}

/* "Show more items" — was a heavy full-width grey slab.
   A lighter pill in the same primary color reads as an action,
   not a wall. */
.load-more-feed {
    background-color: transparent;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    border-radius: 25px;
    font-weight: 600;
}

.load-more-feed:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* Sidebar cards (Today / Who to follow) match the same consistent
   card treatment as the main feed. */
.col-xl-3 .card {
    border-color: #e9e9e9;
}

/* "Who to follow" sidebar list — smaller text than the main feed
   so it reads as secondary/browsing content, not a competing column. */
.who_is_online {
    font-size: 0.8em;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-cover {
    position: relative;
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;
    margin-bottom: 60px;
}

.profile-avatar {
    position: absolute;
    left: 24px;
    bottom: -55px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    background-color: #fff;
}

.profile-cover-actions {
    position: absolute;
    right: 16px;
    bottom: -50px;
}

.profile-cover-upload-btn {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.profile-identity {
    padding: 0 4px;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: #6c757d;
    font-size: 0.9em;
}

.profile-meta .fa {
    color: #6c757d;
    margin-right: 4px;
}

.profile-stats a {
    color: inherit;
    margin-right: 20px;
    text-decoration: none;
}

.profile-stats a:hover span.text-muted {
    text-decoration: underline;
}

.profile-header-bar {
    padding: 4px 4px 10px 4px;
}

.profile-back-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* full-screen photo viewer - carousel nav buttons */
.photo-viewer-image-wrap .photo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.35;
    transition: opacity 0.15s ease-in-out;
    z-index: 5;
}

.photo-viewer-image-wrap:hover .photo-nav-btn {
    opacity: 0.9;
}

.photo-viewer-image-wrap .photo-nav-prev {
    left: 10px;
}

.photo-viewer-image-wrap .photo-nav-next {
    right: 10px;
}

/* feed photo cards - a tall/portrait photo used to render at its full
   native height (w-100, no cap), which could blow a card out to well
   over a screen's height. Capped at 500px - but per Philip, no
   cropping: the image must keep its own proportions, just scaled down
   to fit within the cap. So this deliberately does NOT force
   width:100% or object-fit:cover (that combination is what crops) -
   width/height are both left to size themselves from the image's own
   aspect ratio, only ever shrinking to fit within max-width/max-height.
   Floated left per Philip's follow-up request, rather than centred -
   the .feed-status-img-clear div right after each image in
   Feed.php's photo/image/media renderers clears the float so the
   card's footer (likes/comments) doesn't ride up underneath it.
   Note the <img> tags themselves no longer carry Bootstrap's w-100
   class alongside this, since w-100's width:100% !important would
   force the full card width and fight this rule, breaking the ratio
   (stretch) or effectively cropping it again. */
.feed-status-img {
    float: left;
    max-width: 100%;
    max-height: 500px;
    width: auto;
    height: auto;
    margin-right: 10px;
}

.feed-status-img-clear {
    clear: both;
}

/* Multi-photo grid (tester feedback, round 1: "when someone uploads
   more than one photo they should be arranged in such a way that
   keeps them within the footprint of one square photo... if there
   are more than 4 then some need to be made smaller"; round 2: "the
   way it displays should depend on the aspect of the photo... two
   [portrait] photos side by side [could] be resized so the whole
   photo shows... wider photos could sit down the side of the longer
   photo"). Used by Feed.php's photo card (a status with
   status_meta.photos.length > 1) and View_Board_Discussion.php's
   discussion photos - both build the same markup via the shared
   Photos::Build_Photo_Grid_Layout() layout math: an outer
   <div class="photo-grid"> (its own aspect-ratio set inline per post,
   see below) containing one or more <div class="photo-grid-row">,
   each containing 1-2 <a class="photo-grid-item"> tiles (each
   wrapping the existing .open-full-screen anchor + <img> unchanged).

   This replaced an earlier version that forced every tile into a
   fixed square grid and hard-cropped each photo to fill its cell
   (object-fit:cover) regardless of its real shape. Every row's height
   and every tile's width within a row is now a plain CSS percentage
   (occasionally calc(percentage - Npx) to net the 3px gap back out)
   computed server-side from that photo's own real aspect ratio (see
   Build_Photo_Grid_Layout()'s doc comment for the maths - percentages
   were used deliberately over flex-grow: tested against a real
   Chromium build, flex-grow distribution came out unreliable on a
   flex child sized off a container whose height comes from
   aspect-ratio rather than an explicit height once the grow factor
   was a fraction under 1) - a row of two portrait photos ends up tall
   and narrow-each, a row containing one wide photo ends up short, and
   object-fit:contain means no photo is ever cropped, just resized to
   fit the space its own shape earned it. The outer .photo-grid's
   aspect-ratio is the one thing still loosely clamped near-square
   (0.7-1.4), so the overall post still reads as "the footprint of one
   square photo" the way the original feedback asked for - only the
   odd extreme aspect mix ever shows a sliver of neutral letterbox
   background rather than a crop. */
.photo-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    margin: 10px 0;
}

.photo-grid-row {
    display: flex;
    gap: 3px;
    flex: none;
}

.photo-grid-item {
    position: relative;
    display: block;
    overflow: hidden;
    background: #e9ecef;
    flex: none;
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    /* tester feedback: the aspect-matched grid cell still leaves a
       visible grey sliver around a photo whenever its real aspect
       ratio doesn't land exactly on the cell's computed percentage
       (object-fit:contain letterboxes/pillarboxes rather than
       cropping in that case, by original design - see the .photo-grid
       comment above). Switched to object-fit:cover so every tile is
       filled edge-to-edge instead, at the cost of a slight zoom/crop
       on photos that don't match their cell's ratio exactly. */
    object-fit: cover;
    background: #e9ecef;
    display: block;
}

.photo-grid-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 600;
}

/*
--------------
ABOUT PAGE (/about) - vertical timeline, "Now"/"Future" cards
--------------
*/

.about-timeline {
    position: relative;
    padding-left: 56px;
}

/* the connecting line - sits behind the markers, spans the full
   height of the list so it visually threads every era together. */
.about-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 23px;
    width: 2px;
    background: #dee2e6;
}

.about-timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.about-timeline-item:last-child {
    margin-bottom: 0;
}

.about-timeline-marker {
    position: absolute;
    top: 0;
    left: -56px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #17a2b8;
    color: #17a2b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 1;
}

.about-timeline-era {
    color: #17a2b8;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: .15rem;
}

.about-timeline-body p {
    color: #333;
    margin-bottom: .5rem;
}

.about-timeline-body p:last-child {
    margin-bottom: 0;
}

.about-section {
    border: none;
    background-color: #f8f9fa;
}

.about-cta {
    padding: 1rem 0 2rem;
}

@media (max-width: 575.98px) {
    .about-timeline {
        padding-left: 44px;
    }
    .about-timeline::before {
        left: 17px;
    }
    .about-timeline-marker {
        left: -44px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (prefers-color-scheme: dark) {
    .about-timeline::before {
        background: #3e4042;
    }
    .about-timeline-marker {
        background: #18191a;
        border-color: #17a2b8;
    }
    .about-timeline-body p {
        color: #e4e6eb;
    }
    .about-section {
        background-color: #242526;
    }
}