/**
 * DadFails Custom Component CSS
 *
 * Standalone component styles loaded after the main child theme stylesheet.
 * All selectors use the .df- namespace to avoid conflicts with Divi or
 * third-party plugins.
 *
 * Table of Contents:
 *   1.  Responsive Grid Utilities
 *   2.  Fail Card (.df-card) — extended
 *   3.  Fail Type Badge (.df-badge) — taxonomy colours
 *   4.  Submission Form (.df-submit-form)
 *   5.  Hero Section (.df-hero)
 *   6.  CTA Strip (.df-cta-strip)
 *   7.  Rating Display (.df-rating)
 *   8.  Leaderboard (.df-leaderboard)
 *   9.  Recent Fails Grid
 *  10.  Mobile Divi menu overrides
 *  11.  Misc utilities and animations
 */

/* =========================================================================
   1. RESPONSIVE GRID UTILITIES
   ========================================================================= */

.df-grid-2,
.df-grid-3,
.df-grid-4 {
	display: grid;
	gap: 1.5rem;
	width: 100%;
}

.df-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.df-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.df-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 2 columns for 3 and 4 column grids */
@media (max-width: 1024px) {
	.df-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.df-grid-2,
	.df-grid-3,
	.df-grid-4 {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   2. FAIL CARD COMPONENT (.df-card) — extended / specific overrides
   ========================================================================= */

.df-card {
	position: relative;
}

/* Rating badge positioned over the image */
.df-card__rating-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* Card without image — add a brand-coloured top border */
.df-card:not(:has(.df-card__image)) {
	border-top: 4px solid var(--df-primary);
}

/* No-thumbnail fallback placeholder */
.df-card__image-placeholder {
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, var(--df-light-bg) 0%, var(--df-border) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--df-text-light);
	font-family: var(--df-font-heading);
}

/* Card hover: title colour shift */
.df-card:hover .df-card__title a {
	color: var(--df-primary);
}

/* .df-card__date style */
.df-card__date {
	font-size: 0.78rem;
	color: var(--df-text-light);
	white-space: nowrap;
}

/* .df-card__read-more */
.df-card__read-more {
	font-family: var(--df-font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--df-primary);
	text-decoration: none;
	white-space: nowrap;
}

.df-card__read-more:hover {
	text-decoration: underline;
}

/* =========================================================================
   3. BADGE — TAXONOMY COLOUR SYSTEM (.df-badge)
   ========================================================================= */

/* Per-term colour overrides using data attributes (set by JS if needed) */
.df-badge[data-term="epic-fails"]                 { background-color: #FF6B2B; color: #fff; }
.df-badge[data-term="parenting-wins-gone-wrong"]  { background-color: #7C3AED; color: #fff; }
.df-badge[data-term="diy-disasters"]              { background-color: #DC2626; color: #fff; }
.df-badge[data-term="dad-jokes-gone-physical"]    { background-color: #D97706; color: #fff; }
.df-badge[data-term="caught-on-camera"]           { background-color: #0284C7; color: #fff; }
.df-badge[data-term="viewer-submissions"]         { background-color: #059669; color: #fff; }

/* =========================================================================
   4. SUBMISSION FORM (.df-submit-form)
   ========================================================================= */

.df-submit-form-wrap {
	max-width: 760px;
	margin: 0 auto;
}

.df-submit-form__intro {
	text-align: center;
	margin-bottom: 2rem;
}

.df-submit-form__emoji {
	display: block;
	font-size: 3rem;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.df-submit-form__title {
	font-family: var(--df-font-heading);
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	font-weight: 900;
	color: var(--df-secondary);
	margin: 0 0 0.5rem;
}

.df-submit-form__subtitle {
	color: var(--df-text-light);
	font-size: 1rem;
	margin: 0;
}

/* The form itself */
.df-submit-form {
	background: var(--df-bg);
	border: 2px solid var(--df-border);
	border-radius: var(--df-radius-lg);
	padding: 2rem 2.5rem;
	box-shadow: var(--df-shadow-sm);
}

@media (max-width: 600px) {
	.df-submit-form {
		padding: 1.5rem 1.25rem;
	}
}

/* Two-column form row */
.df-form-row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

@media (max-width: 600px) {
	.df-form-row--2col {
		grid-template-columns: 1fr;
	}
}

/* Character counter */
#df_fail_title_count,
#df_fail_story_count {
	display: block;
	font-size: 0.78rem;
	color: var(--df-text-light);
	margin-top: 4px;
	text-align: right;
	transition: color 0.2s;
}

#df_fail_title_count.over-limit,
#df_fail_story_count.over-limit {
	color: #dc2626;
	font-weight: 700;
}

/* File upload custom styling */
.df-file-upload-wrap {
	position: relative;
}

.df-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	z-index: -1;
}

.df-file-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--df-border);
	border-radius: var(--df-radius-md);
	background: var(--df-light-bg);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	width: 100%;
}

.df-file-label:hover,
.df-file-input:focus + .df-file-label {
	border-color: var(--df-primary);
	background: #fff5f0;
}

.df-file-label__icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.df-file-label__text {
	font-family: var(--df-font-heading);
	font-weight: 700;
	color: var(--df-secondary);
}

.df-file-label__hint {
	font-size: 0.78rem;
	color: var(--df-text-light);
	margin-left: auto;
	white-space: nowrap;
}

.df-file-preview {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.df-file-remove {
	background: none;
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius-pill);
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	color: #dc2626;
	cursor: pointer;
	font-family: var(--df-font-heading);
	font-weight: 700;
	transition: background 0.2s;
}

.df-file-remove:hover {
	background: #fef2f2;
}

/* Checkbox */
.df-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-weight: normal;
	font-family: var(--df-font-body);
	font-size: 0.875rem;
	color: var(--df-text-dark);
}

.df-checkbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--df-primary);
	cursor: pointer;
}

