/* .css for https://www.cbeaume.com */
/* To be imported by cbeaume2026.css */
/* Author: Cédric Beaume */
/* Date: 2026 */


/* ==== Main ==== */

#main {
  max-width: 1000px;
  margin: 0 auto; /* no margins at the top and bottom but centers horizontally */
  border: 1px solid var(--border-color);
  border-radius: 1em; /* rounded corners */
  overflow: hidden; /* hides overflow, useful for rounded corners */
  background: var(--text-background);
  box-shadow: 0 2px 18px rgba(0,0,0,0.08);
}

.text {
  max-width: 70ch;
  margin: 0 auto;
}


/* ==== Header ==== */

#top {
  height: 160px;
  position: relative; /* necessary for the hamburger menu */
  border-bottom: 1px solid var(--border-color);
  background-image: url("images/banner_drysaltlakepattern.webp");
  background-size: cover; /* image covers the whole container */
  background-position: center;
}

#top::after { /* overlays slightly opaque layer to soften blacks */
  content: "";
  position: absolute; 
  inset: 0; /* top, right, bottom, left: 0 */
  background: rgba(240, 240, 238, 0.25); /* (r,g,b,opacity) */
}


/* ==== Footer ==== */

#bottom {
  padding: var(--space-0) 0;
  background: var(--secondary-background);
}

#bottom p {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-bottom);
  font-weight: bold;
}
    

/* ==== Layout ==== */

#layout {
  display: flex; /* to stack sidebar and content horizontally */
}


/* ==== Sidebar ==== */

#sidebar {
  width: 260px;
  padding: var(--space-3);
  flex-shrink: 0; /* prevents compression of the sidebar */
  background: var(--secondary-background);
}

nav {
  line-height: 1.4;
}

nav a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  color: var(--nav-link-color);
  margin-bottom: var(--space-0);
}

.nav-group {
  margin-bottom: var(--space-3);
}

.nav-group:last-child {
  margin-bottom: 0; /* to avoid space below the last nav-group */
}

nav a:hover {
  text-decoration: underline;
  color: var(--nav-link-hover-color);
}

.portrait {
  text-align: center;
}

.portrait-image {
  width: 100%;
  position: relative;
  z-index: 10;
  padding: var(--space-1);
  border-radius: 1em;
  background: var(--secondary-background);
  transform: translateY(var(--portrait-overlap)) scaleX(-1);
  margin-bottom: var(--portrait-overlap);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}


/* ==== Content ==== */

#content {
  flex: 1; /* take remaining available width */
  padding: var(--space-3) var(--space-4);
  min-width: 0; /* trick to avoid overflowing content */
}


/* ==== Hamburger System ==== */

#menu-toggle {
  display: none; /* invisible checkbox */
}

#hamburger {
  display: none; /* does not show by default */
}