/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* H2o Child Theme */


/* header */

.menu-item-23 {display:none !important;}
ul.astra-megamenu li.menu-item-has-children>a.menu-link {font-weight: 500;text-decoration: underline;}

.menu-item {font-size: 20px;}



/* mobile */

@media only screen and (max-width: 767px) {

    /* header */
    .menu-item-23 {display:block !important;}

}




/* store locator
-------------------------------------------------------------- */

/* Venue logo links through to Google Maps directions. */
.wpsl-logo-link {
    display: inline-block;
    border: 0;
    box-shadow: none;
    transition: opacity 0.15s ease-in-out;
}

.wpsl-logo-link:hover,
.wpsl-logo-link:focus {
    opacity: 0.75;
}

.wpsl-logo-link img {
    display: block;
}

/* what3words address in the map popup. */
.wpsl-w3w {
    display: block;
    margin: 0 0 8px;
}

.wpsl-w3w a {
    font-weight: 600;
    text-decoration: none;
}

.wpsl-w3w a:hover,
.wpsl-w3w a:focus {
    text-decoration: underline;
}

/* Category filter styled as toggle switches.
   Sits on the brand red bar, so "on" is a solid white track with a red knob. */
/* The plugin floats each item at a fixed 32% width, which strands them in
   three ragged columns. Flex lets them sit on one line and wrap naturally.
   The selectors are deliberately specific enough to beat the plugin's own. */
ul#wpsl-checkbox-filter,
ul#safespace-open-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 34px;
    float: none;
    width: 100%;
    margin: 5px 0 15px;
    padding: 0;
    list-style: none;
}

ul#wpsl-checkbox-filter[class] li,
ul#safespace-open-filter li {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

#wpsl-checkbox-filter label,
#safespace-open-filter label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.3;
}

#wpsl-checkbox-filter input[type="checkbox"],
#safespace-open-filter input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The knob. */
#wpsl-checkbox-filter input[type="checkbox"]::before,
#safespace-open-filter input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#wpsl-checkbox-filter input[type="checkbox"]:checked,
#safespace-open-filter input[type="checkbox"]:checked {
    border-color: #fff;
    background: #fff;
}

#wpsl-checkbox-filter input[type="checkbox"]:checked::before,
#safespace-open-filter input[type="checkbox"]:checked::before {
    transform: translateX(20px);
    background: var(--global-palette7, #ed204f);
}

#wpsl-checkbox-filter input[type="checkbox"]:focus-visible,
#safespace-open-filter input[type="checkbox"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Keep the switches legible if the filter is ever moved off the red bar. */
/* Three across on tablet and phone, two on the narrowest screens.
   The switch shrinks to match so the label still has room to sit beside it. */
@media (max-width: 767px) {
    ul#wpsl-checkbox-filter {
        gap: 14px 10px;
    }

    ul#wpsl-checkbox-filter[class] li {
        width: calc((100% - 20px) / 3);
    }

    #wpsl-checkbox-filter label {
        gap: 8px;
        font-size: 0.9em;
    }

    #wpsl-checkbox-filter input[type="checkbox"] {
        width: 38px;
        height: 22px;
        border-radius: 11px;
    }

    #wpsl-checkbox-filter input[type="checkbox"]::before {
        width: 14px;
        height: 14px;
    }

    #wpsl-checkbox-filter input[type="checkbox"]:checked::before {
        transform: translateX(16px);
    }
}

@media (max-width: 479px) {
    ul#wpsl-checkbox-filter[class] li {
        width: calc((100% - 10px) / 2);
    }
}

/* The open filter sits on its own line, separated from the categories,
   because it answers a different question to "what kind of place is this". */
ul#safespace-open-filter {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* results list
-------------------------------------------------------------- */

/* The plugin floats the thumbnail right, but wrapping it in a directions link
   left that float applying inside the link instead of to it. Float the link
   and let the image sit normally within it. */
#wpsl-stores .wpsl-logo-link {
    float: right;
    margin: 7px 0 10px 14px;
}

#wpsl-stores .wpsl-logo-link .wpsl-store-thumb {
    float: none;
    margin: 0;
}

/* Category tags. */
.wpsl-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    clear: both;
    margin: 8px 0 2px;
}

.wpsl-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #fff;
}

