/* ==========================================================================
     Project:     Mercer Medicine - EXLP
     Date:        03/27/2026 - File created	
     Created by:  Third Wave Digital (www.thirdwavedigital.com)
========================================================================== */

:root {
     --white: #ffffff;
     --grey: #E6E6E6;
     --dark-grey: #666;
     --darkest-grey: #2D2D2D;
     --black: #000000;
     --orange: #F76800;
     --blue: #2399C8;
}

/* ==========================================================================
     Transitions
========================================================================== */

@view-transition {
     navigation: auto;
}

/* ==========================================================================
     Typograpy
========================================================================== */

body {background: var(--white);font-family: "PT Sans", sans-serif;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { margin-bottom: 1.5rem; color: var(--black); font-weight: 700; font-family: "PT Sans", sans-serif;}
h1 {font-size: 2.75rem}
address {color: var(--dark-grey);font-size: .913rem}

/* ==========================================================================
     Main Layout
========================================================================== */ 

html {scroll-behavior: smooth;overflow-x:hidden;}

/* Skip */
.skip {position:absolute;top:-1000px;left:15px;width:auto;height:auto;text-align:center;overflow:hidden;transition:.25s;background:var(--orange); width:auto;height:auto;overflow:visible;padding:10px;color:var(--white);font-weight:600;font-size:.875rem;z-index:99;text-decoration:underline}
.skip:active,.skip:focus,.skip:hover{left:15px;top:15px;color: var(--white)}

/* Header */
.header-wrapper {background: var(--grey);}
.header-wrapper ul {display:flex; gap: 25px; font-size: .913rem; list-style:none}
.header-wrapper li {margin: 0px; position: relative;}
.header-wrapper li::after {content:""; height: 3px;transition: opacity 250ms ease; background:var(--orange); width: 100%; opacity:0; display:block; position: absolute;left: 0px}
.header-wrapper li.active::after, .header-wrapper li:hover::after {opacity: 1}
.header-wrapper ul a {font-weight: 700; color: var(--black);font-weight:700; text-decoration: none;transition: color 250ms ease}
.header-wrapper ul a:hover, .header-wrapper ul a:focus {color: var(--orange)}
.header-wrapper .btn {max-width: 300px}

/* Footer */
.footer-wrapper {background: var(--darkest-grey); color: var(--white);font-size: .913rem;}

/* Connect */
.connect-wrapper {background: url(/img/bg-hex.png); height: 80vh; min-height: 500px; display:flex; align-items: center;}

/* ==========================================================================
     Components
========================================================================== */ 

/* Heros */
.hero-wrapper {position: relative;z-index: 1}
.hero-wrapper::after {content: ""; position: absolute; z-index: -1; left: 0px; top: 0px; height: 100%; }
.hero-wrapper .hero-img {position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover; inset: 0;}

/* Clinic Locator */
.clinic-locator {max-width: 325px}
.clinic-locator .position-relative {position: relative}
.clinic-locator input {border: 1px solid var(--orange); border-radius: 20px; padding: 0px 15px; height: 45px; width: 100%;font-size: .913rem;font-weight: 700; }
.clinic-locator input::placeholder {color: var(--black); font-weight: 700; font-size: .913rem;}
.clinic-locator input:focus::placeholder {opacity: .5}
.clinic-locator .clinic-locator-submit {position: absolute;  border: 1px solid transparent; right: 7px; top: 8px; border:none; background: var(--grey); color: var(--orange); border-radius: 99px; width: 30px; height: 30px;}
.clinic-locator .clinic-locator-submit:hover, .clinic-locator .clinic-locator-submit:focus {border: 1px solid var(--orange); color: var(--black)}
.clinic-locator .clinic-locator-submit:disabled {cursor: wait; opacity: .7}
.clinic-locator-feedback {color: var(--danger); font-size: .875rem; margin-top: .75rem; font-weight: 700}
.clinic-locator-feedback[hidden],
.clinic-locator-results[hidden] {display: none !important}
.clinic-locator-results {position: absolute; left: 0px; right: 0px; top: calc(100% + 12px); max-height: 260px; background: var(--white); border: 1px solid rgba(0,0,0,.08); border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.12); overflow-x: hidden; overflow-y: auto; z-index: 5}
.clinic-locator-result {display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; width: 100%; padding: 14px 18px; border: none; background: var(--white); text-align: left; color: var(--black); text-decoration: none}
.clinic-locator-result + .clinic-locator-result {border-top: 1px solid rgba(0,0,0,.08)}
.clinic-locator-result:hover,
.clinic-locator-result:focus {background: rgba(247,104,0,.08); outline: none}
.clinic-locator-result-title {display: block; font-weight: 700; margin-bottom: 4px}
.clinic-locator-result-address {display: block; color: var(--darkest-grey); font-size: .875rem; line-height: 1.3}
.clinic-locator-result-distance {color: var(--orange); font-size: .813rem; font-weight: 700; white-space: nowrap}

