/*
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: "Gilroy", sans-serif;
    line-height: 1.2;
}

h2 {
    color: var(--black);
    font-size: 2.5rem;
    font-family: "Gilroy", sans-serif;
}

h3 {
    color: var(--black);
    font-size: 2rem;
    font-family: "Gilroy", sans-serif;
}

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

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

/* Targeted specific needs for strong font in Footer and on Child pages 2/3 section as needed since <strong> was not being effective with no definition */
footer strong, #child-page-template div.two-thirds-column strong {
    font-family: "Gilroy-SemiBold", sans-serif;
}

button, #paradigm-form input[type=submit], #search-page .search-form input[type=submit] {
    background-color: var(--blue);
    color: var(--white);
    font-family: "Gilroy", sans-serif;
    font-weight: bold;
    font-size: .875rem;
    line-height: 1.6;
    border: none;
    padding: 9px 15px;
    transition: all .3s ease-in-out;
    border-radius: 4px;
    cursor: pointer;
}

button i {
    margin-right: 8px;
}

button:hover, #search-page .search-form input[type=submit]:hover {
    background-color: var(--dark-blue);
}

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

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

#paradigm-form input[type=submit] {
    background-color: var(--green);
}

#paradigm-form input[type=submit]:hover {
    background-color: var(--gray);
}

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

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

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 {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--blue);
    content: '\f45c';
    padding-right: 7px;
    font-size: .5rem;
    transform: translateY(-2px);
    display: inline-block;
}

.learn-more {
    color: var(--blue);
    font-size: 1rem;
    font-family: "Avenir", sans-serif;
}

.learn-more-colored {
    color: var(--blue);
    font-size: 1rem;
    font-family: "Avenir", sans-serif;
}

.learn-more i, .learn-more-colored i {
    margin-left: 6px;
}

.learn-more:hover {
    color: var(--black);
}

.learn-more-colored:hover {
    color: var(--white);
}

/* 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%;
    height: 100%;
    border: none;
    min-height: 250px;
}

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: "Gilroy-Regular", sans-serif;
}

/* Fonts */

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

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

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

/* Custom Colors */

:root {
    --white: #ffffff;
    --black: #3E3E3E;
    --gray: #55555C;
    --light-blue: #EFF6F8; 
    --blue: #6BC4E8;
    --dark-blue: #197AA2;
    --green: #22B343;
}

/* Header top bar */

#header-top-bar {
    padding-right: 5%;
    align-items: baseline;
}

#header-top-bar > a:last-child {
    padding-right: 0;
}

#header-top-bar address {
    font-style: normal;
    margin-right: 1.5%;
}

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

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

#top-bar-dropdown .submenu {
    min-width: 260px;
}

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

#top-bar-dropdown .submenu li:hover {
    background-color: var(--dark-blue);
}

#top-bar-dropdown .submenu li:hover a {
    color: var(--white);
}

#top-bar-dropdown .submenu a {
    color: var(--blue);
    font-size: .875rem;
    padding-left: 3%;
    padding-bottom: 8%;
    padding-top: 8%;
}

#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: 100%;
}

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

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

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

#header-nav-section #header-nav .has-submenu:hover i.fa-angle-right {
    transform: none;
}

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

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

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

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

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

#header-nav .submenu li:hover {
    background-color: #4BA0C3;
}

#header-nav .nested-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #3A8FB2;
    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;
}

/* Added styling for practice updates regarding buttons in navigation and on the top bar */
button .inquire-patients {
    font-size: .75rem;
}

#header-top-bar > a.top-refferal-partners {
    color: var(--white);
    transition: all .3s ease-in-out;
}

#header-top-bar > a.top-refferal-partners:hover {
    color: var(--black);
}

/* first section */

#first-section {
    position: relative;
    z-index: 40;
}

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

#first-section div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#first-section h1 {
    margin: 0;
    text-shadow: 0px 3px 6px #00000029;
    padding-top: 10%;
    padding-bottom: 1.5%;
    padding-left: 10%;
    padding-right: 10%;
}

#first-section a {
    padding-left: 10%;
}

#first-section img {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* second section */

#second-section {
    gap: 6%;
    margin-top: -17vh;
    display: flex;
    position: relative;
    padding-top: 0;
    background-color: var(--dark-blue);
}

#second-section .service-card, #fifth-section .service-card {
    display: flex;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    width: 33%;
    position: relative;
    z-index: 50;
}

#second-section .service-card div, #fifth-section .service-card div {
    background-color: var(--gray);
    padding-left: 8%;
    padding-right: 20%;
    padding-bottom: 8%;
    padding-top: 8%;
    display: flex;
    flex-direction: column;
    border-right: 4px solid var(--blue);
}

