/* CONTENT.
<--1 rootArea-------->
<--2 navArea--------->
<-------------------->
<--10 bottomArea-----> */

/* RegularScreen.
<--LandscapeView----->
<-------------------->
<-------------------->
<--MobileVersion-----> */

/* The *override works vs. [data-theme] switching */
* {--co-two: hotpink;
--co-three: midnightblue;
--co-four: green;
--co-five: white; /* (for plain text, along with bold). */
--co-six: transparent; /* (for nav-bg region; link-bottom on hover). */
--co-seven: #445;
--co-eight: gray;
--co-ten: transparent; /* (for nav-bg region; link-bottom on hover). */
--co-li: white; /* (for links). */
--max-wide: 90%;
--max-wide2: 80%; /* img */ }
/* campblue #1b1b32; consoleblue #0A0A23; #2A2A40 or #2A2B40; */

/* Setting base font size of 10px makes easy rem calculations;
so JUST CHANGE this root rem setting for font overall look;
Info: 1rem = 10px, 1.7rem = 17px, 2rem = 20px */
:root { font-size: 10.8px; }
* { font-family: sans-serif;
color: var(--co-co);
background-color: var(--co-one);
box-sizing: border-box; }
html { overflow-x: hidden; }

:root,
[data-theme="light"] {
  --co-one: #ddd; /* bg one */
  --bg-secondary: #f4f5f7;
  --co-co: #1a1a1a; /* text */
  --text-secondary: #4a4a4a;
  --accent: #2563eb;
  --high: #fff4a4; /* highlights */
  --border: #e0e0e0;
  --card-bg: #1a1a1a;
  --shadow: rgba(0, 0, 0, 0.08);
  --co-nine: var(--co-co);
}

[data-theme="dark"] {
  --co-one: #121212; /* bg one */
  --bg-secondary: #1e1e1e;
  --co-co: #f0f0f0; /* text */
  --text-secondary: #b0b0b0;
  --accent: #60a5fa;
  --high: var(--accent); /* highlights */
  --border: #333333;
  --card-bg: #1a1a1a;
  --shadow: rgba(0, 0, 0, 0.4);
  --co-nine: lightGreen;
}

/* Nav area with both logo and navigation.
<-------------------->
<-------------------->
<--------------------> */

.site-header { position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; z-index: 1000;
  background-color: var(--bg-secondary);
  display: flex; align-items: center;
  justify-content: flex-start;
  padding: 1rem 1.5rem;
  gap: 1rem; }

.site-header .logo { font-weight: 700;
  font-size: 1.7rem;
  text-decoration: none;
  margin-right: auto;
  color: var(--co-co, #1a1a1a);
    background-color: var(--bg-secondary); }

/* justify-content: center; if want links top-center */
#nav-links { display: flex; gap: 1.5rem; 
flex: 1; justify-content: flex-end;
background-color: var(--bg-secondary);
margin: 0 20px 0 0; }

#nav-links a {  text-decoration: none;
font-size: 1.7rem; font-weight: 100;
  background-color: var(--bg-secondary);
  color: var(--co-co, #1a1a1a); }

#nav-links a:hover { color: var(--accent, #2563eb); }

#menu-toggle,
#theme-toggle { background: none;
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1.1rem; }

/* Hamburger hidden by default on wider screens */
#menu-toggle { display: none; }
@media (max-width: 768px) { #menu-toggle {
display: block; }
#nav-links { display: none;
font-size: 1.7rem;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background: var(--bg-secondary, #fff);
    border-bottom: 1px solid var(--border, #ccc); }
#nav-links.nav-open { display: flex; } }



/* Body (Main) area.
<-------------------->
<-------------------->
<--------------------> */

html { margin: 0; padding: 0; }
body { margin: 0; padding: 0;
position: relative; height: 100vh;
/* border: solid 2px blue */;
background-color: var(--co-one); }
*, :root, body, main, h1, h2, p, b, .site-footer, .footer-links, .footer-links a { background-color: var(--co-one);
transition: background-color 0.8s ease, color 0.8s ease; }
/* Body 0 marg/pad; without means bar on bottom gets pushed up bit, since natural body dimension. */

body { /* Leave blank default as much as can, and control main. */ }
main { max-width: var(--max-wide); overflow: hidden; margin: 48px 24% 48px 8%; padding: 2%; font-size: 1.7rem; /* border: dotted 2px hotpink; */}
@media (max-width: 768px) { main { overflow: hidden; margin: 48px 5%; padding: 2%; font-size: 1.7rem; /* border: dotted 2px hotpink; */} }
@media (max-width: 1200px) { main { overflow: hidden; margin: 48px 5%; padding: 2%; font-size: 1.7rem; /* border: dotted 2px hotpink; */} }
/* Why "display" set as important, because nav smallscreen has no display for <main> when active; therefore can switch states while nav active, switching to display on large state here, without having to turn off the nav button. */

.card { background-color: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow); }

h1 { font-size: clamp(2rem, 5vw, 3.4rem);
color: var(--co-co);
margin: 2px 0; max-width: var(--max-wide); }

.subhead { font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--co-nine); margin: 10px 0 14px 0; }

