/* ==========================================================
   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
   Popover JS: /wp-content/uploads/fr/frhp-why-popover.js
   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);
  }
}


/* ----------------------------------------------------------
   Home / SEO hero — "How?" reliability modal (.pp-fn pattern)
   ---------------------------------------------------------- */
.frhp .frhp-tagline-row {
  display: block;
  margin: 0 0 1.25em 0;
  line-height: 1.1;
}
.frhp .frhp-tagline-row .frhp-tagline {
  display: inline-block;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  cursor: default;
}
/* Solid “How?” pill — bottom edge aligned with tagline text */
.frhp .frhp-tagline-row .pp-fn.pp-fn-why {
  display: inline-block;
  vertical-align: bottom;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0.16em 0.55em 0.08em;
  margin: 0 0 0 0.55em;
  position: relative;
  top: -0.14em;
  background: var(--fr-blue, #0fa1de);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  /* 2/3 of hero tagline clamp(1.25rem, 2.8vw, 2rem) — readable for 60+ audience */
  font-size: clamp(0.833rem, 1.867vw, 1.333rem);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  line-height: 1;
  text-decoration: none !important;
  user-select: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
}
.frhp .frhp-tagline-row .pp-fn.pp-fn-why:hover,
.frhp .frhp-tagline-row .pp-fn.pp-fn-why:focus {
  background: #0d8ec5;
  color: #fff !important;
}
@keyframes frhp-why-hint {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 6px rgba(15, 161, 222, 0.65);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
}
.frhp .frhp-tagline-row .pp-fn.pp-fn-why.frhp-why-hint-play {
  animation: frhp-why-hint 0.85s ease-out 1;
}
/* Centered modal + dimmed backdrop (no caret / anchor positioning) */
.frhp .frhp-why-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.frhp .frhp-why-modal.pp-active {
  display: flex !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  justify-content: center;
}
.frhp .frhp-why-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  cursor: pointer;
}
/* Lock scroll without layout shift when the scrollbar disappears */
html.frhp-why-modal-open,
body.frhp-why-modal-open {
  overflow: hidden;
}
body.frhp-why-modal-open {
  padding-right: var(--frhp-scrollbar-width, 0px);
}
body.frhp-why-modal-open header.elementor-location-header,
body.frhp-why-modal-open .elementor-location-header {
  padding-right: var(--frhp-scrollbar-width, 0px);
  box-sizing: border-box;
}
.frhp .pp-popover.frhp-why-popover {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  padding: 22px 28px 18px;
  max-width: 460px;
  width: min(460px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 32px));
  max-height: min(560px, calc(100dvh - 32px));
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #000;
  display: none;
  box-sizing: border-box;
  cursor: pointer;
}
.frhp .pp-popover.frhp-why-popover.pp-active {
  display: flex !important;
  flex-direction: column;
}
.frhp .frhp-why-popover-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.frhp .frhp-why-popover-title {
  margin: 0 0 14px;
  padding-right: 28px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  font-family: 'Montserrat', sans-serif;
}
.frhp .pp-popover > p,
.frhp .frhp-why-popover-body p {
  margin: 0 0 10px;
  font-size: 15px;
}
.frhp .frhp-why-popover-body p:last-child {
  margin-bottom: 0;
}
.frhp .pp-popover.frhp-why-popover .frhp-why-popover-footer {
  margin: 14px 0 0;
  padding: 0;
}
.frhp .pp-popover.frhp-why-popover .frhp-why-popover-divider {
  display: block;
  width: 100%;
  height: 0;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  border-top: 1px solid #c5c5c5;
  background: none;
}
.frhp .pp-popover.frhp-why-popover .frhp-why-popover-tagline {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333 !important;
}
.frhp .pp-popover.frhp-why-popover .frhp-why-popover-tagline em {
  font-style: italic;
  font-weight: 500;
}
.frhp .pp-popover-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  cursor: pointer;
  font-size: 20px;
  color: #aaa;
  line-height: 1;
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: sans-serif;
}
.frhp .pp-popover-close:hover {
  color: #333;
}
@media (max-width: 640px) {
  .frhp .frhp-why-modal {
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(12px, env(safe-area-inset-bottom, 0px));
  }
  .frhp .pp-popover.frhp-why-popover {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px 18px 14px;
    margin: 0 auto;
  }
  .frhp .frhp-why-popover-title {
    font-size: 19px;
    margin-bottom: 10px;
    padding-right: 32px;
  }
  .frhp .pp-popover > p,
  .frhp .frhp-why-popover-body p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
  }
  .frhp .pp-popover.frhp-why-popover .frhp-why-popover-tagline {
    font-size: 15px;
  }
  .frhp .pp-popover-close {
    top: 4px;
    right: 4px;
    font-size: 22px;
    padding: 10px 12px;
  }
}
@media (min-width: 641px) {
  .frhp .frhp-why-modal.pp-active {
    align-items: center;
  }
}