/*
Theme Name: AFHT Blocks
Theme URI: https://afht.ca
Author: Abstract Marketing
Author URI: https://abstractmarketing.ca
Description: Block theme for the Amherstburg Family Health Team.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: afht-blocks
Tags: Site Editor

html {
    scroll-behavior: smooth;
}

iframe {
    display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea {
	color: var(--wp--preset--color--contrast);
	border-radius: 2px;
	border: solid 1px var(--wp--preset--color--dark-gray);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: #fff;
	box-shadow:
		0 1px 2px #0001,
		0 0.5px 1px #0001;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--secondary);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: 1.2em;
	height: 1.2em;
    accent-color: var(--wp--preset--color--secondary);
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNCA1LTYuNSA3TDEgNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPjwvc3ZnPg==) no-repeat;
    background-size: 15px;
    background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 0.66;
}

img.alignright,
img.alignleft {
    float: none !important;
    margin: 1em auto;
    display: block;
    text-align: center;
}

@media (min-width: 782px) {
	.alignright {
		float: right;
		margin-inline-start: 1em;
	}

	.alignleft {
		float: left;
		margin-inline-end: 1em;
	}
}

@media (max-width: 781px) {
    .is-layout-constrained > figure.alignright,
    .is-layout-constrained > figure.alignleft {
        float: none;
        margin-inline: auto;
        margin-block-end: 1em;
        text-align: center;
    }
}

.wp-block-breadcrumbs li:first-child {
    line-height: 1;
    fill: var(--wp--preset--color--secondary);
	filter: none;
}

.linked-group {
	position: relative;
	overflow: hidden;
	transition: transform .2s;

	&:hover {
		transform: translateY(-5px);
	}

	a::after {
		content: '';
		position: absolute;
		inset: -400px -400px;
		z-index: 1;
	}
}

@media (min-width: 992px) {
    .wp-block-navigation__submenu-container {
        border-radius: 10px !important;
        padding: 5px !important;
        overflow: hidden !important;

        & span {
            text-transform: capitalize !important;
            letter-spacing: 0;
        }

        & li:hover {
            color: var(--wp--preset--color--primary)
        }
    }
}

body:not(.home) .entry-content {
    > h2:not(:first-child) {
        margin-top: .75em;
        padding-top: .5em;
        border-top: 1px solid #ddd;
    }

    > h3:not(:first-child) {
        margin-top: .5em;
        padding-top: .5em;
    }
}

.wp-block-page-list {
    line-height: 1.3;
    list-style: none;
    padding-inline: 0;

    ul {
        list-style: none;
        padding-inline: 0;
    }

    a {
        display: block;
        padding-block: .75em;
    }

	li:not(:last-child) a {
		border-bottom: 1px solid #0003;
	}

    .current-menu-item {
        list-style: '›  ';
    }
}

/* Link rows used inside the "How Can We Help" panel. */

html {
    scroll-behavior: smooth;
}

iframe {
    display: block;
}

input,
button,
textarea,
select {
	font: inherit;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
}

input:not([type="submit"]):not([type="radio"]),
select,
textarea {
	color: var(--wp--preset--color--contrast);
	border-radius: 2px;
	border: solid 1px var(--wp--preset--color--dark-gray);
	padding: .5em 1em;
	font-size: var(--wp--preset--font-size--small);
	background-color: #fff;
	box-shadow:
		0 1px 2px #0001,
		0 0.5px 1px #0001;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline-color: var(--wp--preset--color--secondary);
	outline-offset: 1px;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: 1.2em;
	height: 1.2em;
    accent-color: var(--wp--preset--color--secondary);
}

select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--wp--preset--color--base) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xNCA1LTYuNSA3TDEgNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPjwvc3ZnPg==) no-repeat;
    background-size: 15px;
    background-position: calc(100% - 12px) 50%;
	padding-right: 2.2em;
}

::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 0.66;
}

img.alignright,
img.alignleft {
    float: none !important;
    margin: 1em auto;
    display: block;
    text-align: center;
}

@media (min-width: 782px) {
	.alignright {
		float: right;
		margin-inline-start: 1em;
	}

	.alignleft {
		float: left;
		margin-inline-end: 1em;
	}
}

@media (max-width: 781px) {
    .is-layout-constrained > figure.alignright,
    .is-layout-constrained > figure.alignleft {
        float: none;
        margin-inline: auto;
        margin-block-end: 1em;
        text-align: center;
    }
}

.wp-block-breadcrumbs li:first-child {
    line-height: 1;
    fill: var(--wp--preset--color--secondary);
	filter: none;
}

.linked-group {
	position: relative;
	overflow: hidden;
	transition: transform .2s;

	&:hover {
		transform: translateY(-5px);
	}

	a::after {
		content: '';
		position: absolute;
		inset: -400px -400px;
		z-index: 1;
	}
}

@media (min-width: 992px) {
    .wp-block-navigation__submenu-container {
        border-radius: 10px !important;
        padding: 5px !important;
        overflow: hidden !important;

        & span {
            text-transform: capitalize !important;
            letter-spacing: 0;
        }

        & li:hover {
            color: var(--wp--preset--color--primary)
        }
    }
}

