/*
 Theme Name:  Pomegranite
 Theme URI:   https://www.pomegranite.co.za/
 Description: Divi Child Theme
 Author:      Pomegranite
 Author URI:  https://www.pomegranite.co.za/
 Template:    Divi
 Version:     1.0.0
*/

/* =========================================================
   Variables
   ========================================================= */
:root {
    --font-main: 'Instrument Sans', sans-serif;

    --color-link: #0073e6;
    --color-heading-link: #1a73e8;
    --color-accent: #d11f48;
    --color-accent-dark: #a91b3b;
    --color-accent-dark-alt: #a91a3c;
    --color-peach: #ffc6b5;
    --color-cream: #fbf4e9;
    --color-focus: #e62654;
}

/* =========================================================
   Links
   ========================================================= */
a {
    color: var(--color-link);
    text-decoration: underline;
}

a:hover,
a:focus {
    text-decoration: none;
}

a:focus {
    outline: 0 solid var(--color-focus);
    outline-offset: 2px;
}

.light-link a {
    color: #fff !important;
}

.et_pb_text_inner a {
    text-decoration: none;
}

.et_pb_text_inner a:hover {
    text-decoration: underline;
}

/* =========================================================
   Typography
   ========================================================= */

/* Headings */
body:not(.et_fb_preview) h1,
body:not(.et_fb_preview) h2,
body:not(.et_fb_preview) h3,
body:not(.et_fb_preview) h4,
body:not(.et_fb_preview) h5,
body:not(.et_fb_preview) h6 {
    font-family: var(--font-main);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

body:not(.et_fb_preview) h1 { font-size: 80px; }
body:not(.et_fb_preview) h2 { font-size: 56px; }
body:not(.et_fb_preview) h3 { font-size: 48px; }
body:not(.et_fb_preview) h4 { font-size: 32px; }
body:not(.et_fb_preview) h5 { font-size: 24px; }
body:not(.et_fb_preview) h6 { font-size: 20px; }

@media (max-width: 980px) {
    body:not(.et_fb_preview) h1 { font-size: 64px; }
}

@media (max-width: 767px) {
    body:not(.et_fb_preview) h1 { font-size: 40px; }
    body:not(.et_fb_preview) h2 { font-size: 36px; }
    body:not(.et_fb_preview) h3 { font-size: 32px; }
}

/* Headings that are links */
body:not(.et_fb_preview) h1 a,
body:not(.et_fb_preview) h2 a,
body:not(.et_fb_preview) h3 a,
body:not(.et_fb_preview) h4 a,
body:not(.et_fb_preview) h5 a,
body:not(.et_fb_preview) h6 a {
    color: var(--color-heading-link);
    text-decoration: underline;
}

body:not(.et_fb_preview) h1 a:hover,
body:not(.et_fb_preview) h2 a:hover,
body:not(.et_fb_preview) h3 a:hover,
body:not(.et_fb_preview) h4 a:hover,
body:not(.et_fb_preview) h5 a:hover,
body:not(.et_fb_preview) h6 a:hover,
body:not(.et_fb_preview) h1 a:focus,
body:not(.et_fb_preview) h2 a:focus,
body:not(.et_fb_preview) h3 a:focus,
body:not(.et_fb_preview) h4 a:focus,
body:not(.et_fb_preview) h5 a:focus,
body:not(.et_fb_preview) h6 a:focus {
    color: var(--color-accent);
    outline: 0 dashed #ff6600;
    outline-offset: 3px;
}

/* Paragraphs */
body:not(.et_fb_preview) p,
.et_pb_text p,
.et_pb_text_inner {
    font-family: var(--font-main);
    line-height: 1.3;
}

body:not(.et_fb_preview) .large p,
.et_pb_text .large p {
    font-family: var(--font-main);
    font-size: 22px;
    margin-bottom: 1.5em;
}

.x-large p {
    font-size: 24px !important;
}

.page-intro,
.page-intro p {
    font-weight: 500 !important;
}

.boxed p,
.boxed .et_pb_text_inner {
    margin-bottom: 0 !important;
}

.bold-color strong,
.bold-color b {
    color: var(--color-accent);
}

blockquote,
blockquote p {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.35 !important;
    padding-left: 0;
    border-left: 0 !important;
}

.legal h2 {
    margin-top: 24px;
    margin-bottom: 16px;
}

.typed-cursor {
    display: none !important;
}

/* =========================================================
   Header & navigation
   ========================================================= */
#main-header {
    box-shadow: none;
}

#top-menu li a,
#header-nav a {
    font-family: var(--font-main);
}

#top-menu a:hover {
    color: var(--color-accent-dark) !important;
    opacity: 1 !important;
}

.et_pb_menu--with-logo .et_pb_menu__menu > nav > ul > li > a {
    padding-left: 6px;
    padding-right: 6px;
}

#page-header h1 {
    padding-bottom: 0;
}

.post-navigation a {
    font-family: var(--font-main) !important;
    padding-left: 60px;
    padding-right: 60px;
}

.post-navigation a:hover {
    color: var(--color-accent) !important;
}

/* =========================================================
   Buttons
   ========================================================= */
.et_pb_button {
    text-decoration: none;
}

body .et_pb_button {
    font-family: var(--font-main) !important;
    min-width: 210px !important;
    text-align: center;
}

body #page-container .et_pb_section .et_pb_button,
body #page-container .et_pb_section .et_pb_button:hover {
    padding: 14px 30px !important;
}