#second-section .service-card h2, #fifth-section .service-card h3 {
    color: var(--white);
    margin: 0;
    padding-bottom: 9%;
    font-size: 1.25rem;
}

#second-section .service-card p, #fifth-section .service-card p {
    color: var(--white);
    margin: 0;
}

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

#second-section .service-card img, #fifth-section .service-card img {
    position: absolute;
    right: -10%;
    top: 33%;
}

/* third section */

#third-section {
    background-color: var(--dark-blue);
    display: flex;
    gap: 4%;
    align-items: center;
    border-top: 1px solid var(--dark-blue);
}

#third-section h2, #third-section p {
    color: var(--white);
}

/* meet our surgeons template */

#meet-our-surgeons-template h2 {
    color: var(--white);
    background-color: #878790;
    padding: 3% 10%;
    margin: 0;
}

.poh-doctor-switcher-slide {
    background-image: url(/wp-content/uploads/slider-background.webp);
    background-size: cover;
    padding-right: 10%;
    padding-left: 10%;
    flex-direction: row-reverse;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-left-arrow, .poh-doctor-switcher-slide .poh-doctor-switcher-right-arrow {
    border: 3px solid var(--blue);
    color: var(--blue);
    background-color: transparent;
    position: absolute;
    top: 40%;
    padding: 15px;
    font-size: 20px;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-left-arrow {
    left: 2%;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-right-arrow {
    right: 2%;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-dr-image {
    width: 40%;
}

.poh-doctor-switcher-slide .display-flex {
    width: 60%;
    padding-right: 5%;
    padding-top: 10%;
    padding-bottom: 5%;
}

.poh-doctor-switcher-slide h2, .poh-doctor-switcher-slide .poh-doctor-switcher-divider,
.poh-doctor-switcher-slide div.display-flex.flex-direction-column > p:nth-child(2) {
    display: none;
}

.poh-doctor-switcher-slide h3 {
    color: var(--white);
    font-size: 1.625rem;
    margin-bottom: 3%;
}

.poh-doctor-switcher-slide p {
    color: var(--white);
    line-height: 1.7;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-learn-more-link {
    color: var(--white);
    font-size: 1rem;
    font-family: "Avenir", sans-serif;
    margin-bottom: 12%;
    margin-top: 4%;
}

.poh-doctor-switcher-slide .poh-doctor-switcher-learn-more-link:hover {
    color: var(--blue);
}

.poh-doctor-switcher-slide button {
    border: 2px solid var(--white);
    background-color: transparent;
    color: var(--white);
}

.poh-doctor-switcher-slide button.poh-doctor-switcher-active, .poh-doctor-switcher-slide button:hover {
    border: 2px solid var(--blue);
    color: var(--blue);
    background-color: transparent;
}

/* fourth section */

#fourth-section {
    display: flex;
    gap: 3%;
    align-items: center;
}

/* fifth section */

#fifth-section {
    background-color: var(--light-blue);
}

#fifth-section h2 {
    text-align: center;
    margin-top: 2%;
    margin-bottom: 5%;
}

#fifth-section > div {
    display: flex;
    gap: 6%;
}

/* sixth section */

#sixth-section {
    background-color: var(--light-blue);
}

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

/* seventh section */

#seventh-section {
    background-color: var(--dark-blue);
}

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

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

#seventh-section > p {
    text-align: center;
    margin-bottom: 3%;
}

#seventh-section h3 {
    color: var(--white);
    font-size: 1.375rem;
    margin-bottom: 3%;
    margin-top: 7%;
}

#seventh-section > div > div > h3:nth-of-type(3) {
    font-size: 1rem;
}

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

#seventh-section button {
    background-color: transparent;
    border: 1px solid var(--white);
}

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

#seventh-section > div > div:first-child {
    width: 35%;
}

#paradigm-forms-container {
    width: 65%;
    padding: 2%;
    background-color: #116384;
}

#seventh-section #paradigm-forms-button {
    padding-bottom: 1%;
    width: 100%;
    text-align: center;
}

#seventh-section > div > div > div.display-flex {
    gap: 7%;
}

#seventh-section > div > div > div.display-flex p {
    margin-top: 0;
    margin-bottom: 3%;
}

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

#seventh-section #paradigm-forms-container p {
    padding-bottom: 0;
}

#paradigm-form-received {
    padding: 0;
    margin: 2% 0;
    text-align: center;
}

/* footer */

footer {
    padding-top: 5%;
    padding-bottom: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

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

#footer-locations-container strong {
    margin-bottom: 2%;
    display: block;
}

