/*
       __   __               ___               ___     ___  __             __          __   ___ 
      /  ` /  \  |\/|  |\/| |__     |  | |\ | |__     |__  |__)  /\  |\ | /  `  /\  | /__` |__  
      \__, \__/  |  |  |  | |___    \__/ | \| |___    |    |  \ /~~\ | \| \__, /~~\ | .__/ |___ 

    So, you'd like to make changes to the site CSS? Great! Just a few simple rules:
    
    1) No writing code that doesn't also include a comment that describes what it does and where you can see the changes. No exceptions. Many people
       are working on this file, and making your coworkers guess at what your code does is really inconsiderate. Write the best comments you can.
       
    2) Try not to use Elementor "id-ish" selectors. Each page and template usually has some uniquely identifying class names attached to the body:
       NO:   .elementor-2312 .elementor-element.elementor-element-13ac5e7d > .elementor-container        --> Requires at least 20 minutes of digging around
       YES:  .page-the-simply-luxurious-life-french-crash-course .form-infusionsoft > a.submit-button    --> Immediately specific and unambiguous
    
    3) Please avoid using !important unless it's not something you can work around with better selector specificity. It works, but it's a very brute-force
       approach to addressing whatever issue you're running into. Sometimes it's definitely the right tool, but not often.
       
    4) We'd all appreciate it if you try to format your code nicely. Proper brace placement, consistent indentation, and appropriate commas and newlines for
       element separation. The computer doesn't care, but the person trying to work with your code does. Be nice to the humans, please :-)

    Enjoy!
    
    P.S. - After saving, you may not see your changes immediately. Clear the WP Engine cache (Admin > WP Engine > Clear All Caches) to refresh the files.

*/
/*
CMM TODO:
- Remove all obsolete code (re: old post formats)
- Componentize files for things like 1) forms, 2) elementor overrides, etc
- Spend some more time fleshing out the existing comments
- Work out a better convention for loading component files, and how they should effectively be split
*/
/* Remove top padding for admin bar */
body.admin-bar section:first-of-type {
  top: 0 !important;
}
/* Ugly hack because Elementor seems to insist on adding "margin-top: 32px !important" to the root HTML tag if you're 
   logged in as an admin and the page is using Elementor Canvas as a template. Leveraging #arve (plugin) as selector priority */
html#arve {
  margin-top: 0 !important;
}
/* Some pages we want ZERO top padding/margin before content begins */
/*
.page-home-page #content,
.page-home-page #main .entry-content,
.error404 #content,
.error404 #main .entry-content,
.page-start-here #content,
.page-start-here #main .entry-content,
.page-french-courses #content,
.page-french-courses #main .entry-content {
    */
