/*~~ HOITB CSS ~~*/ 

@media (max-width: 1024px) {
  .custom-stack {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

body {
   /* 1. Default Mobile Image (loads first) */
  background-image: url("https://hoitb.co.uk/images/hoitb-curtains-x-small.jpg")!important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center!important;
}

/* 2. Tablet Size (e.g., 481px and up) */
@media (min-width: 481px) {
  body { 
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-small.jpg")!important;
  }
}

/* 2. Tablet Size (e.g., 1025px and up) */
@media (min-width: 1033px) {
  body { 
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-1200w.jpg")!important;
  }
}

/* 3. Large Desktop (e.g., 1200px and up) */
@media (min-width: 1200px) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-1920w.jpg")!important;
  }
}

/* 4. Ultra-Wide / 4K (e.g., 2560px and up) */
@media (min-width: 2560px) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-2560w.jpg")!important;
  }
}

@media (min-width: 1200px) and (min-resolution: 192dpi) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-3840w.jpg")!important; /* Load 4k image for high-res desktops */
  }
}

/* 5K Resolution (5120px) */
@media (min-width: 5120px) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-5120w.jpg")!important;
  }
}

/* 6K Resolution and up (6144px) */
@media (min-width: 6144px) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-6144w.jpg")!important;
  }
}

/* HIGH-DENSITY OPTIMISATION (Retina 5K) */
/* Targets 5K screens even if the browser window is scaled (DPR of 2.0+) */
@media (min-width: 2560px) and (min-resolution: 2dppx) {
  body {
    background-image: url("https://hoitb.co.uk/images/hoitb-curtains-crystal-palace-5120w.jpg")!important;
  }
}

.container-header, .footer { 
   /* 1. Default Mobile Image (loads first) */
  background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-800w.jpg")!important;
  background-color: #55372c!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background-size: cover!important;
  width:100%;
  height:auto;
}

/* 2. Tablet Size (e.g., 768px and up) */
@media (min-width: 768px) {
   .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-1200w.jpg")!important;
  }
}

/* 3. Large Desktop (e.g., 1200px and up) */
@media (min-width: 1200px) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-1920w.jpg")!important;
  }
}

/* 4. Ultra-Wide / 4K (e.g., 2560px and up) */
@media (min-width: 2560px) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-2560w.jpg")!important;
  }
}

@media (min-width: 1200px) and (min-resolution: 192dpi) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-3840w.jpg")!important; /* Load 4k image for high-res desktops */
  }
}

/* 5K Resolution (5120px) */
@media (min-width: 5120px) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-5120w.jpg")!important;
  }
}

/* 6K Resolution and up (6144px) */
@media (min-width: 6144px) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-6144w.jpg")!important;
  }
}

/* HIGH-DENSITY OPTIMISATION (Retina 5K) */
/* Targets 5K screens even if the browser window is scaled (DPR of 2.0+) */
@media (min-width: 2560px) and (min-resolution: 2dppx) {
  .container-header, .footer { 
    background-image: url("https://hoitb.co.uk/images/hoitb-speakereasy-background-5120w.jpg")!important;
  }
}

li.dj-up.itemid101 { display:none; }

