/*
    Theme Name: divi-child-branded
    Theme URI: https://rmarcejaeger.com
    Description: Branded Child Theme for Divi
    Author: R.M. ArceJaeger
    Author URI: https://rmarcejaeger.com
    Template: Divi
    Version: 1.0

    NOTE: // is not a valid comment here!
*/


html {
    --blue_dark: #15193f;
    --blue: #508de6;
    
    --blue_purple: #8da1c4;

    --yellow: #fefeab;
    --orange: #e39155; /* rgb=(227,145,85) */

    --background_color: var(--blue_dark);
    --border_color: var(--orange);
    
    --text_color: #9F9F9F;
}

html, .page {
    background: var(--background_color);
}


/* FONTS (CUSTOM) */

@font-face {
    font-family: 'Kleymisska';
    src: url('fonts/Kleymisska-X3vE2.woff2') format('woff2'), /* Modern browsers */
         url('fonts/Kleymisska-X3vE2.woff') format('woff'), /* Older browsers */
         url('fonts/Kleymisska-X3vE2.ttf') format('truetype'); /* Fallback for very old browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel-VariableFont_wght.woff2') format('woff2'), /* Modern browsers */
         url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype'); /* Fallback for very old browsers */
    font-weight: normal;
    font-style: normal;
}


/* FONT COLORS */

h1, h2, h3, h4, h5, h6 {
    color: var(--blue_purple) !important; 
    line-height: 1.3em;
}

/* Note: et_pb_text_inner is the first paragraph of a blog post, which isn't called p for some reason even though subsequent paragraphs are */
p, .et_pb_text_inner, .textwidget, .et_pb_widget {
    color: var(--text_color) !important;
}


/* LINKS */

a {
    color: var(--orange);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--blue) !important;
    text-shadow: 0px 0px 1px var(--orange);
}

/* The metadata under posts & the widgets in the sidebar */
.post-meta a, .et_pb_title_meta_container a, .textwidget a, .et_pb_widget a {
    color: var(--orange) !important;
    text-shadow: 0px 0px 1px var(--blue);
}



/* REMOVE DEFAULT HEADER (NAV & SECONDARY) & FOOTER */

#top-header, #main-header, #main-footer {
    display: none !important;
}

.et_fixed_nav.et_show_nav #page-container {
    padding-top: 0px !important;
}


/* HIDE ON CERTAIN DEVICES */

@media (min-width: 760px){
    .hide_desktop {
        display: none !important;
    }
}

@media (min-width: 480px){
    .hide_tablet, .hide_desktop_tablet {
        display: none !important;
    }
}

@media (max-width: 479px){
    .hide_mobile {  display: none !important; }
}


/* HIDES MOBILE MENU UNTIL 479 px */

@media (min-width: 480px) {
    .et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu { 
        display: flex!important; 
    } 
    
    .et_mobile_nav_menu {
        display: none !important;
    }
}


/* CUSTOM CLASSES - MULTIPLE USES */

.full_width_section, .full_width_row {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* HOME PAGE */

@media (max-width: 479px){
    #home_nav_bar_section .et_pb_column {
        border-top: 2px solid var(--border_color);
        border-bottom: 1px solid var(--border_color);
    }
}

#home_nav_bar_section .et_pb_row {
    position: absolute !important;
    background: rgba(0,0,0,0.5) !important;
}

/* Center items vertically in columns and center columns horizontally --- use in a ONE column layout */
#home_nav_bar_section .et_pb_column {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit; /* Needs to be this or row won't show through on mobile for some reason */
    padding: 5px;
}

#home_nav_bar_section .et_pb_module {
    margin: 0;
}

#home_nav_bar_section .header_menu {
    background: none !important;
}

#home_nav_bar_section #logo, #home_nav_bar_section #logo a {
    font-family: 'Cinzel', "Open Sans", Arial, sans-serif;
    font-size: max(2vw, 25px);
    
    color: var(--orange);
    text-shadow: 0px 0px 2px var(--blue);
    
    /*
    color: var(--blue);
    text-shadow: 0px 0px 1px var(--orange);
    */
    
    max-width: 100% !important; 
}

@media (min-width: 480px){
    #home_nav_bar_section #logo, #home_nav_bar_section #logo a {
        margin-left: 3vw;
        margin-right: 3vw;
    }
}

@media (min-width: 760px){
    #home_nav_bar_section #logo, #home_nav_bar_section #logo a {
        margin-left: 5vw;
        margin-right: 5vw;
    }
}

