/**
 * Commercial Snow & Ice Management page template.
 *
 * Only the pieces the mockup needs that the global stylesheet doesn't already
 * provide. The banner, green curve card, overlapping photo, grey card and green
 * h5 label all come from css/style.css — this file adds the two-column lists,
 * the quote form card and the FAQ grid on top of them.
 *
 * Loaded only on templates/template-winter.php (see functions.php).
 */

/* ------------------------------------------------------------- footer clearance
 *
 * .c-main-footer::after — the torn white top edge — is absolutely positioned at
 * top: -3.1vw, so it sits *on top of* the last ~3vw of whatever precedes it.
 * .c-live-page-body-area carries no padding of its own, so without this the
 * footer edge cuts into the bottom of the taller column: the quote form when
 * there are few FAQs, or the FAQ list when there are many.
 *
 * The Design and Build pages solve this with an empty .c-live-three-box-sec
 * spacer (36px + 70px of margin). This reserves the space directly and scales
 * the vw portion, so the clearance holds at any viewport width instead of only
 * at the one it was eyeballed on.
 * -------------------------------------------------------------------------- */

.c-snow-page {
  padding-bottom: calc(3.5vw + 70px);
}

/* --------------------------------------------------------------------- hero */

/* .c-inner-banner already sets the height, cover sizing and centred white H1.
   This adds a scrim so the heading stays legible over a bright snow photo —
   the one thing a snowstorm image reliably breaks. Drop the opacity if the
   chosen photo is already dark. */
.c-snow-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 33, 0.45) 0%, rgba(20, 26, 33, 0.22) 55%, rgba(20, 26, 33, 0.38) 100%);
  z-index: 0;
}

/* Lift the heading above the scrim. The torn edge (.c-banner-before) is
   already z-index 2, so it stays on top of both. */
.c-snow-banner .c-inner-banner-in {
  position: relative;
  z-index: 1;
}

.c-snow-banner h1 {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------ optional: manual line break
 *
 * The "Left Block Heading" field accepts a <br>, which reads well on wide
 * screens. Below ~1500px the first half of a long heading already wraps on its
 * own, so the manual break stacks on top of a natural one and you get a ragged
 * three-line title. Uncomment to let the heading wrap naturally at narrower
 * widths while keeping the deliberate break on desktop.
 * -------------------------------------------------------------------------- */

/*
@media (max-width: 1499px) {
  .c-snow-page .c-live-left-sec > .c-page-title br {
    display: none;
  }
}
*/

/* ------------------------------------------------------- page introduction */

.c-snow-page .c-snow-intro {
  font-family: "Montserrat", sans-serif;
  color: #414142;
  font-size: 20px;
  line-height: 32px;
  margin: 0 0 10px;
}

/* ----------------------------------------------------- body photo crop anchor
 *
 * The photo sits in a 3:2 box (Tailwind's .aspect-[3/2], from
 * assets/css/tailwind.css) and fills it via .object-cover. Uploaded photos are
 * wider than 3:2 — the current one is 16:9 — so cover crops the sides, and the
 * browser default of object-position: 50% 50% shaves an even slice off both
 * edges. On the current photo that sliced the truck in half.
 *
 * Anchoring left keeps the photo's left edge intact and takes the entire crop
 * off the right, so a subject sitting on the left stays whole. object-fit is
 * restated so the anchor can't be silently defeated if the utility class is
 * ever dropped from the markup.
 *
 * Specificity here is (0,2,1), which beats .object-cover at (0,1,0) — no
 * !important needed.
 * -------------------------------------------------------------------------- */

.c-snow-page .c-live-image-slider-area img {
  object-fit: cover;
  object-position: left center;
}

/* ---------------------------------------------------------- two-column lists */

/* Multi-column rather than grid so the list fills top-to-bottom down the first
   column then down the second, matching the mockup. Grid would fill across. */
.c-snow-page .c-snow-list {
  columns: 2;
  column-gap: 30px;
  padding: 0;
  margin: 0;
  list-style: none;
  padding-bottom: 20px;
}

.c-snow-page .c-snow-list > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  color: #414141;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 12px;
  padding-left: 18px;
  position: relative;
}

.c-snow-page .c-snow-list > li:before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #7BAF53;
  border-radius: 100%;
  position: absolute;
  left: 0;
  top: 12px;
}

/* ------------------------------------------------------------- equipment box */

.c-snow-page .c-snow-equipment {
  padding: 42px 50px;
  margin: 40px 0;
}

.c-snow-page .c-snow-equipment h6 {
  color: #414141;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px;
}

/* ------------------------------------------------------- green closing line */

.c-snow-page .c-snow-note {
  color: #7BAF53;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  margin: 0 0 40px;
}

/* Breathing room above the second column heading */
.c-snow-page .c-snow-spacer {
  margin-top: 45px;
}

/* ------------------------------------------------------------- quote form */

.c-snow-page .c-snow-form-sec {
  margin-top: 60px;
}

