/**
 * Irmanha Divider Module Styles
 *
 * Full-width divider with beige bar and header-style topbar
 */

.irmanha-divider {
    width: 100%;
    position: relative;
}

/* ===== BEIGE BAR ===== */
.irmanha-divider__beige-bar {
    width: 100%;
    height: 6vh; /* Reduced from 10vh for smaller height */
    background-color: var(--irmanha-beige);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.irmanha-divider__beige-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--irmanha-space-4, 16px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.irmanha-divider__text {
    color: var(--irmanha-black);
    font-size: var(--irmanha-divider-text);
    font-weight: var(--irmanha-font-weight-semibold); /* 600 */
    text-align: center;
    margin: 0;
}

/* ===== TOPBAR (copied from header) ===== */
.irmanha-divider__topbar {
    width: 100%;
    background-color: var(--irmanha-black);
    position: relative;
    box-sizing: border-box;
}

.irmanha-divider__topbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--irmanha-space-4, 16px) var(--irmanha-space-4, 16px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--irmanha-space-48, 48px); /* ~big gap */
    width: 100%;
    box-sizing: border-box;
}

.irmanha-divider__topbar-text {
    color: var(--irmanha-white);
    font-size: var(--irmanha-body, 16px);
    font-weight: var(--irmanha-font-weight-normal); /* 400 */
    font-style: italic;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .irmanha-divider__topbar-container {
        flex-direction: column;
        gap: var(--irmanha-space-2, 8px);
    }

    .irmanha-divider__topbar-text {
        font-size: var(--irmanha-text-base);
    }
}

/* ===== BUILDER SPECIFIC STYLES ===== */
.fl-builder-edit .irmanha-divider__beige-bar {
    min-height: 60px; /* Show minimum height in builder */
}

.fl-builder-edit .irmanha-divider__topbar {
    background-color: var(--irmanha-black);
    padding: var(--irmanha-space-2, 8px) 0;
}

/* Ensure containers stay centered in builder */
.fl-builder-edit .irmanha-divider__beige-container,
.fl-builder-edit .irmanha-divider__topbar-container {
    margin: 0 auto; /* Always center containers */
    width: 100%;
    max-width: 1400px; /* Same max-width as frontend */
}