/* MicroEnergy International — recreated legacy site styling
   Colours and type sampled from the 2026 Wayback Machine capture of
   microenergy-international.com (WordPress "mf" theme). */

:root{
  --me-red: #be0025;
  --me-red-dark: #a10020;
  --me-grey-text: #777777;
  --me-grey-dark: #333333;
  --me-border: #e6e6e6;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--me-grey-text);
  background: #ffffff url("https://web.archive.org/web/20260609090530im_/https://www.microenergy-international.com/wp-content/themes/mf/assets/images/icons/pattern02.jpg") repeat;
  line-height: 1.7;
}

/* Heading font — matches www.microenergy-consult.com, where large
   headings (h1) are set in Lato 300 and body copy stays Open Sans. */
h1, h2, h3, .hero-box, .page-hero h1{
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
}

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

.container{
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

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

/* ---------- top bar / language switcher ---------- */

.top-bar{
  background: #ffffff;
  border-bottom: 1px solid var(--me-border);
}

.top-bar .container{
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12px;
}

.top-bar a{
  color: #333;
  letter-spacing: .5px;
}

.top-bar a:hover{ color: var(--me-red); }

/* ---------- header / logo / nav ----------
   Logo and navigation share a single header row so no separate
   menu bar sits between the header and the hero photo. */

header.site-header{
  background: #ffffff;
  border-bottom: 1px solid var(--me-border);
}

.header-inner{
  max-width: 1150px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.logo-wrap{
  text-align: center;
  padding: 0;
}

.logo-wrap img{
  margin: 0 auto;
  height: auto;
  width: 190px;
}

nav.main-nav{
  border: none;
  background: transparent;
}

nav.main-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

nav.main-nav li{
  border-left: none;
}

nav.main-nav a{
  display: block;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #333333;
  border-radius: 3px;
}

nav.main-nav a:hover,
nav.main-nav li.current a{
  color: var(--me-red);
  background: transparent;
}

nav.main-nav li.has-dropdown{ position: relative; }

nav.main-nav .dropdown{
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  background: #ffffff;
  border: 1px solid var(--me-border);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  z-index: 20;
}

nav.main-nav li.has-dropdown:hover .dropdown{ display: block; }

nav.main-nav .dropdown a{
  padding: 10px 16px;
  color: #333;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  border-radius: 0;
}

nav.main-nav .dropdown a:hover{
  background: var(--me-red);
  color: #fff;
}

/* ---------- hero ---------- */

.hero{
  position: relative;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), #222 url("https://web.archive.org/web/20260609090530im_/http://www.microenergy-international.com/wp-content/uploads/2017/05/MEI-front-page.jpg") center center / cover no-repeat;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-box{
  background: rgba(0,0,0,.3);
  color: #ffffff;
  max-width: 900px;
  margin: 40px 20px;
  padding: 34px 40px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.55;
}

/* ---------- page hero (interior pages) ---------- */

.page-hero{
  background: var(--me-grey-dark);
  color: #fff;
  padding: 46px 0;
  text-align: center;
}

.page-hero h1{
  margin: 0;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 30px;
}

/* ---------- four-column feature section ---------- */

.features{
  background: #ffffff;
  padding: 56px 0 40px;
}

.features .grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.features h4{
  margin: 0 0 12px;
}

.features h4 a{
  color: var(--me-red);
  font-weight: 700;
  font-size: 16.8px;
}

.features h4 a:hover{ text-decoration: underline; }

.features p{
  margin: 0;
  font-size: 13.5px;
  color: var(--me-grey-text);
}

/* ---------- simple content page ---------- */

.page-content{
  background: #ffffff;
  padding: 46px 0 56px;
}

.page-content h2{
  color: var(--me-grey-dark);
  font-weight: 300;
  margin-top: 0;
}

.contact-card{
  border-left: 4px solid var(--me-red);
  padding: 6px 0 6px 22px;
  margin: 22px 0;
}

.contact-card p{ margin: 4px 0; }

.contact-card a{ color: var(--me-red); }

.legal-block p{ font-size: 13.5px; }

/* ---------- footer ---------- */

footer.site-footer{
  background: var(--me-red);
  color: #ffffff;
  padding: 50px 0 40px;
}

footer.site-footer .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

footer.site-footer h5{
  color: #ffffff;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
}

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

footer.site-footer li{ margin-bottom: 12px; }

footer.site-footer a:hover{ text-decoration: underline; }

.social-row{
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-row a{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.social-row a:hover{ background: rgba(255,255,255,.3); }

.back-to-top{
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #666666;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.back-to-top:hover{ background: var(--me-red); }

/* ---------- mobile ---------- */

@media (max-width: 820px){
  .features .grid{ grid-template-columns: 1fr 1fr; }
  footer.site-footer .grid{ grid-template-columns: 1fr; }
  .header-inner{ justify-content: center; text-align: center; }
  nav.main-nav ul{ justify-content: center; }
  .hero-box{ font-size: 18px; padding: 24px 22px; }
}

@media (max-width: 560px){
  .features .grid{ grid-template-columns: 1fr; }
  .top-bar .container{ justify-content: center; }
}