/*
 * Safari < 14.1 (e.g. iPhone 11 on iOS 13) ignores `gap` on flex containers.
 * includes/flexgap-fallback.php adds html.no-flexgap on those browsers; these rules
 * fake the mobile gaps with margins. Desktop (md+) layouts switch direction/gap, so
 * the fallback is limited to mobile widths.
 */
@media (max-width: 767px) {
  /* row direction */
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-s4 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]),
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-1 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 4px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-x-s6 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 6px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-s8 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]),
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-2 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 8px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-3 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 12px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-s16 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 16px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-s24 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 24px; }
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-s32 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]),
  .no-flexgap .tw-flex:not(.tw-flex-col).tw-gap-8 > * + *:not([class*="tw-ms-"]):not([class*="tw-ml-"]):not([class*="tw-mx-"]) { margin-left: 32px; }

  /* column direction */
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-s4 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-1 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-1 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 4px; }
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-s8 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-s8 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-2 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 8px; }
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-3 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-3 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-s12 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 12px; }
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-s16 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]),
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-s16 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 16px; }
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-s24 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 24px; }
  .no-flexgap .tw-flex.tw-flex-col.tw-gap-y-s40 > * + *:not([class*="tw-mt-"]):not([class*="tw-my-"]) { margin-top: 40px; }
}

/*
 * Check icons are <img width="35" height="35" class="tw-max-w-[22px]">. Safari < 14 doesn't
 * derive the aspect ratio from those attributes, so it keeps the 35px height: the icon drops
 * below its text and each row grows. Pin the size so it matches modern browsers.
 */
img.strecheced-img-fix.tw-max-w-\[22px\][src*="check.svg"] { width: 22px; height: 22px; flex-shrink: 0; }

/*
 * FAQ accordions: older WebKit can't lay out <summary> as a flex box and shows the
 * native disclosure triangle, pushing the +/- icon under the question. Position the
 * icon instead so the layout doesn't depend on summary flex support.
 */
#faq summary { display: block; position: relative; padding-right: 64px; list-style: none; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary > h3 { margin-right: 0; }
#faq summary > span { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); line-height: 0; }