/*
    Learning CSS: via reading CSS 
    -----------------------------
    selector {
        property: property value;        
    } <-- This entire block is a declaration 

    Property conflicts: 
*/ 
:root { 
    --header-color: #B8401E;
    --bgc: #f9f9f9;
}

/* Header Title - Styles for the main site title at the top */
h1.site-title {
    font-size: 2.5em;
    color: #B8401E;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}
 
/* Header Title Links - Make links in the title inherit the title color */
h1 a{
    color: inherit;
}

/* Header Title Hover - Add underline when hovering over title links */
h1 a:hover {
    text-decoration: underline;
}

/* Base - Basic styles for the whole page body */
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    background-color: var(--bgc);
    color: #333;
    margin: 0;
    padding: 0;
}

/* Links - Styles for all links on the page */
a {
    color: #000000;
    text-decoration: underline;
}

/* Links Hover - What happens when you hover over links */
a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Navigation - Styles for the menu bar at the top */
nav {
    text-align: center;
    margin: 0rem 0.5rem;
    white-space: nowrap;
}

/* Navigation Links - Styles for links in the navigation menu */
nav a {
    color: #000000;
    text-decoration: underline;
    margin: 0 0.5rem;
    padding: 0.25rem;
}

/* Active Navigation Link - Styles for the current page link in navigation */
nav a.active {
    color: #B8401E;
    text-decoration: underline;
}

/* Active Navigation Hover - What happens when hovering over active nav links */
nav a.active:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Layout - Styles for the main content area and header/footer */
main {
    max-width: 60ch;
    margin: 1rem auto 0 auto;
    padding: 1rem;
}

header, footer {
    max-width: 60ch;
    margin: 0 auto;
    padding: 0rem;
    text-align: center;
}

/* Margin Notes - Styles for notes with left margin */
.note {
    position: relative;
    font-size: 0.9em;
    color: #666;
    margin-left: 5ch;
}

/* Code Blocks - Styles for code snippets */
code {
    font-family: "Courier New", Courier, monospace;
    background-color: #eaeaea;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}

/* Footer - Styles for the bottom of the page */
footer {
    font-size: 0.8em;
    color: #999;
    border-top: 2px solid #000;
    margin-top: -0.5rem;
    padding-top: 0rem;
}

/* Articles - Styles for paragraphs in articles */
article p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

article p span {
    display: inline-block;
    margin-right: 1rem;
    font-style: italic;
    color: #666;
}

/* Metadata Box - Styles for info boxes with details */
.metadata-box {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.metadata-box span {
    font-size: 0.9em;
    color: #333;
}

/* Main Text - Styles for bold text in paragraphs */
p b {
    color: #000000;
    font-weight: bold;
}

/* Heading 2 - Reduce bottom margin for h2 elements */
h2 {
    margin-bottom: 0rem;
}