/*
  Vibedsites: the small corrections every site needs.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Not a theme and not a design layer. These are the handful of rules that stop
  a page breaking on a phone, and they are here rather than in each site
  because the same defect keeps arriving from the same place: a page written
  for a desktop browser puts a bare URL, an email address or a long product
  code in the text, and none of those carry a break opportunity. On a 360px
  screen the line then runs past the edge, and either the page scrolls sideways
  or the theme's overflow-x: hidden quietly cuts the end off.

  Deliberately narrow. Breaking is allowed only where the text cannot otherwise
  fit, so nothing moves on any screen wide enough to hold it whole, and the
  rules stay off desktop entirely.
*/

@media (max-width: 640px) {
  /* Links are the usual culprit: a URL, an address or a phone number set as
     its own anchor text is one unbreakable token. anywhere lets the browser
     break mid-token, but only when there is no other way to fit it. */
  a[href^="http"],
  a[href^="mailto:"],
  a[href^="tel:"] { overflow-wrap: anywhere; }

  /* Running text: break-word is the conservative form, so ordinary prose still
     wraps between words and only an over-long word is broken. */
  p, li, dd, td, th, figcaption, blockquote, address { overflow-wrap: break-word; }

  /* A media element with an intrinsic width wider than the screen is the other
     half of the same problem. */
  img, svg, video, iframe, canvas { max-width: 100%; }
}