/* SEO overhaul components: breadcrumbs, byline, consult CTA, related links.
   Plain CSS on purpose — no build pipeline required. */

.breadcrumbs {
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.breadcrumbs li + li::before {
    content: "\203A";
    opacity: 0.5;
}
.breadcrumbs a {
    text-decoration: none;
}
.breadcrumbs span[aria-current] {
    opacity: 0.7;
}

.eeat-byline {
    margin: 0.25rem 0 1.25rem;
    font-size: 0.9rem;
}
.eeat-byline .byline {
    margin: 0 0 0.25rem;
}
.eeat-byline .byline > span + span::before {
    content: "\00B7";
    margin: 0 0.5rem;
    opacity: 0.5;
}
.eeat-byline .reviewed-by {
    margin: 0;
    font-style: italic;
    opacity: 0.85;
}
/* The theme blocks + uppercases bare <time> for its card layouts; inside the
   byline the dates flow inline with their labels on one line (round 10e). */
.eeat-byline .byline time {
    display: inline;
    text-transform: none;
}

.consult-cta {
    margin: 2rem 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 4px solid currentColor;
    border-radius: 6px;
}
.consult-cta .inner {
    padding: 1.5rem;
}
.consult-cta-title {
    margin-top: 0;
}
.consult-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.consult-cta-more {
    display: inline-block;
}

.related-reading {
    margin: 2rem 0;
}
.related-reading ul {
    padding-left: 1.25rem;
}
.related-reading li {
    margin: 0.4rem 0;
}
.related-reading time {
    font-size: 0.85em;
    opacity: 0.7;
}

/* Related-content zone (design pass 2026-08-07): one cream field matching the
   theme's $beige band; the reused card blocks render inside group wrappers so
   their .inner divs escape the .block > .inner padding — the section carries
   the native 5rem/4rem rhythm itself. Cards forced white for AA contrast. */
.practice-related {
    background-color: #efede2;
    padding: 5rem 0 4rem;
}
.practice-related .practice-related-group + .practice-related-group {
    margin-top: 3rem;
}
.practice-related .card > .inner {
    background-color: #fff;
}
/* The native blog block was designed for white pages (no card box), so on
   the cream field its white .inner needs its own padding + radius, and the
   Read More buttons pin to a shared baseline (round 10d, owner screenshot). */
.practice-related .blog-posts .card > .inner {
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 10px;
    width: 100%;
}
.practice-related .blog-posts .blog-post .txt {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.practice-related .blog-posts .blog-post .cta {
    margin-top: auto;
    padding-top: 1rem;
}
.practice-related .blog-posts {
    margin: 2rem 0 1rem;
}
/* text-only, whole-card-clickable service links (round 3) */
.related-service-card {
    display: block;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: inherit;
    text-decoration: none;
}
.related-service-card .title {
    color: #871711;
    text-transform: uppercase;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.related-service-card .teaser {
    color: #334e60;
    font-weight: 300;
    font-size: 0.9rem;
    margin: 0;
}
.related-service-card:hover .title,
.related-service-card:focus-visible .title {
    text-decoration: underline;
}

/* compact horizontal lawyer cards (mega-menu chip proportions) */
.practice-related .area-lawyers {
    margin-top: 3rem;
}
.area-lawyer-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.5rem;
}
.area-lawyer-card .img {
    flex: 0 0 120px;
    display: block;
}
.area-lawyer-card .img img {
    width: 120px;
    height: 100%;
    min-height: 136px;
    object-fit: cover;
    display: block;
}
.area-lawyer-card .txt {
    padding: 1.25rem 1.5rem;
}
.area-lawyer-card .title {
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    font-size: 1.05rem;
    font-weight: 700;
}
.area-lawyer-card .title a {
    color: #57554a;
}
.area-lawyer-card .role {
    color: #73705e;
    font-weight: 300;
    margin-bottom: 0.5rem;
}
.area-lawyer-card .snippet {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.area-lawyer-card .txt {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.area-lawyer-card .contact-lines {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.9rem;
}
.area-lawyer-card .contact-lines li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.area-lawyer-card .contact-lines .icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-right: 0;
}
.area-lawyer-card .profile-link {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: auto;
    align-self: flex-end;
}
@media (max-width: 575.98px) {
    .area-lawyer-card {
        flex-direction: column;
    }
    .area-lawyer-card .img,
    .area-lawyer-card .img img {
        width: 100%;
        flex-basis: auto;
        max-height: 260px;
    }
}

/* inline inquiry form inside the consult CTA (round 3: tighter, and only
   real input fields get the box treatment — captcha/hidden holders don't) */
.consult-cta .inner {
    padding: 1.25rem 1.5rem;
}
.consult-cta-title {
    font-size: 1.4rem;
}
/* slim one-row intake (owner call): name + phone (+ dropdown on generic
   pages) + button all on one wrapping line */
.area-inquiry-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-start;
}
.area-inquiry-form fieldset {
    flex: 1 1 300px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    border: 0;
    padding: 0;
    margin: 0;
}
.area-inquiry-form .field {
    margin: 0;
}
.area-inquiry-form .field.text,
.area-inquiry-form .field.dropdown {
    flex: 1 1 160px;
}
.area-inquiry-form .field.hidden,
.area-inquiry-form .field.nocaptcha,
.area-inquiry-form .field.captcha {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    min-height: 0;
}
.area-inquiry-form .btn-toolbar .btn {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    padding: 0.65rem 1.5rem;
    background-color: #57554a;
    color: #fff;
}
.area-inquiry-form .field label.left {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}
.area-inquiry-form input,
.area-inquiry-form select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    background-color: #fff;
}
.area-inquiry-form .btn-toolbar {
    margin: 0;
    flex: 0 0 auto;
}
.area-inquiry-form .message {
    flex-basis: 100%;
    font-weight: 600;
    margin: 0.25rem 0;
}
.area-inquiry-form .message.good {
    color: #1a6b3c;
}
.area-inquiry-form .message.bad,
.area-inquiry-form .message.required {
    color: #871711;
}

/* footer link lists: stacked third column beside the NAP columns (round 3) */
.footer-links-col .footer-practice,
.footer-links-col .footer-menu {
    margin: 0 0 0.75rem;
}
.footer-links-col .footer-links-title {
    /* explicit white: the theme's heading colour is dark and disappears on the footer bg */
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin: 0 0 0.4rem;
}
.footer-links-col .footer-practice ul,
.footer-links-col .footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: flex-start;
    font-size: 0.9rem;
}
@media (max-width: 991.98px) {
    .footer-links-col {
        margin-top: 1rem;
    }
}
/* desktop: link columns shrink to content and anchor to the right edge
   (aligned under the social icons) instead of floating mid-grid */