/* Required asterisk */
.df-required {
	color: var(--df-primary);
	margin-left: 2px;
}

/* Submit button row */
.df-form-group--submit {
	text-align: center;
	margin-top: 0.5rem;
}

.df-submit-btn {
	min-width: 220px;
}

/* Loading state */
.df-submit-btn.is-loading {
	opacity: 0.8;
	pointer-events: none;
	cursor: wait;
}

.df-submit-btn.is-loading .df-btn-icon::after {
	content: ' ⏳';
}

/* Success / error message animations */
.df-submit-form__success,
.df-submit-form__error {
	animation: df-slide-down 0.35s ease;
}

@keyframes df-slide-down {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   5. HERO SECTION (.df-hero)
   ========================================================================= */

.df-hero {
	position: relative;
	background: linear-gradient(
		135deg,
		var(--df-secondary) 0%,
		#2a3f6b 50%,
		#1a2b4a 100%
	);
	color: #ffffff;
	padding: clamp(4rem, 10vw, 8rem) 0;
	overflow: hidden;
	text-align: center;
}

/* Decorative background circles */
.df-hero::before,
.df-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	opacity: 0.08;
}

.df-hero::before {
	width: 600px;
	height: 600px;
	background: var(--df-primary);
	top: -200px;
	right: -100px;
}

.df-hero::after {
	width: 400px;
	height: 400px;
	background: var(--df-accent);
	bottom: -150px;
	left: -80px;
}

.df-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--df-container-max);
	margin: 0 auto;
	padding: 0 var(--df-container-pad);
}

.df-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255,107,43,0.2);
	border: 1px solid rgba(255,107,43,0.4);
	border-radius: var(--df-radius-pill);
	padding: 0.35rem 1rem;
	font-family: var(--df-font-heading);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--df-accent);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.df-hero__title {
	font-family: var(--df-font-heading);
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 900;
	color: #ffffff;
	line-height: 1.1;
	margin: 0 0 1.25rem;
	text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.df-hero__title .df-highlight {
	color: var(--df-primary);
	-webkit-text-stroke: 1px rgba(255,107,43,0.3);
}

.df-hero__subtitle {
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	color: rgba(255,255,255,0.8);
	max-width: 640px;
	margin: 0 auto 2.5rem;
	line-height: 1.6;
}

.df-hero__cta-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.df-hero__stats {
	display: flex;
	justify-content: center;
	gap: 3rem;
	margin-top: 4rem;
	flex-wrap: wrap;
}

.df-hero__stat {
	text-align: center;
}

.df-hero__stat-number {
	display: block;
	font-family: var(--df-font-heading);
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--df-accent);
	line-height: 1;
}

.df-hero__stat-label {
	display: block;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.6);
	margin-top: 0.25rem;
}

/* =========================================================================
   6. CTA STRIP (.df-cta-strip)
   ========================================================================= */

