/* =================================================================
   ReefDudes — Wave motif
   A small marine flourish that echoes the new illustrated logo's
   vocabulary without literal repetition. Used as a section divider
   at the top of the Tools and Community sections, and as a
   replacement for the rule-mark on section eyebrows.
   ================================================================= */

/* Wavy section divider — three soft waves in actinic blue.
   Embedded as inline SVG via data-URI so there's no extra HTTP
   request. Width auto-tiles via background-size. */

.rd-wave-divider {
	width: 100%;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'><path d='M0 9 Q 15 0 30 9 T 60 9 T 90 9 T 120 9' fill='none' stroke='%233a8ee0' stroke-width='1.5' stroke-linecap='round' opacity='0.55'/><path d='M0 13 Q 15 4 30 13 T 60 13 T 90 13 T 120 13' fill='none' stroke='%233fb8c8' stroke-width='1.2' stroke-linecap='round' opacity='0.40'/></svg>");
	background-repeat: repeat-x;
	background-size: 120px 18px;
	background-position: center;
	pointer-events: none;
}

/* On small screens the wave reads better at a tighter scale. */
@media (max-width: 600px) {
	.rd-wave-divider {
		height: 14px;
		background-size: 80px 14px;
	}
}

/* When placed inside a section, it should sit at the very top edge
   so it reads as a hand-off from the previous surface. */
.rd-wave-divider--top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
}

/* Eyebrow flourish — a tiny wave glyph standing in for the rule mark.
   Apply by adding `.rd-eyebrow--wave` next to `.rd-eyebrow` (or to
   the section's eyebrow class). Replaces the existing 20×2px line. */

.rd-eyebrow--wave {
	position: relative;
	display: inline-block;
	padding-left: 30px;
}

/* When the eyebrow lives in a text-centered section (community),
   the wave still sits flush-left of the text. Inline-block above
   ensures the padded box hugs the text width. */

.rd-tools-section__eyebrow.rd-eyebrow--wave::before,
.rd-eyebrow--wave::before {
	content: "";
	width: 22px;
	height: 8px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'><path d='M1 4 Q 5 0 9 4 T 17 4 T 22 4' fill='none' stroke='%233a8ee0' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat center;
	background-size: 22px 8px;
	display: inline-block;
	vertical-align: middle;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
}