/* =========================================================
   Footer
   ========================================================= */
#footer-info {
    font-family: var(--font-main);
}

footer p {
    margin-bottom: 8px;
}

footer .textwidget p {
    color: #fff;
}

.footer-widget h4 {
    padding-bottom: 24px;
}

.et-social-linkedin a.icon:before {
    content: "\E09D";
}

#footer-widgets .footer-widget a:hover {
    text-decoration: underline;
}

#footer-bottom a {
    text-decoration: none;
}

#footer-bottom a:hover {
    text-decoration: underline;
    opacity: 1 !important;
}

#main-footer .et_pb_button {
    background-color: var(--color-peach);
    color: var(--color-accent-dark-alt) !important;
    font-weight: bold;
    text-decoration: none;
}

#main-footer .et_pb_button:hover {
    background-color: var(--color-cream);
    color: var(--color-accent-dark-alt) !important;
    text-decoration: none !important;
}

/* =========================================================
   Services list
   ========================================================= */
.service-item {
    transition: background-position 0.3s ease;
}

.service-item:hover {
    background-position: calc(100% - 40px) center;
}

.service-item a {
    display: block;
    width: 100%;
    font-weight: 600;
    text-decoration: none;
}

.services-list a {
    transition: color 0.7s ease, padding-left 0.7s ease;
}

.services-list a:hover {
    color: var(--color-accent);
    text-decoration: none;
    padding-left: 16px;
}

.services-list p,
.services-list .et_pb_text_inner {
    margin-bottom: 0 !important;
}

.services-list .et_pb_text_inner {
    font-size: 20px;
}

.services-list .service-item .et_pb_text_inner {
    padding-top: 16px;
    padding-bottom: 16px;
}

.services-list .et_pb_text .large,
.services-list .et_pb_text .large p {
    font-size: 22px !important;
    line-height: 30px !important;
}

.services-list .et_pb_module {
    margin-bottom: 0 !important;
}

/* =========================================================
   About page
   ========================================================= */
@media only screen and (min-width: 980px) and (max-width: 1399px) {
.about-hero {
        background-size: 50% auto !important;
        background-position: right 0 top 13% !important;
    }
}

.team-member-name h3 {
    font-size: 32px !important;
}

.team-member-title h4 {
    font-size: 24px !important;
}

/* =========================================================
   WP Grid Builder
   ========================================================= */
.wp-grid-builder .wpgb-card .wpgb-card-media-thumbnail {
    border-radius: 32px !important;
}

.wp-grid-builder .wpgb-card-4 .wpgb-card-media-thumbnail {
    border-radius: 150px !important;
}

.wp-grid-builder .wpgb-card.wpgb-card-default .wpgb-card-inner {
    background: transparent !important;
}

.wp-grid-builder .wpgb-card-2 .wpgb-block-2 {
    text-decoration: none;
}

.wp-grid-builder .wpgb-page-dots .wpgb-dot:after {
    width: 16px !important;
    height: 16px !important;
}

#clients .wp-grid-builder .wpgb-card .wpgb-card-media-thumbnail div {
    background-size: 240px !important;
}

.blog-post-more:hover {
    cursor: pointer;
}

/* Blog sidebar facets */
.blog-sidebar .wpgb-facet .wpgb-inline-list {
    display: block;
    width: 100%;
    text-align: center;
}

.blog-sidebar .wpgb-facet ul .wpgb-button {
    font-family: var(--font-main) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 14px 30px !important;
    border-color: #333;
    border-radius: 32px;
}

.blog-sidebar .wpgb-facet .wpgb-button-label {
    font-size: 20px !important;
    font-weight: 700 !important;
}

.wpgb-facet .wpgb-button[aria-pressed=true],
.blog-sidebar .wpgb-facet ul .wpgb-button:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

/* =========================================================
   Gravity Forms
   ========================================================= */
.gform_title {
    display: none;
}

.gform_wrapper.gravity-theme .gfield_label {
    font-family: var(--font-main) !important;
}

.gform_wrapper.gravity-theme .gfield input.large,
.gform_wrapper.gravity-theme .gfield select.large {
    padding: 16px !important;
    border: 1px solid #fff !important;
    border-radius: 32px;
}

.gform_wrapper.gravity-theme #field_submit button,
.gform_wrapper.gravity-theme .gfield--type-submit button,
.gform_wrapper.gravity-theme .gform_footer button {
    position: relative;
    align-self: flex-end;
    width: 100%;
    padding: 20px !important;
    font-family: var(--font-main) !important;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent-dark);
    background: var(--color-peach) !important;
    border: none;
    border-radius: 32px;
}

.gform_wrapper.gravity-theme #field_submit button:hover,
.gform_wrapper.gravity-theme .gfield--type-submit button:hover,
.gform_wrapper.gravity-theme .gform_footer button:hover {
    cursor: pointer;
    background: var(--color-cream) !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 981px) {
    .et_pb_gutters3.et_pb_footer_columns2 .footer-widget .fwidget {
        margin-bottom: 8px;
    }
}

@media (max-width: 1320px) {
    #main-header .container .logo_container,
    #main-header .container #et-top-navigation {
        display: none !important;
    }

    #main-header .mobile_menu_bar,
    #main-header .et_mobile_menu {
        display: block !important;
    }
}

@media (min-width: 1321px) {
    #main-header .mobile_menu_bar {
        display: none !important;
    }
}