.df-cta-strip {
	background: var(--df-primary);
	padding: 3rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.df-cta-strip::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 20px,
		rgba(255,255,255,0.04) 20px,
		rgba(255,255,255,0.04) 40px
	);
}

.df-cta-strip__inner {
	position: relative;
	z-index: 1;
	max-width: var(--df-container-max);
	margin: 0 auto;
	padding: 0 var(--df-container-pad);
}

.df-cta-strip__title {
	font-family: var(--df-font-heading);
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	font-weight: 900;
	color: #ffffff;
	margin: 0 0 0.75rem;
}

.df-cta-strip__text {
	color: rgba(255,255,255,0.85);
	font-size: 1.05rem;
	margin: 0 auto 2rem;
	max-width: 540px;
	line-height: 1.6;
}

.df-cta-strip .df-btn-accent {
	box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.df-cta-strip .df-btn-ghost {
	border-color: rgba(255,255,255,0.5);
	color: #ffffff;
}

.df-cta-strip .df-btn-ghost:hover {
	border-color: #ffffff;
	background: rgba(255,255,255,0.1);
	color: #ffffff;
}

/* =========================================================================
   7. RATING DISPLAY (.df-rating)
   ========================================================================= */

.df-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--df-font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.25em 0.75em;
	border-radius: var(--df-radius-pill);
}

/* Severity indicator — decorative stars/flames */
.df-rating--legendary::before { content: '🔥 '; }
.df-rating--medium::before    { content: '⚡ '; }
.df-rating--mild::before      { content: '😅 '; }

/* Standalone rating display (not a badge) */
.df-rating-display {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--df-font-heading);
	font-weight: 700;
	color: var(--df-text-dark);
}

.df-rating-display__stars {
	display: flex;
	gap: 2px;
}

.df-rating-display__star {
	font-size: 1.1rem;
	line-height: 1;
}

.df-rating-display__star--filled {
	color: var(--df-accent);
}

.df-rating-display__star--empty {
	color: var(--df-border);
}

/* =========================================================================
   8. LEADERBOARD (.df-leaderboard)
   ========================================================================= */

.df-leaderboard {
	background: var(--df-bg);
	border: 2px solid var(--df-border);
	border-radius: var(--df-radius-lg);
	overflow: hidden;
	box-shadow: var(--df-shadow-sm);
}

.df-leaderboard__title {
	font-family: var(--df-font-heading);
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--df-secondary);
	margin: 0;
	padding: 1.5rem 1.75rem;
	border-bottom: 2px solid var(--df-border);
	background: var(--df-light-bg);
}

.df-leaderboard__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-leaderboard__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.75rem;
	border-bottom: 1px solid var(--df-border);
	transition: background var(--df-transition);
}

.df-leaderboard__item:last-child {
	border-bottom: none;
}

.df-leaderboard__item:hover {
	background: #fff9f7;
}

/* Gold/silver/bronze podium highlights */
.df-leaderboard__item--rank-1 { background: linear-gradient(to right, rgba(255,215,0,0.08), transparent); }
.df-leaderboard__item--rank-2 { background: linear-gradient(to right, rgba(192,192,192,0.08), transparent); }
.df-leaderboard__item--rank-3 { background: linear-gradient(to right, rgba(205,127,50,0.08), transparent); }

.df-leaderboard__rank {
	font-size: 1.5rem;
	flex-shrink: 0;
	width: 2rem;
	text-align: center;
	line-height: 1;
}

.df-leaderboard__thumbnail {
	width: 56px;
	height: 56px;
	border-radius: var(--df-radius-md);
	overflow: hidden;
	flex-shrink: 0;
}

.df-leaderboard__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.df-leaderboard__info {
	flex: 1;
	min-width: 0;
}