#home_nav_bar_section #nav_row_mobile .et_pb_menu {
    position: absolute !important;
    right: 0px !important;
    background: none !important;
}

#home_nav_bar_section #nav_row_mobile .mobile_menu_bar:before {
    color: var(--blue) !important;
    text-shadow: 0px 0px 1px var(--orange) !important;
}

/* Auto-adjust section height for Home Page's header background. 
   Must use correct image ratio.
   Must use % for width or it will create a horizontal scroll bar.
   Do here rather than in section itself so that it creates the space before the page starts to load; otherwise elements will appear to jump */

#home_header_section {
    width: 100% !important;
    background-color: var(--background_color); /* The color that will show while the images loads --- will be white by default */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

@media (min-width: 480px){ /* Desktop & Tablet */
    #home_header_section {
        height: 52vw !important;
        background-image: url('/wp-content/uploads/home_header_rmarcejaeger.webp');
    }
}

@media (max-width: 479px){ /* Mobile */
    #home_header_section {
        height: 72vw; /*60vw !important;*/ /* Actual ratio is 68 but want it a little smaller since I made the image taller than needed */
        background-image: url('/wp-content/uploads/home_header_rmarcejaeger_mobile_4a.webp'); /*url('/wp-content/uploads/home_header_rmarcejaeger_mobile.webp');*/
    }
}

#home_header_section .et_pb_row, 
#home_header_section .et_pb_column, 
#home_header_section .et_pb_module, 
#home_header_section .et_pb_code_inner {
    height: 100% !important;
}

/* Allows multiple rows to stack on top of each other, and multiple modules within a row to stack on top of each other */
#home_header_section .et_pb_row, #home_header_section .et_pb_module {
    position: absolute !important;
}

#home_header_section .et_pb_row, #home_header_section .et_pb_module, #home_header_section .et_pb_code_inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.home_header_brand_text_wrapper {
    display: flex; 
    justify-content: space-between;
    width: 100%; 
    height: 100%;
    max-height: 100vh; /* Ensures the text div doesn't go past bottom of screen. Note will APPEAR to go past when logged into WP */
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    padding-top: 3.5vw;
    padding-bottom: 3.5vw;
}

@media (min-width: 480px){ /* Desktop & Tablet */
    #home_header_section #never_forget_text_normal, #home_header_section #never_forget_text_shadow {
        margin-bottom: -3.5vw /* To offset padding bottom of wrapper */
    }
}

@media (max-width: 479px){ /* Mobile */
    .home_header_brand_text_wrapper  {
        justify-content: center;
    }
}

.home_header_brand_text, .home_header_brand_text_shadow {
    font-size: 5vw;
    font-family: 'Kleymisska', "Open Sans", Arial, sans-serif;
    line-height: 1.5em; /* Needed to keep text from going past bottom of box */
    padding-bottom: 0; /* Paragraphs have padding on bottom by default */
    /*text-shadow: 2px 2px 5px black;*/

    /* Creates a gradient text */
    background-image: linear-gradient(0deg, var(--yellow), white);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.home_header_brand_text_shadow {
    text-shadow: 2px 2px 5px black;
}

#home_tagline_mobile_section {
    height: 10vw;  /* Alt is 7vw */
    top: -10vw; /* Move it up to overlay the previous section */
    background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--border_color);
    border-bottom: 2px solid var(--border_color);
}

#home_tagline_mobile_section .home_header_brand_text, #home_tagline_mobile_section .home_header_brand_text_shadow {
    font-size: 5vw; /* Alt is 9vw */
}

#home_tagline_mobile_section .et_pb_row, 
#home_tagline_mobile_section .et_pb_column, 
#home_tagline_mobile_section .et_pb_module, 
#home_tagline_mobile_section .et_pb_code_inner {
    height: 100% !important;
}

#home_book_covers_section {
    background: none;
}

#home_book_covers_section .et_pb_row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 10% !important;
    margin-right: 10% !important;
    max-width: 100%;
}

#home_book_covers_section .et_pb_column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#home_book_covers_section .et_pb_module {
    padding-left: 1%;
    padding-right: 1%;
    margin-left: 0;
    margin-right: 0;
}

#home_book_covers_section img {
    max-height: 300px;
    width: auto;
    box-shadow: 0px 0px 10px rgba(227,145,85,0.2); /* This is var(--orange) with alpha */
}

@media (min-width: 980px) {
    #home_book_covers_section img {
        max-height: 16vw;
    }
}

