/*
 * responsive.css — responsive layer for the captured site
 * © 2026 DREM Book. All rights reserved.
 *
 * Loaded last in <head>, after the vendor bundles. Selectors carry an
 * `html body` prefix so they out-rank the vendor rules, including the
 * "deferred" stylesheet that the vendor JS injects after this file.
 *
 * Sections
 *   1. Base and fluid media
 *   2. Header, search and off-canvas menu (2b: phone and tablet header)
 *   3. Sliders and carousels
 *   4. Tables and wide content
 *   5. Forms and quoters
 *   6. Touch targets (small screens)
 *   7. Accessibility
 *   8. Overflow safety net
 */

/* ------------------------------------------------------------------ 1. Base */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html body {
  overflow-wrap: break-word;
}

/* The capture's theme sets `width:100% !important` on hero images, but their
   width="2560" attribute inside an inline <picture> still won on small screens. */
html body picture {
  display: block;
  max-width: 100%;
}

html body img,
html body video,
html body canvas,
html body iframe,
html body embed,
html body object {
  max-width: 100%;
}

html body img {
  height: auto;
}

html body .fw-image-container,
html body .fw-image-container picture {
  width: 100%;
  max-width: 100%;
}

html body .fw-image-container img {
  width: 100% !important;
  height: auto;
}

/* Flex/grid children may not shrink below their content unless told to. */
html body .container,
html body .container-fluid,
html body .row,
html body [class*="col-"] {
  min-width: 0;
}

/* Grid columns pad their content; without border-box a 100%-wide column
   overflows its row by the padding (seen on the trim-size and template pages). */
html body [class*="col-"] {
  box-sizing: border-box;
}

/* A .container nested inside another .container keeps its fixed Bootstrap width
   and overshoots the parent by the parent's padding (gift-cards, at tablet width). */
html body .container .container {
  width: auto;
  max-width: 100%;
}

/* The homepage Trustpilot bar bleeds past its container with a -130px margin sized for
   desktop; between 768px and 991px that pushed it about 100px off-screen. */
@media (max-width: 991px) {
  html body.homepage-wrapper .hero-trustpilot,
  html body .homepage-wrapper .hero-trustpilot {
    margin-left: -30px;
    margin-right: -15px;
  }
}

/* Bootstrap rows carry -15px side margins that assume a padded column/container.
   A row directly inside another row, or inside a padding-less .max800 container,
   has nothing to offset and sticks out 15px on each side. */
html body .row > .row,
html body .container.max800 > .row {
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------- 2. Header, search, menu */
html body #header-search,
html body #search-container,
html body #search-container fieldset,
html body #search-container ul,
html body #search-container li,
html body #search-container p,
html body #search-container .warning-messages {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html body #search-container input.main-search {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html body #slideout-content {
  max-width: 100%;
}

/* --------------------------------------------------------- 3. Sliders */
html body .slick-slider,
html body .slick-list {
  max-width: 100%;
}

html body .slick-list {
  overflow: hidden;
}

html body .slick-slide img {
  max-width: 100%;
}

/* On phones and tablets the arrows sit outside the slider and get clipped; overlay them instead. */
@media (max-width: 991px) {
  html body .slick-next {
    right: 4px;
  }

  html body .slick-prev {
    left: 4px;
  }

  html body .slick-prev,
  html body .slick-next {
    z-index: 2;
  }
}

/* ------------------------------------------------ 4. Tables and wide content */
html body .table-container,
html body .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html body table {
  max-width: 100%;
}

/* Wide data tables scroll inside themselves instead of widening the page. */
@media (max-width: 767px) {
  html body table.table,
  html body table.table-bordered {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Hover tooltips are a fixed 250-300px wide; never let one exceed the screen. */
html body .tooltip-container .tooltiptext {
  max-width: calc(100vw - 32px);
}

html body pre,
html body code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* Responsive 16:9 for embedded video without an intrinsic ratio. */
html body iframe[src*="youtube"],
html body iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ------------------------------------------- 2b. Phone and tablet header */
/* The template's icon links are 55px tall inside a 50px bar, so they overlap the
   announcement bar's close button, and only 30px wide. Make them 44px touch targets. */
html body #mobile-header:not(.open) .right-nav {
  margin-top: 3px;
}

html body #mobile-header .right-nav .nav-icons li {
  padding: 0;
}

