/* IGNG Compatibility Site Style */
/* Compatible with CSS 2.1 */

body {
    background-color: #ffffff;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

#header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #cccccc;
    padding: 10px 20px;
}

#logo-link {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 18px;
}

#container {
    padding: 20px;
}

#content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* H1 Header Split */
#content h1 {
    border-bottom: 2px solid #336699;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* H1 Block */
.h1-block {
    margin-bottom: 30px;
}

/* H2 Block styling */
.h2-block {
    background-color: #f7f9fb;
    border: 1px solid #e1e8ed;
    padding: 15px;
    margin-bottom: 20px;
    /* Small rounded corners - progressive enhancement */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.h2-block h2 {
    margin-top: 0;
    color: #336699;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 5px;
}

#footer {
    text-align: center;
    padding: 40px 20px;
    border-top: 1px solid #eeeeee;
    font-size: 12px;
    color: #999999;
}

/* Hover Animations - Section 5 requirement */
/* Simple zoom on hover for supported browsers, fallback to none for very old ones */
p,
h1,
h2,
ul,
li,
a img,
.h2-block {
    transition: transform 0.2s ease;
}

p:hover,
h1:hover,
h2:hover,
ul:hover,
li:hover,
.h2-block:hover {
    /* Scale effect */
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -ms-transform: scale(1.02);
    -o-transform: scale(1.02);
    transform: scale(1.02);
}

/* Dark Mode Extensions */
.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-mode #header {
    background-color: #1f1f1f;
    border-bottom-color: #333333;
}

.dark-mode #logo-link {
    color: #ffffff;
}

.dark-mode .h2-block {
    background-color: #1e1e1e;
    border-color: #333333;
    color: #e0e0e0;
}

.dark-mode .h2-block h2 {
    color: #4a9eff;
    border-bottom-color: #333333;
}

.dark-mode a {
    color: #4a9eff;
}