/* ==========================================================================
   Music Release Widget — music-widget.css

   Scoping rules: every selector starts with an .mw- class, no bare element
   selectors, custom properties live on .mw-card (never :root). Selectors that
   override common theme element rules (a, h2, p, ul, button) are written as
   .mw-card .mw-x so they out-rank the theme.

   Typography matches the Oráiste theme: Italiana headings (uppercase, 400)
   and Prompt text (300 body, 400 labels), 0.05em-tracked 14px labels.
   ========================================================================== */

/* Self-hosted fonts, bundled with the plugin in assets/fonts/. Family names are
   prefixed so they never clash with a theme's own Google Fonts faces.
   Italiana has no latin-ext file: letters such as ş or ğ in a title fall back
   to the next serif in the stack. */
@font-face {
  font-family: 'MW Italiana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mw-italiana-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MW Prompt';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/mw-prompt-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MW Prompt';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/mw-prompt-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'MW Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mw-prompt-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MW Prompt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/mw-prompt-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Card + tokens
   -------------------------------------------------------------------------- */
.mw-container {
  display: block;
  width: 100%;
}

.mw-card {
  --mw-font-heading: 'MW Italiana', 'Italiana', 'Didot', 'Bodoni 72', Georgia, serif;
  --mw-font-body: 'MW Prompt', 'Prompt', 'Helvetica Neue', Arial, sans-serif;
  --mw-bg: #ffffff;
  --mw-surface: #f1ede7;
  --mw-text: #121212;
  --mw-text-muted: #6f6f6f;
  --mw-accent: #f2652e;
  /* Darkened accent for small text: #f2652e on white is too pale to read. */
  --mw-accent-strong: #b8410f;
  --mw-border: rgba(0, 0, 0, 0.12);
  --mw-border-strong: rgba(0, 0, 0, 0.22);
  --mw-fill: rgba(0, 0, 0, 0.02);
  --mw-radius: 4px;
  --mw-max-width: 520px;
  --mw-pad: 20px;
  --mw-gap: 8px;
  --mw-btn-height: 54px;
  --mw-art-size: 100%;
  --mw-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --mw-duration: 220ms;

  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: var(--mw-max-width);
  margin: 0 auto;
  padding: var(--mw-pad);
  background-color: var(--mw-bg);
  color: var(--mw-text);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius);
  font-family: var(--mw-font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.666;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.mw-card *,
.mw-card *::before,
.mw-card *::after {
  box-sizing: border-box;
}

/* layout="buttons": just the links, no frame — the page around it already
   introduces the release. */
.mw-card.mw-card--buttons {
  padding: 0;
  background-color: transparent;
  border-color: transparent;
}

@media (min-width: 480px) {
  .mw-card {
    --mw-pad: 32px;
  }
}

/* Adopt the surrounding theme's typography (WordPress). A custom property set
   to the bare keyword `inherit` inherits the *property* from the parent, where
   it is undefined — so font-family falls back to inheriting from the page.
   Headings pick up Oráiste's heading font when its variable is present. */
.mw-inherit-type .mw-card,
.mw-card.mw-inherit-type {
  --mw-font-heading: var(--qode-heading-font-family, inherit);
  --mw-font-body: inherit;
}

/* --------------------------------------------------------------------------
   Artwork + heading
   -------------------------------------------------------------------------- */
.mw-card .mw-art {
  position: relative;
  width: var(--mw-art-size);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
}

.mw-card .mw-art-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
}

.mw-card .mw-head {
  margin: 22px 0 24px;
  text-align: center;
}

.mw-card .mw-eyebrow {
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--mw-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-accent-strong);
}

.mw-card .mw-title {
  margin: 0;
  padding: 0;
  font-family: var(--mw-font-heading);
  font-size: clamp(34px, 9vw, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mw-text);
  overflow-wrap: break-word;
}

.mw-card .mw-artist {
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--mw-font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mw-text-muted);
}

/* --------------------------------------------------------------------------
   Player
   -------------------------------------------------------------------------- */
.mw-card .mw-player {
  margin: 0 0 16px;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--mw-surface);
}

.mw-card .mw-player--compact { height: 152px; }
.mw-card .mw-player--tall { height: 352px; }

.mw-card .mw-player-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
}

/* --------------------------------------------------------------------------
   Platform buttons
   -------------------------------------------------------------------------- */
