/*
Theme Name: Cardiff & Vale Music Service Theme
Theme URI: http://tbc.com
Description: Cardiff & Vale Music Service Theme
Author: Russell Davies
Author URI: http://cardiffcouncilwebteam.co.uk
Template: twentytwentythree
Version: 1.0.0
Text Domain: twentytwentythreechildtheme
*/



@import url("https://use.typekit.net/lyg2bsf.css");

:root {
  --main-text-font: 'effra';
}

header {
	margin: 0px !important;
}

h1, h2, h3, h4 {
    text-transform: none;
    font-family: 'effra';
}

body table tbody {
    color: #4F4F4F;
}

.has-blue-color {
  color:#0063B0;
}
.has-blue-background-color {
    background-color:#0063B0;
}

.has-orange-color, .has-orange-background-color {
  color:#D55028;
}

.has-teal-color, .has-teal-background-color {
  color:#0B8379;
}

.has-paracolor-color, .has-paracolor-background-color {
  color:#070707;
}

.header-cover {
    z-index: 10;
}

figure.wp-block-image.alignfull.size-large.header-waves {
    margin-top: -32px;
    z-index: 90;
    position: relative;
}

.header-cta-buttons {
    margin-top: -100px !important;
    z-index: 10;
    position: relative;
}

.wp-element-button:hover, .wp-block-button__link:hover {
    background-color: #000;
}


/*all top menu styling */
.wp-block-navigation__responsive-container-content {
    position: fixed;
    top: 0px;
    right: 0px;
}

ul.wp-block-navigation__container:not(.top-menu) {
    background-color: #0B8379;
}

a.wp-block-navigation-item__content {
    padding: 0.5rem 3rem;
}

.header-button-ind a:hover {
    background-color: #000000 !important;
}


.parent-nav-button a:hover {
    text-decoration: none;
    color: white !important;
}

.parent-nav-button:hover {
    background-color: #0063B0 !important;
}
a.mega-menu-link {
background: #07645C !important;
}

li.mega-current-menu-item > a.mega-menu-link {
  background: #0063b0 !important; 
  color: white;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
    font-family: var(--main-text-font) !important;
}



a.mega-menu-link:hover {
    background: #0063b0 !important;
}

ul.mega-sub-menu a.mega-menu-link {
    background: #f1f1f1 !important;
}

ul#mega-menu-max_mega_menu_1 {
    margin-top: -32px !important;
    margin-right: -30px !important;
}

.top-menu.wp-block-navigation__container {
    gap: 0 !important;
}

.top-menu a.wp-block-navigation-item__content {
    padding: 12px 20px;
}

.tel-menu a.wp-block-navigation-item__content:before {
    content: '\f095';
    font-family: "Font Awesome 6 Pro";
    margin-right: 5px;
}

ul.mega-sub-menu li.mega-menu-item a {
	background: #0063b0;
	border-radius: 20px;
}

.orchestra-parts a, .tall-links a {
    padding: 15px 10px;
}

@media screen and (min-width: 1025px) {
    ul.mega-menu li.mega-menu-item-home a.mega-menu-link {
     border-radius: 0px 0px 0px 30px !important;
    }

    ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
    background: #0063b0 !important;
    color: white !important;
    padding: 5px 20px !important;
    border-radius: 20px !important;
    width: 60% !important;
    }
}

figure.header-music-blocks {
    margin-top: -150px;
}

.hero-right-column {
    background-image: url('/wp-content/uploads/2023/07/music-sound.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: contain;
}

span.wpml-ls-native {
    margin-top: -60px !important;
    display: block;
}

/*all top menu styling END*/

/* mega menu styling */

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    font-family: var(--main-text-font) !important;
    font-weight: 300 !important;
}

.mega-sub-menu figcaption {
    display: none;
}


#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    display: block;
    background: #f1f1f1;
    color: #0063b0;
    font-family: var(--wp--preset--font-family--system-fonts) !important;
    font-size: 1rem !important;
    font-weight: normal;
    padding: 0px 10px 0px 10px;
    line-height: 35px;
    text-decoration: none;
    text-transform: none;
    vertical-align: baseline;
}

/* mega menu styling END */

/* footer styling */
.wp-block-social-link {
    border-radius: 7px;
}
.footer-icons {
    max-width: var(--wp--style--global--wide-size);
    margin: auto;
}

footer a:where(:not(.wp-element-button)) {
    color: white;
    text-decoration: underline;
    padding: 12px 0px;
}
/* footer styling END */