h2 { font-size: 2.8rem;
color: var(--co-co);
max-width: var(--max-wide);
text-align: none; }

h3 { max-width: var(--max-wide); }

p { font-size: 2rem; max-width: var(--max-wide);
color: var(--co-co); line-height: 3.2rem; }

ol, ul { max-width: var(--max-wide); }

li { margin: 1.4em 0; }

ol li, ul li { font-size: 2rem; color: var(--co-co); line-height: 3.2rem; }

ul.non li { list-style-type: none;   /* erases the default bullet */
position: relative; padding-left: 1.8em; /* room for the custom marker */
margin: 1.4em 0; color: var(--co-nine); /* li text colored */ }
ul.non li::before { content: "✓"; /* swap for whatever symbol/text you want */
font-size: 2rem; position: absolute; left: 0; color: var(--co-nine); font-weight: 700; }

a { color: var(--accent); font-weight: 700; }

/* "/area/image/here.webp" may not display when opening HTML directly as local file:// page; should work correct once uploaded to website server.
Try from cmd line of being in site directory, then "python3 -m http.server 8000", after going open web brower "http://localhost:8000/";
so images and theme switch both work better with local storage and right paths with local server and not just local. */
img { max-width: var(--max-wide2);
height: auto;
margin: 4rem 0;
display: block;
border-radius: 10px; }

@media (max-width: 1200px) {
img { max-width: 98%; } }
@media (max-width: 768px) {
img { max-width: 98%; } }

/* HIGHLIGHTED WORDS BEGIN */

.highlight {
  background: var(--high);
  color: var(--co-co);
  padding: 0 2.8px;
  border-radius: 4px;
  font-weight: 700; }
  
  
  
  
/* BEGIN MEDIA ASSETS PRESENTATION */

.showcase { width: 98%; margin: 2rem auto;
/* border: dotted 4px green; */ }
.showcase h2,
.showcase p,
.showcase ul { margin: 0 7%; padding: 0.2%; }
.showcase ul li { font-size: 0.4rem; }

.asset-trio { display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem; margin: 0.7rem 2rem; }

.asset-trio img { width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 2px 8px var(--shadow);
display: block; }

.asset-double { display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem; margin: 0.7rem auto;
max-width: 88%; }
.asset-double img { width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 2px 8px var(--shadow);
display: block; }

.asset-wide { display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem; margin: 1.5rem 0;
max-width: 95%; }
.asset-wide img { width: 100%;
aspect-ratio: 1200 / 630;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 2px 8px var(--shadow);
display: block; }

.asset-banners { display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 1.4rem; margin: 1.4rem;
max-width: 98%; }
.asset-banners img { width: 100%;
aspect-ratio: 1200 / 400;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
box-shadow: 0 2px 8px var(--shadow);
display: block; }

.asset-trio,
.asset-double,
.asset-wide,
.asset-banners {
  justify-items: center;
  align-items: center;
}

@media (max-width: 640px) {
.asset-trio,
.asset-double,
.asset-wide,
.asset-banners {
grid-template-columns: 1fr; } }




/* END MEDIA ASSETS PRESENTATION */



  
  
  




/* index page image-change with CSS only; just exists off the JS theme switch */
.img-index { content: url("../image/lamb-fixes-hvac-system.webp"); /* light, default */ }
[data-theme="dark"] .img-index { content: url("../image/lamb-reading-about-draftnook.webp"); }

/* STILL UNUSED HERE, would be nice same-image effect/s; CSS only but exists off the JS theme switch */
/* Base: smooth transition for any image that responds to theme */
.img-theme { transition: filter 0.8s ease; }
/* Dark mode: applies to every element with .img-theme, site-wide */
[data-theme="dark"] .img-theme { filter: brightness(0.8) contrast(1.04) saturate(0.8); }




/* FOOTER SECTION BEGIN */

.site-footer { width: 100%;
  background: var(--bg-secondary);
  color: var(--co-one);
  font-size: 1.4rem;
  text-align: center;
  margin-top: auto;
  padding: 20px 14px; }
.site-footer p {
  color: var(--co-co);
  background: var(--bg-secondary);
  font-size: 1.7rem;
  margin: 0 auto;
  max-width: none;
  text-align: center;
  padding: 10px 10px;
  /* the copyright area here */
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 8px;
  background: var(--bg-secondary);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 580;
  background: var(--bg-secondary);
}

.footer-links a:hover { text-decoration: none;
background: var(--bg-secondary); }



/* Mobile version.
<-------------------->
<-------------------->
<--------------------> */

@media screen and (max-width: 768px) {
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
p { font-size: 1.7rem; }
.site-footer { font-size: 1.2rem; } /* links line */
.site-footer p { font-size: 1.4rem; } /* copyright line */
ol li, ul li { font-size: 1rem; }
.subhead { font-size: 1.4rem; }
ul.non li { font-size: 1.4rem; } }