/**
 * Page Styles
 *
 * @package Together_Theme
 * @since 1.0.0
 */

.together-page {
	width: 100%;
	max-width: 1350px;
	margin: 0 auto;
	padding: 0 20px 40px 20px;
	overflow-x: visible;
}

/* Legal Pages Styling */
.together-legal-page {
	max-width: 800px;
}

.together-legal-page .page-content {
	background: #fff;
	padding: 40px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.together-page .container {
	overflow-x: visible;
}

.page-content {
	overflow-x: visible;
}

.page-header {
	background: #F0FDF4; /* Light green background */
	padding: 60px 20px 40px;
	margin: 0 0 40px 0;
	border-bottom: none;
	position: relative;
	overflow: hidden;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Add soft blob shapes to page header */
.page-header::before,
.page-header::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50% 30% 60% 40% / 50% 40% 60% 30%;
	z-index: 1;
	pointer-events: none;
}

.page-header::before {
	top: -100px;
	right: -100px;
	background: rgba(107, 203, 119, 0.3); /* Light green blob */
	transform: rotate(45deg);
}

.page-header::after {
	bottom: -80px;
	left: -80px;
	background: rgba(151, 195, 84, 0.4); /* Medium green blob */
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	transform: rotate(-30deg);
}

/* Inner wrapper for constrained content width */
.page-header-inner {
	max-width: 1350px;
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 0 20px;
	box-sizing: border-box;
}

.page-title {
	font-size: 2.5em;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	line-height: 1.3;
	position: relative;
	z-index: 2;
	max-width: 1350px;
	width: 100%;
	text-align: center;
}

.page-title .title-part-blue {
	color: #447AB3;
}

.page-title .title-part-black {
	color: #1a1a1a;
}

.page-meta {
	display: none; /* Hide the date */
}

.page-date {
	display: flex;
	align-items: center;
	gap: 6px;
}

.page-date svg {
	width: 16px;
	height: 16px;
	color: #999;
}

.page-featured-image {
	margin: 30px 0;
	border-radius: 12px;
	overflow: hidden;
}

.page-image {
	width: 100%;
	height: auto;
	display: block;
}

.page-content-inner {
	font-size: 16px;
	line-height: 1.8;
	color: #333;
}

.page-content-inner h2 {
	font-size: 1.8em;
	font-weight: 600;
	margin: 40px 0 20px 0;
	color: #1a1a1a;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.page-content-inner h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.page-content-inner h3 {
	font-size: 1.5em;
	font-weight: 600;
	margin: 30px 0 15px 0;
	color: #1a1a1a;
}

.page-content-inner h4 {
	font-size: 1.2em;
	font-weight: 600;
	margin: 25px 0 12px 0;
	color: #1a1a1a;
}

.page-content-inner p {
	margin-bottom: 20px;
}

.page-content-inner ul,
.page-content-inner ol {
	margin: 20px 0;
	padding-left: 30px;
}

.page-content-inner li {
	margin-bottom: 12px;
	line-height: 1.7;
}

.page-content-inner a {
	color: #447AB3;
	text-decoration: underline;
}

.page-content-inner a:hover {
	color: #2d3dd3;
}

.page-content-inner img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 25px 0;
}

.page-content-inner blockquote {
	border-left: 4px solid #447AB3;
	padding-left: 20px;
	margin: 25px 0;
	font-style: italic;
	color: #666;
	background: #f9f9f9;
	padding: 20px;
	border-radius: 4px;
}

.page-content-inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 25px 0;
}

.page-content-inner table th,
.page-content-inner table td {
	padding: 12px;
	border: 1px solid #e0e0e0;
	text-align: left;
}

.page-content-inner table th {
	background: #f5f5f5;
	font-weight: 600;
}

.page-content-inner code {
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 14px;
	font-family: 'Courier New', monospace;
}

.page-content-inner pre {
	background: #f5f5f5;
	padding: 20px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 25px 0;
}

.page-content-inner pre code {
	background: none;
	padding: 0;
}

/* Legal Page Specific Styles */
.together-legal-page .page-content-inner {
	font-size: 15px;
}

.together-legal-page .page-content-inner h2 {
	font-size: 1.6em;
	margin-top: 35px;
}

.together-legal-page .page-content-inner h3 {
	font-size: 1.3em;
	margin-top: 25px;
}

.together-legal-page .page-content-inner p {
	margin-bottom: 15px;
}

.together-legal-page .page-content-inner ul,
.together-legal-page .page-content-inner ol {
	margin: 15px 0;
}

.together-legal-page .page-content-inner li {
	margin-bottom: 10px;
}