body:not(.home) .entry-content {
    > h2:not(:first-child) {
        margin-top: .75em;
        padding-top: .5em;
        border-top: 1px solid #ddd;
    }

    > h3:not(:first-child) {
        margin-top: .5em;
        padding-top: .5em;
    }
}

.wp-block-page-list {
    line-height: 1.3;
    list-style: none;
    padding-inline: 0;

    ul {
        list-style: none;
        padding-inline: 0;
    }

    a {
        display: block;
        padding-block: .75em;
    }

	li:not(:last-child) a {
		border-bottom: 1px solid #0003;
	}

    .current-menu-item {
        list-style: '›  ';
    }
}

/* Link rows used inside the "How Can We Help" panel. */
.afht-link-row {
    border-radius: 6px;
    transition: background-color .2s ease, transform .2s ease;
}

.afht-link-row:hover {
    background-color: rgb(255 255 255 / .12);
}

.afht-link-row .afht-link-row__arrow {
    transition: transform .2s ease;
}

.afht-link-row:hover .afht-link-row__arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .afht-link-row,
    .afht-link-row .afht-link-row__arrow {
        transition: none;
    }

    .afht-link-row:hover .afht-link-row__arrow {
        transform: none;
    }
}

/* Pill/badge used for eyebrow labels on dark backgrounds. */
.afht-pill {
    display: inline-block;
    width: fit-content;
}

.board-of-directors-grid p:first-line {
    font-weight: bold;
}

body .em.pixelbones {

    --font-family: unset;
    --font-size: .85em;
    --font-weight: normal;
    --line-height: unset;
    --accent-color: var(--wp--preset--color--primary);

    .em-event.em-item {
        --default-border: var(--wp--preset--color--secondary) !important;
    }
}

.site-header {
    box-shadow: 0 2px 10px #0004;
}

.wp-block-am-blocks-shape-divider {
    transform: var(--transform);

    svg {
        width: 100%;
        height: 100%;
    }
}

.wp-block-am-blocks-shape-divider[data-flip-x] {
    --transform: scaleX(-1);
}

.wp-block-am-blocks-shape-divider[data-flip-y] {
    --transform: scaleY(-1);
}

.wp-block-am-blocks-shape-divider[data-flip-y][data-flip-y] {
    --transform: scale(-1);
}

.wp-block-am-blocks-shape-divider svg {
    display: block;
}

.service-icon {
    filter: drop-shadow(0 0 1px #004955) drop-shadow(0 0 1px #004955) drop-shadow(0 0 6px #004955);
}

.has-modal-open .wp-block-navigation li.wp-block-navigation-submenu {
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: end;
}

.has-modal-open .wp-block-navigation ul.wp-block-navigation-submenu {
    position: relative !important;
    flex: 100%;
    color: inherit;
    background: transparent !important;

    a {
        justify-content: center;
    }
}

.has-modal-open .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
    display: none !important;
}

.has-modal-open .wp-block-navigation-submenu .wp-block-navigation__submenu-icon {
    transform: rotate(90deg);
    display: inline-block !important;
}

.has-modal-open .wp-block-navigation-submenu.open .wp-block-navigation__submenu-container {
    display: block !important;
}

.has-modal-open .wp-block-navigation-submenu.open .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
}


body.no-featured-image .page-cover {
    min-height: unset !important;

    .wp-block-cover__background {
        background: var(--wp--preset--color--primary) !important;
        opacity: 1 !important;
    }
}

#acf-map {
    background: linear-gradient(to bottom right, #eee, #ddd);
    border-radius: 15px;
    z-index: 0;
}

.has-modal-open .wp-block-navigation__responsive-container {
    background: #daf2fd !important;

    ul {
        width: 100%;
        text-align: center !important;
        align-items: center !important;
        justify-content: center;
    }

    li {
        align-items: center !important;
        justify-content: center !important;
    }

    ul ul {
        font-weight: 400;
    }
}

@media (max-width: 1080px) {
    .site-header__logo img {
        max-width: 240px;
    }

    ul.site-header__nav {
        gap: 12px !important;
    }
}

.is-menu-open .wp-block-navigation__submenu-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 3px;
    margin-left: 10px !important;
    border: 1px solid #0003;
    padding: .2em;
    background: var(--wp--preset--color--primary);
    color: #fff;
    
    svg {
        margin: 0;
        width: 100%;
        height: 100%;
    }
}

.programs-services-grid {
    @media (min-width: 600px) {
        li:last-child {
            transform: translateX(calc(50% + 16px));
        }
    }
    
    @media (min-width: 782px) {
        li:nth-last-child(2) {
            transform: translateX(calc(50% + 16px));
        }
    }
}

.site-header__main-stack {
    @media  (max-width: 991px) {
        flex-direction: row;
        
        .is-style-outline {
            display: none;
        }
    }
	
	@media  (max-width: 691px) { 
		.wp-block-buttons {
			display: none;
		}
	}
}

.em-events-list:not(:has(.em-event.em-item)) {
    display: flex;
    gap: .3em;
    text-transform: capitalize;
    justify-content: center;
    font-size: 2rem !important;
    line-height: 1 !important;
}

.em-events-list:not(:has(.em-event.em-item))::after {
    content: 'listed at this time.';
}

.afht-slider__controls {
    margin-bottom: 40px;
}

.afht-slider__heading {
    text-transform: unset !important;
}