/*
  Consolidated stylesheet: main.css
  Merged from: styles.css, styles2.css, styles_indexnew.css, styles_index2
  Order applied: styles.css (base) -> styles2.css (music overrides) -> styles_indexnew.css (index overrides) -> styles_index2 (additional index variants)
*/

/* ------------------ Begin styles.css (base) ------------------ */
@font-face {
  font-family: 'MilkyVintage';
  src: url('../fonts/MilkyVintage-Regular.ttf') format('truetype');
}

/* Load Bebas Neue for headlines and subtext where requested */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #4eabf8;
  background-image: url('../pics/clouds/Blue Sky.png');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #333;
  min-height: 100vh;
}

header {
  background-color: #aa0000;
  padding: 16px 0;
  font-family: 'MilkyVintage', Arial, sans-serif;
  width: 100vw;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 2000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: hidden;
}

.page-links {
  display: flex;
}

.page-links a {
  color: #e3c758;
  text-decoration: none;
  margin: 0 10px;
  font-size: 36px;
  font-family: 'MilkyVintage', Arial, sans-serif;
}

.page-links a.active {
  color: white;
}

.page-links a:hover {
  color: white;
}

.social-icons {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.social-icons a {
  color: white !important;
  margin: 0 1px;
  font-size: 14px;
}

.social-icons a:nth-child(3) {
  margin-right: 8px;
}

.social-icons a:nth-child(6) {
  margin-right: 8px;
}

.social-icons .bitcoin-icon {
  color: #e3c758 !important;
  margin-left: 1px;
}

.hamburger {
  display: none; /* hide hamburger on desktop; shown on small screens via media queries below */
  cursor: pointer;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
}

.nav-menu {
  display: none;
}

.nav-menu.active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #aa0000;
  padding: 16px 0;
  text-align: center;
  box-sizing: border-box;
  z-index: 1000;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  padding: 10px 0;
}

.nav-menu a {
  color: #e3c758;
  text-decoration: none;
  margin: 10px 0;
  font-size: 28px;
  font-family: 'MilkyVintage', Arial, sans-serif;
}

.nav-menu a.active {
  color: white;
}

.nav-menu a:hover {
  color: white;
}

main {
  padding: 0;
  padding-bottom: 80px;
}

.hero-banner {
  position: relative;
  width: 100vw;
  height: 50vh;
  min-height: 300px;
  max-height: 600px;
  margin: 0;
  padding: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 20%;
  filter: brightness(52%) contrast(110%);
  display: block;
}

.hero-logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  max-width: 350px;
  height: auto;
  filter: drop-shadow(0 0 3px #000000);
}

.content {
  padding: 32px;
  text-align: center;
}

.tagline-box {
  background-color: #aa0000;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 10px auto;
  width: 700px;
  .video-column:nth-child(2) { margin-top: 30px; }
  .video-column:nth-child(3) { margin-top: -10px; }
  /* Pull final box up a bit and tighten visualizers bottom gap */
  .video-column:nth-child(3) .video-carousel { margin-bottom: 6px; }
  .video-column:nth-child(4) { margin-top: -6px; }
}

.tagline-box p {
  color: #e3c758;
  font-family: 'MilkyVintage', Arial, sans-serif;
  font-size: 24px;
  margin: 0;
  line-height: 1.5;
  font-weight: normal;
  letter-spacing: 1px;
  text-align: center;
}

/* Site-wide page title style: use MilkyVintage and header yellow */
.page-title, h1.page-title, h2.page-title {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
  font-size: 48px;
  margin: 0 0 12px 0;
  line-height: 1.05;
  text-align: center;
}

/* Map legacy/other title classes to the same headline style */
.discography-headline, h1.discography-headline, h2.discography-headline,
.videography-headline, h1.videography-headline {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
  font-size: 64px;
  margin: 0 0 24px 0;
  line-height: 1.05;
  text-align: center;
}

/* Subtext style: Bebas Neue and white color */
.subtext, .lead, p.lead {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 20px;
  margin: 0 0 12px 0;
  text-align: center;
  letter-spacing: 1px;
}

/* Map common site paragraphs to subtext where appropriate */
.credit-text, .bio-text, p.credit-text, p.bio-text {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 18px;
  margin: 6px 0 12px 0;
  text-align: center;
  letter-spacing: 1px;
}

/* Contact & form fields: Bebas Neue for labels and descriptive text; inputs styled separately */
.contact-text, .contact-label, .contact-box p, .contact-box label {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
}

/* Support page uses .contact-text already; ensure sizing */
.contact-text {
  font-size: 18px;
  line-height: 1.4;
}

/* Bitcoin page: donation/subtext Bebas; titles MilkyVintage + yellow */
.btc-donation-text, .btc-bio-text {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 18px;
}

.btc-video-title, .sathub-title {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
  font-size: 36px;
  margin: 8px 0;
  text-align: center;
}

/* Credits page: intro and album/video titles */
.credits-intro {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
}

.album-title, .video-title-credits {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
}

/* Section headings (Albums, Singles, Music Videos, Pre-2018 Albums) */
.albums-headline {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
  font-size: 72px;
  margin: 28px 0 28px 0;
  text-align: center;
}

/* Ensure credits list descriptions use Bebas Neue */
.credits-list, .credits-list li {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 16px;
}

