/* =========================================================
   GLOBAL
   ========================================================= */

.wp-block-cover {
  height: 100vh;
  width: 100vw;
	!important;
}

/* Buttons */
.wp-block-button__link {
  background-color: #303eae;
  border-radius: 3px !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-radius 0.2s ease;
}

.wp-block-button__link:hover {
  background-color: #4554cc;
  color: #ffffff;
}



/* Jetpack Subscribe button specifically */
button.wp-block-button__link.no-border-radius {
  border-radius: 3px !important;
}

/* =========================================================
   HERO UNDER HEADER (SMART SLIDER 3)
   ========================================================= */

/* 1. Make header sit on top of hero */
header.wp-block-group {
 /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
	/*height: 100%:*/
  z-index: 1000;

 /* background: transparent !important;*/
}

/* Remove any background from inner header containers */


/* 2. Pull hero up behind header */
.home ss3-force-full-width {
  margin-top: 120px; /* adjust based on header height */
  padding-top: 100px; /* keeps content aligned */
	
}

/* 3. Ensure slider content doesn’t hide under header */
.home .n2-ss-slide-inner {
  padding-top: 0px;
}

/* =========================================================
   TABLET PORTRAIT = USE MOBILE NAV SYSTEM
   ========================================================= */
@media (min-width: 768px) and (max-width: 1048px) and (orientation: portrait) {

  /* Force WordPress nav into mobile mode */
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Ensure hamburger icon is visible */
  .wp-block-navigation__responsive-container-open {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Prevent desktop layout from overriding mobile behavior */
  .wp-block-navigation:not(.has-modal-open) {
    flex-direction: row !important;
  }
}
}
/* Dropdown hover / focus highlight */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: rgba(69, 84, 204, 1);
  color: #ffffff;
  border-radius: 3;
}
/* =========================================================
   TABLET LANDSCAPE = EXACT DESKTOP HEADER LAYOUT
   ========================================================= */
@media (min-width: 768px) and (max-width: 1481px) and (orientation: landscape) {

  header.wp-block-group.alignwide.wp-block-group-is-layout-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Prevent logo/nav/button stacking */
  header.wp-block-group.alignwide.wp-block-group-is-layout-flex > .wp-block-group {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Navigation stays inline */
  header .wp-block-navigation {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Ensure button stays inline with nav */
  header .wp-block-buttons,
  header .wp-block-button {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
}

/* =========================================================
   HEADER NAV – FORCE BLACK TEXT
   ========================================================= */

/* Site title / logo text (if text-based) */
header.wp-block-group .wp-block-site-title a,
header.wp-block-group .wp-block-site-logo + 


/* Hover state (keep your brand color) */
header.wp-block-group .wp-block-navigation a:hover,
header.wp-block-group .wp-block-navigation-item__content:hover {
  color: #303eae !important;
}

/* =========================================================
   SPONSOR CARDS (logo sizing)
   ========================================================= */

.sponsor-grid .sponsor-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.sponsor-grid .sponsor-card img {
  height: 80px !important;     /* <-- change this number */
  width: auto !important;
  max-height: 100% !important;
  max-width: 90% !important;
  object-fit: contain;
  display: block;
}


/* =========================================================
   COBLOCKS FEATURE IMAGE (zoom hover)
   ========================================================= */

.wp-block-coblocks-feature .wp-block-image {
  overflow: hidden;
}

.wp-block-coblocks-feature .wp-block-image img {
  transform: scale(1);
  transition: transform 0.4s ease;
}

.wp-block-coblocks-feature .wp-block-image:hover img {
  transform: scale(1.08);
}


/* =========================================================
   JETPACK TILED GALLERY (consistent gutters)
   ========================================================= */

.wp-block-jetpack-tiled-gallery {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.wp-block-jetpack-tiled-gallery .tiled-gallery__gallery {
  padding: 0 24px;
  box-sizing: border-box;
}

.wp-block-jetpack-tiled-gallery .tiled-gallery__row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   SECTION: #bBlocksTestPurpose-3 (Fancy Cards / Grid)
   ========================================================= */

/* Height control */
#bBlocksTestPurpose-3 { --fancy-card-height: 600px; }

@media (max-width: 1024px) { #bBlocksTestPurpose-3 { --fancy-card-height: 360px; } }
@media (max-width: 640px)  { #bBlocksTestPurpose-3 { --fancy-card-height: 280px; } }

/* Grid layout */
#bBlocksTestPurpose-3 .fancy-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px !important;

  /* Contains layout/paint so updates don’t ripple up the page */
  contain: layout paint;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
  #bBlocksTestPurpose-3 .fancy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: 1 column + shrink text */
@media (max-width: 640px) {
  #bBlocksTestPurpose-3 .fancy-grid {
    grid-template-columns: 1fr;
  }

  #bBlocksTestPurpose-3 .fancy-card-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  #bBlocksTestPurpose-3 .fancy-card-tag {
    font-size: 12px !important;
  }
}

/* Card sizing + clipping + builder overrides */
#bBlocksTestPurpose-3 .fancy-card {
  height: var(--fancy-card-height);
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;

  position: relative;
  overflow: hidden;

  /* Paint isolation + compositor hints (helps scroll smoothness) */
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* Fallback (when view-timeline isn't supported): keep visible */
  opacity: 1;
  transform: none;
}

/* Image layers respect card height */
#bBlocksTestPurpose-3 .fancy-card-imgWrapper,
#bBlocksTestPurpose-3 .fancy-card-figure {
  height: 100%;
}

/* Background image scaling */
#bBlocksTestPurpose-3 .fancy-card-figure {
  background-size: cover;
  background-position: center;
}

/* Overlay locked to card bounds */
#bBlocksTestPurpose-3 .fancy-card-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* Prevent inherited transforms (and keep composited) */
  transform: translateZ(0) !important;
  backface-visibility: hidden;

  transition: opacity 0.3s ease;
}

#bBlocksTestPurpose-3 .fancy-card:hover .fancy-card-overlay {
  transform: translateZ(0) !important;
}