/* Page Links */
.page-links {
	margin: 30px 0;
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

.page-links a {
	display: inline-block;
	padding: 8px 12px;
	margin: 0 4px;
	background: #f5f5f5;
	color: #333;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s;
}

.page-links a:hover {
	background: #447AB3;
	color: #fff;
}

/* Page Footer */
.page-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.edit-link a {
	color: #666;
	font-size: 14px;
	text-decoration: none;
}

.edit-link a:hover {
	color: #447AB3;
}

/* FAQ Page Specific Styles */
body.page-slug-faq .together-page .page-content-inner,
body.page-template-default.page-slug-faq .page-content-inner {
	position: relative;
	overflow: visible;
}

/* Hide or fix any large black decorative shapes - more comprehensive approach */
body.page-slug-faq .page-content-inner [class*="shape"],
body.page-slug-faq .page-content-inner [class*="decoration"],
body.page-slug-faq .page-content-inner div[style*="background: black"],
body.page-slug-faq .page-content-inner div[style*="background:#000"],
body.page-slug-faq .page-content-inner div[style*="background-color: black"],
body.page-slug-faq .page-content-inner div[style*="background-color:#000"],
body.page-slug-faq .page-content-inner div[style*="background-color:black"],
body.page-slug-faq .page-content-inner [style*="background:black"],
body.page-slug-faq .page-content-inner div[style*="background-color: rgb(0, 0, 0)"],
body.page-slug-faq .page-content-inner div[style*="background-color:rgb(0,0,0)"] {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* More aggressive - target any large div that might be the black shape */
body.page-slug-faq .page-content-inner > div {
	background: transparent !important;
}

/* Target any div with specific dimensions that might be the black shape */
body.page-slug-faq .page-content-inner div[style*="width"][style*="height"] {
	max-width: 100% !important;
	max-height: none !important;
}

/* Fix Essential Addons accordion specifically */
body.page-slug-faq .page-content-inner .eael-adv-accordion {
	background: transparent !important;
}

body.page-slug-faq .page-content-inner .eael-adv-accordion-item {
	background: transparent !important;
}

/* Target any wrapper divs that might have black backgrounds */
body.page-slug-faq .page-content-inner > div > div {
	background: transparent !important;
}

/* Fix any absolutely positioned elements that might overflow */
body.page-slug-faq .page-content-inner > div[style*="position: absolute"],
body.page-slug-faq .page-content-inner > div[style*="position:absolute"] {
	max-height: 500px;
	overflow: hidden;
}

/* Ensure FAQ content area is clean and doesn't overflow */
body.page-slug-faq .page-content-inner {
	background: transparent;
	overflow-x: hidden;
}

/* Hide any large black rectangles or shapes */
body.page-slug-faq .page-content-inner > div {
	position: relative;
}

body.page-slug-faq .page-content-inner > div > div[style*="background"] {
	max-width: 100%;
}

/* FAQ Section Headers - Better styling */
.page-content-inner h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 50px;
	margin-bottom: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: #1a1a1a;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

.page-content-inner h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* FAQ questions - usually in bold or emphasized */
.page-content-inner > p > strong,
.page-content-inner > div > p > strong,
.page-content-inner > p > b,
.page-content-inner > div > p > b {
	font-weight: 600;
	color: #1a1a1a;
	font-size: 1.1em;
	display: block;
	margin-bottom: 10px;
}

/* Fix for decorative elements or images that might overflow */
.page-content-inner img,
.page-content-inner svg {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Fix for any absolutely positioned elements that might cause layout issues */
.page-content-inner {
	position: relative;
	min-height: auto;
}

.page-content-inner > * {
	position: relative;
	z-index: 1;
}

/* Remove any decorative backgrounds or shapes that might cause issues */
.page-content-inner::before,
.page-content-inner::after {
	content: none;
	display: none;
}

/* Ensure FAQ content doesn't overflow */
.page-content-inner {
	overflow-x: hidden;
	word-wrap: break-word;
}

/* Fix for any Elementor or custom blocks */
.page-content-inner .elementor-widget,
.page-content-inner .wp-block,
.page-content-inner .wp-block-group {
	position: relative;
	z-index: 1;
	max-width: 100%;
}

/* Ensure lists in FAQ are properly styled */
.page-content-inner ul,
.page-content-inner ol {
	margin: 20px 0 20px 30px;
	padding: 0;
}

.page-content-inner li {
	margin-bottom: 12px;
	line-height: 1.7;
}

/* Fix any floating or positioned elements - but be more specific for FAQ */
body.page-slug-faq .page-content-inner [style*="position: absolute"]:not([class*="icon"]):not([class*="tooltip"]):not([role="img"]),
body.page-slug-faq .page-content-inner [style*="position:fixed"]:not([class*="icon"]):not([class*="tooltip"]):not([role="img"]) {
	position: static !important;
}

/* Additional aggressive fix for black shapes - target any div with border-radius and black/dark background */
body.page-slug-faq .page-content-inner div[style*="border-radius"] {
	background: transparent !important;
}

/* Ensure all wrapper divs have transparent backgrounds */
body.page-slug-faq .page-content-inner > div > div {
	background: transparent !important;
}

/* Hide any element with a very dark/black background using computed color detection via attribute matching */
body.page-slug-faq .page-content-inner div[style*="rgb(0, 0, 0)"],
body.page-slug-faq .page-content-inner div[style*="rgb(0,0,0)"],
body.page-slug-faq .page-content-inner div[style*="#000000"] {
	background: transparent !important;
}

/* Responsive */
@media (max-width: 768px) {
	.together-page {
		padding: 20px 15px;
	}
	
	.together-legal-page .page-content {
		padding: 25px 20px;
	}
	
	.page-title {
		font-size: 2em;
	}
	
	.page-content-inner {
		font-size: 15px;
	}
	
	.page-content-inner h2 {
		font-size: 1.5em;
		flex-wrap: wrap;
	}
	
	.page-content-inner h2::before {
		width: 35px;
		height: 35px;
	}
	
	.page-content-inner h3 {
		font-size: 1.3em;
	}
	
	.page-content-inner table {
		font-size: 14px;
	}
	
	.page-content-inner table th,
	.page-content-inner table td {
		padding: 8px;
	}
}