/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* === Suno Chansons – Mobile Optimizations === */
@media (max-width: 768px) {
  /* Ensure audio player spans the container */
  .entry-content audio,
  .wp-block-post-content audio {
    width: 100% !important;
    max-width: 100%;
    display: block;
    margin: 0.75rem 0;
  }

  /* Download link as a touch-friendly button */
  .entry-content a[download],
  .wp-block-post-content a[download] {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: #0ea5e9; /* sky-500 */
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .entry-content a[download]:hover,
  .wp-block-post-content a[download]:hover {
    background: #0284c7; /* sky-600 */
  }

  /* Heading spacing */
  .entry-content h3,
  .wp-block-post-content h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.25;
  }

  /* Prompt block */
  .entry-content pre,
  .wp-block-post-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: #0b1020;
    color: #e5e7eb;
  }

  /* Space elements consistently */
  .entry-content p,
  .wp-block-post-content p {
    margin: 0.85rem 0;
  }
}

/* === Suno Chansons – Audio Player Theme (black) === */
.entry-content .wp-audio-shortcode .mejs-container,
.wp-block-post-content .wp-audio-shortcode .mejs-container,
.entry-content .mejs-container,
.wp-block-post-content .mejs-container,
.entry-content .mejs-container .mejs-controls,
.wp-block-post-content .mejs-container .mejs-controls {
  background: #000 !important;
  border-radius: 8px;
}

.entry-content audio,
.wp-block-post-content audio {
  background: #000;
  color: #fff;
  border-radius: 8px;
}

/* Make text inside controls readable */
.mejs-container .mejs-time,
.mejs-container .mejs-duration,
.mejs-container .mejs-currenttime {
  color: #fff !important;
}

/* Colorize control icons globally to lime (#E0FF01) */
/* MediaElement classic classes: recolor raster/SVG background-image icons */
.mejs-container .mejs-controls .mejs-button > button {
  /* Keep the default background-image icon; recolor via filter */
  filter: brightness(0) saturate(100%) invert(86%) sepia(96%) saturate(746%) hue-rotate(20deg) brightness(108%) contrast(106%) !important;
}
.mejs-container .mejs-controls .mejs-playpause-button > button,
.mejs-container .mejs-controls .mejs-volume-button > button {
  background-color: transparent !important; /* avoid colored square */
  filter: brightness(0) saturate(100%) invert(86%) sepia(96%) saturate(746%) hue-rotate(20deg) brightness(108%) contrast(106%) !important;
}
.mejs-container .mejs-controls .mejs-button > button::before {
  background-color: #E0FF01 !important; /* color masked icon if used */
}
.mejs-container .mejs-controls .mejs-button > button:hover::before,
.mejs-container .mejs-controls .mejs-button > button:focus::before,
.mejs-container .mejs-controls .mejs-button > button:active::before {
  background-color: #E0FF01 !important;
}
/* MediaElement v4 mask-based icons: use ::before fill, keep button bg transparent */
.mejs__container .mejs__controls .mejs__button > button {
  background: transparent !important; /* prevent square lime background */
}
.mejs__container .mejs__controls .mejs__button > button::before {
  background-color: #E0FF01 !important; /* color for masked SVG icon */
}
.mejs__container .mejs__controls .mejs__playpause-button > button::before,
.mejs__container .mejs__controls .mejs__volume-button > button::before {
  background-color: #E0FF01 !important;
}

/* Explicit lime icons for classic MediaElement in all contexts */
/* Play (triangle) */
.mejs-container .mejs-controls .mejs-playpause-button > button {
  background: none !important; /* remove sprite to prevent black icon */
  position: relative;
}
.mejs-container .mejs-controls .mejs-playpause-button.mejs-play > button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px; /* triangle size */
  border-color: transparent transparent transparent #E0FF01;
}
/* Pause (two bars) */
.mejs-container .mejs-controls .mejs-playpause-button.mejs-pause > button::before,
.mejs-container .mejs-controls .mejs-playpause-button.mejs-pause > button::after {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  width: 3px;
  background: #E0FF01;
}

.wp-block-post-title {
  margin-bottom: var(--wp--preset--spacing--30);
}

.entry-content > * + *,
.wp-block-post-content > * + * {
  margin-block-start: calc(var(--wp--style--block-gap, 1.2rem) / 2);
}

.wp-block-post-content > *:first-child {
  margin-top: 0;
}
.mejs-container .mejs-controls .mejs-playpause-button.mejs-pause > button::before {
  left: calc(50% - 5px);
}
.mejs-container .mejs-controls .mejs-playpause-button.mejs-pause > button::after {
  left: calc(50% + 2px);
}

