/* LeanToo Consulting — static homepage styles (Bootstrap 5 CDN + this file)
   Palette: header/footer green #0F5132, wave shapes #142e22, text #212529.
   Fonts: Inter (body) / Oxygen (headings) / Parkinsans (nav) via Google Fonts. */

:root {
  --lt-green: #0F5132;
  --lt-wave: #142e22;
  --lt-text: #212529;
  --lt-muted-on-green: rgba(240, 245, 243, 0.75);
}

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--lt-text);
  background: #fff;
}

h1, h2, h3, h4, h5 {
  font-family: "Oxygen", "Inter", sans-serif;
}

/* Hero: photo collage + title, wavy dark band behind the top */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-wave {
  height: 240px;
  width: 100%;
  display: block;
}

.collage {
  /* 240px wave, 128px kept visible above the photos so the dark band shows
     through, as in the original (pt128 under the header) */
  margin-top: -112px;
  position: relative;
}

.collage-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 50px;
  column-gap: 16px;
  row-gap: 8px;
}

.collage-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop grid placement (approximates the original free-grid areas) */
@media (min-width: 992px) {
  .c1 { grid-area: 2 / 1 / 10 / 2; }
  .c2 { grid-area: 1 / 2 / 6 / 5; }
  .c3 { grid-area: 6 / 2 / 11 / 5; }
  .c4 { grid-area: 2 / 5 / 10 / 8; }
  .c5 { grid-area: 1 / 8 / 11 / 11; }
  .c6 { grid-area: 2 / 11 / 10 / 13; }
}

/* Title + intro under the collage */

.hero-copy {
  margin-top: 3rem;
  margin-bottom: 5rem;
}

.hero-copy h1 {
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 1.2;
}

.hero-copy .lead {
  font-size: 1.125rem;
  font-weight: 300;
}

@media (max-width: 991.98px) {
  .hero-copy h1 { font-size: 2.25rem; }
  .hero-copy { margin-bottom: 3rem; }
  /* Smaller wave on mobile; single photo spans the full width over it,
     still leaving the same 128px dark space above */
  .hero-wave { height: 140px; }
  .collage { margin-top: -12px; }
  .collage-grid img.c5 { grid-area: 1 / 1 / 4 / 13; }
}

/* Divider wave before the footer */

.divider-wave {
  height: 64px;
  width: 100%;
  display: block;
  margin-bottom: 2rem;
  /* The exported SVG is baked with scaleY(-1) (dark at the bottom); this CSS
     flip cancels it so the dark green sits on top and fades to white below. */
  transform: scaleY(-1);
}

/* Spacer band: restores the original "numbers list" section - 560px tall on
   desktop (pt240 + empty 200px + pb120), pure whitespace whose job is to give
   the page breathing room and let the angled Bold/03 shape breathe above the
   footer wave. The shape SVG's own canvas starts with ~60% empty space above
   the artwork, and it is anchored to the bottom of the section, so it always
   shows as an angled band sitting on the white, cropped from the top as the
   viewport widens. */

.spacer-band {
  position: relative;
  padding-top: 15rem;    /* 240px, as the original */
  padding-bottom: 7.5rem; /* 120px, as the original */
}

/* The original section carried an empty 200px grid (4 rows x 50px) that forced
   its 560px height; keep that vertical space so the shape crop matches. */

.band-gap { height: 200px; }

.spacer-band .shape-layer {
  position: absolute;
  inset: 0;
  background-image: url("../shapes/bold-03.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  /* Odoo: showOnMobile=false for this shape; keep a shorter whitespace pause */
  .spacer-band .shape-layer { display: none; }
  .spacer-band { padding-top: 8rem; padding-bottom: 4rem; }
  .band-gap { height: 0; }
}

/* Footer */

.site-footer {
  background-color: var(--lt-green);
  color: #f0f5f3;
}

.site-footer h4 {
  font-weight: 500;
  font-size: 1.5rem;
}

.site-footer .text-muted-green {
  color: var(--lt-muted-on-green);
}

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

.contact-list .bi {
  margin-right: 0.5rem;
  vertical-align: -0.125em;
}

/* Contact links: white, no underline (matches the original footer links) */
.contact-list a {
  color: #fff;
  text-decoration: none;
}
.contact-list a:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.copyright-bar {
  background-color: rgba(0, 0, 0, 0.15);
  color: rgba(240, 245, 243, 0.7); /* muted light-on-green, as the original */
}

/* Nav (overrides Bootstrap for the brand look) */

.navbar .nav-link {
  font-family: "Parkinsans", "Inter", sans-serif;
  font-size: 1.25rem;
  color: #fff;
}

.navbar .nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.navbar .nav-link.active,
.navbar .nav-link.active:hover {
  color: #fff;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}