/*
 * polish.css – small, additive fixes on top of main.css / main_linkpage.css
 * (loaded after them by BaseLayout). Plain CSS, served as-is from
 * public/static/styles/polish.css; this file in styles-src/ is the same source.
 * Colors are the ones from _definitions.scss.
 */

/* ---------- Keyboard focus: visible ring only for keyboard users ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #80CBC4; /* $color-mint-3 */
  outline-offset: 3px;
  box-shadow: none;
}
.navbar-toggler:focus-visible {
  outline-offset: 0;
}

/* Skip the focus ring on mouse clicks (Bootstrap adds a box-shadow on :focus) */
.btn:focus:not(:focus-visible),
.navbar-toggler:focus:not(:focus-visible) {
  box-shadow: none;
}

/* ---------- Footer: larger tap targets (min. 44x44 px) ---------- */
footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-top: 0;
  text-decoration: none;
  margin-left: 4px;
  margin-right: 4px;
}
footer .footer-links a {
  display: inline-block;
  padding: 10px 2px;
}

/* ---------- Images: no layout shift, never wider than their column ---------- */
.cover-list img {
  max-width: 100%;
  height: auto;
}
img.img-fluid,
.campaign-play .store-logo {
  height: auto;
}

/* ---------- Long URLs in the legal texts must not widen the page ---------- */
.main-content p,
.main-content li {
  overflow-wrap: anywhere;
}

/* ---------- Landing page: letter-spaced name fits small screens ---------- */
.tts-full-image p.full-image-text {
  /* letter-spacing also adds space after the last letter – balance it on the left */
  padding-left: 2rem;
}
@media (max-width: 991.98px) {
  .tts-full-image p.full-image-text {
    letter-spacing: 1rem;
    padding-left: 1rem;
  }
}
@media (max-width: 575.98px) {
  .tts-full-image p.full-image-text {
    letter-spacing: 0.4rem;
    padding-left: 0.4rem;
  }
}

/* ---------- Link page: no horizontal scrolling on phones ---------- */
.linkpage-container > .row {
  margin-left: 0;
  margin-right: 0;
}
@media (max-width: 575.98px) {
  .linkpage h1 {
    letter-spacing: 0.6rem;
  }
}

/* ---------- Video previews: show they are clickable / focusable ---------- */
.youtube-video[role="button"] {
  cursor: pointer;
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Long (German) words in headings of the legal pages ---------- */
.main-content h1,
.main-content h2,
.main-content h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- Video preview: the consent note is now visible on phones too ---------- */
.youtube-video .preview-note {
  margin-top: 0.5rem;
}
@media (max-width: 575.98px) {
  .youtube-video .preview-inner p {
    margin-bottom: 0.25rem;
    font-size: 0.8rem !important;
  }
  .youtube-video .preview-inner p.fs-4 {
    font-size: 1rem !important;
  }
  .youtube-video .preview-inner img {
    width: 18% !important;
  }
}

/* ======================= v1.1 (Oct 2026) ======================= */

/* ---------- Home: hero photo as responsive <picture> (was a CSS background) ---------- */
.tts-full-image-img,
.tts-full-image picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tts-full-image-img {
  object-fit: cover;
  object-position: top center;
}
.tts-full-image p.full-image-text {
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}
/* mobile menu open: hide the big name so it doesn't shine through the overlay */
#overlay.show ~ .wrap .full-image-text {
  opacity: 0;
}
/* no dark band between the full-screen photo and the footer */
body.landing footer {
  margin-top: 0;
}
body.landing .main-content {
  margin-top: 0;
}

/* ---------- Link page: blurred backdrop as small <img> ---------- */
.linkpage-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Navigation: aligned icons, current page, smooth hover ---------- */
.navbar .nav-link i {
  display: inline-block;
  width: 1.4em;
  text-align: center;
}
.navbar .nav-link {
  transition: opacity 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid transparent;
}
.navbar .nav-link[aria-current="page"] {
  border-bottom-color: rgba(128, 203, 196, 0.55); /* $color-mint-3 */
}
@media (max-width: 991.98px) {
  .navbar:not(.navbar-landing) .nav-link {
    display: inline-block;
  }
}

/* ---------- Release covers: gentle lift on hover / keyboard focus ---------- */
.cover-list {
  border-radius: 2px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cover-list .cover-shadow {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.cover-list:hover,
.cover-list:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.cover-list:hover .cover-shadow,
.cover-list:focus-visible .cover-shadow {
  border-color: rgba(128, 203, 196, 0.6);
}

/* ---------- Buttons (streaming links etc.): smooth state changes ---------- */
.btn-border,
.btn-linklist {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.campaign-play .btn-border:hover,
.campaign-play .btn-border:focus-visible {
  border-color: rgba(128, 203, 196, 0.6) !important;
}

/* ---------- Release page: back link + "more music" ---------- */
.release-back {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #80CBC4;
}
.release-back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.more-releases .cover-list {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 16px;
}
.more-releases .cover-list img {
  width: 150px;
}
@media (max-width: 575.98px) {
  .more-releases .cover-list img {
    width: 130px;
  }
}

/* Section headings that were h1 before (one h1 per page): keep the original h1 look.
   Bootstrap's .h1 would otherwise set font-weight 500. */
h2.h1 {
  font-weight: 300;
  margin-bottom: 16px;
}