html, body {
  height: 100%;
  margin: 0;
  line-height: 1.2; 
  font-family: 'Times New Roman', Times, serif;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

p {
    margin-top: 0;
    margin-bottom: 0.7em;
}

hr {
    display: block;
    border: none;
    border-top: 1px solid black;
    height: 0;
    margin: 1em 0;
}

h1, h2, h3 {
    margin: 0.25em 0 0.25em;
}

/* header can be any height */
.header {
  height: 80px;
  background-image: url("banner.jpg");
  background-repeat: repeat-x;
  background-position: center;
  background-color: #333;
  /*padding: 1rem;*/
}
.content-banner {
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

.content-banner img {
  height: 30px;
}

/* takes remaining height */
.container {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;                 /* IMPORTANT */
}

/* sidebar is independently scrollable */
.sidebar {
  width: 250px;
  background: #ececec;
  padding: .5rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* your “one link per line” behavior */
.sidebar a {
  display: block;
  padding: 0.1rem;
  margin-bottom: 0.1em;
  color: #333;
  text-decoration: none;
}

a {
  color: #333;              /* or whatever your preferred link colour is */
  text-decoration: block;    /* if you don’t want underlines globally */
}

a:visited {
  color: #333;              /* same as normal */
}

  .sidebar a:hover {
      background: #999;
    }

/* main area fills remaining space */
.content {
  flex: 1 1 auto;
  min-width: 0;                  /* helps flex + iframe sizing */
  min-height: 0;                 /* IMPORTANT */
  padding: 0.5rem;
  box-sizing: border-box;
}

/* iframe fills the content pane */
.content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.site-title {
  text-decoration: none;
  color: inherit;
}

.site-title:hover {
  text-decoration: none;
}

.site-header {
  background: #f4f4f4;
  border-bottom: 1px solid #ccc;
  padding: 15px 20px;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header a {
  text-decoration: none;
  font-weight: bold;
}

.site-header a:hover {
  text-decoration: underline;
}

/* --- Responsive adjustment for phones --- */
/* Hide the toggle button on desktop */

.sidebar-toggle {
  display: none;
}

/* Mobile-only behaviour */
@media (max-width: 768px) {

  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    max-height: none;   /* remove the 40vh limit if you had one */
  }

.sidebar-toggle {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
}

  /* Hide links by default on mobile */
  .sidebar-links {
    display: none;
  }

  /* Show links when sidebar has class "open" */
  .sidebar.open .sidebar-links {
    display: block;
  }

}