/*
 * CUSTOM CSS OVERRIDES
 *
 * This file is for customizing the appearance of your wiki.
 * Add your CSS rules below to override the default styles.
 *
 * Example - Change primary colors:
 */


:root {
    --primary-color: #6f42c1 !important;
    --primary-hover: #ff8833 !important;
}

/* ff6600 */

/* Your custom styles below */

.service-badge.wan { background: #28a745; }
.service-badge.lan { background: #ffc107; color: #333; }
.service-badge.iot { background: #6f42c1; }


/* ========== COLUMN LAYOUT FEATURE ========== */

/* Two-column layout */
.two-columns {
    column-count: 2;
    column-gap: 24px;
    column-rule: 1px solid var(--border-color);
    break-inside: avoid;
}

/* Three-column layout */
.three-columns {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px solid var(--border-color);
    break-inside: avoid;
}

/* Four-column layout (for wider screens) */
.four-columns {
    column-count: 4;
    column-gap: 16px;
    column-rule: 1px solid var(--border-color);
    break-inside: avoid;
}

/* Responsive column adjustments */
@media (max-width: 1200px) {
    .four-columns {
        column-count: 3;
    }
}

@media (max-width: 900px) {
    .three-columns,
    .four-columns {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .two-columns,
    .three-columns,
    .four-columns {
        column-count: 1;
        column-rule: none;
    }
}

/* Prevent column breaks inside these elements */
.column-no-break {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Force column break before element */
.column-break-before {
    break-before: column;
    page-break-before: always;
}

/* Force column break after element */
.column-break-after {
    break-after: column;
    page-break-after: always;
}

/* Column span - make element span all columns */
.column-span-all {
    column-span: all;
    margin: 16px 0;
}

/* Alternative grid-based columns for more control */
.grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.grid-three-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.grid-four-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
    .grid-four-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .grid-three-columns,
    .grid-four-columns {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .grid-two-columns,
    .grid-three-columns,
    .grid-four-columns {
        grid-template-columns: 1fr;
    }
}

/* Column styling for better visual separation */
.columns-container {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.columns-container h3 {
    column-span: all;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 8px;
}