/* ===== Hero H1 consistency — Acadiana Softwash (2026-08-11) =====
 * Scoped to body:not(.single-post) .et_pb_section_0 -- the hero on PAGES only.
 * The :not(.single-post) guard is essential: 5 blog posts wrap their body
 * content in an exact .et_pb_section_0, so an unguarded rule turned their
 * H2s white-on-white. Blog-post H1s sit on white
 * backgrounds and have no Divi section wrapper, so they are never affected.
 *
 * !important is required for two reasons:
 *   1. several hero H1s carry inline font-size/color from raw <h1 style="">
 *   2. Divi's per-module dynamic CSS silently drops rules when page content
 *      is edited outside the Visual Builder
 *
 * Served as an enqueued file because the metasync/OTTO plugin buffers wp_head
 * and swallows late-priority inline styles (wp_custom_css_cb runs at 101).
 *
 * Explicit breakpoints rather than clamp()/vw so the rendered size is
 * deterministic and testable at every width.
 */
body:not(.single-post) .et_pb_section_0 h1,
body:not(.single-post) .et_pb_section_0 h1.et_pb_module_heading,
body:not(.single-post) .et_pb_section_0 .et_pb_heading_container h1 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 32px !important;          /* phone */
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45); /* legibility over photo heroes */
    margin: 0 0 18px 0 !important;
}
@media (min-width: 768px) {
    body:not(.single-post) .et_pb_section_0 h1,
    body:not(.single-post) .et_pb_section_0 h1.et_pb_module_heading,
    body:not(.single-post) .et_pb_section_0 .et_pb_heading_container h1 { font-size: 42px !important; } /* tablet */
}
@media (min-width: 1025px) {
    body:not(.single-post) .et_pb_section_0 h1,
    body:not(.single-post) .et_pb_section_0 h1.et_pb_module_heading,
    body:not(.single-post) .et_pb_section_0 .et_pb_heading_container h1 { font-size: 52px !important; } /* desktop */
}

/* Hero subheads: white, clearly subordinate to the H1 */
body:not(.single-post) .et_pb_section_0 h2,
body:not(.single-post) .et_pb_section_0 h2.et_pb_module_heading {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}


/* ==========================================================================
   BLOG — hero + heading scale (added 2026-08-11)
   Blog posts and category archives had no hero at all: the H1 rendered at
   30px dark grey on plain white. These rules give the blog the same hero
   language as the service pages and pin one heading scale across all posts.

   Deliberately keyed off .single-post / .archive.category so they can never
   collide with the page rule above (.et_pb_section_0), and the archive's
   Divi Theme Builder section (_tb_body) is a separate class token.
   ========================================================================== */

/* ---- 1. Blog POST hero band -------------------------------------------- */
body.single-post .et_post_meta_wrapper:first-of-type {
    background: linear-gradient(135deg, #0f172a 0%, #1c2b45 100%);
    /* full-bleed out of Divi's .container without causing horizontal scroll */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 62px calc(50vw - 50% + 20px) 54px;
    margin-bottom: 44px;
    box-sizing: border-box;
}
body.single-post .et_post_meta_wrapper:first-of-type h1.entry-title {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 32px !important;               /* phone */
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}
body.single-post .et_post_meta_wrapper:first-of-type .post-meta,
body.single-post .et_post_meta_wrapper:first-of-type .post-meta a {
    color: rgba(255, 255, 255, .82) !important;
}
/* the featured image sits inside the same wrapper — keep it out of the band */
body.single-post .et_post_meta_wrapper:first-of-type .et_main_video_container,
body.single-post .et_post_meta_wrapper:first-of-type img { border-radius: 6px; }

/* ---- 2. Blog ARCHIVE hero (Divi Theme Builder body template) ----------- */
/* The title module, blog module and pagination are ALL siblings inside ONE row
 * of ONE section, so a section-level background would paint behind the post
 * cards as well. The navy band therefore goes on the title module itself and is
 * broken out full-bleed; the section keeps a light background for the cards. */
body.archive.category .et_pb_section_0_tb_body {
    background: #f6f7f9 !important;
    padding: 0 0 10px !important;
}
body.archive.category .et_pb_post_title_0_tb_body {
    background: linear-gradient(135deg, #0f172a 0%, #1c2b45 100%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 62px calc(50vw - 50%) 54px;
    margin-bottom: 46px;
    box-sizing: border-box;
}
body.archive.category .et_pb_section_0_tb_body h1.entry-title,
body.archive.category .et_pb_post_title h1.entry-title {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 32px !important;               /* phone */
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 1px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
body.archive.category .et_pb_post_title_0_tb_body .et_pb_title_meta_container,
body.archive.category .et_pb_post_title_0_tb_body .et_pb_title_meta_container a,
body.archive.category .et_pb_post_title_0_tb_body p {
    color: rgba(255, 255, 255, .82) !important;
}

/* ---- 3. Responsive hero sizing (matches the page scale exactly) -------- */
@media (min-width: 768px) {
    body.single-post .et_post_meta_wrapper:first-of-type h1.entry-title,
    body.archive.category .et_pb_section_0_tb_body h1.entry-title,
    body.archive.category .et_pb_post_title h1.entry-title { font-size: 42px !important; }
}
@media (min-width: 1025px) {
    body.single-post .et_post_meta_wrapper:first-of-type h1.entry-title,
    body.archive.category .et_pb_section_0_tb_body h1.entry-title,
    body.archive.category .et_pb_post_title h1.entry-title { font-size: 52px !important; }
}

/* ---- 4. One heading scale for blog body copy --------------------------- */
body.single-post .entry-content h2 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #333333 !important;
    margin: 44px 0 16px 0 !important;
}
body.single-post .entry-content h3 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #333333 !important;
    margin: 32px 0 12px 0 !important;
}
body.single-post .entry-content h4 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #333333 !important;
    margin: 24px 0 10px 0 !important;
}

