/*
Theme Name: Divi Collab Child
Template: Divi
*/
@import url("../Divi/style.css");

/* ============================================
   COLLAB MEDIA — GLOBAL CUSTOM CSS
   Zodiac Digital | May 2026
   ============================================ */


/* ── TYPOGRAPHY BASE ──────────────────────── */

/* Ensure body text never drops below 14px on any device */
body {
    font-size: 15px;
    line-height: 1.7;
    color: #7A7268;
}

/* Remove Divi's default blue from all links */
a {
    color: #6B4C35;
    text-decoration: none;
}

a:hover {
    color: #1A1A18;
}


/* ── SECTION WIDTH CONTROL ────────────────── */

/* Ensure all section inner widths go full width.
   Divi defaults to a max-width container — this
   overrides that so your 100% sections behave
   correctly without fighting the builder. */
.et_pb_section .et_pb_row {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Content max-width cap for readability.
   Apply the CSS class "content-constrained" to
   any row in Divi where you want content to stop
   expanding beyond 1200px (e.g. text-heavy rows). */
.content-constrained {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5%;
    padding-right: 5%;
}


/* ── IMAGES ───────────────────────────────── */

/* All images in Divi modules fill their container
   correctly without distorting */
.et_pb_image_wrap img,
.et_pb_module img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Case study and team card images — fixed height
   with cover cropping so cards stay uniform */
.cm-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
}


/* ── BUTTONS ──────────────────────────────── */

/* Outline button variant.
   Apply the CSS class "cm-btn-outline" to any
   Divi button module where you need the outline
   style instead of the filled brown default. */
.cm-btn-outline .et_pb_button {
    background: transparent !important;
    color: #6B4C35 !important;
    border: 1px solid #6B4C35 !important;
}

.cm-btn-outline .et_pb_button:hover {
    background: #6B4C35 !important;
    color: #FFFFFF !important;
}

/* White outline variant for use on dark sections.
   Apply CSS class "cm-btn-white-outline". */
.cm-btn-white-outline .et_pb_button {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.cm-btn-white-outline .et_pb_button:hover {
    background: #FFFFFF !important;
    color: #6B4C35 !important;
    border-color: #FFFFFF !important;
}


/* ── STATS BAR ────────────────────────────── */

/* Removes the right border from the last stat
   column without needing to touch each module.
   Apply CSS class "cm-stats-bar" to the stats row. */
.cm-stats-bar .et_pb_column:last-child {
    border-right: none !important;
}


/* ── CARD HOVER ───────────────────────────── */

/* Subtle lift effect on service/case study cards.
   Apply CSS class "cm-card-hover" to any column
   that acts as a card. */
.cm-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cm-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26, 26, 24, 0.08);
}


/* ── HOW WE WORK — CUSTOM LIST ────────────── */

/* Styles the custom bullet list in the How We Work
   section. Applied via the Text module's HTML. */
.cm-feature-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.cm-feature-list li {
    border-left: 3px solid #6B4C35;
    padding-left: 14px;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #7A7268;
    line-height: 1.6;
}


/* ── PRICING TABLE ────────────────────────── */

/* Scoped to the Code Module table on the
   Pricing page. Ensures consistent rendering
   if inline styles ever get stripped. */
.cm-price-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.cm-price-table th {
    background: #6B4C35;
    color: #FFFFFF;
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: normal;
}

.cm-price-table td {
    padding: 10px 16px;
    border-bottom: 1px solid #D8D0C5;
    color: #1A1A18;
}

.cm-price-table tr:nth-child(even) td {
    background: #F7F3EE;
}

.cm-price-table .price {
    color: #6B4C35;
    font-weight: bold;
}


/* ── MOBILE ───────────────────────────────── */

@media (max-width: 768px) {

    /* Stack the stats bar to 2x2 on tablet */
    .cm-stats-bar .et_pb_column {
        width: 50% !important;
        border-right: 1px solid #D8D0C5 !important;
    }

    .cm-stats-bar .et_pb_column:nth-child(2n) {
        border-right: none !important;
    }

    /* Ensure card images don't get too tall on mobile */
    .cm-card-image img {
        height: 180px;
    }

}

@media (max-width: 480px) {

    /* Full-width stats on small mobile */
    .cm-stats-bar .et_pb_column {
        width: 100% !important;
        border-right: none !important;
    }

    /* Pricing table horizontal scroll on small screens */
    .cm-price-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

}