/* np_int.css

Breakpoints breakdown:
1080px - special breakpoint: (WAS when parallax background shifted from panel element to a special full-sized-fixed-element)
1020px - lower-bound desktop-centric content, upper-bound tablet content
768px - lower-bound tablet-centric content, upper-bound mobile content
360px - *very* specific content shaping at this breakpoint

KEY PAGE WIDTH AS .general-container REACHES MAX WIDTH --main-gutter-max-width, PERCENTAGE FACTOR --main-gutter-width-percent
> > > 1600px (+ scrollbar width: 25px) < < < (this is the point where the main gutter stops increasing even though browser width continues)
*/

*,::before,::after {
    box-sizing: border-box;
}

:root {
    /* body part dimensions */
    --main-gutter-max-width:1280px; /* was 1080px */
    --main-gutter-width-percent:90%;
    --orange-strip-height: 60px; /* was: 38px; */
    --header-height:104px;
    --total-header-height:calc(var(--orange-strip-height)  + var(--header-height));
    --header-transition-time:250ms;
    --img-fade-transition-time:250ms;

    /* fonts */
    --heading-text-size: calc( max(20px, min(3.5vw, 52px) ) );
    /* h2 was 32px @ 1350, 24.5px @ 375 */
    --h2-headline-text-size: calc( max(30px, min(1.65rem + 1vw, 40px) ) );
    --body-text-size: calc( max(16px, min(1.7vw, 26px) ) );
    --larger-body-text-size: calc( max(18px, min(2.5vw, 37px) ) );
    /* font list */
    --principal-fonts: Helvetica, /* 'Lucida Sans', Tahoma, 'Trebuchet MS', */ Arial, sans-serif;
}

body {
    font-family: var(--principal-fonts);
}

.show-outlines .outline-elements,
.show-outlines .outline-elements * {
    outline:1px solid rgba(255,0,0,0.25);
}
.purple-dashed-outline {
    outline:2px dashed purple;
}

/* override auto-linked phone number style color */
a[href^=tel]:link,
contact-phone a:link {
    color:inherit !important;
}

#scroll_position_monitor {
    position:fixed;
    left:0px;
    top:50%;
    z-index:1000001;
    background-color:white;
    color:black;
    padding:5px;
    left:5px;
}

body .hide {
    display:none !important;
}
/* disable text selection on specific elements */
.disable-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* also add attribute to element: unselectable="yes" */
embed, iframe, object, video {
	max-width: 100%;
}
/* for some unknown reason, text inputs must hide the placeholder when received focus */
input[type="search"]:focus::placeholder,
input[type="text"]:focus::placeholder,
textarea:focus::placeholder {
    opacity:0;
}
/* client specified a given form should keep the element placeholder visible even when elements get focus */
form.keep-placeholder-visible input[type="search"]:focus::placeholder,
form.keep-placeholder-visible input[type="text"]:focus::placeholder,
form.keep-placeholder-visible textarea:focus::placeholder {
    opacity:100;
}

input-group, input-group label {
    display:block;
}

input-group,.buttons-row {
    padding:1em 0px;
    text-align: center;
}
form-error p {
    color:red;
    margin:2em auto;
    text-align: center;
}

.general-container {
    --min-padding:20px;
    position:relative;
    margin:0px auto;
}
.general-container:not(.full-width) {
    width:var(--main-gutter-width-percent);
    max-width:var(--main-gutter-max-width);
}
.general-container.wider {
    width: auto;
    max-width: 1200px;
}
/* vertical spacing variants */
.general-container:not(.no-y-margin) {
    margin-top:auto;
    margin-bottom:auto;
}
.general-container:not(.no-padding) {
    padding-top:max(var(--min-padding),2%);
    padding-bottom:max(var(--min-padding),2%);
}
.general-container.more-padding {
    padding-top:max(var(--min-padding),4%);
    padding-bottom:max(var(--min-padding),4%);
}
.general-container.more-padding-3percent {
    padding-top: max(var(--min-padding),3%);
    padding-bottom: max(var(--min-padding),3%);
}
.general-container.form-w360 {
    max-width:360px;
}

/* --- GUIDES --- */

/* utility classes to clue when main-gutter width maxes out */
first-page-element::before,
first-page-element::after {
    content:'';
    position:fixed;
    left:calc(50% - (0.5 * var(--main-gutter-max-width)));
    right:calc(50% - (0.5 * var(--main-gutter-max-width)));
    top:0px;
    height:100%;
    border-left:1px dashed purple;
    z-index: 1000;
    pointer-events: none;
    width: 1px;
}
first-page-element::before { right:auto; }
first-page-element::after { left:auto; }
body:not(.show-content-gutter-guides) first-page-element::before,
body:not(.show-content-gutter-guides) first-page-element::after {
    display:none;
}
.show-guides::before {
    content:'';
    z-index:9999;
    position: fixed;
    top:0px;
    border-left:1px dashed red;
}
/* --- VISIBILITY CLASSES --- */
@media only screen and (min-width:1020.1px) {
    body .hide-on-desktop {
        display:none !important;
    }
}
@media only screen and (min-width:768.1px) and (max-width:1020px) {
    body .hide-on-tablet {
        display:none !important;
    }
}
@media only screen and (max-width:768px) {
    body .hide-on-mobile {
        display:none !important;
    }
}

.general-btn {
    border:none;
    color:black;
    background-color:green;
    padding:5px 20px;
    display:block;
    font-size:20px;
}
.general-btn:hover {
    background-color:lightgreen;
}

.search-form-block {
    position:relative;
}
search-results {
    position:relative;
    display:block;
}
search-results:not(.show) {
    display:none;
}
.buttons-row .general-btn {
    margin:0px auto;
}