/* ==================================================================== *
 * Trevin Webb Insurance — mobile corrections
 *
 * Loaded last, after site.css, forms.css and worksheet.css, so it wins
 * without anyone having to touch those files.
 *
 * Everything that changes how the site looks is inside a media query.
 * On a desktop browser this file is close to a no-op — the only rules
 * that apply at every width are text-size-adjust, the tap-highlight
 * colour and the word-wrap guards, none of which move a pixel on a
 * screen wider than 900px.
 * ==================================================================== */

/* -------------------------------------------------------------------- *
 * 1. Stop mobile browsers inflating text on their own
 * Safari on iPhone and Chrome on Android both resize text in blocks they
 * judge too narrow, which pulls headings and body copy out of the
 * proportions the page was built in.
 * -------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* A grey flash on every tap is an Android/iOS default from the era of
   300ms click delay. The site has its own hover and focus states. */
* { -webkit-tap-highlight-color: rgba(180, 32, 63, .12); }

/* Long unbroken strings — a policy number, an email address, a URL in a
   coverage description — are the usual cause of a page that scrolls
   sideways on a 360px phone. */
p, li, dd, td, th, label, h1, h2, h3, h4, .elementor-widget-text-editor {
  overflow-wrap: break-word;
  word-wrap: break-word;
}


/* ==================================================================== *
 * 2. THE BIG ONE: iOS zooms into any form field under 16px
 *
 * Safari on iPhone treats a font-size below 16px on a focused input as a
 * sign the field is too small to read, zooms the whole page in, and does
 * not zoom back out when the field is blurred. The visitor is then left
 * scrolling a page that is wider than the screen, halfway through a
 * quote request. Every control on this site was 15px.
 *
 * Raised to 16px on phones only, so the desktop form keeps the
 * proportions it was designed with.
 * ==================================================================== */
@media (max-width: 900px) {
  /* The :not() pairs are not decoration. forms.css carries
       .tw-form input:not([type="checkbox"]):not([type="radio"]) { font: ... !important }
     which is more specific than a plain .tw-form input[type="text"], so an
     !important there beats an !important here unless this selector matches
     its weight. The extra :not([type="hidden"]) puts this one ahead. */
  .tw-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .tw-form select:not([hidden]),
  .tw-form textarea:not([hidden]),
  .tw-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .tw-field select:not([hidden]),
  .tw-field textarea:not([hidden]),
  .tw-ws-grid input:not([type="checkbox"]):not([type="radio"]),
  .tw-ws-grid select:not([hidden]) {
    font-size: 16px !important;
  }

  /* Everything else with a text cursor - the newsletter box, search, any
     field a plugin left behind. Lower specificity, so it only lands where
     nothing above already won. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* The currency prefix sits over the field and has to move with it. */
  .tw-ws-input > span { font-size: 16px; }
}


/* ==================================================================== *
 * 3. Touch targets
 * Apple's guidance is 44x44pt, Google's is 48x48dp. The buttons were
 * landing at roughly 41px — close, and close is what produces mis-taps
 * on the Send button at the end of a five-step form.
 * ==================================================================== */
