/*!
 * Move Your World Beat – site styles
 *
 * Load AFTER base.css and move-your-world-beat.css. Adds only what the original package lacked:
 *   0. Plain-HTML support (video links, native lightbox)
 *   1. Visible keyboard focus indicators
 *   2. Comfortable touch targets (touch devices only, so desktop is unchanged)
 */

/* ---------------------------------------------------------------------------
   0. Plain-HTML support
   --------------------------------------------------------------------------- */
:root {
  --brand-anchor-offset: 16px; /* scroll-margin for anchor links; raise if a sticky header is added */
}

/* Video thumbnails are real links (they open YouTube if JavaScript is unavailable) */
a.cpl-link-lightbox {
  color: inherit;
  display: block;
  text-decoration: none;
}

/* Video lightbox: native <dialog>, styled like the original lightGallery one:
   #101010 backdrop at 85 %, player filling the whole viewport, 50x50 close button centred on the right edge */
dialog.mywb-lightbox {
  background: transparent;
  border: 0;
  color: #fff;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
dialog.mywb-lightbox::backdrop {
  background: rgba(16, 16, 16, 0.85);
}
.mywb-lightbox__frame {
  inset: 0;
  position: absolute;
}
/* .mywb-lightbox__frame iframe { */
  /* border: 0; */
  /* display: block; */
  /* height: 100%; */
  /* width: 100%; */
/* } */

.mywb-lightbox__frame iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, calc(100vh * 16 / 9));
  width: min(100%, calc(100dvh * 16 / 9));
}
.mywb-lightbox__close {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  height: 50px;
  padding: 0;
  position: absolute;
  right: 0;
  top: calc(50% - 25px);
  width: 50px;
  z-index: 2;
}
.mywb-lightbox__close:before,
.mywb-lightbox__close:after {
  border-left: 2px solid #fff;
  content: "";
  height: 2.222rem;
  left: calc(50% - 2px);
  position: absolute;
  top: 0.555rem;
}
.mywb-lightbox__close:before {
  transform: rotate(45deg);
}
.mywb-lightbox__close:after {
  transform: rotate(-45deg);
}
/* Phones / portrait: close button in the top-right corner (in the black area above the video), not over the picture */
@media (max-width: 767px), (orientation: portrait) {
  .mywb-lightbox__close {
    right: 4px;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
  }

.mywb-lightbox__close:hover {
  opacity: 0.85;
}
.mywb-lightbox__close:focus-visible {
  border-radius: 8px;
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -5px;
}

/* ---------------------------------------------------------------------------
   1. Keyboard focus
   The original buttons set `outline: none` and showed no focus indicator.
   :focus-visible keeps the ring off for mouse clicks and on for keyboard use.
   --------------------------------------------------------------------------- */
:root {
  --mywb-focus: #eb0a1e; /* Toyota red: 4.6:1 on white and on black */
  --mywb-focus-on-dark: #ffffff;
}

main a:focus-visible,
main [role="button"]:focus-visible,
.artist-profile-dialog a:focus-visible,
.cpl-cta--scroll:focus-visible {
  outline: 3px solid var(--mywb-focus) !important;
  outline-offset: 3px !important;
}

/* Video thumbnails: the image is absolutely positioned and paints over an outline, so the
   ring is drawn as an overlay above it (red ring + white inner line: visible on any artwork) */
main .cpl-link-lightbox {
  position: relative;
}
main .cpl-link-lightbox:focus-visible {
  outline: none !important;
}
main .cpl-link-lightbox:focus-visible:after {
  border: 4px solid var(--mywb-focus);
  box-shadow: inset 0 0 0 3px #fff;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

/* Dark sections: switch to a white ring so it stays visible */
.cpl-sec-bg-black a:focus-visible,
.cpl-sec-bg-black [role="button"]:focus-visible,
.cpl-masthead a:focus-visible {
  outline-color: var(--mywb-focus-on-dark) !important;
}

/* Spotify player: the iframe is a tab stop too */
main iframe:focus-visible {
  outline: 3px solid var(--mywb-focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   2. Touch targets (WCAG 2.5.5 / Apple HIG: at least 44 x 44 px)
   Original: card buttons were 40px tall, artist-dialog social links 14px tall.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .cpl-news-events-link .mdc-button,
  .cpl-card .mdc-button--text {
    min-height: 44px;
    min-width: 44px;
  }

  .artist-profile-dialog__socials > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }

  .artist-profile-dialog__socials > div > span {
    margin-right: 0.35rem;
  }

  .artist-profile-dialog__socials a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    padding: 0 0.15rem;
  }
}

/* ---------------------------------------------------------------------------
   3. Carried over from the original page's inline <style>
   --------------------------------------------------------------------------- */
.cpl_brand_masthead .cpl-masthead-media > picture {
  margin-top: 0 !important;
}

/* Hero darkening. On wide screens the original page shows the hero photo dimmed (the lazy-loader leaves it
   at the base .cpl-lazy opacity of 0.5, giving the dark "overlay" look); on phones and small tablets it is
   shown at full strength. The original decided this by a load race; here it is a fixed rule by width. */
@media (min-width: 900px) {
  .cpl-masthead-media img.cpl-lazy {
    opacity: 0.5;
  }
}

/* Shown in the lightbox instead of the player when the page is opened straight from disk (file://) */
.mywb-lightbox__notice {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  justify-content: center;
  margin: 0 auto;
  max-width: 34rem;
  padding: 1.5rem 4rem 1.5rem 1.5rem;
  text-align: center;
}
.mywb-lightbox__notice p {
  margin: 0;
}
.mywb-lightbox__notice a {
  align-items: center;
  background: #eb0a1e;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 44px;
  padding: 0 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
}
.mywb-lightbox__notice a:hover {
  background: #c40818;
}
.mywb-lightbox__notice a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}