/* ==============================================================================
   ʻŌlelo Online – Papa Mele (mu-plugins/oo-mele/mele.css)
   ------------------------------------------------------------------------------
   Loaded only on /hawaiian-song-analysis/ pages. Colours come from the theme
   tokens in oleloonline_2026/style.css section 01 (--oo-*). Every rule is scoped
   under .oo-mele so nothing leaks into the rest of the site.
   ============================================================================== */

/* -- 1  Head -------------------------------------------------------------------- */

.oo-mele-head { margin: 0 0 1.5rem; }
.oo-mele-head p.oo-mele-crumbs {
	margin: 0 0 .9rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--oo-text-gray);
}
.oo-mele-head p.oo-mele-crumbs a:link,
.oo-mele-head p.oo-mele-crumbs a:visited { color: var(--oo-green-dark); text-decoration-line: none; }
.oo-mele-head p.oo-mele-crumbs a:hover { text-decoration-line: underline; }
.oo-mele-head p.oo-mele-composer {
	margin: 0 0 .25rem;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--oo-purple-dark);
}
.oo-mele-head p.oo-mele-session {
	margin: 0;
	font-size: .9375rem;
	color: var(--oo-text-gray);
}

/* -- 2  Section headings ------------------------------------------------------- */

.oo-mele h2 {
	margin: 2.25rem 0 .9rem;
	padding: 0 0 .35rem;
	font-family: Inter, sans-serif;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: 0;
	border-bottom: 2px solid var(--oo-green-light);
	color: #222;
}
.oo-mele h2 .oo-mele-h-en,
.oo-mele h3 .oo-mele-h-en {
	font-weight: 400;
	color: var(--oo-text-gray);
}
.oo-mele-lyrics h2 { margin-top: .5rem; }

/* -- 3  Lyrics (public) ---------------------------------------------------------- */

.oo-mele-lyrics {
	margin: 0 0 1rem;
	padding: 1.25rem 1.5rem 1.4rem;
	background: var(--oo-bg-mint);
	border: 1px solid var(--oo-green-light);
	border-left: 6px solid var(--oo-green-dark);
	border-radius: 12px;
}
.oo-mele-lyrics h2 { border-bottom: 0; margin: 0 0 .9rem; padding: 0; }
.oo-mele-verse { margin: 0 0 1.15rem; }
.oo-mele-verse:last-child { margin-bottom: 0; }
.oo-mele p.oo-mele-marker {
	margin: 0 0 .15rem;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oo-green-dark);
}
.oo-mele p.oo-mele-direction {
	margin: 0 0 .1rem;
	font-size: .8125rem;
	font-style: italic;
	color: var(--oo-text-gray);
}
.oo-mele p.oo-mele-line {
	margin: 0;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.3125rem;
	line-height: 1.55;
	color: #1d1d1d;
}

/* -- 4  About / examples (public) --------------------------------------------- */

