/* Master */
body[data-partner-id="1000112"]{
    padding-top: 0 !important;
    background-color: var(--bg) !important;
}

/* Common Items */
.cowboy-button, body[data-url="location"] .form button {
    font-family: "interstate-condensed", sans-serif;
    color: var(--primary);
    background-color: transparent;
    border: 2px solid var(--primary);
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    padding: .5rem 3rem;
    font-size: 110%;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
    border-radius: 0;
}
.sans-serif {
    font-family: "interstate-condensed", sans-serif;
}
.cowboy-button.small{
    padding: .25rem 2rem;
    font-size: 100%;
}
.cowboy-button::before, body[data-url="location"] .form button::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    transition: left 0.2s ease;
    z-index: -1;
}
.cowboy-button:hover, body[data-url="location"] .form button:hover{
    color: var(--bg);
    text-decoration: none;
}
.cowboy-button:hover::before, body[data-url="location"] .form button:hover::before {
    left: 0;
}
.cowboy-button.inverted {
    background-color: var(--secondary);
    color: #fff;
    border-color: var(--secondary);
    transition: background-color 0.3s ease;
}
.cowboy-button.inverted::before {
    display: none;
}
.cowboy-button.inverted:hover {
    background-color: #1a4047;
    color: #fff;
}

/* Nav Bar */
body .mod_e4_nav {
    background-color: var(--bg-2);
    opacity: .9;
    display: inline-flex;
    gap: 2rem;
    align-items: center;
    margin: 1rem;
    padding: .75rem 1.5rem .75rem .75rem;
}
body .mod_e4_nav .area-left{
    flex-shrink: 0;
}
body .mod_e4_nav .logo img{
    height: 48px !important;
    width: auto;
    object-fit: contain;
}
body .mod_e4_nav .area-right{
    width: auto;
}
body .mod_e4_nav .area-right .row-2 {
    align-items: center;
    gap: 2rem;
}
body .mod_e4_nav .area-right ul li{
    padding: 0 !important;
}
body .mod_e4_nav .area-right ul li a, 
body .mod_e4_nav .area-right ul li span, 
body .mod_e4_nav .area-right ul li i{
    color: var(--primary);
    transition: .15s ease color;
    font-size: 100%;
    position: relative;
}

body .mod_e4_nav .area-right ul li > a{
    /* Account for the height of the underline */
    padding-top: 2px;
}
body .mod_e4_nav .area-right ul li > a::after{
    content: '';
    position: absolute;
    bottom: -4px;
    left: -2px;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width .15s ease;
}

body .mod_e4_nav .area-right ul li > a:hover::after{
    width: calc(100% + 4px);
}

body .mod_e4_nav .area-right ul li > a:hover{
    color: var(--secondary);
}
@media screen and (max-width: 1000px){
    body .mod_e4_nav {
        opacity: 1;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
    }
    body .mod_e4_nav.expanded{
    }
    body .mod_e4_nav .logo img{
        height: auto;
    }
    body .mod_e4_nav .area-left {
        max-width: 300px;
        flex-grow: 1;
    }
    body .mod_e4_nav:not(.scrolled) .area-right, body .mod_e4_nav.scrolled .area-right{
        background-color: transparent !important;
        box-shadow: none;
    }
    body .mod_e4_nav.expanded .area-left{
        display: none;
    }
    body .mod_e4_nav.expanded .area-right{
        width: 100%;
    }
    body .mod_e4_nav.scrolled i.mobile-only, body .mod_e4_nav i.mobile-only{
        color: var(--primary);
    }
    body .mod_e4_nav .area-left .logo{
        padding-left: 0;
    }
    body .mod_e4_nav.expanded .area-right i + ul{
        margin: 1.75rem auto 0;
    }
}

/* Weather */
body .weather-modal{
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: weatherDropCowboy 0.25s cubic-bezier(.4,0,.2,1);
    background-color: var(--bg-2);
    border-radius: 0;
    border-color: var(--primary);
}
body .weather-modal{
    color: var(--primary) !important;
}
@keyframes weatherDropCowboy {
    0% { opacity: 0; transform: translateY(calc(-50%)) scale(0.98) translateX(-50%); }
    100% { opacity: 1; transform: translateY(-50%) scale(1) translateX(-50%); }
}
body .weather-forecast-day{
    background-color: var(--bg-3);
    border-radius: 0;
}
body .weather-location, body .weather-forecast-day .day, body .weather-forecast-day .icon, body .weather-forecast-day .temp, body .weather-forecast-day .desc, body .weather-modal-close, body .weather-main-icon, body .weather-main-desc, body .weather-main-temp, body .weather-date, body .weather-time{
    color: var(--primary);
}
body .weather-modal-close:hover{
    background-color: transparent;
}