#content, #main .entry-content {
  margin-top: 0;
  padding-top: 0;
}
/* CMM 2021-02-01 - had to regen CSS files and apparently this went away */
.elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1600px;
}
/* Change headings to use "Grand Hotel" script font with a simple CSS class */
.font-grand-hotel h1, .font-grand-hotel h2, .font-grand-hotel h3 {
  font-family: "Grand Hotel", sans-serif;
  font-weight: 500;
}
.font-grand-hotel h1 {
  font-size: 52px;
}
.font-grand-hotel h2 {
  font-size: 44px;
}
.font-grand-hotel h3 {
  font-size: 36px;
}
.font-lato h1, .font-lato h2, .font-lato h3 {
  font-family: "Lato", sans-serif;
  font-weight: 900;
}
.font-lato h1 {
  font-size: 52px;
}
.font-lato h2 {
  font-size: 44px;
}
.font-lato h3 {
  font-size: 36px;
}
/* All buttons have small-caps */
.elementor-button-link .elementor-button-text {
  text-transform: uppercase;
}
/* All buttons have square corners and full opacity */
.elementor-widget-button .elementor-button {
  border-radius: 0;
}
.elementor-widget-button .elementor-button:hover {
  opacity: 1;
}
/* Blue button */
.elementor-widget.button-blue .elementor-button {
  background-color: #384693;
  color: #FFFFFF;
  border: 1px solid #384693;
}
.elementor-widget.button-blue .elementor-button:hover {
  background-color: #FFF;
  color: #384693;
}
/* Red Button */
.elementor-widget.button-red .elementor-button {
  background-color: #e42f28;
  color: #FFFFFF;
  border: 1px solid #e42f28;
}
.elementor-widget.button-red .elementor-button:hover {
  background-color: #FFF;
  color: #e42f28;
}
/* contact page; hide "fields are required" */
body.page-contact .nf-form-fields-required {
  display: none;
}
/* triple post image grid on home page */
body.page-home-page .elementor-posts--skin-classic.elementor-posts-container .elementor-post {
  margin-bottom: 10px;
}
body.page-home-page .elementor-posts--skin-classic.elementor-posts-container .elementor-post__thumbnail__link {
  margin-bottom: 0;
}
/* Add background and loading spinner to ARVE wrapper for videos */
#arve .arve-wrapper {
  background-color: #DADADA;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/ajax-loader_bg-DADADA.gif);
}
/* --- Consolidate styles from SC CSS plugin ----------------------------------------------------------------------- */
/* 
  CSS Colors:
  #e42f28 - CuF Red
  #384693 - CuF Blue
*/
/* underline all links except for header menu, buttons, and heading links */
.elementor a:not(.elementor-item):not(.elementor-button) {
  text-decoration: underline;
}
/* some overrides to the above */
#content .elementor .elementor-post-info a, #content .elementor .elementor-post h2 a {
  text-decoration: none;
}
/* add some default button colors */
a.elementor-button:hover {
  background-color: #FFF;
  border: 2px solid #384693;
  color: #384693;
}
a.elementor-button {
  background-color: #384693;
  border: 2px solid #384693;
  color: #FFF;
}
/* Fix z-index issue with elements showing through page header */
.elementor-location-header section.elementor-element {
  z-index: 9;
}
/* Post-specific formatting: Slightly larger blue text for intro words in post content */
.cuf-post-intro-text {
  color: #384693;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
/* Inline red highlight */
.cuf-red-highlight-text {
  color: #e42f28;
  font-weight: bold;
}
/* ET TOI footer text */
.cuf-et-toi-text {
  color: #e42f28;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
/* Add styling to post content blockquote elements */
body.single .elementor-text-editor blockquote {
  border-left: 5px solid rgba(0, 0, 0, 0.05);
  padding: 0 20px;
  font-size: inherit;
  font-style: inherit;
  margin: 0 0 1.5em;
  position: relative;
}
/* Modify the post content h2 tags (in any 2/3rds width column) */
body.single .elementor-col-66 .elementor-widget-container h2 {
  font-size: 48px;
  color: #e42f28;
  font-weight: normal;
  margin: 20px 0 20px;
  font-family: "Grand Hotel", Garamond, serif;
}
/* We should REALLY strive to not use any custom classes in the post content that aren't also linked
   in the TinyMCE editor (like the .cuf-post-intro-text and related classes above). */
.first-word {
  color: #384693;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 18px;
}
.themoreyouknow {
  font-size: 19px;
  margin-top: 26px;
  margin-bottom: 20px;
  padding-bottom: 3px;
}
.themoreyouknow p {
  font-size: 19px;
}
.et-toi {
  margin-top: 40px;
}
/* These classes are also very easily to replicate within Elementor by leveraging the template library. 
   There's really no need for them here. */
.trucenplus {
  display: block;
  position: absolute;
  top: -78px;
  margin: 0;
  text-align: center;
  width: 100%;
  right: 0;
}
.trucenpluscol {
  padding: 105px 25px 30px;
  background: #eee;
  line-height: 1.5em;
  border-bottom: 5px solid #384693;
}
.enpluscol {
  margin-top: 60px !important;
  width: 40% !important;
}
.container-text-blog {
  border-top: 2px dotted #000;
  padding: 40px 0px 0;
  margin: 0 0 30px 0;
}
.intro p {
  font-size: 20px;
  margin-top: 65px;
}
.ettoi {
  font-size: 20px;
  font-weight: bold;
  color: #e42f28;
  text-transform: uppercase;
}
.trucenpluscol p, .trucenpluscol {
  font-size: 16px !important;
  letter-spacing: -0.2px;
}
/*Custom CSS for Ovation Testimonial Form*/
.tvo_testimonial_form.tve_red.tvo-default-template .tvo-form-button {
  background-image: none !important;
  background: #e42f28;
  font-size: 15px !important;
  text-transform: uppercase !important;
  border: 1px solid #e42f28;
}
/*Custom CSS for Ovation Testimonial Display*/
.tvo-testimonials-display.tvo-set4-template .tvo-testimonial-display-item p {
  font-size: 15px !important;
}
@media (max-width: 1024px) {
  /* Also very easy to have Elementor handle this stuff. Using !important is a rather brute-force approach. */
  .enpluscol {
    margin-top: 106px !important;
    width: 100% !important;
  }
}
/* Mobile header menu sizing (move to /css/gp-sticky-nav.css) */
@media (max-width: 768px) {
  .elementor-location-header {
    min-height: 85px !important;
    height: 85px !important;
  }
  .elementor-location-header.sticky-nav-collapsed {
    min-height: 85px !important;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  /* What on earth do these style rules do?! This is why we leave comments! */
  /* dropdown menu */
  .elementor-12 .elementor-element.elementor-element-16466e1d {
    width: 100%;
    padding-right: 20px;
  }
  .elementor-12 .elementor-element.elementor-element-13ac5e7d > .elementor-container {
    min-height: auto !important;
  }
  .elementor-location-header {
    min-height: 85px !important;
  }
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    top: 75px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  }
  .elementor-12 .elementor-element.elementor-element-6efacd6a .elementor-nav-menu--dropdown {
    background-color: rgba(244, 244, 244, 0.98) !important;
  }
}
/* Add video placeholder background */
/* Add background and loading spinner to ARVE wrapper for videos */
.elementor-element.elementor-widget-video .elementor-wrapper.elementor-fit-aspect-ratio.elementor-open-inline {
  background-color: #DADADA;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(/wp-content/themes/comme-une-francaise/img/ajax-loader_bg-DADADA.gif);
}
/* Reverse columns takes effect on Tablet resolution as well */
/* Obsoleted by an Elementor update */
/*@media (max-width: 1024px) {
  .elementor-reverse-mobile > .elementor-container > .elementor-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
*/
/* fullwidth section, minimum height, boxed content = likely an image background; make sure links are white, change bg color on hover */
section.elementor-section-stretched.elementor-section-height-min-height.elementor-section-boxed .elementor-text-editor a {
  color: #FFF;
}
section.elementor-section-stretched.elementor-section-height-min-height.elementor-section-boxed .elementor-text-editor a:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
/* Fix bottom-padding in /blog thumbnails */
.elementor-widget-posts .elementor-posts .elementor-post__thumbnail {
  height: 209px;
}
.elementor-widget-posts .elementor-posts .elementor-post {
  margin-bottom: 2em;
}
/* Add hover overlay to video post thumbnails */
.elementor-widget-posts .elementor-post__thumbnail::after {
  height: 100%;
  content: "";
  background-color: rgba(0, 0, 0, 0.4);
  background-image: url(/wp-content/uploads/2018/07/play-button-overlay.png);
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.15s all;
}
.elementor-widget-posts .elementor-post__thumbnail:hover::after {
  opacity: 0.9;
  transition: 0.15s all;
}
/* always show video "play" overlay on home page */
body.home .elementor-widget-posts .elementor-post__thumbnail::after {
  opacity: 0.7;
}
/*Removes underline for Thrive link buttons*/
.no-underline a {
  text-decoration: none !important;
}
/*Make CUF Blog Post Sidebar Not Sticky*/
/*.cuf-blog-sidebar {
		position: relative !important;
} */
/* Allow negatively-positioned child elements within Le Salon sidebar Thrive widget */
.thrv_wrapper.thrv-page-section.tve-element-overlay-index {
  overflow: visible;
}
/*Hover overlay effects for the Salon sales page.*/
.hov-container {
  position: relative;
  width: 100%;
}
.hov-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.hov-overlay {
  max-width: 460px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #384693;
}
.hov-container:hover .hov-overlay {
  opacity: 1;
}
.hov-text {
  width: 80%;
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  line-height: 30px;
}
.hov-text a, .hov-text a:hover {
  color: #fff !important;
  text-decoration: underline;
}
/*Make z-index Salon Enroll page header stack higher againsts all elements.*/
.salon-enroll .elementor-location-header.sticky-nav-collapsed section {
  z-index: 100;
}
/* Courses page - Add appropriate imagery for beginner/intermediate/all course icon listing (courses page) */
body.page-french-courses .level-all::before, body.page-french-courses .level-complete-beginner::before, body.page-french-courses .level-beginner::before, body.page-french-courses .level-intermediate::before {
  content: "";
  display: inline-block;
  float: left;
  height: 24px;
  width: 20px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-right: 5px;
}
body.page-french-courses .level-all::before {
  background-image: url('/wp-content/uploads/2018/10/level-all.png');
}
body.page-french-courses .level-complete-beginner::before {
  background-image: url('/wp-content/uploads/2018/10/level-complete-beginner.png');
}
body.page-french-courses .level-beginner::before {
  background-image: url('/wp-content/uploads/2018/10/level-beginner.png');
}
body.page-french-courses .level-intermediate::before {
  background-image: url('/wp-content/uploads/2018/10/level-intermediaire.png');
}
/* New Courses Page - sidebar Thrive testimonials styling */
body.page-french-courses .tve_white .tvo-apply-background {
  background: #FFF;
  box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.2);
}
/* Enforce 100% width */
body.page-french-courses .tvo-item-col.tvo-item-s12 {
  -webkit-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
  min-width: 100%;
}
body.page-french-courses .tvo-testimonials-display-grid .tvo-testimonial-info {
  margin: 0 auto;
}
/* Content formatting */
body.page-french-courses .tvo-testimonials-display .tvo-testimonial-display-item p {
  font-family: "Oswald", "Open Sans", sans-serif;
  font-size: 24px;
  line-height: 1.4em;
  font-weight: 300;
}
body.page-french-courses .tvo-testimonials-display .tvo-testimonial-display-item p strong {
  font-weight: 500;
}
body.page-french-courses .tvo-testimonials-display .tvo-testimonial-name {
  font-family: "Oswald", "Open Sans", sans-serif;
}
/* repositioning the Elementor menu anchor elements so that content isn't obscured by the menu */
#main .elementor-menu-anchor {
  position: relative;
  bottom: 100px;
}
/* Rouded corners on the Double Your Frenchness section optin for BlogIndex and BlogSearch pages */
.elementor-row.row-blog-optin {
  margin-bottom: 2em;
  border-radius: 30px;
  overflow: hidden;
}
/* Dunno why this isn't set by default... */
pre {
  font-family: monospace !important;
}
/* Controls media responsiveness for the entire widget thingy */
@media (max-width: 768px) {
  .elementor-posts-container article.type-post {
    display: block;
  }
  .elementor-post__text {
    padding: 20px;
  }
}
/* some custom form styling for the new /welcome page GDPR optins */
body.page-welcome #main .entry-content {
  /* all forms on the welcome page */
  /* mobile sizing of checkbox/lesson items */
}
body.page-welcome #main .entry-content form.is-dynamic-gdpr {
  /* text inputs */
  /* submit button */
}
body.page-welcome #main .entry-content form.is-dynamic-gdpr input[type="text"], body.page-welcome #main .entry-content form.is-dynamic-gdpr input[type="email"] {
  font-size: 20px;
  padding: 16px 20px;
  line-height: 20px;
  border: 3px solid #e42f28;
  border-radius: 0;
}
body.page-welcome #main .entry-content form.is-dynamic-gdpr input[type="text"]::placeholder, body.page-welcome #main .entry-content form.is-dynamic-gdpr input[type="email"]::placeholder {
  text-transform: uppercase;
  font-size: 20px;
  line-height: 20px;
}
body.page-welcome #main .entry-content form.is-dynamic-gdpr .elementor-field-type-submit button {
  font-family: "Lato", sans-serif;
  font-size: 24px;
  font-weight: 900;
  border: 3px solid #fff;
  padding: 18px 20px;
  border-radius: 0;
  line-height: 28px;
}
@media (max-width: 768px) {
  body.page-welcome #main .entry-content form.is-dynamic-gdpr .elementor-field-type-submit button {
    padding: 10px 20px;
  }
}
@media (max-width: 768px) {
  body.page-welcome #main .entry-content .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: flex;
  }
  body.page-welcome #main .entry-content .elementor-widget-icon-box .elementor-icon-box-wrapper .elementor-icon-box-content {
    margin-bottom: 12px;
    padding-left: 10px;
  }
}
body.page-welcome #main .entry-content .elementor-section-wrap {
  /* first section form */
  /* last section form */
}
body.page-welcome #main .entry-content .elementor-section-wrap > section:first-of-type form.is-dynamic-gdpr .elementor-field-type-submit button {
  background-color: #253f8e;
  border: 3px solid #fff;
  border-color: #FFF;
}
body.page-welcome #main .entry-content .elementor-section-wrap > section:first-of-type form.is-dynamic-gdpr .elementor-field-type-submit button:hover {
  color: #FFF;
  background-color: #152451;
}
body.page-welcome #main .entry-content .elementor-section-wrap > section:last-of-type form.is-dynamic-gdpr {
  /* submit button */
}
body.page-welcome #main .entry-content .elementor-section-wrap > section:last-of-type form.is-dynamic-gdpr .elementor-field-type-submit button {
  background-color: #e42f28;
  border: 3px solid #fff;
  border-color: #FFF;
}
body.page-welcome #main .entry-content .elementor-section-wrap > section:last-of-type form.is-dynamic-gdpr .elementor-field-type-submit button:hover {
  color: #FFF;
  background-color: #931713;
}
/* welcome page styling */
/* Fix stupid elementor last-paragraph margin... why does everything do this? */
.elementor-text-editor p:last-of-type {
  margin-bottom: 0;
}
/* blog post PDF functions */
div.admin-pdf {
  border: 1px solid #FF0000;
  background-color: #FFEFEF;
  padding: 10px;
}
div.admin-pdf h4 {
  margin: -4px 0 4px 0;
  font-size: 18px;
  font-weight: bold;
}
div.admin-pdf a.no-pdf {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid #384693;
  background-color: #384693;
  color: #FFF;
  text-decoration: none !important;
  margin-right: 5px;
  font-weight: bold;
}
div.admin-pdf a.no-pdf:hover {
  color: #384693;
  background-color: #FFF;
}
/* hide the "subscribe to post comments" div that Thrive adds -- this creates WAY too many emails! */
#thrive-comments .thrive-comments-content .tcm-lazy-comments .tcm-align-right {
  display: none !important;
}
/* hide extra menu stuff we don't care about */
#wp-admin-bar-gp_elements-menu, #wp-admin-bar-elementor_notes, #wp-admin-bar-wpforms-menu, #wp-admin-bar-new-draft {
  display: none !important;
}