/* Links */
a {color: var(--orange);text-decoration: underline;}
a:hover { text-decoration: none;color: var(--black)}

/* Backgrounds */
.bg-hex {background: url(/img/bg-hex.png)}

/* Images */
img {max-width: 100%; height: auto}
.aspect-ratio-16x10 {aspect-ratio: 16 / 10; object-fit: cover}
.img-fit img {object-fit: cover;width: 100%; height: 100%}

/* Cards */
.provider-card {border-radius: 20px; background: var(--white); text-align:center; padding: 1.5rem; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);height: 100%;}
.provider-card img {display:block; margin: auto;height: 35px}

/* Modals */
.modal.fade .modal-dialog {transform: scale(.95); -webkit-transform: scale(.95); transform-origin: center}
.modal.show .modal-dialog {transform: scale(1); -webkit-transform: scale(1)}
.modal-content {border-radius: .375rem}
.modal-content .close {position:absolute; top: 10px; right: 15px;z-index: 1}
.clinic-locator-modal-image {object-fit: cover; width: 100%; height: 100%}

/* ==========================================================================
     CMS Classes
========================================================================== */

/* Text */
.text-eyebrow {color: var(--orange); text-transform: uppercase; font-weight: 700;margin-bottom: 5px;font-size: .813rem}
.text-underline {position: relative;display:inline-block}
.text-underline::after {content:""; background: var(--orange); width: 70px; height: 3px;display:block;margin-top: 10px}
.text-center .text-underline::after, .text-center.text-underline::after {margin: 10px auto 0px auto}
.text-orange {color: var(--orange)}

/* Buttons */
.btn-orange, .btn-orange-border { border:none; text-decoration:none; padding: 5px 25px; transition:all 250ms ease; border-radius: 99px; text-align:center; font-weight:700; background:none; font-size: .875rem}

.btn-orange {background: var(--orange); color: var(--white);}
.btn-orange:hover, .btn-orange:focus {background: color-mix(in srgb, var(--orange) 90%, var(--black)); color: var(--white)}

.btn-orange-border {border: 1.5px solid var(--orange); color: var(--orange); background: var(--white)}
.btn-orange-border:hover, .btn-orange-border:focus {border: 1.5px solid var(--black); color: var(--black)}

/* Badges */
.badge {padding: 5px 10px;font-size: .688rem}
.badge-light {background:  rgba(0,0,0,.05)}

/* Modals */
#clinic-locator-modal .list-inline {display: flex; flex-wrap: wrap; gap: 5px;}
#clinic-locator-modal .list-inline li {margin: 0px}

/* Lists */
.badge-list {display:flex; flex-wrap: wrap; list-style:none; padding: 0px; margin: 0px; gap: 3px}
.badge-list li {margin: 0px}

/* Radii */
.rounded-xl {border-radius: 20px}

.shadow-xl {box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.2);}

/* ==========================================================================
     Media Queries
========================================================================== */

@media (min-width: 0px) {	
     /* Layout */
     .header-wrapper .btn {width: 100%}
     .header-wrapper ul {justify-content: center;}
     .header-wrapper li::after {bottom: -5px;}

     /* Heros */
     .hero-wrapper::after {width: 100%; background: rgba(255,255,255,.9)}
     .hero-wrapper .hero-img {object-position: 70% center;}
     
}

@media (min-width: 576px) {
     /* Modals */
     #clinic-locator-modal .modal-dialog {max-width: 600px}
     #request-callback-modal .modal-dialog {max-width: 450px}
}

@media (min-width: 768px) {
     /* Heros */
     .hero-wrapper {height: 80vh;min-height: 500px; }
     .hero-wrapper::after {width: 60%; background: linear-gradient(-90deg, rgba(255, 255, 255, 0.00) 0.20%, rgba(255, 255, 255, 0.90) 35%);}
     .hero-wrapper.gradient-right::after {left:unset; right: 0px; transform: scaleX(-1);width: 70%}
     .hero-wrapper .hero-img {object-position: center center;}
}

@media (min-width: 992px) {
     /* Layout */
     .header-wrapper { height: 75px;}
     .header-wrapper ul {justify-content: start}
     .header-wrapper li::after {bottom: -27px}
     .header-wrapper img {margin-right: 40px}
     .header-wrapper .btn {width: auto}
     
}
  
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;transition: none !important}
}