/*
Theme Name: LymphTonic Elementor
Theme URI: https://buylymphtonic.us
Author: Handsam
Description: A lightweight, fast-loading custom theme built specifically for Elementor. No bloat, no conflicting wrappers — every page template renders full-width so Elementor sections and containers display exactly as designed. Tailored for a wellness/supplement product landing site with a clean, conversion-focused style.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lymphtonic
*/

/* -------------------------------------------------
   Reset / base
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1c2b26;
  background: #ffffff;
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0f8a5f; text-decoration: none; }
a:hover { color: #0b6b49; }
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: #10231c;
}
p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }

/* -------------------------------------------------
   Layout containers
------------------------------------------------- */
.site-header, .site-footer, .page-content, .entry-content, article {
  width: 100%;
}

/* Elementor pages/sections are full-bleed by design.
   We intentionally do NOT constrain .page-content width,
   so Elementor's own container widths take full effect. */

/* -------------------------------------------------
   Header
------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 18px 5%;
  border-bottom: 1px solid #eef1ef;
  background: #ffffff;
}
.site-branding .site-title {
  font-size: 22px;
  font-weight: 800;
  color: #10231c;
}
.site-branding img { max-height: 48px; }
.main-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  font-weight: 600;
  color: #1c2b26;
}
.main-nav a:hover { color: #0f8a5f; }

/* -------------------------------------------------
   Buttons / CTA (conversion-focused accents)
------------------------------------------------- */
.btn, button, input[type="submit"] {
  display: inline-block;
  background: #0f8a5f;
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover {
  background: #0b6b49;
  transform: translateY(-1px);
  color: #ffffff;
}

/* -------------------------------------------------
   Default content
   Pages (.page-content) stay unconstrained on purpose —
   this is where Elementor lives, and it manages its own
   section/container widths. Blog posts (.entry-content)
   get a readable max-width since they're plain text.
------------------------------------------------- */
.entry-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 5%;
}
.page-content--default {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 5%;
}
.page-content--elementor {
  /* No max-width, no padding: Elementor manages its own spacing. */
  width: 100%;
}
article h1 { font-size: 34px; padding: 40px 5% 0; max-width: 900px; margin: 0 auto; }

/* -------------------------------------------------
   Footer
------------------------------------------------- */
.site-footer {
  padding: 40px 5%;
  border-top: 1px solid #eef1ef;
  background: #f7faf9;
  text-align: center;
  color: #55645d;
  font-size: 14px;
}
.site-footer .widget-title {
  font-size: 16px;
  margin-bottom: 10px;
}

/* -------------------------------------------------
   Responsive
------------------------------------------------- */
@media (max-width: 720px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .main-nav ul { flex-wrap: wrap; gap: 16px; }
  article h1 { font-size: 26px; }
}


/* -------------------------------------------------
   Full-bleed override for specific landing pages.
   Add body class "lt-full-bleed" (via page slug/id rules below)
   to remove the default page padding/max-width wrapper.
------------------------------------------------- */
.lt-full-bleed .page-content--default {
  max-width: none;
  padding: 0;
}
.page-home .page-content--default,
.page-id-lt-home .page-content--default {
  max-width: none;
  padding: 0;
}

.page-id-12 .page-content--default {
  max-width: none;
  padding: 0;
}