/**
 * OPW custom styles
 *
 * Moved out of Appearance → Editor → Styles → Additional CSS (the
 * `wp_global_styles` post) and into the child theme so it is version
 * controlled. This file is the single source of truth — the FSE
 * Additional CSS box must stay empty.
 *
 * Cascade order matters and is deliberate:
 *   1. Vendored Gravity Forms base   (lowest — plain layout defaults)
 *   2. OPW site overrides            (global / header / product / popups)
 *   3. Gravity Forms OPW overrides   (must beat the vendored base above)
 *   4. Consent row fix               (LAST — see note in that region)
 *
 * @see wp-content/themes/opw-spectra/functions.php for the enqueue.
 */

/* #region Gravity Forms base (vendored)
 *
 * Originally pasted from Gravity Forms 2.4.20's formsmain.min.css.
 * Gravity Forms is now 2.10.5 and every form on this site renders
 * markupVersion=2 (div-based), so all the legacy `ul.gform_fields` /
 * `li.gfield` selectors from that paste matched nothing and have been
 * dropped, along with the whole readyclass.min.css block
 * (`gf_left_half` / `gf_right_half` — legacy `li` only) and the
 * `input.medium` / `select.medium` 50%-width rule (no such elements
 * are rendered; only `textarea.medium` exists).
 *
 * What remains is markup-agnostic and still applies. Gravity Forms'
 * own CSS IS enabled (`rg_gforms_disable_css` is empty), so this is a
 * thin layer on top of stock GF styling, not a replacement for it.
 */

/* Underline-only inputs, site-wide (not scoped to forms — intentional) */
[type="text"],
[type="password"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="month"],
[type="week"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="color"],
textarea {
  border-width: 0 0 1px 0;
}

.gform_wrapper {
  margin: 0 auto;
}

.gform_wrapper label {
  text-wrap: nowrap;
}

.gform_wrapper textarea {
  padding: 6px 8px;
  line-height: 1.5;
  resize: none;
}

.gform_wrapper textarea.medium {
  height: 6.5em;
}

.gform_wrapper select {
  line-height: 1.5;
}

.gform_wrapper select option {
  padding: 2px;
  display: block;
}

.gform_wrapper .ginput_complex.ginput_container {
  overflow: visible;
  width: 100%;
}

.gform_wrapper .nowrap .gf_name_has_2 {
  display: flex;
}

.gform_wrapper .nowrap .gf_name_has_2 span {
  flex: 1 1 50%;
}

.gform_wrapper .nowrap .gf_name_has_2 span input {
  width: 100% !important;
}

.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
  display: block;
  font-size: 0.813em;
  letter-spacing: 0.5pt;
  white-space: nowrap;
  margin: 1px 0 9px 1px;
}

.gform_wrapper .gform_footer {
  padding: 16px 0 10px 0;
  margin: 16px 0 0 0;
  clear: both;
  width: 100%;
}

/* Full-width submit on small screens; goes auto-width at ≥641px below */
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type="submit"] {
  font-size: 1em;
  width: 100%;
  margin: 0 0 16px 0;
}

/* Merged from three identical rules in the original */
.gform_wrapper .gform_hidden,
.gform_wrapper input.gform_hidden,
.gform_wrapper input[type="hidden"] {
  display: none !important;
  max-height: 1px !important;
  overflow: hidden;
}

/* Broad form of the rule — the original also had `.gform_wrapper`-scoped
   and legacy `li` copies, all redundant against this one. */
.gform_validation_container {
  display: none !important;
  position: absolute !important;
  left: -9000px;
}

:is(.field_sublabel_hidden_label, .hidden_label) .gfield_label {
  display: none;
}

body .gform_wrapper .top_label div.ginput_container {
  margin-top: 8px;
}

@media only screen and (max-width: 641px) {
  .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
    line-height: 2;
    min-height: 2rem;
  }

  .gform_wrapper textarea {
    line-height: 1.5;
  }

  .gform_wrapper .ginput_container span:not(.ginput_price) {
    margin-bottom: 8px;
    display: block;
  }
}

@media only screen and (min-width: 641px) {
  .gform_wrapper .gform_body {
    width: 100%;
  }

  .gform_wrapper .gform_footer input.button,
  .gform_wrapper .gform_footer input[type="submit"] {
    display: inline-block;
    font-size: 1em;
    width: auto;
    margin: 0 16px 0 0;
  }

  .top_label div.ginput_complex.ginput_container.gf_name_has_2 {
    width: calc(100% + 15px);
  }

  div.ginput_container_name span {
    display: inline-block;
    vertical-align: top;
    padding-right: 16px;
    margin-right: -4px;
  }

  div.ginput_complex.ginput_container.gf_name_has_2 span {
    width: 50%;
  }

  html div.ginput_complex.ginput_container.gf_name_has_2 span:first-child {
    margin-left: 0 !important;
  }
}
/* #endregion Gravity Forms base (vendored) */

/* #region Global styles */
body:not(.editor-styles-wrapper, .home) .show-homepage {
  display: none;
}

/* NOTE: `.conatiner` is misspelled, but 4 posts use the misspelled class
   in their markup — the typo is load-bearing. Do not "fix" it here
   without updating the block markup at the same time. */