/* Content anchored to bottom */
#bBlocksTestPurpose-3 .fancy-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}


/* =========================================================
   SECTION: #bBlocksTestPurpose-3 ANIMATION (Viewport wave)
   ========================================================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #bBlocksTestPurpose-3 .fancy-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@supports (animation-timeline: view()) {

  #bBlocksTestPurpose-3 .fancy-card {
    /* Start the timeline EARLIER (prevents "hit bottom → hitch") */
    view-timeline-inset: 0 0 80vh 0;

    opacity: 0;
    transform: translate3d(var(--wave-x, 0px), 70px, 0);

    animation: bthWaveInClean 1s cubic-bezier(.22, 0, .3, .5) forwards;
    animation-timeline: view();

    /* Finish sooner to reduce scroll work */
    animation-range: entry 0% entry 60%;
  }

  /* Keep will-change only on desktop to avoid memory pressure jank */
  @media (min-width: 1025px) {
    #bBlocksTestPurpose-3 .fancy-card {
      will-change: transform, opacity;
    }
  }
  @media (max-width: 1024px) {
    #bBlocksTestPurpose-3 .fancy-card {
      will-change: auto;
    }
  }

  /* Stagger wave */
  #bBlocksTestPurpose-3 .fancy-card:nth-child(1) { --wave-x: -60px; animation-delay: 0.25s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(2) { --wave-x: -36px; animation-delay: 0.50s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(3) { --wave-x: -12px; animation-delay: 0.75s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(4) { --wave-x:  12px; animation-delay: 1.00s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(5) { --wave-x:  36px; animation-delay: 1.25s; }
  #bBlocksTestPurpose-3 .fancy-card:nth-child(6) { --wave-x:  60px; animation-delay: 1.50s; }

  @keyframes bthWaveInClean {
    from { opacity: 0; transform: translate3d(var(--wave-x, 0px), 80px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}


/* =========================================================
   IMPORTANT: KEEP THIS AT VERY BOTTOM
   Fix horizontal scroll caused by animations on mobile
   ========================================================= */

@media (max-width: 768px) {
  #bBlocksTestPurpose-3,
  #bBlocksTestPurpose-3 .container,
  #bBlocksTestPurpose-3 .fancy-grid {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Kill horizontal drift on mobile */
  #bBlocksTestPurpose-3 .fancy-card {
    --wave-x: 0px !important;
  }

  /* Extra guard */
  #bBlocksTestPurpose-3 .fancy-card,
  #bBlocksTestPurpose-3 .fancy-card * {
    max-width: 100% !important;
  }
	
}
.home .n2-ss-slider {
  position: relative;
  margin-top: -230px;
	width: 100%
}

/* =========================================================
   DROPDOWN HOVER - SOFT WHITE GLASS EFFECT
   ========================================================= */

