/* --- IE9 Fallback Variables (Hardcoded Alternative) --- */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Safe fallback font stack including Comic Sans from your previous requests */
    font-family: "Comic Sans MS", "Comic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background-color: #0b0f19; /* fallback for --bg-color */
    color: #f3f4f6; /* fallback for --text-primary */
    line-height: 1.5;
    padding: 20px; /* IE9 prefers px over rem for container spacing stability */
}

/* Form & Layout adjustments */
form {
    background: #161e2e; /* fallback for --surface-color */
    border: 1px solid #2a374a; /* fallback for --border-color */
    padding: 20px;
    border-radius: 12px; /* fallback for --radius */
    margin-bottom: 20px;
    
    /* IE9 Flexbox Fallback */
    display: block;
}

/* Float styling so inputs align horizontally in IE9 */
form input[type="text"], 
form select, 
form button,
form .ie9-btn-link {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-bottom: 10px;
}

input[type="text"], select {
    background: #0b0f19;
    border: 1px solid #2a374a;
    color: #f3f4f6;
    padding: 8px;
    border-radius: 6px;
    height: 34px; /* Explicit height ensures layout consistency in IE9 */
}

/* Standard Button & Link styled as Button for IE9 */
button, .ie9-btn-link {
    background: #3b82f6; /* fallback for --primary */
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

button:hover, .ie9-btn-link:hover {
    background: #2563eb; /* fallback for --primary-hover */
}

/* Featured Section ("I Am Rich") */
.featured-section {
    /* Multi-layered fallback gradient approach for older rendering engines */
    background: #101726; 
    background: -webkit-linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    background: -o-linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #3b82f6; /* IE9 doesn't support alpha values like 44 inside hex codes */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.featured-section h3 {
    color: #60a5fa;
    margin-bottom: 4px;
}

.featured-section p {
    color: #9ca3af; /* fallback for --text-secondary */
    font-size: 14px;
    margin-bottom: 12px;
}

.featured-section a {
    color: #10b981; /* fallback for --accent */
    font-weight: 600;
    text-decoration: none;
}

.featured-section a:hover {
    text-decoration: underline;
}

/* Entry Cards Grid Fallback */
#content {
    /* IE9 Block/Float fallback framework */
    display: block;
    width: 100%;
}

/* Micro-clearfix utility for structural stability in IE9 */
#content:after {
    content: "";
    display: table;
    clear: both;
}

.entry {
    background: #161e2e;
    border: 1px solid #2a374a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    
    /* Simulating layout structures without Flexbox */
    display: block;
    float: left;
    width: 100%; /* Adjust container rules or change to a precise float percentage if side-by-side elements are needed */
}

.entry img {
    float: left;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #0b0f19;
}

.entry .info {
    margin-left: 80px; /* Pushes content cleanly to the side of the floated thumbnail image */
    font-size: 14px;
    color: #9ca3af;
}

.info h4 {
    color: #f3f4f6;
    font-size: 16px;
    margin-bottom: 4px;
}