.oo-mele-about p { margin: 0 0 .9rem; }
.oo-mele ol.oo-mele-ex-list { margin: 0 0 .5rem 1.4rem; padding: 0; }
.oo-mele ol.oo-mele-ex-list li { margin: 0 0 .45rem; }
.oo-mele .oo-mele-ex-play {
	display: inline-block;
	width: 1.9rem;
	height: 1.9rem;
	margin: 0 .35rem 0 0;
	padding: 0;
	font-size: .8rem;
	line-height: 1.9rem;
	text-align: center;
	color: #fff;
	background: var(--oo-purple-dark);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	vertical-align: middle;
}
.oo-mele .oo-mele-ex-play:hover,
.oo-mele .oo-mele-ex-play:focus { background: var(--oo-purple-mid); }
.oo-mele .oo-mele-ex-play[disabled] { background: var(--oo-icon-gray); cursor: default; }
.oo-mele .oo-mele-player {
	position: relative;
	margin: .6rem 0 1rem;
	padding-top: 56.25%;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
.oo-mele .oo-mele-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -- 5  Members-only parts --------------------------------------------------- */

.oo-mele-locked {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: #fff8f0;
	border: 1px solid var(--oo-orange-light);
	border-left: 6px solid var(--oo-orange-mid);
	border-radius: 12px;
}
.oo-mele-locked p { margin: 0 0 .7rem; }
.oo-mele-locked p:last-child { margin: 0; }
.oo-mele-locked p.oo-mele-locked-title { font-weight: 800; }
.oo-mele .oo-mele-btn,
.oo-mele .oo-mele-btn:visited {
	display: inline-block;
	margin: 0 .5rem .4rem 0;
	padding: .5rem 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--oo-purple-dark);
	border-radius: 8px;
	text-decoration: none;
}
.oo-mele .oo-mele-btn:hover { background: var(--oo-purple-mid); color: #fff; }
.oo-mele .oo-mele-btn-quiet,
.oo-mele .oo-mele-btn-quiet:visited { color: var(--oo-purple-dark); background: #fff; border: 1.5px solid var(--oo-purple-dark); }
.oo-mele .oo-mele-btn-quiet:hover { color: var(--oo-purple-mid); background: #fff; }

/* -- 6  Background ------------------------------------------------------------- */

.oo-mele-background p { margin: 0 0 .8rem; }
.oo-mele-background ol { margin: 0 0 .9rem 1.4rem; }

/* -- 7  Breakdown ------------------------------------------------------------- */

.oo-mele-bd-verse { margin: 0 0 2rem; }
.oo-mele h3.oo-mele-bd-marker {
	margin: 1.6rem 0 .8rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--oo-green-dark);
}
.oo-mele h3.oo-mele-bd-marker .oo-mele-direction {
	margin-left: .5rem;
	font-size: .8125rem;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	color: var(--oo-text-gray);
}
.oo-mele-bd-line {
	margin: 0 0 1.4rem;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--oo-rule-light);
}
.oo-mele-bd-verse .oo-mele-bd-line:last-child { border-bottom: 0; }
.oo-mele p.oo-mele-bd-lyric {
	margin: 0 0 .6rem;
	font-family: Vollkorn, Georgia, serif;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--oo-purple-dark);
}
.oo-mele dl.oo-mele-gloss {
	display: grid;
	grid-template-columns: minmax(7rem, max-content) 1fr;
	column-gap: 1.25rem;
	row-gap: .15rem;
	margin: 0 0 .6rem;
}
.oo-mele dl.oo-mele-gloss dt {
	grid-column: 1;
	margin: 0;
	padding-top: .1rem;
	font-weight: 700;
	color: #1d1d1d;
}
.oo-mele dl.oo-mele-gloss dd {
	grid-column: 2;
	margin: 0;
	color: #333;
}
.oo-mele dl.oo-mele-gloss dd + dd { color: var(--oo-text-gray-mid); }
.oo-mele dl.oo-mele-gloss dt:not(:first-child) { margin-top: .3rem; }
.oo-mele dl.oo-mele-gloss dt:not(:first-child) + dd { margin-top: .3rem; }
.oo-mele ul.oo-mele-trans,
.oo-mele ul.oo-mele-notes {
	margin: .3rem 0 .4rem 1.2rem;
	padding: 0;
}
.oo-mele ul.oo-mele-trans li {
	margin: 0 0 .15rem;
	font-style: italic;
	color: #333;
}
.oo-mele ul.oo-mele-notes li {
	margin: 0 0 .15rem;
	font-size: .9375rem;
	color: var(--oo-text-gray-mid);
}
.oo-mele p.oo-mele-note,
.oo-mele p.oo-mele-repeat {
	margin: 0 0 .5rem;
	font-size: .9375rem;
	color: var(--oo-text-gray-mid);
}

/* -- 8  Class videos ------------------------------------------------------------ */

.oo-mele-videos h3 { margin: 1rem 0 .5rem; font-size: 1rem; }
.oo-mele .oo-mele-placeholder {
	padding: 1.1rem 1.3rem;
	background: #fafafa;
	border: 1.5px dashed var(--oo-rule-light);
	border-radius: 10px;
	color: var(--oo-text-gray);
}
.oo-mele .oo-mele-placeholder p { margin: 0; }
.oo-mele p.oo-mele-fineprint { font-size: .8125rem; color: var(--oo-text-gray); }

/* -- 9  Archive ------------------------------------------------------------------ */

.oo-mele-archive-intro { margin: 0 0 1.5rem; font-size: 1.0625rem; color: #333; }

@media (max-width: 600px) {
	.oo-mele-lyrics { padding: 1rem 1rem 1.1rem; }
	.oo-mele p.oo-mele-line { font-size: 1.1875rem; }
	.oo-mele dl.oo-mele-gloss { grid-template-columns: minmax(5.5rem, max-content) 1fr; column-gap: .8rem; }
}