/*
  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%; }
}

/* ---- dropdown menus on a converted site ---------------------------------
   The de-theme compiler reads authored CSS and reattaches each rule to the
   element it computed. A dropdown is written as

       .nav li:hover > ul { visibility: visible }

   where the hovered element is the parent item and the styled element is the
   submenu. Flattening that onto the submenu produces "reveal this when you
   hover it", and you cannot hover something that is hidden, so the menu never
   opens. Restoring the relationship here fixes it for every converted site at
   once, and :focus-within gets a keyboard to the same place.

   Scoped to nested lists inside a nav, and it can only ever reveal a submenu
   while its own parent item is hovered or focused, which is what a dropdown
   is. No bespoke Vibedsites site has a nested nav list at all.             */
nav li:hover > ul,
nav li:focus-within > ul,
header nav li:hover > ul,
header nav li:focus-within > ul { visibility: visible !important; opacity: 1 !important; }