.df-leaderboard__post-title {
	font-family: var(--df-font-heading);
	font-size: 1rem;
	font-weight: 800;
	margin: 0 0 0.35rem;
	color: var(--df-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.df-leaderboard__post-title a {
	color: inherit;
	text-decoration: none;
}

.df-leaderboard__post-title a:hover {
	color: var(--df-primary);
}

.df-leaderboard__meta {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.df-leaderboard__stats {
	flex-shrink: 0;
	text-align: right;
}

.df-leaderboard__comments {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--df-font-heading);
	font-size: 1rem;
	font-weight: 800;
	color: var(--df-secondary);
}

.df-leaderboard__comments-icon {
	font-size: 1.1rem;
}

.df-leaderboard__footer {
	padding: 1.25rem 1.75rem;
	border-top: 2px solid var(--df-border);
	background: var(--df-light-bg);
	text-align: center;
}

@media (max-width: 480px) {
	.df-leaderboard__item {
		padding: 0.875rem 1rem;
		gap: 0.75rem;
	}
	.df-leaderboard__thumbnail { display: none; }
	.df-leaderboard__post-title { font-size: 0.9rem; }
}

/* =========================================================================
   9. RECENT FAILS GRID (shortcode wrapper)
   ========================================================================= */

.df-recent-fails {
	/* inherits from .df-grid-N classes */
}

.df-no-fails {
	text-align: center;
	color: var(--df-text-light);
	font-style: italic;
	padding: 2rem;
}

/* =========================================================================
   10. DIVI MOBILE MENU OVERRIDES
   ========================================================================= */

/* Ensure the Divi hamburger button is visible on mobile with our brand colour */
@media (max-width: 980px) {
	#et_mobile_nav_menu .mobile_menu_bar:before,
	.et_mobile_nav_menu .mobile_menu_bar:before {
		color: var(--df-primary) !important;
	}

	.et_mobile_menu {
		background: var(--df-secondary) !important;
	}

	.et_mobile_menu li a {
		color: rgba(255,255,255,0.9) !important;
		border-bottom-color: rgba(255,255,255,0.08) !important;
		font-family: var(--df-font-heading) !important;
		font-weight: 700 !important;
	}

	.et_mobile_menu li a:hover {
		color: var(--df-accent) !important;
	}

	/* Active menu item */
	.et_mobile_menu li.current_page_item > a,
	.et_mobile_menu li.current-menu-item > a {
		color: var(--df-primary) !important;
	}
}

/* Divi desktop nav link colours */
#top-menu li a,
#et-top-navigation #top-menu > li > a {
	font-family: var(--df-font-heading);
	font-weight: 700;
}

#top-menu > li > a:hover {
	color: var(--df-primary) !important;
}

/* =========================================================================
   11. MISC UTILITIES & ANIMATIONS
   ========================================================================= */

/* Lazy-load fade-in */
.df-lazy {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.df-lazy.is-loaded {
	opacity: 1;
}

/* Pulse animation (for "new" badge or notifications) */
@keyframes df-pulse {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.08); }
}

.df-pulse {
	animation: df-pulse 2s ease-in-out infinite;
}

/* Bounce animation (for CTA attention) */
@keyframes df-bounce {
	0%, 100% { transform: translateY(0); }
	30%       { transform: translateY(-6px); }
	60%       { transform: translateY(-3px); }
}

.df-bounce {
	animation: df-bounce 1.2s ease infinite;
}

/* Fade-in on scroll (applied by IntersectionObserver in custom.js) */
.df-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.df-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Section headings with accent underline */
.df-section-title {
	position: relative;
	display: inline-block;
	margin-bottom: 1.5rem;
}

.df-section-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	height: 4px;
	width: 50px;
	background: var(--df-primary);
	border-radius: 2px;
}

/* Centered section title variant */
.df-section-title--center {
	display: block;
	text-align: center;
}

.df-section-title--center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Sticky header shadow when scrolled (added by JS) */
.et_header_style_centered.scrolled #main-header,
.et_header_style_left.scrolled #main-header {
	box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* Like/vote feedback micro-animation */
@keyframes df-like-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.3); }
	70%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.df-like-btn.pop {
	animation: df-like-pop 0.4s ease;
}

/* Share button tooltip */
.df-share-btn {
	position: relative;
}

.df-share-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--df-secondary);
	color: #fff;
	font-size: 0.72rem;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: var(--df-radius-sm);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}

.df-share-btn:hover::after {
	opacity: 1;
}

/* Admin bar offset — ensures fixed elements clear WP admin bar */
.admin-bar .df-sticky-element {
	top: calc(32px + 1rem);
}

@media (max-width: 782px) {
	.admin-bar .df-sticky-element {
		top: calc(46px + 1rem);
	}
}

/* Focus visible ring across all interactive elements */
:focus-visible {
	outline: 3px solid var(--df-primary);
	outline-offset: 2px;
}

/* Reduced motion — respect OS preferences */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}