/* caim-light.css - Light theme overrides for Widoco page to match Common Approach Blog styling */

/* --- Import Google Fonts (Ideally, do this in the HTML head) --- */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&family=Work+Sans:wght@400;500;600;700;800&display=swap'); */

/* --- Global Styles & Typography --- */
body {
    font-family: 'Work Sans', 'Open Sans', Arial, sans-serif;
    font-size: 16px; /* Blog uses 14px in body, but content areas often larger */
    color: #333333; /* Main text color from blog's common content */
    background-color: #ffffff; /* White background similar to blog content areas */
    line-height: 1.7em;
    font-weight: 400; /* Blog uses 500, but 400 is common for body */
    padding-top: 20px; /* Adjust as needed, blog has complex header */
}

.container {
    max-width: 1080px; /* Consistent with blog */
    margin: 0 auto;
    padding-left: 20px; /* Add some padding */
    padding-right: 20px;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Work Sans', 'Open Sans', Arial, sans-serif;
    color: #333333;
    padding-bottom: 15px; /* Increased from blog's 10px for better spacing */
    line-height: 1.3em; /* From blog's .et_pb_text_0 h1 */
    font-weight: 700; /* Blog uses varying weights, 700 is a good bold */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 { font-size: 36px; font-weight: 800; } /* From blog's .et_pb_text_0 h1 */
h2 { font-size: 30px; font-weight: 700; } /* From blog's .et_pb_text_0 h2 */
h3 { font-size: 24px; font-weight: 600; } /* From blog's .et_pb_text_0 h3 */
h4 { font-size: 20px; line-height: 1.3em; } /* From blog's .et_pb_text_0 h4 */
h5 { font-size: 17px; font-weight: 600; } /* From blog's .et_pb_text_0 h5 */
h6 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } /* From blog's .et_pb_text_0 h6 */

/* Widoco specific list headings for TOC */
h2.list, h3.list {
    border-bottom: none; /* Remove Widoco's border */
    margin-top: 20px;
}
h2.list:before, h3.list:before {
    color: #333333; /* Ensure counter color matches heading */
}


/* --- Paragraphs & Text --- */
p {
    padding-bottom: 1em;
    color: #333333; /* Main content text color */
    line-height: 1.7em; /* From blog */
}

p:last-of-type {
    padding-bottom: 0;
}

/* --- Links --- */
a, a:link {
    color: #f58a3b; /* Accent color from blog's subscribe button / text links */
    text-decoration: none;
}

a:visited {
    color: #d4722c; /* Darker shade for visited */
}

a:hover, a:active {
    color: #c05a1e; /* Even darker for hover/active */
    text-decoration: underline;
    opacity: 1; /* Blog uses opacity for menu, but underline is clearer here */
}

/* --- Widoco Specific Section Styling --- */
div.head {
    background-color: #f8f8f8; /* Light grey for header section */
    padding: 20px;
    margin-bottom: 2em;
    border-bottom: 1px solid #e0e0e0;
}

div.head h1 {
    margin-top: 0;
    color: #1B4B9D; /* Blue from blog footer for main title */
}

dl {
    background: transparent; /* Override Widoco's --bg-hlist */
    border: none;
    margin-bottom: 1em;
}

dt {
    font-weight: 700; /* Blog style for strong text */
    color: #333333;
    margin-top: 10px;
}

dd {
    margin-left: 20px;
    margin-bottom: 5px;
}

/* Status box - make it less obtrusive */
.status {
    position: static; /* Remove fixed positioning */
    transform: none;
    width: auto;
    height: auto;
    z-index: auto;
    opacity: 1;
    text-align: left;
    margin-bottom: 1em;
    padding: 0;
    border: 1px solid #FF8B3D; /* Blog's orange accent */
    background: #fff7f0; /* Light orange background */
}

.status div {
    background: transparent; /* Override Widoco's specific background */
    color: #333333; /* Dark text */
    width: auto;
    padding: 0.5em 1em;
    text-align: center;
}

