/* Minimal, cleaned styles for Rádio Universitária site */

:root{
  --header-height: clamp(56px, 8vh, 110px);
  --radio-max-height: calc(var(--header-height) * 1.1);
  --corner-logo-height: 40px;
  --gap: 1rem;
}

/* Header layout */
header{
  border-bottom: 0;
  background: transparent;
}

header .container{
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 0 1rem;
  position: relative; /* for absolute corner logos */
}

/* Site logo (now used for the Rádio logo) */
.logo-ufrr{
  max-height: var(--radio-max-height);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
}

/* Right-side banner (kept optional, hidden by default via d-none) */
.header-large-logo{
  max-height: calc(var(--header-height) * 0.9);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  max-width: 45%;
}

/* Centered banner above the player */
.center-banner{
  display: block;
  margin: 0 auto 1rem;
  width: clamp(225px, 56%, 225px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 0 none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Remove decorations so visuals are flush */
.header-large-logo,
.logo-ufrr,
.center-banner{
  border: 0 none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Player play button animation */
#playBtn.playing{
  animation: pulse 1.6s infinite;
  box-shadow: 0 6px 24px rgba(13,110,253,0.18);
}

@keyframes pulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* Card: make flush but keep internal spacing */
.card{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.card .card-body{
  background: transparent !important;
  padding: 1.5rem !important;
}

/* Social icons */
.social-icons a,
footer .btn{
  transition: transform 150ms ease;
}
.social-icons a:hover,
footer .btn:hover{
  transform: translateY(-2px);
}

/* MOBILE: place logo as a corner icon but vertically centered inside the header */
@media (max-width: 767px){
  .logo-ufrr{
    position: absolute;
    left: 0.5rem;
    /* center vertically inside the header container */
    top: calc((var(--header-height) - var(--corner-logo-height)) / 2);
    transform: none;
    max-height: var(--corner-logo-height);
    z-index: 50;
  }

  /* ensure header content sits beside the corner logo, not underneath */
  header .container{
    /* remove extra top padding to avoid pushing header down */
    padding-top: 0;
    height: var(--header-height);
    align-items: center;
    /* add left padding so header content doesn't overlap the corner logo */
    padding-left: calc(var(--corner-logo-height) + 1rem);
  }

  /* center the remaining header-left content horizontally */
  .header-left{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* center nav/socials */
    gap: var(--gap);
  }

  .header-large-logo{
    max-height: var(--corner-logo-height);
  }
}

/* Small screen tweaks */
@media (max-width: 480px){
  .center-banner{ width: 92%; margin-bottom: 0.75rem }
  header .container{ padding-left: 0.75rem; padding-right: 0.75rem }
}

/* Accessibility: visible focus outline */
:focus{
  outline: 3px solid rgba(13,110,253,0.18);
  outline-offset: 2px;
}

/* Keep any remaining necessary styles (kept minimal). */