/**
Theme Name: Andersen
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andersen
Template: astra
*/

/* general styling */

.main-header-bar {
    background-color: black;
    border: none !important;
}

.ast-header-break-point .ast-primary-header-bar {
    border: none !important;
}

.site-header-section .ast-builder-menu {
  margin-top: -64px !important;
}

@media screen and (max-width: 974px) {
    .site-header-section .ast-builder-menu {
      margin-top: -12px !important;
    }
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu {
  margin-top: -6px !important;
}

.ast-primary-header-bar .main-header-menu > .menu-item {
  line-height: 45px !important;
}

.ast-desktop .ast-builder-menu-1 .menu-item .sub-menu .menu-link {
  padding: 0.1em 0.5em !important;
}

@media (min-width: 922px) {
  .ast-builder-menu .main-navigation > ul > li:last-child a {
    margin-right: 0;
  }
}
.ast-builder-menu-1 .menu-link:hover, .ast-builder-menu-1 .main-header-menu > .menu-item:hover > .menu-link, .ast-builder-menu-1 .inline-on-mobile .ast-menu-toggle:hover, .ast-builder-menu-1 .inline-on-mobile .main-header-menu > .menu-item:hover > .ast-menu-toggle {
  color: var(--ast-global-color-1);
}
.ast-builder-menu-1 .menu-item > .menu-link {
  color: var(--ast-global-color-3);
}
.submenu-with-border .sub-menu .menu-link {
  border-width: 0 0 1px;

  border-style: solid;
}
.main-header-menu .sub-menu .menu-link {
  padding: 0.1em 1em;
}

.menu-link {
    color: #dddd59 !important;
}

.menu-link:hover {
    color: green !important;
}

.sub-menu {
  background-color: black !important;
  border-color: black !important;
}



@media (min-width: 544px) {
  #scott-after-header-container {
    max-width: 100%;
  }
}
@media (min-width: 922px) {
  #scott-after-header-container {
    max-width: 1240px;
    margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  }
}


@media screen and (max-width: 960px) {
  #scott-after-header-container {
  padding-left: 9px;
  padding-right: 9px;
  }
}

#scott-after-header {
    text-align: center;
    width: 100%;
}

a:focus {
  outline: none;
  color: #b3b18d;
}

a:visited {
    color: #b3b18d;
}

a:hover {
      background-color: #30315a;
  border-radius: 25px;
  padding: 6px;
}

header a:hover {
    padding: 0;
    border-radius: 0;
    background-color: black;
}

.button:focus {
    color: #b3b18d;
}

.button:hover {
	padding-top: 15px;
  padding-right: 30px;
  padding-bottom: 15px;
  padding-left: 30px;
}

@media (min-width: 993px) {
  .ast-separate-container #primary, .ast-separate-container.ast-left-sidebar #primary, .ast-separate-container.ast-right-sidebar #primary {
    margin: 2em 0;
    padding: 0;
  }
}

.archive #secondary {
    display: none;
}

.site-below-footer-wrap[data-section="section-below-footer-builder"] {
    background-color: black !important;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    color: yellow !important;
    fill: yellow !important;
}

 .ast-builder-menu-mobile .main-navigation .main-header-menu {
    background-color: black !important;
}

.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link {
    background-color: initial !important;
}

header.entry-header .entry-title {
  text-align: center;
}

/* new home page */

#home-blurb h1 {
  text-align: center;
}

#home-buttons {
width: 100%;
display: flex;
}

#home-buttons .button {
width: 20%;
flex: 1;
border-radius: 32px;
border: 0;
font-size: 21px;
font-weight: bold;
padding: 9px;
text-align: center;
color: #f9f9e0;
}

.homebtn1 {
color: #000000;
background-color: #047300;
}

.homebtn1:hover {
  background-color: #dbdbdb;
  color: #047300 !important;
}

.homebtn2 {
color: #000000;
background-color: #b60009;
}

