/*
 Theme Name:   Astra Child (IMUTV)
 Template:     astra
 Version:      1.4.19
 Description:  IMUTV child theme – header sizing, fixed slanted covers, devices, footer tweaks, Upload longform styling, login/account/profile polish, partnerships + advertise + help centre + latest news helpers.
 Author:       IMUTV
*/

/* =========================
   Base variables & layout
   ========================= */
:root{
  --imu-bg: #0b0b0e;
  --imu-text: #ffffff;
  --imu-gold: #e6ce68;
  --imu-muted: #cfcfcf;
  --imu-panel: #0f1014;
  --imu-stroke: rgba(255,255,255,.08);
  --imu-frost: rgba(16,17,22,.6);
  --imu-shadow: 0 6px 30px rgba(0,0,0,.45);
  --imu-radius: 14px;

  /* Upload form theme */
  --imu-field-bg: #0a0b0f;   /* darker field background for /upload */
  --imu-field-text: #e6ce68; /* gold input text for /upload */
}

/* Background image behind everything */
html, body {
  background: var(--imu-bg);
  color: var(--imu-text);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100%;
}
body { position: relative; z-index: 0; }

/* Background image layer */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("https://imutv.tv/wp-content/uploads/2025/09/TV-Background.png")
    center / cover no-repeat fixed,
    var(--imu-bg);
  will-change: transform; transform: translateZ(0);
}

/* Fixed dim overlay (65%) — sits above image, below all content */
.imu-bg-dim{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0,0,0,0.65);
}

/* GENERAL */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.imu-center { text-align:center; }

/* Reveal */
.reveal{ opacity:1; translate:0 0; transition:opacity .6s ease, translate .6s ease; }
.js .reveal{ opacity:0; translate:0 18px; }
.js .reveal.in-view{ opacity:1; translate:0 0; }

/* Buttons */
.imu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border:2px solid var(--imu-gold);
  color:var(--imu-gold); background:#000; border-radius:10px;
  text-decoration:none; font-weight:700; transition:.2s ease; box-shadow:none;
}
.imu-btn:hover{ background:var(--imu-gold); color:#000; border-color:#000; }
.imu-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:16px; }

