/* Additions for Cascades Camps. The original template styles stay in style.css. */

picture { display: block; }
picture img { max-width: 100%; height: auto; }

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #00b779;
    outline-offset: 2px;
}

.sf-menu > li > a {
    padding: 16px 11px 14px;
    font-size: 13px;
    white-space: nowrap;
}
.sf-menu > li > ul,
.sf-menu > li.sfHover > ul {
    top: 100%;
    width: 210px;
}
.sf-menu > li > ul > li > a {
    padding: 6px 12px 6px 16px;
    white-space: normal;
}
.sf-menu > li > a > .sf-sub-indicator {
    top: auto;
    bottom: 4px;
}
.sf-menu > li.section,
.sf-menu > li.section:hover {
    background: #049765;
}
.sf-menu > li.section > a,
.sf-menu > li.section > a:hover {
    color: #fff;
}

select.mnav {
    display: none;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 4px;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #c3c3c3;
    background: #fff;
    color: #434250;
    box-sizing: border-box;
}

.callbar {
    background: #434250;
    color: #f7f3e8;
    text-align: center;
    padding: 12px 10px 14px;
}
.callbar p {
    margin: 0 0 8px;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f7f3e8;
}
.callbar a {
    display: inline-block;
    margin: 4px;
    padding: 10px 14px;
    background: #00b779;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
}
.callbar a:hover { background: #069c69; color: #fff; }
.callbar a small {
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.prose h2 { padding-bottom: 10px; }
.prose h3 { color: #069c69; font-size: 16px; padding-top: 8px; padding-bottom: 8px; }
.prose p { padding-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px 18px; }
.prose li { margin: 0 0 8px; line-height: 1.45; }
.note {
    background: #fff;
    border-left: 4px solid #00b779;
    padding: 12px 14px;
    margin: 8px 0 18px;
}
.tbd {
    color: #9a3b2f;
    font-weight: bold;
    letter-spacing: 0.02em;
}

table.rates {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 8px 0 18px;
}
table.rates th,
table.rates td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #e4e0d6;
    vertical-align: top;
}
table.rates th { width: 46%; color: #434250; font-weight: normal; }

.faq details {
    background: #fff;
    border: 1px solid #e4e0d6;
    margin: 0 0 8px;
    padding: 0 12px;
}
.faq summary {
    cursor: pointer;
    padding: 12px 0;
    color: #434250;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}
.faq details p { padding: 0 0 12px; }

.camp-form label {
    display: block;
    margin: 0 0 12px;
    color: #434250;
    font-size: 13px;
}
.camp-form input[type="text"],
.camp-form input[type="email"],
.camp-form input[type="tel"],
.camp-form input[type="date"],
.camp-form input[type="number"],
.camp-form textarea {
    display: block;
    width: 100%;
    max-width: 520px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #c3c3c3;
    background: #fff;
    color: #434250;
    font: 16px/1.4 Arial, sans-serif;
    box-sizing: border-box;
}
.camp-form textarea { max-width: 100%; min-height: 140px; }
.camp-form .row-2 { max-width: 520px; }
.camp-form .row-2 label { display: inline-block; width: 48%; margin-right: 2%; vertical-align: top; }
.camp-form .row-2 input { max-width: 100%; }
.camp-form button,
.camp-form input[type="submit"] {
    background: #434250;
    color: #fff;
    border: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding: 12px 22px;
    cursor: pointer;
}
.camp-form button:hover,
.camp-form input[type="submit"]:hover { background: #00b779; }
.camp-form .hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-status { min-height: 1.4em; margin: 8px 0; font-size: 14px; }
.form-status.is-ok { color: #069c69; }
.form-status.is-error { color: #9a3b2f; }
.form-help { font-size: 12px; color: #747474; padding-bottom: 10px; }

.flyer-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 10px;
}
.flyer-grid a {
    display: block;
    width: 23%;
    margin: 8px 1%;
    background: #fff;
    border: 1px solid #e4e0d6;
    box-sizing: border-box;
    color: #434250;
    text-align: center;
}
.flyer-grid img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top;
}
.flyer-grid span {
    display: block;
    padding: 8px 4px 10px;
    font-family: 'Open Sans', sans-serif;
}

.signup-box {
    background: #fff;
    border: 1px solid #e4e0d6;
    padding: 12px 14px 16px;
    margin-top: 8px;
}
.signup-box h2 { padding-top: 6px; }
footer .signup-box { text-transform: none; color: #d5d5d5; }
footer .signup-box p { color: #d5d5d5; }
footer .camp-form label { color: #f7f3e8; }
footer .signup-box h2 { font-size: 16px; padding-top: 0; padding-bottom: 8px; color: #f7f3e8; }
footer .signup-box,
footer .col-3 .signup-box {
    background: transparent;
    border: 0;
    padding: 18px 0 0;
    text-align: left;
}
footer .camp-form input[type="text"],
footer .camp-form input[type="email"] { max-width: 100%; }
footer .col-3 { text-align: left; }

.page-result { max-width: 640px; }

@media only screen and (max-width: 995px) {
    .sf-menu > li > a { padding: 12px 8px; font-size: 12px; }
    .flyer-grid a { width: 31%; }
}
.camp-map,
.camp-map.leaflet-container {
    width: 100%;
    height: 400px;
    margin: 0 0 14px;
    background: #e7efe8;
    border: 1px solid #c8c4b8;
    border-radius: 8px;
    overflow: hidden;
    font-family: "Open Sans", Arial, sans-serif;
}
.leaflet-container img {
    max-width: none !important;
    max-height: none !important;
}
.camp-map .map-fallback {
    margin: 0;
    padding: 28px 16px;
    color: #434250;
    line-height: 1.45;
}
.camp-map .map-fallback a {
    color: #069c69;
    text-decoration: underline;
}
.map-actions { margin: 0 0 4px; }
.map-actions .btn.v1 { margin: 0 10px 10px 0; }
.map-note { font-size: 14px; color: #434250; }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid #c8c4b8;
}
.leaflet-popup-content {
    margin: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #434250;
}
.leaflet-control-attribution {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.88);
}
.leaflet-control-attribution a {
    color: #069c69;
    text-decoration: underline;
}
.place-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 226 / 110;
    box-sizing: border-box;
    padding: 12px;
    margin: 0;
    background: #434250;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border: 1px solid #c8c4b8;
    border-radius: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.35;
}
.place-card:hover,
.place-card:focus { background: #00b779; color: #fff; }

@media only screen and (max-width: 767px) {
    .container_12 { width: auto; margin-left: 12px; margin-right: 12px; }
    .container_12 [class*="grid_"] { width: 100%; }
    .camp-form .row-2 label { display: block; width: 100%; margin-right: 0; }
    .flyer-grid a { width: 46%; }
    footer .col-3, footer .col-2, footer .col-1 { width: 100%; float: none; text-align: left; }
    .callbar a { display: block; }
    .camp-map,
    .camp-map.leaflet-container { height: 260px; margin-bottom: 12px; }
}