/* ================================================================
   Sustainable Forestry Network — Main Stylesheet
   Layout: sidebar-right | Max: 980px | Breaks: 850/520
   Prefix: sf- | System fonts only
   ================================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: Verdana, 'Segoe UI', Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  background-color: #e8ede9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: #6b2d8b;
  text-decoration: none;
  transition: color 0.2s ease;
}

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

a:visited {
  color: #5a2575;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', serif;
  color: #1a3a1a;
  line-height: 1.3;
  margin-bottom: 0.6em;
}

h1 {
  font-size: 1.85rem;
  border-bottom: 2px solid #336633;
  padding-bottom: 0.35em;
  margin-bottom: 0.8em;
}

h2 {
  font-size: 1.5rem;
  margin-top: 1.5em;
}

h3 {
  font-size: 1.25rem;
  margin-top: 1.2em;
}

h4 {
  font-size: 1.1rem;
  margin-top: 1em;
}

p {
  margin-bottom: 1em;
  text-align: justify;
}

ul, ol {
  margin: 0 0 1em 1.5em;
}

li {
  margin-bottom: 0.35em;
}

blockquote {
  border-left: 4px solid #336633;
  padding: 0.8em 1.2em;
  margin: 1.2em 0;
  background-color: #f0f5f0;
  font-style: italic;
  color: #333;
}

hr {
  border: none;
  border-top: 1px solid #c0d0c0;
  margin: 1.5em 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

th, td {
  padding: 0.5em 0.75em;
  border: 1px solid #c0d0c0;
  text-align: left;
}

th {
  background-color: #336633;
  color: #fff;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f5f8f5;
}

/* --- Page Wrapper --- */
.sf-page {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 12px rgba(0,0,0,0.08);
}

/* --- Header --- */
.sf-header {
  background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 60%, #3a6b3a 100%);
  color: #fff;
  padding: 1.2em 1.5em;
}

.sf-header-inner {
  display: flex;
  align-items: center;
  gap: 1em;
}

.sf-logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.sf-logo:hover {
  color: #c0e0c0;
  text-decoration: none;
}

.sf-logo img {
  width: 52px;
  height: auto;
}

.sf-logo-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.sf-logo-tagline {
  font-size: 0.72rem;
  opacity: 0.8;
  letter-spacing: 0.3px;
  display: block;
  margin-top: 2px;
}

/* --- Navigation (horizontal-top) --- */
.sf-nav {
  background-color: #244a24;
  border-top: 1px solid #3a6b3a;
  border-bottom: 2px solid #1a3a1a;
  padding: 0 1.5em;
}

.sf-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.sf-nav-list li {
  margin: 0;
}

.sf-nav-list a {
  display: block;
  padding: 0.6em 1em;
  color: #d0e8d0;
  font-size: 0.88rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.sf-nav-list a:hover,
.sf-nav-list a.sf-active {
  background-color: #336633;
  color: #fff;
}

.sf-nav-toggle {
  display: none;
  background: none;
  border: 2px solid #d0e8d0;
  color: #d0e8d0;
  padding: 0.4em 0.8em;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 3px;
  margin: 0.4em 0;
}

.sf-nav-toggle:hover {
  background-color: rgba(255,255,255,0.1);
}

/* --- Main Layout (sidebar-right) --- */
.sf-layout {
  display: flex;
  flex: 1;
  gap: 0;
}

.sf-main {
  flex: 1;
  padding: 1.8em 2em;
  min-width: 0;
  order: 1;
}

.sf-sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 1.5em 1.2em;
  background-color: #f0f5f0;
  border-left: 2px solid #c0d8c0;
  order: 2;
}

/* --- Sidebar Widgets --- */
.sf-widget {
  margin-bottom: 1.8em;
}

.sf-widget-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: bold;
  color: #1a3a1a;
  border-bottom: 2px solid #336633;
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}

.sf-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-widget li {
  margin-bottom: 0.3em;
}

