/* ============================================================
   RootsWorld Main Stylesheet
   ------------------------------------------------------------
   Author: RootsWorld Staff
   Copyright © 2025 RootsWorld
   Description: Core visual styles for RootsWorld pages
   ============================================================ */

/* ---------- Global Reset / Background ---------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff; /* ensures full-page white background */
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

/* ---------- Page Wrapper ---------- */
.page-wrapper {
  min-height: 100vh;       /* fill entire viewport */
  background-color: #fff;  /* ensure background stays white */
  position: relative;
  padding-bottom: 160px;   /* space for sticky iframe (adjust to iframe height + margin) */
}

/* ---------- Links ---------- */
a {
  color: #297878;           /* primary link color */
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ---------- Main Content Container ---------- */
.content {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  border: none;
  padding: 0;
}

/* ---------- Responsive Content ---------- */
@media (max-width: 980px) {
  .content {
    width: 95%;
  }
}

/* ---------- Sticky Bottom Iframe ---------- */
/* ---------- Body ---------- */
body {
  margin: 0;
  background-color: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 200px; /* Add breathing room so bottom content doesn’t hide under sticky iframe */
  box-sizing: border-box;
}

/* ---------- Sticky Bottom Iframe ---------- */
.header-cont {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

.header-cont iframe {
  display: block;
  width: 85%;           /* Centered width to match content */
  max-width: 900px;     /* Optional max width for large screens */
  height: 140px;        /* Consistent visual height */
  min-height: 140px;
  border: none;
  background: #fff;
}

/* Add bottom padding so the page scrolls above the sticky area */
body {
  background-color: #fff;
  padding-bottom: 150px;  /* space for sticky iframe */
  margin: 0;
}

@media (max-width: 600px) {
  .header-cont iframe {
    max-height: 120px;  /* slightly smaller on mobile */
  }
}