/* ===============================================
   POLICY PAGES — Responsive heading fixes
   Applies to: Privacy Policy, Terms & Conditions,
   Refund Policy. Prevents heading clipping on
   narrow / mobile viewports.
   =============================================== */

/* Fixed header is ~120px tall (.ree-header { min-height: 120px })
   and on desktop the global .header-spacer is 0px, so the page
   content sits behind the fixed navbar. We need top padding large
   enough to clear the header AND still leave breathing room for the
   page heading. */
.sec-pad {
  padding: 160px 0 80px;
  overflow-x: hidden;
}

.sec-pad .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  width: 100%;
}

/* Force responsive heading — overrides global `h1 { font-size:45px }`.
   Uses !important to defeat any stale cascade issues on small screens. */
.sec-pad h1,
.sec-pad .refund-title,
.sec-pad h1 b,
.sec-pad h1 strong {
  font-size: clamp(1.35rem, 4.5vw, 2.4rem) !important;
  line-height: 1.25 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin: 0 0 20px 0;
  padding: 0 4px;
  max-width: 100%;
  display: block;
  white-space: normal;
}

/* Some policy pages wrap the h1 in a <p> — keep layout tidy */
.sec-pad p > h1 {
  margin-top: 0;
}

.sec-pad h2,
.sec-pad h3,
.sec-pad h4 {
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  font-size: clamp(1.05rem, 3.2vw, 1.75rem);
  line-height: 1.3;
}

.sec-pad p,
.sec-pad li,
.sec-pad a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile breakpoints: the global .header-spacer is 110px (≤1150px)
   or 105px (≤480px), so the body already sits below the navbar.
   Use a smaller top padding on mobile so the heading doesn't get
   pushed too far down the screen. */
@media (max-width: 1150px) {
  .sec-pad {
    padding: 40px 0 60px;
  }
}

@media (max-width: 600px) {
  .sec-pad {
    padding: 30px 0 40px;
  }
  .sec-pad h1,
  .sec-pad .refund-title,
  .sec-pad h1 b,
  .sec-pad h1 strong {
    font-size: clamp(1.1rem, 6vw, 1.6rem) !important;
    padding: 0 8px;
  }
}

@media (max-width: 380px) {
  .sec-pad h1,
  .sec-pad .refund-title,
  .sec-pad h1 b,
  .sec-pad h1 strong {
    font-size: 1.05rem !important;
  }
}