/* --- Global Settings & Fonts --- */
body {
    /* Modern system font stack */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    /* Global Text Color */
    color: #333; 
    margin: 0;
}

/* Explicitly force bold elements to use the dark grey instead of pure black */
b, strong, th {
    color: #333;
}

/* Ensure these tags inherit the clean font */
h1, h2, h3, h4, p, ul, ol, table, .name, .menulink, .footlink {
    font-family: inherit;
}

/* --- Layout Containers --- */

html { 
    background: url(kochtile.gif) no-repeat center center fixed; 
    -webkit-background-size: auto; 
    -moz-background-size: auto;
    background-repeat: repeat;
    -o-background-size: auto;
    background-size: auto;
}

.wholepage {
    padding: 5px;
    border-color: #16697a;
    border: 2px solid black;
    width: 900px;
    overflow: visible; 
    text-align: left;
    background-color: #fffbf0;
    padding-bottom: 30px;
    margin-bottom: 80px;
    margin-top: 40px;
    /* Added min-height to ensure sidebar fits on short pages */
    /*min-height: 850px;*/
}

/* Margin: Top/Bottom 20px, Left/Right 40px */
.box {
    width: auto;
    margin: 20px 40px; 
}

/* --- Headers --- */

h1 {
    font-size: 22pt;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    letter-spacing: 2px;

    /* Consistent Margins */
    margin-left: 40px; 
    margin-right: 40px;
    margin-top: 30px;
    margin-bottom: 20px;

    /* DOUBLE Teal Underline */
    border-bottom: 4px double #16697a;
    padding-bottom: 5px;

    display: block;
}

h2 {
    font-size: 16pt;
    font-weight: bold;
    color: #333; 
    text-decoration: none;
    letter-spacing: 1px;
    
    margin-left: 40px; 
    margin-right: 40px;
    margin-top: 30px;
    margin-bottom: 15px;
    
    /* SINGLE Teal Underline */
    border-bottom: 1px solid #16697a;
    padding-bottom: 5px;
    
    display: block;
}

h3 {
    font-size: 12pt;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    letter-spacing: 1px;
    
    margin-left: 40px; 
    margin-right: 40px;
    margin-top: 25px;
    margin-bottom: 10px;
    
    display: block; 
}

h4 {
    font-size: 18pt;
    font-weight: bold;
    color: #333; /* Fixed: was #000000 */
    text-decoration: none;
    letter-spacing: 2px;
    
    margin-left: 40px; 
    margin-right: 40px;
    
    display: block;
}

/* --- Text & Lists --- */

p, ul, ol, table {
    color: #333; 
    font-size: 11pt;
    margin-left: 40px; 
    margin-right: 40px;
}

/* Exception for the navbar table */
.menubox {
    margin: 0 !important;
    width: 100%;
}

li {
    padding: 5px 0;
}

ul.no-bullets {
    list-style-type: none;
    margin: 0;
}

/* --- Links --- */

a {
    color: #16697a; /* Teal accent */
    text-decoration: none;
    transition: all .2s;
}

a:hover {
    color: #0e4550;
    text-shadow: none; 
    background-color: #e0f7fa; 
}

/* --- Navigation & Footer --- */

.menubox {
    background-color: #16697a;
    border: 2px solid black;
    text-align: center;
}

.menulink {
    font-size: 12pt;
    color: #fff1c1;
    text-decoration: none;
    letter-spacing: 2px;
    font-family: Courier New, Courier, monospace;
    transition: text-shadow .2s;
}

.menulink:hover {
    color: #fff1c1;
    text-shadow: 0 0 4px #fff1c1;
    background-color: transparent; 
}

.footer {
    background-color: #16697a;
    border: 2px solid black;
    margin: 0px;
    text-align: center;
    font-size: 10pt;
    color: #FFF1C1;
    text-decoration: none;
    letter-spacing: 2px;
    font-family: Courier New, Courier, monospace;
}

.footlink {
    font-size: 10pt;
    color: #FFF1C1;
    text-decoration: none;
    letter-spacing: 2px;
    font-family: Courier New, Courier, monospace;
}

.footlink:hover {
    color: #FFF1C1;
    text-shadow: 0 0 4px #fff1c1;
    background-color: transparent;
}

/* --- Tables & Misc --- */

td {
    vertical-align: top;
}

.schedule {
    color: #333;
    font-size: 10pt;
    border-spacing: 60px 0px;
    line-height: 1.4;
}

.name {
    color: #333;
    font-size: 26pt;
    font-weight: normal;
    letter-spacing: 4px;
    line-height: 1;
}

img {
    border: none;
}

/* --- Code Styling --- */

code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 1em;
}

code {
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 40px 10px 40px; 
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* --- Dropdown Menus --- */

.dropdown-container {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fffbf0;
    border: 2px solid black;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100; 
    text-align: left;
    left: 50%;
    transform: translateX(-50%); 
    margin-top: 5px;
    padding: 0;
}

.dropdown-label {
    padding: 8px 16px;
    display: block;
    background-color: #16697a;
    color: #fff1c1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dropdown-content a {
    color: #000000;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11pt;
    transition: background-color 0.2s ease;
    margin: 0; 
}

.dropdown-content a:hover {
    background-color: #e0f7fa;
    text-shadow: none;
}

.portfolio-dropdown {
    background-color: #DEFFD2;
    font-weight: bold;
}
.portfolio-dropdown:hover {
    background-color: #a8ffd7 !important;
}

.current-course-dropdown {
    background-color: #ffddd2; 
    color: #000000 !important;
    font-weight: bold;
}
.current-course-dropdown:hover {
    background-color: #f7b786 !important;
}