/* =========================================================
   blog.css — The Blog: Windows 98, cute & y2k-tropical
   Sharp edges, classic 3D bevels, lighter teal desktop.
   Aqua + pink lead; spring green & mango accents.
   Load after tokens + base.
   ========================================================= */

.blog-body {
    /* lighter teal desktop (was darker) + faint grid + tropical light blooms */
    background-color: var(--green-pale);
    background-image:
        linear-gradient(rgba(40,167,163,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,167,163,0.08) 1px, transparent 1px),
        radial-gradient(circle at 82% 12%, rgba(255,105,180,0.30), transparent 42%),
        radial-gradient(circle at 12% 88%, rgba(129,223,154,0.40), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,166,77,0.10), transparent 60%);
    background-size: 26px 26px, 26px 26px, 100% 100%, 100% 100%, 100% 100%;
    min-height: 100vh;
    margin: 0;
}

.desktop {
    position: relative;
    min-height: 100vh;
    padding: var(--page-top-pad) 1.5rem 70px;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-areas: "icons main";
    gap: 1.5rem;
    align-items: start;
}

/* ======== DESKTOP ICONS ======== */
.desk-icons {
    grid-area: icons;
    display: flex; flex-direction: column; gap: 1.2rem;
}
.desk-icon {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    text-decoration: none; font-weight: normal;
}
.icon-label {
    font-family: var(--font-body);
    font-size: 0.85rem; color: var(--title-color);
    text-shadow: 0 1px 0 #fff;
    text-align: center; padding: 1px 4px;
}
.desk-icon:hover .icon-label,
.desk-icon:focus-visible .icon-label {
    background: var(--link-color); color: #fff;
    text-shadow: none;
    outline: 1px dotted var(--title-color);
}

/* pixel-ish icons: sharp corners, hard 3D edge */
.icon-glyph {
    width: 44px; height: 38px;
    display: block; position: relative;
    image-rendering: pixelated;
}
.icon-folder {
    background: var(--mango);
    border: 2px solid var(--title-color);
    border-right-color: var(--mango-deep);
    border-bottom-color: var(--mango-deep);
}
.icon-folder::before {
    content: '';
    position: absolute; top: -7px; left: 2px;
    width: 20px; height: 8px;
    background: var(--mango);
    border: 2px solid var(--title-color);
    border-bottom: none;
}
.icon-doc {
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 6px,
            var(--header-teal) 6px 8px,
            transparent 8px 12px
        ),
        #fff;
    background-position: 6px 5px;
    background-repeat: no-repeat;
    background-size: calc(100% - 12px) calc(100% - 10px);
    border: 2px solid var(--title-color);
}
.icon-home {
    background: var(--link-color);
    border: 2px solid var(--title-color);
}
.icon-home::before {
    content: '';
    position: absolute; top: -8px; left: 50%;
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 9px solid var(--link-hover);
    transform: translateX(-50%);
}
.icon-heart {
    width: 38px; height: 34px;
    position: relative;
    background: transparent;
    border: none;
    margin: 2px auto 0;
    /* one clean heart, drawn as SVG: pink fill, deep-pink outline */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 28 L4 15 A7 7 0 0 1 16 6 A7 7 0 0 1 28 15 Z' fill='%23ffc0cb' stroke='%23c71585' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ======== WINDOWS (sharp 3D bevel) ======== */
.win {
    background: var(--widget-bg);
    border: 2px solid;
    /* classic raised bevel */
    border-color: #ffffff var(--title-color) var(--title-color) #ffffff;
    box-shadow:
        inset 1px 1px 0 var(--green-pale),
        4px 4px 0 rgba(0,77,64,0.4);
    /* NO border-radius — sharp corners */
}
.win-main { grid-area: main; }

.title-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px;
    background: linear-gradient(90deg, var(--header-teal), var(--green-deep));
    color: #fff;
}
.title-bar-pink {
    background: linear-gradient(90deg, var(--link-hover), var(--link-color));
}
.title-bar-text {
    font-family: var(--font-western);
    font-size: 1rem; letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.title-bar-buttons { display: flex; gap: 3px; }
.tb-btn {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-mid);
    border: 2px solid;
    border-color: #fff var(--title-color) var(--title-color) #fff;
    font-size: 0.7rem; color: var(--title-color);
    /* sharp */
}
.tb-close { background: var(--mango); }

