/*
Theme Name: Vetro
Theme URI: https://wordpress.com/themes/vetro/
Description: Vetro was designed to be a portfolio theme, and is composed by wide width layouts with the impact of generous imagery and typography. Its simple pages are aligned left with fair right paddings and large content blocks to grant viewers focus on visuals and short paragraphs.
Version: 1.0.11
Author: Automattic
Author URI: https://automattic.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vetro
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: "STAMP";
  src: url("./fonts/BebasNeue-Regular.otf");
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

/* Rick: don't show 'HOME'-menuitem on homepage */
.home ul >li:first-child {
    display:none
}

/* Rick: to make nav menu centre right */
.wp-container-core-group-is-layout-2 {
    /*max-width: 920px !important; */
}

/* Rick: contact form does not work - so hide */
#wpforms-211 {
    display:none !important;    
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: dashed;
}

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline
	> .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--foreground);
}

/* Rick: mobile open - fix to right top */
.wp-block-navigation__responsive-container-open {
  position: fixed;
  z-index: 99999;
  right: 8px;
  top: 10px;
  height: 24px;
  width: 24px;
  background-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background); 
}
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--foreground) !important;
  color:  var(--wp--preset--color--background) !important; 
}

/* Rick 
 *   adding double player 
 */
.players {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-top-color: var(--wp--preset--color--foreground);
  border-top-width: 4px;
  border-bottom-width: 4px;

  z-index: 9999; /* any high number to ensure it's on top */
    /*display: inline-grid;
  grid-template-columns: 1fr 1fr;
  */
}

.player__wrapper {
    width: 62%;
    margin: auto;
    font-family: STAMP;
    letter-spacing: 1px;
    font-size: 1.1rem !important;
    background-color: #2B866C; /*var(--wp--preset--color--background); */
    border-top-color: var(--wp--preset--color--foreground);
    border-width: 1px;
    border-style: solid;
    padding-top: 7px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 8px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-style: none;
}

/* Rick: making controlpanel */
.control_buttons {
  display: flex;
  margin-left: 60px;
}
.ab__controls {
  margin-right: 60px;
}

.ab__controls {
  float:right;
  justify-content: center;
  align-items: center;
}
.ab__controls button {
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--wp--preset--color--foreground);
  width: 7em;
  /* padding: 0.75rem; */
  /*border-radius: 8px;*/
  background: var(--wp--preset--color--background); /* #e6e6e6; */
  /* box-shadow: 7px 7px 15px #cdcdcd, -7px -7px 15px #ffffff; */
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}

.a__button {
  margin-right: -3px;
}
.b__button {
  margin-left: -3px;
}

.play__stop__controls button {
  color: var(--wp--preset--color--foreground);
  width: 4em;
  height: 25px;
  /* padding: 0.75rem; */
  border-radius: 8px;
  background: var(--wp--preset--color--background); /* #e6e6e6; */
  /* box-shadow: 7px 7px 15px #cdcdcd, -7px -7px 15px #ffffff; */
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}

.play__stop__controls {
  margin-right: auto;
  /* width: 300px; */
}

.a__button {
  width: 9rem;
  font-weight: normal;
  border-radius: 12px 0 0 12px;
  justify-self: self-end;
}

.b__button {
  width: 9rem;
  font-weight: normal;
  border-radius: 0 12px 12px 0;
  justify-self: self-start;
}

.player__wrapper button:disabled {
  /*color: #c9c9c9;*/
  font-weight: bold;
  box-shadow: inset 7px 7px 15px #ACBCC8, inset -7px -7px 15px var(--wp--preset--color--background);
  transition: all ease-in-out 0.3s;
}
.player__wrapper button:disabled:hover {
  color: #c9c9c9;
  box-shadow: inset 5px 5px 15px #cdcdcd, inset -5px -5px 15px #ffffff;
}

.player__wrapper button:hover {
  font-weight: bold;
  box-shadow: 4px 4px 15px #cdcdcd, -4px -4px 15px #ffffff;
}

.play__button {
  justify-self: self-end;
}

#b_play {
    display: inline-block;
    background-image: url(../image/icon_play.png);
    background-size: 25px;
    width: 25px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: left bottom;
    cursor: pointer;
}
.stop__button {
  display:none;
  width: 5rem;
  color: #966f6f;
  justify-self: self-start;
}

.stop__button:disabled {
  color: #966f6fd3;
}

.next__button {
  letter-spacing: 2px;
}

.progress__div {
  width: 92%;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: auto;
  margin-right: auto;
}
.progress__container {
  display: inline-flex;
  background: #a8a8a8;
  height: 1rem;
  width: 100%;
  margin-bottom: 0.4rem;
  border-radius: 10px;
  border-radius: 12px;
  background: #e6e6e6;
  box-shadow: inset 7px 7px 15px #cdcdcd, inset -7px -7px 15px #ffffff;
  cursor: pointer;
  align-self: center;
  overflow: hidden;
}

.progress__bar {
   background: linear-gradient(360deg, #2da87b, #34dcacfa); 
  /* background: linear-gradient(360deg, #62ff88, #00d084); */
  border-radius: 12px;
  transition: all ease-in-out 0.03s;
}

.progress__fill {
  width: 0%;
}

/* general css */
.entry-content {
    font-size: 1rem !important;
    /* letter-spacing: 1px;    */
}
header .wp-block-group {
    margin-top: -9px;
    margin-bottom: -30px;
}
/* header subtitle */
#header_subtitle {
    display: block;
    font-family: var(--wp--preset--font-family--inter);
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
    white-space: pre-wrap;
    min-width: 1px;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    left: -306px;
    top: 19px;
}

