/* Import Rules */
 @import url("https://use.typekit.net/apu8ryh.css");

/* Variables.css | Aug 13, 2026 @10:17:13 AM  */

:root {
/* Colors */
--color-1: #7A7462; /* Brown */
--color-1-rgb: 122, 116, 98;

--brand-color: var(--color-1);

/* Fonts */

--font-1: lato, sans-serif;
--font-2: baskerville-display-pt, sans-serif;
--font-3: alternate-gothic-atf, sans-serif;

--body-font: var(--font-1);
--heading-font: var(--font-2);
--heading-alt-font: var(--font-3);
--button-font: var(--font-3);

/* Borders */

--border-radius-tight: 0.5rem;
--border-radius: 1rem;
--border-radius-loose: 2rem;

/* Wrapper */

--wrapper-width: 1200px;
--wrapper-padding: 2rem;

--section-padding: 8rem;

--modal-padding: 4rem;
/* Transitions */

--transition: 0.5s ease all;

@media only screen and (max-width: 767px) {
--column-padding: 2rem !important;
}

/* Booking Button Offsets */

--booking-offset-right: 3.5rem;
--booking-offset-bottom: 3.5rem;
    --booking-page-offset: 23rem;
}/* Typography.css | Sep 1, 2026 @4:58:39 PM  */

body {
font-family: var(--body-font);
}

a {
color: var(--brand-color);
text-underline-offset: 4px; 
text-decoration-thickness: 1px;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0;
line-height: 0.8em;
margin-bottom: 3rem;

strong {
display: block;
font-size: max(14px, 0.45em);
font-family: var(--heading-alt-font);
font-weight: 200;
text-transform: uppercase;
letter-spacing: 6px;
margin-bottom: 1rem;

&:not(span strong) {
color: var(--brand-color);
}

@media only screen and (max-width:512px) {
letter-spacing: 3px;
}
}
}

h2 {
font-size: var(--font-size-4xl);
}

.btn, button {
font-family: var(--button-font);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
}/* General.css | Sep 1, 2026 @4:58:27 PM  */

/* Fade In All Content */

main .below-viewport:not(.column-widget) {
position: relative;
top: 100px;
opacity: 0;
transition: 0.5s ease all;
}

main .partial-below-viewport:not(.column-widget),
main .in-viewport:not(.column-widget) {
position: relative;
top: 0;
opacity: 1;
transition: 1s ease all;
}

/* General */

body#template {
height: auto;
}

* + .btn, * + button{
margin: 0;
}

.wrapper {
margin: auto;
}

hr {
height: 1px;
margin: 4rem 0;
border: none;
background-color: var(--brand-color);

@media only screen and (max-width:767px) {
margin: 2rem 0;
}
}

img {
max-width: 100%;
height: auto;

main .content-module & {
border-radius: var(--border-radius);
}
}

/* Buttons */

.btn,
button {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: calc(var(--item-gap)/2);
background-color: #000;
border: 1px solid #CCC;
border-radius: var(--border-radius);
color: #FFF;
padding: 1.5rem 2rem 1.3rem;

&:hover {
background-color: #FFF;
color: #000;
border: 1px solid #CCC;
}

&.alt {
background-color: var(--brand-color);
border: 1px solid color-mix(in srgb, var(--brand-color), black 30%);
color: #FFF;

&:hover {
background-color: #FFF;
color: var(--brand-color);
border: 1px solid var(--brand-color);
}
}

&.white {
background-color: #FFF;
border: 1px solid #666;
color: #000;

&:hover {
background-color: var(--brand-color);
border: 1px solid color-mix(in srgb, var(--brand-color), black 30%);
color: #FFF;
}
}
}

/* Header */

header {
background: #000;

.site-logo img {
max-height: 80px;
}

@media only screen and (max-width: 550px) {
.column-widget .column {
flex-wrap: wrap !important;
justify-content: center !important;

.flex-box {
justify-content: center;
}
}
}

.content-module:has(.site-logo) {
flex: 0 0 auto;
}

.flex-box {
justify-content: flex-end;

div {
flex: 0 1 auto;
}
}
}

/* Appointment Modal */

