/*footer — YMCA Midsize 2026 (Footer B / purple)*/

/* White band behind the whole footer (Option B: white bg, outlined card) */
.wp-site-blocks footer {
    background: var(--white);
}

/* Inner card: white interior + purple-dk 3px outline, radius 16 (color/width set inline) */
.bmg-footer-card {
    background: var(--white);
    border-style: solid;
}

/* Editor canvas: mirror the white band + outlined card so it matches the front end */
.editor-styles-wrapper .bmg-footer {
    background: var(--white);
}

.editor-styles-wrapper .bmg-footer-card {
    background: var(--white);
    border: 3px solid var(--primary-dk);
    border-radius: 16px;
}

/*separator (used elsewhere)*/

.wp-block-separator.is-style-bmg-black-faint {
    border: none;
    border-bottom: 1px solid #7c7c7f;
    opacity: 0.4;
}

/* Full-color Y lockup (Option B comp shows the branded purple/red logo, no knockout) */

.bmg-footer-pillars p {
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* contact address lines render in Verdana per comp (16px) */
.bmg-footer-address {
    font-family: Verdana, sans-serif;
    letter-spacing: -0.01em;
}

/*links*/

footer a {
    text-decoration: none;
}

.bmg-footer-card a:hover {
    text-decoration: underline;
}

/* Social icons: 40px cyan rounded squares, near-black glyphs (Option B comp) */
.bmg-footer-social-links .wp-block-social-link {
    width: 40px;
    height: 40px;
    background: var(--primary-lt) !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bmg-footer-social-links .wp-block-social-link a {
    padding: 0;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bmg-footer-social-links .wp-block-social-link a svg {
    width: 19px;
    height: 19px;
}

.bmg-footer-social-links .wp-block-social-link a svg path {
    fill: var(--black);
}

footer .wp-block-social-links .wp-block-social-link:hover {
    transform: scale(1.1);
}

/*copyright — purple text, Verdana, centered (Option B comp)*/

span#copyright-year,
.bmg-footer-copy-text {
    color: var(--primary-dk);
    font-size: 16px;
}

.bmg-footer-copy-text,
span#copyright-year {
    font-family: Verdana, sans-serif;
    letter-spacing: -0.01em;
}

/*gtranslate — comp: purple-tint pill with US flag, bold purple "English" and a
  purple down-caret; the language list opens above the pill as a white rounded
  popover. Requires the plugin's "Nice dropdown with flags" widget look
  (dwf.js). The plugin injects its <style> after ours and fixes widths inline,
  so contested props carry !important. The open-panel height is set inline by
  dwf.js from the flag size (row = 24px flag + 3px top/bottom padding) — keep
  list-item vertical padding at 3px or the panel clips its last row. */

.gtranslate_wrapper {
    position: relative;
    display: inline-block;
    /* comp: ~23px gap after "Terms & Conditions". The copyright row is a WP
       flex group whose layout CSS zeroes child margins, hence !important.
       18px + the row's 5px blockGap ≈ the comp's gap. */
    margin-left: 18px !important;
}

/* the switcher is a fixed-width overflow-hidden box by default; let it hug
   the pill and let the absolutely-positioned list escape it */
.gtranslate_wrapper .gt_switcher {
    position: relative;
    width: auto !important;
    overflow: visible !important;
}

/* collapsed pill */
.gtranslate_wrapper .gt_switcher .gt_selected {
    background: var(--purple-tint) !important;
    border-radius: 100px;
}

.gtranslate_wrapper .gt_switcher .gt_selected a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 9px;
    width: auto !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 6px 38px 6px 14px !important; /* right pad = room for the caret */
    background: none !important;
    font-family: var(--font-heading);
    font-size: 18px !important;
    font-weight: 700;
    line-height: 24px;
    color: var(--primary-dk) !important;
}

.gtranslate_wrapper .gt_switcher a img {
    opacity: 1 !important;
    border-radius: 2px;
}

/* caret: solid purple triangle instead of the plugin's grey chevron; dwf.js
   rotates it via the .open class, so center with top math, not transform */
.gtranslate_wrapper .gt_switcher .gt_selected a::after {
    top: calc(50% - 12px); /* plugin height: 24px */
    right: 15px !important;
    width: 12px !important;
    background-size: 12px !important;
    background-position: 50%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M6 8 0 0h12z' fill='%235c2e91'/></svg>") !important;
}

/* language list: white rounded popover above the pill (the footer sits at the
   bottom of the viewport, so opening downward would clip) */
.gtranslate_wrapper .gt_switcher .gt_option {
    position: absolute !important;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content !important;
    min-width: 100%;
    border: none !important;
    border-radius: 8px !important;
    background: var(--white) !important;
    box-shadow: 0 6px 24px rgba(35, 31, 32, 0.18);
}

.gtranslate_wrapper .gt_switcher .gt_option a {
    padding: 3px 14px !important; /* 3px vertical: see height note above */
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: var(--primary-dk) !important;
    white-space: nowrap;
}

.gtranslate_wrapper .gt_switcher .gt_option a:hover {
    background: var(--purple-tint) !important;
}

/* Fallback for the plugin's plain "Dropdown" widget look, which emits a bare
   <select class="gt_selector"> instead of the dwf switcher. The user guide asks
   for "Nice dropdown with flags", but a client who picks Dropdown otherwise gets
   an unstyled native control in the middle of the copyright row. Match the pill
   above (minus the flag — a native select can't render one). */
.gtranslate_wrapper select.gt_selector {
    width: 143px; /* = the flags pill, so both looks sit the same in the row */
    height: 36px;
    padding: 6px 38px 6px 14px; /* right pad = room for the caret */
    border: none;
    border-radius: 100px;
    background-color: var(--purple-tint);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    color: var(--primary-dk);
    vertical-align: middle;

    /* swap the native arrow for the comp's solid purple caret */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M6 8 0 0h12z' fill='%235c2e91'/></svg>");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 8px;
}

.gtranslate_wrapper select.gt_selector::-ms-expand {
    display: none;
}

/* the native option list can't take the pill treatment, but keep it on-brand */
.gtranslate_wrapper select.gt_selector option {
    background: var(--white);
    color: var(--primary-dk);
}

/* Below desktop (out of 2026 scope — keep usable) */

@media (max-width: 1100px) {
    .bmg-footer-card {
        flex-wrap: wrap !important;
        gap: 28px;
    }

    .bmg-footer-copyright {
        justify-content: center;
    }
}

/* column rhythm per comp: contact tight to lockup, links mid, socials right */
.bmg-footer-card {
    justify-content: flex-start !important;
}

.bmg-footer-card > .bmg-footer-contact {
    margin-left: 21px !important;
}

.bmg-footer-card > .bmg-footer-links {
    margin-left: 143px !important;
    white-space: nowrap;
}

.bmg-footer-card > .bmg-footer-socials {
    margin-left: auto !important;
}

/* Phone: the desktop column-rhythm margins above (21px / 143px / auto) made the
   wrapped card a zig-zag of indents. Stack the four groups flush-left instead.
   (Must stay AFTER the rhythm rules — equal specificity + !important.) */
@media (max-width: 760px) {
    .bmg-footer-card {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center !important;
    }

    .bmg-footer-card > .bmg-footer-contact,
    .bmg-footer-card > .bmg-footer-links,
    .bmg-footer-card > .bmg-footer-socials {
        margin-left: 0 !important;

        text-align: center;
        align-items: center;
    }

    .bmg-footer-lockup {
        align-items: center;
    }

    /*copyright*/
    .bmg-footer-copyright {
        flex-direction: column;
    }
    .bmg-footer-separator {
        display: none;
    }

    /* socials */

    .bmg-footer-social-links {
        justify-content: center;
    }

    .bmg-footer-social-links .wp-block-social-link {
        width: 55px;
        height: 55px;
    }

    .bmg-footer-social-links .wp-block-social-link a svg {
        width: 30px;
        height: 30px;
    }
}