.homebtn2:hover {
  background-color: #dbdbdb;
  color: #b60009 !important;
}

.homebtn3 {
color: #000000;
background-color: #958400;
}

.homebtn3:hover {
  background-color: #dbdbdb;
  color: #958400 !important;
}

.homebtn4 {
color: #000000;
background-color: #0047a0;
}

.homebtn4:hover {
  background-color: #dbdbdb;
  color: #0047a0 !important;
}

@media screen and (max-width: 960px) {

#branding {
background-size: 480px auto;
position: static;
}

/*.primary-navigation {
width: 90px;
}*/

#home-blurb h1 {
font-size: 19px;
}

#home-blurb h2 {
font-size: 16px;
}

#home-blurb h3, h3.wp-video-title, p.track-title {
font-size: 14px;
}

#home-buttons {
flex-flow: row wrap;
}

#home-buttons .button {
width: 50%;
font-size: 21px;
margin: 6px 21px;
}

}

.wp-playlist-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1100px;
    width: 100%;
    margin: 20px auto;
    background: #1e1e24;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    /*  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; */
}

#home-gallery {
  /* display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
  gap: 15px;   
  padding: 15px;
  */
  position: relative;
  height: 120px;
  margin-bottom: 200px;
}

#home-gallery img {
  position: absolute;
  width: 123px;
  height: 200px;
  object-fit: cover;   
  border-radius: 8px;
  border: solid 3px grey;
  transition: transform 0.3s ease;
}

/* Optional hover animation effect */
#home-gallery img:hover {
  transform: scale(1.03);
  cursor: pointer;
}


/* Main Display Theater Block */
.wp-main-player {
    flex: 1 1 650px;
    background: #000;
    padding: 20px;
}

.wp-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Native modern widescreen formatting standard */
    background: #111;
}

/* Enforcing perfect sizing hooks across all iframe structures embedded by WordPress */
.wp-player-wrapper iframe,
.wp-player-wrapper object,
.wp-player-wrapper embed,
.wp-player-wrapper .wp-block-embed__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.wp-video-title {
    color: #fff;
    margin-top: 15px;
    font-size: 1.15rem;
    font-weight: 500;
}

/* Sidebar List Container */
.wp-playlist-sidebar {
    flex: 1 1 320px;
    background: #25252d;
    display: flex;
    flex-direction: column;
    max-height: 480px; /* Keeps sidebar matching height constraints */
}

.wp-sidebar-header {
    padding: 18px 20px;
    background: #2a2a34;
    border-bottom: 1px solid #1e1e24;
}