#footer-locations-container a {
    display: block;
    font-size: 1.375rem;
    font-weight: bold;
}

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

#footer-icons-container {
    display: flex;
    gap: 2vw;
    margin-top: 2%;
    align-items: center;
}

footer a {
    color: var(--black);
}

footer > p {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1%;
    margin-top: 1%;
    margin-bottom: 0;
    text-align: center;
    font-size: .75rem;
}

footer > p > a {
    text-decoration: underline!important;
}

/* child page */

#hero-banner-section {
    background-image: url(/wp-content/uploads/background.webp);
    background-size: cover;
}

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

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

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

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

#child-page-template .two-thirds-column p:first-child {
    margin-top: 0;
}

#paradigm-forms-sidebar-container {
    background-color: var(--dark-blue);
}

#child-page-reviews-sidebar {
    margin-top: 17%;
}

#child-page-template ul {
    margin: 3% 0;
}

#paradigm-forms-sidebar-container h3 {
    text-align: center;
    margin: 6% 0;
    color: var(--white);
    font-size: 1.875rem;
}

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

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

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

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

#child-page-template ul {
    padding-left: 15px;
}

#child-page-template ul li::before {
    margin-left: -15px;
}

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

#child-page-template a.learn-more {
    text-decoration: none;
}

/* privacy policy */

#privacy-policy-page-template ol li {
    list-style: auto;
}

#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%;
}

/* mobile top bar */

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

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

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

/* mobile navigation */

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

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

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

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

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

#mobile-nav-section-body ul li a {
    color: var(--black);
}

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

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

.rpi-name {
    color: var(--black);
}



/* Responsive media queries */

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

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

    #header-nav-section button {
        font-size: .75rem;
    }

    #header-nav-logo {
        padding-right: 1%;
    }

    #padded-search-link {
        padding: 0% 7% 0% 7%;
    }

}

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

    .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: 2.625rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.375rem;
    }

    button {
        font-size: .75rem;
    }

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

    #hero-banner-section, #child-page-template, footer nav, #second-section, #fifth-section > div, 
    #seventh-section > div, #third-section {
        flex-direction: column;
    }

    #first-section h1 {
        padding-top: 10vh;
        padding-bottom: 6%;
    }

    #first-section img {
        display: none;
    }

    #second-section .service-card, #fifth-section .service-card {
        width: 90%;
    }

    #second-section, #fifth-section > div {
        gap: 2rem;
    }

    #third-section {
        padding-bottom: 15%;
    }

    #fourth-section {
        flex-direction: column-reverse;
        padding-bottom: 15%;
    }

    #fifth-section {
        padding-top: 15%;
        padding-bottom: 15%;
    }

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

    #seventh-section > div > div:first-child {
        width: 100%;
        text-align: center;
    }

    #paradigm-forms-container {
        width: 100%;
        margin-bottom: 10%;
    }

    #seventh-section > div > div > div.display-flex {
        justify-content: center;
        text-align: left;
        gap: 10%;
        padding-bottom: 15%;
    }

    #seventh-section {
        padding-top: 15%;
    }

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

    #privacy-policy-page-template ol {
        padding-left: 4%;
    }

    #child-page-reviews-sidebar, #reviews-page-template {
        margin-bottom: 10%;
    }

    /* doctor switcher */

    .poh-doctor-switcher-slide {
        flex-direction: column-reverse;
        height: 810px;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-dr-image {
        width: 100%;
        height: 100%;
        margin-bottom: 40%;
    }

    .poh-doctor-switcher-slide .display-flex {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .poh-doctor-switcher-slide h3 {
        font-size: 1.375rem;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-button-container button {
        display: none;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-left-arrow, .poh-doctor-switcher-slide .poh-doctor-switcher-right-arrow {
        bottom: 5%;
        top: initial;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-left-arrow {
        left: 30%;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-right-arrow {
        right: 30%;
    }

    .poh-doctor-switcher-slide .poh-doctor-switcher-learn-more-link {
        margin-bottom: 4%;
        margin-top: 6%;
    }

    /* footer */

    footer > a {
        margin-top: 10% !important;
        margin-bottom: 5% !important;
    }

    footer > a > img {
        width: 300px;
    }

    footer nav {
        text-align: center;
        margin-bottom: 10%;
    }

    footer nav a {
        margin: 5% 0 !important;
    }

    #footer-locations-container {
        flex-direction: column;
    }

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

    footer > p {
        font-size: .875rem;
        padding: 5% 3%;
        display: block;
    }

    #footer-icons-container {
        gap: 5vw;
    }

}