/* =========================================================================
   F L U F F Y S H E E P . N E T
   Recreation of the original Pixelpost "raia" theme, rebuilt from scratch
   on top of a JSON/PHP backend. Colours, spacing and asset names are taken
   directly from the archived site so it reads the same as it always did.
   ========================================================================= */

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: #666;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}

a { color: inherit; }
img { border: 0; }

.clearer { clear: both; margin: 0; padding: 0; font-size: 0; line-height: 0; }

#page-wrap {
    max-width: 973px;
    margin: 0 auto;
    text-align: left;
}

/* ---------------------------------------------------------------- menu -- */
#menu-bg {
    position: relative;
    width: 100%;
    height: 52px;
    background: transparent url('../img/menu-bg.png') repeat-x;
    padding: 0 10px;
    overflow: hidden;
}

#menu-bg .menu-inner {
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-wrap: wrap;
}

.menu-button a {
    display: block;
    box-sizing: content-box;
    padding: 14px 15px 0;
    height: 25px;
    text-decoration: none;
    color: #000;
    font-size: 12px;
}
.menu-button a:hover { color: #666; }

.menu-divider { width: 2px; height: 39px; overflow: hidden; display: flex; align-items: center; }
.menu-divider img { display: block; max-height: 39px; }

.menu-dark-cap { display: flex; align-items: stretch; line-height: 0; }
.menu-dark-cap img { display: block; height: 43px; }

.menu-button-dark a {
    display: block;
    box-sizing: content-box;
    background: url('../img/menu-dark-bg.gif') repeat-x;
    height: 25px;
    padding: 14px 15px 0 11px;
    color: #ccc;
    text-decoration: none;
    font-size: 12px;
}
.menu-button-dark a:hover { color: #fff; }
.menu-button-dark a.disabled { opacity: .35; pointer-events: none; }
.menu-dark-divide { display: flex; align-items: stretch; line-height: 0; }
.menu-dark-divide img { display: block; height: 43px; }

#menu-logo {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}
#menu-logo a {
    display: block;
    width: 205px;
    height: 36px;
    margin-right: 5px;
    background: url('../img/title.png') no-repeat;
}

/* --------------------------------------------------------- error banner */
#error-banner {
    background: #5a1c1c; color: #ffdcdc; padding: 12px 16px; font-size: 12px;
    line-height: 1.5; border-radius: 4px; margin: 0 0 2px; word-break: break-word;
}

/* -------------------------------------------------------- photo --- */
#photo-frame { position: relative; }

#top-shadow, #bottom-shadow { display: flex; height: 10px; line-height: 0; }
#top-shadow img, #bottom-shadow img { display: block; }
#top-shadow .edge, #bottom-shadow .edge { width: 10px; height: 10px; }
#top-shadow .mid, #bottom-shadow .mid { flex: 1; height: 10px; object-fit: fill; width: 100%; }

#image-row { display: flex; }
#side-shadow-left, #side-shadow-right { width: 10px; flex-shrink: 0; }
#side-shadow-left img, #side-shadow-right img { width: 10px; height: 100%; display: block; }

#image-holder {
    flex: 1;
    min-width: 0;
    background: #000 url('../img/loader.gif') no-repeat center;
    line-height: 0;
    text-align: center;
}
#photo {
    max-width: 100%;
    height: auto;
    display: inline-block;
    cursor: zoom-in;
}

/* --------------------------------------------------------- bottom bar -- */
#bottom-menu {
    position: relative;
    background: transparent url('../img/bottom-bg.png') repeat-x;
    width: 100%;
}
#bottom-holder {
    position: relative;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #333;
}

#image-info { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; }
#image-info h1 { font-size: 22px; color: #222; line-height: 26px; margin: 0 0 6px; font-weight: 300; }
#image-info h4 { font-size: 11px; color: #666; margin: 0 0 12px; font-weight: 400; }
#photo-description { font-size: 12px; color: #444; line-height: 1.5; margin: 0 0 12px; }

#bottom-button { margin-top: auto; padding-top: 6px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0; min-height: 35px; }
#bottom-button b { color: #555; font-weight: 400; margin-right: 6px; }
.share-icon { display: inline-flex; align-items: center; width: 26px; height: 26px; margin-right: 4px; opacity: .85; }
.share-icon:hover { opacity: 1; }
.share-icon img { width: 26px; height: 26px; }
#bottom-button .share-icon { border-radius: 4px; overflow: hidden; }
#bottom-button [data-share="facebook"] { background: #1877f2; }
#bottom-button [data-share="x"] { background: #000; }
#bottom-button [data-share="instagram"] { background: linear-gradient(135deg, #833ab4, #e1306c 55%, #fcb045); }
#bottom-button [data-share="tiktok"] { background: #000; }
#bottom-button .generic-share { background: #4f6675; }