.wp-sidebar-header h4 {
    color: #a0a0b0;
    margin: 0;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.wp-playlist-items {
    overflow-y: auto; /* Isolated list layout scrolling engine container */
    flex-grow: 1;
}

/* Individual Interactive Item Tracks */
.playlist-track {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-bottom: 1px solid #1e1e24;
    cursor: pointer;
    transition: background 0.2s ease;
}

.playlist-track:hover {
    background: #2e2e38;
}

.playlist-track.is-playing {
    background: #32323e;
    border-left: 4px solid #3897f0;
}

.track-index {
    color: #606070;
    font-weight: 700;
    font-size: 0.9rem; 
    margin-top: -1px;
}

.playlist-track.is-playing .track-index {
    color: #3897f0;
}

.track-title {
    color: #c5c5d2;
    font-size: 0.9rem;
    margin: 0 !important;
    line-height: 1.4;
}

.playlist-track.is-playing .track-title {
    color: #fff;
    font-weight: 600;
}

/* Scrollbar Customization Engine for Webkit browsers */
.wp-playlist-items::-webkit-scrollbar {
    width: 6px;
}
.wp-playlist-items::-webkit-scrollbar-thumb {
    background: #3e3e4a;
    border-radius: 3px;
}

/* about and contact page */

.gform_wrapper textarea, .gform_wrapper input {
    background-color: #c3cde1;
}

.gform_wrapper ::placeholder {
    color: black; 
    opacity: 1;    
}

input[type="submit"].gform_button,
.gform_wrapper .gform_footer input[type="button"],
.gform_wrapper .gform_page_footer input[type="button"] {
    color: black !important; 
}

.bio-box-container, .cv-box-container {
    display: flex;
    flex-flow: column nowrap;
}

.bio-box-row {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    border-radius: 25px;
    max-height: 300px;
}

.bio-text-box {
    width: 70%;
    position: relative;
}

.bio-text-box p {
    padding: 21px;
    margin-bottom: 9px;
    padding-bottom: 9px;
}

.bio-text-box ul {
  display: flex;
  flex-flow: row wrap;
  gap: 9px;
}

.bio-text-box li {
  flex: 1 0;
}


.bio-question-box {
  position: absolute;
  opacity: 1;
  transition: 1.6s ease-in;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bio-question-box.odd-box, .cv-header-box.odd-box {
   background-color: indigo;
}

.bio-question-box.even-box, .cv-header-box.even-box {
   background-color: #a25901;
}

.bio-question-box h3 {
    color: #efeac3;
}

.bio-question-box:hover {
    opacity: 0;
    transition: 1.2s;
}

.bio-image-box {
    width: 30%;
    display: flex;
    background-color: black;
}

.bio-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-separator {
    margin: 24px 0;
}

.cv-box-row {
    display: flex;
    flex-flow: column nowrap;
}

.cv-header-box {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
}

.cv-header-box .box-title {
  width: 70%;
  padding-left: 48px;
  display: flex;
  align-items: center;
  justify-content: left;
}

.cv-header-box h3 {
    color: #efeac3;
    margin: 0;
    text-align: left;
}

.cv-header-box .box-link {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-header-box a {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    color: #efeac3;
    text-align: center;
    border: 2px solid;
}

.cv-header-box .box-link a:hover {
    background-color: #2f3059;
    border-color: #9ec1d6;
}

.cv-description-box {
    width: 100%;
}

.cv-description-box p {
    padding: 6px 6px 6px 12px;
}


@media screen and (max-width: 960px) {
    
    .bio-box-row {
        max-height: none;
    }
   .bio-image-box {
       display:none;
    }
    
    .bio-text-box {
        width:100%;
    }   
    
    .cv-header-box .box-title {
      padding-left: 6px;
    }
    
    .cv-header-box h3 {
        padding-top: 2px;
    }
}

#cv-link {
  display: flex;
}

#cv-link a {
  margin-left: 12px;
  font-weight: bold;
  font-size: 21px;
  margin-top: -1px;
}

/**** contact form ******/

#post-3300 .gform-field-label.gform-field-label--type-sub {
  display: none;
}

#post-3300 #field_1_5 .ginput_container.ginput_container_textarea {
  margin-top: 28px;
}


/*****************************/

/* composition page */

.composition .video-container {
  margin-top: 24px;
}

.composition .button.download-score {
  display: inline-block;
}

.composition h2 {
  line-height: 1.2;
}

.composition-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.composition {
  flex: 0 0 auto;
  border: 2px solid #8585d0;
  margin-top: 24px;
  padding: 12px;
  border-radius: 12px;
  width: 100%;
}

.composition .video-container iframe {
  max-height: 200px;
}

@media screen and (min-width: 960px) {
    .composition {
      width: 48%;
    }
}

.composition .wp-audio-shortcode {
  margin: 12px 0 24px 0;
}

.composition .audio-title {
  margin-bottom: -8px !important;
}

/*******************************************/

/* performance archive */

.composition .wp-post-image {
margin: 0 auto;
display: block;
}

.middle-column {
width: 60%;
margin: 0 auto;
}

.middle-column h3 {
text-align: left;
}

