/*

Theme Name: Les Filles
Theme URI: https://lesfilles.com
Author: Ross Vandenhoeck
Author URI: https://rossvandenhoeck.com

Description: A custom WordPress theme for Les Filles

Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/


/******** GLOSSARY ********

FONT FACE, BASE, RESET, TEXT in init.php
ANIMATIONS
HOMEPAGE
MODULES
PAGES

******** GLOSSARY ********/


/******** HOME ********/

/*grid*/

#home main {
  margin: unset;
  position: fixed;
  display: grid;
  grid-template-columns: var(--m-xl) 2fr 1fr 2fr var(--m-xl);
  grid-template-rows: var(--m-xxl) auto var(--m-xxl);
  grid-gap: var(--m-m) var(--m-l);
  height: 100vh;
  width: 100%;
  text-align: center;
}

.disc-left-wrapper {
  grid-row-start: 2;
  grid-column-start: 2;
  display: flex;
}

.controls-wrapper {
  grid-row-start: 2;
  grid-column-start: 3;
  display: grid;
  flex-direction: column;
  align-items: center;
  grid-template-rows: min-content auto min-content 0;
  grid-gap: var(--m-m);
  height: 100%;
  width: 100%;
  max-width: 20rem;
  max-height: 70vh;
  margin: 0 auto;
  align-self: center;
}

.disc-right-wrapper {
  grid-row-start: 2;
  grid-column-start: 4;
  display: flex;
}

/*toggle*/

.toggle-wrapper {
  border: var(--border);
  padding: 3px;
  margin: 0 auto;
  display: flex;
}

.toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  border: var(--border);
  padding: 1.25rem 5px;
  cursor: pointer;
  transition: color var(--timer-f), background var(--timer-f);
}

.toggle:hover,
.toggle.active {
  background: var(--c-primary);
  color: var(--bg-primary);
}

#off {
  padding-left: 6px;
}

#on {
  border-right: none;
}

/*levels*/

.levels-wrapper {
  display: grid;
  flex-direction: column;
  height: 100%;
  grid-gap: var(--m-s);
  grid-template-rows: min-content;
  max-height: 33vh;
  align-self: center;
}

.levels-inner-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--m-l);
  height: 100%;
}

.level {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--m-s);
}

.level-top {
  flex: 0 0 10%;
}

.level-top p {
  margin-bottom: var(--m-s);  
}

.level-bottom {
  flex: 0 0 90%;
  display: flex;
}

#level-a .level-bottom {
  justify-content: flex-start;
}

#level-b .level-bottom {
  justify-content: flex-end;
}

.meter-wrapper {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  position: relative;
}

#level-a .level-label {
  margin-right: 5px;
}

#level-b .level-label {
  margin-left: 5px;
}

.meter {
  flex: 100%;
  flex-direction: column;
  display: flex;
  position: relative;
  margin-top: 2px;
  margin-bottom: 2px;
}

.meter svg {
  position: absolute;
  height: 100%;
}

#level-a .meter svg {
  right: 0;
}

#level-b .meter svg {
  left: 0;
}

.dial-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
}

#level-a .dial-wrapper {
  right: 0;
  transform: translate(40%, 0);
}

#level-b .dial-wrapper {
  left: 0;
  transform: translate(-40%, 0);
}

.dial {
  cursor: grab;
  position: absolute;
  top: 0;
  width: 200%;
  max-width: 4.5rem;
  left: 50%;
  transform: translateX(-50%)
}

.dial svg {
  width: 100%;
}

.level-label {
  flex: 0 1 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.level-label svg {
  flex: 0 0 20%;
}

#level-b .level-label svg {
  transform: rotate(180deg);  
}

/*pitch*/

.pitch-wrapper {
  display: grid;
  grid-gap: var(--m-s);
}

.pitch-title {
  flex: 1 1 10%; 
}

.pitch-inner-wrapper {
  flex: 1 1 90%; 
  display: flex;
  justify-content: space-between;
}

.pitch {
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
}

.pitch p {
  margin-bottom: var(--m-s);
}

.knob {
  cursor: grab;
}

.knob svg {
  height: 100%;
  max-width: var(--m-xxl);
}

.knob-dial {
  transform-origin: 47.7% 49%;
}


@media (max-height: 40rem){
  .knob svg {
    max-width: var(--m-xl);
  }
}

/*discs*/

.disc-left-wrapper,
.disc-right-wrapper {
  display: grid;
  grid-template-rows: 5fr 1fr;
  grid-gap: var(--m-l);
  height: 100%;
  justify-items: center;
  align-items: center;
}

.disc {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 50vh;
  width: 100%;
  height: 100%;
}

.disc.active svg {
  animation: spin var(--timer-xs) linear both infinite;
}

.disc.paused svg {
  animation-play-state: paused; 
}

.disc svg {
  height: 100%;
  width: 100%;
}

