/* Magazine-like Layout Styles for Page Builder */

/* Magazine Container */
.magazine-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.6;
    color: #333;
    overflow: hidden; /* Clear floats */
}

/* Force magazine layout on all page builder content */
.page-builder-content.magazine-container {
    font-family: 'Georgia', 'Times New Roman', serif !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* Magazine Typography */
.magazine-container h1,
.magazine-container h2,
.magazine-container h3,
.magazine-container h4,
.magazine-container h5,
.magazine-container h6 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}

.magazine-container h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 3px solid #3498db;
    padding-bottom: 1rem;
}

/* Remove border-bottom for magazine-heading class */
.magazine-container .magazine-heading {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Ensure heading-content class also removes borders */
.magazine-container .heading-content {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Reduce spacing between heading and rich text components */
.magazine-content .page-component.component-heading + .page-component.component-rich_text {
    margin-top: 0.25rem !important;
}

.magazine-content .page-component.component-heading + .page-component.component-rich_text .rich-text-content {
    margin-top: 0 !important;
}

/* Fix spacing for rich text content after heading */
.magazine-content .page-component.component-heading + .page-component.component-rich_text .rich-text-content p:first-child {
    margin-top: 0 !important;
}

/* Remove empty paragraph spacing */
.magazine-content .rich-text-content p:empty {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Remove spacing from paragraphs that only contain a br tag */
.magazine-content .rich-text-content p:only-child:has(br) {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}

/* Alternative approach for empty paragraphs with br */
.magazine-content .rich-text-content p br:only-child {
    display: none;
}

/* Reduce spacing for first paragraph in rich text after heading */
.magazine-content .page-component.component-heading + .page-component.component-rich_text .rich-text-content > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* More aggressive approach for empty paragraphs */
.magazine-content .rich-text-content p {
    min-height: 0;
}

.magazine-content .rich-text-content p:first-child:empty {
    display: none !important;
}

/* Handle paragraphs with only whitespace and br */
.magazine-content .rich-text-content p:first-child {
    margin-top: 0 !important;
}

.magazine-content .rich-text-content p:first-child:has(> br:only-child) {
    display: none !important;
}

/* JavaScript-based cleanup for empty paragraphs */
.magazine-content .rich-text-content p.empty-paragraph {
    display: none !important;
}

/* Force tight spacing between heading and rich text */
.magazine-content .page-component.component-heading {
    margin-bottom: 0.25rem !important;
}

.magazine-content .page-component.component-rich_text {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Ensure first paragraph in rich text has no top margin */
.magazine-content .page-component.component-rich_text .rich-text-content > *:first-child {
    margin-top: 0 !important;
}

/* General component spacing improvements */
.magazine-content .page-component {
    margin-bottom: 1rem;
}

.magazine-content .page-component:last-child {
    margin-bottom: 0;
}

/* Specific spacing for different component combinations */
.magazine-content .page-component.component-heading + .page-component {
    margin-top: 0.5rem;
}

.magazine-content .page-component.component-text + .page-component {
    margin-top: 0.75rem;
}

.magazine-container h2 {
    font-size: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    color: #34495e;
}

.magazine-container h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

/* Magazine Paragraphs - Consistent font sizes */
.magazine-container p {
    margin-bottom: 1.5rem;
    text-align: justify;
    font-size: 1.1rem !important;
    line-height: 1.8;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Override any lead class styling in magazine layout */
.magazine-container p.lead {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Ensure all paragraphs have consistent styling */
.magazine-container .rich-text-content p {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin-bottom: 1.5rem !important;
}

/* Override any Bootstrap lead class in magazine content */
.magazine-container .lead {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Ensure text content components also have consistent styling */
.magazine-container .text-content p {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Override any other font size variations */
.magazine-container .magazine-text {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Override all possible paragraph variations in magazine layout */
.magazine-container p,
.magazine-container .paragraph,
.magazine-container p.lead,
.magazine-container .lead,
.magazine-container .text-muted,
.magazine-container .text-content p,
.magazine-container .rich-text-content p,
.magazine-container .magazine-text p {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin-bottom: 1.5rem !important;
}

/* Ensure no Bootstrap classes override our font sizes */
.magazine-container *[class*="lead"],
.magazine-container *[class*="text-"] {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Ultra-specific overrides to ensure font consistency */
.page-builder-content.magazine-container p,
.page-builder-content.magazine-container .lead,
.page-builder-content.magazine-container .text-muted,
.page-builder-content.magazine-container .rich-text-content p,
.page-builder-content.magazine-container .text-content p,
.page-builder-content.magazine-container .magazine-text p {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin-bottom: 1.5rem !important;
}

/* Override any Bootstrap lead class with maximum specificity */
body .page-builder-content.magazine-container .lead,
body .page-builder-content.magazine-container p.lead {
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Reduce spacing between hero section and page builder content */
.page-header.cta2 {
    padding-bottom: 40px !important;
}

.magazine-section {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
}

/* Reduce spacing for the first content section after hero */
.page-header.cta2 + .magazine-container .magazine-section:first-child {
    padding-top: 20px !important;
}

/* Ensure proper spacing for page builder content */
.page-builder-content.magazine-container {
    padding-top: 0 !important;
}

/* Magazine Images with Text Wrapping */
.magazine-container .image-content {
    margin: 1.5rem 0;
}

.magazine-container .image-content img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magazine-container .image-content img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Float Left Images - Enhanced for better wrapping */
.magazine-container .float-left,
.magazine-container .float-lg-start,
.magazine-container .float-md-start,
.magazine-container .float-sm-start {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
    clear: both;
}

/* Float Right Images - Enhanced for better wrapping */
.magazine-container .float-right,
.magazine-container .float-lg-end,
.magazine-container .float-md-end,
.magazine-container .float-sm-end {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
    clear: both;
}

/* Center Images */
.magazine-container .text-center img {
    display: block;
    margin: 2rem auto;
    max-width: 80%;
}

/* Enhanced text wrapping for rich text content */
.magazine-container .rich-text-content {
    overflow: hidden; /* Clear floats */
}

.magazine-container .rich-text-content p {
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* Ensure proper wrapping around floated elements */
.magazine-container .rich-text-content img[class*="float"] {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magazine-container .rich-text-content img[class*="float"]:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Specific handling for carousel in rich text */
.magazine-container .rich-text-content .carousel {
    margin: 1rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.magazine-container .rich-text-content .carousel[class*="float"] {
    max-width: 45% !important;
}

.magazine-container .rich-text-content .carousel.float-left,
.magazine-container .rich-text-content .carousel.float-lg-start {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
}

.magazine-container .rich-text-content .carousel.float-right,
.magazine-container .rich-text-content .carousel.float-lg-end {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
}

/* Magazine Carousel */
.magazine-container .carousel {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.magazine-container .carousel-inner {
    border-radius: 12px;
}

.magazine-container .carousel-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* Magazine Tabs */
.magazine-container .tabs-content {
    margin: 2rem 0;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.magazine-container .nav-tabs {
    border-bottom: 2px solid #3498db;
    margin-bottom: 1.5rem;
}

.magazine-container .nav-tabs .nav-link {
    color: #2c3e50;
    font-weight: 600;
    border: none;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s ease;
}

.magazine-container .nav-tabs .nav-link:hover {
    background-color: #ecf0f1;
    color: #3498db;
}

.magazine-container .nav-tabs .nav-link.active {
    background-color: #3498db;
    color: white;
    border: none;
}

.magazine-container .tab-content {
    padding: 1rem 0;
}

/* Magazine Lists */
.magazine-container .list-content {
    margin: 1.5rem 0;
}

.magazine-container .list-group-item {
    border: none;
    border-left: 4px solid #3498db;
    margin-bottom: 0.5rem;
    padding: 1rem 1.5rem;
    background-color: #f8f9fa;
    border-radius: 0 8px 8px 0;
    font-size: 1.1rem;
}

/* Magazine Tables */
.magazine-container .table-content {
    margin: 2rem 0;
    overflow-x: auto;
}

.magazine-container .table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.magazine-container .table thead th {
    background-color: #3498db;
    color: white;
    font-weight: 600;
    border: none;
    padding: 1rem;
}

.magazine-container .table tbody td {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    vertical-align: middle;
}

.magazine-container .table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Magazine Features */
.magazine-container .feature-content {
    margin: 2rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border-left: 5px solid #3498db;
}

.magazine-container .feature-icon {
    color: #3498db;
}

.magazine-container .feature-title {
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Magazine Testimonials */
.magazine-container .testimonial-content {
    margin: 2rem 0;
    padding: 2rem;
    background: #f8f9fa;
    border-left: 5px solid #3498db;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.2rem;
}

.magazine-container .blockquote {
    margin: 0;
    border: none;
    padding: 0;
}

.magazine-container .blockquote-footer {
    margin-top: 1rem;
    font-size: 1rem;
    color: #6c757d;
}

/* Magazine Buttons */
.magazine-container .button-content {
    margin: 2rem 0;
    text-align: center;
}

.magazine-container .btn {
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.magazine-container .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
}

/* Magazine Spacing */
.magazine-container .component-heading {
    margin-top: 3rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ecf0f1;
}

.magazine-container .component-rich_text {
    margin-bottom: 2rem;
}

.magazine-container .component-image {
    margin: 2rem 0;
}

/* Magazine Responsive Design */
@media (max-width: 768px) {
    .magazine-container {
        padding: 1rem 0.5rem;
    }
    
    .magazine-container h1 {
        font-size: 2rem;
    }
    
    .magazine-container h2 {
        font-size: 1.5rem;
    }
    
    .magazine-container .float-left,
    .magazine-container .float-right {
        float: none;
        margin: 1rem auto;
        max-width: 100%;
        display: block;
    }
    
    .magazine-container .carousel-item img {
        height: 250px;
    }
    
    .magazine-container p {
        font-size: 1rem;
        text-align: left;
    }
}

/* Magazine Drop Cap */
.magazine-container .drop-cap::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 3rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    font-weight: bold;
    color: #3498db;
    font-family: 'Georgia', serif;
}

/* Magazine Pull Quote */
.magazine-container .pull-quote {
    float: right;
    width: 40%;
    margin: 0 0 1rem 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    font-size: 1.2rem;
    font-style: italic;
    color: #2c3e50;
    border-radius: 0 8px 8px 0;
}

/* Magazine Section Dividers */
.magazine-container .section-divider {
    margin: 3rem 0;
    text-align: center;
    position: relative;
}

.magazine-container .section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, #3498db, transparent);
}

.magazine-container .section-divider span {
    background: white;
    padding: 0 2rem;
    color: #3498db;
    font-weight: bold;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Clear floats */
.magazine-container::after {
    content: "";
    display: table;
    clear: both;
}

/* Additional text wrapping fixes */
.magazine-container .rich-text-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure proper text flow around floated elements */
.magazine-container .rich-text-content p {
    overflow: hidden; /* Prevent text from going under floated elements */
}

/* Fix for Bootstrap float classes */
.magazine-container .ms-lg-4 {
    margin-left: 1.5rem !important;
}

.magazine-container .me-lg-4 {
    margin-right: 1.5rem !important;
}

/* Ensure carousel images respect float classes */
.magazine-container .rich-text-content .carousel img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Fix for any remaining full-width issues */
.magazine-container .rich-text-content .w-100 {
    width: auto !important;
    max-width: 100%;
}

.magazine-container .rich-text-content .w-100[class*="float"] {
    max-width: 45% !important;
}

/* Force proper text wrapping - Override any conflicting styles */
.magazine-container .rich-text-content {
    text-align: justify;
    line-height: 1.8;
}

.magazine-container .rich-text-content p {
    text-align: justify !important;
    margin-bottom: 1.5rem;
    overflow: visible; /* Allow text to flow around floated elements */
}

/* Ensure floated elements don't break the layout */
.magazine-container .rich-text-content img[class*="float"],
.magazine-container .rich-text-content .carousel[class*="float"] {
    display: block;
    position: relative;
    z-index: 1;
}

/* Additional specificity for Bootstrap classes */
.magazine-container .rich-text-content .float-lg-end.ms-lg-4.mb-4 {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
}

.magazine-container .rich-text-content .float-lg-start.me-lg-4.mb-4 {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
}

/* Force text wrapping with higher specificity */
.magazine-container .rich-text-content .carousel.float-lg-end,
.magazine-container .rich-text-content .carousel[class*="float"],
.magazine-container .rich-text-content div[class*="float"] {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
    clear: none !important;
}

.magazine-container .rich-text-content .carousel.float-lg-start,
.magazine-container .rich-text-content .carousel.float-left {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
    clear: none !important;
}

/* Override any conflicting Bootstrap styles */
.magazine-container .rich-text-content *[class*="float"] {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure text flows around floated elements */
.magazine-container .rich-text-content p {
    text-align: justify !important;
    margin-bottom: 1.5rem !important;
    overflow: visible !important;
    clear: none !important;
}

/* Ultimate text wrapping fix - highest specificity */
.magazine-container .rich-text-content div[class*="carousel"][class*="float"],
.magazine-container .rich-text-content .carousel[class*="float"],
.magazine-container .rich-text-content [class*="float"] {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
    clear: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.magazine-container .rich-text-content div[class*="carousel"].float-lg-start,
.magazine-container .rich-text-content div[class*="carousel"].float-left,
.magazine-container .rich-text-content .carousel.float-lg-start,
.magazine-container .rich-text-content .carousel.float-left {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
}

/* Handle standalone image components with float classes */
.magazine-container .image-content[class*="float"],
.magazine-container .image-content .img-fluid[class*="float"],
.magazine-container .magazine-image[class*="float"] {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
    clear: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.magazine-container .image-content.float-lg-start,
.magazine-container .image-content.float-left,
.magazine-container .magazine-image.float-lg-start,
.magazine-container .magazine-image.float-left {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
}

/* Handle any component with float classes */
.magazine-container .component[class*="float"],
.magazine-container [class*="component"][class*="float"] {
    float: right !important;
    margin: 0 0 1rem 2rem !important;
    max-width: 45% !important;
    clear: none !important;
    position: relative !important;
    z-index: 1 !important;
}

.magazine-container .component.float-lg-start,
.magazine-container .component.float-left,
.magazine-container [class*="component"].float-lg-start,
.magazine-container [class*="component"].float-left {
    float: left !important;
    margin: 0 2rem 1rem 0 !important;
    max-width: 45% !important;
}

/* Force all text to wrap around floated elements */
.magazine-container .rich-text-content {
    text-align: justify !important;
    line-height: 1.8 !important;
}

.magazine-container .rich-text-content * {
    text-align: justify !important;
}

/* Magazine Gallery */
.magazine-container .gallery-content .row {
    margin: 2rem 0;
}

.magazine-container .gallery-content img {
    border-radius: 8px;
    transition: transform 0.3s ease;
    margin-bottom: 1rem;
}

.magazine-container .gallery-content img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}