.mw-card .mw-list {
  display: grid;
  gap: var(--mw-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-card .mw-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-card .mw-item::before,
.mw-card .mw-item::marker {
  content: none;
}

.mw-card .mw-btn,
.mw-card .mw-contact-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--mw-btn-height);
  margin: 0;
  padding: 0 18px;
  font-family: var(--mw-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  color: var(--mw-text);
  background-color: var(--mw-fill);
  border: 1px solid var(--mw-border-strong);
  border-radius: var(--mw-radius);
  box-shadow: none;
  cursor: pointer;
  transition:
    color var(--mw-duration) var(--mw-ease),
    background-color var(--mw-duration) var(--mw-ease),
    border-color var(--mw-duration) var(--mw-ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mw-card .mw-btn-icon {
  display: inline-flex;
  flex: none;
  width: 22px;
  height: 22px;
}

.mw-card .mw-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.mw-card .mw-btn-name,
.mw-card .mw-contact-label {
  flex: 1 1 auto;
  min-width: 0;
}

.mw-card .mw-btn-tag {
  flex: none;
  font-family: var(--mw-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-text-muted);
  transition: color var(--mw-duration) var(--mw-ease);
}

.mw-card .mw-btn--primary .mw-btn-tag {
  color: var(--mw-accent-strong);
}

/* Clean invert. Hover only where hover exists, so taps don't leave it stuck. */
@media (hover: hover) {
  .mw-card .mw-btn:hover,
  .mw-card .mw-contact-btn:hover {
    color: var(--mw-bg);
    background-color: var(--mw-text);
    border-color: var(--mw-text);
  }
  .mw-card .mw-btn:hover .mw-btn-tag,
  .mw-card .mw-contact-btn:hover .mw-btn-tag {
    color: var(--mw-bg);
  }
}

.mw-card .mw-btn:active,
.mw-card .mw-contact-btn:active {
  color: var(--mw-bg);
  background-color: var(--mw-text);
  border-color: var(--mw-text);
}

.mw-card .mw-btn:active .mw-btn-tag,
.mw-card .mw-contact-btn:active .mw-btn-tag {
  color: var(--mw-bg);
}

.mw-card .mw-btn:focus-visible,
.mw-card .mw-contact-btn:focus-visible,
.mw-card .mw-toggle-btn:focus-visible,
.mw-card .mw-social-link:focus-visible {
  outline: 1px solid var(--mw-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   "More services" drawer
   Without JS the extra platforms are simply shown and the toggle is hidden.
   With JS (html.mw-js, set before first paint) they start collapsed.
   The 0fr → 1fr grid-row transition animates to the real content height.
   -------------------------------------------------------------------------- */
.mw-card .mw-extra-wrap {
  display: grid;
  grid-template-rows: 1fr;
}

.mw-card .mw-extra-platforms {
  min-height: 0;
  overflow: hidden;
}

.mw-card .mw-list--extra {
  padding-top: var(--mw-gap);
}

.mw-js .mw-card .mw-extra-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 250ms var(--mw-ease),
    opacity 250ms var(--mw-ease),
    visibility 0s linear 250ms;
}

.mw-js .mw-card .mw-extra-wrap.mw-is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 250ms var(--mw-ease),
    opacity 250ms var(--mw-ease),
    visibility 0s linear 0s;
}

.mw-card .mw-toggle-btn {
  display: none;
}

.mw-js .mw-card .mw-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--mw-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--mw-radius);
  box-shadow: none;
  cursor: pointer;
  transition: color var(--mw-duration) var(--mw-ease);
  -webkit-tap-highlight-color: transparent;
}

.mw-js .mw-card .mw-toggle-btn:hover {
  color: var(--mw-text);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Secondary CTAs (data-cta="true")
   -------------------------------------------------------------------------- */
.mw-card .mw-cta {
  display: grid;
  gap: 20px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--mw-border);
}

.mw-card .mw-contact-btn {
  background-color: transparent;
}

.mw-card .mw-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-card .mw-social-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-card .mw-social-item::before,
.mw-card .mw-social-item::marker {
  content: none;
}

.mw-card .mw-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: var(--mw-text-muted);
  text-decoration: none;
  border-radius: 50%;
  transition: color var(--mw-duration) var(--mw-ease);
}

.mw-card .mw-social-link:hover {
  color: var(--mw-text);
}

.mw-card .mw-newsletter-slot {
  min-height: 96px;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--mw-border);
  border-bottom: 1px solid var(--mw-border);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .mw-card,
  .mw-card *,
  .mw-js .mw-card .mw-extra-wrap,
  .mw-js .mw-card .mw-extra-wrap.mw-is-open {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}