:root{
  --green:#006600;
  --pale:#E7FFCE;
  --text:#083e08;
  --accent:#FF9900;
}

/* Global reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#fff;
  color:#222;
  line-height:1.5;
}
a{text-decoration:none}

/* Header (full width) */
.header{
  width:100%;
  display:grid;
  grid-template-columns:126px 1fr 120px;
  align-items:center;
  gap:12px;
  background:var(--pale);
  padding:8px 12px;
  border-bottom:1px solid #dcefd1;
  margin:0;
}
.header .logo-left img,
.header .logo-right img{
  display:block;
  width:100%;
  height:auto;
  border:2px solid #ccc;
  object-fit:contain;
  background:#fff;
}
.header .banner{text-align:center}
.header .banner img{
  max-width:100%;
  height:auto;
  display:inline-block;
}

/* Layout (full width) */
.layout{
  width:100%;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:20px;
  padding:0;
}

/* Sidebar with icons & wrapping */
.sidebar{
  background:#004d00;
  padding:16px 12px;
  color:#fff;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}
.sidebar nav a{
  display:flex;
  align-items:flex-start;   /* allows multi-line text next to icon */
  gap:10px;
  padding:10px 8px;
  color:#fff;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.15);
  transition:0.25s;
  white-space:normal;       /* wrap text */
  word-break:break-word;
}
.sidebar nav a:last-child{ border-bottom:none }
.sidebar nav a i{
  width:20px;
  flex-shrink:0;
  text-align:center;
  font-size:16px;
  line-height:1.2;
  margin-top:2px;
}
.sidebar nav a:hover{
  background:#d4a017;
  color:#000;
}
.sidebar nav a:hover i{ color:#000 }

/* Active link style (set on the current page’s link) */
.sidebar nav a.active{
  background:rgba(255,255,255,0.2);
  outline:2px solid rgba(255,255,255,0.25);
}

/* CTA */
.sidebar .cta{
  margin-top:10px;
  text-align:center;
  font-weight:700;
}
.sidebar .cta a{
  color:#ff0;
  border:none !important;
}

/* Main content */
.content{
  padding:0 12px 24px 0;
}
.hero{
  display:flex;
  justify-content:center;
  margin:16px 0;
}
.hero img{
  max-width:100%;
  height:auto;
  display:block;
}

/* Intro text */
.intro .title{
  color:var(--accent);
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:6px;
}
.lead{
  color:var(--text);
  margin:6px 0 10px;
}

/* PROTECT TREES block (centered) */
.notice{ margin-top:20px; display:block; }
.notice .badge{
  background:var(--green);
  color:#fff;
  padding:10px;
  text-align:center;
  border-radius:4px;
  margin:16px auto 0;
  max-width:220px;
}
.notice .badge img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto 6px;
}

/* Accessibility helper */
.sr-only{
  position:absolute!important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 1) Make the main area fill the viewport height even if content is short */
.layout{
  min-height: 100vh;          /* ensure full height */
  align-items: start;         /* prevent stretching oddities */
}

/* 2) Let the sidebar scroll if it's longer than the page content */
.sidebar{
  position: sticky;           /* keeps it visible while scrolling page */
  top: 0;                     /* sticks to the top of the viewport */
  max-height: 100vh;          /* never exceed the viewport height */
  overflow: auto;             /* enable inner scroll for long menus */
  /* Optional nice scrollbars (WebKit) */
  scrollbar-width: thin;                  /* Firefox */
}
.sidebar::-webkit-scrollbar{ width: 8px; }
.sidebar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.3); border-radius: 4px; }

/* 3) (Optional) Cap header height so it doesn’t make the page too tall */
.header .logo-left img,
.header .logo-right img,
.header .banner img{
  max-height: 140px;          /* adjust if needed */
}


/* ============= Base fluid bits ============= */
img { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { word-break: normal; }

/* Make any table scrollable on tiny screens without breaking layout */
table,
.table,
[id^="AutoNumber"] {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Better wrapping for long sidebar links */
.sidebar nav a {
  white-space: normal;
  word-break: break-word;
}

/* ============= Responsive layout ============= */

/* Large tablets and down */
@media (max-width: 1200px) {
  .header { gap: 10px; padding: 8px; }
  .layout { gap: 16px; }
}

/* Tablets and down */
@media (max-width: 992px) {
  /* Header: shrink side logos a bit */
  .header {
    grid-template-columns: 100px 1fr 100px;
  }
  .header .logo-left img,
  .header .logo-right img {
    border-width: 1px;
  }

  /* Layout: stack sidebar on top, content below */
  .layout {
    display: grid;
    grid-template-columns: 1fr;     /* single column */
    grid-template-areas:
      "sidebar"
      "content";
    gap: 14px;
    padding: 0 10px;
  }
  .sidebar { grid-area: sidebar; }
  .content { grid-area: content; padding: 0 4px 20px 0; }

  /* Sidebar: make items a little tighter on mobile */
  .sidebar nav a {
    padding: 9px 8px;
    font-size: 0.975rem;
  }

  /* Headings & lead text tune */
  .intro .title { font-size: 1.05rem; }
  .lead { font-size: 0.98rem; }
}

/* Phones and small tablets */
@media (max-width: 768px) {
  .header {
    grid-template-columns: 72px 1fr 72px;
    padding: 6px 8px;
  }
  .banner img { max-height: 80px; object-fit: contain; }

  .sidebar { padding: 12px 10px; }
  .sidebar nav a i { font-size: 14px; width: 18px; }

  /* Tables: slightly smaller text and more padding for scroll */
  table { font-size: 0.95rem; }
  th, td { padding: 8px 10px; }
}

/* Small phones */
@media (max-width: 480px) {
  .header {
    grid-template-columns: 56px 1fr 56px;
  }
  .sidebar nav a { padding: 8px 8px; }
  .notice .badge { max-width: 200px; padding: 8px; }
}