/*
 * Small additions for the Statamic build. The original styles are the WordPress theme and plugin stylesheets
 * in public/wp-content/ and public/css/wp-inline-*.css.
 */

/* "Hide on" design setting (WPBakery/The7 breakpoints). */
@media (min-width: 992px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .hide-tablet { display: none !important; } }
@media (max-width: 767px) { .hide-phone { display: none !important; } }

/* Hero "50 year" stamp: the theme sizes it width:100% inside a box that takes its width from the image, so the box is
   0px wide until the (lazy) image loads, then the button and heading jump. A fixed width keeps the space from the start;
   the theme's smaller max-widths for tablets and phones still apply. */
#main .home-hero-wrapper .ult-content-box img,
#main .general-hero-wrapper .ult-content-box img { width: 143px; height: auto; }

/* WPBakery full-width rows: its script stretches them to the window width after the page has appeared, which made the
   hero slide sideways. These rules put them in the same place from the first paint (rows have WPBakery's -15px side
   margins; the script then sets the same values inline). Pages with a sidebar keep the script-only behaviour. */
#main.sidebar-none .vc_row[data-vc-full-width="true"] {
    position: relative;
    box-sizing: border-box;
    left: calc(50% - 50vw + 15px);
    width: 100vw;
    max-width: 100vw;
}
#main.sidebar-none .vc_row[data-vc-full-width="true"]:not([data-vc-stretch-content]) {
    padding-left: calc(50vw - 50% - 15px);
    padding-right: calc(50vw - 50% - 15px);
}

/* Ultimate Addons content boxes: on hover its script writes "border-color: transparent" inline, and WordPress's block
   CSS (wp-inline-before.css) gives any element with an inline border-color a solid border. That made a 3px black border
   appear and fade out over 0.7s on the first hover (the icons under "Why pipe relining"). No content box here has a border. */
.ult-content-box { border-style: none; }