.wp-block-navigation__submenu-container 
.wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container 
.wp-block-navigation-item__content:focus {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  color: #100eae !important;
  font-weight: 600;

  border-radius: 3px;
}
/* =========================================================
   DROPDOWN CONTAINER - FULLY TRANSPARENT
   ========================================================= */

.wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: none !important; /* removes floating white box feel */
}
#n2-ss-4 .n2-ss-slide-background-color {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.99999999) %,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0) .99%
  ) !important;
}
header.wp-block-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
/* =========================================================
   MAIN NAV - TRANSPARENT BACKGROUND
   ========================================================= */

.wp-block-navigation {
  background: transparent !important;
	
  background-color: transparent !important;
}

/* Also target the inner container (WordPress loves nesting) */
.wp-block-navigation__container {
  background: transparent !important;
}

/* Responsive menu (mobile overlay) */
.wp-block-navigation__responsive-container {
  background: transparent !important;
}
/* CONTROL SPACE UNDER SMART SLIDER */
.home .n2-section-smartslider,
.home ss3-force-full-width {
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}

/* kill extra bottom spacing Smart Slider sometimes injects */
.home .n2-ss-slider-wrapper-outside {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* =========================================================
   BIGGER HAMBURGER CLICK AREA
   ========================================================= */

.wp-block-navigation__responsive-container-open {
  padding: 14px 14px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
}
/*.bpl-scfbs {
  cursor: url('https://bandofthehills.org/wp-content/uploads/2026/04/pngwing.com_.png'), pointer !important;
*/

/* ========================================================= 
   BUGFIX PASS - 2026-07-26 
   ========================================================= */

/* Footer BOTH watermark: var(--bh-sans) was undefined, causing fallback
   to a generic system font. Use the real brand display font. */
.bh-foot .watermark {
  font-family: var(--font-d) !important;
}

/* Footer links + gallery caption links were inheriting WordPress core's
   default near-black link color on our dark background (unreadable).
   Restore the light text color used everywhere else on the site. */
footer a {
  color: var(--paper-dim) !important;
}
.gcard, .gcard * {
  color: var(--paper) !important;
}

/* Nav dropdown hover: three separate rules were fighting each other
   (light glass background + assorted text colors = poor contrast).
   Consolidate into one clear, high-contrast state. */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background: var(--blue-deep) !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-weight: 600;
  border-radius: 3px !important;
}

/* Restore the mountain + treble-clef crest in the "Beyond the concert
   hall" (ensembles) visualizer panel, centered over the sunburst canvas. */
#vizPanel { position: relative; }
#vizPanel .ens-crest {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
/* Correction: watermark is footer > div.watermark, not .bh-foot .watermark */
footer .watermark {
  font-family: var(--font-d) !important;
}


/* ========================================================= 
   BUGFIX PASS 2 - 2026-07-26 
   ========================================================= */

/* Footer link columns ("hero links"): remove default bullet points,
   swap the label/link fonts, and reverse the size hierarchy so the
   column labels (Band, Membership, Connect) read large and the
   individual links read smaller. */
footer .foot-grid > div > ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
footer .foot-grid > div h4 {
  font-family: 'Nunito', sans-serif !important;
  font-size: 20px !important;
}
footer .foot-grid > div ul li a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
}

/* ========================================================= 
   BUGFIX PASS 3 - 2026-07-26 
   ========================================================= */

/* Beyond the Concert Hall: guarantee the crest (Mixed/default icon)
   hides whenever another ensemble tag is hovered, and only shows
   for the default/idle state or when 'Mixed' itself is hovered. */
#vizPanel .ens-crest {
  transition: opacity 0.2s ease;
}
section.ens .wrap:has(.groups .group:hover) #vizPanel .ens-crest {
  opacity: 0 !important;
}
section.ens .wrap:has(.groups .group[data-inst="mixed"]:hover) #vizPanel .ens-crest {
  opacity: 1 !important;
}

/* ========================================================= 
   BUGFIX PASS 4 - 2026-07-26 
   ========================================================= */

/* Dark seam between sections: the 32px section-to-section gap was
   pure margin, exposing the plain body background as a visible
   dark line wherever the next section has its own (lighter) bg.
   Convert to padding so each section's own background fills the
   gap instead, keeping the same rhythm with no seam. */
section:not(.season) {
  margin-top: 0 !important;
  padding-top: 32px !important;
}

/* remove underlines from links except footer */
a:not(footer a) { text-decoration: none !important; }