/* Uncap the branding block so the logo can grow */
.site-branding{
  overflow: visible !important;      
  justify-content: flex-start !important;
  width: auto !important;            /* was 420px */
  min-width: 0 !important;           /* was 420px */
  max-width: none !important;        /* was 640px */
  margin-right: 0 !important;        /* kills the huge computed margin */
  flex: 0 0 auto !important;         /* size to contents, not a fixed basis */
}

/* Let the link and image size themselves */
.site-branding .custom-logo-link{ width:auto !important; height:auto !important; }
.site-branding img.custom-logo{
  width:auto !important;
  max-width:none !important;         /* remove the 250px ceiling */
  height:80px !important;            /* pick your size: 64/80/100px */
  display:block;
}


.custom-header-content-wrapper, #feature-slider-section .entry-container {
    width: auto;
}


/* 1) Treat the header row as a flex line (hit common wrappers) */
.site-header .wrapper,
#masthead .wrapper,
.site-header .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* keep on one line */
  box-sizing: border-box;
}

/* 2) Push everything after the logo to the RIGHT */
.site-branding {
  margin-right: auto !important;   /* ← this alone right-aligns the menu */
  min-width: 0;                     /* allow shrinking */
}

/* 3) Make the logo big on desktop but shrink as space tightens */
.site-branding img.custom-logo {
  display: block;
  height: clamp(44px, 8vw, 100px);  /* adjust the max (100px) to taste */
  width: auto;
  max-width: 60vw;                  /* don’t let it swallow the row */
}

/* Keep nav from hogging width and preserve right alignment */
.site-header nav,
.site-header .main-navigation,
.site-header .menu-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 0;
}



/* Remove theme caps and size by height */
#masthead .site-branding .custom-logo-link img.custom-logo,
.site-header .site-branding .custom-logo-link img.custom-logo,
.site-branding .custom-logo-link img.custom-logo {
  height: clamp(48px, 9vw, 120px) !important; /* pick a max you like */
  width: auto !important;
  max-height: none !important;                 /* kill 31.25px / 100px caps */
  max-width: none !important;                  /* kill 250px cap */
  display: block;
}

/* If the theme is sizing the LINK, release it */
.site-branding .custom-logo-link {
  height: auto !important;
  width: auto !important;
  line-height: 0 !important;                   /* prevents line-height squeezing */
}

/* Safety: if your logo is an SVG */
.site-branding .custom-logo-link svg {
  height: clamp(48px, 9vw, 120px) !important;
  width: auto !important;
  max-height: none !important;
}



/* For single page site */
body.home header.entry-header{
	display:none;
}
.custom-header-overlay{
	display:none;
}
#site-header-menu{
	display:none;
}
.site-header .wrapper,
#masthead .wrapper,
.site-header .container {
	justify-content: center;
}
.site-branding{
	margin-right: 0 !important;
}

.custom-header-content{
	z-index: 0;
}
.custom-header-content::after {
	z-index: -1;
  content: "";
  background: url('https://wiredforruin.com/wp-content/uploads/2025/09/cropped-cover-art_situation_escalating.jpg') no-repeat center / cover;
  position: absolute;
	display:block;
	width: 200px;
	height: 200px;
	right: 50px;
	top: 50px;  
}
.section-title, .site-header-text{
/* 	max-width: calc(100% - 250px); */
	z-index: 100;
}

/* MERCH */
.merch-block{
}
.merch-block a{
	text-decoration:none !important;
}
/*  EVENTS */
#tribe-events-footer{
	clear:both;
}


@media screen and (max-width: 970px) {
	.header-media-section {
		justify-content: center;
	}
	.custom-header-content.content-align-left .custom-header-content-wrapper{
		text-align:center;
		margin: 2em 0;
	}
 
	.custom-header-content::after{
		position: relative;
		right:auto;
		top: auto;
		width: 500px;
		height: 500px;
		margin: 30px auto;
	}
}