/* Volume button (classic classes) */
.mejs-container .mejs-controls .mejs-volume-button > button {
  background: none !important;
  position: relative;
}
/* Unmuted: speaker + cone */
.mejs-container .mejs-controls .mejs-volume-button.mejs-unmute > button::before,
.mejs-container .mejs-controls .mejs-volume-button.mejs-unmute > button::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.mejs-container .mejs-controls .mejs-volume-button.mejs-unmute > button::before {
  left: 12px; /* speaker box */
  width: 8px;
  height: 10px;
  background: #E0FF01;
}
.mejs-container .mejs-controls .mejs-volume-button.mejs-unmute > button::after {
  left: 22px; /* cone */
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #E0FF01;
}
/* Muted: speaker + slash */
.mejs-container .mejs-controls .mejs-volume-button.mejs-mute > button::before,
.mejs-container .mejs-controls .mejs-volume-button.mejs-mute > button::after {
  content: '';
  position: absolute;
}
.mejs-container .mejs-controls .mejs-volume-button.mejs-mute > button::before {
  top: 50%; left: 12px; transform: translateY(-50%);
  width: 8px; height: 10px;
  background: #E0FF01;
}
.mejs-container .mejs-controls .mejs-volume-button.mejs-mute > button::after {
  left: 18px; top: 10px; /* diagonal slash */
  width: 16px; height: 2px;
  background: #E0FF01;
  transform: rotate(45deg);
}

/* Volume button (v4 underscore classes) */
.mejs__container .mejs__controls .mejs__volume-button > button {
  background: transparent !important;
  position: relative;
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__unmute > button::before,
.mejs__container .mejs__controls .mejs__volume-button.mejs__unmute > button::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__unmute > button::before {
  left: 12px; width: 8px; height: 10px; background: #E0FF01;
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__unmute > button::after {
  left: 22px; width: 0; height: 0;
  border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #E0FF01;
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__mute > button::before,
.mejs__container .mejs__controls .mejs__volume-button.mejs__mute > button::after {
  content: '';
  position: absolute;
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__mute > button::before {
  top: 50%; left: 12px; transform: translateY(-50%);
  width: 8px; height: 10px; background: #E0FF01;
}
.mejs__container .mejs__controls .mejs__volume-button.mejs__mute > button::after {
  left: 18px; top: 10px; width: 16px; height: 2px;
  background: #E0FF01; transform: rotate(45deg);
}

/* Force lime icons via inline SVG backgrounds (most robust) */
/* Play */
.mejs-container .mejs-controls .mejs-playpause-button.mejs-play > button,
.mejs__container .mejs__controls .mejs__playpause-button.mejs__play > button {
  background: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon fill='%23E0FF01' points='12,8 24,16 12,24'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  filter: none !important;
}
/* Pause */
.mejs-container .mejs-controls .mejs-playpause-button.mejs-pause > button,
.mejs__container .mejs__controls .mejs__playpause-button.mejs__pause > button {
  background: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='10' y='8' width='4' height='16' fill='%23E0FF01'/><rect x='18' y='8' width='4' height='16' fill='%23E0FF01'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  filter: none !important;
}
/* Volume unmuted */
.mejs-container .mejs-controls .mejs-volume-button.mejs-unmute > button,
.mejs__container .mejs__controls .mejs__volume-button.mejs__unmute > button {
  background: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='8' y='12' width='6' height='8' fill='%23E0FF01'/><polygon points='14,12 20,16 14,20' fill='%23E0FF01'/><path d='M22 12 q6 4 0 8' stroke='%23E0FF01' stroke-width='2' fill='none'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  filter: none !important;
}
/* Volume muted */
.mejs-container .mejs-controls .mejs-volume-button.mejs-mute > button,
.mejs__container .mejs__controls .mejs__volume-button.mejs__mute > button {
  background: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='8' y='12' width='6' height='8' fill='%23E0FF01'/><polygon points='14,12 20,16 14,20' fill='%23E0FF01'/><line x1='22' y1='12' x2='28' y2='20' stroke='%23E0FF01' stroke-width='2'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  filter: none !important;
}
.mejs__container .mejs__controls .mejs__button > button:hover::before,
.mejs__container .mejs__controls .mejs__button > button:focus::before,
.mejs__container .mejs__controls .mejs__button > button:active::before {
  background-color: #E0FF01 !important;
}

/* Progress bar color */
.mejs-container .mejs-time-total {
  background: rgba(255,255,255,0.25) !important;
}
.mejs-container .mejs-time-loaded {
  background: rgba(255,255,255,0.35) !important;
}
.mejs-container .mejs-time-current {
  background: #E0FF01 !important; /* requested lime color */
}
.mejs-container .mejs-time-handle-content,
.mejs-container .mejs-time-handle {
  background: #E0FF01 !important;
  border-color: #E0FF01 !important;
}


/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}