/* -------------------------
   Variables & Base
   ------------------------- */
:root{
  --max-w:1200px;
  --gap:12px;
  --text:#0b0b0b;
  --muted:#4b4b4b;
  --accent:#876a00;
  --accent-pressed:#00439a;
  --border:#d6d6d6;
  --card-bg:#ffffff;
  --page-bg:#f6f7f8;
  --footer-bg:#0f172a;
  --footer-bottom-bg:#1e293b;
}

*,
*::before,
*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Small accessibility nicety */
:focus{outline:3px solid rgba(0,85,204,0.12);outline-offset:2px}

/* Links */
a{color:var(--accent);text-decoration:none; font-weight:700}
a:hover,a:focus{color:var(--accent-pressed);text-decoration:underline}

/* Container */
.container{max-width:var(--max-w);margin:0 auto;padding:0 12px}

/* -------------------------
   Navigation / Header
   ------------------------- */
.main-nav{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:60;
}
.nav-inner{
  max-width:var(--max-w);
  margin:0 auto;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nav-brand{
  font-weight:700;
  font-size:16px;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-link{display:inline-flex;padding:4px;border-radius:6px;text-decoration:none}
.btn-post{
  background:var(--accent);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  border:1px solid rgba(0,0,0,0.06);
}

/* -------------------------
   Breadcrumb / Search
   ------------------------- */
.breadcrumb-wrapper{
  max-width:var(--max-w);
  margin:8px auto;
  padding:0 12px;
  font-size:13px;
}
.bc-link{color:var(--text);font-weight:600}

.search-wrap{background:#f7f7f7;padding:10px 0}
.search-form{
  display:flex;
  gap:8px;
  max-width:900px;
  margin:0 auto;
  padding:0 12px;
}
.search-input{
  flex:1;
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:14px;
}
.search-btn{
  padding:8px 12px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

/* -------------------------
   Simple Headings
   ------------------------- */
h1, h2, h3, h4 {
  margin: 0px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

/* Basic font sizes */
h1 { font-size: 18px; }
h2 { font-size: 17px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { font-size: 14px; }


.simple-footer {
  background: #111;
  color: #f5f5f5;
  padding: 22px 10px;
  text-align: center;
  margin-top: 40px;
}

.simple-footer .footer-links {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px; /* spacing between targets */
}

.simple-footer .footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 12px;          /* basic hit area */
  border-radius: 4px;
  display: inline-flex;       /* makes padding applied as a box */
  align-items: center;
  justify-content: center;
}

/* Larger touch targets on mobile */
@media (max-width: 600px) {
  .simple-footer .footer-links a {
    padding: 5px;       /* increases target size */
    min-width: 48px;          /* recommended touch size */
    min-height: 48px;         /* recommended touch size */
  }
}

.simple-footer .footer-links a:hover {
  color: #f2f2f2;
  text-decoration: underline;
}

.footer-rta {
  font-size: 14px;
  color: #ff4040;
  font-weight: 600;
  margin-bottom: 5px;
}

.footer-copy {
  font-size: 13px;
  color: #e6e6e6;
  font-weight: 400;
}