/*
Theme Name: Paradigm Theme Child
Theme URI: https://github.com/Paradigm-Oral-Health/Paradigm-Theme
Description: This is a child theme for Paradigm
Author: Gary Payne
Author URI: https://github.com/Matthewpco
Template: paradigm-theme
Version: 2.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: paradigm-oral-health-child
*/

/* Example child theme starter code for custom site styles */
/* Configuring headings and paragraph tags */

h1 {
    color: var(--white);
    font-size: 3.75rem;
    font-family: "Wix", sans-serif;
    line-height: 1.1;
    font-weight: 600;
}

h2 {
    color: var(--blue);
    font-size: 2.375rem;
    font-family: "Wix", sans-serif;
    font-weight: normal;
    line-height: 1.3;
}

h3 {
    color: var(--blue);
    font-size: 1.875rem;
    font-family: "Wix", sans-serif;
    font-weight: normal;
}

p {
    color: var(--black);
    font-family: "Avenir", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    padding-bottom: 2%;
}

a, label, input, select, textarea, span {
    font-family: "Avenir", sans-serif;
}

button, #paradigm-forms-button input[type='submit'], 
#search-page input[type='submit'], #paradigm-forms-sidebar-button input[type='submit'] {
    background-color: var(--sea-blue);
    color: var(--white);
    font-family: "Avenir", sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    padding: 8px 12px;
    transition: all .3s ease-in-out;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
}

button:hover {
    background-color: var(--hover-blue);
}

button i {
    color: var(--white);
    margin-right: 8px;
}

.transparent-button, .white-button {
    color: var(--sea-blue);
    background-color: transparent;
    border: 1px solid var(--sea-blue);
}

.transparent-button:hover, .white-button:hover {
    background-color: transparent;
    color: var(--hover-blue);
    border: 1px solid var(--hover-blue);
}

nav ul {
    list-style-type: none!important; /* Remove default bullets */
}

ul {
    list-style-type: none;
    font-family: "Avenir", sans-serif;
}

ol li {
    list-style: auto;
    list-style-position: inside;
}

li {
    padding-bottom: 5px;
    line-height: 1.5;
}

section nav ul li::before, #header-top-bar ul li::before {
    content: none;
    padding-right: none;
}

section ul li::before, article ul li::before {
    content: url(list-item-icon.png);
    padding-right: 7px;
}

/* 14px */
.text-xsmall {
    font-size: 0.875rem; 
}

/* 28px */
.text-large {
    font-size: 1.75rem;
}

.iframe-container-parent {
    position: relative;
    padding-bottom: 50%;
}

.iframe-container-child {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
}

button.cky-btn-do-not-sell, .cky-opt-out-checkbox-label, 
.cky-opt-out-btn-wrapper .cky-btn-confirm, .cky-opt-out-btn-wrapper .cky-btn-cancel,
.cky-revisit-bottom-left:hover::before {
    font-family: "Avenir", sans-serif;
}

#fifth-section .rpi, #child-page-template .rpi, #reviews-page-template .rpi,
#primary .rpi{
    font-family: "Avenir", sans-serif;
}

/* Fonts */

@font-face {
    font-family: "Avenir";
    src: local("AvenirLTStd-Roman"),url("fonts/AvenirLTStd-Roman.otf") format("opentype");
}

@font-face {
    font-family: "Wix";
    src: local("WixMadeforDisplay"),url("fonts/WixMadeforDisplay.ttf") format("truetype");
}

/* Custom Colors */

:root {
    --white: #ffffff;
    --black: #292929;
    --sea-blue: #297B9F; 
    --hover-blue: #2B9DD0;
    --blue: #0D284C;
    --light-blue: #E9EEF5;
}

/* Header top bar */

#header-top-bar {
    align-items: baseline;
}

#header-top-bar > a,
#header-top-bar address,
#header-top-bar div {
    padding: 0 .5rem;
    margin-right: 1.6rem;
    font-style: normal;
}

