/* ---------------------------------------------------------
   GLOBAL BASE
--------------------------------------------------------- */

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11pt;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  text-decoration: underline;
  color: #CC3333;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Wrapper */
.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 10px 20px;
}

/* ---------------------------------------------------------
   BANNER
--------------------------------------------------------- */

#banner {
  width: 100%;
  border-bottom: thin dashed black;
  padding: 10px 0;
}

#banner a {
  font-weight: 200;
  color: #000000;
  letter-spacing: .5em;
  word-spacing: 1em;
  display: block;
  text-align: center;
}

/* ---------------------------------------------------------
   TOP NAVBAR
--------------------------------------------------------- */

#navbar {
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid #006;
  background-color: rgb(111,191,89);
  text-align: left;
}

#navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

#navbar li {
  display: inline-block;
  border-right: 1px solid black;
}

#navbar li:last-child {
  border-right: none;
}

#navbar ul li a {
  padding: 0 10px;
  color: black;
  font-size: 11pt;
}

/* Top menu toggle (mobile only) */
.top-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  margin: 10px;
}

/* ---------------------------------------------------------
   FLEXBOX LAYOUT
--------------------------------------------------------- */

#pageLayout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 10px;
}

/* ---------------------------------------------------------
   LEFT NAV (DESKTOP)
--------------------------------------------------------- */

#leftNav {
  flex: 0 0 155px;
  padding: 5px;
  background-color: #999999;
  border: 1px solid black;
  color: white;
  font-size: small;
}

#leftNav a {
  color: white;
}

#leftNav a:hover {
  color: #00CC33;
}

#leftNav ul {
  padding: 0;
  margin: 0 0 0 5px;
}

#leftNav ul li {
  list-style: none;
}

.titleNav {
  border-bottom: 1px solid black;
  padding-left: 5px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-top: 10px;
}

.pad5 {
  padding: 5px;
}

/* Left nav toggle button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
   CONTENT AREA
--------------------------------------------------------- */

#content {
  flex: 1;
  padding: 10px;
  border-left: 1px solid #006;
  min-height: 400px;
}

#breadcrumb {
  margin-bottom: 10px;
  font-size: 10pt;
}

/* ---------------------------------------------------------
   NEWS TABLE
--------------------------------------------------------- */

.table {
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.table td {
  border-bottom: 1px dashed #CCCCCC;
  padding: 5px 0;
  white-space: nowrap;
}

.table h2 {
  border: 1px solid black;
  background-color: #00CCFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  padding-left: 5px;
  font-size: 16pt;
  text-align: left;
  color: white;
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

#footer {
  background-color: #fff;
  color: #006;
  border-top: 1px solid #006;
  font-size: smaller;
  padding: 2px 10px 20px 10px;
  clear: both;
  text-align: right;
}

/* ---------------------------------------------------------
   MOBILE STYLES
--------------------------------------------------------- */

@media (max-width: 768px) {

  /* Top menu toggle visible */
  .top-menu-toggle {
    display: block;
  }

  /* Collapse top nav */
  #navbar ul {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
  }

  #navbar.open ul {
    display: flex;
  }

  /* Flex layout stacks */
  #pageLayout {
    flex-direction: column;
  }

  /* Remove ugly grey block */
  #leftNav {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    flex: 1 1 auto;
    width: 100%;
  }

   /* Hide Google CSE injected elements */
  #leftNav form,
  #leftNav iframe,
  #leftNav img,
  #leftNav .gsc-branding,
  #leftNav .gsc-branding-text,
  #leftNav .gsc-branding-img,
  #leftNav .gsc-control-cse,
  #leftNav .gsc-search-box,
  #leftNav .gsc-search-button,
  #leftNav .gsc-results-wrapper-visible {
    display: none !important;
  }

  /* Clean mobile menu container */
  #leftNav nav {
    background: #f5f5f5;
    padding: 10px;
    border-radius: 6px;
  }

  /* Mobile toggle button */
  .menu-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 10px;
    background-color: #333;
    color: white;
    border-radius: 4px;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  /* Hide sections until opened */
  #leftNav nav .titleNav,
  #leftNav nav .pad5 {
    display: none;
  }

  #leftNav nav.open .titleNav,
  #leftNav nav.open .pad5 {
    display: block;
  }

  /* Improve spacing */
  #leftNav nav .titleNav {
    padding: 10px 0 5px;
    font-size: 1.1rem;
    border-bottom: 1px solid #ccc;
  }

  #leftNav nav .pad5 ul li {
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
  }

  #leftNav nav .pad5 ul li:last-child {
    border-bottom: none;
  }

  /* Content full width */
  #content {
    border-left: none;
    padding-left: 0;
    padding-right: 0;
  }
}


@media (max-width: 768px) {

  /* Left nav container — light, clean, visible */
  #leftNav nav {
    background: #eeeeee;      /* light grey */
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  /* Left nav links */
  #leftNav nav a {
    color: #333 !important;
  }

  /* Section titles */
  #leftNav nav .titleNav {
    color: #000;
    border-bottom: 1px solid #ccc;
    padding: 8px 0 4px;
    margin-top: 10px;
  }

  /* Items */
  #leftNav nav .pad5 ul li {
    padding: 6px 0;
    border-bottom: 1px solid #ddd;
  }

  #leftNav nav .pad5 ul li:last-child {
    border-bottom: none;
  }
}