/* ==========================================================================
   Damascus Projects Global - responsive safety net for every public page
   (loaded last by templates/site/base.html, after dpg-site-mobile.css).
   Phones 320-560px, tablets 561-1024px; desktop is unaffected unless noted.
   ========================================================================== */

/* ---------- everywhere ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe, canvas, svg, embed, object { max-width: 100%; }
img, video { height: auto; }
.dp-main iframe { width: 100%; }
.dp-main :is(p, li, dd, td, h1, h2, h3, h4, a, span, small, strong) { overflow-wrap: break-word; }
.dp-main a[href^="mailto:"], .dp-main a[href^="http"] { overflow-wrap: anywhere; }

/* Wide tables inside policies scroll sideways instead of breaking the page */
.dp-legal__body table, .dp-main table:not(.table-fixed) {
  display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse;
}
.dp-legal__body pre, .dp-main pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }

/* Footer logo: "PROJECTS GLOBAL" on one line, no wider than "DAMASCUS" */
.dp-footer .dp-brand__sub { white-space: nowrap; font-size: .72rem; letter-spacing: .1em; }

/* Keep keyboard focus visible on all controls */
.dp-body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(253, 194, 16, .85); outline-offset: 2px;
}

/* ---------- tablets and phones ---------- */
@media (max-width: 1024px) {
  body.dp-body { overflow-x: clip; }

  /* Global reach stats: two columns on tablets */
  .dp-reach .dp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

  /* Hide the chat button while the phone menu is open */
  body:has(.dp-header.is-open) .dpa-launch { opacity: 0; pointer-events: none; }
  /* Long phone menus scroll inside the screen */
  .dp-header.is-open .dp-nav { max-height: calc(100dvh - var(--dp-header-h, 70px) - 20px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* Comfortable tap targets */
  .dp-btn, .dp-login, .dp-join, .dp-nav__link, .dp-nav__item { min-height: 44px; }
  .dp-footer__links a, .dp-footer__legal a, .dp-footer__more a { min-height: 36px; }
  .dp-footer__links a, .dp-footer__legal a, .dp-footer__more a { display: inline-flex; align-items: center; }
  .dp-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* iPhone does not zoom into form fields when they use 16px text */
  .dp-body input:not([type="checkbox"]):not([type="radio"]),
  .dp-body select, .dp-body textarea { font-size: 16px !important; }

  /* Global reach: one stat per row so nothing is cut off */
  .dp-reach .dp-stats { grid-template-columns: minmax(0, 1fr) !important; gap: .6rem; }
  .dp-reach .dp-stat { padding: .7rem 1rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .04); }

  /* Button groups stack full-width instead of squeezing */
  .dp-cta__actions, .dp-hero__actions, .dp-actions-row { display: flex; flex-wrap: wrap; gap: .6rem; }
  .dp-cta__actions > .dp-btn { flex: 1 1 140px; }

  /* Policy pages: roomier reading, meta chips wrap */
  .dp-legal__doc { padding-left: 16px; padding-right: 16px; }
  .dp-legal__meta { flex-wrap: wrap; gap: 6px; }
  .dp-legal__body { font-size: 15px; line-height: 1.7; }
  .dp-legal__body h2 { font-size: 1.15rem; line-height: 1.3; scroll-margin-top: calc(var(--dp-header-h, 70px) + 12px); }
  .dp-legal__help { flex-direction: column; align-items: flex-start; gap: .8rem; }

  /* FAQ accordions: question text wraps nicely beside the number */
  .dp-faq .accordion-button { gap: .6rem; padding-right: 2.6rem; line-height: 1.35; }

  /* Footer: tidy single column */
  .dp-footer__grid { gap: 1.6rem; }
  .dp-footer__bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .dp-footer__legal, .dp-footer__more { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
}

/* ---------- very small phones (320px) ---------- */
@media (max-width: 360px) {
  .dp-container { padding-left: 14px; padding-right: 14px; }
  .dp-brand__name { font-size: 1rem; }
  .dp-brand__sub { font-size: .55rem; }
  .dp-hero h1, .dp-page-hero h1 { font-size: 1.55rem; line-height: 1.2; }
  .dp-section h2 { font-size: 1.3rem; }
}

/* ---------- landscape phones: short screens ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .dp-hero { min-height: auto; }
}