/* =========================================================
   GREEN RECYCLING WASTE MANAGEMENT — visual identity
   Concept: reclaimed circuitry. The brand turns stripped
   circuit boards and copper wire into usable material again,
   so the design borrows from PCB traces (the green) and
   stamped steel "data plates" (the license/cert numbers).
   ========================================================= */
   
:root {
  /* Color */
  --ink:        #1C2A22;   /* near-black green-black, body text */
  --paper:      #F6F4ED;   /* warm off-white, page background */
  --panel:      #56866c;   /* lighter graphite-green, dark sections */
  --trace:      #4FA378;   /* lighter circuit-trace green, primary */
  --trace-dim:  #E4EFE8;   /* pale trace tint, backgrounds/borders */
  --copper:     #d1c51d;   /* reclaimed-copper accent, signature */
  --copper-dim: #E7CBAE;

  /* Type */
  --font-display: "Space Grotesk", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --font-data: "JetBrains Mono", "Courier New", monospace;

  --radius: 2px;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--trace); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.main { max-width: 100%; overflow-x: hidden; }

/* -------------------- HEADER -------------------- */

.header {
  background: var(--panel);
  border-bottom: 3px solid var(--trace);
}

.header_resize {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo img {
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background: var(--paper);
  padding: 6px;
  flex-shrink: 0;
}

.logo h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--paper) !important;
  white-space: normal;
}

.logo h1 div,
.logo h1 .sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-dim) !important;
  margin: 3px 0 0 !important;
}

.menu_nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* hamburger toggle — hidden on desktop, shown under 768px */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--trace);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--paper);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu_nav a {
  display: inline-block;
  padding: 10px 16px;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.menu_nav a:hover {
  background: var(--copper);
  color: #fff;
  text-decoration: none;
}

.menu_nav li.active a {
  background: var(--copper);
  color: #fff;
}
.menu_nav {
  margin-left: auto;
}

.menu_nav li.active a:hover {
  background: var(--copper);
  filter: brightness(1.1);
}

.clr { clear: both; }

/* -------------------- HERO / TOP STRIP -------------------- */

.ctop {
  width: 98%;
  height: auto;
  display: block;
}

/* -------------------- CONTENT LAYOUT -------------------- */

.content_resize {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mainbar { flex: 2 1 480px; min-width: 0; }
.sidebar { flex: 1 1 280px; min-width: 0; }

/* never let a missing/broken image collapse or distort layout */
img {
  background: #e9e6dc;
}

.ctop {
  min-height: 80px;
}

.logo img {
  min-width: 70px;
  min-height: 70px;
}

.article {
  margin-bottom: 40px;
}

.article h2,
.gadget h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--trace-dim);
  position: relative;
}

.article h2::before,
.gadget h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--copper);
}

.article h2 span,
.gadget h2 span { color: inherit; }

.article p { color: #3A453E; max-width: 68ch; }

.article ul li,
.gadget ul li {
  padding-left: 4px;
}

/* sidebar / data-plate cards — the signature element:
   certificate & license info rendered like a stamped
   industrial data plate. */

.gadget {
  background: var(--panel);
  color: var(--paper);
  padding: 28px;
  border-radius: var(--radius);
  margin-bottom: 28px;
  border-left: 4px solid var(--copper);
}

.gadget h2,
.gadget h2.star {
  color: var(--paper);
  border-bottom-color: rgba(246, 244, 237, 0.18);
}

.gadget p,
.gadget li { color: #D8DED9; }

.gadget a {
  color: var(--copper-dim);
}

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

.gadget ul li {
  font-family: var(--font-data);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(246, 244, 237, 0.15);
}

.gadget ul li:last-child { border-bottom: none; }

.gadget ul li a {
  font-family: var(--font-body);
  display: inline-block;
  margin-right: 14px;
  padding: 6px 12px;
  background: var(--trace);
  color: var(--panel) !important;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.82rem;
}

.gadget ul li a:hover { background: var(--copper); text-decoration: none; }

h2.star span::before {
  content: "// ";
  color: var(--copper);
  font-family: var(--font-data);
}

/* signature element: license/registration numbers rendered as a
   stamped industrial data plate */
.dataplate {
  border: 1px solid #c9d8cd;
  border-left: 4px solid var(--trace);
  background: #fff;
  border-radius: var(--radius);
}

.dataplate-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px dashed #d7e0da;
}

.dataplate-row:last-child { border-bottom: none; }

.dataplate-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--trace);
}

