/* ==========================================================================
   VHD Law — Layout standard (2026-10-31)
   Loaded on every VHD page template AFTER Divi's parent stylesheet.

   Why this file exists
   --------------------
   Every VHD template prints its own <style> block BEFORE wp_head(), so the
   Divi parent stylesheet (printed inside wp_head) lands later in the cascade
   and silently wins every tie. Two Divi rules were breaking the layout:

     .container { width: 80%; max-width: 1080px; }   -> squeezed every section
                                                        to ~984px of content
     h1..h6     { line-height: 1em; }                 -> cramped multi-line
                                                        headings with no class

   This file restores the intended grid and gives every page the same
   container, gutters and vertical rhythm. Selectors use an extra `html body`
   so they beat Divi's single-class rules no matter the load order, while any
   template rule with two classes (e.g. `.faq .container`) still wins.
   ========================================================================== */

:root {
  --vhd-container: 1320px;   /* outer width of every .container            */
  --vhd-gutter: 48px;        /* left/right padding inside the container    */
  --vhd-section-y: 112px;    /* top/bottom padding of every content section */
  --vhd-hero-max: 1080px;    /* hero sections never grow past this         */
}
@media (max-width: 1024px) {
  :root { --vhd-gutter: 40px; --vhd-section-y: 96px; }
}
@media (max-width: 768px) {
  :root { --vhd-gutter: 24px; --vhd-section-y: 72px; }
}

/* --- 1. Container: undo Divi's 80% / 1080px clamp ----------------------- */
html body .container {
  width: 100%;
  max-width: var(--vhd-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vhd-gutter);
  padding-right: var(--vhd-gutter);
  box-sizing: border-box;
}

/* --- 2. Headings without their own line-height (Divi forces 1em) ------- */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  line-height: 1.2;
}

