/* ============================================================
   H3 BUILDINGS - GREENHOUSES PAGE
   Scoped to .h3-gh to prevent leaking into Astra header/nav/footer.
   Palette + type lifted from live h3buildings.com:
     navy   #11226A   green  #43B709   white  #FFFFFF
     headings: Univers LT Std (self-hosted on their site),
               Archivo substituted here as the closest match
     body:     Montserrat 500
     buttons:  green pill, 20px radius
   ============================================================ */

/* html{scroll-behavior:smooth} is the ONE deliberate global exception:
   the #models and #quote anchor links need smooth scrolling and
   there is no way to scope scroll-behavior to a subtree in CSS.
   Every other rule is scoped under .h3-gh. */
html{scroll-behavior:smooth}

/* Custom properties on .h3-gh so --var names resolve inside the scope
   without polluting :root (which Astra and plugins may read). */
.h3-gh{
  --navy:#11226A;
  --navy-dark:#0B1748;
  --green:#43B709;
  --green-dark:#369304;
  --ink:#111111;
  --slate:#334155;
  --mist:#F0F5FA;
  --line:#D1D5DB;
  --head:"Univers LT Std","UniversLTStd",Archivo,"Helvetica Neue",Arial,sans-serif;
  --body:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* body declarations folded in here (margin:0 dropped - Astra controls that) */
  font-family:var(--body);
  font-weight:500;
  color:var(--ink);
  line-height:1.65;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

.h3-gh *{box-sizing:border-box}

.h3-gh img{max-width:100%;display:block}
.h3-gh a{color:inherit}
.h3-gh h1,.h3-gh h2,.h3-gh h3,.h3-gh h4{font-family:var(--head);font-weight:700;margin:0;line-height:1.12;text-transform:uppercase}
.h3-gh p{margin:0 0 1rem}
.h3-gh .wrap{max-width:1140px;margin:0 auto;padding:0 20px}

.h3-gh section[id]{scroll-margin-top:130px}
.h3-gh .sec{padding:64px 0}
.h3-gh .sec-tight{padding:44px 0}
.h3-gh .center{text-align:center}

/* Elementor's global kit stylesheet (post-736.css) ships a bare `h2{text-align:center}`.
   It is only 0,0,1 - but a direct rule on the element beats the text-align that .center
   and .cta pass down by INHERITANCE, which is why the section headings centred while the
   kicker and body copy above/below them stayed left. Every heading states its own. */
.h3-gh h1,.h3-gh h2,.h3-gh h3,.h3-gh h4{text-align:left}
.h3-gh .center h1,.h3-gh .center h2,.h3-gh .center h3,.h3-gh .center h4,
.h3-gh .cta h1,.h3-gh .cta h2,.h3-gh .cta h3,.h3-gh .cta h4{text-align:center}

/* ---- review-only banner (deleted from template but scoped here for completeness) ---- */
.h3-gh .reviewbar{background:#1E293B;color:#fff;font-family:var(--body);font-size:13px;line-height:1.5;padding:10px 20px;text-align:center}
.h3-gh .reviewbar b{color:#FFD34E}

/* ---- announcement + header ---- */
.h3-gh .announce{background:var(--navy);color:var(--green);font-family:var(--head);font-size:17px;letter-spacing:.02em;text-align:center;padding:12px 20px}
.h3-gh .hdr{background:var(--navy);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.h3-gh .hdr-in{max-width:1400px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px}
.h3-gh .hdr-logo img{width:132px;height:auto;border-radius:4px}
.h3-gh .nav{display:flex;gap:17px;margin-left:auto;flex-wrap:nowrap}
.h3-gh .nav a{font-family:var(--head);font-size:14px;font-weight:700;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.01em;padding:8px 2px;border-bottom:3px solid transparent;white-space:nowrap}
.h3-gh .nav a:hover{color:var(--green)}
.h3-gh .nav a.on{color:var(--green);border-bottom-color:var(--green)}
.h3-gh .tag-new{background:var(--green);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:2px;letter-spacing:.06em}
.h3-gh .hdr-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.h3-gh .callbox{color:#fff;font-family:var(--head);line-height:1.15;text-align:right;white-space:nowrap}
.h3-gh .callbox span{display:block;font-size:10px;letter-spacing:.12em;color:#9FB4E8}
.h3-gh .callbox a{font-size:19px;color:#fff;text-decoration:none;white-space:nowrap}
.h3-gh .btn{display:inline-block;background:var(--green);color:#fff;font-family:var(--head);font-weight:700;font-size:17px;padding:14px 32px;border-radius:20px;text-decoration:none;border:none;cursor:pointer;transition:background .18s;white-space:nowrap}
.h3-gh .hdr-cta .btn{font-size:15px;padding:12px 24px}
.h3-gh .navtoggle{display:none;margin-left:auto;background:none;border:2px solid rgba(255,255,255,.5);border-radius:8px;color:#fff;font-size:22px;line-height:1;padding:7px 12px;cursor:pointer}
.h3-gh .btn:hover{background:var(--green-dark)}
.h3-gh .btn-navy{background:var(--navy)}
.h3-gh .btn-navy:hover{background:var(--navy-dark)}
.h3-gh .btn-ghost{background:transparent;border:3px solid #fff;padding:11px 29px}
.h3-gh .btn-ghost:hover{background:#fff;color:var(--navy)}

/* ---- hero ---- */
.h3-gh .hero{position:relative;min-height:520px;display:flex;align-items:center;background:var(--navy) center/cover no-repeat}
.h3-gh .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,34,106,.90) 0%,rgba(17,34,106,.72) 48%,rgba(17,34,106,.30) 100%)}
/* width:100% matters here. .hero is display:flex, so .wrap is a flex item, and
   without it the wrap shrinks to its content width and margin:0 auto centres
   THAT - putting the headline ~220px right of every section below it. */
.h3-gh .hero .wrap{position:relative;z-index:2;width:100%;padding-top:70px;padding-bottom:70px}
.h3-gh .eyebrow{display:inline-block;background:var(--green);color:#fff;font-family:var(--head);font-size:13px;letter-spacing:.14em;padding:7px 16px;border-radius:20px;margin-bottom:20px}
.h3-gh .hero h1{color:#fff;font-size:clamp(34px,5vw,58px);max-width:15ch;margin-bottom:18px}
.h3-gh .hero p{color:#E4ECFA;font-size:19px;max-width:52ch;margin-bottom:28px}
.h3-gh .hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---- generic blocks ---- */
.h3-gh .kicker{font-family:var(--head);color:var(--green);font-size:17px;letter-spacing:.05em;margin-bottom:8px}
.h3-gh h2.big{font-size:clamp(27px,3.4vw,40px);color:var(--navy);margin-bottom:16px}
.h3-gh .lead{font-size:17px;color:var(--slate);max-width:74ch}
.h3-gh .band{background:var(--mist)}
.h3-gh .band-navy{background:var(--navy);color:#fff}
.h3-gh .band-navy h2.big{color:#fff}

/* ---- icon row ---- */
.h3-gh .icons{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:34px}
.h3-gh .icons figure{margin:0;text-align:center}
.h3-gh .icons img{width:96px;height:96px;object-fit:contain;margin:0 auto 10px}
.h3-gh .icons figcaption{font-family:var(--head);font-size:14px;color:var(--navy);text-transform:uppercase;line-height:1.25}

/* ---- model cards ---- */
.h3-gh .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:38px}
.h3-gh .card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.h3-gh .card>img{width:100%;height:196px;object-fit:cover}
.h3-gh .card-b{padding:20px;display:flex;flex-direction:column;flex:1}
.h3-gh .card h3{font-size:19px;color:var(--navy);margin-bottom:6px}
/* 2026-09-18: the green .from price was removed from the cards at the client's
   request. It carried the 12px gap that separated the model name from the spec
   list, so the name now states its own. The .from rule above is left in place so
   restoring the prices is a template-only change. */
.h3-gh .card h3{margin-bottom:14px}
.h3-gh .card .from{font-family:var(--head);color:var(--green);font-size:20px;margin-bottom:12px}
.h3-gh .card ul{margin:0 0 18px;padding-left:18px;font-size:14px;color:var(--slate);line-height:1.7}
.h3-gh .card .btn{margin-top:auto;text-align:center;font-size:15px;padding:11px 20px}

/* ---- table ---- */
.h3-gh .tbl-scroll{overflow-x:auto;margin-top:32px;border:1px solid var(--line);border-radius:14px}
.h3-gh table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px;background:#fff}
.h3-gh th,.h3-gh td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.h3-gh th{background:var(--navy);color:#fff;font-family:var(--head);font-size:14px;letter-spacing:.04em;border-bottom:none}
.h3-gh tbody tr:last-child td{border-bottom:none}
.h3-gh tbody tr:nth-child(even){background:#FAFCFF}
.h3-gh td.model{font-family:var(--head);color:var(--navy);text-transform:uppercase;font-size:15px}
/* 2026-09-18: the "Starting At" column was removed from the table at the client's
   request. This rule is now unused and is kept only so restoring the column is a
   template-only change. */
.h3-gh td.price{font-family:var(--head);color:var(--green);white-space:nowrap}
.h3-gh .tbl-note{font-size:13px;color:var(--slate);margin-top:12px}

/* ---- spec strip ---- */
.h3-gh .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:34px}
.h3-gh .spec{border-left:4px solid var(--green);padding-left:18px}
.h3-gh .spec b{display:block;font-family:var(--head);font-size:30px;color:#fff;line-height:1.1;margin-bottom:6px}
.h3-gh .spec span{font-size:14px;color:#C6D3F0}

/* ---- split ---- */
.h3-gh .split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.h3-gh .split img{border-radius:14px;height:100%;max-height:430px;width:100%;object-fit:cover}

/* ---- options ---- */
.h3-gh .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 34px;margin-top:28px;padding:0;list-style:none}
.h3-gh .opts li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding:11px 0;font-size:15px}
/* 2026-09-18: option prices removed. Each li is now a single span, so space-between
   has nothing to push apart - the dashed rule stays as the list separator. */
.h3-gh .opts b{font-family:var(--head);color:var(--green);white-space:nowrap}

/* ---- green cta ---- */
.h3-gh .cta{background:var(--green);color:#fff;text-align:center}
.h3-gh .cta h2{font-size:clamp(26px,3.2vw,38px);color:#fff;margin-bottom:14px}
.h3-gh .cta p{font-size:18px;max-width:60ch;margin:0 auto 26px;color:#EAFBE0}

/* ---- reviews ---- */
.h3-gh .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.h3-gh .rev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.h3-gh .rev img{width:160px;margin-bottom:12px}
.h3-gh .rev p{font-size:15px;color:var(--slate);font-style:italic}
.h3-gh .rev cite{font-family:var(--head);font-style:normal;color:var(--navy);font-size:14px;text-transform:uppercase}

/* ---- form ---- */
.h3-gh .form{max-width:760px;margin:30px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.h3-gh .form input,.h3-gh .form textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;font-family:var(--body);font-size:15px}
.h3-gh .form .full{grid-column:1/-1}
.h3-gh .form textarea{min-height:130px;resize:vertical}
.h3-gh .form .btn{grid-column:1/-1;justify-self:center;padding:15px 46px}

/* ---- footer (scoped but unused - mockup footer deleted, Astra provides it) ---- */
.h3-gh .foot{background:var(--green);color:#fff;padding:52px 0}
.h3-gh .foot-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.h3-gh .foot img{width:230px;margin-bottom:18px}
.h3-gh .foot h4{font-size:26px;color:#fff;margin-bottom:12px}
.h3-gh .foot a{color:#fff;text-decoration:none}
.h3-gh .foot-card{background:var(--navy);border-radius:14px;padding:28px 30px}
.h3-gh .foot-card ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2}
.h3-gh .foot-legal{background:var(--navy-dark);color:#B9C6EA;font-size:13px;text-align:center;padding:16px 20px}

/* ---- Gravity Form 1, styled to match the mockup ----
   Scoped to .h3-gh .h3-gh-form so it CANNOT touch the same form
   where it appears on the homepage or anywhere else on the site.
   GF's Orbital theme already lays the fields out half-width, so
   this only restyles the inputs and the submit button. Tested
   against the real form-1 markup scraped from the live homepage. */
.h3-gh .h3-gh-form{max-width:760px;margin:30px auto 0;text-align:left}

/* GF's Orbital theme paints its controls from CSS custom properties, NOT from
   plain declarations - a normal `background:` override loses to it no matter how
   specific you make the selector (verified: the submit button stayed GF blue).
   Setting the properties on the wrapper is the supported way and survives GF
   updates. Every one of these is namespaced by GF, so overriding them here
   affects only the form inside this page's .h3-gh-form. */
.h3-gh .h3-gh-form .gform_wrapper{
  /* text controls */
  --gf-ctrl-radius:10px;
  --gf-ctrl-border-color:var(--line);
  --gf-ctrl-border-color-focus:var(--green);
  --gf-ctrl-bg-color:#fff;
  --gf-ctrl-color:var(--ink);
  --gf-ctrl-padding-x:16px;
  /* primary button = the mockup's green pill */
  --gf-ctrl-btn-bg-color-primary:var(--green);
  --gf-ctrl-btn-bg-color-hover-primary:var(--green-dark);
  --gf-ctrl-btn-bg-color-focus-primary:var(--green-dark);
  --gf-ctrl-btn-border-color-primary:var(--green);
  --gf-ctrl-btn-border-color-hover-primary:var(--green-dark);
  --gf-ctrl-btn-border-color-focus-primary:var(--green-dark);
  --gf-ctrl-btn-color-primary:#fff;
  --gf-ctrl-btn-radius:20px;
  /* GF resolves button padding through a SIZE-specific property, so setting
     --gf-ctrl-btn-padding-x alone does nothing (verified: stayed at 16px).
     The submit button carries the md size, hence the -md override. */
  --gf-ctrl-btn-padding-x:46px;
  --gf-ctrl-btn-padding-x-md:46px;
  --gf-ctrl-btn-padding-y:15px;
  --gf-ctrl-btn-font-size:17px;
  --gf-ctrl-btn-font-weight:700;
}
.h3-gh .h3-gh-form .gform_wrapper .gform_fields{row-gap:16px}
.h3-gh .h3-gh-form .gform_wrapper .gfield_label{
  font-family:var(--head);
  color:var(--navy);
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
/* Deliberately scoped to .gfield - that is the wrapper GF puts round its OWN
   fields. Anti-spam plugins (CleanTalk here) inject a honeypot input directly
   into the form with no .gfield wrapper; styling it would be wrong and could
   make a field that is meant to stay invisible pick up a visible width/border. */
.h3-gh .h3-gh-form .gform_wrapper .gfield input[type=text],
.h3-gh .h3-gh-form .gform_wrapper .gfield input[type=email],
.h3-gh .h3-gh-form .gform_wrapper .gfield input[type=tel],
.h3-gh .h3-gh-form .gform_wrapper .gfield textarea{
  width:100%;
  padding:14px 16px;
  font-family:var(--body);
  font-size:15px;
}
.h3-gh .h3-gh-form .gform_wrapper .gfield textarea{min-height:130px;resize:vertical}
.h3-gh .h3-gh-form .gform_footer{display:flex;justify-content:center;padding-top:6px}
.h3-gh .h3-gh-form .gform_wrapper .gform_footer input[type=submit]{
  font-family:var(--head);
  text-transform:uppercase;
  cursor:pointer;
  width:auto;
}

@media(max-width:1080px){
  .h3-gh .icons{grid-template-columns:repeat(3,1fr)}
  .h3-gh .cards{grid-template-columns:repeat(2,1fr)}
  .h3-gh .specs{grid-template-columns:repeat(2,1fr)}
  .h3-gh .opts{grid-template-columns:repeat(2,1fr)}
  .h3-gh .revs{grid-template-columns:1fr}
  .h3-gh .split{grid-template-columns:1fr;gap:30px}
}
@media(max-width:1160px){
  .h3-gh .nav{display:none}
  .h3-gh .navtoggle{display:block}
  .h3-gh .nav.open{display:flex;flex-direction:column;width:100%;margin-left:0;gap:0;order:9;border-top:1px solid rgba(255,255,255,.2);padding-top:8px}
  .h3-gh .nav.open a{padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
  .h3-gh .hdr-in{flex-wrap:wrap}
}
@media(max-width:760px){
  .h3-gh .sec{padding:46px 0}
  .h3-gh .announce{font-size:14px}
  .h3-gh .hdr-logo img{width:112px}
  .h3-gh .callbox a{font-size:17px}
  .h3-gh .hdr-cta .btn{font-size:13px;padding:10px 16px}
  .h3-gh .cards{grid-template-columns:1fr}
  .h3-gh .icons{grid-template-columns:repeat(2,1fr)}
  .h3-gh .opts{grid-template-columns:1fr}
  .h3-gh .form{grid-template-columns:1fr}
  .h3-gh .foot-in{grid-template-columns:1fr}
  .h3-gh .callbox a{font-size:18px}
}


/* ============================================================
   ASTRA / SITE INTEGRATION  (added 2026-09-09, after live review)
   functions.php already loads this stylesheet only on this template.
   Every rule below is ALSO keyed to the page-template body class, so
   it still cannot touch another page even if that gate is removed.
   ============================================================ */

/* FULL-WIDTH FIX.
   Astra wraps page content in .ast-container: max-width 1240px, 20px
   padding, and display:flex. That made .h3-gh a flex item with
   flex-grow:0, sized to its own content - so the hero and the colour
   bands were boxed in at 1140px instead of running edge to edge.
   BOTH rules are required: releasing the container's max-width alone
   leaves the flex item sitting at its content width (measured 1140px
   on a 2560px viewport). Scoped to #content so the site header and
   footer keep their normal container width. */
body.page-template-page-h3-greenhouses #content .ast-container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
body.page-template-page-h3-greenhouses #content .ast-container > .h3-gh{
  flex:1 1 100%;
  width:100%;
  min-width:0;
}

/* FOOTER CONTACT FORM.
   The Elementor footer already renders Gravity Form 1, so the form
   appeared twice on this page. Footer section #footer-cta contains
   exactly three things - the "ANY QUESTIONS" heading, the "CONTACT US"
   heading and that form - so hiding the whole section removes the
   duplicate cleanly with no orphaned heading. The green phone CTA,
   opening hours and the address columns are separate sections and are
   untouched. Hidden on this page only.
   The .elementor-element-d745152 selector is a fallback in case the
   #footer-cta id is ever renamed in Elementor; if the section is
   rebuilt from scratch BOTH will change and this rule needs updating. */
body.page-template-page-h3-greenhouses footer #footer-cta,
body.page-template-page-h3-greenhouses footer .elementor-element-d745152{
  display:none !important;
}

/* QUOTE FORM LAYOUT — fields were stacking one per row.
   Root cause found by inspecting which rule actually won: the Elementor
   footer template's own generated stylesheet (post-79.css) contains
       #gform_fields_1{display:flex}
   Someone styled the FOOTER's contact form that way. But both copies of
   Gravity Form 1 on this page carry the same DOM id, so that footer rule
   lands on this page's form too - and an id selector (1,0,0) outranks
   Gravity Forms' own .gform-theme--foundation .gform_fields{display:grid}
   (0,2,0), so GF's 12-column grid never applies.
   In the footer's 1140px container the half-width fields happen to fit two
   per row under flex-wrap. In this 760px column they are 372.39px each,
   so two plus the 16px gap overflow by under a pixel and every field wraps
   onto its own row. That sub-pixel is the whole bug.
   Restored to a real grid. The id is included in the selector purely to
   outrank the footer's rule; the ancestor scope keeps this off the footer
   and homepage copies of form 1.
   This whole conflict disappears if this page is ever moved to its own
   duplicated form with a different id - see INSTALL-README section 5. */
.h3-gh .h3-gh-form .gform_wrapper .gform_fields,
.h3-gh .h3-gh-form #gform_fields_1{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:16px;
  row-gap:16px;
}
.h3-gh .h3-gh-form .gform_wrapper .gform_fields > .gfield,
.h3-gh .h3-gh-form #gform_fields_1 > .gfield{
  width:auto;
  max-width:none;
}

/* Restoring the 12-column grid above also re-imposes it at phone widths,
   where two half fields would sit side by side at ~160px each. Gravity
   Forms collapses to one column at 640px; this keeps that behaviour. */
@media(max-width:640px){
  .h3-gh .h3-gh-form .gform_wrapper .gform_fields > .gfield,
  .h3-gh .h3-gh-form #gform_fields_1 > .gfield{
    grid-column:1 / -1;
  }
}