#header-top-bar > address > span, #header-top-bar > a,
#header-top-bar > div > span {
    text-decoration: underline;
    font-size: .75rem;
}

#header-top-bar > address > span,
#header-top-bar > div > span {
    cursor: default;
}

#header-top-bar address .submenu,
.top-bar-dropdown .submenu {
    min-width: 230px;
}

#header-top-bar address .submenu li,
.top-bar-dropdown .submenu li {
    padding-top: 8%;
    padding-bottom: 8%;
}

#header-top-bar address li a,
#header-top-bar div li a {
    color: var(--blue);
    font-size: .875rem;
    padding-left: 3%;
    padding-bottom: 8%;
    padding-top: 8%;
}

#header-top-bar address .submenu li:hover,
#header-top-bar div li:hover {
    background-color: var(--blue);
}

#header-top-bar address .submenu li:hover a,
#header-top-bar > div > ul > li:hover a {
    color: var(--white);
}

.top-bar-dropdown:focus-within .submenu,
.top-bar-dropdown:hover .submenu {
    display: block;
}

.top-bar-dropdown .submenu {
    background-color: var(--white);
    z-index: 20;
    border-top: 7px solid var(--blue);
    margin-top: 0;
}

#header-top-bar .submenu a .fa-solid {
    padding-right: 0;
    padding-left: 5px;
}

/* Header Navigation */

#header-nav-section {
    box-shadow: 0px 10px 20px #0000000D;
}

#header-nav-logo img {
    width: 50%;
}

#header-nav > ul > li {
    color: #211F20;
    cursor: default;
}

#header-nav i.fa-angle-down {
    transition: all 0.3s ease-in-out;
    transform: translateY(1px);
    margin: 0 8px;
    padding: 0;
    color: #A7291A;
}

#header-nav-section #header-nav .has-submenu:hover i {
    transform: rotate(180deg);
}

#header-nav .submenu {
    width: 280px;
    background-color: var(--sea-blue);
    z-index: 20;
    border-top: 10px solid var(--white);
}

#header-nav .submenu li {
    border-bottom: 1px solid #4193B8;
    padding-left: 0;
    padding-bottom: 8%;
    padding-top: 8%;
    padding-right: 0;
    color: var(--white);
    position: relative;
}

#header-nav .submenu li a {
    color: var(--white);
    padding-left: 7%;
    padding-bottom: 8%;
    padding-top: 8%;
    padding-right: 260px;
}

#header-nav .submenu li:last-child {
    border: none;
}

#header-nav .has-nested-menu:focus-within .nested-menu {
    display: block;
} 

#header-nav .submenu .has-nested-menu {
    position: relative;
    cursor: default;
    padding-left: 7%;
}

#header-nav .submenu li:hover {
    background-color: var(--hover-blue);
}

#header-nav .nested-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: var(--hover-blue);
    z-index: 1;
    width: 280px;
}

#header-nav .has-nested-menu:hover .nested-menu {
    display: block;
}

#header-nav .has-nested-menu .nested-menu li {
    border: none;
}

#header-nav .has-nested-menu .nested-menu li:hover {
    background-color: inherit;
}

#padded-search-link {
    color: var(--black);
    padding: 0 7% 0 0;
}

#header-nav .submenu li a:focus-visible {
    padding-right: 7%;
}

#header-nav .submenu > li:hover::after {
    content: "\f054";
    font-size: .7rem;
    font-family: FontAwesome;
    color: var(--white);
    position: absolute;
    right: 7%;
    top: 38%;
}

/* First section */

#first-section {
    display: flex;
    flex-direction: column;
}

#first-section > div {
    padding-left: 10%;
    padding-top: 115px;
    z-index: 20;
    margin-bottom: -250px;
    max-height: 250px;
}

#first-section h1 {
    text-shadow: 0px 6px 8px #00000036;
    margin: 0;
}

#first-section h2 {
    text-shadow: 0px 6px 8px #00000036;
    color: var(--white);
    margin-top: 2%;
}