.dark-pill-cap { display: flex; align-items: stretch; line-height: 0; }
.dark-pill-cap img { display: block; height: 35px; }
#fullsize-group {
    display: flex;
    align-items: stretch;
    align-self: flex-end;
    margin-left: 10px;
    /* The panel has 15px bottom padding; let this tab meet its lower edge. */
    transform: translateY(15px);
}
#fullsize-btn {
    display: block;
    box-sizing: content-box;
    height: 22px;
    padding: 13px 15px 0;
    background: url('../img/bottom-darkbg.gif') repeat-x;
    color: #333;
    text-decoration: none;
    font-size: 12px;
}
#fullsize-btn:hover { color: #fff; }

#exif-panel { flex: 1 1 240px; min-width: 200px; color: #444; font-size: 11px; line-height: 18px; }
#exif-panel h2 { font-size: 14px; color: #222; font-weight: 400; margin: 0 0 6px; }
#exif-panel b { color: #888; font-weight: 400; }
#exif-panel .credit { display: block; margin-top: 8px; color: #999; }
#exif-panel .credit a { color: #666; }

#calendar-panel { flex: 0 0 240px; }

/* ------------------------------------------------------- mini calendar - */
.mini-cal { width: 230px; font-size: 11px; color: #444; }
.mini-cal table { width: 100%; border-collapse: collapse; text-align: center; }
.mini-cal th { font-weight: 400; color: #999; padding: 2px 0; font-size: 10px; }
.mini-cal td { padding: 3px 0; color: #999; }
.mini-cal .cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #333; margin-bottom: 4px; }
.mini-cal .cal-head button { background: none; border: none; color: #666; cursor: pointer; font-size: 13px; padding: 2px 8px; }
.mini-cal .cal-head button:hover { color: #000; }
.mini-cal .cal-head .cal-title { cursor: pointer; text-decoration: underline dotted; }
.mini-cal .other-month { color: #ccc; }
.mini-cal .has-photo { color: #333; }
.mini-cal .has-photo a { color: #d33; text-decoration: none; font-weight: bold; }
.mini-cal .has-photo a:hover { text-decoration: underline; }
.mini-cal .today { outline: 1px solid #d33; border-radius: 2px; }

.year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.year-grid .mini-month { background: #f2f2f2; border-radius: 3px; padding: 6px; }
.year-grid .mini-month-name { font-size: 10px; color: #999; text-align: center; margin-bottom: 4px; }
.year-grid .mini-month.has-photos { background: #fbe4e4; }
.year-grid .mini-month.has-photos .mini-month-name { color: #c33; cursor: pointer; }
.year-grid .mini-month.has-photos .mini-month-name:hover { color: #900; }

/* ----------------------------------------------------------- comments -- */
#comment-holder { display: none; }

/* -------------------------------------------------------------- footer - */
#footer { padding: 20px; color: #fff; text-align: center; font-size: 11px; }
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
.footer-links { white-space: nowrap; }

/* ------------------------------------------------------------ browse --- */
#browse-view { background: #1b1b1b; padding: 20px; color: #ddd; }
#browse-view h1 { color: #fff; font-weight: 300; font-size: 22px; margin-top: 0; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumb-grid a { display: block; position: relative; overflow: hidden; border-radius: 3px; background: #000; aspect-ratio: 3/2; }
.thumb-grid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .15s, transform .15s; }
.thumb-grid a:hover img { opacity: 1; transform: scale(1.04); }
.thumb-grid .thumb-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    color: #fff; font-size: 11px;
}
#load-more-wrap { text-align: center; margin-top: 20px; }
#load-more {
    background: url('../img/bottom-darkbg.gif') repeat-x; color: #ddd; border: none;
    padding: 8px 20px; cursor: pointer; border-radius: 3px; font-size: 12px;
}
#load-more:hover { color: #fff; }

/* -------------------------------------------------------------- about -- */
#about-view { background: #1b1b1b; padding: 20px 30px; color: #ddd; line-height: 1.6; }
#about-view h1 { color: #fff; font-weight: 300; }
#about-view a { color: #ff8a8a; }

/* --------------------------------------------------------------- map --- */
#map-view { background: #1b1b1b; padding: 20px; }
#map-view h1 { color: #fff; font-weight: 300; font-size: 22px; margin: 0 0 14px; }
#leaflet-map { width: 100%; height: 560px; border-radius: 3px; background: #000; }
.map-marker-thumb { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.leaflet-popup-content-wrapper { background: #1b1b1b; color: #ddd; }
.leaflet-popup-content a { color: #ff8a8a; }
.leaflet-popup-tip { background: #1b1b1b; }
.map-popup img { width: 100%; max-width: 180px; display: block; margin-bottom: 6px; border-radius: 3px; }

/* ------------------------------------------------------------ lightbox - */
#shadowbox-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.92);
    display: none; align-items: center; justify-content: center; z-index: 1000;
    flex-direction: column; padding: 20px;
}
#shadowbox-overlay.open { display: flex; }
#shadowbox-overlay img { max-width: 100%; max-height: 82vh; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
#shadowbox-caption { color: #ccc; margin-top: 14px; font-size: 12px; text-align: center; }
#shadowbox-close {
    position: absolute; top: 16px; right: 24px; color: #fff; font-size: 30px;
    background: none; border: none; cursor: pointer; line-height: 1; opacity: .8;
}
#shadowbox-close:hover { opacity: 1; }
#shadowbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; pointer-events: none; }
#shadowbox-nav button { pointer-events: auto; background: rgba(0,0,0,.4); border: none; color: #fff; font-size: 28px; padding: 10px 16px; cursor: pointer; }
#shadowbox-nav button:hover { background: rgba(0,0,0,.7); }
#shadowbox-share { margin-top: 10px; display: flex; gap: 10px; }

/* -------------------------------------------------------------- toast -- */
#toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1b1b1b; color: #fff; padding: 10px 18px; border-radius: 4px; font-size: 12px;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1100;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------- admin --- */
.admin-body { background: #333; min-height: 100vh; font-family: Verdana, Arial, Helvetica, sans-serif; }
.admin-wrap { max-width: 900px; margin: 0 auto; padding: 30px 20px; }
.admin-card { background: #1b1b1b; color: #ddd; padding: 24px; border-radius: 6px; margin-bottom: 20px; }
.admin-card h1, .admin-card h2 { color: #fff; font-weight: 300; margin-top: 0; }
.admin-card label { display: block; margin: 12px 0 4px; font-size: 12px; color: #aaa; }
.admin-card input[type=text], .admin-card input[type=email], .admin-card input[type=password], .admin-card input[type=number], .admin-card textarea {
    width: 100%; padding: 8px; background: #2a2a2a; border: 1px solid #444; color: #fff; border-radius: 3px; font-size: 13px;
}
.admin-card textarea { min-height: 100px; }
.admin-card button, .btn {
    background: url('../img/bottom-darkbg.gif') repeat-x; color: #eee; border: none;
    padding: 9px 18px; border-radius: 3px; cursor: pointer; font-size: 13px; margin-top: 14px;
}
.admin-card button:hover { color: #fff; }
.btn-danger { background: #5a1c1c; }
.admin-error { color: #ff8a8a; margin-top: 10px; font-size: 12px; }
.admin-ok { color: #8aff9c; margin-top: 10px; font-size: 12px; }
.admin-manage-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #333; }
.admin-manage-row img { width: 70px; height: 46px; object-fit: cover; border-radius: 3px; background: #000; }
.admin-manage-row .meta { flex: 1; font-size: 12px; }
.admin-manage-row .meta .t { color: #fff; font-size: 13px; }
.dropzone {
    border: 2px dashed #444; border-radius: 6px; padding: 30px; text-align: center; color: #888; cursor: pointer;
}
.dropzone.drag { border-color: #ff8a8a; color: #fff; }
.upload-preview { max-width: 100%; max-height: 240px; margin-top: 12px; border-radius: 4px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; }
.admin-topbar a { color: #999; font-size: 12px; text-decoration: none; }
.admin-topbar a:hover { color: #fff; }

#admin-nav {
    display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 0;
}
#admin-nav a {
    color: #999; text-decoration: none; padding: 10px 16px; font-size: 13px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#admin-nav a:hover { color: #fff; }
#admin-nav a.active { color: #fff; border-bottom-color: #999; }

/* -------------------------------------------------------- edit modal -- */
#edit-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1200;
    display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px;
}
#edit-overlay.open { display: flex; }
#edit-modal { background: #1b1b1b; color: #ddd; max-width: 640px; width: 100%; border-radius: 6px; padding: 24px; }
#edit-modal h2 { color: #fff; font-weight: 300; margin-top: 0; }
#edit-map { width: 100%; height: 260px; border-radius: 4px; margin-top: 6px; background: #000; }
#upload-map { width: 100%; height: 300px; border-radius: 4px; margin-top: 8px; background: #000; }
#edit-map-hint { font-size: 11px; color: #888; margin-top: 4px; }
.location-picker { margin-top: 12px; }
.map-search { display: flex; gap: 8px; align-items: stretch; }
.map-search input { min-width: 0; flex: 1; }
.map-search button { margin-top: 0; flex: 0 0 auto; }
.map-search-results { margin-top: 5px; color: #aaa; font-size: 11px; }
.map-search-results button { display: block; width: 100%; margin: 0; padding: 7px 9px; border: 0; border-bottom: 1px solid #444; border-radius: 0; background: #292929; color: #ddd; text-align: left; }
.map-search-results button:hover { background: #383838; }
.map-hint { margin-top: 5px; color: #888; font-size: 11px; }
.edit-actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.edit-actions .muted-btn { background: none; border: 1px solid #444; color: #aaa; padding: 9px 18px; border-radius: 3px; cursor: pointer; }
.edit-actions .muted-btn:hover { color: #fff; border-color: #666; }

/* ------------------------------------------------------------ helpers -- */
.hidden { display: none !important; }
.muted { color: #888; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #666; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- responsive - */
@media (max-width: 700px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    #page-wrap { width: 100%; max-width: 100%; overflow-x: clip; }

    /* Keep the logo panel, then reduce navigation to one clear three-button
       row: previous, home, next. The full desktop menu remains untouched. */
    #menu-bg {
        width: calc(100% - 20px);
        height: auto;
        min-height: 0;
        margin-right: auto;
        margin-left: auto;
        padding: 0 0 8px;
        overflow: hidden;
        background: linear-gradient(to bottom,
            #fff 0,
            #eee calc(100% - 10px),
            #c7c7c7 calc(100% - 8px),
            #777 100%);
        border-radius: 0 0 8px 8px;
    }
    #menu-bg .menu-inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: auto;
        gap: 2px;
    }
    .menu-divider, .menu-dark-divide, .menu-dark-cap { display: none; }
    .nav-desktop-only { display: none; }
    .menu-button, .menu-button-dark { min-width: 0; }
    .menu-button a, .menu-button-dark a {
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-wrap: anywhere;
        text-align: center;
        font-size: 11px;
        border-radius: 2px;
    }
    .menu-button a { background: rgba(255,255,255,.28); }
    .menu-button-dark a { background-color: #333; }
    #menu-logo {
        order: -1;
        grid-column: 1 / -1;
        height: 42px;
        margin-left: 0;
        justify-content: center;
        background: #eee url('../img/menu-bg.png') repeat-x;
        border-radius: 0 0 8px 0;
    }
    #menu-logo a { width: 205px; max-width: 100%; margin-right: 0; }
    .nav-prev { order: 1; }
    .nav-home { order: 2; }
    .nav-next { order: 3; }
    #error-banner { margin-left: 6px; margin-right: 6px; }
    #photo-frame { max-width: 100%; }
    #bottom-menu {
        width: calc(100% - 20px);
        margin-right: auto;
        margin-left: auto;
        /* The source panel is 970px wide and includes both end caps. Repeating
           it at mobile widths keeps the left cap but crops off the right one,
           which makes an otherwise centred panel look left-shifted. */
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }
    #bottom-holder { display: block; padding: 14px 12px; }
    #image-info, #exif-panel, #calendar-panel { flex-basis: auto; width: 100%; min-width: 0; }
    #exif-panel, #calendar-panel { display: none; }
    #image-info h1, #photo-description, #exif-fields, #about-content { overflow-wrap: anywhere; }
    #bottom-button { margin-top: 4px; }
    #fullsize-group {
        margin-left: auto;
        /* Seat the tab midway between its original low position and the
           share-control baseline on narrow screens. */
        transform: translateY(6px);
    }
    .mini-cal { width: 100%; max-width: 300px; }
    #browse-view, #map-view, #about-view { padding: 15px 12px; }
    #footer { padding-right: 12px; padding-left: 12px; line-height: 1.8; }
    #leaflet-map { height: 65vh; min-height: 360px; }
    #shadowbox-overlay { padding: 52px 10px 16px; }
    #shadowbox-overlay > #shadowbox-img { max-width: 100%; max-height: 70dvh; object-fit: contain; }
    #shadowbox-caption { max-width: 100%; overflow-wrap: anywhere; }
    #shadowbox-nav button { padding: 9px 11px; }
    #toast { width: max-content; max-width: calc(100% - 24px); text-align: center; }
    .admin-wrap { padding: 15px 10px; }
    .admin-card { padding: 16px 12px; }
    .field-grid { grid-template-columns: 1fr; }
    .admin-topbar, .admin-manage-row { flex-wrap: wrap; }
    #admin-nav { overflow-x: auto; }
    #admin-nav a { flex: 0 0 auto; padding: 10px; }
    #edit-overlay { padding: 12px 6px; }
    #edit-modal { padding: 16px 12px; }
    .year-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
    #menu-bg .menu-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .menu-button a, .menu-button-dark a { font-size: 11px; }
    #image-info h1 { overflow-wrap: anywhere; }
    #bottom-button b { flex-basis: 100%; margin-bottom: 5px; }
    .thumb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .edit-actions { flex-wrap: wrap; }
}