/* Credits page layout: album grid and album item styles */
.album-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 22px;
  max-width: 1100px;
  margin: 6px auto 20px;
  justify-content: center;
}
.album-grid .album-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #aa0000;
  padding: 12px 14px; /* make top/bottom padding even */
  justify-content: flex-start;
  border-radius: 10px;
  border: 2px solid #000;
  box-sizing: border-box;
  width: calc(33.333% - 22px);
  min-width: 240px;
}
.album-art-credits {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  border: 4px solid #aa0000;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.album-box .credits-list { text-align: center; margin: 0; padding: 0; list-style: none; }
.album-box .credits-list li { margin: 6px 0; }
.album-box .album-title { text-align:center; margin: 10px 0; font-size: 30px; }

/* Singles and pre-2018 grids reuse album-box sizing (3 columns where possible) */
.singles-grid { display:flex; flex-wrap:wrap; gap:40px; max-width:1056px; margin:12px auto 28px; justify-content:center; }
.singles-grid .album-box { width: calc(33.333% - 40px); display:flex; flex-direction:column; align-items:center; gap:12px; background:#aa0000; padding:6px 14px 12px 14px; justify-content:flex-start; border-radius:10px; border:2px solid #000; box-sizing:border-box; min-width:240px; }

@media (max-width: 900px) {
  .album-grid, .singles-grid { flex-direction:column; padding:0 12px; }
  .album-grid .album-box, .singles-grid .album-box { width:100%; min-width:unset; }
  .album-art-credits { width:100%; height:auto; max-width:320px; }
}

/* Music Videos: one large red container holding all video credits */
.videos-container-credits {
  max-width: 1100px;
  margin: 18px auto 28px;
  background: #aa0000;
  padding: 16px;
  border-radius: 10px;
  border: 2px solid #000;
  box-sizing: border-box;
}
.video-grid-credits { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap:18px; row-gap:9px; align-items:start; justify-items:center; justify-content:center; }
.video-box-credits { padding:14px; text-align:center; width:100%; box-sizing:border-box; font-size:17.5px; }
.video-title-credits { font-family: 'MilkyVintage', Arial, sans-serif; color: #e3c758; font-size:28px; margin:6px 0 8px; }
.video-box-credits .credits-list { list-style:none; padding:0; margin:6px auto 0; text-align:center; }
.video-box-credits .credits-list li { margin:8px 0; font-size:17.5px; }

@media (max-width: 900px) {
  .videos-container-credits { padding:12px; }
  .video-grid-credits { grid-template-columns: 1fr; }
  /* Center video titles on mobile */
  .video-box-credits { text-align:center; }
}

/* Home page email text and form fields */
.email-text, .email-capture .email-text {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 12px;
}

.email-input, .name-input, .submit-button {
  font-family: 'Bebas Neue', Arial, sans-serif;
  font-size: 16px;
}

/* Home hero logo overlay (above main content, below header) */
.home-hero-logo {
  position: static;
  display: block;
  margin: 6px auto 4px auto;
  max-width: 420px;
  width: 28vw;
  height: auto;
  pointer-events: auto;
}

/* Home page specific overrides */
.home-page .tagline-box { margin-top: 6px; }
/* Remove the red box on home but keep yellow MilkyVintage text */
.home-page .tagline-box { background: #aa0000; border:2px solid #000; padding:10px 16px; border-radius:10px; box-sizing:border-box; }
.home-page .tagline-box p { color: #e3c758; font-family: 'MilkyVintage', Arial, sans-serif; font-size:28px; margin:0; }

/* thin divider under tagline on home */
.home-tagline-divider { width:60%; max-width:760px; height:6px; background:#e3c758; border-radius:4px; margin:18px auto; border:2px solid #000; }

/* Video announcement + embed */
.video-announcement { max-width: 880px; margin: 8px auto 12px; text-align:center; }
.video-live-text { font-family: 'MilkyVintage', Arial, sans-serif; color:#e3c758; font-size:56px; margin:6px 0 10px; }
.video-subtext { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:18px; margin:6px 0 12px; }
.video-embed {
  width:100%;
  max-width:760px;
  margin:0 auto;
  aspect-ratio:16/9;
  box-sizing: border-box;
  border: 2px solid #000; /* match tagline red box border */
  border-radius: 10px;
  padding: 6px;
  background: transparent;
}
.video-embed iframe {
  width:100%;
  height:100%;
  border:0;
  border-radius: 6px; /* inner curve to match framed look */
  display:block;
}

/* Email capture: red boxed form with yellow MilkyVintage button */
.email-form-container { max-width:760px; margin:14px auto; background-color:#aa0000; padding:18px; border-radius:10px; box-sizing:border-box; border:2px solid #000; }
.email-form-container .email-text { color:#ffffff; font-family: 'Bebas Neue', Arial, sans-serif; font-size:18px; margin-bottom:10px; }
.email-form-container form { display:flex; flex-direction:column; gap:10px; }
.email-input { width:100%; padding:10px 12px; border-radius:6px; border:1px solid rgba(0,0,0,0.6); background: transparent; color:#ffffff; box-sizing:border-box; font-family: 'MilkyVintage', Arial, sans-serif; font-size:16px; }
.submit-button { align-self:center; background:#e3c758; color:#000; padding:10px 16px; border-radius:6px; border:2px solid #000; cursor:pointer; font-family: 'MilkyVintage', Arial, sans-serif; font-size:18px; max-width:220px; }

@media (max-width: 700px) {
  .video-live-text { font-size:22px; }
  .home-hero-logo { width:46vw; }
}

/* Home page mobile-only tweaks (no desktop changes) */
@media (max-width: 700px) {
  /* Shrink tagline text and box */
  .home-page .tagline-box p { font-size: 19px; }
  .home-page .tagline-box { width: calc(100% - 28px); max-width: 420px; padding: 8px 12px; }

  /* Make 'Country Back' and 'Get-To-Know-Me' consistent and mid-size */
  .video-live-text, .get-to-know .get-to-know-title { font-size: 36px !important; }

  /* Narrow the email form area to ~80% of screen so it doesn't touch edges */
  .email-form-container { width: 80%; max-width: 760px; padding: 12px; box-sizing: border-box; }
  .email-form-container .email-input { font-size: 15px; }
}

/* Ensure the home tagline divider appears as a horizontal bar on mobile */
@media (max-width: 700px) {
  .home-page .home-tagline-divider {
    width: 94%;
    max-width: 760px;
    height: 8px;
    background: #e3c758;
    border-radius: 4px;
    margin: 12px auto;
    border: 2px solid #000;
    box-sizing: border-box;
    display: block;
  }
}

/* Age modal basic styles */
.age-modal-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:99999; }
.age-modal { background:#fff; color:#000; padding:20px; border-radius:10px; max-width:360px; width:92%; box-sizing:border-box; text-align:center; border:3px solid #000; }
.age-modal h3 { margin:0 0 8px 0; font-family:'Bebas Neue', Arial, sans-serif; font-size:22px; }
.age-modal p { margin:0 0 12px 0; }
.age-buttons { display:flex; gap:10px; justify-content:center; margin-top:8px; }
.age-buttons button { padding:8px 12px; border-radius:6px; font-family:'MilkyVintage', Arial, sans-serif; font-size:16px; cursor:pointer; }
.age-buttons .secondary { background:#ddd; border:2px solid #000; }
.age-buttons #age-yes { background:#e3c758; border:2px solid #000; }

/* Stronger mobile override in case hr is collapsed by UA or other rules */
@media (max-width: 700px) {
  body.home-page hr.home-tagline-divider {
    display: block !important;
    width: 94% !important;
    max-width: 760px !important;
    height: 8px !important;
    min-height: 8px !important;
    background-color: #e3c758 !important;
    border-radius: 4px !important;
    margin: 12px auto !important;
    border: none !important;
    box-sizing: border-box !important;
    visibility: visible !important;
  }
}

/* Fallback divider element: hidden by default, visible on mobile only */
.home-tagline-divider-fallback { display: none; }
@media (max-width: 700px) {
  .home-tagline-divider { display: none !important; }
  .home-tagline-divider-fallback {
    display: block !important;
    width: 94% !important;
    max-width: 760px !important;
    height: 10px !important;
    background-color: #e3c758 !important;
    border-radius: 4px !important;
    margin: 12px auto !important;
    box-sizing: border-box !important;
  }
}

/* Extra-safe: also show fallback for slightly larger narrow viewports */
@media (max-width: 900px) {
  body.home-page .home-tagline-divider { display: none !important; }
  body.home-page .home-tagline-divider-fallback {
    display: block !important;
    width: 92% !important;
    max-width: 820px !important;
    height: 12px !important;
    background-color: #e3c758 !important;
    border-radius: 4px !important;
    margin: 12px auto !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,1) !important;
    visibility: visible !important;
    z-index: 2 !important;
  }
}

/* New explicit mobile divider (separate element) */
.mobile-divider-new { display: none; }
@media (max-width: 900px) {
  #mobile-divider-new {
    display: block !important;
    width: 92% !important;
    max-width: 820px !important;
    height: 12px !important;
    background-color: #e3c758 !important;
    border-radius: 4px !important;
    margin: 12px auto !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,1) !important;
    visibility: visible !important;
    z-index: 3 !important;
  }
}

/* Get to know me section */
.get-to-know { max-width:880px; margin:18px auto 10px; text-align:center; }
.get-to-know .get-to-know-title { font-family: 'MilkyVintage', Arial, sans-serif; color:#e3c758; font-size:56px; margin:8px 0; }
.get-to-know-subtext { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:18px; margin:6px 0 12px; }
.get-to-know .short-embed { width:80%; max-width:760px; margin:0 auto; aspect-ratio:9/16; }
.get-to-know .short-embed iframe { width:100%; height:100%; border:0; border-radius:6px; }
.get-to-know .short-embed video { width:100%; height:100%; border:0; border-radius:6px; display:block; }

/* Force home body background to the Ladder image (override clouds) */
body.home-page {
  background-image: url('../pics/artist pics/JPG/Studio NH Mess Ladder.jpg'), url('../pics/artist pics/Studio NH Mess Ladder.HEIC');
  background-size: cover;
  background-position: 45% 12% !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Contact page form layout and inputs */
.contact-box { max-width:760px; margin:14px auto; background-color:#aa0000; padding:20px; border-radius:10px; box-sizing:border-box; border:2px solid #000; }
.contact-box form { display:flex; flex-direction:column; gap:10px; }
.contact-label { color:#ffffff; font-size:16px; text-align:left; }
.contact-input, .contact-textarea { width:100%; padding:10px 12px; border-radius:6px; border:1px solid rgba(0,0,0,0.6); background: transparent; color:#ffffff; box-sizing:border-box; font-family: 'MilkyVintage', Arial, sans-serif; font-size:16px; }
.contact-textarea { min-height:140px; resize:vertical; }
.contact-button { align-self:center; background:#e3c758; color:#000; padding:10px 16px; border-radius:6px; border:1px solid #000; cursor:pointer; font-family: 'Bebas Neue', Arial, sans-serif; font-size:16px; max-width:220px; }
.contact-text { color:#ffffff; font-family: 'Bebas Neue', Arial, sans-serif; font-size:18px; margin-bottom:12px; }

@media (max-width: 700px) {
  .contact-box { width:94%; padding:16px; }
  .contact-button { align-self:center; text-align:center; }
}

/* ...rest of styles.css (kept intact) */

/* ------------------ End styles.css ------------------ */

/* ------------------ Begin styles2.css (music overrides) ------------------ */
/* styles2.css for music.html */

@font-face {
  font-family: 'MilkyVintage';
  src: url('../Fonts/MilkyVintage-Regular.ttf') format('truetype');
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #4eabf8;
  color: #333;
  min-height: 100vh;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* music page specific grid and embed sizes */
.music2-pairs { display:flex; flex-wrap:wrap; gap:40px; row-gap:20px; margin:20px auto; max-width:1056px; justify-content:center; }
.music2-pair { width:288px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.music2-box { width:288px; padding:12px 10px; background-color:#aa0000; border-radius:10px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid #000; }
.music2-box span { font-family: 'MilkyVintage', Arial, sans-serif; color:#e3c758; font-size:20px; text-align:center; }
.music2-embed { width:288px; height:387px; }

/* Mobile-only: center Bandcamp embeds and red boxes, add extra gap between embed and box */
@media (max-width: 800px) {
  .music2-pairs { justify-content:center; gap:28px; }
  .music2-pair { width:100%; max-width:360px; margin:0 auto; align-items:center; gap:18px; }
  /* Keep embeds full-size by preserving original aspect ratio and ensure taller min-height */
  .music2-embed, .music2-embed iframe, .music2-embed-wrapper iframe { display:block; margin:0 auto; width:100% !important; max-width:360px !important; box-sizing:border-box; }
  /* Provide a minimum height so embeds don't appear cut off on mobile */
  .music2-embed, .music2-embed iframe, .music2-embed-wrapper iframe { aspect-ratio: 288 / 387; height: auto !important; min-height: 380px !important; }
  .music2-embed-wrapper { width:100%; display:flex; justify-content:center; }
  .music2-box { width:90% !important; max-width:320px; margin: 12px auto 0 auto !important; }
  /* increase spacing between embed and red box */
  .music2-embed-wrapper { margin-bottom: 14px; }
}

/* Streaming logos row on Music page: use header red and Bebas for Rumble */
.streaming-logos { display:flex; justify-content:center; gap:16px; margin:8px 0 16px 0; }
.streaming-logos a { color: #aa0000; text-decoration: none; font-size: 28px; }
.streaming-logos a i { color: #aa0000; }
.streaming-logos a:hover { opacity:0.85; }
.streaming-logos .rumble-logo { font-family: 'Bebas Neue', Arial, sans-serif; color:#aa0000; text-decoration:none; font-size:26px; display:flex; align-items:center; }

/* Thicker yellow divider above the albums */
.divider { border: none; height: 4px; background-color: #e3c758; margin: 18px auto; max-width: 80%; border-radius: 2px; }
.divider { border: 2px solid #000; height: 8px; background-color: #e3c758; margin: 18px auto; width: calc(100% - 44px); max-width:760px; border-radius: 4px; box-sizing:border-box; }

/* Reduce just the first album title slightly on desktop to keep it on one line */
@media only screen and (min-width: 801px) {
  .music2-pair:first-child .music2-box span { font-size: 15px; }
}

/* footer and mobile media queries from styles2.css */
footer { background-color:#aa0000; color:white; text-align:center; padding:6px; position:fixed; bottom:0; width:100%; line-height:1; }

@media only screen and (max-width: 800px) {
  .content { padding: 32px 0; width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
  .music2-pairs { flex-direction: column; gap:0; margin:0 auto; width:100%; }
  .page-links { display:none !important; }
  .hamburger { display:block; margin-left:auto; }
}

/* ------------------ End styles2.css ------------------ */

/* ------------------ Begin styles_indexnew.css (index overrides) ------------------ */
/* styles_indexnew.css for index.html */

@font-face {
  font-family: 'MilkyVintage';
  src: url('../Fonts/MilkyVintage-Regular.ttf') format('truetype');
}

body { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

header { padding: 16px 0 !important; }

.page-links { display:flex; }
.page-links a { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

.hamburger { display:none; }

/* Index-specific tagline box tweaks */
.tagline-box { border:1px solid #000; }
.music-button { border:1px solid #000; }

@media (max-width: 900px) {
  .featured-video { height:260px; }
  .links-row { flex-direction: column; }
}

/* ------------------ End styles_indexnew.css ------------------ */

/* ------------------ Begin styles_index2 (additional index variant) ------------------ */
/* content from styles_index2 merged below */

@font-face {
    font-family: 'MilkyVintage';
    src: url('../fonts/MilkyVintage-Regular.ttf') format('truetype');
}

/* copy important index2 overrides */
@media only screen and (max-width: 800px) {
    .content { padding: 32px 0; width:100%; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
    .page-links { display:none !important; }
    .hamburger { display:block; margin-left:auto; }
}

/* ------------------ End styles_index2 ------------------ */

/* Small helpers */
.featured-video { border-radius:6px; }
.links-row .big-link { transition: background 0.15s ease; }
.links-row .big-link:hover { background: rgba(255,255,255,0.12); }

/* Ensure titles above framed boxes use MilkyVintage and yellow */
.music2-box span, .video-text, .tagline-box p, .album-title, .albums-headline {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
}

/* Section subtitle used on Music page (Albums / Singles) */
.section-title {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758;
  font-size: 40px; /* ~62% of 64px discography headline */
  margin: 18px 0 12px;
  text-align: center;
}

.singles-grid { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; max-width:1100px; margin:12px auto 28px; }
.singles-grid .music2-pair { width: 288px; min-width:240px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.singles-grid .music2-embed { width:288px; height:387px; border:0; display:block; }

/* Increase space below a section title when it's directly followed by the singles grid */
.section-title + .singles-grid { margin-top: 28px; }

@media (max-width: 900px) {
  .section-title { font-size: 32px; }
  .singles-grid .music2-pair { width:100%; max-width:360px; margin:0 auto; }
  .singles-grid .music2-embed { aspect-ratio: 288 / 387; height: auto !important; }
}

/* Music page: mobile adjustments for section titles and Singles positioning */
@media (max-width:700px) {
  /* Increase Albums/Singles title size by ~25% on mobile */
  .section-title { font-size: 40px !important; }

  /* Reduce vertical space around the Singles heading so it sits more centered */
  .singles-title { margin: 8px 0 8px !important; padding: 0 !important; }
  .section-title + .singles-grid { margin-top: 8px !important; }
  .singles-grid { margin-top: 8px !important; margin-bottom: 12px !important; }

  /* Slightly tighten bandcamp embed vertical spacing inside the singles grid */
  .singles-grid .music2-pair { gap: 8px !important; }
}

/* Force singles grid to match album grid spacing when using the shared container class */
.music2-pairs.singles-grid { gap: 40px; row-gap: 20px; max-width: 1056px; }

/* Ensure single titles match album title sizing and spacing */
.singles-grid .music2-box span, .music2-pairs.singles-grid .music2-box span {
  font-size: 20px !important;
  line-height: 1.1 !important;
}

/* Small date label next to single titles */
.single-date {
  font-family: 'Bebas Neue', Arial, sans-serif;
  color: #ffffff;
  font-size: 14px;
  margin-left: 8px;
  opacity: 0.95;
}

/* ------------------ Bio page styles ------------------ */
.bio-box { max-width:1100px; margin:18px auto; display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap; background-color: #aa0000; padding:22px; border-radius:12px; box-sizing:border-box; border:2px solid #000; }
.bio-image { flex: 0 0 320px; max-width:320px; display:flex; justify-content:center; align-items:flex-start; }
.bio-image-frame { border:6px solid #aa0000; border-radius:10px; padding:6px; background: rgba(0,0,0,0.12); display:flex; justify-content:center; align-items:center; height:auto; max-height:520px; overflow:hidden; box-sizing:border-box; }
.bio-top-image { width:100%; height:100%; border-radius:6px; object-fit:cover; box-shadow: 0 8px 20px rgba(0,0,0,0.45); display:block; }
.bio-content { flex:1 1 420px; max-width:640px; display:flex; flex-direction:column; align-items:flex-start; }
.bio-yellow-line { width:calc(100% - 44px); max-width:calc(1100px - 44px); height:8px; background:#e3c758; border-radius:4px; margin:0 auto 14px; border:2px solid #000; box-sizing:border-box; }
.bio-text { font-family: 'Bebas Neue', Arial, sans-serif; color: #ffffff; font-size:15px; line-height:1.35; text-align:left; margin:0 0 10px 0; }
.bio-video { width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; max-height:320px; }

@media (max-width: 900px) {
  /* Keep original top padding; make bottom padding match side padding on mobile */
  .bio-box { flex-direction:column; align-items:center; padding:22px 12px 12px; max-width:90%; }
  .bio-image { max-width:720px; width:100%; }
  .bio-image-frame { height:auto; }
  .bio-top-image { height:auto; max-width:100%; }
  .bio-content { align-items:center; text-align:center; }
  .bio-text { text-align:center; }
}

/* ------------------ Custom mobile adjustments (home page only) ------------------ */
@media (max-width: 700px) {
  /* Reduce the vertical gap between the tagline red box and the 'Country Back' title */
  body.home-page .home-tagline-divider {
    margin: 4px auto !important;
    height: 6px !important;
  }

  /* Tighten spacing between the first featured video and the Get-To-Know-Me section */
  /* Force-tight mobile spacing under the tagline to remove large gap */
  body.home-page .tagline-box { margin: 0 auto 2px !important; padding-top:8px !important; padding-bottom:8px !important; }
  body.home-page .tagline-box p { margin: 0 !important; }
  body.home-page .home-tagline-divider { margin: 2px auto !important; }
  body.home-page .video-announcement { margin: 0 auto 6px !important; }
  body.home-page .video-live-text { margin: 4px 0 6px !important; }
  body.home-page .get-to-know { margin: 6px auto 8px !important; }

  /* Enlarge the home logo by ~30% on mobile and balance top/bottom spacing */
  body.home-page .home-hero-logo {
    width: 60vw !important;
    max-width: 520px !important;
    margin: 16px auto !important; /* even spacing above and below the logo */
  }
}

/* Extra-aggressive mobile fixes to remove leftover vertical gaps above 'Country Back' */
@media (max-width: 700px) {
  /* Remove any bottom spacing on the tagline box and ensure divider is very small */
  body.home-page .tagline-box { margin-bottom: 0 !important; padding-bottom: 6px !important; }
  body.home-page .tagline-box p { margin: 0 !important; }

  /* Force the divider and fallback elements to be minimal and not introduce margins */
  body.home-page .home-tagline-divider,
  body.home-page .home-tagline-divider-fallback,
  #mobile-divider-new {
    height: 6px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove any top margin on the video title and announcement */
  body.home-page .video-announcement { margin-top: 0 !important; }
  body.home-page .video-live-text { margin-top: 0 !important; }

  /* ensure no unexpected whitespace from iframe wrappers */
  body.home-page .video-embed { padding-top: 0 !important; }
}

/* Final aggressive mobile header/logo adjustments */
@media (max-width:700px) {
  /* reduce header padding so logo sits higher */
  body.home-page header { padding: 6px 0 !important; }
  .header-container { padding: 0 8px !important; }

  /* reduce top padding of main content so logo and tagline move upward */
  body.home-page .content { padding-top: 4px !important; }

  /* make the hero logo slightly smaller than before but closer to the header */
  body.home-page .home-hero-logo { width: 56vw !important; max-width: 480px !important; margin: 0 auto 4px auto !important; }

  /* tighten tagline top spacing and eliminate extra bottom gap */
  body.home-page .tagline-box { margin-top: 2px !important; margin-bottom: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; }

  /* shrink divider to minimal height and remove big margins */
  body.home-page .home-tagline-divider,
  body.home-page .home-tagline-divider-fallback,
  #mobile-divider-new { height: 4px !important; margin: 2px auto !important; }

  /* ensure video announcement sits close under the divider */
  body.home-page .video-announcement { margin-top: 2px !important; }
}

/* Final fallback: remove any remaining whitespace above hero and tagline on very small viewports */
@media (max-width: 480px) {
  body.home-page header { padding-top: 4px !important; padding-bottom: 4px !important; }
  body.home-page .content { padding-top: 0 !important; }
  body.home-page .home-hero-logo { margin-top: 2px !important; }
  body.home-page .tagline-box { margin-top: 2px !important; }
  body.home-page .home-tagline-divider, #mobile-divider-new, .home-tagline-divider-fallback { margin: 2px auto !important; height: 3px !important; }
}

/* Extra-strong mobile header reductions for narrow devices */
@media (max-width: 440px) {
  body.home-page header { padding: 2px 0 !important; }
  .header-container { min-height: 0 !important; padding: 0 6px !important; }
  body.home-page .content { padding-top: 0 !important; }
  body.home-page .home-hero-logo { margin-top: 0 !important; }
  body.home-page .tagline-box { margin-top: 2px !important; margin-bottom: 0 !important; }
  body.home-page .home-tagline-divider, #mobile-divider-new, .home-tagline-divider-fallback { margin: 1px auto !important; height: 3px !important; }
}
/* Reserve space for sticky header on mobile so content (iframes) aren't covered and are clickable */
@media (max-width: 700px) {
  /* Reduce header-derived top padding on mobile to half to avoid oversized gap */
  body.home-page .content { padding-top: calc(var(--header-height, 56px) * 0.5) !important; }
}

/* Styles for lazy Bitchute embed used on the Get-To-Know-Me section */
.bitchute-lazy { display:block; width:100%; max-width:420px; margin:0 auto; aspect-ratio:9/16; position:relative; }
.bitchute-lazy .bitchute-poster { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; border-radius:6px; overflow:hidden; }
.bitchute-lazy .bitchute-poster svg { opacity:0.9; }
.bitchute-lazy .bitchute-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:6px; display:none; }

/* Final force-reduction for any remaining top spacing on mobile */
@media (max-width: 420px) {
  body.home-page .content { padding-top: 0 !important; }
  body.home-page .home-hero-logo { margin: 4px auto !important; }
  body.home-page .tagline-box { margin-top: 2px !important; }
  body.home-page .home-tagline-divider, #mobile-divider-new { margin: 2px auto !important; height: 3px !important; }
}

/* Ultimate override: ensure zero top margin for hero logo on mobile (<=700px) */
@media (max-width: 700px) {
  body.home-page .home-hero-logo { margin-top: 0 !important; margin-bottom: 4px !important; }
}

/* Final emergency override to remove any remaining top gap above the hero logo on mobile */
@media (max-width: 700px) {
  body.home-page header { padding-top: 2px !important; padding-bottom: 2px !important; }
  .header-container { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  body.home-page .content { padding-top: 0 !important; }
  body.home-page .home-hero-logo { margin-top: 0 !important; margin-bottom: 4px !important; display: block !important; }
  body.home-page .home-tagline-divider, #mobile-divider-new { margin-top: 2px !important; }
}

/* Reduce space above the 'Country Back' title on mobile by ~50% */
@media (max-width:700px) {
  body.home-page .home-tagline-divider,
  body.home-page .home-tagline-divider-fallback,
  #mobile-divider-new {
    height: 3px !important; /* half of earlier 6px */
    margin: 1px auto !important; /* reduce surrounding margin */
  }

  /* tighten the title spacing */
  body.home-page .video-announcement { margin-top: 2px !important; }
  body.home-page .video-live-text { margin-top: 2px !important; padding-top: 0 !important; }
}

/* Broaden the rule so tablets and larger phones also get reduced spacing (approx half) */
@media (max-width:900px) {
  body.home-page .video-announcement { margin-top: 2px !important; }
  body.home-page .video-live-text { margin-top: 2px !important; margin-bottom: 4px !important; }
  body.home-page .home-tagline-divider { margin-bottom: 2px !important; }
}

/* As a last resort, reset paragraph's default top margin for this title on the home page */
body.home-page p.video-live-text { margin-block-start: 2px !important; margin-block-end: 4px !important; }

/* Strong mobile fix: explicitly halve and remove top spacing above 'Country Back' */
@media (max-width:700px) {
  /* minimize spacing from the tagline/divider above */
  body.home-page .tagline-box { margin-bottom: 2px !important; padding-bottom: 4px !important; }
  body.home-page hr.home-tagline-divider,
  body.home-page .home-tagline-divider,
  #mobile-divider-new,
  .home-tagline-divider-fallback {
    margin: 1px auto !important;
    margin-bottom: 1px !important;
    height: 3px !important;
    padding: 0 !important;
  }

  /* remove any extra top spacing on the announcement and title */
  body.home-page .video-announcement { margin-top: 0 !important; padding-top: 0 !important; }
  body.home-page .video-announcement > p.video-live-text,
  body.home-page p.video-live-text {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
    line-height: 1 !important;
  }

  /* ensure iframe wrapper doesn't add padding */
  body.home-page .video-embed { margin-top: 2px !important; padding-top: 0 !important; }
}


/* ------------------ End Bio page styles ------------------ */

/* ------------------ Videos page carousel & layout ------------------ */
.video-columns { display:flex; gap:24px; max-width:1100px; margin:20px auto; justify-content:center; flex-wrap:wrap; }
.video-column { flex:1 1 240px; max-width: 280px; display:flex; flex-direction:column; align-items:center; }
.album-box { width:100%; padding:12px; background-color:#aa0000; border-radius:10px; display:flex; justify-content:center; box-sizing:border-box; border:2px solid #000; }
.video-text { font-family: 'MilkyVintage', Arial, sans-serif; color: #e3c758; font-size:20px; text-align:center; }
.video-desc, .video-info-text { font-family: 'Bebas Neue', Arial, sans-serif; color: #ffffff; font-size:16px; text-align:center; margin:8px 6px 12px 6px; }

.video-carousel { width:100%; position:relative; margin-bottom:28px; }

/* Keep album titles and descriptive text centered even though columns align to top */
.video-column .album-box { align-self: center; }
.video-column .video-desc, .video-column .video-info-text, .video-column .video-subtext { text-align: center; width:100%; }
.carousel-slides { position:relative; width:100%; height:0; padding-bottom:56.25%; }
.carousel-slides .video-slide { position:absolute; top:0; left:0; width:100%; height:100%; border: none; display:none; }
.carousel-slides .video-slide.active { display:block; }
.video-slide iframe, .video-slide video { width:100%; height:100%; border-radius:6px; }

.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.dot { width:10px; height:10px; background:#f4e9b8; border-radius:50%; display:inline-block; cursor:pointer; opacity:0.95; border:2px solid #000; box-sizing:border-box; }
.dot.active { background:#e3c758; box-shadow: 0 0 0 4px rgba(227,199,88,0.18); opacity:1; border:2px solid #000; }

@media (max-width: 900px) {
  .video-columns { flex-direction:column; max-width:680px; padding:0 12px; }
  .video-column { max-width:100%; align-items:flex-start; }
  /* Mobile-only vertical offsets to avoid dot overlap and adjust spacing */
  .video-column:nth-child(2) { margin-top: 30px; }
  .video-column:nth-child(3) { margin-top: -10px; }
  .video-column:nth-child(3) .video-carousel { margin-bottom: 6px; }
  .video-column:nth-child(4) { margin-top: -6px; }
  .carousel-slides { padding-bottom:56.25%; }
}

/* Credits page: tighten margins around section titles on mobile */
@media (max-width: 900px) {
  .discography-headline { margin: 6px 0 8px; }
  .credits-intro { margin: 6px 0 10px; }
  .albums-headline { margin: 10px 0; }
}

/* Contact page: reduce gap between heading and paragraph on mobile */
@media (max-width: 900px) {
  .discography-headline { margin-bottom: 8px; }
  .contact-text { margin-top: 6px; }
}

/* Support page: tighten gap between 'Throw Me A Bone?' title and yellow divider on mobile */
@media (max-width: 900px) {
  body.support-only .discography-headline { margin-bottom: 6px; }
  body.support-only .divider { margin-top: 6px; margin-bottom: 8px; }
}

/* ------------------ Age confirmation modal ------------------ */
.age-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}
.age-modal {
  background: #aa0000;
  color: #e3c758;
  padding: 22px;
  border-radius: 10px;
  border: 3px solid #000;
  max-width: 92%;
  width: 420px;
  box-sizing: border-box;
  text-align: center;
  font-family: 'MilkyVintage', Arial, sans-serif;
}
.age-modal h3 { margin: 0 0 8px; font-size: 28px; }
.age-modal p { margin: 0 0 14px; font-family: 'Bebas Neue', Arial, sans-serif; color: #ffffff; font-size: 16px; }
.age-buttons { display: flex; gap: 12px; justify-content: center; }
.age-buttons button { background: #e3c758; color: #000; border: 2px solid #000; padding: 8px 12px; font-family: 'MilkyVintage', Arial, sans-serif; cursor: pointer; border-radius: 6px; }
.age-buttons button.secondary { background: transparent; color: #ffffff; border: 2px solid #ffffff; }


/* End Videos page styles */

/* ------------------ Bitcoin page styles ------------------ */
.btc-logo { display:block; margin: 8px auto 18px; max-width:360px; width:28vw; height:auto; }
.description-block { display:flex; gap:16px; max-width:980px; margin:0 auto 20px; justify-content:center; flex-wrap:wrap; }
.btc-box { background:#aa0000; border-radius:10px; padding:16px; box-sizing:border-box; border:2px solid #000; flex:1 1 380px; max-width:460px; display:flex; flex-direction:column; }
.btc-box .bio-image { display:flex; gap:12px; align-items:stretch; flex:1 1 auto; }
.btc-image { width:40%; min-width:140px; height:100%; object-fit:cover; border-radius:6px; border:4px solid #aa0000; box-shadow:0 8px 18px rgba(0,0,0,0.35); }
.btc-bio-text { font-family:'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:16px; margin:0; flex:1 1 auto; }
.btc-donation { display:flex; gap:12px; align-items:center; margin-top:12px; }

/* Desktop-only: center the white bio text within the remaining red space to the right of the image */
@media only screen and (min-width: 901px) {
  .btc-box .bio-image { align-items:center !important; }
  /* More specific selector to ensure centering wins over other rules */
  .btc-box .bio-image .btc-bio-text { display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; }
  /* Reduce vertical spacing around yellow divider inside btc boxes on desktop (cut margins by ~40%) */
  .btc-box .divider { margin: 11px auto !important; height:6px !important; }
}
.btc-qr { width:128px; height:128px; object-fit:cover; border-radius:6px; border:4px solid #aa0000; }
.btc-address-container { display:flex; flex-direction:column; gap:6px; }
.btc-donation-text { font-family:'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:16px; margin:0; }
.btc-address { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; background: rgba(0,0,0,0.12); padding:8px 10px; border-radius:6px; font-size:14px; word-break:break-all; }
.video-embed { width:100%; aspect-ratio:16/9; border-radius:6px; border:none; box-shadow:0 8px 18px rgba(0,0,0,0.35); }
.sathub-title, .btc-video-title { text-align:center; }

@media (max-width: 900px) {
  .description-block { flex-direction:column; padding:0 12px; }
  .btc-image { width:220px; height:auto; }
  .btc-qr { width:140px; height:auto; }
  .btc-box { max-width:100%; }
}

/* ------------------ End Bitcoin styles ------------------ */

/* sathuB section: title, paragraph, and pictures sizing */
.sathub-title { font-family: 'MilkyVintage', Arial, sans-serif; color: #e3c758; font-size:34px; margin:18px 0 8px; }
.sathub-text { font-family: 'Bebas Neue', Arial, sans-serif; color: #ffffff; font-size:18px; max-width:980px; margin:0 auto 18px; text-align:center; line-height:1.45; }
.sathub-pics { display:flex; gap:12px; justify-content:center; max-width:1100px; margin:12px auto 36px; flex-wrap:wrap; }
.sathub-pic { width:calc(33.333% - 8px); max-width:340px; height:200px; object-fit:cover; border-radius:6px; border:4px solid #aa0000; box-shadow:0 8px 18px rgba(0,0,0,0.35); }

@media (max-width: 900px) {
  .sathub-pic { width:100%; height:auto; max-width:720px; }
  .sathub-title { font-size:28px; }
  .sathub-text { font-size:16px; padding:0 8px; }
}

/* ------------------ Live page overrides ------------------ */
.live-page .discography-headline { font-size:64px; margin:6px 0 6px; }
.live-page .credit-text { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:18px; margin-bottom:18px; }
.live-booking { max-width:920px; margin:0 auto 36px; padding:0 12px; box-sizing:border-box; }
.live-booking .booking-block { max-width:820px; margin:18px auto; text-align:center; }
.live-booking .album-box { display:inline-block; width:auto; padding:12px 28px; border-radius:10px; }
.live-booking .booking-subtext { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; font-size:20px; margin:8px 0 12px; }
.live-booking .embed-wrap { max-width:760px; margin:10px auto 0; aspect-ratio:16/9; }
.live-booking .embed-wrap iframe { width:100%; height:100%; border:0; border-radius:6px; }

@media (max-width: 900px) {
  .live-booking { padding:0 8px; }
  .live-booking .booking-block { max-width:100%; }
  .live-booking .album-box { width:100%; display:block; }
  .live-booking .embed-wrap { width:100%; max-width:100%; }
}

/* Mobile-only: slightly reduce home logo and add top gap so it doesn't touch header */
@media (max-width: 700px) {
  body.home-page .home-hero-logo {
    width: 50vw !important; /* shrink ~8-10% from previous 56vw */
    max-width: 460px !important;
    margin-top: 12px !important; /* add gap above logo */
    margin-bottom: 8px !important;
  }
}

/* Age confirmation modal (site entry) */
.age-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.age-modal {
  background: #aa0000; /* red box */
  border: 4px solid #000;
  padding: 22px;
  border-radius: 10px;
  max-width: 520px;
  width: calc(100% - 40px);
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.age-modal h3 {
  font-family: 'MilkyVintage', Arial, sans-serif;
  color: #e3c758; /* yellow */
  font-size: 36px;
  margin: 6px 0 12px;
}
.age-modal p { font-family: 'Bebas Neue', Arial, sans-serif; color:#ffffff; margin: 0 0 14px; font-size:18px; }
.age-modal .age-buttons { display:flex; gap:12px; justify-content:center; margin-top:8px; }
.age-modal .age-buttons button { font-family: 'MilkyVintage', Arial, sans-serif; padding:10px 14px; border-radius:6px; border:2px solid #000; cursor:pointer; background:#e3c758; color:#000; font-size:16px; }
.age-modal .age-buttons button.secondary { background: transparent; color:#ffffff; }

@media (max-width: 700px) {
  .age-modal h3 { font-size:28px; }
  .age-modal p { font-size:16px; }
}

/* Reach-out contact line on Live page */
.live-page .reach-out { font-family: 'Bebas Neue', Arial, sans-serif; color: #aa0000; font-size:20px; margin:6px 0 12px; text-align:center; }


/* Make Live-page red boxes and their title text ~25% larger */
.live-page .live-booking .album-box { padding: 15px 35px; border: 3px solid #000; }
.live-page .video-text { font-size: 25px; }

@media (max-width: 900px) {
  .live-page .live-booking .album-box { padding: 14px 24px; }
  .live-page .video-text { font-size: 22px; }
}

.support-only .social-icons a, .support-only .social-icons a i { color: #ffffff !important; }
.support-only .discography-headline { font-size: 58px; }
/* Support page: ensure header social icons are white and constrain support pic */
.support-pic-wrapper { display:flex; justify-content:center; margin-top:14px; }
.support-pic-container { border:6px solid #aa0000; padding:6px; border-radius:8px; background: rgba(0,0,0,0.08); box-shadow: 0 8px 20px rgba(0,0,0,0.35); overflow:hidden; }
.support-pic { display:block; width:320px; height:auto; object-fit:cover; border-radius:4px; }

/* Payment/logo buttons on Support page: use header red and framed style */
.payment-logos { display:flex; gap:12px; justify-content:center; margin-top:10px; align-items:center; }
.payment-logo { color:#ffffff !important; text-decoration:none; font-family: 'Bebas Neue', Arial, sans-serif; font-size:16px; padding:0 6px; border:none; background:transparent; }
.payment-logo i { color:#ffffff; font-size:20px; vertical-align:middle; }
.payment-logo:hover { opacity:0.9; }
/* Bitcoin icon: orange on white background */
.payment-logo[href*="bitcoin"] i.fa-bitcoin,
.payment-logo .fa-bitcoin {
  color:#f7931a !important;
  background:#ffffff;
  padding:2px 4px;
  border-radius:3px;
}