#first-section video {
    width: 100%;
    height: 92vh;
    object-fit: cover;
}

/* Second section */

#second-section {
    gap: 2%;
    margin-top: -14vh;
    display: flex;
    padding-top: 0;
}

#second-section .service-card, #fourth-section .service-card {
    background-image: url(/wp-content/uploads/homepage-card-icon.webp);
    background-size: cover;
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 2.5%;
    padding-top: 2.5%;
    display: flex;
    flex-direction: column;
    width: 33.3%;
    align-items: center;
    box-shadow: none;
}

#second-section .service-card img, #fourth-section .service-card img {
    margin-top: 4%;
}

#second-section .service-card h3, #fourth-section .service-card h3 {
    margin: 0;
    padding-top: 7%;
    padding-bottom: 5%;
    font-size: 1.25rem;
    font-weight: 600;
}

#second-section .service-card p, #fourth-section .service-card p {
    margin: 0;
    text-align: center;
    padding-bottom: 5%;
}

#second-section .service-card a, #fourth-section .service-card a {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    margin-top: 5%;
}

/* third section */

#third-section {
    display: flex;
    background-image: url(/wp-content/uploads/homepage-about-section-background.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

#third-section img {
    width: 100%;
    padding-left: 7%;
}

#third-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* meet our surgeons template */

#meet-our-surgeons-template {
    background-color: var(--light-blue);
}

#meet-our-surgeons-template h2 {
    margin-top: 0;
    margin-bottom: 3%;
}

#poh-doctor-switcher-cards-container {
    justify-content: space-between;
}

#poh-doctor-switcher-cards-container .poh-doctor-switcher-card {
    width: 32%;
    text-align: left;
    align-items: start;
}

#poh-doctor-switcher-cards-container .poh-doctor-switcher-card img {
    width: 100%;
}

#poh-doctor-switcher-cards-container .poh-doctor-switcher-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

#poh-doctor-switcher-cards-container .poh-doctor-switcher-card p {
    padding-bottom: 4%;
    margin: 0;
}

/* Fourth section */

#fourth-section > div {
    gap: 2%;
    display: flex;
}

#fourth-section h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 4%;
}

/* fifth section */

#fifth-section {
    padding-top: 0;
}

#fifth-section h2 {
    text-align: center;
    margin: 0;
}

#fifth-section p {
    text-align: center;
    margin: 2% auto;
    width: 95%;
}

/* sixth section */

#sixth-section {
   background-image: url(/wp-content/uploads/homepage-blue-background-with-pattern.webp);
   background-size: cover;
}

#sixth-section p {
    color: var(--white);
}

#sixth-section h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 5%;
    color: var(--white);
}

#sixth-section h3 {
    margin-top: 0;
    margin-bottom: 2%;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
}

#sixth-section > div {
    display: flex;
}

#sixth-section > div > div:first-child {
    width: 40%;
}

#sixth-section #paradigm-forms-container {
    width: 60%;
}

#sixth-section-hours {
   display: flex;
   gap: 9%;
}

#sixth-section-hours > div {
   display: flex;
   flex-direction: column;
}

#sixth-section-hours p {
    margin: 1px 0;
}

#paradigm-forms-container #paradigm-form > div:nth-child(6), #paradigm-forms-container #paradigm-form > div:nth-child(7) {
    flex-basis: 50%;
}

#sixth-section label {
    font-size: .875rem;
    color: var(--white);
}

#sixth-section #paradigm-forms-button, #paradigm-forms-sidebar-button {
    width: 100%;
    text-align: center;
}

#paradigm-form #paradigm-forms-button input[type='submit'],
#paradigm-form #paradigm-forms-sidebar-button input[type='submit'] {
    background-color: transparent;
    border: 1px solid var(--white);
}

/* footer */