/* main content area styling */

li.has-system-fonts-font-family, li, span.pds-accordion__heading {
    font-size: clamp(0.975em, 0.975rem + ((1vw - 0.48em) * 0.625), 1.3em) !important;
    font-family: var(--wp--preset--font-family--system-fonts);
}

.plethoraplugins-accordion.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-accordion__title {
    background-color: #07645C;
    font-size: 22px;
}

.wp-site-blocks {
    padding-top: var(--wp--style--root--padding-top);
    padding-bottom: 0px !important;
}

.main-content-area, .has-background  {
    background-image: url('/wp-content/uploads/2023/06/background-circles-blue-90-600.png');
    background-position: -26rem center;
    background-repeat: no-repeat;
    background-size: contain;
}

p.dark-blue-paragraph {
    border-left: 26px solid #282560;
    border-radius: 7px;
}

p.light-blue-paragraph {
    border-left: 26px solid #1D76B8;
    border-radius: 7px;
}

p.teal-paragraph {
    border-left: 26px solid #00A49A;
    border-radius: 7px;
}

p.orange-paragraph {
    border-left: 26px solid #F7941D;
    border-radius: 7px;
}

.wp-block-image figcaption {
    font-family: var(--main-text-font);
}

.wp-block-buttons .wp-block-button:nth-child(2) a.wp-block-button__link {
    background-color: var(--wp--preset--color--custom-blue);
}

.wp-block-buttons .wp-block-button:nth-child(2) a.wp-block-button__link:hover {
    background-color: var(--wp--preset--color--contrast);
}
.wp-block-table td, .wp-block-table th {
    font-family: var(--wp--preset--font-family--system-fonts);
    font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.773), 1.3em);
    font-style: normal;
    font-weight: 300;
    text-align: left;
}

.wp-block-table table, .wp-block-table td, .wp-block-table th {
    border: 0px;
}

.wp-block-table thead {
    border-bottom: 2px solid;
    background: #f0f0f0;
}

.wp-block-table tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

/* main content area styling END */


/* Mobile styling options */

@media only screen and (max-width: 1024px) {
    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open + #mega-menu-max_mega_menu_1 {
        display: block;
        top: 0;
    }
}
@media screen and (min-width: 526px) {
    .header-waves-mobile {
        display: none;
    }
}

@media screen and (max-width: 525px) {
    .main-content-area {
       background-position: -7rem center; 
    }
    .header-waves {
        display: none;
    }
    .hide-on-mobile {
        display: none;
    }
    /*ul#mega-menu-max_mega_menu_1 {
    margin-top: -145px !important;
    margin-right: -30px !important;
    }*/
    .wp-block-column.\.mobile-menu-button.is-layout-flow {
    margin-top: -100px;
    }

    footer p a {
    line-height: 3rem;
    padding: 15px 0px;
    }

    #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated {
        padding: 10px !important;
    }
    
}


/* Mobile styling options END */


/* animated musical notes */
/*body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: black;
  color: white;
}*/

@media screen and (min-width:321px) {
	.muzieknootjes {
	  display: block;
	  margin: auto;
	  position: relative;
	  width: 50%;
	  min-width: 275px;
	  height: 200px;
	  color: white;
	}

	.noot-1,
	.noot-2,
	.noot-3,
	.noot-4 {
	  position: absolute;
	  animation: notes 6s infinite linear;
	  font-size: 45px;
	  opacity: 0;
	}

	.noot-1 {
	  top: 60px;
	  left: 0;
	  animation-delay: 1.5s;
	}

	.noot-2 {
	  top: 30px;
	  left: 30%;
	  animation-delay: 2s;
	}

	.noot-3 {
	  top: 90px;
	  left: 60%;
	  animation-delay: 2.5s;
	}

	.noot-4 {
	  top: 40px;
	  left: 90%;
	  animation-delay: 3s;
	}

	@keyframes notes {
	  0% {
		transform: scale(1) translate(0, 0);
		opacity: 0;
	  }
	  50% {
		opacity: 0.4;
		transform: scale(1.5) translate(50%, -50%);
	  }
	  80% {
		opacity: 0;
		transform: scale(1.5) translate(100%, -100%);
	  }
	  100% {
		transform: scale(1.5) translate(100%, -100%);
		opacity: 0;
	  }
	}
	
}
@media screen and (max-width:320px) {	
	.noot-1, .noot-2, .noot-3, .noot-4 {
		display: none;
	}
	.muzieknootjes {
   	 	margin-top: 8rem;
	}
}
/* animated musical notes END */
/* Contact form styling */

