/**
 * Parallax Styles
 * TDT Parallax Theme
 */

/* ============================================
   CSS Custom Properties
   ============================================ */

:root {
	--border-radius: 8px;
}

/* ============================================
   Front Page Container
   ============================================ */

.parallax-front-page {
	margin: 0;
	padding: 0;
	max-width: 100%;
}

/* No sections message */
.no-sections {
	padding: 4rem 0;
	text-align: center;
}

.no-sections .parallax-section-inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 3em;
	background-color: #f9f9f9;
}

/* ============================================
   Section Styles
   ============================================ */

.parallax-section {
	position: relative;
	padding: 3rem 0;
}

.parallax-section-inner {
	max-width: 1024px;
	margin: 0 auto;
	padding: 3em;
	background-color: #f9f9f9;
	border-radius: var(--border-radius);
}

.parallax-section .section-header {
	text-align: center;
	margin-bottom: 2rem;
}

.parallax-section .section-title {
	margin: 0 0 1rem;
	font-size: 2.5rem;
	font-weight: 600;
}

.section-text {
	text-align: justify;
}

/* Clearfix for section-text containing floated image */
.section-text::after {
	content: '';
	display: table;
	clear: both;
}

.section-featured-image {
	max-width: 40%;
	margin-bottom: 1rem;
}

.section-featured-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius);
}

/* Featured image positioning with float */
.section-content.featured-left .section-featured-image {
	float: left;
	margin-right: 2rem;
}

.section-content.featured-right .section-featured-image {
	float: right;
	margin-left: 2rem;
}

/* ============================================
   Parallax Bar Separator
   ============================================ */

.parallax-bar {
	position: relative;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 300px;
	overflow: hidden;
	margin: 3rem 0;
}

/*
 * Max-width and centering for wide viewports is now handled
 * dynamically in parallax-bar.php based on customizer settings
 */

/* ============================================
   Slanted Edges Implementation
   ============================================ */

/*
 * All slants (horizontal top/bottom and vertical sides) are now
 * implemented via a unified clip-path polygon applied inline.
 * This approach is cleaner and more predictable than overlay elements.
 *
 * The clip-path is calculated in parallax-bar.php based on:
 * - top_slant: angle in degrees for the top edge
 * - bottom_slant: angle in degrees for the bottom edge
 * - vertical_slant: angle in degrees for the side edges (from customizer)
 */

/* ============================================
   Responsive Behavior
   Note: Mobile breakpoint-dependent styles are generated
   dynamically in PHP (functions.php) to use configurable breakpoint.
   ============================================ */

/* Adjust section content on tablets */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.section-featured-image {
		max-width: 35%;
	}
}

/* ============================================
   Block Editor Content Styles
   ============================================ */

.section-text .wp-block-quote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid #0073aa;
	background-color: rgba(0, 115, 170, 0.05);
}

.section-text ul,
.section-text ol {
	margin: 1rem 0 1.5rem 1.5rem;
}

.section-text li {
	margin-bottom: 0.5rem;
}

.section-text h1,
.section-text h2,
.section-text h3,
.section-text h4,
.section-text h5,
.section-text h6 {
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.section-text p {
	margin-bottom: 1.5rem;
}

/* ============================================
   Smooth Transitions
   ============================================ */

.parallax-section,
.parallax-bar {
	transition: all 0.3s ease;
}