/* WaterDamageGo Services Design v1.2.0 - v1.2.0: homepage photo cards
   restyled to mirror the hub .wdg-svc-card EXACTLY (radius 16px, same
   shadow, hover lift -4px, photo height 180px/200px mobile, same body
   padding, title 20px, more-link weight 700) per ghost's review. */
/* WaterDamageGo Services Design v1.0.0 - design layer for the Services hub
   (/services/) and its child service pages (/services/<service>/).
   Loaded ONLY on those pages (see the PHP guard), so plain selectors are
   safe here. Values mirror the homepage Design Pro layer (wdg-design.css)
   and the Post Hero layer (wdg-post-hero.css): navy #0b2a4a, aqua #0e7fc4,
   page field #edf4fa, panel line #e2edf5, body text #33475c / 1.68.
   Everything page-specific is scoped under .wdg-svc-wrap. */

/* ---------- Page field + hide Kadence's own header/thumbnail ----------
   The hero inside the content carries the page title (as its H1) and the
   featured photo, so the theme header and standalone thumbnail would only
   duplicate them - the same trick as the Post Hero layer. Kadence paints
   its content column white via ID-level wrappers, so the field rules use
   !important, exactly like Post Hero v1.2.1.
   Every rule in this section is scoped body:not(.home): this stylesheet
   ALSO loads on the front page (for the photo service cards further
   down), and there the theme header, thumbnail and wrappers must stay
   exactly as the other design layers left them. */
