/* ---------------------------------------------------------------------------
   Responsive safety net
   ---------------------------------------------------------------------------
   Loaded last, after the theme's own stylesheets, so it wins.

   The theme is broadly responsive already; this file exists to stop the
   handful of things that commonly force a page wider than a phone screen and
   cause the whole layout to scroll sideways:

     - media with intrinsic dimensions (images, videos, embedded maps/iframes)
     - wide data tables
     - long unbroken strings such as URLs, emails and postcodes

   Nothing here changes the desktop layout: every rule either caps a maximum
   or only applies below a phone/tablet breakpoint.
--------------------------------------------------------------------------- */

/* Nothing may make the document wider than the viewport. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Media scales down inside its column instead of pushing the page wide. */
img,
video,
svg,
canvas {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

/* Long words, URLs and email addresses wrap rather than overflow. */
p,
li,
td,
th,
dd,
dt,
figcaption,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Preformatted blocks are a classic source of sideways scroll. */
pre,
code {
	white-space: pre-wrap;
	word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Bootstrap gutter overflow
   ---------------------------------------------------------------------------
   Below 1200px the theme sets `.ttm-row .container { padding: 0 }`, then
   cancels the matching -15px row gutter with

       .ttm-row .container > .row { margin: 0 }

   That child combinator only reaches rows that are a *direct* child of the
   container. A row nested any deeper keeps its negative margins against a
   zero-padding container and pokes ~15px past each edge -- visible on the
   blog and flip listings. Same rule, without the child combinator.
--------------------------------------------------------------------------- */
@media all and (max-width: 1199px) {
	.ttm-row .container .row,
	.ttm-row .container-fluid .row,
	.ttm-page-title-row .container .row,
	.element-row .container .row,
	.sidebar .container .row,
	footer .container .row {
		margin-right: 0;
		margin-left: 0;
	}
}

/* Flex/grid children default to min-width:auto, which lets a long unbroken
   string stretch a column past its track. */
[class*="col-"],
.ttm-box-col-wrapper {
	min-width: 0;
}

@media (max-width: 767px) {
	/* A wide table scrolls within its own box, keeping the page itself
	   fixed to the screen width. */
	.table-wrap,
	.table-responsive {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Buttons sitting side by side get cramped below ~400px; let them use
	   the full column width where the theme has not already handled it. */
	.ttm-btn {
		white-space: normal;
	}
}

/* Very small screens: keep the gutters consistent so content never touches
   the edge of the display. */
@media (max-width: 480px) {
	.container,
	.container-fluid {
		padding-left: 16px;
		padding-right: 16px;
	}
}