.disc-bottom-wrapper {
  display: grid;
  grid-gap: var(--m-m);
  width: 100%;
  max-width: 50vh;
}

.disc-title {
}

.disc-button-wrapper {
  display: flex;
  margin-left: 2px;
}

.button-group {
  flex: 1;
  display: grid;
  grid-gap: var(--m-s);
}

.button-title {
  flex: 0 0 50%;
}

.button {
  flex: 0 0 50%;
  cursor: pointer;
  display: flex;
}

.button svg {
  width: 100%;
  height: 100%;
}

.button-group:nth-of-type(n+1) {
  margin-left: -2px;
}

.disc-mobile-wrapper {
  display: none;
}

@media (max-width: 50rem), (any-hover: none)  {
  #home main {
    height: 100%;
    grid-template-rows: var(--m-xxxl) 1fr 4fr var(--m-xxxl);
    grid-template-columns: auto;
    grid-gap: var(--m-xl);
  }

  .disc-left-wrapper,
  .disc-right-wrapper,
  .levels-wrapper,
  .pitch-wrapper {
    display: none;
  }

  .controls-wrapper {
    display: block;
    height: auto;
    grid-row: 2/3;
    grid-column: 1;
  }

  .disc-mobile-wrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 90%;
    max-width: 90%;
    max-height: 50vh;
    grid-row: 3/4;
    grid-column: 1;

  }

  .disc {
    max-width: none;
  }

  #home .toggle {
    font-size: 8px;
    padding: 2.25rem 5px;
  }

}


/* dark mode and svg control*/
#logo svg,
.disc-text,
/*.disc polygon,*/
.dial polygon,
#ig path,
.active .button-shade {
  fill: var(--c-primary);
}

.disc-stroke,
.meter rect,
.meter line,
.meter circle,
.button line,
.button rect,
.dial rect,
.dial line,
.knob line,
.inner-circle,
.arrow g  {
  stroke: var(--c-primary);
}

.meter circle,
.button rect,
.dial rect,
.knob circle,
#ig mask {
  fill: var(--bg-primary);
}
  .noir #ig mask {
    fill: var(--c-primary);
  }

.level-label g {
  fill: #F2F2F2;
}
  .noir .level-label g {
    fill: #444444;
  }

.noir .footer-logo {
  filter: brightness(1000);  
}

/******** TALENT ********/

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--m-xl) var(--m-s);
  align-items: end;
  justify-items: center;
}

.update {
  animation: flash var(--timer-s) both;
}

.grid-item {
  position: relative;
  width: 100%;
  text-align: left;
}

.grid-item:hover .grid-item-name {
  transform: translateY(calc(-1 * var(--m-s)));
}

.grid-item:hover .grid-item-image-wrapper img {
  transform: translateY(var(--m-s));
}

.grid-item-name {
  margin-bottom: var(--m-m);
}

.grid-item-name,
.grid-item-image-wrapper img {
  transition: transform var(--timer-m);
}

.grid-item-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body#talent .grid-item-image-wrapper {
  height: max(14vw, 100px);
}

body#talent .grid-item-image-wrapper img {
  object-fit: cover;
}

.filters {
  cursor: pointer;
  text-transform: lowercase;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--m-l);
}

.filter {
  padding: var(--m-m) 0;
  color: var(--bg-primary);
  -webkit-text-stroke: .3px var(--c-primary);
  transition: color var(--timer-m);
}

.filter.active,
.filter:hover {
  color: var(--c-primary);
}

@media (any-hover: none) {
  .filter.active:hover {
    color: var(--c-primary);
  }

  .filter:hover {
    color: var(--bg-primary);
  }
}


.filter:not(:last-of-type) {
  margin-right: var(--m-l);
}


@media (max-width: 50em){
  .filters {
    justify-content: flex-start;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--m-l);
  }
}

@media (max-width: 31.25em){
  .grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--m-l);
  }
}

/******** TALENT SINGLE ********/
.fille-bio {
  display: flex;
  align-items: flex-start;
  margin: var(--m-m) auto;
}

.fille-single-image-wrapper {
  flex: 1;
  margin-right: var(--m-xxl);
  display: flex;
  max-width: 50rem;
}

.fille-text-wrapper {
  flex: 67% 0 1;
  column-count: 2;
  column-gap: var(--m-l);
}

.fille-text-wrapper p {
  margin-bottom: var(--m-m);
}

@media (max-width: 70em){
  .fille-text-wrapper {
    column-count: 1;
  }
}

@media (max-width: 50em){
  .fille-bio {
    flex-direction: column;
  }

  .fille-text-wrapper {
    margin-top: var(--m-xxl);
  }

  .fille-text-wrapper p {
    margin-bottom: var(--m-l);
  }
}

/******** NEWS ********/



#news {
  margin-top: var(--m-xxxl);
}

.article {
  cursor: s-resize;
  padding-top: var(--m-xxl);
  border-bottom: var(--border);
}

