/**
 * First Student - Modern Block Styles
 * Global reusable styles with namespacing to avoid conflicts with legacy style.css
 *
 * Naming Convention:
 * - Use .fs-* prefix for global reusable components
 * - This prevents conflicts with legacy styles in style.css
 *
 * Example Usage:
 * <div class="fs-accordion-modern">
 *   <div class="accordion">
 *     <div class="accordion-item">...</div>
 *   </div>
 * </div>
 */

/* ============================================
   ACCORDION - MODERN STYLE (Global)
   Requires: .fs-accordion-modern wrapper class
   Features: Custom +/- toggle, perfect circle icon, right-aligned
   Conflicts avoided: Won't affect legacy accordions in style.css
   ============================================ */

/* Hide default Bootstrap accordion chevron */
.fs-accordion-modern .accordion-button::after {
    display: none !important;
}

/* Remove paragraph margins in accordion headings */
.fs-accordion-modern .inner-text-wrapper p,
.fs-accordion-modern .accordion-button span p {
    margin-bottom: 0 !important;
}

/* Custom +/- toggle icon - perfect circle with centered symbol */
.fs-accordion-modern .accordion-minus-sign {
    color: #da291c;
    background-color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    padding: 0 0 3px 1px;
    font-size: 30px;
    line-height: 1;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0;
    text-align: center;
    box-sizing: border-box;
}

/* ============================================
   STANDARD EDITOR BLOCK
   ============================================ */

/* Simple text alignment - no grid/flexbox conflicts */
.StandardEditorBlock .text-left {
    text-align: left !important;
}

.StandardEditorBlock .text-center {
    text-align: center !important;
}

/* ============================================
   ICON ROW WITH TEXT BLOCK
   ============================================ */

/* Icon container - provides consistent height and centers icons */
.IconsWithText .iconBox {
    min-height: 0px; /* override legacy style.css */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Left alignment option */
.IconsWithText.icon-align-left .iconBox {
    justify-content: flex-start;
}

/* Center alignment option (default) */
.IconsWithText.icon-align-center .iconBox {
    justify-content: center;
}

.IconsWithText .iconBox img {
    max-width: 120px;
    height: auto;
}

.IconsWithText h5 {
    margin-bottom: 15px;
}

.IconsWithText p {
    margin-bottom: 15px;
}

/* Button/CTA width */
.IconsWithText .btn {
    width: 250px;
    display: inline-block;
    text-align: center;
}


/* ============================================
   VIDEO SECTION BLOCK
   ============================================ */

.VideoSection .video-wrapper {
    width: 100%;
}

.VideoSection .embed-responsive {
    max-width: 800px;
}

/* Alignment options */
.VideoSection .video-wrapper.text-center .embed-responsive {
    margin: 0 auto;
}

.VideoSection .video-wrapper.text-start .embed-responsive {
    margin: 0 0 0 0;
}

.VideoSection .video-wrapper.text-end .embed-responsive {
    margin: 0 0 0 auto;
}

/* Responsive video container - 16:9 aspect ratio */
.VideoSection .video-container {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden;
}

.VideoSection .video-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   PHOTO GRID WITH TEXT BLOCK
   ============================================ */

/* Grid container */
.PhotoGridWithText .insights-grid-container {
    display: flex;
    flex-wrap: wrap;
}

/* Individual grid items */
.PhotoGridWithText .insight-child-block {
    padding: 12px;
    padding-top: 0px;
    margin: 0;
}

/* Images - consistent sizing and object-fit */
.PhotoGridWithText .compInsightImage {
    width: 100%;
    min-height: 230px;
    margin-bottom: 20px;
    object-fit: cover;
}

/* Content styling */
.PhotoGridWithText .text-left {
    display: block;
    margin-bottom: 20px;
}

.PhotoGridWithText .text-left p {
    margin-bottom: 15px;
}

/* Button styling */
.PhotoGridWithText .btn {
    margin-top: 10px;
    width: 250px;
    display: inline-block;
    text-align: center;
}

/* ============================================
   PAGE BLOCKS TEMPLATE
   ============================================ */

/* Ensure blocks can handle full-width layouts */
.page-template-page-blocks #primary {
    padding: 0;
}

.page-template-page-blocks .site-main {
    max-width: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Prevent conflicts with legacy styles */
.blocks-modern-wrapper {
    all: initial;
    display: block;
    width: 100%;
}

/* Scoped reset for block content */
.blocks-modern-wrapper * {
    box-sizing: border-box;
}