/*
 * Webconnect mobile polish
 * Final responsive overrides for the standalone public website.
 */

.wc-mobile-table-hint {
  display: none;
}

.wc-calendar-primary {
  margin-top: 8px;
}

.wc-calendar-option {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  background: #fff;
  overflow: clip;
}

.wc-calendar-option summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  color: #17213a;
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.wc-calendar-option summary::-webkit-details-marker {
  display: none;
}

.wc-calendar-option summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #383ae7, #0ea5e9);
  font-size: 19px;
  line-height: 1;
}

.wc-calendar-option[open] summary::after {
  content: "−";
}

.wc-calendar-option summary:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.35);
  outline-offset: -3px;
}

.wc-calendar-panel {
  min-width: 0;
  padding: 0 10px 10px;
  border-top: 1px solid #e5e7eb;
}

.wc-calendar-panel .calendly-inline-widget {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 760px !important;
  min-height: 760px !important;
}

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  main > *,
  .wc-header-wrap,
  .wc-footer-wrap {
    min-width: 0;
    max-width: 100%;
  }

  /* The standalone build does not need the old Divi 100vw escape hatch. */
  .wc-page,
  .wc-home-page,
  .wc-about-new-page,
  .wccare-page,
  .wcportfolio-page,
  .wc-webdesign-new-page,
  .wcit-page,
  .wcm365-page,
  .wcemail-page,
  .wccontact-page,
  .wc-managed-page,
  .wcsolution-page,
  .wccase-page,
  .wc-legal-page,
  .wc-domain-order-page,
  .wc-header-wrap,
  .wc-footer-wrap {
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .wc-home-container,
  .wc-about-new-container,
  .wccare-container,
  .wcportfolio-container,
  .wc-webdesign-new-container,
  .wcit-container,
  .wcm365-container,
  .wcemail-container,
  .wccontact-container,
  .wc-managed-container,
  .wc-container,
  .wcsolution-container,
  .wccase-container {
    width: calc(100% - 32px) !important;
    max-width: 1360px !important;
    margin-inline: auto !important;
  }

  main :is(section, article, div, nav, form, fieldset),
  main :is(section, article, div, nav, form, fieldset) > * {
    min-width: 0;
  }

  main img,
  main video,
  main iframe,
  main svg {
    max-width: 100%;
  }

  main :is(h1, h2, h3, h4, p, li, a, button, label, summary) {
    max-width: 100%;
  }

  main :is(h1, h2, h3, h4) {
    overflow-wrap: break-word;
  }

  main :is(a, button, input, select, textarea) {
    box-sizing: border-box;
  }

  main :is(input, select, textarea) {
    max-width: 100%;
    font-size: 16px;
  }

  main :is(.wc-home-btn, .wc-btn, .wc-about-new-btn, .wccare-btn, .wcportfolio-btn, .wcportfolio-work-link, .wc-webdesign-new-btn, .wcit-btn, .wcm365-btn, .wcemail-btn, .wccontact-btn, .wc-managed-btn) {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
  }

  .wc-website-services-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .wc-website-services-page .wc-home-hero h1 {
    white-space: normal !important;
  }

  .wccontact-form,
  .wcmaint-form {
    width: 100%;
  }

  #contact-form,
  #callback-form {
    scroll-margin-top: 92px;
  }

  .wc-mobile-call {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 50px;
    height: 50px;
    justify-content: center;
    padding: 0;
    box-shadow: 0 12px 30px rgba(56, 58, 231, 0.34);
  }

  .wc-mobile-call-icon {
    font-size: 19px;
    line-height: 1;
  }

  .wc-mobile-call > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .wc-back-top {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(74px, calc(env(safe-area-inset-bottom) + 62px));
  }

  .wc-mobile-table-hint {
    display: block;
    margin: 0 0 10px;
    color: #52627a;
    font-size: 13px;
    font-weight: 700;
  }

  .wcm365-table-wrap {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
  }

  .wcm365-table th,
  .wcm365-table td {
    scroll-snap-align: start;
  }

  .wc-calendar-primary {
    width: auto !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wc-webdesign-new-form-wrap,
  .wccare-form-wrap,
  .wc-managed-form-wrap {
    width: 100%;
    min-width: 0;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .wc-calendar-panel .calendly-inline-widget,
  .wccare-form-wrap .calendly-inline-widget,
  .wc-webdesign-new-form-wrap .calendly-inline-widget,
  .wc-managed-calendly,
  .calendly-inline-widget {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 780px !important;
    min-height: 780px !important;
  }

  .wc-calendar-option:not([open]) .calendly-inline-widget {
    display: none;
  }
}

@media (max-width: 480px) {
  .wc-home-container,
  .wc-about-new-container,
  .wccare-container,
  .wcportfolio-container,
  .wc-webdesign-new-container,
  .wcit-container,
  .wcm365-container,
  .wcemail-container,
  .wccontact-container,
  .wc-managed-container,
  .wc-container,
  .wcsolution-container,
  .wccase-container {
    width: calc(100% - 28px) !important;
  }

  .wccontact-form-box,
  .wc-managed-contact-box,
  .wccare-contact-box,
  .wc-webdesign-new-contact-box {
    padding: 18px !important;
  }

  .wc-calendar-option summary {
    padding: 13px 14px;
    font-size: 14px;
  }

  .wc-calendar-panel {
    padding-inline: 4px;
  }

  .wc-calendar-panel .calendly-inline-widget,
  .wccare-form-wrap .calendly-inline-widget,
  .wc-webdesign-new-form-wrap .calendly-inline-widget,
  .wc-managed-calendly,
  .calendly-inline-widget {
    height: 740px !important;
    min-height: 740px !important;
  }
}

@media (max-width: 360px) {
  .wc-home-hero h1 {
    white-space: normal !important;
  }

  .wc-home-confidence-grid {
    grid-template-columns: 1fr !important;
  }

  .wc-home-confidence-grid div,
  .wc-home-confidence-grid div:nth-child(odd),
  .wc-home-confidence-grid div:nth-last-child(-n + 2) {
    border-right: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
  }

  .wc-home-confidence-grid div:last-child {
    border-bottom: 0 !important;
  }

  .wc-home-brand-lockup {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .wc-home-brand-logo {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }

  .wc-footer-bottom-links,
  .cookie-banner-actions {
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-mobile-call {
    animation: none !important;
  }
}