/* ============================================
   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 64%;        /* 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: 900px) {

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

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

/* ============================================
   WIDGETS & SIDEBARS
   ============================================ */

/* Unified widget title styling */
.widget-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
    color: #333;
    font-size: 28px;
}

/* Widget spacing */
.widget {
    margin-bottom: 30px;
}

/* Widget content spacing */
.widget-services ul,
.widget-posts ul {
    padding-left: 20px;
    margin: 0;
}

.widget-services li,
.widget-posts li {
    margin-bottom: 10px;
}

/* Sidebar-specific spacing */
.widget-posts h3 {
    margin-bottom: 15px;
}

.widget-posts ul {
    margin-top: 10px;
}

/* ============================================
   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;
}

/* ============================================
   SIDEBAR CONTENT
   ============================================ */

/* SERVICES widget container */
.service-widget {
    margin-bottom: 30px;
}

/* SERVICES title */
.service-title {
    padding: 5px 0px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    color: #333;
    display: block;
}

.site-service-title {
	background: #f2f2f2;
	font-size:24px;
	font-family: "Roboto Slab", serif;
	font-weight: 200;
	line-height: 39px;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.service-line {
	border-bottom: 1px solid #333;
	margin-bottom: 20px;
}
.site-service-item {
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

/* SERVICES list items */
.service-widget li {

    background: #fafafa;
    padding: 15px 18px;
    margin-bottom: 15px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* POSTS widget container */
.myposts-widget {
    margin-bottom: 30px;
}

/* POSTS title */
.myposts-title {
    padding: 5px 0px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    color: #333;
    display: block;
}

/* POSTS list items */
.myposts-widget li {
    padding: 10px 5px;
    margin-bottom: 15px;
    list-style: none;
    font-size: 16px;
    color: #333;
}

.myposts-widget li a {
    padding-top: 10px 5px;
    list-style: none;
    font-size: 16px;
    color: #333;
	text-decoration: none;
}

.post-featured-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
.post-photo-credit {
    font-size: 12px;          /* smaller text */
    color: #666;              /* subtle grey */
    margin-top: 4px;          /* closer to the image */
    line-height: 1.3;         /* tighter spacing */
    font-style: italic;       /* optional, looks like a credit */
}

.post-content iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}