/* ==========================================================
   fr-gutenberg.css
   Shared CSS for FurtherReach Gutenberg Custom HTML blocks.
   All rules scoped under .fr-block to avoid collision with
   Elementor's global stylesheet (www_fr.css / Code Snippets).

   Deployed to: /wp-content/uploads/fr/fr-gutenberg.css
   Source of truth for design tokens: background_files/www_fr.css
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');


/* ----------------------------------------------------------
   Design Tokens
   ---------------------------------------------------------- */
:root {
  --fr-blue:           #0FA1DE;
  --fr-blue-hover:     #0d8ec5;
  --fr-text:           #000000;
  --fr-text-dark:      #353535;
  --fr-text-gray:      #333333;
  --fr-bg-input-gray:  #E5E5E5;
  --fr-bg-input-white: #ffffff;
  --fr-border-input:   #e1e1e1;
  --fr-radius:         10px;
  --fr-shadow-btn:     0 4px 4px rgba(0, 0, 0, 0.25);
  --fr-shadow-input:   inset 0 4px 4px rgba(0, 0, 0, 0.25);
}


/* ----------------------------------------------------------
   Hello Elementor Theme: Content Area Override
   Elementor pages bypass the theme's .site-main max-width via
   the `elementor-page-*` body class. Gutenberg block pages
   don't have that class, so the theme caps the content at
   500–800px (depending on viewport). We override it here so
   Gutenberg pages get the same wide layout Elementor pages do.
   ---------------------------------------------------------- */
body:not([class*=elementor-page-]) .site-main {
  max-width: none;
}


/* ----------------------------------------------------------
   Base Wrapper
   All blocks must have class="fr-block" on the outermost div.
   ---------------------------------------------------------- */
.fr-block {
  font-family: 'Montserrat', sans-serif;
  color: #000;
  box-sizing: border-box;
}
.fr-block * {
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.fr-block .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  height: 46px;
  padding: 0 40px;
  border: 3px solid transparent;
  border-radius: 10px;
  background: #0FA1DE;
  color: #fff !important;
  font-weight: 600;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  text-decoration: none !important;
  transition: all 0.2s;
}
.fr-block .btn-full {
  width: 100%;
}
.fr-block .btn:hover,
.fr-block .btn:focus {
  background: #fff !important;
  color: #0FA1DE !important;
  border-color: #0FA1DE !important;
  text-decoration: none !important;
}
.fr-block a.btn {
  display: inline-flex;
  text-decoration: none !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
}


/* ----------------------------------------------------------
   Inputs & Textareas
   Default: gray background (address/check-availability pages).
   White background is applied inside .contact-form below.
   ---------------------------------------------------------- */
.fr-block .input-field {
  flex: 1 1 auto;
  min-width: 140px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  background: #E5E5E5;
  color: #000;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  outline: none;
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
  cursor: text;
  margin: 0;
}
.fr-block .input-field::placeholder {
  color: #000;
  font-style: italic;
}
.fr-block textarea.input-field {
  min-height: 80px;
  height: auto;
  padding: 10px 14px;
  resize: vertical;
}
.fr-block .input-field.input-error::placeholder {
  color: #dc2626;
}


/* ----------------------------------------------------------
   Contact Form
   Sets white-background inputs and resets the global
   form:not(.inline-form) max-width/margin from www_fr.css.
   ---------------------------------------------------------- */
.fr-block .contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: none;   /* override global form rule */
  margin: 0;
  padding: 0;
  background: transparent;
}
.fr-block .contact-form .input-field {
  background: #ffffff;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.10);
}
.fr-block .contact-form .form-row   { margin-bottom: 0; }
.fr-block .contact-form .form-group { margin-bottom: 0; }
.fr-block .contact-form .form-checkbox { margin-top: 0; }


/* ----------------------------------------------------------
   Inline Form  (address entry on homepage / check page)
   ---------------------------------------------------------- */
.fr-block .inline-form {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  max-width: none;
}
.fr-block .inline-form .field-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 30px;
  min-width: 220px;
  align-items: normal;
}
.fr-block .inline-form .btn {
  margin-top: 0;
}


/* ----------------------------------------------------------
   Form Layout Helpers
   ---------------------------------------------------------- */
.fr-block .form-row {
  display: flex;
  gap: 16px;
}
.fr-block .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.fr-block .form-group label {
  font-weight: 600;
  font-size: 15px;
  color: #000;
  margin: 0 0 6px 0;
}

/* Checkbox */
.fr-block .form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fr-block .form-checkbox input {
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  flex-shrink: 0;
}
.fr-block .form-checkbox label {
  font-size: 15px;
  color: #000;
  margin: 0;
}
.fr-block .form-checkbox a {
  color: #000;
  text-decoration: underline;
}


/* ----------------------------------------------------------
   Details Form  (address/service-details pages)
   ---------------------------------------------------------- */
.fr-block .details-form {
  gap: 12px;
}
.fr-block .details-form .form-group label {
  margin-bottom: 6px;
}
.fr-block .details-form .input-field {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   Plan List  (radio-button plan selector)
   ---------------------------------------------------------- */
.fr-block .plan-list {
  max-width: 600px;
  margin: 0.5rem auto;
  font-family: 'Montserrat', sans-serif;
  color: #000;
  padding: 0;
  list-style: none;
}
.fr-block .plan-option {
  display: flex;
  align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  gap: 10px;
}
.fr-block .plan-option:hover {
  background: #f9f9f9;
  border-color: #bbb;
}
.fr-block .plan-option input[type="radio"] {
  accent-color: #0FA1DE;
  transform: scale(1.2);
  flex-shrink: 0;
  margin: 0;
}
.fr-block .plan-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.35;
  color: #000;
  word-wrap: break-word;
  min-width: 0;
}
.fr-block .plan-price {
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  color: #000;
  width: 70px;
  text-align: right;
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   Price Box  (tabular cost display)
   ---------------------------------------------------------- */
.fr-block .price-box {
  max-width: 600px;
  margin: 0 auto 16px;
  font-family: 'Montserrat', sans-serif;
  padding: 0 14px;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.fr-block .price-box .price-text {
  display: table-cell;
  width: auto;
  color: #000;
  line-height: 1.35;
  padding-right: 10px;
  vertical-align: top;
}
.fr-block .price-box .price-value {
  display: table-cell;
  width: 70px;
  white-space: nowrap;
  color: #000;
  font-weight: 600;
  font-size: 1rem;
  text-align: right;
  vertical-align: top;
}


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .fr-block .form-row {
    flex-direction: column;
    gap: 8px;
  }
  .fr-block .inline-form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .fr-block .inline-form .input-field {
    width: 100%;
    min-width: 0;
  }
  .fr-block .inline-form .btn {
    width: 100%;
    margin-top: 0;
  }
  .fr-block .details-form {
    gap: 8px;
    max-width: 100%;
    padding: 0;
  }
  .fr-block .details-form .form-row {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .fr-block .details-form .form-group {
    width: 100%;
  }
  .fr-block .details-form .input-field,
  .fr-block .details-form textarea.input-field {
    width: 100%;
    margin: 0;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18);
  }
}