/* ============================================
   SITE-CONTENT.CSS
   ============================================ */
.site-content {
    width: 100%;
    background: var(--color-bg);
	padding-bottom:30px;
}

.site-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px var(--layout-padding);
}

.site-preamble-widget{
	
}
/* ============================================
   THREE COLUMNS AREA
   ============================================ */

/* Columns should never force overflow */
.col-3-1,
.col-3-2,
.col-3-3 {
    min-width: 0;
}

/* Wrapper */
.col-3-wrapper {
    display: flex;
    flex-wrap: wrap;      /* prevents overflow */
    gap: 20px;            /* FIXED: prevents % overflow */
	min-width: 0;
}

/* Desktop widths (>900px) */
.col-3-1 { width: 20%; order: 1; }   /* Services */
.col-3-2 { width: 45%; order: 2; }   /* Main content */
.col-3-3 { width: 30%; order: 3; }   /* Posts */

/* ============================================
   TABLET (<=900px)
   ============================================ */
@media (max-width: 900px) {

    /* Reorder: main content first */
    .col-3-2 { order: 1; }
    .col-3-1 { order: 2; }
    .col-3-3 { order: 3; }

    /* 2-column collapse */
    .col-3-1 { width: 30%; }
    .col-3-2 { width: 65%; }
    .col-3-3 {
        width: 100%;
        margin-top: 30px;
    }
}

/* ============================================
   MOBILE (<=600px)
   ============================================ */
@media (max-width: 600px) {

    .col-3-wrapper {
        flex-direction: column;
    }

    .col-3-1,
    .col-3-2,
    .col-3-3 {
        width: 100%;
        margin-top: 0;
    }

    /* Maintain correct order */
    .col-3-2 { order: 1; }
    .col-3-1 { order: 2; }
    .col-3-3 { order: 3; }
}

/* ============================================
   TWO COLUMN LAYOUT — FIXED (same method as 3-col)
   ============================================ */

.col-2-wrapper {
    display: flex;
    flex-wrap: wrap;      /* prevents overflow */
    gap: 30px;            /* fixed gap, safe */
    min-width: 0;         /* prevents flex overflow */
}

/* Column 1 (main content) */
.col-2-1 {
    flex: 0 0 63%;        /* safe desktop width */
    min-width: 0;         /* prevents overflow */
    padding-right: 20px;  /* reduced padding */
}

/* Column 2 (sidebar) */
.col-2-2 {
    flex: 0 0 30%;        /* safe desktop width */
    min-width: 0;         /* prevents overflow */
    padding-left: 15px;   /* reduced padding */
}

/* ============================================
   TABLET (<=900px)
   ============================================ */
@media (max-width: 975px) {

    .col-2-wrapper {
        flex-direction: column;
    }

    .col-2-1,
    .col-2-2 {
        flex: 0 0 100%;
        width: 100%;
        padding: 0;
    }
}

/* ============================================
   MAIN CONTENT SPACING
   ============================================ */

.content-col-main p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.content-col-main h2,
.content-col-main h3 {
    margin-top: 40px;
    margin-bottom: 20px;
}

/* ============================================
   services.css
   ============================================ */
.service-preview {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.service-full {
	background: #f5f5f5;
	padding: 2%;
}