@media (max-width: 600px) {
    #home_book_covers_section img {
        max-height: 200px;
    }
}

@media (max-width: 400px) {
    #home_book_covers_section img {
        max-height: 100vw;
        max-width: 50vw;
    }

    #home_book_covers_section .et_pb_column { 
        justify-content: center;
    }
}


/* CONTACT PAGE */

#contact_main_section {
    width: 100% !important;
    height: 100vh !important; /* Make it fill visible page. Note actual ratio is 62.5vw*/ 
    background-image: url('/wp-content/uploads/contact_page_background.webp');
    background-color: var(--background_color); /* The color that will show while the images loads --- will be white by default */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

#contact_main_section .et_pb_row, 
#contact_main_section .et_pb_column, 
#contact_main_section .et_pb_code_inner {
    height: 100% !important;
}

#contact_main_section .et_pb_column {
    display: flex;
    justify-content: end;
    align-items: center;
}

.et_pb_contact_submit {
    background: rgba(227,145,85,.8);
    color: black;
    border: 2px solid black;
    border-radius: 4px;
}

.et_pb_contact_submit:hover {
    background: var(--orange);
    color: black;
    border: 2px solid black !important;
}

.et_pb_contact_captcha_question {
    color: white;
}

.et_pb_contact p input,
.et_pb_contact p textarea {
    color: black;
    border-radius: 4px;
}


/* BLOG PAGE & BLOG POST PAGES */

#blog_bkg_section {
    position: fixed;
    width: 100% !important;
    height: 100vh !important; /* Make it fill visible page */ 
    background-image: url('/wp-content/uploads/blog_page_background.webp');
    background-color: var(--background_color); /* The color that will show while the images loads --- will be white by default */
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
}

#blog_main_section, #blog_post_main_section {
    width: 100% !important;
    height: 100% !important;
    background: none !important;
}

#blog_main_section .et_pb_row, 
#blog_main_section .et_pb_column,
#blog_post_main_section .et_pb_row, 
#blog_post_main_section .et_pb_column {
    height: 100% !important;
}

#blog_main_section .et_pb_post,
#blog_post_main_section .et_pb_module {
    background: rgba(0,0,0,0.8);
    border-radius: 10px;
    padding: 20px;
}

.pagination .alignleft, .pagination .alignright {
    background: var(--orange);
    padding: 10px;
    border: 2px solid black;
    border-radius: 4px;
}

.pagination .alignleft a, .pagination .alignright a {
    padding: 20px; /* Makes button clickable; pagination padding isn't sufficient */
    color: black !important;
}

/* Puts featured image to right of post excerpt on the list of posts */

@media (min-width: 480px) {
    
    .right_image_blog_section .et_pb_posts .et_pb_post img,
    .right_image_blog_section .et_pb_posts .et_overlay {
        width: 38%;
        height: 180px !important;
        object-fit: cover;
        border: 1px solid black;
    }
    
    .right_image_blog_section .et_pb_post .entry-featured-image-url {
        margin-bottom: 0px;
    }
    
    .right_image_blog_section .et_pb_posts .et_pb_post img,
    .right_image_blog_section .et_pb_posts .et_overlay {
        margin-left: 4%;
        float: right;
    }

    .right_image_blog_section body.rtl .et_pb_posts .et_pb_post img,
    .right_image_blog_section body.rtl .et_pb_posts .et_overlay {
        float: left;
        margin-right: 4%;
        margin-left: 0;
    }
    .right_image_blog_section body.rtl .et_pb_posts .entry-title,
    .right_image_blog_section body.rtl .et_pb_posts .post-meta,
    .right_image_blog_section body.rtl .et_pb_posts .post-content { 
        float: right; 
    }
}

/* Puts featured image next to post title on individual post page */

#blog_post_main_section .et_pb_module.et_pb_post_title  {
    display: flex;
}

.et_pb_title_featured_container {
    margin-left: 10px;
}

.et_pb_title_featured_container img {
    max-height: 250px !important;
}

/* Turn off auto-created comment section for blog posts (gets hidden but still takes space otherwise) */

.et_post_meta_wrapper {
    display: none !important; 
}

/* Turns off auto-created sidebar */

#sidebar {
    display: none !important;
}


/* WIDGETS */

#blog_post_main_section .et_pb_widget:first-child .widgettitle { /* Stories you'll never forget */
    font-family: 'Kleymisska', "Open Sans", Arial, sans-serif;
    font-size: 2em;
    text-align: center;
}


/* CODE MODULES */

.custom_code_section {
    display: none !important;
}