/* The base card reserves 235px at the bottom for the photo that overlaps it.
   The form card has nothing overlapping it, so that padding comes back off. */
.c-snow-page .c-snow-form {
  padding-bottom: 55px;
}

.c-snow-page .c-snow-form__area {
  color: #FFF;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 22px;
}

/* --------------------------------------------- Gravity Forms (Orbital theme)
 *
 * This form runs Gravity Forms' Orbital theme, which is newer than the one the
 * contact and careers forms use: it lays fields out on a CSS grid (so
 * .gfield--width-half already gives a half-width column) and exposes its design
 * tokens as custom properties.
 *
 * So rather than overriding Orbital's rules with !important the way the older
 * form styles do, retune the tokens it already publishes. Spacing, focus rings,
 * error states and disabled states then follow on their own, and the styling
 * survives a Gravity Forms update far better. Only the label hiding and the
 * torn-edge submit button need direct rules.
 * ------------------------------------------------------------------------- */

.c-snow-page .c-snow-form .gform_wrapper.gform-theme,
.c-snow-page .c-snow-form .gform-theme--framework {
  /* Brand green replaces Gravity's default blue */
  --gf-color-primary: #7CB154;
  --gf-color-primary-rgb: 124, 177, 84;
  --gf-color-primary-contrast: #fff;
  --gf-color-primary-contrast-rgb: 255, 255, 255;
  --gf-color-primary-darker: #6B9C48;
  --gf-color-primary-lighter: #8FC267;

  /* Controls: grey fields on the green card, matching the contact form */
  --gf-color-in-ctrl: #E8EBEF;
  --gf-color-in-ctrl-rgb: 232, 235, 239;
  --gf-color-in-ctrl-contrast: #414141;
  --gf-color-in-ctrl-contrast-rgb: 65, 65, 65;
  --gf-color-in-ctrl-darker: #DDE2E8;
  --gf-color-in-ctrl-lighter: #F2F4F7;
  --gf-color-in-ctrl-primary: #7CB154;
  --gf-color-in-ctrl-primary-rgb: 124, 177, 84;
  --gf-color-in-ctrl-primary-contrast: #fff;

  --gf-ctrl-border-color: #E8EBEF;
  --gf-ctrl-size: 58px;
  --gf-radius: 5px;

  /* Button geometry through Orbital's own tokens, so its internal rules
     compute the right size instead of being fought after the fact. */
  --gf-ctrl-btn-size: 52px;
  --gf-ctrl-btn-padding-x: 45px;
  --gf-ctrl-btn-font-size: 18px;
  --gf-ctrl-btn-border-color-secondary: transparent;

  /* Labels and helper text sit on green, so they need to be white */
  --gf-ctrl-label-color-primary: #fff;
  --gf-ctrl-label-color-secondary: #fff;
  --gf-ctrl-desc-color: #fff;

  /* Green chevron on the select instead of Gravity's dark blue-grey one */
  --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%237BAF53'/%3E%3C/svg%3E");
}

/* Controls. background-color rather than the background shorthand, so the
   select keeps the chevron image Gravity paints from the token above. */
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="text"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="email"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="tel"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="number"],
.c-snow-page .c-snow-form .gform_wrapper .gfield select,
.c-snow-page .c-snow-form .gform_wrapper .gfield textarea {
  width: 100%;
  background-color: #E8EBEF;
  border: 1px solid #E8EBEF;
  border-radius: 5px;
  color: #414141;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}

.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="text"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="email"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="tel"],
.c-snow-page .c-snow-form .gform_wrapper .gfield input[type="number"],
.c-snow-page .c-snow-form .gform_wrapper .gfield select {
  height: 58px;
  line-height: 1;
  padding: 10px 20px;
}

.c-snow-page .c-snow-form .gform_wrapper .gfield textarea {
  min-height: 137px;
  padding: 20px;
  resize: vertical;
}

.c-snow-page .c-snow-form .gform_wrapper .gfield ::placeholder {
  color: #8A939F;
  opacity: 1;
}

.c-snow-page .c-snow-form .gform_wrapper .gfield input:focus,
.c-snow-page .c-snow-form .gform_wrapper .gfield select:focus,
.c-snow-page .c-snow-form .gform_wrapper .gfield textarea:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  outline: none;
}

/* Labels duplicate the placeholders, so hide them visually — but keep them in
   the accessibility tree rather than using display:none, so screen readers and
   voice control still announce each field. */