.align-center {
text-align: center;
}

li li {
margin-left: 9px;
}

ul ul {
margin-bottom: 0;
}

/* --- Base Accordion Styling --- */

.composition-container .accordion-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.accordion-group {
  /* max-width: 500px; */
  overflow: hidden;
}

details {
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  width: 100%;
  margin: 9px;
}

@media screen and (min-width: 960px) {
    details {
      width: 48%;
    }
}

summary {
  padding: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* Hides default chrome arrow */
  transition: background-color 0.9s;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

summary:hover {
    background-color: #252c4a;
    transition: background-color 0.6s;
}

summary h2 {
    margin-right: 6px;
    text-align: left;
}

summary img {
    margin: 6px;
    max-width: 50%;
}

.post-type-archive-composition summary h4 {
    text-align: left;
    margin: 6px;
    width: 40%;
}
.post-type-archive-composition summary h2 {
    text-align: left;
    margin: 6px;
    width: 58%;
}

summary::-webkit-details-marker {
  display: none; /* Hides default safari arrow */
}

.accordion-group .downloads {
    margin-top: 24px;
    display: flex;
    flex-flow: row wrap;
}

.accordion-group .downloads .audio-title, .accordion-group .downloads audio {
  width: 100%;
}

/* --- The Animation Logic --- */

/* 1. Set the wrapper content container to a 0-row grid */
.accordion-group .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  padding: 0px 12px 24px 12px;
}

/* 2. When details tag gets the [open] state, expand the grid row to 1fr */
details[open] .content {
  grid-template-rows: 1fr;
}

/* 3. Force the inner wrapper to hide overflow so it clips during transition */
.inner-text {
  overflow: hidden;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(-10px);
}

/* 4. Trigger a keyframe to smoothly fade and position the text once open */
details[open] .inner-text {
  animation: revealText 0.25s ease-out 0.05s forwards;
}

@keyframes revealText {
  to {
    opacity: 1;
    transform: translateY(0);
    padding: 16px; /* Restores padding safely after expansion starts */
  }
}

/*****************************/

/* lessons archive */

pre {
	color: black;
}

.post-type-archive-lessons img {
	width: 100%;
}

.student-buttons .button {
    color: #f9f9e0 !important;
    border-color: #f9f9e0 !important;
}

.student-buttons .button:hover {
    color: #106177 !important;
}

.tablature {
font-family: "Courier New", sans-serif;
}

.lesson-youtube iframe {
    max-height: 250px !important;
}

.lesson-youtube .fluid-width-video-wrapper {
  padding-top: 20% !important;
}

.student-buttons {
  display: flex;
  flex-flow: row wrap;
}

.student-dropdown {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

select#paststudents {
  max-width: 250px;
  font-family: 'Afacad',sans-serif;
}

select#paststudents option {
  font-family: 'Afacad',sans-serif;
}

/* form styling */

.gfield_description {
padding-top: 0 !important;
}

/* gluetube */

.page-id-2362 header, .page-id-2413 header, .page-id-2350 header, .page-id-2530 header {
  background-image: url('https://thehouseofandersen.com/front-gate/wp-content/uploads/2024/09/gluetube-poster-tube-and-glue.png') !important;
background-size: 375px !important;
}

.page-id-2362 #branding {
position: sticky;
top: 0;
z-index: 9;
}

.page-id-2362 .gt-outer {
  z-index: -1;
  position: relative;
}

.gt-header {
display: flex;
flex-flow: row wrap;
justify-content: centre;

position: relative;
z-index: 1;
}

.gt-header div {
  text-align: center;
  width: 100%;
}

.gt-header a {
	font-size: 24px;
	transition: 0.4s;
	background-color: #ee2633;
}

.gt-header a:hover {
	transition: 0.4s;
	background-color: #e7b800;
}

.gt-outer {
display: flex;
flex-flow: row wrap;
}