/* Header Carousel Book Now Button */
body .header-area {
    position: relative;
}


body .carousel-book-now-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
    pointer-events: none;
}
body .carousel-book-now-container img {
    filter: saturation(.75);
}

body .carousel-book-now-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border: 4px solid var(--bg-2);
    color: white;
    background-color: rgba(255,255,255,.2);
    font-size: 1.25rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    pointer-events: auto;
    width: 300px;
    text-align: center;
    margin-top: 100px;
    font-size: 140%;
    font-family: "interstate-condensed", sans-serif;
}

body .carousel-book-now-button:hover {
    text-decoration: none;
    background-color: var(--bg-2);
    color: var(--primary);
}

@media screen and (max-width: 768px) {
    body .header-area #default-carousel{
        max-height: 400px;
        min-height: 400px;
        height: 400px;
    }
    /* Homepage hides the header book-now on mobile (kept on desktop) */
    body[data-url="homepage"] .carousel-book-now-container{
        display: none;
    }
    /* Drop the book-now button below the header image; solid red + white text */
    body .carousel-book-now-container{
        position: static;
        transform: none;
        pointer-events: auto;
        text-align: center;
        margin: 1rem auto 0;
    }
    body .carousel-book-now-button{
        margin-top: 0;
        width: auto;
        background-color: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
    body .carousel-book-now-button:hover{
        background-color: var(--primary);
        color: #fff;
    }
}
/* Add additional padding if there is no header image */
body .root-container {
    padding-top: 12rem;
}
body .header-area + .root-container{
    padding-top: 0;
}

/* Footer */
footer {
    background-color: var(--primary);
    color: var(--bg);
    font-family: "interstate-condensed", sans-serif;
    padding: 12px 32px;
}
footer .links{
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
}
footer li{
    list-style: none;
}
footer a {
    color: inherit;
    font-family: "interstate-condensed", sans-serif !important;
    position: relative;
    padding-top: 2px;
    transition: .15s ease color;
}
footer a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -2px;
    width: 0;
    height: 2px;
    background-color: var(--bg);
    transition: width .15s ease;
}
footer a:hover {
    color: inherit;
    text-decoration: none;
}
footer a:hover::after {
    width: calc(100% + 4px);
}
@media screen and (max-width: 768px){
    footer{
        padding: 2rem;
    }
    .footer-inner{
        flex-direction: column-reverse;
        gap: 1rem;
    }    
    .footer-inner .links{
        gap: 8px;
        flex-direction: column;
        text-align: center;
    }
}

/* Homepage */
.intro-container {
    justify-content: center;
    padding-top: 8rem;
    margin-bottom: 4rem;
}
body[data-url="homepage"] .intro-container{
    text-align: center;
    margin-bottom: 8rem;
}
body[data-url="homepage"] .intro-text{
    color: var(--primary);
    background: url("https://s3.us-east-1.amazonaws.com/assets.earthdiver.com/design/cowboy/funky-rec.png");
    padding: 32px 16px;
    background-size: 370px 100%;
    background-repeat: no-repeat;
    background-position-x: 50%;
    position: relative; /* Added for positioning */
}
body[data-url="homepage"] .intro-text::after{
    content: "";
    background: url("https://s3.us-east-1.amazonaws.com/assets.earthdiver.com/design/cowboy/plant.png");
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    width: 70px;
    height: 70px;
    position: absolute; 
    bottom: -25px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: block; 
}
.intro-text p {
    font-size: 120%;
    max-width: 60ch;;
}
body[data-url="homepage"].intro-text p {
    font-size: 140%;
    max-width: 35ch;
}
@media screen and (max-width: 768px){
    body[data-url="homepage"] .intro-text{
        background-size: calc(100% - 2rem) 100%;
    }
    body[data-url="homepage"] .container-page-sections{
        margin-bottom: 2rem;
    }
    .intro-text{
        padding: 0 2rem;
    }
}