.c-snow-page .c-snow-form .gform_wrapper .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Submit sits inline in the field grid on this form, not in the footer */
.c-snow-page .c-snow-form .gform_wrapper .gfield--type-submit {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Match the "Request a Quote" button directly above on the same card — the
   theme's .button-secondary. bt-left.jpg (45px) and bt-right.jpg (38px) are
   painted end-caps that sit flush against each end, with their rounded corners
   already drawn in; the 45px side padding keeps the label clear of them.
   So: no fixed width, no border-radius and no shadow — a fixed width would pull
   the caps away from the text, and a radius would clip the painted corners.

   !important is needed here, unlike everywhere else in this file. Gravity's
   .gform-button--white variant hard-codes its own background, border and colour
   with enough weight to win on the live page, and it can't be reached through
   the design tokens the way the input styling can. The theme's contact form
   button styles do exactly the same thing for the same reason. Both selectors
   are listed so this holds whether the button renders inline or in the footer. */
.c-snow-page .c-snow-form .gform_wrapper .gform-button,
.c-snow-page .c-snow-form .gform_wrapper input[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  padding: 0 45px !important;
  background-color: #fff !important;
  background-image: url(../images/bt-left.jpg), url(../images/bt-right.jpg) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: auto, auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #7CB154 !important;
  cursor: pointer;
  transition: color 150ms ease;
}

.c-snow-page .c-snow-form .gform_wrapper .gform-button:hover,
.c-snow-page .c-snow-form .gform_wrapper input[type="submit"]:hover {
  background-color: #fff !important;
  color: #000 !important;
}

.c-snow-page .c-snow-form .gform_wrapper .gform-button:focus-visible,
.c-snow-page .c-snow-form .gform_wrapper input[type="submit"]:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px;
}

/* The footer only carries hidden inputs on this form, so it collapses */
.c-snow-page .c-snow-form .gform_wrapper .gform_footer {
  margin: 0;
  padding: 0;
}

/* Validation. The older form styles hide these outright; keeping them visible
   means someone who mistypes an email finds out instead of silently failing. */
.c-snow-page .c-snow-form .gform_wrapper .gfield_error input,
.c-snow-page .c-snow-form .gform_wrapper .gfield_error select,
.c-snow-page .c-snow-form .gform_wrapper .gfield_error textarea {
  border-color: #B3261E;
  background-color: #FBEFEF;
}

.c-snow-page .c-snow-form .gform_wrapper .validation_message {
  background: none;
  border: 0;
  padding: 6px 0 0;
  margin: 0;
  color: #FFF0F0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.c-snow-page .c-snow-form .gform_wrapper .gform_validation_errors {
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  padding: 14px 18px;
  margin: 0 0 18px;
}

.c-snow-page .c-snow-form .gform_wrapper .gform_validation_errors > h2,
.c-snow-page .c-snow-form .gform_wrapper .gform_validation_errors ol,
.c-snow-page .c-snow-form .gform_wrapper .gform_validation_errors a {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  margin: 0;
}

/* AJAX confirmation replaces the form in place, still on the green card */
.c-snow-page .c-snow-form .gform_confirmation_message {
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 30px;
}

/* --------------------------------------------------- FAQs (drawer / accordion) */

.c-snow-page .c-snow-faq-sec {
  margin: 45px 0 0;
}

.c-snow-page .c-snow-faq {
  background-color: #E8EBEF;
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
}

.c-snow-page .c-snow-faq summary {
  color: #414141;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  padding: 20px 54px 20px 26px;
  cursor: pointer;
  position: relative;
  list-style: none;
}

/* Hide the native disclosure triangle in both engines */
.c-snow-page .c-snow-faq summary::-webkit-details-marker { display: none; }
.c-snow-page .c-snow-faq summary::marker { content: ""; }

/* Green chevron that rotates when the drawer opens */
.c-snow-page .c-snow-faq summary:after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid #7BAF53;
  border-bottom: 2px solid #7BAF53;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 200ms ease;
}

.c-snow-page .c-snow-faq[open] summary:after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.c-snow-page .c-snow-faq summary:focus-visible {
  outline: 2px solid #7BAF53;
  outline-offset: -3px;
}

.c-snow-page .c-snow-faq summary:hover {
  color: #7BAF53;
}

.c-snow-page .c-snow-faq .c-content-area {
  padding: 0 26px 22px;
}

.c-snow-page .c-snow-faq .c-content-area p {
  font-size: 16px;
  line-height: 28px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-snow-page .c-snow-faq summary:after { transition: none; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1199.98px) {
  .c-snow-page .c-snow-equipment {
    padding: 32px 30px;
  }
}

@media (max-width: 991.98px) {
  .c-snow-page .c-snow-form-sec {
    margin-top: 40px;
  }
  .c-snow-page .c-snow-equipment {
    padding: 25px 20px;
    border-radius: 25px;
    margin: 25px 0;
  }
  .c-snow-page .c-snow-note {
    font-size: 18px;
    line-height: 28px;
  }
  .c-snow-page .c-snow-faq-sec {
    margin: 35px 0 0;
  }
  .c-snow-page .c-snow-intro {
    font-size: 18px;
    line-height: 30px;
  }
}

@media (max-width: 575px) {
  .c-snow-page .c-snow-list {
    columns: 1;
  }
  .c-snow-page .c-snow-faq summary {
    font-size: 16px;
    padding: 17px 46px 17px 20px;
  }
  .c-snow-page .c-snow-faq summary:after {
    right: 20px;
  }
  .c-snow-page .c-snow-faq .c-content-area {
    padding: 0 20px 18px;
  }
}