/* Link utility: white → gold on hover */
.imu-link-light{ color:#fff; text-decoration:underline; }
.imu-link-light:hover{ color:var(--imu-gold); }

/* Login page row */
.imu-login-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* Glass */
.imu-glass{
  background: rgba(15,16,20,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid var(--imu-stroke);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding:18px 20px;
  display:inline-block;
}

/* =========================
   Header
   ========================= */
.imu-header{
  position:sticky; top:0; z-index:3000;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 20px; background:var(--imu-frost);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid var(--imu-stroke);
}
.imu-logo img{ max-height:44px; height:auto; display:block; }
.imu-header__right{ display:flex; align-items:center; gap:12px; }

/* Header button = hamburger height (44px) */
.imu-header .imu-btn{
  height:44px; padding:0 14px; line-height:44px;
  border-width:2px; font-weight:700;
}

/* Hamburger */
.imu-menu-toggle{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:#0f1218; border:1px solid rgba(255,255,255,.15); border-radius:10px;
}
.imu-burger{ width:18px; height:2px; background:#fff; position:relative; }
.imu-burger::before,.imu-burger::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.imu-burger::before{ top:-6px; } .imu-burger::after{ top:6px; }

/* Off-canvas menu */
.imu-offcanvas{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:.2s; z-index:5000;
}
.imu-offcanvas.is-open{ opacity:1; pointer-events:auto; }
.imu-drawer{
  position:absolute; right:0; top:0; height:100%; width:min(90vw,420px);
  background:#0f1014; border-left:1px solid var(--imu-stroke);
  transform:translateX(100%); transition:transform .25s ease;
  display:flex; flex-direction:column; padding:20px; z-index:5100;
}
.imu-offcanvas.is-open .imu-drawer{ transform:translateX(0); }
.imu-drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.imu-close{ background:transparent; border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:10px; padding:8px 12px; }
.imu-nav ul{ list-style:none; margin:0; padding:0; }
.imu-nav li{ border-bottom:1px solid var(--imu-stroke); }
.imu-nav a{ display:block; padding:14px 4px; color:#fff; text-decoration:none; }
.imu-nav a:hover{ color:var(--imu-gold); }


/* Mobile-specific header styles */
@media (max-width: 767px) {
  .imu-header {
    padding: 8px 12px; /* Reduced padding for mobile */
    gap: 8px; /* Smaller gap between elements */
    flex-wrap: nowrap; /* Prevent wrapping to avoid vertical stacking */
    overflow-x: hidden; /* Prevent horizontal overflow causing right-side gap */
  }
  .imu-logo img {
    max-height: 44.88px; /* Increased by 20% from 37.4px */
    max-width: 44.88px; /* Square logo, 20% larger */
    height: auto;
  }
  .imu-header__right {
    gap: 8px; /* Smaller gap for buttons */
  }
  .imu-header .imu-btn {
    width: 17.6px; /* Reduced by 60% from 44px (44 * 0.4) */
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #000; /* Black background for site styling */
    border: 2px solid var(--imu-gold); /* Gold border */
    border-radius: 10px;
  }
  .imu-header .imu-btn span {
    display: none; /* Hide text (Login/My Profile) */
  }
  .imu-header .imu-btn::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%23e6ce68" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M5.5 21c0-3.75 3.75-7 7.5-7s7.5 3.25 7.5 7"/></svg>');
    display: block; /* Person icon increased by 25% from 12px to 15px */
  }
  .imu-header .imu-btn:hover::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M5.5 21c0-3.75 3.75-7 7.5-7s7.5 3.25 7.5 7"/></svg>');
    /* Black icon on hover, 15px */
  }
  .imu-menu-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: #000; /* Black background for site styling */
    border: 2px solid var(--imu-gold); /* Gold border */
    border-radius: 10px;
  }
  .imu-burger {
    width: 18px;
    height: 2px;
    background: var(--imu-gold); /* Gold for hamburger lines */
    position: relative;
    left: 0; /* Center within button */
  }
  .imu-burger::before,
  .imu-burger::after {
    content: "";
    position: absolute;
    left: 0; /* Align with main bar */
    width: 18px;
    height: 2px;
    background: var(--imu-gold); /* Gold for hamburger lines */
  }
  .imu-burger::before { top: -6px; }
  .imu-burger::after { top: 6px; }
  .imu-header-search {
    max-width: 300px; /* Reduce search width to fit mobile */
    flex: 0 1 300px;
  }
  .imu-header-search input {
    padding: 8px 12px; /* Smaller padding for mobile */
    font-size: 0.9rem; /* Slightly smaller text */
  }
}

/* =========================
   Footer
   ========================= */
.imu-footer{ background:#0a0b0e; border-top:1px solid var(--imu-stroke); color:#ddd; }
.imu-footer__inner{
  display:grid; grid-template-columns:1fr; gap:28px; padding:32px 20px;
}
@media (min-width: 1024px){
  .imu-footer__inner{ grid-template-columns:1.2fr .8fr; align-items:start; }
}

/* Footer brand logo */
.imu-footer__brand .imu-logo img,
.imu-footer__brand .custom-logo{
  max-height:50px !important; height:auto; width:auto; display:block;
}

.imu-desc{ font-size:.76rem; color:#cfcfcf; }

/* Social icons */
.imu-social-row{
  display:flex; gap:12px; margin-top:14px; align-items:center; flex-wrap:wrap;
}
.imu-social-row a{ display:inline-flex; width:18px; height:18px; }
.imu-social-row img{ width:100%; height:100%; object-fit:contain; display:block; filter:brightness(1) contrast(1.05); transition:transform .15s ease; }
.imu-social-row a:hover img{ transform:translateY(-1px); }

/* Newsletter */
.imu-footer__newsletter h4{ color:#fff; margin:8px 0 12px; font-size:1.05rem; }
.imu-news-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  max-width:520px; margin:0; padding:0;
}
.imu-news-input{
  flex:1 1 260px;
  border:1px solid var(--imu-stroke); border-radius:10px;
  background:rgba(15,16,20,.55); color:#fff; padding:12px 14px;
}
.imu-news-help{ font-size:.9rem; color:#cfcfcf; }

@media (max-width: 1023.98px){
  .imu-footer__brand, .imu-footer__newsletter{ text-align:center; }
  .imu-news-form{ justify-content:center; margin-left:auto; margin-right:auto; }
  .imu-social-row{ justify-content:center; }
}

/* Footbar */
.imu-footbar{
  border-top:1px solid var(--imu-stroke); padding:12px 20px; display:flex;
  gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  font-size:.9rem; color:#aaa;
}
.imu-footbar a{ color:#aaa; text-decoration:none; }
.imu-footbar a:hover{ color:#fff; }

/* =========================
   Shared page styles
   ========================= */
.imu-home, .imu-about, .imu-contact, .imu-onboarding { display:block; padding-bottom:80px; }
.imu-hero, .imu-section { text-align:center; }
.imu-home h1, .imu-home h2, .imu-about h1, .imu-about h2,
.imu-contact h1, .imu-contact h2, .imu-onboarding h1, .imu-onboarding h2 { color: var(--imu-gold); }
.imu-hero{ position:relative; padding:96px 0 48px; border-bottom:1px solid var(--imu-stroke); }
.imu-section{ padding:64px 0; }

/* Home hero and About IMUTV logos — base (desktop & tablet) */
.imu-hero__logo,
.about-imutv__logo{
  display:block;
  height:auto;
  margin:0 auto;               /* center */
}

/* Keep the general desktop intent similar to what you had inline */
.imu-hero__logo{
  width:420px;
  max-width:90vw;
  margin-bottom:12px;
}
.about-imutv__logo{
  width:330px;
  max-width:90vw;
}


/* =========================
   Cover carousels
   ========================= */
.imu-cover-rail{ padding:24px 0 8px; transform:skewY(-2.5deg); }
.imu-cover-track{
  display:flex; gap:12px; overflow:hidden; padding:8px 0;
  width:max-content; will-change: transform;
}
.imu-cover-animate{ animation:imuCover 28s linear infinite; }
@keyframes imuCover{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
.imu-cover-card{
  flex:0 0 clamp(220px, 28vw, 360px);
  border:1px solid var(--imu-stroke); border-radius:var(--imu-radius);
  background:var(--imu-panel); box-shadow: var(--imu-shadow); overflow:hidden;
}
.imu-cover-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; display:block; }

/* Mobile-specific carousel styles */
@media (max-width: 767px) {
  .imu-cover-rail {
    padding: 16px 0 4px; /* Reduced padding for mobile */
    transform: none; /* Remove skew for simpler mobile layout */
    overflow-x: auto; /* Allow horizontal scrolling within viewport */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
  }
  .imu-cover-rail::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers (Chrome, Safari) */
  }
  .imu-cover-track {
    width: auto; /* Fit within container */
    gap: 8px; /* Smaller gap for mobile */
    overflow: visible; /* Prevent clipping of fade-in effects */
    animation: imuCover 9.33s linear infinite; /* 300% faster (28s / 3) */
  }
  .imu-cover-card {
    flex: 0 0 clamp(160px, 64vw, 240px); /* 20% smaller than clamp(200px, 80vw, 300px) */
    opacity: 0; /* Start hidden for fade-in */
    transition: opacity 0.6s ease; /* Fade-in transition */
  }
  .imu-cover-card.in-view {
    opacity: 1; /* Fade in when in viewport */
  }
  /* Hide duplicate cards on mobile to prevent excessive width */
  .imu-cover-track .imu-cover-card:nth-child(n+8) {
    display: none; /* Show only first 7 cards to fit mobile */
  }
}



/* Mobile-specific hero glass section styles */
@media (max-width: 767px) {
  .imu-home .imu-hero {
    /* tighten vertical gap around the hero between the two carousels */
    padding: 56px 0 20px;          /* was 96px 0 48px on desktop */
    overflow-x: hidden;
    display: flex;
    justify-content: center;
  }
  .imu-home .imu-hero .container {
    max-width: 100%;
    padding: 0 12px;
    display: flex;
    justify-content: center;
  }
  .imu-home .imu-hero .imu-glass {
    transform: scale(0.85);
    transform-origin: center;
    max-width: 816px;
    width: 100%;
    margin: 0 auto;
    padding: 15.3px 17px;
    box-sizing: border-box;
  }
  .imu-home .imu-hero .imu-glass img {
    /* 20% smaller than your previous mobile override */
    width: 242.76px;               /* 303.45px * 0.8 */
    max-width: 80vw;               /* proportional clamp to keep it tidy */
    height: auto;
    display: block;
    margin: 0 auto 10.2px;         /* centered within the glass */
  }
}


/* Mobile-specific About IMUTV section styles */
@media (max-width: 767px) {
  .imu-home .imu-section.about-imutv {
    overflow-x: hidden; /* Prevent horizontal overflow */
    display: flex;
    justify-content: center; /* Center content horizontally */
  }
  .imu-home .imu-section.about-imutv .container {
    max-width: 100%; /* Ensure container fits viewport */
    padding: 0 12px; /* Reduced padding for mobile */
    display: flex;
    justify-content: center; /* Center glass within container */
  }
  .imu-home .imu-section.about-imutv .imu-copy.imu-glass {
    transform: scale(0.85); /* Reduce size by 15% */
    transform-origin: center; /* Scale from center */
    max-width: 765px; /* 900px * 0.85 for consistency */
    width: 100%; /* Ensure full width within container */
    margin: 0 auto;
    padding: 15.3px 17px; /* 15% reduction from 18px 20px */
    box-sizing: border-box; /* Include padding/border in width */
  }
    .imu-home .imu-section.about-imutv .imu-copy.imu-glass img {
    /* 20% smaller than your previous mobile override */
    width: 190.74px;          /* 238.425px * 0.8 */
    max-width: 72vw;          /* proportionally narrower clamp */
    height: auto;
    display: block;
    margin: 0 auto;           /* keep centered */
  }
}


/* === MOBILE ONLY: About — stack Pillars grid as tower cards === */
@media (max-width: 767.98px){
  /* The Pillars section is the 3rd .imu-section on the About page */
  main[aria-label="About IMUTV"] .imu-section:nth-of-type(3) .container > div{
    display: grid !important;
    grid-template-columns: 1fr !important; /* 2 cols → 1 col */
    gap: 14px;                               /* a touch tighter */
    max-width: 680px;                        /* keeps a nice reading width */
    margin: 0 auto;
  }
  /* Ensure each tile fills the width cleanly */
  main[aria-label="About IMUTV"] .imu-section:nth-of-type(3) .container > div > article{
    width: 100%;
  }
}


/* =========================
   Media tiles (cards)
   ========================= */
/* Mobile: 1 col; Tablet: 2; Desktop: 3 */
.imu-float-players{
  display:grid; gap:18px; margin:18px 0 32px;
  grid-template-columns:1fr;
}
@media (min-width: 768px){
  .imu-float-players{ grid-template-columns:1fr 1fr; }
}
@media (min-width: 1024px){
  .imu-float-players{ grid-template-columns:1fr 1fr 1fr; gap:48px; }
}

/* Base card */
.imu-float-card{
  background: var(--imu-panel);
  border:1px solid var(--imu-stroke); border-radius:var(--imu-radius);
  overflow:hidden; box-shadow: var(--imu-shadow);
  --imu-scale: 1; /* default scale for animated transform composition */
}
.imu-float-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* Plain (animated trio) – TALL & THIN (800h x 400w ≈ 1:2) */
.imu-float-card--plain{
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
}
.imu-float-card--plain img{
  aspect-ratio: 1 / 2; /* portrait */
  object-fit: cover;
  border-radius: 12px;
  display:block;
}

/* Desktop scaling for the trio — composed via CSS var to survive animation transform */
/* Increased size by 15% from previous .5 → .575 */
@media (min-width:1024px){
  .imu-float-card--xl{
    --imu-scale: .575;
    transform-origin: center center;
    will-change: transform;
    z-index: 1;
  }
  .imu-float-players .imu-float-card--xl.is-lowered{ z-index: 2; }
}

/* Float animation (includes scale composition via var) */
@keyframes imuCardFloat{
  0%   { transform: translateY(0) rotate(0deg) scale(var(--imu-scale, 1)); }
  50%  { transform: translateY(-12px) rotate(-0.8deg) scale(var(--imu-scale, 1)); }
  100% { transform: translateY(0) rotate(0deg) scale(var(--imu-scale, 1)); }
}
.imu-float-card--float{
  animation: imuCardFloat 3.8s ease-in-out infinite;
}
.imu-float-players .imu-float-card--float:nth-child(1){ animation-duration: 3.6s; animation-delay: .1s; }
.imu-float-players .imu-float-card--float:nth-child(2){ animation-duration: 4.0s; animation-delay: .35s; }
.imu-float-players .imu-float-card--float:nth-child(3){ animation-duration: 4.4s; animation-delay: .55s; }

/* Lower the middle card on desktop */
@media (min-width: 1024px){
  .imu-float-players .is-lowered{ translate: 0 28px; }
}

/* Utility: show only on desktop */
.only-desktop{ display:none; }
@media (min-width: 1024px){
  .only-desktop{ display:block; }
}

/* Keep frosted variant intact */
.imu-float-card.imu-glass{
  background: rgba(15,16,20,.55) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:1px solid var(--imu-stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* MOBILE ONLY: Show only the first card and scale it down slightly */
@media (max-width: 767.98px){
  /* Hide all cards after the first */
  .imu-float-players > article:nth-child(n+2){
    display: none !important;
  }

  /* Shrink the visible card’s image by ~10% and keep it centered */
  .imu-float-players .imu-float-card--plain img{
    width: 90%;              /* 10% smaller */
    margin: 0 auto;          /* center the portrait image within the card */
    display: block;
  }
}


/* =========================
   Devices marquee
   ========================= */
.imu-device-strip{
  display:flex; gap:24px; align-items:center; overflow:hidden;
  mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.imu-device-track{ display:flex; gap:28px; animation:imuMarquee 22s linear infinite; }
.imu-device{
  flex:0 0 auto; display:grid; place-items:center;
  width:auto; height:auto; background:transparent; border:0; border-radius:0;
}
.imu-device img{
  height:112px;
  width:auto; max-width:none; object-fit:contain; filter:brightness(1) contrast(1.1);
}
@keyframes imuMarquee{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* =========================
   Contact page – base inputs
   ========================= */
.imu-form{ max-width:720px; margin:0 auto; text-align:left; }
.imu-form .row{ display:flex; gap:14px; }
.imu-form .row > *{ flex:1; }
.imu-field{ margin:12px 0; }
.imu-field label{ display:block; margin-bottom:6px; color:var(--imu-gold); font-weight:700; }
.imu-input, .imu-textarea{
  width:100%; border:1px solid var(--imu-stroke); border-radius:10px;
  background:rgba(15,16,20,.55); color:#fff; padding:12px 14px;
}
.imu-textarea{ min-height:160px; resize:vertical; }
.imu-form .help{ font-size:.9rem; color:#cfcfcf; }

/* Responsive tweaks (shared) */
@media (max-width: 1024px){
  .imu-float-players{ grid-template-columns:1fr; }
  .imu-form .row{ flex-direction:column; }
}

/* =========================================================
   UPLOAD page (/upload)
   ========================================================= */
.imu-onboarding .imu-form{ max-width: 1200px; margin: 0 auto; text-align: left; }
.imu-onboarding .imu-longform{
  max-width: 1220px; margin: 0 auto 64px;
  background: rgba(15,16,20,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--imu-stroke);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}
.imu-onboarding .imu-form-section{ margin: 0; padding: 20px; border: 0; }
.imu-onboarding .imu-form-section + .imu-form-section{ border-top: 1px solid var(--imu-stroke); }
.imu-onboarding .imu-form-head{
  background: rgba(0,0,0,.4);
  border: 1px solid var(--imu-stroke);
  border-radius: 10px; padding: 12px 14px;
}
.imu-onboarding .imu-form-head h3{ margin: 0; color: var(--imu-gold); }
.imu-onboarding .imu-form-section h3{ color: var(--imu-gold); margin: 0 0 12px; }
.imu-onboarding .imu-field label{ color: #fff; font-weight: 700; display: block; margin: 0 0 6px; }
.imu-onboarding .imu-input,
.imu-onboarding .imu-textarea,
.imu-onboarding .imu-input[type="file"],
.imu-onboarding .imu-input[type="url"],
.imu-onboarding .imu-input[type="email"],
.imu-onboarding .imu-input[type="text"],
.imu-onboarding .imu-input[type="number"],
.imu-onboarding .imu-input[type="password"],
.imu-onboarding select.imu-input{
  background: var(--imu-field-bg) !important;
  color: var(--imu-field-text) !important;
  border: 1px solid var(--imu-stroke); border-radius: 10px;
  padding: 12px 14px; width: 100%;
}
.imu-onboarding .imu-input::placeholder,
.imu-onboarding .imu-textarea::placeholder{ color: #d7c680; opacity: .8; }
.imu-onboarding .grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* --- MOBILE-ONLY: Force single-column rows on Upload / Onboarding forms --- */
@media (max-width: 767.98px){
  /* Core fix: 2-col → 1-col on mobile */
  .imu-onboarding .grid-2{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* “Full” fields don’t need to span since we’re 1-col on mobile */
  .imu-onboarding .grid-2 .imu-field.full{
    grid-column: auto !important;
  }

  /* Tighten vertical rhythm a touch on mobile */
  .imu-onboarding .imu-field{ 
    margin: 10px 0 0;
  }

  /* Slightly tighter section padding on small screens */
  .imu-onboarding .imu-form-section{
    padding: 16px 14px;
  }
  .imu-onboarding .imu-form-head{
    padding: 10px 12px;
  }

  /* Keep inputs 100% wide and remove any inline crowding */
  .imu-onboarding .imu-input,
  .imu-onboarding .imu-textarea,
  .imu-onboarding select.imu-input{
    width: 100%;
    min-width: 0;
  }

  /* iOS zoom fix: ensure minimum 16px font-size on text inputs */
  .imu-onboarding .imu-input,
  .imu-onboarding select.imu-input{
    font-size: 16px;
  }

  /* Safety net: if these forms ever render outside .imu-onboarding */
  #imu-form-music .grid-2,
  #imu-form-creator .grid-2{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

.imu-onboarding .grid-2 .imu-field.full{ grid-column: 1 / -1; }
.imu-onboarding .grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.imu-onboarding .imu-field{ margin: 12px 0; }
.imu-onboarding input[type="file"].imu-input::-webkit-file-upload-button{
  background: #000; color: var(--imu-gold); border: 1px solid var(--imu-stroke);
  border-radius: 8px; padding: 6px 10px;
}
.imu-onboarding .imu-terms-inner{ max-width: 1080px; margin: 0 auto; }
.imu-onboarding .imu-terms-inner a{ color: var(--imu-gold); text-decoration: underline; }

/* =========================================================
   CONTACT – Big CTA buttons + layout beside QR
   ========================================================= */
.imu-big-cta{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:1px solid var(--imu-stroke);
  border-radius:12px;
  background: rgba(15,16,20,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color:#fff; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.imu-big-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  background: rgba(15,16,20,.7);
}
.imu-big-cta__icon{
  width:36px; height:36px; display:grid; place-items:center;
  font-size:22px; line-height:1; border-radius:10px;
  background:#000; border:1px solid var(--imu-stroke);
}
.imu-big-cta__text{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%; line-height:1.2;
}
.imu-big-cta__text strong{ color:var(--imu-gold); font-weight:800; display:block; }
.imu-big-cta__text span{
  color:#fff; opacity:.95; font-size:.95rem; margin-left:auto; text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contact-cta-wrap{ display:grid; gap:16px; align-items:start; }
@media (min-width: 992px){
  .contact-cta-wrap{ grid-template-columns: 1fr 1.1fr; }
}
/* Desktop-only: nudge QR slightly right and CTAs slightly left (towards center) */
@media (min-width: 992px){
  /* Scope to the Contact page only */
  .imu-contact .contact-cta-wrap{
    column-gap: 5px; /* small breathing space between columns */
  }

  /* QR = first child (left column) inside the grid */
  .imu-contact .contact-cta-wrap > .imu-glass{
    justify-self: end;           /* align to the right edge of its column */
    transform: translateX(108px); /* move a touch further right (towards center) */
  }

  /* CTA list = second child (right column) inside the grid */
  .imu-contact .contact-cta-list{
    justify-self: start;          /* align to the left edge of its column */
    transform: translateX(-48px); /* move a touch further left (towards center) */
  }
}

.imu-qr-img{ width:360px; max-width:85vw; height:auto; display:block; }
.contact-cta-list{ display:grid; gap:14px; max-width:720px; margin:0 auto; }

.imu-form-long{
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(15,16,20,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--imu-stroke);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 16px 18px;
}

/* === MOBILE ONLY: Contact page QR and CTA compaction === */
@media (max-width: 767.98px){
  /* 1) QR image: 360px → ~270px (−25%) and harder clamp to viewport */
  .imu-qr-img{
    width: 270px;            /* 25% smaller than desktop default */
    max-width: 70vw;         /* a bit tighter than previous 85vw */
    display: block;
    margin: 0 auto;          /* center the QR */
  }

  /* Ensure the QR’s glass wrapper centers and never causes horizontal drag */
  .contact-cta-wrap{
    overflow-x: hidden;      /* prevent accidental sideways scrolling */
    justify-items: center;   /* grid child centering when stacked */
  }
  .contact-cta-wrap .imu-glass{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* 2) CTA buttons: shrink ~25% to prevent overlap */
  .imu-big-cta{
    padding: 10.5px 12px;    /* 25% less than 14px 16px */
    border-radius: 10px;
    gap: 10px;
  }
  .imu-big-cta__icon{
    width: 27px;             /* 25% less than 36px */
    height: 27px;
    font-size: 18px;         /* scale the emoji/icon a touch */
    border-radius: 8px;
  }
  .imu-big-cta__text{
    gap: 8px;
    line-height: 1.15;
  }
  .imu-big-cta__text strong{
    font-size: 0.98rem;      /* slightly smaller headline on mobile */
  }

  /* The list wrapper can be a hair narrower to reduce edge pressure */
  .contact-cta-list{
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
  }
    /* Uniform sizing for all CTA buttons on mobile */
  .contact-cta-list{
    grid-template-columns: 1fr; /* single column */
    width: 100%;
    max-width: 600px;            /* keep a tidy max */
    margin-left: auto;
    margin-right: auto;
  }
  .imu-big-cta{
    width: 100%;
    min-height: 54px;            /* consistent button height */
    box-sizing: border-box;
  }
  .imu-big-cta__icon{
    flex: 0 0 27px;              /* lock icon box so widths don't vary */
  }
  
    .imu-onboarding .grid-3{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

}


/* =========================
   Profile page utilities
   ========================= */
.profile-stack{
  max-width:1200px;
  margin:0 auto;
  display:block;
}
.profile-stack > *{ display:block; width:100%; }
.profile-actions-inline{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.profile-form .grid-2{ grid-template-columns:1fr; }

/* =========================================================
   PARTNERSHIPS page helpers
   ========================================================= */
.partners-stack{ max-width:1200px; margin:0 auto; display:grid; gap:16px; }
.partners-title h1{ color:#fff; margin:0; }
.partners-title .tagline{ color:var(--imu-gold); font-weight:800; margin:6px 0 0; }

.imu-wide{ max-width:1920px; margin:0 auto; padding:0 20px; }
.imu-glass--flush{ padding:0; }
.imu-glass--flush img{ display:block; width:100%; height:auto; border-radius:12px; }

.partner-card .partner-head{ display:flex; align-items:center; justify-content:center; }
.partner-logo{ max-width:720px; width:100%; height:auto; display:block; margin:0 auto 8px; }
.partner-tagline{ color:var(--imu-gold); font-weight:800; margin:6px 0 10px; }
.partner-desc p{ margin:8px 0; }

/* === MOBILE ONLY: Partnerships — tighten gaps between first 3 sections === */
@media (max-width: 767.98px){
  /* Scope precisely to the Partnerships page */
  main[aria-label="IMUTV Partnerships"]{
    /* 1) Hero: reduce bottom padding */
    /* was 96px 0 48px */
  }
  main[aria-label="IMUTV Partnerships"] .imu-hero{
    padding: 72px 0 28px;
  }

  /* 2) Feature image section (first .imu-section):
     override inline padding-top:32px and reduce overall spacing */
  main[aria-label="IMUTV Partnerships"] .imu-section:nth-of-type(2){
    padding-top: 16px !important;  /* beats inline style */
    padding-bottom: 28px;
  }

  /* 3) Partner cards section (second .imu-section):
     reduce the top padding so it tucks closer to the image */
  main[aria-label="IMUTV Partnerships"] .imu-section:nth-of-type(3){
    padding-top: 20px !important;  /* beats inline style */
    /* keep your default bottom padding from .imu-section */
  }

  /* Optional micro-tighten inside the cards grid */
  main[aria-label="IMUTV Partnerships"] .partners-stack{
    gap: 12px; /* was 16px */
  }
}


/* =========================================================
   ADVERTISE page helpers
   ========================================================= */
.advertise-wrap{ max-width:1200px; margin:0 auto; display:grid; gap:16px; }
/* Title gold */
.advertise-title h1{ color: var(--imu-gold); margin:0 0 6px; }
.advertise-desc{ color:#fff; opacity:.95; margin:6px 0 0; }
.imu-about .advertise-wrap .imu-form-head h3{
    color: #fff !important; /* override onboarding gold */
  }



/* =========================================================
   HELP CENTRE page helpers
   ========================================================= */
.help-wrap{ max-width:1200px; margin:0 auto; display:grid; gap:18px; }
.help-title h1{ color:#fff; margin:0; }
.help-title .tagline{ color:var(--imu-gold); font-weight:800; margin:6px 0 0; }

/* Section titles (make sure white wins over .imu-about h2 gold) */
.faq-section-title{ color:#fff; margin:10px 0 6px; font-weight:800; }
.imu-about .faq-section-title{ color:#fff !important; } /* force white generally */
.imu-about .faq-section-title.faq-section-title--gold{ color: var(--imu-gold) !important; } /* explicit gold wins */

/* FAQ items */
.faq-stack{ display:grid; gap:12px; }
.faq-item{
  display:block;
  padding:16px 18px;
  background: rgba(15,16,20,.55);
  border:1px solid var(--imu-stroke);
  border-radius:12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align:left;
}
.faq-item .q{
  color: var(--imu-gold);
  font-weight:800;
  font-size: 1.08rem; /* slightly bigger than answer */
  margin:0 0 6px;
}
.faq-item .a{
  color:#fff;
  font-size: 1rem;
  margin:0;
}

/* =========================================================
   LATEST NEWS page helpers
   ========================================================= */
.news-wrap{ max-width:1200px; margin:0 auto; display:grid; gap:18px; }
.news-title h1{ color:#fff; margin:0; }
.news-card{
  position:relative;
  padding:18px 20px;
  background: rgba(15,16,20,.55);
  border:1px solid var(--imu-stroke);
  border-radius:12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align:left;
}
/* 2.5x larger logo stamp in cards */
.news-card .logo-stamp{
  position:absolute; right:12px; top:12px; width:100px; height:auto; opacity:.95;
}
.news-card .post-title{ color: var(--imu-gold); margin:0 0 6px; font-weight:800; }
.news-card .post-meta{ color:#cfcfcf; font-size:.9rem; margin:0 0 8px; }
.news-card .post-excerpt{ color:#fff; margin:0; }

/* Past updates grid */
.news-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 1024px){
  .news-grid{ grid-template-columns:1fr 1fr; }
}

/* Modal for full post */
.news-modal{
  position:fixed; inset:0; z-index:6000; display:none;
  background: rgba(0,0,0,.65);
}
.news-modal.is-open{ display:block; }
.news-modal__dialog{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:min(1000px, 92vw); max-height:85vh; overflow:auto;
  background: rgba(15,16,20,.75);
  border:1px solid var(--imu-stroke);
  border-radius:14px; padding:20px 22px 24px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  text-align:left;
}
/* modal logo stamp (same size as card stamp), to the left of the close button */
/* Legacy floating stamp disabled in favour of header bar logo */
.news-modal__stamp{ display:none !important; }

/* Close button will live inside the header bar (not absolutely positioned) */
.news-modal__close{
  position: static !important;
  right: auto !important;
  top: auto !important;
  background:transparent;
  color:#fff;
  border:1px solid var(--imu-stroke);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  transition:.15s ease;
  z-index:auto;
}

/* hover state: gold background + black text */
.news-modal__close:hover{
  background: var(--imu-gold);
  border-color: #000;
  color: #000;
}
.news-modal__title{ color:var(--imu-gold); margin:0 0 6px; }
.news-modal__meta{ color:#cfcfcf; font-size:.9rem; margin:0 0 12px; }
.news-modal__content{ color:#fff; }

/* --- News card header band (both Desktop + Mobile) --- */
.news-card{
  position: relative;
  padding: 0; /* body will have its own padding now */
  overflow: hidden;
  cursor: pointer; /* helps on mobile */
}
.news-card__head{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;                /* compact header band */
  border-bottom: 1px solid var(--imu-stroke);
  background: rgba(0,0,0,.35); /* subtle band behind logo */
}
.news-card__logo{
  max-height: 46px;
  width: auto;
  height: auto;
  display: block;
  filter: brightness(1) contrast(1.05);
}
.news-card__body{
  padding: 16px 18px;
  text-align: left;
}

/* Decommission the old absolute logo placement */
.news-card .logo-stamp{ display:none !important; }

/* Mobile ONLY: hide excerpt on cards (keep it in modal) */
@media (max-width: 767.98px){
  .news-card .post-excerpt{ display:none !important; }
}

/* Make the modal layout rock-solid on touch devices */
.news-modal{
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;                    /* default hidden */
  background: rgba(0,0,0,.65);
}
.news-modal.is-open{ display: flex; align-items: center; justify-content: center; }

.news-modal__dialog{
  width: min(1000px, 92vw);
  max-height: 85vh;
  overflow: auto;
  background: rgba(15,16,20,.75);
  border: 1px solid var(--imu-stroke);
  border-radius: 14px;
  padding: 20px 22px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  text-align: left;
  position: relative;               /* no absolute/translate centering */
}

/* Neon blue hover for announcement cards (desktop pointers only) */
.news-card{
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}

@media (hover:hover) and (pointer:fine){
  .news-card:hover{
    border-color: rgba(0, 200, 255, .65);
    box-shadow:
      0 0 0 1px rgba(0, 200, 255, .55),
      0 10px 28px rgba(0, 200, 255, .22),
      0 0 22px rgba(0, 200, 255, .18);
    transform: translateY(-1px);
  }
  .news-card:hover .news-card__head{
    background: linear-gradient(0deg, rgba(0,200,255,.10), rgba(0,200,255,.02));
  }
}

/* Hard overrides to guarantee flex-centering for modals on all viewports */
.news-modal{ position: fixed !important; inset: 0 !important; z-index: 6000 !important; }
.news-modal.is-open{ display: flex !important; align-items: center !important; justify-content: center !important; }

.news-modal__dialog{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(1000px, 92vw) !important;
  max-height: 85svh !important;              /* svh fixes iOS 15+ viewport quirks */
  margin: 0 12px !important;                 /* small side gutters on narrow screens */
  -webkit-overflow-scrolling: touch;
  contain: layout paint;                     /* prevents odd overflows during open */
}

/* Make sure the overlay always covers the live viewport height */
.news-modal{
  min-height: 100dvh;
}

/* While a modal is open, kill any translate-induced containing blocks
   (belt & suspenders; the portal already fixes it) */
html.modal-open .reveal{
  translate: none !important;
}

/* =========================================================
   LATEST NEWS — Modal header bar & content hierarchy
   - Logo far-left + Close far-right on one row
   - Title centred below the header bar
   - Date moved to the bottom with a divider
   ========================================================= */

/* Header bar (logo left, close right) */
.news-modal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  /* Pull the bar flush with the dialog’s padding for a clean edge-to-edge feel */
  margin:-20px -22px 12px;
  border-bottom:1px solid var(--imu-stroke);
  background:rgba(0,0,0,.25);
}

/* Brand container/logo inside the header bar */
.news-modal__brand-logo{
  height:36px;
  width:auto;
  display:block;
  filter:brightness(1) contrast(1.05);
}

/* Close button now inline in the bar (redundant safety net overrides kept) */
.news-modal__close{
  position: static !important;
  right: auto !important;
  top: auto !important;
  background:transparent;
  color:#fff;
  border:1px solid var(--imu-stroke);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  transition:.15s ease;
  z-index:auto;
}

/* Title centred and slightly separated from the header bar */
.news-modal__title{
  color:var(--imu-gold);
  text-align:center;
  margin:6px 0 12px;
}

/* Date line anchored at the bottom of the dialog’s content */
.news-modal__meta{
  color:#cfcfcf;
  font-size:.9rem;
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--imu-stroke);
  text-align:center;
}


/* =========================================================
   UPLOAD PAGE – Tier display cards (gold → neon blue on hover/focus)
   ========================================================= */
.imu-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 24px;
}

/* Default state – gold border & gold text */
.imu-tier-card {
  background: linear-gradient(to bottom, #1a1b20, #0f1014);
  border: 2px solid var(--imu-gold);          /* GOLD */
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  color: var(--imu-gold);                     /* GOLD */
  box-shadow: 0 4px 12px rgba(230,206,104,.15);
  transition: all .22s ease;
  cursor: default;
}

/* Hover / Focus – neon blue border & neon blue text */
.imu-tier-card:hover,
.imu-tier-card:focus-within {
  border-color: #00c8ff;                      /* NEON BLUE */
  color: #00c8ff;                             /* NEON BLUE */
  box-shadow: 0 6px 18px rgba(0,200,255,.25);
  transform: translateY(-2px);
}

/* “IMUTV Storage” – white, 25 % smaller */
.imu-tier-card h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;               /* 25 % smaller than default 1.2rem */
  font-weight: 800;
  color: #fff;                     /* WHITE */
}

/* Storage & price lines – keep gold (default) / blue (hover) */
.imu-tier-card p {
  margin: 4px 0;
  font-size: 1rem;
}
.imu-tier-card p strong {
  font-weight: 800;
}

/* -----------------------------------------------------------------
   Responsive tweaks
   ----------------------------------------------------------------- */
@media (max-width: 767px) {
  .imu-tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
    padding: 0 12px;
  }
  .imu-tier-card { padding: 12px; }
  .imu-tier-card h3 { font-size: 0.85rem; }   /* keep 25 % reduction on mobile */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imu-tiers { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   ADVERTISE PAGE – Use the same tier-card styling
   ========================================================= */
.imu-ad-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 24px;
}

/* Responsive – same as Upload tiers */
@media (max-width: 767px) {
  .imu-ad-packages {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
    padding: 0 12px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .imu-ad-packages { grid-template-columns: repeat(2, 1fr); }
}

  /* Radio group inline on same row */
  .imu-radio-group {
    display: flex !important;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .imu-radio-group label {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .imu-radio-group input[type="radio"] {
    margin-right: 6px;
  }
  
/* Message box for monetization (dark grey bg, gold text) */
.imu-message-box {
  background: #0f1014 !important;  /* Matches --imu-panel */
  color: var(--imu-gold) !important;
  padding: 12px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,.08); /* Subtle stroke for depth */
}

/* Ensure grid-3 is 3 columns on desktop */
@media (min-width: 768px) {
  .imu-onboarding .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .custom-token-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* FINAL FIX: Ensure profile & storage pages are always above background */
#primary,
.imu-hero,
.imu-section,
.imu-glass,
.imu-float-card,
.container {
  position: relative !important;
  z-index: 10 !important;
}

/* Fix any possible background overlay issues */
.imu-bg-dim {
  z-index: 1 !important;
}

/* FINAL FINAL – Permanent removal of any debug banners on storage page */
div[style*="background:red"][style*="STORAGE PAGE LOADED"],
div[style*="position:fixed"][style*="top:10px"][style*="left:10px"] {
  display: none !important;
}