/* Variables */
:root {
  --bg-dark: #0d1117;
  --bg-light: #ffffff;
  --text-light: #000000;
  --link-blue: #58a6ff;
  --sidebar-width: 300px; /* Sidebar width at or above viewport width 800px. Below 800px: one column. */
}

@font-face {
  font-family: "OpenSansVar";
  src: url("OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;  /* allows all weights */
  font-stretch: 75% 125%; /* allows width variation */
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'OpenSansVar', sans-serif;
  color: var(--text-light);
  background: var(--bg-light);
}

/* mobile-first (one-column) */
.app-container {
  display: grid;
  grid-template-areas:
    "nav"
    "content"
    "footer"
    "social";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
}
.sidebar       { grid-area: nav; }
.content       { grid-area: content; }
.page-footer   { grid-area: footer; }
.sidebar-footer{ grid-area: social; }

/* Sidebar */
.sidebar {
  background: var(--bg-light);
  color: var(--text-light);
}
.sidebar-header { padding: 1.5rem; }
.sidebar-header .logo {
  color: var(--link-blue);
  font-size: 1.25rem;
  text-decoration: none;
  font-weight: bold;
}
.sidebar-nav ul {
  list-style: none;
}
.sidebar-nav li {
  margin: 0;
  width: 100%;
}
.sidebar-nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--text-light);
  text-decoration: none;
  text-align: center;
}
/*.sidebar-nav a:hover {
  background: rgba(88, 166, 255, 0.1);
  color: var(--link-blue);
}*/
.sidebar-footer {
  margin-top: auto;
  /*padding: 1rem 1.5rem;*/
}
.sidebar-footer .social-links {
  list-style: none;
  display: flex;
}
/*.sidebar-footer .social-links li + li {
  margin-left: 1rem;
}*/
.sidebar-footer a {
  color: var(--text-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.sidebar-footer a:hover {
  /*color: var(--link-blue);
  background-color: rgba(88, 166, 255, 0.1);*/
}

/* Content & Footer */
.content {
  flex: 1;
  padding: 1.5rem;
  background: var(--bg-light);
}
.page-footer {
  margin-top: 2rem;
  border-top: 2px solid #e1e4e8;
  padding-top: 1rem;
  color: #6a737d;
  font-size: 0.875rem;
}
.page-footer .footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.page-footer .footer-links li + li {
  margin-left: 1rem;
}
.page-footer a {
  color: var(--text-light);
  text-decoration: none;
}
.page-footer a:hover { 
    /*color: var(--link-blue);*/
}

/* Mobile-first: Sidebar becomes top nav */
.sidebar {
  width: 100%;
}
.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sidebar-nav a { padding: 0.75rem; }

/* CONTENT */
.content h1 {
    padding-bottom: 2rem;
}
.content h2 {
    /*padding-top: 2rem;*/
    padding-bottom: 1rem;
}
.content h3 {
    padding-top: 1rem;
    padding-bottom: .5rem;
}
.content p,
.content ul {
    padding-bottom: 1rem;
    line-height: 1.5;
}
.content ul {
  list-style-position: inside;
  padding-left: 0;   /* remove gutter */
  margin-left: 0;
}

/* Image container styling */
.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.image-container img {
  flex: 1 1 50%;
  height: auto;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Content after images */
.content h1 + .image-container {
  margin-bottom: 1rem;
}

/* END CONTENT */


/* desktop (two-column) */
@media (min-width: 800px) {
  .app-container {
    grid-template-areas:
      "nav    content"
      "social content";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: auto 1fr;
    width: calc(100% - 40px);
    max-width: calc(var(--sidebar-width) + 800px);
    margin: 20px auto;
    min-height: auto;
  }


  .sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    /* Use static positioning for centering with content */
    position: static;

  }

  .sidebar-footer {
    margin-top: 0;
  }

  /* right-align the link text in your vertical sidebar nav */
  .sidebar-nav ul li a {
    text-align: right;
  }

  /* push the social icons to the far right edge */
  .sidebar-footer .social-links {
    justify-content: flex-end;
    margin-top: 1rem;
    border-top: 2px solid #e1e4e8;
    padding-top: 1rem;
    color: #6a737d;
  }

  .content {
    padding: 2rem;
    flex: 1;
    max-width: 800px;
    margin: 0;
  }

    
  /* Desktop image styling */
  .image-container {
    margin: 0 0 2rem 2rem;
    float: right;
    width: 50%;
  }
  
  .image-container img {
    max-width: 100%;
  }

  /* Ensure text wraps properly on desktop */
  .content h1 + .image-container {
    margin-bottom: 1rem;
  }
}

/* wide desktop (centered two-column) */
@media (min-width: 1100px) {

}