/* =========================================================
   wp-overrides.css
   The bridge between WordPress output and the Fox Mandal design.

   assets/fm/css/style.css is the designer's file and is kept byte-for-byte
   identical to the HTML build so it can be replaced wholesale on a redesign.
   Everything WordPress needs on top of it lives here.

   Loaded only on the "FM — Practice Area" template.
   ========================================================= */

/* =========================================================
   1. Accessibility helpers the static build did not need
   ========================================================= */

/* Used by the skip link and by visually hidden link context. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* The skip link must become visible when it receives keyboard focus. */
.screen-reader-text:focus,
.skip-link:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: var(--navy, #002369);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* =========================================================
   2. WordPress admin bar
   The design's header is position:sticky; top:0, which would sit underneath
   the fixed admin bar for logged-in users.
   ========================================================= */

.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* The mobile off-canvas panel is full-viewport, so it needs the same offset. */
.admin-bar .mobile-menu {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .mobile-menu {
        top: 46px;
    }
}

/* =========================================================
   3. Editor output -> design typography

   Content typed into the page editor arrives as plain <h2>, <p>, <ul> with no
   design classes. These rules give that output the same appearance as the
   hand-written markup in the reference, so editors never have to know a class
   name.
   ========================================================= */

/* h2 in the Overview block == .section-title */
.fm-page .body-copy h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--heading-color, #002369);
    margin: 0 0 18px;
}

/* Second and later headings need air above them. */
.fm-page .body-copy > h2 ~ h2 {
    margin-top: 34px;
}

.fm-page .body-copy h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--heading-color, #002369);
    margin: 26px 0 12px;
}

/* ul in the Overview block == .tick-list */
.fm-page .body-copy ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.fm-page .body-copy ul li {
    position: relative;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color, #656565);
    margin-bottom: 6px;
}

.fm-page .body-copy ul li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 11px;
    width: 3px;
    height: 3px;
    background: var(--text-color, #656565);
    border-radius: 50%;
}

/* Numbered lists keep their markers but match the body rhythm. */
.fm-page .body-copy ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.fm-page .body-copy ol li {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color, #656565);
    margin-bottom: 6px;
}

.fm-page .body-copy a {
    color: var(--blue, #0073d2);
    text-decoration: underline;
}

.fm-page .body-copy blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--blue, #0073d2);
    color: var(--text-color, #656565);
    font-style: italic;
}

.fm-page .body-copy table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 15px;
}

.fm-page .body-copy th,
.fm-page .body-copy td {
    border: 1px solid var(--border-color, #dcdcdc);
    padding: 9px 12px;
    text-align: left;
}

/* Wide content must scroll inside its own box, never the page. */
.fm-page .body-copy .table-wrap,
.fm-page .body-copy figure.wp-block-table {
    overflow-x: auto;
}

/* The SEO block already styles h2/p by element in style.css; lists there just
   need to inherit the same muted treatment. */
.fm-page .section-seo__inner ul,
.fm-page .section-seo__inner ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.fm-page .section-seo__inner li {
    font-size: 13px;
    line-height: 1.72;
    color: var(--text-faint, #a3a3a3);
}

/* =========================================================
   4. Core block + classic editor alignment classes
   ========================================================= */

.fm-page .body-copy img,
.fm-page .body-copy figure {
    max-width: 100%;
    height: auto;
}

.fm-page .body-copy figure {
    margin: 0 0 20px;
}

.fm-page .body-copy .alignleft {
    float: left;
    margin: 4px 24px 16px 0;
}

.fm-page .body-copy .alignright {
    float: right;
    margin: 4px 0 16px 24px;
}

.fm-page .body-copy .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.fm-page .body-copy .wp-caption-text,
.fm-page .body-copy figcaption {
    font-size: 13px;
    color: var(--text-muted, #8b8b8b);
    margin-top: 6px;
}

/* Clear floated media before the next section starts. */
.fm-page .body-copy::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================================
   5. Small guards
   ========================================================= */

/* A page with no featured image keeps the design's own hero photograph, which
   style.css sets on .page-hero. Nothing to do here - this rule only ensures an
   inline background-image never loses its sizing. */
.fm-page .page-hero {
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}

/* Blog cards get their artwork from an inline background-image when the post
   has a featured image; keep the cover sizing regardless of the source. */
.fm-page .blog-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}