/*
 * Our own overrides, loaded AFTER the October theme stylesheets so these win.
 *
 * Nothing here is part of the port — the theme CSS is copied verbatim by
 * `npm run import:october` and is overwritten on every run, so deliberate changes
 * to how the site behaves belong in this file instead. Keep each block commented
 * with what it changes and why.
 */

/* ---------------------------------------------------------------------------
 * Projects: show every project instead of three at a time.
 *
 * October ships `/projects` with `.all`, `.web` and `.mobile` set to
 * `display: none`, then reveals the first three per tab with
 * `$(".all").slice(0, 3).show()`. "Show more" then reveals them ONE at a time
 * (`hiddenItems.slice(0, 1).slideDown()`), so seeing all 21 projects on the live
 * site takes 18 clicks.
 *
 * These rules reveal them all up front. The category tabs still work — an
 * inactive `.tab-pane` hides its children regardless — so All / Mobile / Web
 * continue to filter; each just shows its full set now.
 *
 * To restore October's three-at-a-time behaviour, delete this block.
 * ------------------------------------------------------------------------- */
.projects-info.all,
.projects-info.web,
.projects-info.mobile {
  display: block !important;
}

/* The load-more buttons have nothing left to load once everything is visible. */
#all_load,
#web_load,
#mobile_load {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Vbout forms (contact page + footer): keep Submit inside the gradient box when
 * validation fails.
 *
 * The theme gives `.get-project-form` `max-height: 930px` while its content is
 * 994px tall — the box silently clipped its own 72px bottom padding, leaving
 * ~18px under the Submit button. Vbout's validation then inserts a "Please check
 * the errors" line, a 24px "This field is required." under each empty field and
 * a GDPR message (~125px), pushing the button out of the box. Same on the live
 * site; visible as soon as Submit is clicked with empty fields.
 *
 *   1. Drop the max-height and trim the bottom padding by the 64px that was
 *      being clipped anyway, so the normal state is pixel-identical (930px) and
 *      the box can grow only when errors appear.
 *   2. Per-field errors are overlaid in the 24px gap between rows, and the
 *      summary line sits in the top padding — so the error state adds only the
 *      GDPR message's height.
 * ------------------------------------------------------------------------- */
.get-project-form {
  position: relative;
  height: auto;
  max-height: none;
  padding-bottom: 8px;
}
.get-project-form .vboutEmbedFormRow {
  position: relative;
}
.get-project-form .vboutEmbedFormField .vfb-error {
  position: absolute;
  left: 0;
  bottom: -22px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.get-project-form .vfb-form-error-message {
  position: absolute;
  top: 28px;
  left: 80px;
  right: 80px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}
.get-project-form .vboutLPGDPRErrorMessage {
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 991px) {
  .get-project-form {
    padding-bottom: 25px;
  }
  .get-project-form .vfb-form-error-message {
    left: 25px;
    right: 25px;
    top: 4px;
  }
}

/* ---------------------------------------------------------------------------
 * Homepage "Reviews" heading: match the "Our Portfolio" title above it.
 *
 * The video testimonial block lives inside .software_innovation, whose
 * .section_title override is tuned for the narrow text column beside each
 * video (42px/48px, width 80%, 40px bottom margin). Used as a centred section
 * heading that came out smaller than "Our Portfolio" and crowded against the
 * first video.
 *
 * These selectors are 0,2,0 like the theme's own and this file loads last, so
 * the base .section_title ladder can't be inherited -- it has to be restated.
 * The values below were read back from the live page with
 * CSS.getMatchedStylesForNode on the "Our Portfolio" h2, not from grepping the
 * stylesheet: the 1366px step lives in a grouped selector
 * (`.section_title, .mvp-section .section_title`) that is easy to miss.
 *
 *   default 52px/64px   <= 1366px 41px/49px   <= 992px line-height normal   <= 768px 28px
 *
 * margin-bottom mirrors .selected_works_section's margin-bottom so the
 * whitespace above and below the heading matches at each breakpoint.
 *
 * Only affects the homepage: /testimony renders the block without a title.
 * --------------------------------------------------------------------------- */
.software_innovation .video-testimonials-title {
  font-size: 52px;
  line-height: 64px;
  width: 50%;
  margin-bottom: 135px;
}

@media (max-width: 1366px) {
  .software_innovation .video-testimonials-title {
    font-size: 41px;
    line-height: 49px;
    margin-bottom: 110px;
  }
}

@media (max-width: 1200px) {
  .software_innovation .video-testimonials-title {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .software_innovation .video-testimonials-title {
    line-height: normal;
  }
}

@media (max-width: 768px) {
  .software_innovation .video-testimonials-title {
    font-size: 28px;
    line-height: normal;
  }
}