@media (max-width: 900px) {
  .tw-form button,
  .tw-form .tw-submit,
  .tw-modal-foot button,
  .tw-ws-add,
  .tw-modal-x {
    min-height: 48px;
  }

  /* The close X on the dialog was a 24px glyph with little around it. */
  .tw-modal-x {
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Checkbox and radio rows: the whole label is the target, not the
     12px square. */
  .tw-choice {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Menu and footer links sat at the line-height of the text. */
  .ekit-sidebar-widget ul li > a,
  .tw-lang button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ==================================================================== *
 * 4. The quote dialog on a phone
 *
 * Three separate problems, all of them iOS:
 *
 *   vh is measured against the viewport with the URL bar hidden, so a
 *   dialog capped at 88vh is taller than the screen until the visitor
 *   scrolls. dvh measures what is actually visible.
 *
 *   Scrolling to the bottom of the dialog then keeps going and scrolls
 *   the page behind it. overscroll-behavior stops the chain.
 *
 *   On a notched iPhone the dialog can sit under the home indicator.
 * ==================================================================== */
.tw-modal-dialog {
  max-height: min(88dvh, 860px);
}

.tw-modal-body {
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .tw-modal {
    padding: 12px 10px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .tw-modal-dialog {
    width: 100%;
    max-height: min(92dvh, 860px);
    border-radius: 12px;
  }
  .tw-modal-body { padding: 16px 16px 20px; }
}


/* ==================================================================== *
 * 5. The liability worksheet on a phone
 * Three columns of money fields do not fit on a 390px screen. They were
 * not overflowing — the grid was collapsing them to something like 70px
 * wide each, which is too narrow to read a six-figure number in.
 * ==================================================================== */
@media (max-width: 720px) {
  .tw-ws-policy {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tw-ws-total {
    max-width: none;
    margin-left: 0;
  }
}


/* ==================================================================== *
 * 6. Safe areas
 * Anything pinned to an edge needs to clear the notch and the home
 * indicator on iPhone, and the gesture bar on recent Android.
 * ==================================================================== */
@supports (padding: max(0px)) {
  @media (max-width: 900px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .ekit-sidebar-widget {
      padding-top: max(0px, env(safe-area-inset-top));
      padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
  }
}


/* ==================================================================== *
 * 7. Media
 * An image or video that is wider than its column is the other common
 * cause of sideways scroll. Guarded rather than assumed.
 * ==================================================================== */
@media (max-width: 900px) {
  img, video, iframe, table { max-width: 100%; }
  table { display: block; overflow-x: auto; }
}


/* ==================================================================== *
 * 8. Motion
 * Respecting the system setting, which both platforms expose.
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==================================================================== *
 * 6. The header on a phone
 *
 * The contact block (phone number and opening hours) is marked
 * "hidden on tablet and mobile" in the markup, but the rule that would
 * hide it loses to Elementor's own display rule for the element, so on a
 * phone it stayed on screen squeezed into a 37px column: one word per
 * line, the header nearly 270px tall, and the EN/ES buttons pushed over
 * the top of the white bar.
 *
 * Rather than hide the number on the device most likely to call it, the
 * block is laid out across the header in one small readable line, the
 * duplicate small logo is dropped, and the language buttons are put
 * under the menu icon where they belong.
 * ==================================================================== */
@media (max-width: 767px) {
  /* the white bar itself: one row, no wrapping, tighter padding */
  #masthead .elementor-element-3ee98ed9 > .e-con-inner { padding: 0 !important; }
  #masthead .elementor-element-300c4043 > .e-con-inner {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  /* logo: the desktop layout pulls it 43px left, which on a phone puts it
     under the edge of the card */
  #masthead .elementor-element-4e50c4e5 {
    --margin-left: 0px !important;
    flex: 0 0 168px !important;
    max-width: 168px !important;
    /* the grey rule that divides logo from wordmark on a desktop is left
       hanging in mid-air once the contact line moves below */
    border-right: 0 !important;
  }
  #masthead .elementor-element-7ff94712,
  #masthead .elementor-element-7ff94712 > div,
  #masthead .elementor-element-7ff94712 a { width: 100% !important; }
  #masthead .elementor-element-7ff94712 img {
    width: 100% !important;
    max-width: 168px !important;
    height: auto !important;
    max-height: none !important;   /* a 52px cap was squashing the mark */
    object-fit: contain !important;
  }

  /* the second, smaller copy of the logo next to the contact block */
  #masthead .elementor-element-14296b32 { display: none !important; }

  /* Phone and hours go on their own line under the logo. Beside it they
     left the animated logo about 110px to play in, where the wordmark it
     draws is illegible and runs straight into the phone number, with the
     divider stranded between them. */
  #masthead .elementor-element-379dcd3e {
    display: flex !important;
    flex: 1 0 100% !important;
    order: 3 !important;
    min-width: 0 !important;
    padding: 2px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  #masthead .elementor-element-171fe99 { width: 100% !important; }
  #masthead .elementor-element-171fe99 .elementor-icon-list-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 2px 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #masthead .elementor-element-171fe99 .elementor-icon-list-item {
    width: auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #masthead .elementor-element-171fe99 .elementor-icon-list-item,
  #masthead .elementor-element-171fe99 .elementor-icon-list-text,
  #masthead .elementor-element-171fe99 a {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  #masthead .elementor-element-171fe99 .elementor-icon-list-icon svg,
  #masthead .elementor-element-171fe99 .elementor-icon-list-icon i {
    width: 13px !important;
    height: 13px !important;
    font-size: 13px !important;
  }

  /* The menu icon is pulled up 223px to sit in the tall desktop header.
     On a phone the header is 76px, so that pull threw the button off the
     top of the screen - on the old layout it hung outside the white bar,
     and once the bar was made shorter it disappeared entirely. */
  #masthead .elementor-element-bf87860 {
    --margin-top: 0px !important;
    margin-top: 0 !important;
    top: auto !important;
  }
  #masthead .elementor-element-a4e16d6 {
    --margin-top: 0px !important;
    margin-top: 0 !important;
  }

  /* menu icon with the language buttons beneath it */
  #masthead .elementor-element-a4e16d6 {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    align-self: center !important;
  }
  #masthead .elementor-element-bf87860 { width: auto !important; }
  #masthead .ekit-offcanvas-toggle-wraper { text-align: center; }
  #masthead .tw-lang { margin-top: 2px !important; gap: 3px !important; }
  #masthead .tw-lang button {
    min-height: 32px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
  }
}


/* On a tablet the same contact block still has room for one line each,
   but the hours wrapped mid-phrase ("9AM-" / "6PM") against the menu
   button. Nothing else about the tablet header changes. */
@media (min-width: 768px) and (max-width: 1024px) {
  #masthead .elementor-element-379dcd3e { padding-right: 10px !important; }
  #masthead .elementor-element-171fe99 .elementor-icon-list-item { white-space: nowrap !important; }
  #masthead .elementor-element-171fe99 .elementor-icon-list-text { font-size: 14px !important; }
}