html body #mobile-header .right-nav .nav-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
}

html body #mobile-header .right-nav .nav-icons li#pricing-list-item a {
  padding: 0 12px;
}

html body #mobile-header a.link-logo {
  min-width: 44px;
}

/* Announcement bar: legible text and a real close target. */
html body #announcement-bar .announcement-bar-dismiss,
html body #announcement-bar-secondary .announcement-bar-dismiss {
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

html body #announcement-bar .announcement-bar-dismiss a,
html body #announcement-bar-secondary .announcement-bar-dismiss a {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
}

@media (max-width: 767px) {
  html body #announcement-bar,
  html body #announcement-bar-secondary {
    height: auto;
    min-height: 44px;
  }

  html body #announcement-bar .announcement-bar-message,
  html body #announcement-bar-secondary .announcement-bar-message {
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 48px 8px 14px;
  }
}

/* The slide-out menu on phones and tablets: comfortable touch rows and a real close button. */
@media (max-width: 1024px) {
  html body #header-menu .right-nav .nav-icons li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  html body #header-menu .mobile-icon a.close-menu-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Nothing below 12px. (!important because the site sets some of these by id.) */
html body small,
html body .lblcharacterLimit,
html body #form1 .responsive-form fieldset ul li p label.inputted,
html body #form1 label.inputted,
html body #form1 small,
html body label.inputted {
  font-size: 12px !important;
}

/* ------------------------------------------------------ 5. Forms and quoters */
html body input,
html body select,
html body textarea {
  max-width: 100%;
}

/* The custom-dropdown plugin overlays an invisible absolutely-positioned <select>
   on each mask. The rule that makes the mask its positioning context lives in a
   stylesheet these pages don't load, so the select anchored to a far ancestor
   and pushed the page ~190px wide on phones. */
html body .responsive-form p.dropdown-mask,
html body .responsive-form p:has(> select.dropdown) {
  position: relative;
  overflow: hidden;
}

html body .responsive-form p.dropdown-mask select,
html body .responsive-form p:has(> select.dropdown) > select {
  left: 0;
  max-width: 100%;
}

html body #mini-quoter,
html body #quoter-container,
html body .quote-form,
html body .quote-form fieldset,
html body .dropdown-mask {
  max-width: 100%;
  box-sizing: border-box;
}

/* Long button labels wrap instead of pushing the page wider than the screen. */
html body .btn,
html body a.button,
html body button {
  max-width: 100%;
  white-space: normal;
}

/* ------------------------------------------- 6. Touch targets (small screens) */
@media (max-width: 767px) {
  /* 16px prevents iOS Safari from zooming the page when a field is focused. */
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="search"],
  html body input[type="password"],
  html body input[type="number"],
  html body select,
  html body textarea {
    font-size: 16px;
  }

  html body #site-footer a,
  html body #mobile-header a,
  html body .breadcrumbs-container a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }

  html body button,
  html body .btn,
  html body [role="button"] {
    min-height: 44px;
  }

  /* Full-width buttons add their padding on top of 100% and overshoot the screen. */
  html body .btn {
    box-sizing: border-box;
  }
}

/* --------------------------------------------------------- 7. Accessibility */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 2147483647;
  padding: 12px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  top: 0;
}

html body :focus-visible {
  outline: 3px solid #5548A6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------ 8. Overflow safety net */
/* `clip` (unlike `hidden`) does not create a scroll container, so sticky
   headers keep working. Root causes are fixed above; this catches the rest. */
html,
html body {
  max-width: 100%;
  overflow-x: clip;
}