.win-menu {
    display: flex; gap: 1.1rem;
    padding: 3px 8px;
    background: var(--green-pale);
    border-bottom: 2px solid var(--header-teal);
    font-family: var(--font-body);
    font-size: 0.95rem; color: var(--title-color);
}
.win-menu span:first-letter { text-decoration: underline; }

.win-body { padding: 1.2rem 1.3rem 1.4rem; }

.blog-intro {
    font-family: var(--font-hand);
    font-size: 1.5rem; color: var(--link-hover);
    margin: 0 0 1.2rem; text-align: center;
}

/* ======== POST CARDS (inset/sunken panels) ======== */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-card {
    display: flex; gap: 0.9rem; align-items: flex-start;
    background: #fff;
    border: 2px solid;
    /* sunken bevel */
    border-color: var(--title-color) #fff #fff var(--title-color);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    transition: background 0.12s ease;
}
.post-card:hover,
.post-card:focus-within { background: var(--green-pale); }
.post-glyph { flex-shrink: 0; width: 40px; height: 36px; margin-top: 3px; }
.post-title {
    font-family: var(--font-western);
    font-size: 1.3rem; margin: 0 0 0.2rem; font-weight: normal; line-height: 1.1;
}
.post-title a { color: var(--title-color); text-decoration: none; }
.post-title a:hover { color: var(--link-hover); text-decoration: underline; }
.post-date {
    font-size: 0.8rem; color: var(--shadow-color);
    margin: 0 0 0.4rem; text-transform: lowercase; letter-spacing: 0.5px;
}
.post-snip { margin: 0; color: var(--text-color); font-size: 1rem; }

/* ======== floating sticky-note window ======== */
.win-note {
    position: absolute;
    top: 3rem; right: 1.5rem;
    width: 200px;
    transform: rotate(2.5deg);
    z-index: 5;
}
.note-body {
    background: #fff7fb;
    font-family: var(--font-hand);
    font-size: 1.3rem; color: var(--link-hover); line-height: 1.35;
}
.note-body p { margin: 0 0 0.4rem; }

/* ======== TASKBAR (sharp, beveled) ======== */
.taskbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 42px;
    display: flex; align-items: center; gap: 6px;
    padding: 0 8px;
    background: var(--green-mid);
    border-top: 2px solid #fff;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6);
    z-index: 50;
}
.start-btn {
    font-family: var(--font-western);
    font-size: 1.05rem; color: #fff;
    background: linear-gradient(var(--link-color), var(--link-hover));
    padding: 4px 14px;
    border: 2px solid;
    border-color: #fff var(--title-color) var(--title-color) #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.task-open {
    font-family: var(--font-body);
    font-size: 0.95rem; color: var(--title-color);
    background: var(--widget-bg);
    padding: 4px 12px;
    border: 2px solid;
    border-color: var(--title-color) #fff #fff var(--title-color);
}
.tray-clock {
    margin-left: auto;
    font-family: var(--font-body); color: var(--title-color);
    background: var(--green-pale);
    padding: 4px 12px;
    border: 2px solid;
    border-color: var(--title-color) #fff #fff var(--title-color);
}

/* ======== responsive ======== */
@media (max-width: 760px) {
    .desktop {
        grid-template-columns: 1fr;
        grid-template-areas: "icons" "main";
    }
    .desk-icons { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .win-note { position: static; width: auto; transform: rotate(0deg); margin-top: 1.2rem; }
    .task-open { display: none; }
}