/**
 * Apna Mithila — madhubani.css
 *
 * Tasteful Madhubani-painting-inspired accents. Pure CSS (gradients, borders,
 * box-shadow). No images. Lightweight.
 *
 * Madhubani painting traditionally uses:
 *   - double borders (parallel stripes in terracotta + mustard + deep green)
 *   - bold geometric corners (triangles, chevrons)
 *   - dense fill but with strong outlines
 * We translate these into thin repeating-linear-gradient stripes and a few
 * border-corner accents.
 */

/* ==========================================================================
   1. Masthead decorative top border (Madhubani tri-color stripe)
   ========================================================================== */
.am-masthead {
	/* Thin Madhubani-inspired tricolor stripe along the top edge of the masthead. */
	border-top: 4px solid transparent;
	border-image: repeating-linear-gradient(
		90deg,
		var(--am-accent) 0 8px,
		var(--am-accent-2) 8px 16px,
		var(--am-deep-green) 16px 24px
	) 1;
}

/* ==========================================================================
   2. Utility divider — reusable between sections
   ========================================================================== */
.am-divider {
	display: block;
	width: 100%;
	height: 6px;
	border: none;
	margin-block: 2rem;
	border-radius: 3px;
	background:
		repeating-linear-gradient(
			90deg,
			var(--am-accent) 0 12px,
			var(--am-accent-2) 12px 24px,
			var(--am-deep-green) 24px 36px,
			var(--am-ink) 36px 48px
		);
	opacity: 0.85;
}

/* Variant: thin divider with Madhubani double-line motif */
.am-divider--thin {
	height: 4px;
	background:
		repeating-linear-gradient(
			90deg,
			var(--am-accent) 0 6px,
			transparent 6px 10px,
			var(--am-accent-2) 10px 16px,
			transparent 16px 20px,
			var(--am-deep-green) 20px 26px
		);
}

/* ==========================================================================
   3. Block title accent — corner triangle motif (Madhubani-style)
   ========================================================================== */
.am-block-title--accent {
	position: relative;
	padding-left: 1.6rem;
}

/* Replace the simple accent bar from components.css with a Madhubani-style
   double-stripe + corner triangle. */
.am-block-title--accent::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 70%;
	background:
		linear-gradient(
			to right,
			var(--am-accent) 0 5px,
			transparent 5px 7px,
			var(--am-accent-2) 7px 12px
		);
	border-radius: 2px;
}

/* Small triangular "corner" motif on the right edge of the accent bar. */
.am-block-title--accent::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 6px;
	border-color: transparent transparent transparent var(--am-deep-green);
	opacity: 0.9;
}

/* ==========================================================================
   4. Card corner motif — subtle triangular accent on hover
   ========================================================================== */
.am-card {
	position: relative;
}

/* A subtle corner triangle in the top-right (Madhubani corner motif).
   Faint by default; strengthens on hover. */
.am-card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 22px 22px 0;
	border-color: transparent var(--am-accent) transparent transparent;
	opacity: 0;
	transition: opacity var(--am-dur) var(--am-ease);
	pointer-events: none;
	z-index: 2;
}

.am-card:hover::after {
	opacity: 0.92;
}

/* A second, smaller mustard triangle layered beneath for the double-border feel. */
.am-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 14px 14px 0;
	border-color: transparent var(--am-accent-2) transparent transparent;
	opacity: 0;
	transition: opacity var(--am-dur) var(--am-ease);
	pointer-events: none;
	z-index: 2;
}

.am-card:hover::before {
	opacity: 0.95;
}

/* Don't double-apply corner motif on hero card (which uses its own overlay). */
.am-card--hero::before,
.am-card--hero::after {
	display: none;
}

/* ==========================================================================
   5. Card hover accent — left Madhubani stripe (in addition to base border)
   ========================================================================== */
.am-card {
	border-left: 3px solid transparent;
	transition: border-left-color var(--am-dur) var(--am-ease),
	            transform var(--am-dur) var(--am-ease),
	            box-shadow var(--am-dur) var(--am-ease);
}

.am-card:hover {
	border-left-color: var(--am-accent);
}

/* ==========================================================================
   6. Footer bottom — multi-color Madhubani divider line
   ========================================================================== */
.am-footer__bottom {
	border-top: 4px solid transparent;
	border-image: repeating-linear-gradient(
		90deg,
		var(--am-accent) 0 14px,
		var(--am-accent-2) 14px 28px,
		var(--am-deep-green) 28px 42px,
		rgba(251, 246, 236, 0.35) 42px 56px
	) 1;
}

/* ==========================================================================
   7. Section dividers — Madhubani-style double border under block-head
   ========================================================================== */
.am-block-head {
	position: relative;
}

.am-block-head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--am-accent-2);
	opacity: 0.45;
}

/* ==========================================================================
   8. Search overlay inner — subtle Madhubani frame
   ========================================================================== */
.am-search-overlay__inner {
	border-top: 4px solid transparent;
	border-image: repeating-linear-gradient(
		90deg,
		var(--am-accent) 0 10px,
		var(--am-accent-2) 10px 20px,
		var(--am-deep-green) 20px 30px
	) 1;
}

/* ==========================================================================
   9. Entry verse — Madhubani double-stripe top & bottom (already has borders;
   reinforce with mustard inner accent)
   ========================================================================== */
.am-entry__verse {
	box-shadow:
		inset 0 3px 0 0 var(--am-accent),
		inset 0 -3px 0 0 var(--am-accent),
		inset 0 6px 0 0 var(--am-accent-2),
		inset 0 -6px 0 0 var(--am-accent-2);
}

/* ==========================================================================
   10. Buttons — Madhubani-inspired focus ring (double-ring)
   ========================================================================== */
.am-btn:focus-visible,
.am-share__btn:focus-visible,
.am-loadmore__btn:focus-visible {
	outline: 3px solid var(--am-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px rgba(217, 154, 30, 0.4);
}

/* ==========================================================================
   11. Photo & video card — Madhubani corner triangles (top-left accent)
   ========================================================================== */
.am-photo-card,
.am-video-card {
	position: relative;
}

.am-photo-card::before,
.am-video-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 18px 0 0;
	border-color: var(--am-accent) transparent transparent transparent;
	z-index: 3;
	opacity: 0.85;
	pointer-events: none;
}

/* ==========================================================================
   12. Tag cloud — subtle Madhubani dotted accent on hover
   ========================================================================== */
.am-tagcloud__tag {
	background-image:
		radial-gradient(circle at 8px 8px, var(--am-accent-2) 1px, transparent 1.5px);
	background-size: 16px 16px;
	background-position: 0 0;
	background-repeat: repeat;
	background-color: var(--am-surface);
}

.am-tagcloud__tag:hover {
	background-image: none;
	background-color: var(--am-accent);
}

/* ==========================================================================
   13. Pagination — Madhubani-style chevron separators (kept subtle)
   ========================================================================== */
.am-pagination .page-numbers:not(.dots):not(.current):hover {
	border-color: var(--am-accent-2);
	box-shadow: 0 0 0 2px rgba(217, 154, 30, 0.25);
}

/* ==========================================================================
   14. Footer brand title — Madhubani underline accent
   ========================================================================== */
.am-footer__brand-title {
	position: relative;
	display: inline-block;
	padding-bottom: 0.5rem;
}

.am-footer__brand-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--am-accent) 0 10px,
		var(--am-accent-2) 10px 20px,
		var(--am-deep-green) 20px 30px
	);
}