html { oveflow-x:hidden; min-height: 100%; background-color:#52362a; padding:0; margin:0; }
body { oveflow-x:hidden; min-height: 100vh; background-color:#52362a; padding:0; margin:0; }
body.wrapper-fluid header > .grid-child { padding-left: 2vw; padding-right: 2vw; padding-top: .75vw; padding-bottom: .75vw; }

:root, [data-bs-theme="light"] { --body-color: #59473f; }

.container-header { height:6.25vw; }

.layout { 
  padding-left: 2vw;
  padding-right: 2vw;
  oveflow-x:hidden; 
  min-height: 100%;
  padding-bottom:3vw;
  padding-top:4vw;
}

.layout .row { min-height: 53vh; --gutter-x: 2.5em!important; }

a { color:#847746; font-weight:600; text-decoration:none!important; }
a:hover { color:#59473f; }

.breaks img { width:100%; height:100%; }
 
#mod-custom118.mod-custom.custom p { position: relative; } 

video {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
  max-width: 100%!important; 
  background: #f2f2f2!important; }
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

button#audio-toggle {
    /* Dimensions from your original code */
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 3vw;
    border: .15rem solid #847746;
    position: relative;
    top: -.15vw;
    
    /* Center the SVG icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Background Image Setup */
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: .9vw; /* Matches your old icon font-size */
    
    /* Default Image (Play) */
    background-image: url('https://hoitb.co.uk/images/play.svg'); 
    
    cursor: pointer;
    transition: background-color 0.2s;

   --btn-border-radius: 2vw!important;
    --btn-padding-x: 0rem!important;
    --btn-padding-y: 0rem!important;
}

/* Active/Playing State (Pause) */
button#audio-toggle.playing {
    background-image: url('https://hoitb.co.uk/images/pause.svg');
}

.banner-copy {
  position: relative;
  height: 100%;
  width: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.blog-featured {  }
.blog-items.items-leading {  margin-bottom:0; } 

.layout .row .col-lg-4 .flash img { width:auto!important; margin-top:2em; }


h1, .h1 { font-size: 2.4vw!important; color:#847746; font-weight:500!important; text-align:center; margin-top: 2vw; margin-bottom: 0; margin-left:6vw; margin-right:6vw; }
h2, .h2 { font-size: 1.6vw!important; color:#847746; font-weight:500!important; }
h3, .h3 { font-size: 1.8vw; color: var(--body-color); font-weight:500!important; margin-top: 1vw; margin-bottom: 1vw;  }
h4, .h4 { font-size: 1.3vw; color:#847746; font-weight:500!important; margin-bottom:0; }

.bakery p { font-size:.95vw!important; margin-top:0!important; }
.bar p { font-size:.95vw!important; }
.breaks p { font-size:1.2vw!important; }
.breaks { margin-top:-2vw; }
.breaks h3 { color:#847746!important; margin-top: 0!important; margin-bottom: .5vw!important; font-size:1.4vw!important; }

.bar { margin-top:2vw; }
.bakery { margin-top:2vw; }

.dj-megamenu-wrapper { min-width:100%; }
li.dj-up.itemid118.first { min-width:25%; }
li.dj-up.itemid118.first a.dj-up_a { padding-left:0!important; }
li.dj-up.itemid0.logo { min-width:100%; }
li.dj-up.itemid0.logo a.dj-up_a span img.dj-icon { margin-left:auto; margin-right:auto; max-height: 4.5vw; margin-top: .15vw; }
li.dj-up.itemid120 { min-width:25%; }
li.dj-up.itemid120 a.dj-up_a { padding-right:0!important; float: right; }

#dj-megamenu110 li a:hover.dj-up_a { color:#dacead!important; }
.dj-megamenu-clean li a.dj-up_a { font-size: 1.2em!important; font-weight: 500!important; }

.dj-megamenu-clean li a.dj-up_a { height: 4em!important; }
.dj-megamenu-clean li a.dj-up_a > span { height: 4em!important; }

.container-component > * + * { margin-top: 0em; background-color: #efdebf; }

body.wrapper-fluid .site-grid { grid-gap: 0 12%; }

.footer { margin-top:0px; }

.footer .grid-child { padding: 1vw .5vw; }
.footer1 { font-size:.95vw!important; color: #efdebf; text-align: center;  }
.footer.no-card { margin-left:auto!important; margin-right:auto!important; }
.footer2 { display:none; }

@media (max-width: 1680px) {
  .layout .row { min-height: 52vh; }
}

@media (max-width: 1600px) {
  .layout .row { min-height: 50vh; }
  li.dj-up.itemid0.logo a.dj-up_a span img.dj-icon { max-height: 4em; margin-top: 0; }
  body.wrapper-fluid header > .grid-child { padding-left: 2em; padding-right: 2em; padding-top: .75em; padding-bottom: .75em; }
 .container-header { height:6.25em; }
 body.wrapper-fluid .site-grid { grid-gap: 0 10%; }
 .breaks p a img { width: 2.4rem!important; height: 2.4rem!important; }
  h1, .h1 { margin-left:8vw; margin-right:8vw; }
  h2, .h2 { font-size: 1.8vw !important; }
  .breaks h3 { font-size: 1.6vw !important; }
  .bakery p { font-size: 1.1vw !important; }
  .bar p { font-size: 1.1vw !important; }
  .breaks p { font-size: 1.1vw !important; }
  .footer1 { font-size: 1.1vw !important; }
  h3, .h3 { font-size: 2vw; }
  .layout { padding-top:4.55vw; }
  button#audio-toggle { width: 1.75vw; height: 1.75vw; border-radius: 3.5vw; background-size: .95vw; }
}

@media (max-width: 1366px) {
  .layout .row { min-height: 57vh; }
}

@media (max-width: 1366px) and (min-height: 1024px) {
  h1, .h1 { margin-top: 6vw!important; }
}

@media (max-width: 1280px) {
  .layout { padding-bottom:3vw; padding-top:5vw; }
  body.wrapper-fluid .site-grid { grid-gap: 0 7%; }
  h1, .h1 { font-size: 2.6vw !important; }
  h3, .h3 { font-size: 2.2vw; }
  h2, .h2 { font-size: 2vw !important; }
  .breaks h3 { font-size: 1.7vw !important; }
  .bakery p { font-size: 1.2vw !important; }
  .bar p { font-size: 1.2vw !important; }
  .breaks p { font-size: 1.2vw !important; }
  .footer1 { font-size: 1.2vw !important; }
  .layout .row { --gutter-x: 1.5em!important; }
  button#audio-toggle { width: 2vw; height: 2vw; border-radius: 6vw; background-size: 1vw; }
}

@media (max-width: 1376px) and (min-height: 1032px) {
  h1, .h1 { margin-top: 9vw!important; }
}

@media (max-width: 1032px) and (max-height: 1376px) {
  h1, .h1 { margin-top: 6vw!important; }
  .custom-stack { flex: 0 0 100%; max-width: 100%!important; }
    h1, .h1 { font-size: 2rem !important; margin-top: 1.5rem; margin-left: 1rem; margin-right: 1rem; }
  h2, .h2 {font-size: 1.8rem !important; }
  h3, .h3 { font-size: 1.6rem; margin-top: 1rem; margin-bottom: 1rem; }
  .bakery { margin-top: 0; }
  .layout { padding-top: .75rem; padding-left: 1em; padding-right: 1em;}
  .bakery p { font-size: 1.2rem !important; }
  .bar p { font-size: 1.2rem !important; }
  .breaks p { font-size: 1.2rem !important; }
  .footer1 { font-size: 1.2rem !important; }
  .breaks { margin-top: .75rem; }
  .breaks h3 {font-size: 1.8rem !important; }
  .breaks p { font-size: 1.2rem !important;  margin-top: 1rem; text-align:center!important;  }
  .breaks img { width: 80%; height: 80%; }
  .footer .grid-child .mod-footer { margin: 1rem 1rem; }
  button#audio-toggle { width: 1.8rem; height: 1.8rem; border-radius: 3.6rem; background-size: 1rem; }
}

@media (max-width: 1180px) and (max-height: 820px) {
  h1, .h1 { margin-top: 5vw!important; }
}

@media (max-width: 1194px) and (max-height: 834px) {
  h1, .h1 { margin-top: 4.5vw!important; }
}

@media (max-width: 1024px) {
  .layout .row { min-height: 100%; }
  body.wrapper-fluid .site-grid { grid-gap: 0 12%; }
  h1, .h1 { font-size: 2rem !important; margin-top: 1.5rem; margin-left: 1rem; margin-right: 1rem; }
  h2, .h2 {font-size: 1.8rem !important; }
  h3, .h3 { font-size: 1.6rem; margin-top: 1rem; margin-bottom: 1rem; }
  .bakery { margin-top: 0; }
  .layout { padding-top: .75rem; padding-left: 1em; padding-right: 1em;}
  .bakery p { font-size: 1.2rem !important; }
  .bar p { font-size: 1.2rem !important; }
  .breaks p { font-size: 1.2rem !important; }
  .footer1 { font-size: 1.2rem !important; }
  .breaks { margin-top: .75rem; }
  .breaks h3 {font-size: 1.8rem !important; }
  .breaks p { font-size: 1.2rem !important;  margin-top: 1rem; text-align:center!important;  }
  .breaks img { width: 80%; height: 80%; }
  .footer .grid-child .mod-footer { margin: 1rem 1rem; }
  button#audio-toggle { width: 1.8rem; height: 1.8rem; border-radius: 3.6rem; background-size: 1rem; }
}

@media (max-width: 1032px) {
  h4, .h4 { font-size: 1.3rem; margin-top:1.5rem; }
}

@media (max-width: 768px) {
  h4, .h4 { font-size:1.15rem; }
}

@media (max-width: 600px) {
  .container-header { height: 5.25em; }
  body.wrapper-fluid .site-grid { grid-gap: 0 7%!important; }
  body.wrapper-fluid header > .grid-child { padding-top: .25em; padding-bottom: .25em; }
  li.dj-up.itemid0.logo a.dj-up_a span img.dj-icon { max-height: 3em; }
  h1, .h1 { font-size: 4.2vw!important; margin-top: 1.5rem; margin-left: 1rem; margin-right: 1rem; }
  h2, .h2 {font-size: 4.2vw !important; }
  h3, .h3 { font-size: 3.6vw; margin-top: 1rem; margin-bottom: 1rem; }
  h4, .h4 { font-size: 4.2vw; }
  .bakery { margin-top: 0; }
  .layout { padding-top: .75rem; padding-left: 1em; padding-right: 1em;}
  .breaks { margin-top: .75rem; }
  .breaks h3 {font-size: 4.2vw !important; }
  .breaks img { width: 80%; height: 80%; }
  .bakery p { font-size: 3vw !important; }
  .bar p { font-size: 3vw !important; }
  .breaks p { font-size: 3vw !important; }
  .footer1 { font-size: 3vw !important; }
  button#audio-toggle { width: 4.2vw; height: 4.2vw; border-radius: 8vw; background-size: 2.4vw; }
}

@media (max-width: 480px) {
  .container-header { height: 5.25em; }
  body.wrapper-fluid .site-grid { grid-gap: 0 2em!important; }
  body.wrapper-fluid header > .grid-child { padding-top: .25em; padding-bottom: .25em; }
  li.dj-up.itemid0.logo a.dj-up_a span img.dj-icon { max-height: 3em; }
  h1, .h1 { font-size: 6vw!important; margin-top: 1.5rem; margin-left: 1rem; margin-right: 1rem; }
  h2, .h2 {font-size: 5.7vw !important; }
  h3, .h3 { font-size: 4.2vw; margin-top: 1rem; margin-bottom: 1rem; }
  h4, .h4 {font-size: 5vw !important; }
  .bakery { margin-top: 0; }
  .layout { padding-top: .75rem; padding-left: 1em; padding-right: 1em;}
  .breaks { margin-top: 0; padding-bottom:1rem; }
  .breaks h3 {font-size: 5.7vw !important; }
  .breaks img { width: 80%; height: 80%; }
  .bakery p { font-size: 4vw !important; }
  .bar p { font-size: 4vw !important; }
  .breaks p { font-size: 5vw !important; }
  .footer1 { font-size: 3vw !important; }
  button#audio-toggle { width: 5.7vw; height: 5.7vw; border-radius: 11.4vw; background-size: 3.6vw; margin-top: -.5vw; }
}

@media (max-width: 390px) {
  h4, .h4 { font-size: 4.5vw !important; }
}