/* --- 3. Vertical rhythm: one padding for every content section --------- */
html body .advantage,
html body .all-locations,
html body .attorney-section,
html body .attorneys,
html body .blog,
html body .blog-main,
html body .book-promo,
html body .book-section,
html body .cards-section,
html body .cases-section,
html body .contact-section,
html body .content-section,
html body .counties-section,
html body .cta,
html body .cta-section,
html body .documents-section,
html body .factors-section,
html body .faq,
html body .featured-practice,
html body .form-section,
html body .full-text-section,
html body .info-band,
html body .intro-section,
html body .intro-strip,
html body .list-section,
html body .local,
html body .location-intro,
html body .locations-section,
html body .map-section,
html body .orders-section,
html body .policy-section,
html body .practice-areas,
html body .practice-section,
html body .practices,
html body .primary-services-section,
html body .process-section,
html body .quote-section,
html body .resource-section,
html body .resources-section,
html body .schedule-section,
html body .services,
html body .story-section,
html body .team,
html body .team-section,
html body .testimonial-section,
html body .testimonials,
html body .thank-section,
html body .timing-section,
html body .tools-section,
html body .vhd-areas-section,
html body .vhd-business-reviews,
html body .vhd-divorce-reviews,
html body .vhd-dui-reviews,
html body .vhd-estate-reviews,
html body .vhd-faq,
html body .vhd-injury-reviews,
html body .vhd-inline-booking,
html body .vhd-neighbor-links,
html body .vhd-post-main,
html body .vhd-real-reviews,
html body .vhd-regional-explainer,
html body .vhd-review-band,
html body .vhd-search-main,
html body .vhd-standard-locations,
/* class names that are also used for compact strips elsewhere: scoped */
html body.vhd-adoption-template .faq-section,
html body.vhd-attorneys-template .recognition,
html body.vhd-business-law-parent-template .recognition,
html body.vhd-child-support-template .faq-section,
html body.vhd-collaborative-divorce-template .faq-section,
html body.vhd-cooperative-divorce-template .faq-section,
html body.vhd-divorce-laws-template .faq-section,
html body.vhd-divorce-resources-template .faq-section,
html body.vhd-domestic-violence-template .faq-section,
html body.vhd-drug-crime-car-layout-template .reviews-section,
html body.vhd-family-law-appleton-template .faq-section,
html body.vhd-family-law-appleton-template .recognition,
html body.vhd-family-law-downtown-milwaukee-template .faq-section,
html body.vhd-family-law-downtown-milwaukee-template .recognition,
html body.vhd-family-law-green-bay-template .faq-section,
html body.vhd-family-law-green-bay-template .recognition,
html body.vhd-family-law-madison-template .faq-section,
html body.vhd-family-law-madison-template .recognition,
html body.vhd-family-law-parent-template .recognition,
html body.vhd-family-law-template .recognition,
html body.vhd-family-law-waukesha-template .faq-section,
html body.vhd-family-law-waukesha-template .recognition,
html body.vhd-family-law-wauwatosa-template .faq-section,
html body.vhd-family-law-wauwatosa-template .recognition,
html body.vhd-family-law-wisconsin-template .faq-section,
html body.vhd-family-law-wisconsin-template .recognition,
html body.vhd-firm-overview-template .recognition,
html body.vhd-grandparents-rights-template .faq-section,
html body.vhd-harassment-process-template .faq-section,
html body.vhd-law-custom-template .locations,
html body.vhd-law-custom-template .process,
html body.vhd-law-custom-template .recognition,
html body.vhd-legal-separation-template .faq-section,
html body.vhd-local-service-template .intro,
html body.vhd-local-service-template .process,
html body.vhd-location-germantown-template .recognition,
html body.vhd-location-green-bay-template .faq-section,
html body.vhd-location-green-bay-template .recognition,
html body.vhd-location-sister-bay-template .recognition,
html body.vhd-location-template .recognition,
html body.vhd-locations-template .quick-strip,
html body.vhd-mediation-attorney-template .faq-section,
html body.vhd-military-divorce-template .faq-section,
html body.vhd-modification-orders-template .faq-section,
html body.vhd-paternity-template .faq-section,
html body.vhd-physical-placement-template .faq-section,
html body.vhd-practice-areas-template .recognition,
html body.vhd-premarital-agreement-template .faq-section {
  padding-top: var(--vhd-section-y);
  padding-bottom: var(--vhd-section-y);
}

/* --- 4. One content edge for every block -------------------------------
   Content inside .container starts at the same x on every section
   (1320px frame minus 48px gutters = 1224px of content). These shared
   blocks had their own max-widths/paddings and started 24–48px off. */
html body .vhd-standard-locations-inner,
html body .vhd-real-reviews-inner,
html body .vhd-review-inner,
html body .vhd-injury-reviews-inner,
html body .vhd-dui-reviews-inner,
html body .vhd-business-reviews-inner,
html body .vhd-estate-reviews-inner,
html body .vhd-divorce-reviews-inner {
  width: 100%;
  max-width: var(--vhd-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vhd-gutter);
  padding-right: var(--vhd-gutter);
  box-sizing: border-box;
}
/* ...inside the practice-page .main column the gutter already exists */
html body .main .vhd-standard-locations-inner,
html body .main .vhd-real-reviews-inner,
html body .main .vhd-review-inner,
html body .main .vhd-injury-reviews-inner,
html body .main .vhd-dui-reviews-inner,
html body .main .vhd-business-reviews-inner,
html body .main .vhd-estate-reviews-inner,
html body .main .vhd-divorce-reviews-inner {
  padding-left: 0;
  padding-right: 0;
}
/* Practice-page heroes: the hero already carries the 48px side padding,
   so the inner grid gets the 1224px content width, not 1320px. */
html body .hero .hero-inner:not(.container) {
  max-width: calc(var(--vhd-container) - 2 * var(--vhd-gutter));
}