/* Tag colours follow the map markers, so the list and the pins agree. */
.wpsl-pill-defibrillator { background: #ed204f; }
.wpsl-pill-bleed-kit     { background: #c85200; }
.wpsl-pill-help-point    { background: #2b6cb0; }
.wpsl-pill-best-bar-none { background: #6b46c1; }

.wpsl-pill-open   { background: #1f7a44; }
.wpsl-pill-closed { background: #6b6b6b; }

@media (max-width: 479px) {
    .wpsl-pill {
        font-size: 10px;
        padding: 2px 8px;
    }
}

/* Note appended to the open filter while it is switched off. Shown by class
   rather than by jQuery, so it does not depend on the default display value
   being worked out for an element the stylesheet has hidden. */
.safespace-open-note {
    display: none;
    font-weight: 400;
    opacity: 0.85;
}

.safespace-open-note.is-visible {
    display: inline;
}


/* "Get Directions" button, on results and in the map popup.
   Bigger than the category tags, because it is the action rather than a label. */
a.wpsl-directions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 9px 15px;
    border: 0;
    border-radius: 6px;
    background: var(--global-palette7, #ed204f);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

a.wpsl-directions:hover,
a.wpsl-directions:focus-visible {
    background: #b3123a;
    color: #fff;
    text-decoration: none;
}

a.wpsl-directions:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The arrow is drawn as a mask so it takes the button's own text colour,
   rather than a character that renders as an emoji on some devices. */
a.wpsl-directions::after {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%2012.5h6a3.5%203.5%200%200%200%203.5-3.5V4.5'/%3E%3Cpath%20d='M9%207.5%2012%204.5l3%203'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2.5%2012.5h6a3.5%203.5%200%200%200%203.5-3.5V4.5'/%3E%3Cpath%20d='M9%207.5%2012%204.5l3%203'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tighter inside the map popup, where there is less room. */
.wpsl-info-actions a.wpsl-directions {
    margin-top: 4px;
    padding: 7px 12px;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    a.wpsl-directions { transition: none; }
}

/* There is a theme rule setting every link in the results list to the dark
   palette colour with !important:
       #wpsl-stores li a { color: var(--global-palette2) !important; }
   That loads inline in the head, so no amount of specificity beats it on its
   own. !important is used here to answer it, with a heavier selector so this
   rule wins the tie. If that theme rule is ever narrowed to leave the button
   alone, the !important below can come out.

   The arrow inherits currentColor, so it follows the text. */
#wpsl-stores li a.wpsl-directions,
#wpsl-stores li a.wpsl-directions:link,
#wpsl-stores li a.wpsl-directions:visited,
#wpsl-stores li a.wpsl-directions:hover,
#wpsl-stores li a.wpsl-directions:focus,
#wpsl-wrap a.wpsl-directions,
#wpsl-gmap a.wpsl-directions,
.wpsl-info-actions a.wpsl-directions {
    color: #fff !important;
    text-decoration: none !important;
}

/* The distance sits inside the button alongside the label. */
.wpsl-directions-distance {
    font-weight: 500;
}

/* "What do these mean?"
-------------------------------------------------------------- */

/* The trigger rides in the switch list. On a wide screen the auto margin
   pushes it to the far right; below 768px it takes a line of its own under
   the switches, overriding the column widths set earlier. */
ul#wpsl-checkbox-filter[class] li.safespace-info-item {
    width: auto;
    margin-left: auto;
}

.safespace-info-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

/* An "i" in a circle, drawn as a mask so it takes the button's own colour
   rather than a character that some devices render as a coloured emoji. */
.safespace-info-trigger::before {
    content: "";
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6.4'/%3E%3Cpath%20d='M8%207.3v4.2'/%3E%3Cpath%20d='M8%204.7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8'%20cy='8'%20r='6.4'/%3E%3Cpath%20d='M8%207.3v4.2'/%3E%3Cpath%20d='M8%204.7h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Only the words are underlined, not the icon beside them. */
.safespace-info-trigger-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.safespace-info-trigger:hover .safespace-info-trigger-label {
    text-decoration: none;
}

.safespace-info-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.safespace-info-panel {
    margin: 4px 0 14px;
    padding: 20px 22px;
    border-radius: 8px;
    background: #fff;
    color: #262420;
}

.safespace-info-panel[hidden] {
    display: none;
}

/* The panel id is in front so the theme's own list indent cannot put the
   padding back. One column by default, widening as there is room for it. */
#safespace-info-panel ul.safespace-info-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px 28px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    #safespace-info-panel ul.safespace-info-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    #safespace-info-panel ul.safespace-info-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.safespace-info-entry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.safespace-info-icon {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

.safespace-info-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 15px;
    line-height: 1.45;
}

.safespace-info-copy strong {
    font-weight: 700;
}

.safespace-info-close {
    padding: 8px 16px;
    border: 1px solid #d8ced1;
    border-radius: 6px;
    background: #fff;
    color: #262420;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.safespace-info-close:hover {
    background: #f4eef0;
}

.safespace-info-close:focus-visible {
    outline: 2px solid var(--global-palette7, #ed204f);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    /* Under the five switches rather than beside them. */
    ul#wpsl-checkbox-filter[class] li.safespace-info-item {
        width: 100%;
        margin-left: 0;
    }

    .safespace-info-panel {
        padding: 16px;
    }

    .safespace-info-copy {
        font-size: 14px;
    }
}