/* ==========================================================================
   Site-wide enhancements: responsive safety net + page loading animation
   ========================================================================== */

/* ---------- Responsive safety net (phone, tablet, desktop) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }                 /* never allow sideways scrolling */
img, video, svg, canvas { max-width: 100%; }
img { height: auto; }
iframe, embed, object { max-width: 100%; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.container, .container-fluid, .custom-container-fluid { max-width: 100%; }
p, li, h1, h2, h3, h4, h5, h6, a { overflow-wrap: break-word; }

/* Long legal / policy tables scroll inside themselves instead of the page */
@media (max-width: 767.98px) {
  .table-responsive-auto, .content-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }
  .btn { white-space: normal; }
  input, select, textarea { font-size: 16px; }  /* stops iOS zoom on focus */
  .navbar-collapse { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* Tablet: keep slick sliders inside the viewport */
.slider, .slick-slider, .slick-list { max-width: 100%; }
.slick-list { overflow: hidden; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; }
}

/* Comfortable touch targets */
@media (hover: none) and (pointer: coarse) {
  .nav-link, .dropdown-item, .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .dropdown-item { display: block; line-height: 2; }
}

/* Visible keyboard focus (accessibility signal for search engines too) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(26, 140, 240, .55); outline-offset: 2px;
}

/* ---------- Page loading animation (healthcare themed) ---------- */
/* A light backdrop covers the page. In the centre the Rescribe logo beats like a heart and, directly
   beneath it, a glowing blue-to-green ECG trace draws itself from one end to the other, then fades and
   repeats. The trace is a small animated SVG (draw animation lives inside the image).
   Pure CSS on <html>, toggled by the "is-loading" class, so no extra markup is needed on any page. */
html.is-loading::before {
  content: ""; position: fixed; inset: 0; z-index: 99998;
  /* Translucent enough to show the page, opaque enough that the logo stays clearly readable */
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .90) 20%, rgba(246, 250, 255, .82) 55%, rgba(238, 246, 254, .78) 100%);
  animation: rs-failsafe 0s linear 6s forwards;      /* auto-hide if JS never runs */
}
html.is-loading::after {
  content: ""; position: fixed; z-index: 99999; top: 50%; left: 50%;
  width: min(460px, 92vw); height: 176px; margin: -96px 0 0 calc(min(460px, 92vw) / -2);
  /* layers: logo (top), ECG trace (bottom) */
  background-image: url("../assets/img/logo-color.svg"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 120' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230b6fd1' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%230b6fd1'/%3E%3Cstop offset='.5' stop-color='%230b6fd1'/%3E%3Cstop offset='.64' stop-color='%2300a6d6'/%3E%3Cstop offset='.78' stop-color='%233fb68a'/%3E%3Cstop offset='.88' stop-color='%237fb62a'/%3E%3Cstop offset='1' stop-color='%237fb62a' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-5%25' y='-40%25' width='110%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cstyle%3Epath%7Bfill:none;stroke:url(%23g);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:d 2s cubic-bezier(.45,.05,.35,1) infinite%7D.glow%7Bstroke-width:3;opacity:.35;filter:url(%23b)%7D.line%7Bstroke-width:1.6%7D@keyframes d%7B0%%7Bstroke-dashoffset:1;opacity:1%7D62%%7Bstroke-dashoffset:0;opacity:1%7D86%%7Bstroke-dashoffset:0;opacity:1%7D100%%7Bstroke-dashoffset:0;opacity:0%7D%7D%3C/style%3E%3Cpath class='glow' pathLength='1' d='M0 60H160l8-3 8 3h8l9-28 9 36 7-8h18l7-9 7 11h8l9-4 5 3h4l10-54 12 96 8-52 9-12 10 12h12l5-6 5 8 5-4 10-26 10 30 6-8h116'/%3E%3Cpath class='line' pathLength='1' d='M0 60H160l8-3 8 3h8l9-28 9 36 7-8h18l7-9 7 11h8l9-4 5 3h4l10-54 12 96 8-52 9-12 10 12h12l5-6 5 8 5-4 10-26 10 30 6-8h116'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 220px 66px, 100% auto;
  background-position: 50% 0, 50% 100%;
  animation: rs-beat 2s ease-in-out infinite, rs-failsafe 0s linear 6s forwards;
}
/* While leaving: same visuals, but no auto-hide (the next page replaces this one) */
html.is-leaving::before { animation: none; }
html.is-leaving::after  { animation: rs-beat 2s ease-in-out infinite; }
html.is-loading.is-done::before { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
html.is-loading.is-done::after  { opacity: 0; transition: opacity .2s ease;  pointer-events: none; }

/* Thin top progress bar shown while leaving a page */
html.is-leaving body::before {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000;
  background: #0b6fd1; box-shadow: 0 0 8px rgba(11, 111, 209, .55);
  animation: rs-progress 2.2s ease-out forwards;
}

/* Content reveal once the page has loaded */
@keyframes rs-reveal { from { opacity: 0; } to { opacity: 1; } }
html.is-ready body > .header, html.is-ready body > section, html.is-ready body > div { animation: rs-reveal .5s ease both; }

/* The logo does a "lub-dub" double beat in step with the trace being drawn */
@keyframes rs-beat {
  0%, 60%, 100% { background-size: 220px 66px, 100% auto; }
  8%            { background-size: 238px 71px, 100% auto; }
  18%           { background-size: 220px 66px, 100% auto; }
  28%           { background-size: 230px 69px, 100% auto; }
  40%           { background-size: 220px 66px, 100% auto; }
}
@keyframes rs-progress { to { width: 92%; } }
@keyframes rs-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Reduced motion: drop the decorative logo beat. The ECG trace keeps drawing, because a loading
   indicator is essential feedback and its slow left-to-right draw has no flashing or large movement. */
@media (prefers-reduced-motion: reduce) {
  html.is-loading::before, html.is-loading::after { animation: none; }
  html.is-ready body > * { animation: none !important; }
}