/*

 Theme Name:   GeneratePress Child (Dating Theme)

 Theme URI:    https://generatepress.com

 Description:  Modern Romantic Dating Theme customization for GeneratePress with compact sticky glass header and mobile optimization.

 Author:       GeneratePress Child Team

 Author URI:   https://generatepress.com

 Template:     generatepress

 Version:      1.0.0

*/

/* ==========================================================================

   1. DESIGN SYSTEM & DATING COLOR PALETTE

   ========================================================================== */

:root {

	/* Romantic Color Palette */

	--dt-pink-primary: #ff2a5f;

	--dt-pink-hover: #e01b4c;

	--dt-pink-light: #fff0f3;

	--dt-coral: #ff758c;

	--dt-purple: #7b1fa2;

	--dt-dark-plum: #2c1a29;

	--dt-bg: #fffbfd;

	--dt-card-bg: #ffffff;

	--dt-text: #2d232a;

	--dt-text-muted: #7c6d79;

	--dt-border: #ffe3eb;

	/* Modern Romantic Gradients */

	--dt-gradient-primary: linear-gradient(135deg, #ff2a5f 0%, #ff758c 100%);

	--dt-gradient-secondary: linear-gradient(135deg, #7b1fa2 0%, #ff2a5f 100%);

	--dt-gradient-bg: linear-gradient(180deg, #fff5f8 0%, #ffffff 100%);

	--dt-glass: rgba(255, 255, 255, 0.90);

	/* Elevation & Shadows */

	--dt-shadow-sm: 0 4px 15px rgba(255, 42, 95, 0.06);

	--dt-shadow-md: 0 10px 30px rgba(255, 42, 95, 0.10);

	--dt-shadow-lg: 0 18px 40px rgba(255, 42, 95, 0.16);

	/* Border Radii */

	--dt-radius-sm: 8px;

	--dt-radius-md: 16px;

	--dt-radius-lg: 24px;

	--dt-radius-full: 9999px;

	/* Typography */

	--dt-font-body: 'Poppins', system-ui, -apple-system, sans-serif;

	--dt-font-heading: 'Outfit', 'Poppins', system-ui, sans-serif;

}

/* ==========================================================================

   2. GLOBAL BASE STYLES & TYPOGRAPHY

   ========================================================================== */

body {

	font-family: var(--dt-font-body);

	background-color: var(--dt-bg);

	color: var(--dt-text);

	line-height: 1.6;

	-webkit-font-smoothing: antialiased;

}

h1, h2, h3, h4, h5, h6,

.main-title,

.entry-title {

	font-family: var(--dt-font-heading);

	color: var(--dt-dark-plum);

	font-weight: 700;

	letter-spacing: -0.02em;

}

::selection {

	background: var(--dt-pink-primary);

	color: #ffffff;

}

/* ==========================================================================

   3. COMPACT & STYLISH STICKY HEADER

   ========================================================================== */

/* Header Outer Container */

.site-header {

	position: relative;

	top: auto;

	z-index: 999;

	background: var(--dt-glass) !important;

	backdrop-filter: blur(16px);

	-webkit-backdrop-filter: blur(16px);

	border-bottom: 1px solid rgba(255, 42, 95, 0.12);

	box-shadow: 0 4px 25px rgba(255, 42, 95, 0.08);

	padding: 4px 0 !important; /* Ultra compact header height */

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.inside-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 2px 20px !important;

	min-height: auto !important;

}

/* Site Title / Brand Logo Styling */

.site-logo img,

.header-image,

.inside-header img {

	max-height: 34px !important;

	width: auto !important;

	display: block;

}

.main-title {

	font-size: 22px !important;

	font-weight: 800 !important;

	margin: 0 !important;

	line-height: 1.2 !important;

}

.main-title a {

	background: var(--dt-gradient-primary);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	display: inline-flex;

	align-items: center;

	gap: 6px;

	text-decoration: none !important;

	transition: opacity 0.2s ease;

	line-height: 1.2 !important;

}

.main-title a:hover {

	opacity: 0.9;

}

.main-title a::before {

	content: '❤️';

	font-size: 18px;

	-webkit-text-fill-color: initial;

	filter: drop-shadow(0 2px 6px rgba(255, 42, 95, 0.4));

}

.site-description {

	font-size: 11px !important;

	color: var(--dt-text-muted) !important;

	margin: 0 !important;

	font-weight: 500;

	letter-spacing: 0.5px;

	line-height: 1.1 !important;

}

/* ==========================================================================

   4. NAVIGATION MENU STYLING (DESKTOP)

   ========================================================================== */

.main-navigation {

	background: transparent !important;

	line-height: 1.3 !important;

}

.main-navigation .main-nav ul {

	display: flex;

	align-items: center;

	gap: 6px;

	margin: 0 !important;

	padding: 0 !important;

}

.main-navigation .main-nav ul li {

	line-height: 1.3 !important;

	display: inline-flex;

	align-items: center;

}

.main-navigation a,

.main-navigation .main-nav ul li a {

	font-family: var(--dt-font-heading);

	font-weight: 600;

	font-size: 13px !important;

	line-height: 1.3 !important;

	color: var(--dt-dark-plum) !important;

	padding: 6px 14px !important;

	border-radius: var(--dt-radius-full) !important;

	transition: all 0.25s ease;

	position: relative;

	display: inline-flex;

}

/* Menu Item Hover & Active Effects */

.main-navigation .main-nav ul li:hover > a,

.main-navigation .main-nav ul li.sfHover > a {

	color: var(--dt-pink-primary) !important;

	background: var(--dt-pink-light) !important;

}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {

	color: #ffffff !important;

	background: var(--dt-gradient-primary) !important;

	box-shadow: 0 3px 10px rgba(255, 42, 95, 0.3);

}

/* Header Action Button (Call To Action Menu Item - Sleek Pill) */

.main-navigation .main-nav ul li.menu-item-cta > a,

.main-navigation .main-nav ul li:last-child:not([class*="current-menu-"]) > a {

	background: var(--dt-gradient-primary) !important;

	color: #ffffff !important;

	border-radius: var(--dt-radius-full) !important;

	padding: 6px 18px !important;

	line-height: 1.3 !important;

	box-shadow: 0 4px 12px rgba(255, 42, 95, 0.3);

	font-size: 13px !important;

}

.main-navigation .main-nav ul li.menu-item-cta > a:hover,

.main-navigation .main-nav ul li:last-child:not([class*="current-menu-"]) > a:hover {

	transform: translateY(-1px);

	box-shadow: 0 6px 16px rgba(255, 42, 95, 0.45) !important;

	background: var(--dt-gradient-primary) !important;

	opacity: 0.95;

}

/* Dropdown Submenu Styling */

.main-navigation ul ul {

	background: #ffffff !important;

	border-radius: var(--dt-radius-md) !important;

	box-shadow: var(--dt-shadow-lg) !important;

	border: 1px solid var(--dt-border) !important;

	padding: 8px !important;

	top: 100% !important;

}

.main-navigation ul ul li a {

	border-radius: var(--dt-radius-sm) !important;

	font-size: 13px !important;

	padding: 8px 12px !important;

	line-height: 1.3 !important;

}

/* ==========================================================================

   5. MOBILE RESPONSIVENESS & MOBILE MENU OVERLAY

   ========================================================================== */

@media (max-width: 768px) {

	/* Compact single-row mobile header bar.
	   position: relative (not sticky) keeps THIS as the positioning context
	   for the dropdown drawer below, so the drawer spans the full header
	   width, while the header scrolls away normally instead of sticking. */
	.site-header {
		padding: 6px 0 !important;
		position: relative !important;
		top: auto !important;
		z-index: 9999 !important;
		overflow: visible !important;
	}

	.inside-header {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
		padding: 4px 16px !important;
		min-height: 48px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Logo / branding: stays on the LEFT, natural width */
	.site-branding,
	.site-logo,
	.header-image {
		order: 0 !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		clear: none !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	.main-title {
		font-size: 19px !important;
		white-space: nowrap;
	}

	.main-title a::before {
		font-size: 16px;
	}

	.site-description {
		display: none !important; /* Hide tagline to keep the bar compact */
	}

	/* Navigation shrinks to JUST the toggle and pins to the RIGHT.
	   flex: 0 0 auto stops it from grabbing the whole row (the old bug
	   that wrapped the logo onto a second line). */
	#site-navigation,
	.main-navigation {
		order: 0 !important;
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		float: none !important;
		clear: none !important;
		background: transparent !important;
		display: inline-flex !important;
		align-items: center !important;
		position: static !important; /* don't become the drawer's offset parent */
	}

	.main-navigation .inside-navigation,
	.main-navigation .main-nav {
		position: static !important;
		display: inline-flex !important;
		align-items: center !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Never show GeneratePress' extra mobile toggle wrapper */
	#mobile-menu-control-wrapper,
	.mobile-menu-control-wrapper {
		display: none !important;
	}

	/* Sleek circular hamburger button (in normal flow, right side) */
	#site-navigation .menu-toggle,
	.inside-header .menu-toggle,
	.menu-toggle {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		transform: none !important;
		flex: 0 0 auto !important;
		width: 38px !important;
		height: 38px !important;
		min-height: 38px !important;
		max-width: 38px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: var(--dt-gradient-primary) !important;
		color: #ffffff !important;
		border: none !important;
		border-radius: 50% !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		font-family: var(--dt-font-heading) !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 4px 14px rgba(255, 42, 95, 0.4) !important;
		transition: all 0.2s ease;
		z-index: 1000 !important;
	}

	/* Show only the clean 3-line icon, no text label */
	.menu-toggle .mobile-menu,
	.menu-toggle label,
	.menu-toggle span.mobile-menu-text {
		display: none !important;
	}

	.menu-toggle:hover,
	.menu-toggle:focus {
		transform: scale(1.05) !important;
		box-shadow: 0 6px 18px rgba(255, 42, 95, 0.55) !important;
	}

	/* Mobile dropdown drawer (shown when hamburger is tapped) */
	.main-navigation.toggled .main-nav > ul {
		display: flex !important;
		flex-direction: column;
		position: absolute !important;
		top: 100% !important;
		left: 12px !important;
		right: 12px !important;
		margin: 10px 0 !important;
		padding: 12px !important;
		background: #ffffff !important;
		border-radius: var(--dt-radius-md) !important;
		box-shadow: var(--dt-shadow-lg) !important;
		border: 1px solid var(--dt-border) !important;
		gap: 4px;
		z-index: 9999 !important;
	}

	.main-navigation.toggled .main-nav > ul li {
		width: 100%;
		text-align: left;
	}

	.main-navigation.toggled .main-nav > ul li a {
		padding: 12px 16px !important;
		font-size: 15px !important;
		width: 100%;
		display: block;
		border-radius: var(--dt-radius-sm) !important;
	}

	/* Layout container spacing on mobile */
	.site-main {
		padding-top: 10px;
	}

	.inside-article,
	.widget {
		padding: 18px !important;
		border-radius: var(--dt-radius-md) !important;
	}
}

/* ==========================================================================

   6. DATING THEME POST CARDS & CONTENT STYLING

   ========================================================================== */

.inside-article,

.widget,

.page .inside-article {

	background: var(--dt-card-bg);

	border-radius: var(--dt-radius-lg);

	box-shadow: var(--dt-shadow-md);

	border: 1px solid rgba(255, 230, 238, 0.7);

	padding: 30px;

	margin-bottom: 30px;

	transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.inside-article:hover {

	transform: translateY(-4px);

	box-shadow: var(--dt-shadow-lg);

}

/* Post Featured Images */

.post-image img,

.article-single img {

	border-radius: var(--dt-radius-md);

	box-shadow: var(--dt-shadow-sm);

	transition: transform 0.4s ease;

}

.post-image a:hover img {

	transform: scale(1.03);

}

/* Category Badges */

.entry-header .cat-links a {

	background: linear-gradient(135deg, rgba(255,42,95,0.1), rgba(255,117,140,0.18));

	color: var(--dt-pink-primary);

	font-family: var(--dt-font-heading);

	font-size: 11px;

	font-weight: 700;

	text-transform: uppercase;

	letter-spacing: 0.8px;

	padding: 4px 14px;

	border-radius: var(--dt-radius-full);

	text-decoration: none;

	display: inline-block;

	margin-bottom: 10px;

	transition: all 0.2s ease;

}

.entry-header .cat-links a:hover {

	background: var(--dt-gradient-primary);

	color: #ffffff;

	transform: translateY(-1px);

}

.entry-title a {

	color: var(--dt-dark-plum);

	text-decoration: none;

	transition: color 0.2s ease;

}

.entry-title a:hover {

	color: var(--dt-pink-primary);

}

/* Meta Data Styling */

.entry-meta {

	font-size: 13px;

	color: var(--dt-text-muted);

	margin-top: 8px;

}

.entry-meta a {

	color: var(--dt-text-muted);

	text-decoration: none;

}

.entry-meta a:hover {

	color: var(--dt-pink-primary);

}

/* ==========================================================================

   7. BUTTONS, FORMS & CALL TO ACTIONS

   ========================================================================== */

button,

html input[type="button"],

input[type="reset"],

input[type="submit"],

.button,

.wp-block-button__link {

	background: var(--dt-gradient-primary) !important;

	color: #ffffff !important;

	font-family: var(--dt-font-heading) !important;

	font-weight: 600 !important;

	font-size: 15px !important;

	padding: 12px 28px !important;

	border-radius: var(--dt-radius-full) !important;

	border: none !important;

	box-shadow: 0 6px 20px rgba(255, 42, 95, 0.35) !important;

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

	cursor: pointer;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	text-decoration: none !important;

}

button:hover,

html input[type="button"]:hover,

input[type="reset"]:hover,

input[type="submit"]:hover,

.button:hover,

.wp-block-button__link:hover {

	transform: translateY(-2px) scale(1.02);

	box-shadow: 0 10px 25px rgba(255, 42, 95, 0.5) !important;

	opacity: 0.96;

}

/* Form Fields */

input[type="text"],

input[type="email"],

input[type="url"],

input[type="password"],

input[type="search"],

textarea,

select {

	background: #ffffff;

	border: 1px solid var(--dt-border);

	border-radius: var(--dt-radius-sm);

	padding: 10px 16px;

	font-family: var(--dt-font-body);

	font-size: 14px;

	color: var(--dt-text);

	transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

input[type="text"]:focus,

input[type="email"]:focus,

input[type="url"]:focus,

input[type="password"]:focus,

input[type="search"]:focus,

textarea:focus,

select:focus {

	border-color: var(--dt-pink-primary);

	box-shadow: 0 0 0 4px rgba(255, 42, 95, 0.12);

	outline: none;

}

/* ==========================================================================

   8. SIDEBAR & FOOTER STYLING

   ========================================================================== */

.widget-title {

	font-size: 18px !important;

	font-weight: 700 !important;

	color: var(--dt-dark-plum) !important;

	position: relative;

	padding-bottom: 8px;

	margin-bottom: 16px !important;

}

.widget-title::after {

	content: '';

	position: absolute;

	bottom: 0;

	left: 0;

	width: 36px;

	height: 3px;

	background: var(--dt-gradient-primary);

	border-radius: var(--dt-radius-full);

}

.widget ul {

	list-style: none;

	padding: 0;

	margin: 0;

}

.widget ul li {

	padding: 8px 0;

	border-bottom: 1px dashed var(--dt-border);

}

.widget ul li:last-child {

	border-bottom: none;

}

.widget ul li a {

	color: var(--dt-text);

	text-decoration: none;

	transition: color 0.2s ease;

}

.widget ul li a:hover {

	color: var(--dt-pink-primary);

	padding-left: 4px;

}

/* ==========================================================================
   Site Footer  (cohesive dark bar, centered pill links, clean copyright)
   ========================================================================== */
.site-footer {
	background: linear-gradient(180deg, #3a2130 0%, #241521 100%) !important;
	color: #ffffff !important;
	padding: 38px 20px 26px !important;
	margin-top: 40px !important;
}

/* Remove the light-pink inner panel so the footer reads as ONE block
   (this panel + the gradient's top edge was the empty pink band) */
.site-footer .site-info {
	background: transparent !important;
	padding: 0 !important;
}

.site-footer .inside-site-info {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	max-width: 960px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	text-align: center !important;
}

/* Footer navigation menu -------------------------------------------------- */
.site-footer .footer-bar {
	width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
}

.site-footer .footer-bar .widget {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.site-footer .footer-bar ul.menu {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 4px 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Kill the dashed divider that leaked in from the sidebar .widget ul li rule */
.site-footer .footer-bar ul.menu li,
.site-footer .footer-bar .widget ul li {
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
}

.site-footer .footer-bar ul.menu li a {
	display: inline-block !important;
	color: #ffd0dd !important;
	font-family: var(--dt-font-heading);
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	padding: 8px 14px !important;
	border-radius: var(--dt-radius-full) !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.site-footer .footer-bar ul.menu li a:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.1) !important;
	padding-left: 14px !important; /* override sidebar hover shift */
}

/* Copyright line with a thin divider above it ----------------------------- */
.site-footer .copyright-bar {
	width: 100% !important;
	max-width: 960px !important;
	margin: 2px auto 0 !important;
	padding-top: 16px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 13px !important;
	text-align: center !important;
}

.site-footer a {
	color: #ff9ebb !important;
	text-decoration: none;
}

.site-footer a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

.generate-back-to-top {

	background: var(--dt-gradient-primary) !important;

	border-radius: 50% !important;

	box-shadow: 0 6px 20px rgba(255, 42, 95, 0.4) !important;

}