h1 {
    margin-left: 18px !important;
    font-size: 3em !important;
    margin-top: -70px !important;
    margin-bottom: -54px !important;
    letter-spacing: 1px !important;
}

h2 {
    margin-top: -12px !important;
}

.wp-block-navigation-is-layout-flex {
    margin-top: 15px !important;
}

/* make menu not wrap */
.wp-block-navigation__container {
    white-space: nowrap;
}
.wp-block-navigation__container li {
    display: inline-block;
}

/* Rick: move all text to the right */
.wp-block-column-is-layout-flow {
    margin-left:20px !important;
    flex-basis: 90% !important;
}

.wp-block-preformatted {
    margin-left: 44px !important;
}

.wp-block-preformatted a {
    font-family: inherit !important;
}

/* top header - start higher */
.wp-block-group alignwide {
    margin-top: -8px !important;
}

/* Rick: turn filter off on hover */
.wp-block-image img:hover {
    /* cursor: all-scroll;*/
   -webkit-filter: none;
   -moz-filter: none;
   filter: none;
}
.wp-block-image div img:hover {
    /* cursor: all-scroll;*/
   -webkit-filter: none;
   -moz-filter: none;
   filter: none;
}
.wp-block-image img {
   -webkit-filter: var(--wp--preset--duotone--default);
   -moz-filter: var(--wp--preset--duotone--default);
   filter: var(--wp--preset--duotone--default);
   transition: all 0.5s ease;    
}
.wp-block-image figcaption {
    color: var(--wp--preset--color--foreground) !important;
}
#logo-hoverblock {
    z-index: 99999;
    position: absolute;
    top: 44px;
    left: 50px;
    height: 142px;
    width: 142px;
}

/* single image in middle
.wp-container-core-columns-is-layout-3 {
    margin-right: 0 !important;
} */

/* Rick: exclude filter off for logo
header .wp-block-img img:hover {
    -webkit-filter: var(--wp--preset--duotone--default) !important;
    -moz-filter: var(--wp--preset--duotone--default) !important;
    filter: var(--wp--preset--duotone--default) !important;
}*/

/* no underline on header title */
h2 a {
    text-decoration: none !important; 
}

.wp-block-columns {
    margin-left: 32px !important;
    margin-right: 15px !important;
}

.pricing-img {
    padding-left: 24px;
}

:where(body .is-layout-flex) {
    gap: 0.9rem !important;
}

.wpforms-container {
    border-style: groove !important;
    padding-left: 20px !important;
    padding-right: 50px !important;
    padding-bottom: 20px !important;
    margin-top: 32px !important;
    margin-left: 64px !important;
    margin-right: 48px !important;
    background-color: #50D77F !important;
}

/* year column credits */
.wp-block-table td:nth-child(3){
    width: 14% !important;      
}

/* link column credits */
.wp-block-table td:nth-child(4){
    width: 14% !important;      
}

@media only screen and (max-width: 936px) {
    .ab__controls {
        margin-right: 12px;
    }
    
    .control_buttons {
        margin-left: 12px;    
    }
}

@media only screen and (max-width: 1024px) {
    .player__wrapper {
        width: 62%;
    }
}
@media only screen and (max-width: 1240px) {
    .player__wrapper {
        width: 56%;
    }
}
@media only screen and (min-width: 1241px) {
    .player__wrapper {
        width: 40%;
    }
}

/* Rick: small phone header */
@media (min-resolution: 192dpi) {
}
@media only screen and (max-width: 680px) {
    h1 {
        margin-left: 18px !important;
        font-size: 2em !important;
        margin-top: -40px !important;
        margin-bottom: -74px !important;
        letter-spacing: 1px !important;
    }
    .wp-block-preformatted {
        margin-left: 6px !important;
        font-size: 0.9em !important;
    }
    
    #logo-hoverblock {
        z-index: 99999;
        top: 20px;
        left: 20px;
        height: 120px;
        width: 120px;
    }
    
    header {
        margin-top: 4px !important;
    }
    header .wp-block-group {
        margin-top: -20px;
        margin-bottom: -48px;
        padding-bottom: 0px !important;
    }
    #header_subtitle {        
        left: 128px;
        top: -74px;
        font-size: 0.7rem;
    }
    /* main title */
    h2 {
        font-size: 1.4em;
        letter-spacing: 0px;
        position: relative;
        top: 0px;
        left: 0px;
    }
    
    main {
        width: 100%;
        padding-right: 12px !important;
        margin-top: 120px !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    button {
        height: 28px;
    }
    
    .wp-image-58 {
        width: 112px !important;
    }
    
    /* skip some images on mobile */
    .wp-image-125 {
        display: none;
    }
    
    .player__wrapper {
        margin: auto;
        width: 85%;
        padding-left: 8px;
        padding-right: 8px;
        /*margin-left: 15px;*/
    }
    
    .ab__controls button {
        font-size: 0.6rem;
    }
    
    .play__stop__controls {
    }
    
    .play__stop__controls button {
        font-size: 0.6rem;
    }
    
    .wp-block-columns {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
    
    .wp-block-column-is-layout-flow {
        margin-left: 4px !important;
    }

    .wpforms-container {
        border-style: groove !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 12px !important;
        margin-left: 12px !important;
        background-color: #50D77F !important;
    }
    
    /* (R) Credit tables smaller */
    .wp-block-table {
        margin-left:-10px !important;
        margin-right:-16px !important;
    }
}