body:not(.home){background:#edf4fa!important}
body:not(.home) #wrapper,body:not(.home) .site-container,body:not(.home) #inner-wrap,body:not(.home) #primary,body:not(.home) .content-area,body:not(.home) #main,body:not(.home) .site-main,body:not(.home) main,body:not(.home) article.page,body:not(.home) .entry-content-wrap,body:not(.home) .entry-content{background:transparent!important}
body:not(.home) .entry-header{display:none}
body:not(.home) .post-thumbnail{display:none}

.wdg-svc-wrap{max-width:1140px;margin:0 auto;padding:14px 0 8px}
.wdg-svc-wrap p{color:#33475c;line-height:1.68}
.wdg-svc-wrap li::marker{color:#0e7fc4}

/* ---------- Hero panel (mirrors .wdg-post-hero) ---------- */
.wdg-svc-hero{
    position:relative;
    background-color:#0b2a4a;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:22px;
    box-shadow:0 16px 40px rgba(11,42,74,.22);
    min-height:480px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:48px 24px;
    color:#fff;
    margin-bottom:28px;
}
.wdg-svc-pill{
    display:inline-block;
    letter-spacing:2px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    color:#bfe6fb;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35);
    padding:7px 16px;
    border-radius:999px;
    margin-bottom:20px;
}
.wdg-svc-hero-title{
    color:#fff;
    font-size:clamp(30px,5vw,48px);
    line-height:1.12;
    letter-spacing:-.01em;
    margin:0 0 16px;
    text-shadow:0 2px 16px rgba(0,0,0,.5);
}
/* v1.2.1: specificity raised + !important - the generic .wdg-svc-wrap p
   rule (0,1,1) was beating the old .wdg-svc-hero-sub rule (0,1,0), so the
   hero subtitle rendered dark slate #33475c on the dark hero photo. */
.wdg-svc-wrap .wdg-svc-hero p.wdg-svc-hero-sub{
    color:#dceefb!important;
    font-size:clamp(16px,2.2vw,20px);
    max-width:760px;
    margin:0 auto;
}
.wdg-svc-hero .wp-block-shortcode,.wdg-svc-hero .wdg-call-link{margin-top:26px}
.wdg-svc-hero .wdg-call-link{box-shadow:0 10px 26px rgba(0,0,0,.35)}
.wdg-svc-hero .wdg-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.wdg-svc-hero .wdg-chips span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600}

/* ---------- White section panels (mirror .wdg-post-section) ---------- */
.wdg-svc-panel{
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:18px;
    box-shadow:0 4px 24px rgba(11,42,74,.07);
    padding:30px 34px;
    margin:0 0 24px;
}
.wdg-svc-panel > :first-child{margin-top:0}
.wdg-svc-panel > :last-child{margin-bottom:0}
.wdg-svc-panel h2{
    color:#0b2a4a;
    font-size:clamp(23px,3.2vw,32px);
    letter-spacing:-.01em;
    margin:0 0 14px;
}
.wdg-svc-panel h2::after{
    content:"";
    display:block;
    width:58px;
    height:4px;
    border-radius:2px;
    background:#0e7fc4;
    margin:14px 0 0;
}
.wdg-svc-panel h3{color:#0b2a4a;font-size:20px;margin:24px 0 8px}

/* Direct-answer block (mirrors Foundation .wdg-answer) */
.wdg-svc-answer{
    background:#eaf5fc;
    border-left:5px solid #0e7fc4;
    border-radius:10px;
    padding:20px 24px;
    margin:0 0 18px;
}
.wdg-svc-answer p{margin:0;font-size:17px;color:#1c2b39}

/* ---------- Hub service-card grid ---------- */
.wdg-svc-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:6px;
}
.wdg-svc-card{
    display:block;
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.wdg-svc-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(11,42,74,.14);
    border-color:#bcd9ee;
    text-decoration:none;
}
.wdg-svc-card img{display:block;width:100%;height:180px;object-fit:cover}
.wdg-svc-card-body{padding:20px 22px 22px}
.wdg-svc-card h3{color:#0b2a4a;font-size:20px;margin:0 0 8px}
.wdg-svc-card p{color:#33475c;line-height:1.6;margin:0 0 12px}
.wdg-svc-more{color:#0e7fc4;font-weight:700;font-size:15px}

/* ---------- Process steps as numbered rows ---------- */
.wdg-svc-steps{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.wdg-svc-step{
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#f6fafd;
    border:1px solid #e2edf5;
    border-radius:14px;
    padding:18px 20px;
}
.wdg-svc-step-n{
    flex:0 0 auto;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#0b2a4a;
    color:#fff;
    font-weight:700;
    font-size:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
}
.wdg-svc-step h3{color:#0b2a4a;font-size:18px;margin:0 0 4px}
.wdg-svc-step p{margin:0}

/* ---------- Cost table (mirrors the post .wdg-table values) ---------- */
.wdg-svc-wrap .wdg-table{margin:0 0 8px}
.wdg-svc-wrap .wdg-table table{
    border-collapse:collapse;
    width:100%;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(11,42,74,.06);
}
.wdg-svc-wrap .wdg-table th{
    background:#0b2a4a;
    color:#fff;
    padding:14px 18px;
    font-size:16px;
    text-align:left;
}
.wdg-svc-wrap .wdg-table td{
    padding:13px 18px;
    border-bottom:1px solid #e2edf5;
    color:#1c2b39;
}
.wdg-svc-wrap .wdg-table tbody tr:nth-child(even) td{background:#f4f9fd}
.wdg-svc-wrap .wdg-table tbody tr:last-child td{border-bottom:none}

/* ---------- FAQ rows (mirror .wdg-post-faq) ---------- */
.wdg-svc-faq h3{
    background:#f2f8fc;
    border:1px solid #e2edf5;
    border-radius:12px;
    padding:14px 18px;
    margin:22px 0 0;
    font-size:18px;
    color:#0b2a4a;
}
.wdg-svc-faq h3:first-of-type{margin-top:6px}
.wdg-svc-faq h3 + p{padding:12px 18px 2px;margin:0}

/* ---------- In-content photo ---------- */
.wdg-svc-photo{margin:0 0 24px}
.wdg-svc-photo img{border-radius:16px;width:100%}

/* ---------- Final CTA panel (mirrors Foundation .wdg-cta) ---------- */
.wdg-svc-cta{
    background:linear-gradient(135deg,#0b2a4a,#0e7fc4);
    color:#fff;
    text-align:center;
    padding:46px 30px;
    border-radius:18px;
    box-shadow:0 16px 40px rgba(11,42,74,.20);
    margin:0 0 24px;
}
.wdg-svc-cta h2{color:#fff;font-size:clamp(23px,3.2vw,32px);letter-spacing:-.01em;margin:0 0 12px}
.wdg-svc-cta h2::after{
    content:"";
    display:block;
    width:58px;
    height:4px;
    border-radius:2px;
    background:#7fd1ff;
    margin:14px auto 0;
}
.wdg-svc-cta p{color:#dceefb;max-width:680px;margin:0 auto}
.wdg-svc-cta .wp-block-shortcode,.wdg-svc-cta .wdg-call-link{margin-top:8px}

/* ---------- Related services row ---------- */
.wdg-svc-related{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.wdg-svc-related a{
    display:inline-block;
    background:#f2f8fc;
    border:1px solid #dbe9f3;
    color:#0b2a4a;
    font-weight:600;
    font-size:15px;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    transition:border-color .18s ease,background .18s ease;
}
.wdg-svc-related a:hover{border-color:#0e7fc4;background:#eaf5fc;text-decoration:none}

/* ---------- Homepage photo service cards (front page ONLY) ----------
   The Services Build plugin rebuilds the homepage "Water Damage Services"
   section as SERVPRO-style image cards (photo top, name, one line, link to
   the child page) inside .wdg-svc-imggrid. Every rule here is scoped under
   body.home, and the services-page rules at the top of this file are
   scoped body:not(.home) - so on the front page ONLY these card rules
   can take effect, and on the services pages only the services rules. */
body.home .wdg-svc-imggrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:6px;
}
body.home .wdg-svc-imgcard{
    display:block;
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    text-decoration:none;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
body.home .wdg-svc-imgcard:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(11,42,74,.14);
    border-color:#bcd9ee;
    text-decoration:none;
}
body.home .wdg-svc-imgcard-img{
    display:block;
    width:100%;
    height:180px;
    object-fit:cover;
}
body.home .wdg-svc-imgcard-body{padding:20px 22px 22px}
body.home .wdg-svc-imgcard-body h3{
    color:#0b2a4a;
    font-size:20px;
    font-weight:700;
    margin:0 0 8px;
}
body.home .wdg-svc-imgcard-body p{
    color:#33475c;
    font-size:15px;
    line-height:1.6;
    margin:0 0 12px;
}
body.home .wdg-svc-imgcard-more{color:#0e7fc4;font-weight:700;font-size:15px}
@media (max-width:900px){
    body.home .wdg-svc-imggrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    body.home .wdg-svc-imggrid{grid-template-columns:1fr}
    body.home .wdg-svc-imgcard-img{height:200px}
}
@media (prefers-reduced-motion: reduce){
    body.home .wdg-svc-imgcard{transition:none}
    body.home .wdg-svc-imgcard:hover{transform:none}
    .wdg-svc-card{transition:none}
    .wdg-svc-card:hover{transform:none}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
    .wdg-svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .wdg-svc-hero{min-height:0;padding:36px 18px 40px;border-radius:18px}
    .wdg-svc-pill{letter-spacing:1.5px}
    .wdg-svc-panel{padding:22px 18px;border-radius:14px}
    .wdg-svc-grid{grid-template-columns:1fr}
    .wdg-svc-card img{height:200px}
    .wdg-svc-step{padding:16px}
    .wdg-svc-wrap .wdg-table th,.wdg-svc-wrap .wdg-table td{padding:11px 12px;font-size:15px}
    .wdg-svc-cta{padding:36px 20px}
}