/* templates/mobile/mobile.css */
/* Mobile “app shell” + responsive overrides
   IMPORTANT: Load /css/frontend.css BEFORE this file so mobile overrides win.
*/

:root{
  --uta-bg: #1a1a1a;
  --uta-panel: #2b2b2b;
  --uta-border: rgba(255,255,255,.10);
  --uta-text: rgba(255,255,255,.92);
  --uta-muted: rgba(255,255,255,.68);

  --uta-red: #8b0000;
  --uta-gold: gold;

  --uta-appbar-h: 56px;
  --uta-bottom-h: 64px;
}

html, body{
  height: 100%;
}

/* Make sure the main layout doesn’t get weird with fixed bars */
body{
  padding-top: var(--uta-appbar-h);
  padding-bottom: var(--uta-bottom-h);
  overflow-x: hidden;
}

/* ----------------------------- */
/* App-like Top Bar (header)     */
/* ----------------------------- */

.uta-appbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--uta-appbar-h);
  z-index: 1100;

  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 0 10px;

  background: rgba(139,0,0,.95);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.uta-appbar-title{
  text-align: center;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1;
  color: var(--uta-gold);
}

.uta-brand-link{
  color: var(--uta-gold) !important;
  text-decoration: none !important;
}

.uta-icon-btn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--uta-gold);
  text-decoration: none !important;
  font-size: 22px;
}

.uta-icon-btn:active{
  transform: scale(.98);
}

/* ----------------------------- */
/* Drawer (hamburger menu)       */
/* ----------------------------- */

.uta-drawer{
  background: #0f0f15;
  color: var(--uta-text);
  border-right: 1px solid var(--uta-border);
}

.uta-drawer .offcanvas-header{
  border-bottom: 1px solid var(--uta-border);
}

.uta-drawer-title{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--uta-gold);
}

.uta-drawer-subtitle{
  font-size: 12px;
  color: var(--uta-muted);
}

.uta-drawer-logo{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--uta-red), #4b0000);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

.uta-drawer-nav{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uta-drawer-link,
.uta-drawer-sublink{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  border: 1px solid transparent;
}

.uta-drawer-link{
  font-weight: 800;
  letter-spacing: .35px;
  color: #fff !important;
}

.uta-drawer-sublink{
  padding-left: 18px;
  color: rgba(255,255,255,.75) !important;
}

.uta-drawer-link:hover,
.uta-drawer-sublink:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: #fff !important;
}

.uta-drawer-section{
  margin-top: 10px;
  padding: 6px 12px 2px;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.uta-drawer-divider{
  margin: 10px 0;
  height: 1px;
  background: var(--uta-border);
}

/* ----------------------------- */
/* Bottom Nav                    */
/* ----------------------------- */

.uta-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--uta-bottom-h);
  z-index: 1100;

  background: rgba(15,15,21,.92);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.uta-bottom-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  text-decoration: none !important;

  color: rgba(255,255,255,.70) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
}

.uta-bottom-item i{
  font-size: 20px;
  color: var(--uta-gold);
}

.uta-bottom-item:hover{
  color: #fff !important;
}

/* ----------------------------- */
/* Main content sizing tweaks    */
/* ----------------------------- */

.uta-app-content{
  /* if you use wrapper div like in the mobile header/footer I gave you */
  width: 100%;
}

.uta-content-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 12px 20px;
}

/* Override your desktop constraint: mobile should breathe */
.site-content{
  max-width: 100% !important;
  padding: 12px !important;
}

/* Your current CSS makes .main-content/.sidebar red with padding; on mobile that can be heavy.
   Keep the style but tighten spacing a bit. */
.main-content,
.sidebar{
  padding: 12px !important;
  border-radius: 10px !important;
}

/* Top boxes: your desktop forces 3-in-a-row no-wrap. On mobile we must allow wrap or it will explode. */
.top-boxes{
  flex-wrap: wrap !important;
}

.top-box{
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
}

.top-box img{
  width: 100%;
  height: auto;
}

/* Content boxes look good — just tighten padding for phone */
.content-box{
  padding: 14px !important;
  border-radius: 12px !important;
}

/* ----------------------------- */
/* Keep roster/promos usable     */
/* ----------------------------- */

/* Roster: headshots smaller and more columns on larger phones */
.headshot-grid{
  gap: 12px !important;
}

.headshot-grid img,
.character-img{
  width: 120px !important;
}

/* Search bars should be full-width */
.roster-search,
#searchBar{
  width: 100% !important;
  max-width: 100% !important;
}

/* Promos: stack image above text on small screens */
.promo-entry{
  flex-direction: column !important;
  gap: 10px !important;
}

.promo-image img{
  width: 100% !important;
  height: auto !important;
  max-height: 220px;
  object-fit: cover;
}

/* Event cards/grids: make cards flexible */
.event-grid,
.booking-grid{
  gap: 12px !important;
}

.event-card{
  width: 48% !important;
}

.booking-card{
  width: 100% !important;
}

/* Profile header: stack image above info */
.profile-header{
  flex-direction: column !important;
  gap: 12px !important;
}

.profile-photo{
  margin-right: 0 !important;
}

.profile-photo img{
  width: 160px !important;
  height: 160px !important;
}

/* Tabs: make button row scroll if too many */
.tabs .tab-buttons{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs .tab-buttons button{
  flex: 0 0 auto;
  min-width: 140px;
}

/* Tables: prevent horizontal blowouts on mobile */
.chronology-table,
.win-loss-table,
.rankings-table,
.history-table,
.tabs table,
.in-ring-table{
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Images should never overflow */
img{
  max-width: 100%;
  height: auto;
}

/* Reduce oversized headings slightly */
.page-title,
.chronology-title{
  font-size: 1.6rem !important;
}

/* Touch targets: make links/buttons a bit easier */
a, button{
  -webkit-tap-highlight-color: transparent;
}

/* Optional: hide desktop navbar if it still renders in content pages */
.navbar{
  display: none !important;
}

/* If any page hardcodes header/footer sections, make sure they don't fight */
.site-header,
footer{
  display: none !important;
}

/* Small devices fine tuning */
@media (min-width: 480px){
  .event-card{
    width: 220px !important;
  }
  .booking-card{
    width: 320px !important;
  }
}

@media (min-width: 768px){
  /* On tablets, show more of the desktop-like layout while keeping app shell */
  .uta-content-inner{
    padding: 14px 16px 24px;
  }

  .event-card{
    width: 240px !important;
  }
}