/* ---- 5. Let the post hero sit flush under the nav, as pages do ---------- */
/* Divi puts padding-top:58px on .container for single posts, which left a
   white gap above the hero band. */
body.single-post #main-content > .container { padding-top: 0 !important; }


/* ==========================================================================
   BLOG ARCHIVE — card grid (added 2026-08-11)
   The category archive is a Divi Blog module in a Theme Builder template,
   rendering in LIST mode: one stacked post per row with a 1080x675 featured
   image at full container width, so a single post filled more than a screen.
   These rules turn that list into a responsive card grid. CSS-only, scoped to
   body.archive.category so single posts and pages are untouched.
   ========================================================================== */

/* ---- grid container ---------------------------------------------------- */
/* NB: Divi wraps the articles in .et_pb_ajax_pagination_container, so the grid
 * MUST go on that wrapper. Putting it on .et_pb_posts gives the grid exactly one
 * child and every card stacks in a single column. */
body.archive.category .et_pb_posts { margin-bottom: 40px; }
body.archive.category .et_pb_posts .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 700px) {
    body.archive.category .et_pb_posts .et_pb_ajax_pagination_container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- the card ---------------------------------------------------------- */
body.archive.category .et_pb_posts article.et_pb_post {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 !important;              /* Divi ships margin-bottom: 60px */
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
body.archive.category .et_pb_posts article.et_pb_post:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

/* ---- featured image: fixed ratio instead of full-bleed 1080x675 -------- */
body.archive.category .et_pb_posts .entry-featured-image-url {
    display: block;
    margin: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef0f2;
}
body.archive.category .et_pb_posts .entry-featured-image-url img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
body.archive.category .et_pb_posts article.et_pb_post:hover
  .entry-featured-image-url img { transform: scale(1.04); }

/* ---- card body -------------------------------------------------------- */
body.archive.category .et_pb_posts .entry-title {
    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    margin: 24px 26px 10px !important;
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;               /* keep card heights even */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.archive.category .et_pb_posts .entry-title a { color: #1f2937 !important; }
body.archive.category .et_pb_posts article.et_pb_post:hover
  .entry-title a { color: #c2410c !important; }

body.archive.category .et_pb_posts .post-meta {
    font-size: 13px !important;
    color: #8a9099 !important;
    margin: 0 26px 14px !important;
    padding: 0 !important;
    letter-spacing: .3px;
}
body.archive.category .et_pb_posts .post-meta a { color: #8a9099 !important; font-weight: 600; }

body.archive.category .et_pb_posts .post-content {
    flex: 1 1 auto;                      /* pushes the CTA to a flush bottom */
    display: flex;
    flex-direction: column;
    margin: 0 26px 24px !important;
    padding: 0 !important;
}
body.archive.category .et_pb_posts .post-content-inner {
    font-size: 15.5px;
    line-height: 1.7;
    color: #5b6472;
    display: -webkit-box;
    -webkit-line-clamp: 3;               /* excerpts run 145-279 chars */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* the module renders no read-more link, so supply the affordance */
body.archive.category .et_pb_posts .post-content::after {
    content: "Read article \2192";
    margin-top: auto;
    padding-top: 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #c2410c;
    letter-spacing: .3px;
}

/* ---- pagination -------------------------------------------------------- */
/* Divi's blog nav is .et_pb_posts_nav (NOT .pagination) — the theme-builder
 * module is .et_pb_post_nav_0_tb_body. Targeting .pagination matches nothing. */
body.archive.category .et_pb_posts_nav {
    padding: 22px 0 64px;
    border-top: 1px solid #e2e5e9;
    font-size: 15px;
}
body.archive.category .et_pb_posts_nav a,
body.archive.category .et_pb_posts_nav span a {
    color: #1f2937 !important;
    font-weight: 700 !important;
}
body.archive.category .et_pb_posts_nav a:hover { color: #c2410c !important; }

/* ---- 6. keep card heights even when a post has no featured image -------- */
/* Divi omits .entry-featured-image-url entirely when there is no thumbnail,
 * which would leave that card ~300px shorter than its neighbours and break the
 * grid. Reserve the same 16:10 block with a neutral placeholder instead. */
body.archive.category .et_pb_posts article.et_pb_post:not(:has(.entry-featured-image-url))::before {
    content: "";
    display: block;
    aspect-ratio: 16 / 10;
    background: #eef0f2 linear-gradient(135deg, #eef0f2 0%, #e3e7ea 100%);
}