footer {
    background-color: #0D284C;
    padding-top: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer a, footer p {
    color: var(--white);
}

footer nav {
    display: flex;
    gap: 2vw;
    margin: 2% 0;
}

footer > a:nth-child(3) {
    font-size: 2.375rem;
    font-weight: bold;
    margin-bottom: 2%;
}

#footer-locations-container {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 0px 15%;
}

#footer-locations-container p {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 50%;
}

footer > a:nth-child(5) {
    background-color: #0F0F0F;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2% 0;
    margin-top: 3%;
}

footer > p {
    background-color: #0F0F0F;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 1.5%;
    margin: 0;
    text-align: center;
    font-size: .875rem;
}

/* child page */

#hero-banner-section {
    background-color: var(--blue);
}

#hero-banner-section div {
    padding-left: 10%;
    padding-top: 2%;
    padding-bottom: 3%;
    padding-right: 5%;
    width: 60%;
}

#hero-banner-section p {
    color: var(--white);
    font-size: .75rem;
}

#hero-banner-section h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 3.4rem;
}

#hero-banner-section img {
    width: 40%;
    object-fit: cover;
}

#child-page-template .two-thirds-column {
    padding-right: 5%;
}

#paradigm-forms-sidebar-container {
    background-color: var(--blue);
    padding: 2% 7%;
}

#child-page-reviews-sidebar h3 {
    margin-top: 15%;
    text-align: center;
}

#paradigm-forms-sidebar-container h3 {
    color: var(--white);
    text-align: center;
    margin: 4% 0;
}

#paradigm-forms-sidebar-button {
    text-align: center;
}

#paradigm-forms-sidebar-button input[type='submit'] {
    width: initial;
}

#paradigm-forms-sidebar-container #paradigm-form p {
    color: var(--white);
    padding-top: 1%;
    padding-bottom: 0;
}

#child-page-template video {
    padding-top: 2%;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#child-page-template a {
    text-decoration: underline;
}

#child-page-template #paradigm-form-received {
    color: var(--white);
}

/* mobile top bar */

#mobile-top-bar-section {
    border-top: 10px solid var(--blue);
}

#mobile-nav-toggle-section .fa-bars {
    color: var(--sea-blue);
}

#mobile-nav-toggle-section i.fa-phone {
    background-color: var(--sea-blue);
    border: 12px solid var(--sea-blue);
    border-radius: 50%;
    color: #fff;
}

/* mobile navigation */

#mobile-nav-section {
    z-index: 30;
}

#mobile-nav-section .mobile-modal-content {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
}

#mobile-nav-section-header .close {
    cursor: pointer;
    color: #666666;
}

#mobile-nav-section-body {
    margin: 2vh 0;
}

#mobile-nav-section-body nav ul li {
    color: #172943;
    cursor: default;
    font-size: 1.125rem;
    margin: 2% 0;
}

#mobile-nav-section-body ul li a {
    color: #172943;
}

#mobile-nav-section-footer a {
    color: #0F0F0F;
    text-decoration: underline;
    line-height: 1.4;
    padding-bottom: 4%;
    display: block;
}

#mobile-nav-section-footer a > i {
    padding-right: 5px;
}

#mobile-nav-section-footer {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Privacy policy page */

#privacy-policy-page-template a {
    text-decoration: underline;
}

/* search page */

#search-page .search-form input.search-field {
    padding: 1%;
}

#search-page .two-thirds-column {
    padding-right: 5%;
}

/* reviews page */

#reviews-page-template ul {
    text-align: left;
    margin: 0 auto;
    width: fit-content;
}

#reviews-page-template .rpi {
    margin-bottom: 5%;
}

/* blog page */

#blog-template .read-more {
    font-family: "Avenir", sans-serif;
    font-size: .875rem;
    line-height: 1.5;
    padding: 8px 12px;
    transition: all .3s ease-in-out;
    border-radius: 0;
    cursor: pointer;
    font-weight: normal;
    color: var(--sea-blue);
    background-color: transparent;
    border: 1px solid var(--sea-blue);
}

