/* Plugin components. Theme layout and navigation live in orthodynamo-tm.
   --od-* roles follow Appearance > Brand; --gs-* GreenLight fallbacks support other themes. */
.office-phone,
.office-text,
.office-address,
.office-email,
.office-name,
.office-hours,
.office-fax {
	color: var(--od-text-primary, var(--gs-colorcolor1, #333));

	&.light {
		color: var(--od-text-on-inverse, var(--gs-colorcolor9, #fff));
	}

	&.normal {
		color: var(--od-text-primary, var(--gs-colorcolor1, #333));
	}

	&.small {
		font-size: 16px;
	}
}
.office-phone,
.office-text,
.office-address,
.office-email,
.office-fax {
	.icon-box {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 10px;

		.icon-wrapper {
			display: flex;
			background-color: var(--od-surface-brand, var(--gs-colorcolor4, #065b99));
			padding: 15px;
			border-radius: 99px;

			svg {
				fill: var(--od-text-on-brand, var(--gs-colorcolor9, #fff));
			}
		}
	}
}
.office-fax {
	.icon-box {
		.icon-wrapper {
			padding: 12px;
		}
	}
}
.office-phone,
.office-text,
.office-fax {
	.icon-box {
		align-items: center;
	}
}
.office-phone,
.office-text,
.office-address,
.office-email,
.office-fax {
	&.light {
		.icon-box {
			.icon-wrapper {
				background-color: var(--od-surface-raised, var(--gs-colorcolor9, #fff));

				svg {
					fill: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
				}
			}
		}
	}
}
.office-name {
	color: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
	font-size: 20px;
}
/* Was an inline style on the element, which no theme or site could override
   and which hard-coded its rule colour. Same look, now a rule like the rest. */
.office-title {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--od-border-default, #e0e0e0);
	color: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
	font-size: 20px;
	font-weight: 700;
}
h2 .office-name {
	font-size: clamp(1.625rem,0.9537rem + 1.4815vw,2.25rem);
	line-height: 1.3em;
	font-weight: 600 !important;
	color: var(--od-brand-strong, var(--gs-colorcolor4)) !important;
}
.office-footer .office-phone {
	margin-bottom: 0;
}
.office-footer:not(:has(.office-text)) .office-phone,
.office-footer .office-text {
	margin-bottom: 40px;
}
@media screen and (max-width: 575.98px) {
	.office-footer:not(:has(.office-text)) .office-phone,
	.office-footer .office-text {
		margin-bottom: 20px;
	}
}

/* Footer Orthodynamo TM */
#odtmMobileFloatingFooter {
	background-color: var(--od-surface-page, var(--gs-colorcolor6, #fff));
}
#odtmMobileFloatingFooter .odtm-mff-offices {
	background-color: var(--od-surface-page, var(--gs-colorcolor6, #fff));
	border-bottom: thin solid var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
#odtmMobileFloatingFooter .odtm-mff-offices > ul.active li {
	border-top: thin solid var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
#odtmMobileFloatingFooter .odtm-mff-offices ul:has(> :nth-child(2)) li:nth-child(odd) {
	border-right: thin solid var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
/* an odd last office would sit in a half-width cell with a dangling border */
#odtmMobileFloatingFooter .odtm-mff-offices ul:has(> :nth-child(2)) li:nth-child(odd):last-child {
	border-right: 0;
}
#odtmMobileFloatingFooter .odtm-mff-actions .odtm-mff-link {
	background-color: var(--od-action-primary-bg, var(--gs-colorcolor4, #065b99));
}
#odtmMobileFloatingFooter .odtm-mff-actions .odtm-mff-link a {
	color: var(--od-action-primary-text, var(--gs-colorcolor9, #fff));
	text-decoration: none;
}
#odtmMobileFloatingFooter .odtm-mff-actions .odtm-mff-icon svg {
	fill: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
#odtmMobileFloatingFooter .odtm-mff-actions .odtm-mff-icon.odtm-mff-icon-pin {
	border-right: thin solid var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
#odtmMobileFloatingFooter,
#odtmDesktopFloatingFooter {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
}
#odtmMobileFloatingFooter svg {
	width: 20px;
	height: 20px;
	fill: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
}
/* 52px: the label fits one line down to a 360px phone, and every button stays above the 44-48px tap guideline. */
#odtmMobileFloatingFooter .odtm-mff-actions {
	display: flex;
	height: 52px;
}
.odtm-mff-actions .odtm-mff-link {
	flex: 1 1 auto;
}
.odtm-mff-actions .odtm-mff-icon {
	flex: 0 0 17%;
}
.odtm-mff-link > *,
.odtm-mff-icon > * {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.odtm-mff-link a {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	margin: 0 auto;
	padding: 0 12px;
}
.odtm-mff-offices > ul {
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.odtm-mff-offices > ul.active {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.odtm-mff-offices > ul.active li {
	line-height: 1.3;
	flex: 0 0 100%;
	padding: 10px;
}
.odtm-mff-offices > ul.active:has(> :nth-child(2)) li {
	font-size: 14px;
	flex-basis: 50%;
}
.odtm-mff-offices > ul.active:has(> :nth-child(2)) li:nth-child(odd):last-child {
	flex-basis: 100%;
}
@media only screen and (min-width: 495px) {
	.odtm-mff-offices > ul.active:has(> :nth-child(2)) li {
		font-size: 16px;
	}
}
@media (min-width: 992px) {
	.zoom-card:hover {
        transform: scale(1.05);
        transition: all .5s cubic-bezier(.42,0,.58,1)
    }
}
.odtm-mff-offices-pin li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.odtm-mff-offices-phone li {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.odtm-mff-offices-phone li a,
.odtm-mff-offices-phone li svg {
	display: block;
}
.odtm-mff-offices-phone li span {
	margin-right: auto;
	padding-right: 10px;
}
.odtm-mff-offices-phone li a {
	flex: 0 0 20px;
}
.odtm-mff-offices-phone li:has(> :nth-child(3)) a:last-child {
	margin-left: 15px;
}
@media only screen and (min-width: 992px) {
	#odtmMobileFloatingFooter {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
}
.odtm-socmeds {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 10px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.odtm-socmeds .odtm-socmed-item {
	transition: 0.3s
}
.odtm-socmeds .odtm-socmed-item a {
	padding: 10px;
	display: block;
	background-color: var(--od-surface-brand, var(--gs-colorcolor4));
	border-radius: 99px;
}
.odtm-socmeds .odtm-socmed-item figure {
	display: flex;
	margin: 0;
}
.odtm-socmeds .odtm-socmed-item figure svg {
	width: 20px;
	height: 20px;
	fill: var(--od-text-on-brand, var(--gs-colorcolor9, #fff));
}
.odtm-socmeds .odtm-socmed-item:hover {
	transform: scale(1.1);
}
.odtm-office-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
	gap: 15px;
}
.odtm-office-header-item {
	display: flex;
	align-items: center;
	column-gap: 10px;
	flex: 1 1 auto;
	justify-content: flex-start;
	position: relative;
}
.odtm-office-header-item .odtm-ohi-icon {
	flex: 0 0 26%;
}
.odtm-office-header-item .odtm-ohi-info {
	line-height: 1.2;
	align-self: stretch;
	flex: 0 0 calc(74% - 10px);
	cursor: pointer;
}
.odtm-office-header .odtm-office-freeconsult a {
	color: var(--od-action-primary-text, var(--gs-colorcolor9, #fff));
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--od-action-primary-bg, var(--gs-colorcolor4, #065b99));
	display: block;
	padding: 16px 24px;
	border-radius: var(--od-radius-pill, var(--gs-rounded-border-radius, 100px)) !important;
	box-shadow: 0 4px 20px 0 #00000026;
	overflow: hidden;
}
.odtm-office-header .odtm-office-freeconsult a:hover {
	background-color: var(--od-action-primary-bg-hover, var(--gs-colorcolor5, #05bcf4));
}
.odtm-office-header .odtm-office-freeconsult:has(.free-consultation-external-button) .free-consultation-button {
	color: var(--od-brand-strong, var(--gs-colorcolor4, #065b99));
	background-color: transparent;
	border: 0 none;
	box-shadow: none;

	&:hover {
		background-color: transparent;
	}
}
.odtm-ohi-info a:hover {
	color: inherit !important;
}
.odtm-ohi-icon figure {
	display: inline-flex;
	margin: 0;
	padding: 14px;
	border-radius: 50%;
	background-color: var(--od-surface-brand, var(--gs-colorcolor4, #065b99));
}
.odtm-ohi-icon figure svg {
	display: inline-block;
	width: 20px;
	height: 20px;
	transform: scaleX(-1);
	fill: var(--od-text-on-brand, var(--gs-colorcolor6, #fff)) !important;
}
.odtm-ohi-info {
	text-transform: uppercase;
	color: var(--od-brand-strong, var(--gs-colorcolor4,#065b99));
	font-size: 16px;
}
.odtm-ohi-info > a {
	color: inherit !important;
}
.odtm-ohi-info-name {
	white-space: nowrap;
	text-transform: capitalize;
	color: inherit;
}
.odtm-ohi-info-label {
	font-size: 12px;
	color: inherit;
}
.odtm-ohi-info-number {
	font-size: 15px;
	color: inherit;
}
.odtm-ohi-calltext {
	display: none;
	background-color: var(--od-surface-raised, #fff);
	width: 100%;
	min-width: 240px;
	padding: 15px;
	position: absolute;
	top: 100%;
	left: 0;
	border-radius: 10px;
	box-shadow: 0 20px 40px -5px rgba(9, 30, 66, 0.18);
	z-index: 1;
}
.odtm-office-header-item:hover .odtm-ohi-calltext {
	display: block;
}
.odtm-ohi-calltext .odtm-ohict-item {
	line-height: 1.2;
	margin: 0;
}
.odtm-ohi-calltext .odtm-ohict-item:not(:first-child) {
	margin-top: 10px;
}
.odtm-office-header-item .odtm-ohi-calltext a {
	font-size: 16px;
	color: var(--od-brand-strong, var(--gs-colorcolor4,#065b99));
}
.odtm-office-header-item .odtm-ohi-calltext a:hover {
	color: var(--od-text-link-hover, var(--gs-colorcolor5,#05bcf4));
}
.transparent-header:not(.scrolled) .odtm-ohi-info, .transparent-header:not(.scrolled) .odtm-ohi-info > a {
	color: var(--od-text-on-brand, var(--gs-colorcolor9,#fff));
}

.odtm-si-icon figure {
	margin: 0;
	padding: 15px;
	border-radius: 50%;
	background-color: var(--od-surface-brand, var(--gs-colorcolor4, #065b99));
	display: inline-flex;
	cursor: pointer;
}
.odtm-si-icon svg {
	background-color: var(--od-surface-brand, var(--gs-colorcolor13,#065b99));
	width: 20px;
	height: 20px;
}
.odtm-si-icon svg path {
	fill: var(--od-text-on-brand, var(--gs-colorcolor9,#fff));
	stroke: var(--od-text-on-brand, var(--gs-colorcolor9,#fff));
}


/* Get Direction button */
.odtm-office-map-wrapper {
	position: relative;
}
.odtm-office-map-wrapper .odtm-office-direction {
	color: var(--od-action-primary-text, var(--gs-colorcolor9, #fff));
	text-decoration: none;
	position: absolute;
	display: inline-block;
	background-color: var(--od-action-primary-bg, var(--gs-colorcolor4, #065b99));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: var(--od-radius-pill, var(--gs-rounded-border-radius, 100px));
	box-shadow: 0 4px 20px 0 #00000026;
	padding: 16px 24px;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.odtm-office-map-wrapper .odtm-office-direction:hover {
	background-color: var(--od-action-primary-bg-hover, var(--gs-colorcolor5, #05bcf4));
}
/* end of Get Direction button */

.office-hours-title {
	border-bottom: thin solid var(--od-border-default, #e0e0e0);
	padding-bottom: 5px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 20px;
	color: var(--od-brand-strong, var(--gs-colorcolor4));
}

.fluentform .ff-el-tc label.ff_tc_label div.ff_t_c {
	font-size: 14px;
}

.html-sitemap {
    margin: 0 auto;
    padding: 0;

    .sitemap-section {
        border-bottom: 1px solid var(--od-border-default, #e5e5e5);
        margin-bottom: 1.5rem;
    }

    .sitemap-toggle {
        width: 100%;
        background: none;
        border: 0;
        padding: 1rem 0;
        font-size: 1.2rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        position: relative;

        &::after {
            content: "+";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.4rem;
        }

        &[aria-expanded="true"]::after {
            content: "–";
        }
    }

    .sitemap-list {
        list-style: none;
        margin: 0 0 1.5rem;
        padding: 0;

        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.6rem 1.5rem;
    }

    li {
        margin: 0;
    }

    a {
        font-size: 0.95rem;
        color: var(--od-text-primary, #222);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    /* Desktop: auto-open */
    @media (min-width: 768px) {
        .sitemap-list {
            display: grid !important;
        }

        .sitemap-toggle {
            pointer-events: none;

            &::after {
                display: none;
            }
        }
    }
}

/* Compact office facts inherit surrounding typography; ratings use conventional gold. */
.odpg-office-summary__star { display: inline-block; width: .95em; height: .95em; margin-inline: .1em; vertical-align: -.08em; color: #f4b400; }
.odpg-office-summary__separator { padding-inline: .25em; }
.odpg-office-summary--ratings .odpg-office-summary__item { white-space: nowrap; }
.odpg-office-summary--ratings .odpg-office-summary__item--detail { white-space: normal; }
.odpg-office-summary__score, .odpg-office-summary__count { white-space: nowrap; }
.odpg-office-summary__stars { display: inline-flex; gap: .1em; margin-inline-start: .35em; vertical-align: -.1em; color: #f4b400; }
.odpg-office-summary__stars .odpg-office-summary__star { margin-inline: 0; vertical-align: top; }
.odpg-office-summary__star-empty { fill: #dadce0; }

/* Imagify's <picture> wrapper (inc/imagify-picture.php): no box of its own, so the <img> keeps its layout. Its
   <source> would otherwise count as an empty flex or grid item and add a gap; the browser still reads it. */
picture.odtm-picture {
	display: contents;
}
picture.odtm-picture > source {
	display: none;
}