@media (min-width: 992px) {
    #footer .footer-links-col {
        flex: 0 0 auto;
        width: auto;
    }
    #footer .footer-col-practice {
        margin-left: auto;
    }
    #footer .footer-col-about {
        margin-left: 3.5rem;
    }
}
/* lowest-intent group: cap to two cards on phones (page runs long) */
@media (max-width: 767.98px) {
    .practice-related .blog-posts .card:nth-child(n+3) {
        display: none;
    }
}

/* client-review chips for the August-2026 round (controller gates them off live envs) */
.review-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}
.review-badge--new {
    background: #1e7e34;
}
.review-badge--rewrite {
    background: #a05a00;
}

/* keyboard focus ring for pill buttons (theme defines :hover only) */
.btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* safety net: guarantee the a11y helper exists even if trimmed from the bootstrap build */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.person-credentials {
    margin: 1.5rem 0;
}
.person-credentials dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
}
.person-credentials dt {
    font-weight: 600;
}
.person-credentials dd {
    margin: 0;
}
.person-credentials ul {
    margin: 0;
    padding-left: 1.1rem;
}

.footer-menu {
    margin: 0 0 1rem;
}
.footer-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: center;
}

/* Tables inside blog post content (fee tables, comparisons). Scoped to posts. */
.blog-post table {
    width: 100%;
    margin: 1.5rem 0 2rem;
    border-collapse: collapse;
    font-size: 0.9em;
    line-height: 1.45;
}
.blog-post thead th {
    padding: 0.75rem 1rem;
    background: #EFEDE2;
    border-bottom: 2px solid #73705E;
    color: #57554A;
    font-weight: 700;
    text-align: left;
    vertical-align: bottom;
}
.blog-post tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
}
.blog-post tbody tr:nth-child(even) td {
    background: rgba(239, 237, 226, 0.45);
}
.blog-post tbody td:first-child {
    color: #57554A;
    font-weight: 600;
}
@media (max-width: 767.98px) {
    .blog-post table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .blog-post th,
    .blog-post td {
        min-width: 10rem;
    }
}

/* Blog post layout: the title block has its own row, so the rail starts level
   with the featured image. The two .content columns meet with no padding, and
   the gap under the byline stays the byline's own bottom margin. */
#main .content.blog-post-head {
    padding-bottom: 0;
}
.blog-post.blog-post-header {
    margin-bottom: 0;
}
#main .content.blog-post-body {
    padding-top: 0;
}
.blog-post-body .img {
    margin: 1rem 0;
}
.blog-post-body .blog-post > :first-child {
    margin-top: 0;
}
@media (min-width: 992px) {
    #main .rail.blog-post-rail {
        padding-top: 0;
    }
}