/* --- 5. Card grids with exactly four cards: one row, no orphan card ---- */
@media (min-width: 1181px) {
  html body .practice-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- 6. Incomplete last rows are centred instead of leaving a hole ----
   3-column grids switch to 6 half-tracks so a last row of 1 or 2 cards
   can sit in the middle; 2-column grids switch to 4 half-tracks. */
@media (min-width: 1181px) {
  html body.vhd-family-law-template .practice-grid,
  html body.vhd-family-law-parent-template .practice-grid,
  html body.vhd-testimonials-template .testimonials-grid,
  html body.vhd-local-service-template .services-grid,
  html body.vhd-local-service-template .vhd-neighbor-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  html body.vhd-family-law-template .practice-grid > *,
  html body.vhd-family-law-parent-template .practice-grid > *,
  html body.vhd-testimonials-template .testimonials-grid > *,
  html body.vhd-local-service-template .services-grid > *,
  html body.vhd-local-service-template .vhd-neighbor-grid > * {
    grid-column: span 2;
  }
  html body.vhd-family-law-template .practice-grid > :nth-child(3n+1):nth-last-child(2),
  html body.vhd-family-law-parent-template .practice-grid > :nth-child(3n+1):nth-last-child(2),
  html body.vhd-testimonials-template .testimonials-grid > :nth-child(3n+1):nth-last-child(2),
  html body.vhd-local-service-template .services-grid > :nth-child(3n+1):nth-last-child(2),
  html body.vhd-local-service-template .vhd-neighbor-grid > :nth-child(3n+1):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
  html body.vhd-family-law-template .practice-grid > :nth-child(3n+2):last-child,
  html body.vhd-family-law-parent-template .practice-grid > :nth-child(3n+2):last-child,
  html body.vhd-testimonials-template .testimonials-grid > :nth-child(3n+2):last-child,
  html body.vhd-local-service-template .services-grid > :nth-child(3n+2):last-child,
  html body.vhd-local-service-template .vhd-neighbor-grid > :nth-child(3n+2):last-child {
    grid-column: 4 / span 2;
  }
  html body.vhd-family-law-template .practice-grid > :nth-child(3n+1):last-child,
  html body.vhd-family-law-parent-template .practice-grid > :nth-child(3n+1):last-child,
  html body.vhd-testimonials-template .testimonials-grid > :nth-child(3n+1):last-child,
  html body.vhd-local-service-template .services-grid > :nth-child(3n+1):last-child,
  html body.vhd-local-service-template .vhd-neighbor-grid > :nth-child(3n+1):last-child {
    grid-column: 3 / span 2;
  }
}
@media (min-width: 901px) {
  html body.vhd-divorce-resources-template .tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  html body.vhd-divorce-resources-template .tools-grid > * {
    grid-column: span 2;
  }
  html body.vhd-divorce-resources-template .tools-grid > :nth-child(2n+1):last-child {
    grid-column: 2 / span 2;
  }
}

/* --- 7. Local service pages: attorney card with a real-size photo ------
   The photo column was a fixed 190px. A lone attorney now spans the row. */
@media (min-width: 901px) {
  html body.vhd-local-service-template .team-grid .attorney {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  html body.vhd-local-service-template .team-grid .attorney > img {
    width: 100%;
    height: 420px;
    max-width: none;
    object-fit: cover;
    object-position: center 18%;
  }
  html body.vhd-local-service-template .team-grid:has(> .attorney:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.vhd-local-service-template .team-grid .attorney:only-child {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  html body.vhd-local-service-template .team-grid .attorney:only-child > img {
    height: 500px;
  }
  html body.vhd-local-service-template .team-grid .attorney .attorney-info {
    align-self: center;
    padding: 40px;
  }
}

/* --- 8. Comfortable reading measure inside full-width text cards ------- */
html body.vhd-personal-injury-parent-template .content-card p,
html body.vhd-physical-placement-template .factor-card p,
html body.vhd-wisconsin-divorce-lawyer-template .numbered-item p {
  max-width: 80ch;
}