/* Grassland on WordPress/Betheme — environment adjustments.
   The original grassland.css remains untouched; everything WP-specific lives here. */

/* Betheme structural wrappers must be fully transparent so the original
   markup inside BeBuilder columns renders exactly as the static site.
   Scoped OFF the BeBuilder canvas (body.gl-builder): the editor's selection
   overlays depend on the theme's own wrapper positioning. */
body:not(.gl-builder) #Content,
body:not(.gl-builder) #Content .content_wrapper,
body:not(.gl-builder) #Content .sections_group,
body:not(.gl-builder) #Content .mfn-builder-content,
body:not(.gl-builder) #Content .entry-content,
body:not(.gl-builder) #Content .section.mcb-section,
body:not(.gl-builder) #Content .section_wrapper,
body:not(.gl-builder) #Content .mcb-section-inner,
body:not(.gl-builder) #Content .wrap.mcb-wrap,
body:not(.gl-builder) #Content .mcb-wrap-inner,
body:not(.gl-builder) #Content .column.mcb-column,
body:not(.gl-builder) #Content .mcb-column-inner,
body:not(.gl-builder) #Content .column_attr {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  position: static;
  float: none;
  min-height: 0;
}

body:not(.gl-builder) #Content .mcb-background-overlay,
#Content .section-page-footer,
#Content .section-page-comments {
  display: none;
}

/* In the editor canvas, keep sections readable but let the theme's own
   layout CSS drive the wrappers. Give full-bleed sections room to breathe. */
body.gl-builder #Content .section.mcb-section {
  padding: 0;
}
body.gl-builder #Content .section_wrapper {
  max-width: none;
  padding: 0;
}

/* Hide any Betheme chrome that could render on non-blank templates */
#Header_wrapper,
#Header,
#Top_bar,
#Footer,
#back_to_top,
#body_overlay,
#Side_slide,
#Sliding-top {
  display: none !important;
}

/* Neutralize theme body defaults that could sneak in */
body {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Contact Form 7 — render the quote form exactly like the original markup.
 * CF7 adds its own wrappers (form.wpcf7-form, span.wpcf7-form-control-wrap,
 * radio list items, spinner, response output); this maps them onto the
 * original .q-form / .q-field / .q-chip styling.
 * ---------------------------------------------------------------------- */

.q-form .wpcf7 form {
  margin: 0;
  padding: 0;
}

.q-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Radio chips: CF7's list items become the original chips */
.q-chips .wpcf7-form-control-wrap {
  width: auto;
}
.q-chips .wpcf7-radio {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.q-chips .wpcf7-list-item {
  margin: 0;
}
.q-chips .wpcf7-list-item label {
  cursor: pointer;
  position: relative;
}
.q-chips .wpcf7-list-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.q-chips .wpcf7-list-item-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(19, 26, 19, 0.55);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: 100px;
  transition: all 0.25s;
}
.q-chips .wpcf7-list-item label:hover .wpcf7-list-item-label {
  border-color: var(--ink);
  color: var(--ink);
}
.q-chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  background: var(--green);
  border-color: var(--green);
  color: var(--leaf);
}

/* Submit: CF7 renders an <input type="submit">; keep original button look */
.q-form input.q-submit {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--green);
  color: var(--leaf);
  padding: 20px 36px;
  border: none;
  cursor: pointer;
  margin-top: 14px;
  transition: background 0.25s;
  -webkit-appearance: none;
  border-radius: 0;
}
.q-form input.q-submit:hover {
  background: var(--green-deep);
}
.q-form .wpcf7-spinner {
  margin: 0 0 0 12px;
}

/* Validation + response messaging in the site's voice */
.q-form .wpcf7-not-valid-tip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #a03e2d;
  margin-top: 8px;
}
.q-form .wpcf7-response-output {
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--line) !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink);
}
.q-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--moss) !important;
  color: var(--green);
}
.q-form .wpcf7 form.invalid .wpcf7-response-output,
.q-form .wpcf7 form.failed .wpcf7-response-output {
  border-color: #a03e2d !important;
  color: #a03e2d;
}

/* -------------------------------------------------------------------------
 * Coming Soon page (/coming-soon/) — full-viewport hero-video holding screen.
 * The markup lives in the page's BeBuilder content, so it stays editable.
 * ---------------------------------------------------------------------- */

.cs {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--green);
  color: #fff;
}

.cs-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cs-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
}
.cs-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,18,10,0.68) 0%, rgba(10,18,10,0.5) 45%, rgba(10,18,10,0.9) 100%);
}

.cs-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 34px clamp(24px, 5vw, 72px) 0;
}
.cs-logo img {
  display: block;
  height: 52px;
  width: auto;
}
.cs-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 8px 16px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.cs-badge i {
  font-style: normal;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leaf);
  margin-right: 9px;
  vertical-align: 1px;
  animation: cs-pulse 2s ease-in-out infinite;
}
@keyframes cs-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.cs-main {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px clamp(24px, 5vw, 72px);
}
.cs-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 26px;
}
.cs-kicker::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--moss);
  margin-right: 14px;
  vertical-align: 4px;
}
.cs .cs-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 8vw, 110px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 12em;
  color: #fff;
}
.cs .cs-title em {
  font-style: italic;
  color: var(--leaf);
}
.cs-sub {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255,255,255,0.72);
  max-width: 480px;
  margin-top: 30px;
}

.cs-contact {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}
.cs-btn {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--leaf);
  color: var(--green);
  padding: 16px 28px;
  transition: background 0.25s;
}
.cs-btn:hover {
  background: #fff;
}
.cs-btn-ghost {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 15px 28px;
  transition: border-color 0.25s, background 0.25s;
}
.cs-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

.cs-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px clamp(24px, 5vw, 72px) 30px;
  border-top: 1px solid var(--line-light);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Mobile: stacked header, full-width thumb-sized contact buttons */
@media (max-width: 640px) {
  .cs-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 26px;
  }
  .cs-logo img { height: 40px; }
  .cs-badge { font-size: 9.5px; padding: 7px 12px; }
  .cs-main { padding: 44px 24px; }
  .cs-sub { font-size: 14.5px; }
  .cs-contact {
    flex-direction: column;
    gap: 12px;
    margin-top: 34px;
  }
  .cs-btn,
  .cs-btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    text-align: center;
  }
  .cs-btn { font-size: 12px; }
  .cs-btn-ghost { font-size: 10px; letter-spacing: 0.08em; }
  .cs-foot { justify-content: center; text-align: center; gap: 8px; }
}

/* Anchor the mega menus to the nav itself, in every state.
   The nav's scrolled state uses backdrop-filter, which turns the nav into
   the containing block for its fixed-position mega menus — but only while
   scrolled. Forcing a containing block permanently (translateZ) makes the
   menus always position relative to the nav, so they sit flush under it
   whether or not the WP admin bar (32px/46px) is present. */
.nav {
  transform: translateZ(0);
}
.mega {
  top: 68px; /* nav height — measured from the nav's own top edge */
}

/* WP admin bar offset for the fixed nav + mobile menu */
body.admin-bar .nav {
  top: 32px;
}
body.admin-bar .mnav {
  padding-top: 142px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .nav {
    top: 46px;
  }
}