input, textarea {
    width: 95%;
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 20px;
}

input[type=submit] {
    background-color: #0d988c;
    position: relative;
    color: white;
    width: 100%;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output {
    border-color: #00a0d2;
    background-color: #00a0d2;
    color: white;
    font-family: var(--main-text-font);
}

.wpcf7 form .wpcf7-response-output {
    margin: 0px;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
}

select.wpcf7-form-control.wpcf7-select {
    width: 98%;
    padding: 10px;
    border: 1px solid #ddd;
}

/* Contact form styling END */


/*practice tips styling*/
@media screen and (min-width: 526px) {
    .practice-tips {  
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: 1fr;
      gap: 1rem;
      grid-auto-flow: row;
      grid-template-areas:
        "pt-3 pt-2 pt-1";
    background-color: #0063B0;
    border-radius: 300px;
        min-height: 200px;
    }
}

@media screen and (max-width: 525px) {
    .practice-tips {
      display: grid; 
      grid-template-columns: 1fr; 
      grid-template-rows: auto auto auto; 
      gap: 0px 0px; 
      grid-template-areas: 
        "pt-3"
        "pt-2"
        "pt-1"; 
        background-color: #0063B0;
    border-radius: 30px;
    padding: 2rem;
    }
    
    .pt-1 {
        display: none;
    }
}
.pt-1 { grid-area: pt-1; width: 110px; }

.pt-1 .icon-container {
    border-radius: 100px;
    padding: 4rem 1.8rem 4rem 0.5rem;
    display: block;
    margin: auto;
}


.pt-2 { grid-area: pt-2;    color: white;
    font-family: var(--main-text-font);
    padding: 2rem 0rem; }

.pt-3 { grid-area: pt-3; width: auto; margin-top: -20px;}

.pt-3 span.title {
    background: white;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 80px;
    border: 7px solid #0063B0;
    font-family: system-ui;
    font-weight: 800;
    color: #0063B0;
    width: auto;
    display: block;
    text-align: center;
    font-size: 2rem;
}

/*practice tips styling END*/

/* fix z index issue with internal pages mega menu */
.wp-block-cover, .wp-block-cover-image {
    overflow: visible !important;
}

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover, #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    border-radius: 0px !important;
}


/* Events styling */
.em.em-item.em-item-single .em-item-image {
    flex: 1 0 500px;
    order: 2;
    width: 100%;
}

section.em-location-content {
    display: flex;
    gap: 20px;
}

.em-item-location-meta {
    flex: 1 0 50%;
}


.orchestra-parts > div {
  padding: 10px;
}

.orchestra-parts > div:nth-child(odd) {
  background-color: #d3d3d37d;
}

.orchestra-parts > div:nth-child(even) {
  background-color: #d3d3d352;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table thead {
	background-color: #f9f9f9 !important;
}

header h1 {
    background: #0000007d;
}



/*Cookie notice*/
.cookie-notice-container a {color: #fff!important; text-decoration: underline;}
.cookie-notice-container a:hover {color: #ffff00!important;}

a#cn-accept-cookie:hover,a#cn-refuse-cookie:hover {background-color:#e1e23e!important;color:#000!important;}
a#cn-accept-cookie:focus,a#cn-refuse-cookie:focus {outline: 2px dashed #fff!important;}

#cookie-notice {
    font-size: 17px!important;
	/*border-bottom: 2px solid #e1e23e;*/
	text-align: left!important;
	top: -1px;
}

.cookie-notice-container {text-align: left!important;
    padding-top: 30px!important;
    padding-bottom: 45px!important;}

#cookie-notice h2 {color: #fff!important; margin-top:0px!important;margin-bottom:15px!important;text-align: left!important;font-size: 2rem;}

/*#cn-accept-cookie:hover,#cn-accept-cookie:focus,#cn-refuse-cookie:hover,#cn-refuse-cookie:focus {
  outline: 3px solid #fd0 !important;
  text-decoration: underline !important;
}*/

/* END */


.mega-menu a.mega-menu-link:focus, a:focus {
  outline: 3px solid #FA0000 !important;
}

button.mega-toggle-animated.mega-toggle-animated-slider:focus {
    outline: 3px solid #FA0000 !important;
}