#blog-template .read-more:hover {
    color: var(--hover-blue);
    border: 1px solid var(--hover-blue);
}

#blog-body .post {
    padding: 5%;
}

#primary .post-navigation .nav-links {
    display: none;
}

#primary .two-thirds-column {
    padding-right: 5%;
}

#primary a {
    text-decoration: underline;
}

#primary .entry-header img {
    display: none;
}

/* Responsive media queries */

/* Laptop media queries */
@media only screen and (max-width: 1439px) {

    #header-nav ul {
        gap: 0;
    }

    #header-nav > ul > li {
        font-size: .85rem;
    }

    #header-nav-section #header-nav .has-submenu i {
        margin-left: 5px;
        margin-right: 10px;
    }

}
/* Tablet media queries */
@media only screen and (max-width: 1023px) {

    /* struture */

    .section-padding {
        padding: 5%;
    }

    .sticky {
        position: inherit;
    }

    /* header */

    .hidden-mobile {
        display: block;
    }
    
}

/* Mobile media queries */
@media only screen and (max-width: 767px) {

    /* structure */

    h1 {
        font-size: 3.125rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    button {
        font-size: .75rem;
    }

    .one-half-column, .two-thirds-column, .one-third-column, #hero-banner-section img, 
    #second-section .service-card, #fourth-section .service-card {
        width: 100%;
    }

    #hero-banner-section, #child-page-template, #second-section, #third-section, 
    #sixth-section > div, #search-page, #primary article {
        flex-direction: column;
    }

    /* Child pages */

    #hero-banner-section div {
        padding-bottom: 10%;
        width: 100%;
    }

    #hero-banner-section h1 {
        font-size: 2rem;
    }

    #child-page-reviews-sidebar h3 {
        font-size: 1.875rem;
    }

    /* Meet our surgeons */

    #meet-our-surgeons-template {
        padding-bottom: 20%;
        margin-top: 15%;
    }

    #meet-our-surgeons-template h2 {
        margin-top: 8%;
        margin-bottom: 0;
    }

    #poh-doctor-switcher-cards-container .poh-doctor-switcher-card {
        width: 100%;
        margin-top: 15%;
    }

    /* Footer */

    footer > a > img {
        margin: 20% 0;
    }

    footer nav {
        text-align: center;
        margin-bottom: 9%;
        flex-direction: column;
        gap: 20px;
    }

    #footer-locations-container {
        flex-direction: column;
        margin: 8% 0;
        gap: 20px;
        padding: 0;
    }

    #footer-locations-container p {
        width: 100%;
    }

    footer > a:nth-child(5) {
        padding: 8% 0;
    }

    footer > p {
        font-size: .75rem;
        padding-bottom: 5%;
    }

    /* first section */

    #first-section > div {
        padding-left: 5%;
        padding-top: 10%;
    }

    /* second section */

    #second-section {
        gap: 25px;
        margin-top: -6vh;
    }

    /* third section */

    #third-section img {
        padding-left: 0;
        padding-top: 10%;
    }

    /* fourth section */

    #fourth-section h2 {
        margin-top: 14%;
        margin-bottom: 18%;
    }

    #fourth-section > div {
        flex-direction: column;
        gap: 20px;
    }

    /* fifth section */

    #fifth-section {
        padding-top: 5%;
    }

    #fifth-section h2 {
        margin-top: 14%;
        margin-bottom: 10%;
    }

    /* sixth section */

    #sixth-section {
        padding-bottom: 20%;
    }

    #sixth-section h2 {
        margin-top: 14%;
        margin-bottom: 10%;
    }

    #sixth-section > div > div:first-child {
        width: 100%;
    }

    #sixth-section #paradigm-forms-container {
        width: 100%;
        margin-top: 15%;
    }

    #paradigm-forms-container #paradigm-form > div:nth-child(6), 
    #paradigm-forms-container #paradigm-form > div:nth-child(7) {
        flex-basis: 100%;
    }

}