/*
 * Sea Shanties: a deliberately different corner of the site.
 *
 * Everything here is scoped to .ghj-shanties (the page sections) or body.ghj-shanty (a single
 * shanty's own track page), so none of it can leak onto the GTA or ARK pages. No image assets:
 * the rope, the waves and the compass are CSS and inline SVG so there is nothing to host,
 * nothing to lazy load, and nothing that goes fuzzy on a retina screen.
 */

.ghj-shanties,
body.ghj-shanty .ghj-shanty-skin {
	--sea-deep: #07161F;
	--sea-mid: #0E2836;
	--sea-panel: #12313F;
	--brass: #C8942A;
	--brass-light: #E7C063;
	--rope: #8A6A3B;
	--foam: #E6EFF0;
	--tide: #9FB6BC;
	--hairline: #24505F;
}

/* ---- Backgrounds ---------------------------------------------------- */

.ghj-shanties {
	position: relative;
	background-color: var(--sea-deep);
	background-image:
		radial-gradient(1200px 400px at 50% -8%, rgba(200, 148, 42, .13), transparent 70%),
		linear-gradient(180deg, var(--sea-mid) 0%, var(--sea-deep) 100%);
}

.ghj-shanties--panel {
	background-color: var(--sea-deep);
	background-image: linear-gradient(180deg, var(--sea-deep) 0%, #050F16 100%);
}

/* ---- Type ----------------------------------------------------------- */

/* Elementor writes per-widget colour rules at .elementor-element-xxx .elementor-heading-title,
   so anything meant to beat them has to reach the same inner element with more specificity. */
.ghj-shanties h1.elementor-heading-title,
body.ghj-shanty .ghj-shanty-skin h1.elementor-heading-title {
	font-family: "Pirata One", Oswald, sans-serif !important;
	font-weight: 400;
	color: var(--foam);
	letter-spacing: .02em;
	line-height: 1.02;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.ghj-shanties h2.elementor-heading-title,
body.ghj-shanty .ghj-shanty-skin h2.elementor-heading-title {
	font-family: "Pirata One", Oswald, sans-serif;
	font-weight: 400;
	/* Elementor's own per-element rules are .elementor-{page} .elementor-element.elementor-element-{id},
	   which outranks anything reasonable here, so the few colours that have to win say so. */
	color: var(--brass-light) !important;
	letter-spacing: .02em;
}

.ghj-shanties .ghj-shanties__eyebrow .elementor-heading-title,
body.ghj-shanty .ghj-shanty-skin .ghj-shanties__eyebrow .elementor-heading-title {
	font-family: "IM Fell English", Georgia, serif;
	font-style: italic;
	font-size: 17px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brass) !important;
	font-weight: 400;
}

.ghj-shanties p,
body.ghj-shanty .ghj-shanty-skin p { color: var(--tide); }

/* ---- Rope rule ------------------------------------------------------- */

.ghj-rope {
	height: 12px;
	width: 100%;
	border-radius: 6px;
	background-image: repeating-linear-gradient(
		62deg,
		#6E5230 0 4px,
		var(--rope) 4px 9px,
		#B08A52 9px 14px,
		#6E5230 14px 18px
	);
	box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---- Waves ----------------------------------------------------------- */

.ghj-waves { line-height: 0; }
.ghj-waves svg { display: block; width: 100%; height: auto; }

/* ---- Compass watermark ----------------------------------------------- */

.ghj-compass {
	position: absolute;
	top: 40px;
	right: 6%;
	width: 220px;
	max-width: 30vw;
	opacity: .1;
	pointer-events: none;
}

.ghj-compass svg { width: 100%; height: auto; display: block; }

/* ---- Track cards in the shanty grid ---------------------------------- */

.ghj-shanties .ghj-track-card,
body.ghj-shanty .ghj-shanty-skin .ghj-track-card {
	background-color: var(--sea-panel) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .18)) !important;
	border-color: var(--hairline) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.ghj-shanties .ghj-track-card h3 a,
.ghj-shanties .ghj-track-card h3 { color: var(--foam) !important; }
.ghj-shanties .ghj-track-meta { color: var(--brass); }

/* Brass player, so the collection is consistent down to the play button. */
.ghj-shanties .ghj-player,
body.ghj-shanty .ghj-shanty-skin .ghj-player {
	border-color: var(--hairline);
	background: rgba(3, 12, 18, .6);
}

.ghj-shanties .ghj-player button.ghj-player__toggle,
body.ghj-shanty .ghj-shanty-skin .ghj-player button.ghj-player__toggle {
	background: var(--brass) !important;
	color: #07161F !important;
}

.ghj-shanties .ghj-player button.ghj-player__toggle:hover,
.ghj-shanties .ghj-player button.ghj-player__toggle:focus,
body.ghj-shanty .ghj-shanty-skin .ghj-player button.ghj-player__toggle:hover {
	background: var(--brass-light);
	color: #07161F;
}

.ghj-shanties .ghj-player__seek,
body.ghj-shanty .ghj-shanty-skin .ghj-player__seek { background: #123344; }

.ghj-shanties .ghj-player__fill,
body.ghj-shanty .ghj-shanty-skin .ghj-player__fill { background: var(--brass); }

.ghj-shanties .ghj-player__time,
body.ghj-shanty .ghj-shanty-skin .ghj-player__time { color: var(--tide); }

/* ---- A single shanty's own track page -------------------------------- */

/* One Single Track template serves a GTA track and a shanty. The sea palette arrives through
   body.ghj-shanty, added by GHJ_Music::body_class, rather than a second template to maintain. */
/* Each section carries its own background, so giving them all the same gradient would band the
   page into visible stripes. The sea fades once, at the top, and the rest is flat. */
body.ghj-shanty .ghj-shanty-skin {
	background-color: #07161F !important;
	background-image: none !important;
	border-color: #24505F !important;
}

body.ghj-shanty .ghj-shanty-skin--hero {
	background-image: linear-gradient(180deg, #0E2836 0%, #07161F 100%) !important;
}

body.ghj-shanty .ghj-shanty-skin h1.elementor-heading-title,
body.ghj-shanty .ghj-shanty-skin h2.elementor-heading-title {
	font-family: "Pirata One", Oswald, sans-serif !important;
	font-weight: 400 !important;
}

body.ghj-shanty .ghj-shanty-skin .elementor-widget-theme-post-content,
body.ghj-shanty .ghj-shanty-skin .elementor-widget-text-editor { color: var(--tide); }

body.ghj-shanty .ghj-shanty-skin .elementor-button {
	border-color: var(--brass) !important;
	color: var(--foam) !important;
}

body.ghj-shanty .ghj-shanty-skin .elementor-button:hover {
	background-color: var(--brass) !important;
	color: #07161F !important;
}

/* ---- Buttons --------------------------------------------------------- */

.ghj-shanties .elementor-button {
	border-color: var(--brass) !important;
	color: var(--foam) !important;
}

.ghj-shanties .elementor-button:hover {
	background-color: var(--brass) !important;
	color: #07161F !important;
}

body.ghj-shanty .ghj-shanty-skin .ghj-track-links a.ghj-track-link--primary { background: var(--brass); color: #07161F; }
body.ghj-shanty .ghj-shanty-skin .ghj-track-links a.ghj-track-link--primary:hover { background: var(--brass-light); color: #07161F; }
body.ghj-shanty .ghj-shanty-skin .ghj-track-links a.ghj-track-link--ghost { color: var(--foam); border-color: var(--hairline); }
body.ghj-shanty .ghj-shanty-skin .ghj-track-links a.ghj-track-link--ghost:hover { color: var(--brass-light); border-color: var(--brass); }

@media (max-width: 767px) {
	.ghj-compass { width: 150px; top: 16px; right: 4%; opacity: .07; }
}

/* ---- Lyrics and card actions in the sea palette ----------------------- */

.ghj-shanties .ghj-card-actions a.ghj-card-action,
body.ghj-shanty .ghj-shanty-skin .ghj-card-actions a.ghj-card-action {
	color: var(--brass);
	border-bottom-color: rgba(200, 148, 42, .4);
}

.ghj-shanties .ghj-card-actions a.ghj-card-action:hover,
body.ghj-shanty .ghj-shanty-skin .ghj-card-actions a.ghj-card-action:hover {
	color: var(--foam);
	border-bottom-color: var(--foam);
}

body.ghj-shanty .ghj-shanty-skin .ghj-lyrics__verse { color: var(--foam); }

.ghj-shanties .ghj-artwork::after,
body.ghj-shanty .ghj-shanty-skin .ghj-artwork::after { background-color: rgba(3, 12, 18, .78); }

.ghj-shanties .ghj-artwork img:focus-visible,
body.ghj-shanty .ghj-shanty-skin .ghj-artwork img:focus-visible { outline-color: var(--brass); }