/* =============================================================================
   Divi Corner Ribbons — Frontend Stylesheet
   Version: 1.0.0
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Preview host & base wrapper
   --------------------------------------------------------------------------- */

/* Preview host — visible in the Divi VB so designers can see the ribbon.
   On the live frontend, JS adds .dcr-host-done which collapses it to zero
   after the ribbon has been moved to its target ancestor. */
.dcr-preview-host {
	position: relative;
	display:  block;
	width:    100%;
	height:   100px;
	overflow: visible;
}

/* Collapsed state — set by JS after ribbon is re-parented. */
.dcr-preview-host.dcr-host-done {
	height:   0 !important;
	overflow: hidden !important;
	padding:  0 !important;
	margin:   0 !important;
}

/* The ribbon wrapper — always visible once .dcr-initialized is added.
   JS adds that class immediately (before moving), so there is no flash. */
.dcr-ribbon-wrapper {
	position: absolute;
	z-index:  100;
	pointer-events: none;
	display:  none;
}

.dcr-ribbon-wrapper.dcr-initialized {
	display: block;
}

/* Inside the preview host the ribbon must be visible without JS.
   The VB does not run frontend JavaScript, so .dcr-initialized is never
   added there. This rule makes the ribbon show immediately in the builder. */
.dcr-preview-host .dcr-ribbon-wrapper {
	display: block;
}

/* Shared inner-element base */
.dcr-ribbon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
}

.dcr-ribbon-text {
	display: block;
}

/* ---------------------------------------------------------------------------
   2. Diagonal — Classic corner fold
   --------------------------------------------------------------------------- */

.dcr-style-diagonal {
	/* clip-path set inline by PHP — creates the triangular mask without
	   relying on overflow:hidden, so Divi's section overflow cannot clip it. */
	overflow: visible;
}

/* Corner anchors (top/bottom + left/right: 0) are set inline by PHP. */

/* The banner strip inside the triangle */
.dcr-style-diagonal .dcr-ribbon-inner {
	position: absolute;
	text-align: center;
	white-space: nowrap;
	padding: 6px 0;
	/* width, position offsets, and transform set via PHP inline styles. */
}

/* ---------------------------------------------------------------------------
   3. Straight — Full-width edge banner
   --------------------------------------------------------------------------- */

.dcr-style-straight {
	left:  0;
	right: 0;
	width: auto !important; /* Always span the full parent width */
	overflow: visible;
}

/* Vertical anchor */
.dcr-corner-top-right.dcr-style-straight,
.dcr-corner-top-left.dcr-style-straight     { top:    0; }
.dcr-corner-bottom-right.dcr-style-straight,
.dcr-corner-bottom-left.dcr-style-straight  { bottom: 0; }

.dcr-style-straight .dcr-ribbon-inner {
	width:      100%;
	text-align: center;
	padding:    0 12px;
	/* height and line-height set via inline style for scalability */
}

/* Subtle notched tab on the right/left end to hint at corner attachment */
.dcr-corner-top-right.dcr-style-straight .dcr-ribbon-inner,
.dcr-corner-bottom-right.dcr-style-straight .dcr-ribbon-inner {
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	padding-right: 22px;
}

.dcr-corner-top-left.dcr-style-straight .dcr-ribbon-inner,
.dcr-corner-bottom-left.dcr-style-straight .dcr-ribbon-inner {
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
	padding-left: 22px;
}

/* ---------------------------------------------------------------------------
   4. Badge — Circle overlay
   --------------------------------------------------------------------------- */

.dcr-style-badge {
	overflow: visible;
}

/* Base corner anchors; PHP inline styles add the negative offset so the
   badge overlaps the corner by ~22% of its own diameter. */
.dcr-corner-top-right.dcr-style-badge    { top:    0; right:  0; }
.dcr-corner-top-left.dcr-style-badge     { top:    0; left:   0; }
.dcr-corner-bottom-right.dcr-style-badge { bottom: 0; right:  0; }
.dcr-corner-bottom-left.dcr-style-badge  { bottom: 0; left:   0; }

.dcr-style-badge .dcr-ribbon-inner {
	border-radius: 50%;
	text-align:    center;
	white-space:   normal;
	word-break:    break-word;
	line-height:   1.15;
	padding:       6px;
	/* width and height are set via inline styles to match ribbon_size */
}

/* ---------------------------------------------------------------------------
   5. Visual Builder — preview styles
   --------------------------------------------------------------------------- */

/*
 * When the Divi VB is active, <body> gets the class 'et_fb'.
 * Our JS detects this and exits immediately (no re-parenting, no collapsing).
 * These CSS rules make the ribbon visible inside the preview host purely
 * through CSS, so no JS is needed for the VB preview to work.
 */

/* Show ribbon in the preview host without needing JS to add dcr-initialized */
body.et_fb .dcr-preview-host .dcr-ribbon-wrapper {
	display: block !important;
}

/* Prevent the host from ever collapsing inside the VB */
body.et_fb .dcr-preview-host,
body.et_fb .dcr-preview-host.dcr-host-done {
	height:   150px !important;
	overflow: visible !important;
	display:  block !important;
}

/* Also show the VB card returned by the PHP partial render */
body.et_fb .dcr-vb-card .dcr-ribbon-wrapper {
	display: block !important;
}

/* ---------------------------------------------------------------------------
   6. Responsive — visibility + automatic size scaling
   --------------------------------------------------------------------------- */

/*
 * Ribbons scale down automatically on smaller screens using CSS transform.
 * transform-origin is pinned to the corner so the ribbon stays anchored.
 * The hide classes take precedence via !important on display.
 */

/* Tablet — 768 px to 980 px: scale to 75% */
@media ( max-width: 980px ) {
	.dcr-hide-tablet.dcr-initialized {
		display: none !important;
	}

	.dcr-corner-top-right.dcr-initialized    { transform-origin: top right;    transform: scale( 0.75 ); }
	.dcr-corner-top-left.dcr-initialized     { transform-origin: top left;     transform: scale( 0.75 ); }
	.dcr-corner-bottom-right.dcr-initialized { transform-origin: bottom right; transform: scale( 0.75 ); }
	.dcr-corner-bottom-left.dcr-initialized  { transform-origin: bottom left;  transform: scale( 0.75 ); }
}

/* Mobile — up to 767 px: scale to 60% */
@media ( max-width: 767px ) {
	.dcr-hide-mobile.dcr-initialized {
		display: none !important;
	}

	.dcr-corner-top-right.dcr-initialized    { transform-origin: top right;    transform: scale( 0.60 ); }
	.dcr-corner-top-left.dcr-initialized     { transform-origin: top left;     transform: scale( 0.60 ); }
	.dcr-corner-bottom-right.dcr-initialized { transform-origin: bottom right; transform: scale( 0.60 ); }
	.dcr-corner-bottom-left.dcr-initialized  { transform-origin: bottom left;  transform: scale( 0.60 ); }
}