input#appointment-toggle {
display: none;
}

.appointment-overlay {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--item-gap);
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
pointer-events: none;
opacity: 0;
z-index: 100000;
transition: var(--transition);
padding: var(--item-gap);

input#appointment-toggle:checked + & {
opacity: 1;
pointer-events: auto;
}

.overlay-close {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
        transition: var(--transition);
background-color: #000;
opacity: 0;

&:hover {
opacity: 0.2;
}
}
}

.appointment-modal {
position: relative;
width: 1000px;
max-width: calc(100% - (var(--wrapper-padding) * 2));
max-height: 90vh;
padding: var(--modal-padding);
background-color: #FFF;
overflow-y: scroll;
border-radius: var(--border-radius-loose);
box-shadow: 0 0 30px rgba(0,0,0,0.1);

> label {
position: absolute;
top: 1rem;
right: 1rem;
gap: 0;
flex-direction: column-reverse;
padding: 0;
background: none;
border: none;
font-size: 0;
color: #000;
transition: var(--transition);

i {
display: inline-flex;
align-items: center;
justify-content: flex-end;
font-size: var(--font-size-xl);
}

&:hover {
border: none;
color: var(--brand-color);
transform: scale(1.2);
}
}

h2 {
font-size: var(--font-size-2xl);
}

.scroll {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 30rem;
overflow: hidden;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
transition: var(--transition);
padding-bottom: calc(var(--item-gap) * 2);
pointer-events: none;

strong {
text-transform: uppercase;
font-family: var(--heading-alt-font);
font-weight: 300;
letter-spacing: 6px;
}

&.can-scroll {
opacity: 1;
}
}

@media only screen and (max-width:1024px) {
padding: calc(var(--item-gap) * 2);
}
}

/* Footer */

footer {
background: #000;

&::before {
content: "";
display: block;
height: 12px;
background: url("/files/southwalkerdental/web-img/noise-gradient.jpg");
background-size: cover;
}

.content-module.text {
flex: 1;
font-size: var(--font-size-md);

a {
color: #FFF;
margin-right:6px;
}
}

.site-logo img {
max-height: 75px;
}

.column-widget {
padding: calc(var(--section-padding) + 40px) 0 !important;
}

.column {
gap: 100px !important;

@media only screen and (max-width:800px) {
gap: 60px !important;
}

@media only screen and (max-width:767px) {
flex-direction: column !important;

.content-module {
text-align: center;
}
}
}

.navigation-widget.standard.icons {
width: auto;

ul {
display: flex !important;
gap: var(--item-gap);
}

.l1 {
a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
aspect-ratio: 1 / 1;
background-color: #FFF;
font-size: 0;
color: #000;
border-radius: var(--border-radius-tight);

&:hover {
background-color: var(--brand-color);
}

&::before {
font: var(--fa-font-regular);
font-size: var(--font-size-lg);
line-height: 0;
}

.item-facebook &::before {
content: "\f39e";
font: var(--fa-font-brands);
font-size: var(--font-size-lg);
line-height: 0;
}

.item-instagram &::before {
content: "\f16d";
font: var(--fa-font-brands);
font-size: var(--font-size-lg);
line-height: 0;
}

.item-location &::before {
content: "\f3c5";
}

.item-call &::before {
content: "\f095";
}

.item-email &::before {
content: "\f0e0";
}
}
}
}
}

label.book-floating {
position: fixed;
bottom: var(--booking-offset-bottom);
right: var(--booking-offset-right);
z-index: 99;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #FFF;
border-radius: 200px;
width: 72px;
height: 72px;
font-size: 0;
color: #000;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 0 30px rgba(0,0,0,0.2);

i {
font-size: var(--font-size-xl);
}

&:hover {
background-color: var(--brand-color);
}
}

.grecaptcha-badge {
display: none;
}

#templatefooter {
display: none;
}/* Modules-Widgets.css | Aug 12, 2026 @3:28:01 PM  */

/* Column Widget */