.gt-container, .gt-img, .gt-desc {
width: 45%;
}

.gt-container {
  margin: 24px;
  border-radius: 18px;
  border: solid red 2px;
  padding: 19px;
border: 7px solid #e74100;
  background: #ffdfcb52;
}

.gt-programme-text h3 {
text-align: left;
font-size: 21px;
}

.gt-programme {
display: flex;
flex-flow: column nowrap;
}

.gt-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  margin: 9px auto;
  font-size: 16px;
font-weight:600;
text-align:left;
}

.gt-odd {
  border: 3px solid #126412;
  padding: 6px;
  border-radius: 12px;
  background-color: #e6f7ce;
}

.gt-even {
  border: 3px solid #6f0d0d;
  padding: 6px;
  border-radius: 12px;
  background-color: #f5f1dc;
}

.gt-group {
width: 15%;
}

.gt-act{
width: 30%;
}

.gt-pr-desc {
width: 55%;
}

@media screen and (max-width: 640px) {
.gt-row {
flex-flow: row wrap;
}
.gt-group {
width: 35%;
}
.gt-act{
width: 65%;
}
.gt-pr-desc {
width: 100%;
}
.gt-row > span {
padding: 9px;
}
}

.gt-container h2 {
  margin-bottom: 0;
}

.gt-imgblock {
display: flex;
flex-flow: row wrap;
}

.gt-desc {
  padding-left: 26px;
}

.gt-img img {
width: 93%;
}

@media screen and (max-width: 1050px) {
   .gt-container {
        width: 48%;
        margin: 1%;
   }
.gt-desc {
width: 50%;
}

}

@media screen and (max-width: 900px) {
   .gt-container {
        width: 98%;
        margin: 1%;
   }
.gt-desc {
width: 50%;
}

}

@media screen and (max-width: 900px) {
   .gt-container, .gt-img, .gt-desc {
width: 98%;
}
.gt-desc {
  padding-left: 0;
font-size: 17px;
}

.col-width{
padding: 0;
}
}

.gt-bold {
font-weight: 600;
}

.gt-red {
color: #ee2633;
}

.gt-border {
border: 2px solid #ee2633;
margin: 12px;
padding: 12px;
border-radius: 12px;
}

.gt-feature {
border: 7px solid #e7b800;
  background: #fff9cb;
}

.gt-manual {
border: 7px solid #799a63;
  background: #fdffe7;
}

.gt-center {
margin: 0 auto;
display: flex;
justify-content: center;
}

.gt-button-group {
display: flex;
align-items: center;
flex-flow: row wrap;
}

/* .gluetube h1, h2, h3, p, a, li {
   font-family: "Inria Sans", sans-serif;
} */

.gluetube h1, h2, h3 {
   text-align: center;
}

/* Scott edits */

.col-width {
  max-width: 1320px;
}

.button {
    margin: 0 12px 12px 0;
    border-radius: 9px;
    transition: 0.6s;
    border: 1px solid;
}

.chewton-button {
    background-color: #690a13;
}

.taradale-button {
    background-color: #2e520a;
}

.cps-button {
    background-color: #04bad8;
}

.elph-button {
    background-color: #be5202;
}

.campbells-button {
    background-color: #ca4fce;
}

.winters-button {
    background-color: #089d6c;
}

.button:hover {
    text-decoration: none;
    color: #106177;
    background-color: #dedede !important;
    transition: 0.6s;
}

.campbells-button:hover {
    color: #ca4fce;
background-color: #dedede !important;
}

.elph-button:hover {
    color: #be5202;
background-color: #dedede !important;
}

.chewton-button:hover {
    color: #690a13;
background-color: #dedede !important;
}

.taradale-button:hover {
    color: #2e520a;
background-color: #dedede !important;
}

.cps-button:hover {
    color: #04bad8;
background-color: #dedede !important;
}

.lesson-youtube {
  min-height: 220px;
}