/*
Theme Name: Ollie Child
Theme URI: https://olliewp.com
Author: Mike McAlister
Author URI: https://olliewp.com
Description: A child theme for the Ollie block theme. Download the free Ollie theme at OllieWP.com.
Requires at least: 6.0
Tested up to: 6.2
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ollie
Text Domain: ollie-child
Tags: blog, entertainment, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, 
*/


/* sitewide styling */
.sitelogo img {
    border-style: none !important;
}

/* spacing for instantiated menu modal */
#modal-1,
#modal-2 {
    padding-top: 2em;
    padding-left: 2em;
    padding-right: 2em;
}

b, strong {
    font-weight: bold !important;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('/wp-content/themes/ollie/assets/fonts/Mona-Sans.woff2') format('woff2');
    font-display: optional;
}


h2,
h3 {
    font-weight: 900 !important;
    font-variation-settings: 'wght'900 !important;
}

/* removes outline from webp images */
img.scaled-image {
    border: none !important;
}

/* removes underline from menu link to active page */
.current-menu-item a {
    text-decoration: none !important;
}

/* turns menu hamburger white, only on home page [b/c home is only page w/white header] */
.hamburger>*>svg {
    fill: whitesmoke;
}

.hamburger>button {
    background-color: transparent;
}


/* code for homepage */

/* positioning hero teacher image */
.hero-image-teacher img {
    object-position: 42%;
}

/* all images in Social Proof section no box shadow */
.social-proof, .sitelogo img {
    box-shadow: none;
}


/* image sizing code */
/* non homepage image sizing */
.hero-image {
    width: 605px;
    height: 533px;
    object-fit: cover;
}

/* all images of Recent Work projects conform to same sizing */
.recentprojects img {
    max-height: 406.109px;
}

/* sets max-height for case study images */
.latestposts img {
    max-height: 370px;
    /* Change this value to whatever you want the maximum height of the images to be */
    width: 100%;
    /* This will keep the aspect ratio of the images */
}

.casestudy-image img {
    max-height: 427px;
    object-fit: cover;
    object-position: 22% 3%;
}

/* non-Home styling */
/* for section borders sitewide */
.border-bottom-fullwidth-light {
    border-bottom: 1px solid #e0e1ed;
}

.border-bottom-widewidth-dark::after {
    content: '';
    display: block;
    border-bottom: 1px solid #171717;
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin: auto;
}

/* code for subtle section divider */
.border-bottom-gradient {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
    border-image-slice: 1;
}

/* overwrites L/R padding for 3x row on Services pages */
.services-triple-row {
    padding: 0 !important;
}

/* removes faint color bar at top of webdev/3x row on mobile */
.webdev-3xrow {
    background-color: #fff !important;
}

/* consistent large image sizes for Services pages */
.services-image-large {
    position: relative;
    width: 100%;
    max-width: 605px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 20px; /* Sets the border radius of the figure */
  }
  
  .services-image-large::before {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  
  .services-image-large img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; 
  }

/* consistent image sizes for Recent Work rows on Case STudies pages */
.casestudies-recentwork {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%; /* For 8/5 aspect ratio */
    overflow: hidden;
}

.casestudies-recentwork img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* code for testimonials */

/* removes L/R padding for testimonial cards */
.testimonials-nopadding {
    padding-left: 0;
    padding-right: 0;
}




/* ------------- media queries */

/* ensmallens h1 on various pages so that it doesn't break on phones */
@media (max-width: 430px) {
    .mobile-h1 {
        font-size: var(--wp--preset--font-size--x-large);
    }
}

/* general changes for mobile */
@media (max-width: 900px) {

    .mobile-zero-padding {
        padding-left: var(--wp--preset--spacing--none) !important;
        padding-right: var(--wp--preset--spacing--none) !important;
    }

    h3 {
        font-size: var(--wp--preset--font-size--large) !important;
    }

    .mobile-spacing>*:not(:last-child) {
        margin-bottom: 2em;
    }

    p,
    li {
        font-size: 1.2rem !important;
    }
}

/* shorter Services images for ipad */
@media (max-width: 900px) {
    .services-images-mobile img {
        max-height: 500px;
    }
}

/* switching column stack order on mobile */
@media (max-width: 767px) {
    .mobilestackreverse {
        flex-direction: column;
    }
    .firstcolumn {
        order: 2;
    }
    .secondcolumn {
        order: 1;
    }
}

/* retaining stack (instead of switching to columns) on tablets */
@media (max-width: 900px) {
    .group-stacked {
        display: flex !important;
    }
    .columns-stacked {
        flex-wrap: wrap !important;
    }
}

/* justify footer button to left on mobile */
@media (max-width: 782px) {
    .footer-toprow-button {
        justify-content: left !important;
    }
}

/* smaller logo for phones */

@media (max-width: 400px) {
    .sitelogo {
        width: 75px;
    }
}

/* mobile menu appearance */
@media only screen and (max-width: 600px) {

    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
        background-color: transparent !important;
    }
}

@media only screen and (max-width: 900px) {
    .is-menu-open.has-modal-open .wp-block-navigation-item__content {
        width: 100%;
        padding: var(--wp--preset--spacing--small) 0 !important;
    }
}

/* code for testimonials */

/* aligns avatar/name/company row */
@media (min-width: 782px) {
.testimonials-column {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    height: auto;
    max-height: none;
    align-items: flex-start;
}

.testimonials-icon {
    width: 100%;
    text-align: left;
    margin-bottom: var(--wp--style--block-gap);
}

.quote-text {
    flex-grow: 1;
    margin: 0;
}

.testimonials-column-avatar {
    margin-top: 50px;
    margin-left: 0 !important;
}
}

/* code for Case Studies page/Other Projects row */

/* aligns View Project buttons */
@media (min-width: 782px) {
    .project-column {
        display: flex;
        flex-direction: column;
        min-height: 400px;
        height: auto;
        max-height: none;
        align-items: flex-start;
    }
    .project-text {
        flex-grow: 1;
        margin: 0;
    }
    .project-button {
        margin-top: 50px;
        margin-left: 0 !important;
    }
}


/* adds extra spacing to Let's Get Started... section on phones */
@media screen and (max-width: 767px) {
    .phone-bottom-padding {
        padding-bottom: 0 !important;
    }
    .group-rows-mobile {
        margin-block-start: var(--wp--preset--spacing--x-large) !important;
        margin-block-end: var(--wp--preset--spacing--x-large) !important;
     }
}

/* page-specific */



/* About page */
/* hides h2 and neon sign image on mobile */
@media only screen and (max-width: 900px) {
    .about-block-hidden {
        display: none !important;
    }
}
/* moves remaining text up to replace h2 and sign image */
@media only screen and (max-width: 900px) {
    .about-block-moveup {
        margin-top: 0;
        padding-top: 0 !important;
        border-bottom: 0;
    }
}

/* Case Studies page */
/* justifies buttons in Latest Work section left */
@media (max-width: 767px) {
.casestudies-latestwork-buttons {
    justify-content: left !important;
}
}