.column-widget {
&.new-patients {
.column::before,
.column::after {
content: "";
position: absolute;
top: 50%;
right: -1px;
width: 2px;
height: 60%;
translate: 0 -50%;
background-color: var(--brand-color);
}

.column::before {
display: none;
bottom: -2px;
top: auto;
left: 50%;
translate: -50%;
width: 60%;
height: 2px;
}

.column:last-child::after {
display: none;
}

@media only screen and (max-width:680px) {
.column:nth-child(even)::after {
display: none;
}

.column:nth-child(-n+2)::before {
display: block;
}
}

@media only screen and (max-width:512px) {
.column::after {
display: none;
}

.column:not(:last-child)::before {
display: block;
}
}
}

&.hero {
@media only screen and (max-width:1024px) {
.backdrop {
background-position: right -300px center !important;
}
}

@media only screen and (max-width:840px) {
.backdrop {
background-position: right -400px center !important;
}
}

@media only screen and (max-width:512px) {
--section-padding-top: 20rem !important;
--section-padding-bottom: 0 !important;

.backdrop {
background-position: -750px center !important;

.backdrop-overlay {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%) !important;
}
}
}

@media only screen and (max-width:400px) {
.backdrop {
background-position: -1000px center !important;
}
}
}

&.map {
.information .flex-box:not(.buttons) {
width: 100%;
align-items: center;
gap: 0.5rem;

img {
border-radius: 0;
}

a {
display:inline-block;
width: 100%;
}
div:first-child {
flex: 0 1 auto;
width: 90px;
}

div {
max-width: 100%;
}

@media only screen and (max-width:480px) {
gap: 2rem;
flex-direction: column;
align-items: flex-start;

div {
width: 100%;
}

div:first-child { 
width: 40px;
}
}
}

.content-module + .content-module {
margin-top: 2rem;
}
}

&.border-bottom::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: "";
display: block;
height: 12px;
background: url("/files/southwalkerdental/web-img/noise-gradient.jpg");
background-size: cover;
z-index: 1;
}

&.border-top::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
content: "";
display: block;
height: 12px;
background: url("/files/southwalkerdental/web-img/noise-gradient.jpg");
background-size: cover;
z-index: 1;
}

&.offset-right {
@media only screen and (min-width:768px) {
.column {
margin-left: calc(100%/3);
}
}
}

&.border-radius {
.column {
border-radius: var(--border-radius-loose);
}
}

&.bio {

.content-module img {
display: none;
}

@media only screen and (max-width:767px) {
.content-module p:has(img) {
margin-bottom: 2rem;

img {
display: block;
}
}
}

@media only screen and (max-width:1280px) {
.backdrop {
background-position: 30% center !important
}
}

@media only screen and (max-width:767px) {
.backdrop {
background-position: 60% !important
}
}
}

.header,
.footer {
max-width: 765px;
}
}

/* Form Builder */

form.formWizForm {
ul {
li {
&.sectionbreak {
margin-bottom: 0;
}
}
}
}

/* Content Widget */

.content-module {
&.border-radius {
border-radius: var(--border-radius-loose);
overflow: hidden;
}

&.white {
padding: 2rem 4rem;
background-color: #FFF;

@media only screen and (max-width:767px) {
padding: 2rem;
}
}

/* Accordion */

details.mce-accordion {
background-color: #FFF;
border-radius: var(--border-radius-loose);
border: none;
padding: 2.5rem var(--column-padding);
transition: var(--transition);

&:not(:last-child) {
margin-bottom: calc(var(--item-gap) / 2);
}

summary {
margin: 0;
padding: 0;
background-color: #FFF;
text-transform: uppercase;
font-size: var(--font-size-lg);

details[open] & {
padding: 0 0 2.5rem;
border-bottom: 2px solid var(--brand-color);
}
}

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

}
}

.flex-box.buttons {
gap:1rem;
margin-top:2rem;
div {
flex: 0 1 auto;
}
}
}

/* Form Builder Module */

form.formWizForm {
.desc {
font-size: var(--font-size-md);
}
label {
font-family: var(--heading-alt-font);
text-transform: uppercase;
color: var(--brand-color);
}

.phone .left,
.email input {
margin: 0;
}

input, textarea {
padding: calc(var(--item-gap) / 2);
font-family: var(--body-font);
font-weight: 700;
}
}