/* Location */
body[data-url="location"] .special.width-constrain {
    padding: 0 2rem;
    max-width: 1000px;
    margin: 0 auto 2rem;
}
body[data-url="location"] * > input {
    border-radius: 0 !important;
    padding: 4px 8px !important;
}

body[data-url="location"] #map_m1 {
    min-height: 600px;
    min-width: 0;
}
body[data-url="location"] .form{
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
    align-items: flex-end;
}
body[data-url="location"] .form > *{
    padding: 0;
}
body[data-url="location"] .form > div > *{
    width: 100%;
}
@media screen and (max-width: 768px){
    body[data-url="location"] .intro-container {
        margin-bottom:  2rem;
    }
    body[data-url="location"] .form{
        flex-direction: column;
        align-items: flex-start;
    }
    body[data-url="location"] .form > *{
        width: 100%;
    }
    body[data-url="location"] .form > div:last-child{
        margin-top: 1rem;
        width: auto;
    }
    /* This appears once a user searches for directions */
    .map_dir_cont {
        flex-direction: column-reverse;
        gap: 1rem;
    }
    #panel_directions_m1{
        padding: 0;
        margin-right: 0 !important;
    }
}
/* Fix the google maps dropdown */
.pac-item *{
    font-size: 18px;
}
.pac-item .pac-matched {
  font-size: inherit;         /* ensure no scaling */
}

/* ---------------------------------------------------------------------------
   CKEditor (CKBox) inline image styles for rich-text content.
   CKEditor emits semantic classes (image-style-side / -align-*) plus an inline
   width on the <figure>, but does nothing visually without front-end CSS.
   These rules honor those classes so images can wrap text newspaper-style.
   Scoped to rich-text wrappers so they never affect layout/UI images.
   --------------------------------------------------------------------------- */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) {
    --ck-image-style-spacing: 1.5em;
}

/* Narrow the article measure so paragraphs wrap to more lines and roughly match
   floated-image heights -- this is what makes the newspaper wrap read cleanly
   instead of leaving whitespace below short paragraphs on wide screens. */
body[data-url="activities"] .intro-text {
    max-width: 760px;
    margin-inline: auto;
}

/* Base figure: block, centered, never larger than its container */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image {
    display: table;
    clear: both;
    text-align: center;
    margin: 0.9em auto;
}
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Resized figures keep the editor's inline width (e.g. width:25%); the image
   fills the figure rather than overflowing to its intrinsic pixel width */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image_resized {
    max-width: 100%;
    box-sizing: border-box;
}
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image_resized img {
    width: 100%;
}

/* "Wrap text" / side image -> float right, text flows alongside.
   max-width caps the size so a 50% resize can't become a giant 550px image;
   the editor's resize handle still works for anything SMALLER than the cap. */
/* NOTE: selectors use `.image.image-style-*` (two classes) so the cap beats
   `.image.image_resized { max-width:100% }` — a resized + wrapped image carries
   BOTH classes, and a single-class `.image-style-side` would lose the cascade. */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: min(45%, 360px);
}
/* Explicit left / right alignment */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing);
    max-width: min(45%, 360px);
    clear: none;
}
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: min(45%, 360px);
    clear: none;
}

/* Keep each topic self-contained: a heading clears any floated image above it,
   so an image can never spill past its section into the next topic. This is
   what bounds images "per section" without splitting content into page sections. */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) :is(h2, h3, h4, .heading2) {
    clear: both;
}
/* Centered (block) alignment */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image-style-align-center {
    margin-left: auto;
    margin-right: auto;
}
/* A floated image immediately after a paragraph shouldn't push down */
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) p + .image-style-side,
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) p + .image-style-align-left,
body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) p + .image-style-align-right {
    margin-top: 0;
}

/* On phones a 25% floated image is unreadable -- drop everything to
   full-width, centered, no float */
@media screen and (max-width: 600px) {
    body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image,
    body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image.image_resized,
    body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image-style-side,
    body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image-style-align-left,
    body[data-url="activities"] :is(.page_section, .intro-text, .footer_text, .rte_tinyMCE) .image-style-align-right {
        float: none;
        width: 100% !important;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}