.conatiner {
  max-width: 1260px;
}

.text-balance {
  text-wrap: balance;
}

.w-arrow img {
  width: 14px;
  position: relative;
  top: 0.15em;
  margin-left: 0.5em;
}

.cover :is(img, div) {
  height: 100% !important;
}

.width-auto {
  width: auto !important;
}

.height-100 {
  height: 100% !important;
}

#banner h1 {
  text-wrap: balance;
}
/* #endregion Global styles */

/* #region Header styles */
#pwHeaderNav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
}

.wp-block-navigation-item__content {
  padding-inline: 1rem 0.85rem;
  padding-block: 0.5rem;
}

.has-child .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--secondary);
}

.has-child > .wp-block-navigation-item__content:after {
  content: "▼";
  font-size: 0.65em;
  padding-inline: 0.5em 0;
}
/* #endregion Header styles */

/* #region Product page styles */
.corner-clip {
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%);
}

.slashes .wp-block-navigation__container > li:not(:last-child)::after,
.slashes .wp-block-navigation__container > div:not(:last-child)::after {
  content: "";
  color: #6b7280;
}

:is(.uagb-container-inner-blocks-wrap) {
  inline-padding: var(--wp--preset--spacing--xxx-small);
}
/* #endregion Product page styles */

/* #region ConvertPro — infobar "Color Craft" */
#cp_popup_id_8891 .cp-popup {
  background-position: 20px 0;
}

@media (min-width: 767px) {
  div.cp_style_8891 #cp_heading-1-8891 {
    top: 15.5px;
  }
}
/* #endregion ConvertPro — infobar "Color Craft" */

/* #region ConvertPro — slideout "Made in Canada" */
.cp-slide_in.bottom-right {
  overflow: hidden;
}

@media (max-width: 767px) {
  .cp-inner-panel-wrap div.made-in-canada-graphic {
    display: block !important;
  }
}
/* #endregion ConvertPro — slideout "Made in Canada" */

/* #region ConvertPro — slideout form */
#toggleTab {
  right: 0;
  transition: 500ms ease-in-out;
}

.signup-open #toggleTab {
  right: 400px;
}

#SlideOutOverlay {
  display: none;
  z-index: -1;
}

.signup-open #tabClose {
  opacity: 1;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  overflow: visible;
}

.signup-open #SlideOutOverlay {
  display: block;
  z-index: 1;
}

.cp-popup-content.cp-slide_in.top-right {
  right: 0;
}
/* #endregion ConvertPro — slideout form */

/* #region Gravity Forms — OPW overrides */
:root .gform_fields {
  /* Gap between Gravity Forms form elements */
  --gf-form-gap-y: 1rem;
}

.gform_wrapper .gfield .gfield--width-half {
  overflow: hidden;
}

.gform_wrapper .gfield .ginput_complex input {
  width: auto;
}

.gform_wrapper .gfield_label {
  height: 20px;
}

.gform_wrapper input[type="submit"] {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  padding: 0.85em 1em;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  border: none;
}

.gform_wrapper input[type="submit"]:hover {
  background-color: var(--wp--preset--color--tertiary);
}

fieldset.horizontal .gfield_checkbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

fieldset.horizontal .gchoice,
fieldset.horizontal .gfield-choice-input,
fieldset.horizontal label,
fieldset.horizontal button {
  margin-block: 0 !important;
  font-size: 1.1rem !important;
}

fieldset.horizontal button {
  font-weight: bold;
  color: var(--wp--preset--color--primary);
}
/* #endregion Gravity Forms — OPW overrides */

/* #region Consent row fix — KEEP LAST
 *
 * Must stay at the bottom of this file. `white-space: normal` on the
 * label is what lets long consent copy wrap, and it has to beat
 * `.gform_wrapper label { text-wrap: nowrap }` in the vendored base
 * above (`white-space` is a shorthand that resets `text-wrap-mode`).
 *
 * The `!important` on the flex container is deliberate too: ConvertPro
 * and Gravity Forms enqueue their CSS on demand when a popup/form
 * renders, which can land after this stylesheet.
 */
.cp-popup .gfield--type-consent .ginput_container_consent,
.cp-popup .gfield--type-checkbox .gchoice {
  display: flex !important;
  align-items: flex-start; /* top-align checkbox with first text line */
  gap: 10px;
  justify-content: flex-start;
  text-align: left;
}

/* Checkbox: fixed size, never shrink, nudge down to meet the text baseline */
.cp-popup .gfield--type-consent .ginput_container_consent input[type="checkbox"],
.cp-popup .gfield--type-checkbox .gchoice input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* Label: fill remaining width and wrap */
.cp-popup .gfield--type-consent .gfield_consent_label,
.cp-popup .gfield--type-consent .ginput_container_consent label,
.cp-popup .gfield--type-checkbox .gchoice label {
  flex: 1 1 auto;
  min-width: 0; /* the key: lets the text wrap inside a flex row */
  white-space: normal; /* override any nowrap */
  line-height: 1.4;
  margin: 0;
}
/* #endregion Consent row fix */