.sf-widget li a {
  display: block;
  padding: 0.35em 0.5em;
  color: #2d5a2d;
  font-size: 0.88rem;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

.sf-widget li a:hover {
  background-color: #dfe9df;
  color: #1a3a1a;
  text-decoration: none;
}

.sf-widget p {
  font-size: 0.88rem;
  color: #444;
  text-align: left;
}

/* --- Article Styles --- */
.sf-article {
  margin-bottom: 2em;
}

.sf-article-meta {
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px dashed #c0d0c0;
}

.sf-article-meta time {
  font-weight: bold;
  color: #555;
}

.sf-article-img {
  margin: 1.2em 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #d0ddd0;
}

.sf-article-img img {
  width: 100%;
  display: block;
}

.sf-article-img figcaption {
  padding: 0.4em 0.8em;
  font-size: 0.8rem;
  color: #666;
  background-color: #f8faf8;
  text-align: center;
  font-style: italic;
}

/* --- Blog Listing --- */
.sf-blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-blog-item {
  display: flex;
  gap: 1.2em;
  padding: 1.2em 0;
  border-bottom: 1px solid #dde5dd;
}

.sf-blog-item:last-child {
  border-bottom: none;
}

.sf-blog-thumb {
  width: 180px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.sf-blog-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.sf-blog-excerpt {
  flex: 1;
}

.sf-blog-excerpt h2 {
  font-size: 1.2rem;
  margin: 0 0 0.3em 0;
}

.sf-blog-excerpt h2 a {
  color: #1a3a1a;
}

.sf-blog-excerpt h2 a:hover {
  color: #336633;
}

.sf-blog-date {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.4em;
}

.sf-blog-excerpt p {
  font-size: 0.9rem;
  color: #444;
  text-align: left;
  margin: 0;
}

.sf-read-more {
  display: inline-block;
  margin-top: 0.5em;
  color: #336633;
  font-weight: bold;
  font-size: 0.88rem;
}

.sf-read-more:hover {
  color: #1a3a1a;
}

/* --- Hero Section --- */
.sf-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5em;
  border-radius: 4px;
}

.sf-hero img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.sf-hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
  padding: 1.5em 1.2em 0.8em;
  font-size: 0.9rem;
}

/* --- Footer --- */
.sf-footer {
  background: linear-gradient(135deg, #1a3a1a 0%, #2d5a2d 100%);
  color: #c0d8c0;
  padding: 1.8em 2em;
  margin-top: auto;
}

.sf-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: space-between;
}

.sf-footer-col {
  flex: 1;
  min-width: 180px;
}

.sf-footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.6em;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.3em;
}

.sf-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-footer-col li {
  margin-bottom: 0.25em;
}

.sf-footer-col a {
  color: #a0c8a0;
  font-size: 0.85rem;
}

.sf-footer-col a:hover {
  color: #fff;
}

.sf-footer-col p {
  font-size: 0.85rem;
  text-align: left;
  color: #a0c8a0;
}

.sf-copyright {
  width: 100%;
  text-align: center;
  padding-top: 1em;
  margin-top: 0.5em;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem;
  color: #8ab08a;
}

/* --- Service Pages --- */
.sf-contact-info {
  background-color: #f0f5f0;
  padding: 1.2em 1.5em;
  border-radius: 4px;
  border: 1px solid #c0d8c0;
  margin: 1em 0;
}

.sf-contact-info dt {
  font-weight: bold;
  color: #1a3a1a;
  margin-top: 0.8em;
}

.sf-contact-info dd {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0.4em;
}

/* --- Breadcrumbs --- */
.sf-breadcrumb {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 1.2em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #eee;
}

.sf-breadcrumb a {
  color: #666;
}

.sf-breadcrumb a:hover {
  color: #336633;
}

.sf-breadcrumb span {
  margin: 0 0.3em;
  color: #aaa;
}

/* --- Utility --- */
.sf-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.sf-text-center {
  text-align: center;
}

.sf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.sf-highlight-box {
  background-color: #f0f5f0;
  border: 1px solid #c0d8c0;
  border-left: 4px solid #336633;
  padding: 1em 1.2em;
  margin: 1em 0;
  border-radius: 0 4px 4px 0;
}

.sf-img-float-right {
  float: right;
  margin: 0 0 1em 1.2em;
  max-width: 40%;
}

.sf-img-float-left {
  float: left;
  margin: 0 1.2em 1em 0;
  max-width: 40%;
}

/* --- 404 Page --- */
.sf-error-page {
  text-align: center;
  padding: 3em 1em;
}

.sf-error-page h1 {
  font-size: 3rem;
  border: none;
  color: #336633;
}

.sf-error-page p {
  text-align: center;
  font-size: 1.1rem;
}