.status div span {
    font-family: 'Work Sans', 'Open Sans', sans-serif;
    font-size: 1em; /* Normal size */
    font-weight: 600;
}

/* Lists and Cross-references */
.hlist {
    border: 1px solid #e0e0e0; /* Lighter border */
    padding: 10px;
    background-color: #f9f9f9; /* Very light grey */
    margin-bottom: 1em;
}

.hlist li {
    padding-right: 15px;
}

.entity {
    border: 1px solid #e7e7e7;
    margin: 10px 0px;
    padding: 15px;
    background-color: #ffffff;
}

.description {
    border-top: 1px dashed #cccccc;
    border-bottom: 1px dashed #cccccc;
    background-color: #fdfdfd; /* Almost white */
    margin-top: 10px;
    padding: 10px;
}
.description dl {
    background-color: transparent;
}

.backlink {
    font-size: 0.85em;
    text-align: right;
    float: none; /* Prefer inline or block display for better flow */
    display: block;
    margin-top: 5px;
    color: #f58a3b;
    padding: 0;
    border: none;
    background-color: transparent;
}
.backlink a {
    color: #f58a3b;
}

/* Tables */
table {
    border: 1px solid #e0e0e0; /* Lighter border like blog tables */
    margin: 20px 0; /* Remove side margin from Widoco */
    width: 100%; /* Consistent width */
    background-color: #ffffff; /* White background */
}

table th, table td {
    padding: 9px 15px; /* Adjust padding */
    text-align: left;
    border-top: 1px solid #e0e0e0;
}

table th {
    background-color: #f5f5f5; /* Light grey for table headers */
    color: #333333;
    font-weight: 700;
}

/* Code and Preformatted Text */
pre, div.fssyntax pre, div.rdfxml pre, div.owlxml pre, div.turtle pre, div.manchester pre {
    background-color: #f9f9f9; /* Light grey background */
    border: 1px solid #cccccc; /* Softer border */
    color: #333333;
    line-height: 1.5em; /* Improved readability */
    padding: 1em;
    margin: 1em 0; /* Adjust margin */
    overflow-x: auto; /* Ensure horizontal scroll for long lines */
    border-radius: 4px; /* Rounded corners from blog */
}

code {
    font-family: Menlo, Consolas, monaco, monospace; /* Blog's code font */
    background-color: #f0f0f0; /* Slightly different for inline code */
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.9em;
}

pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Widoco specific class styling */
.RFC2119 { /* Keep Widoco's styling, seems fine */
  text-transform: lowercase;
  font-style: italic;
}
.nonterminal { /* Keep Widoco's styling */
    font-weight: bold;
    font-family: sans-serif;
    font-size: 95%;
}
.name { /* For monospace names */
    font-family: Menlo, Consolas, monaco, monospace;
    color: #c7254e; /* A common color for code/names */
}
.literal {
    color: #008000; /* Green, consistent with blog style for literals if any */
    font-style: italic;
}

/* Type indicators in Widoco */
.type-c { color: #d9534f; font-weight: bold; } /* Class - reddish */
.type-op { color: #007bff; font-weight: bold; } /* Object Property - blueish */
.type-dp { color: #5cb85c; font-weight: bold; } /* Data Property - greenish */
.type-ap { color: #f0ad4e; font-weight: bold; } /* Annotation Property - orangish */
.type-ni { color: #5bc0de; font-weight: bold; } /* Named Individual - cyanish */


/* --- Dark Mode Toggle (from Widoco slider.css) - Basic Position, actual styling in slider.css --- */
.darkmode {
    position: fixed;
    left: 10px; /* Adjusted for better placement */
	bottom: 10px;
    z-index: 1000; /* Ensure it's above other content */
}

/* Ensure container has some space from fixed darkmode toggle */
body {
    padding-bottom: 60px; /* Space for the toggle if it's at the bottom */
}