.article.active {
  cursor: n-resize;
}

.article.active {
  cursor: n-resize;
}


#news div:first-of-type {
  padding-top: 0;
}

#news div:last-of-type {
  border-bottom: none;
}

.article {
  max-width: 1000px;
  margin: 0 auto;
  cursor: s-resize;
  padding-top: var(--m-xxl);
  border-bottom: var(--border);
}

.article.active {
  cursor: n-resize;
}

.article-title-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 0 var(--m-m);
  transition: margin var(--timer-m);
}

.article:hover .article-title-wrapper,
.article.active .article-title-wrapper {
  margin: 0;
}

.plus {
  transition: transform var(--timer-m);
}

.article.active .plus {
  transform: rotate(45deg);
}

.article-wrapper {
  max-height: var(--m-xxl);
  overflow: hidden;
  transition: max-height var(--timer-s);
}

.article.active .article-wrapper {
  max-height: 80vh;
  overflow: scroll;
  -ms-overflow-style: none;
}

.article.active .article-wrapper::-webkit-scrollbar {
  display: none;
}

.article-title {
  width: 90%;
  transition: width var(--timer-m);
}

.article:hover .article-title,
.article.active .article-title {
  width: calc(90% - var(--m-l));
}

.article-text {
  margin-top: var(--m-xxl);
  padding-bottom: var(--m-xxl);
  max-width: 65rem;
}

.article-text a {
  text-decoration: underline;
}

@media (max-width: 31.25em){
  /*reset hover state*/
  .article:hover .article-title-wrapper {
    margin: 0 var(--m-m);
  }
  .article:hover .article-title {
    width: 90%;
  }
  /*override reset for active state*/
  .article.active .article-title-wrapper {
    margin: 0;
  }
  .article.active .article-title {
    width: calc(90% - var(--m-l));
  }


  .article.active .article-wrapper {
    max-height: 100vh;
  }
}

/******** WEDDINGS ********/
.weddings-grid {
  display: grid;
  grid-gap: var(--m-xl);
  grid-template-columns: 1fr 1fr;
}

.weddings-grid img {
  margin-top: var(--m-s);
  height: 100%;
  width: auto;
  max-height: 60vh;
  object-fit: contain;
}

.column-left p {
  max-width: 50rem;
}

@media (max-width: 50em){
  .weddings-grid {
    grid-gap: var(--m-xxxl);
    grid-template-columns: 1fr;
    max-width: 60rem;
  }
}

/******** TEXT GRID ********/

.text-grid {
  display: grid;
  grid-gap: var(--m-xl);
  grid-template-columns: 1fr 1fr 1fr;
}


.text-grid.half {
  display: grid;
  grid-gap: var(--m-xl);
  grid-template-columns: 1fr 1fr;
}

.section-header {
  margin-bottom: var(--m-l);
}

@media (max-width: 50em){
  .text-grid,
  .text-grid.half {
    grid-gap: var(--m-xl);
    grid-template-columns: 1fr;
    max-width: 75rem;
  }
}

/******** SERVICES ********/

#services-video {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto var(--m-xxl);
  background-color: #eee;
}

.video-item .grid-item-image-wrapper {
  position: relative;
}

.video-item img,
.video-item .grid-item-name {
  transform: none !important;
}

  .svg-video-play {
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: transform .3s;
  }

  .video-item:focus .svg-video-play {
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  @media (hover: hover) {
    .video-item:hover .svg-video-play {
      transform: translate(-50%, -50%) rotate(-90deg);
    }
  }


/******** FOOTER BRANDING ********/

.footer-branding {
  margin: var(--m-xxl) 0;
}

.footer-branding-bottom {
  display: flex;
  justify-content: space-between;
}

.footer-branding-left {
  flex: 60% 1 1;
}

.footer-branding-right {
  flex: 40% 1 0;
  max-width: 50rem;
}

.footer-logo {
  width: 10rem;
  margin-bottom: var(--m-xl);
}

.footer-cta,
.form-cta {
  margin-bottom: var(--m-m);
}

.form-input {
  position: relative;
  border-bottom: var(--border);
  display: flex;
  justify-content: space-between;
  padding: var(--m-m) 0;
}

#mce-EMAIL {
  flex: 90% 0 1; 
}

#mc-embedded-subscribe {
  flex: 10% 1 0;
  opacity: 0;
  position: relative;
  z-index: 1;
}

.mc-status.success-message {
  margin-top: var(--m-s);
}

.form-input:hover .arrow {
  animation: sway var(--timer-m) linear both infinite alternate;
}

.arrow {
  width: 3rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0,-50%);
  z-index: 0;
}

.arrow svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 50em){
  .footer-branding-bottom {
    flex-direction: column;
  }

  .footer-branding-left {
    margin-bottom: var(--m-xxxl);
  }

  .footer-branding-right {
    max-width: 100%;
    margin-bottom: var(--m-l);
  }

}