/* --- Print Styles --- */
@media print {
  .sf-nav, .sf-sidebar, .sf-footer {
    display: none;
  }
  .sf-page {
    box-shadow: none;
  }
  .sf-main {
    padding: 0;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ================================================================
   Responsive — Breakpoint 850px (tablet)
   ================================================================ */
@media screen and (max-width: 850px) {
  .sf-layout {
    flex-direction: column;
  }

  .sf-main {
    order: 1;
    padding: 1.2em 1.5em;
  }

  .sf-sidebar {
    order: 2;
    width: 100%;
    border-left: none;
    border-top: 2px solid #c0d8c0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    padding: 1.2em 1.5em;
  }

  .sf-widget {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
  }

  .sf-header-inner {
    flex-direction: column;
    text-align: center;
  }

  .sf-nav-list {
    justify-content: center;
  }

  .sf-blog-item {
    flex-direction: column;
  }

  .sf-blog-thumb {
    width: 100%;
  }

  .sf-blog-thumb img {
    height: 180px;
  }

  .sf-img-float-right,
  .sf-img-float-left {
    float: none;
    max-width: 100%;
    margin: 1em 0;
  }

  .sf-hero img {
    height: 200px;
  }

  .sf-footer-inner {
    flex-direction: column;
    gap: 1em;
  }
}

/* ================================================================
   Responsive — Breakpoint 520px (mobile)
   ================================================================ */
@media screen and (max-width: 520px) {
  html {
    font-size: 15px;
  }

  .sf-header {
    padding: 0.8em 1em;
  }

  .sf-logo-text {
    font-size: 1.1rem;
  }

  .sf-nav {
    padding: 0 0.5em;
    position: relative;
  }

  .sf-nav-toggle {
    display: block;
  }

  .sf-nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .sf-nav-list.sf-nav-open {
    display: flex;
  }

  .sf-nav-list a {
    padding: 0.7em 1em;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .sf-main {
    padding: 1em;
  }

  .sf-sidebar {
    flex-direction: column;
    padding: 1em;
  }

  .sf-widget {
    min-width: 100%;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .sf-blog-thumb img {
    height: 140px;
  }

  .sf-hero img {
    height: 160px;
  }

  .sf-footer {
    padding: 1.2em 1em;
  }

  .sf-copyright {
    font-size: 0.75rem;
  }

  table {
    font-size: 0.85rem;
  }

  th, td {
    padding: 0.35em 0.5em;
  }
}

/* ================================================================
   Additional Element Styles
   ================================================================ */

/* Chapter TOC boxes */
.sf-chapter-toc {
  background-color: #f5f8f5;
  border: 1px solid #c0d8c0;
  padding: 1em 1.5em;
  margin-bottom: 1.5em;
  border-radius: 4px;
}

.sf-chapter-toc h3 {
  margin-top: 0;
  font-size: 1rem;
  color: #336633;
}

.sf-chapter-toc ol {
  margin-bottom: 0;
}

/* Info cards */
.sf-info-card {
  background: #fff;
  border: 1px solid #dde5dd;
  border-radius: 4px;
  padding: 1.2em;
  margin-bottom: 1em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sf-info-card h3 {
  margin-top: 0;
  color: #336633;
  font-size: 1.1rem;
}

/* Styled definition lists */
.sf-def-list dt {
  font-weight: bold;
  color: #1a3a1a;
  margin-top: 0.8em;
  padding: 0.2em 0;
}

.sf-def-list dd {
  margin-left: 1em;
  padding: 0.2em 0;
  border-bottom: 1px dotted #ddd;
}

/* Figure with captions */
.sf-figure {
  margin: 1.5em 0;
  text-align: center;
}

.sf-figure img {
  border-radius: 4px;
  border: 1px solid #d0ddd0;
  margin: 0 auto;
}

.sf-figure figcaption {
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.4em;
  font-style: italic;
}

/* Pull quotes */
.sf-pullquote {
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #2d5a2d;
  border-left: 4px solid #6b2d8b;
  padding: 0.5em 1em;
  margin: 1.5em 0;
  background: #faf5fc;
}

/* Tag / category labels */
.sf-tag {
  display: inline-block;
  background: #e0ebe0;
  color: #336633;
  font-size: 0.75rem;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  margin-right: 0.3em;
  font-weight: bold;
}

/* Back to top */
.sf-back-top {
  text-align: right;
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid #eee;
}

.sf-back-top a {
  font-size: 0.85rem;
  color: #888;
}

.sf-back-top a:hover {
  color: #336633;
}