.dataplate-value { color: #3A453E; font-size: 0.92rem; }
.dataplate-value.mono { font-family: var(--font-data); letter-spacing: 0.01em; }

@media (max-width: 480px) {
  .dataplate-row { grid-template-columns: 1fr; gap: 4px; }
}

/* materials-we-recycle strip (homepage) */
.materials-strip {
  display: flex;
  gap: 16px;
  margin: 28px 0 8px;
  flex-wrap: wrap;
}

.materials-strip a {
  flex: 1 1 120px;
  text-align: center;
  border: 1px solid #c9d8cd;
  border-radius: var(--radius);
  padding: 14px 10px 16px;
  background: #fff;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.materials-strip a:hover {
  border-color: var(--trace);
  transform: translateY(-2px);
  text-decoration: none;
}

.materials-strip img {
  width: 56px;
  height: 75px;
  object-fit: contain;
  margin: 0 auto 8px;
  background: transparent;
}

.materials-strip span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* -------------------- FOOTER BAND (about/gallery) -------------------- */

.fbg {
  background: var(--trace-dim);
  border-top: 1px solid #c9d8cd;
  border-bottom: 1px solid #c9d8cd;
}

.fbg_resize {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 32px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.fbg .col.c1 { flex: 2 1 420px; }
.fbg .col.c3 { flex: 1 1 260px; min-width: 0; }

.fbg h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 14px;
}

.fbg .col.c1 p { color: #3A453E; }
.fbg .col.c1 a { font-weight: 600; }

/* gallery: marquee replaced visually with a scrolling strip;
   no JS needed, pure CSS animation, paused on hover/reduced motion */
.gallery-track {
  display: flex;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

.gallery-track .gallery-inner {
  display: flex;
  gap: 12px;
  animation: scroll-gallery 18s linear infinite;
}

.gallery-track:hover .gallery-inner { animation-play-state: paused; }

.gallery-track img {
  width: 100px;
  height:180px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid #c9d8cd;
  flex-shrink: 0;
}

@keyframes scroll-gallery {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track .gallery-inner { animation: none; }
}

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

.footer {
  background: var(--panel);
  color: #B7C0B9;
}

.footer_resize {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* keep as-is, same as header */
  flex-wrap: wrap;
  gap: 12px;
}

.fmenu {
  margin-left: auto;   /* new — mirrors .menu_nav in the header */
}
.footer p.lf {
  margin: 0;
  margin-right: auto;   /* new — pins it left, pushes fmenu right */
  font-size: 0.85rem;
}
/*.footer p.lf { margin: 0; font-size: 0.85rem; }*/

.fmenu {
  list-style: none;
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.fmenu a {
  color: #B7C0B9;
  font-size: 0.85rem;
}

.fmenu a:hover { color: var(--copper-dim); }

/* -------------------- FORM (contact page) -------------------- */

#sendemail ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sendemail li { margin-bottom: 18px; }

#sendemail label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5A6A5E;
  margin-bottom: 6px;
}

#sendemail input.text,
#sendemail textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #c9d8cd;
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

#sendemail input.text:focus,
#sendemail textarea:focus {
  border-color: var(--trace);
  outline: none;
  box-shadow: 0 0 0 3px var(--trace-dim);
}

#sendemail .send {
  display: inline-block;
  width: auto;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 13px 28px;
  background: var(--trace);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.15s ease;
}

#sendemail .send:hover {
  background: var(--copper);
  transform: translateY(-1px);
}

#sendemail .send:active {
  transform: translateY(0);
}

/* data-plate block for office/contact info */
.gadget b { color: var(--paper); display: block; font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 4px; }

/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 1100px) {
  .mainbar { flex-basis: 100%; }
  .sidebar { flex-basis: 100%; }
  .fbg .col.c1, .fbg .col.c3 { flex-basis: 100%; }
}

@media (max-width: 900px) {
  .header_resize { padding: 14px 20px; position: relative; }
  .logo h1 { font-size: 1.1rem; }
  .logo img { width: 46px; height: 46px; }

  .nav-toggle { display: flex; }

  .menu_nav {
    display: none;
    width: 100%;
    order: 3;
  }

  .menu_nav.is-open { display: block; }

  .menu_nav ul {
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding-top: 8px;
  }

  .menu_nav a { display: block; padding: 10px 12px; }
}

@media (max-width: 768px) {
  .content_resize { padding: 32px 20px; gap: 32px; }
  .fbg_resize { padding: 32px 20px; gap: 32px; }
  .article h2, .gadget h2 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .header_resize { flex-wrap: wrap; gap: 12px; }
  .footer_resize { flex-direction: column; align-items: flex-start; }
  .gallery-track img { width: 64px; height: 64px; }
  .dataplate-row { grid-template-columns: 1fr; gap: 4px; }
  .materials-strip a { flex-basis: 45%; }
}

@media (max-width: 360px) {
  .header_resize, .content_resize, .fbg_resize, .footer_resize { padding-left: 14px; padding-right: 14px; }
  .logo h1 { font-size: 0.95rem; }
  .logo img { width: 38px; height: 38px; }
  .nav-toggle { flex-shrink: 0; width: 34px; height: 34px; }
}