/* =========================================================
   Box sizing
   ---------------------------------------------------------
   style.css was authored against the static HTML build, which loads Bootstrap
   from a CDN — and Bootstrap sets box-sizing: border-box globally. The FM
   pages dequeue Bootstrap, and neither FM stylesheet declares box-sizing, so
   on WordPress there was no reset at all.

   Four rules pair width:100% with a non-zero padding and are wrong without it:
   .shell (the container every section uses), .shell-wide (the footer),
   .faq-question and .m-group__head. .shell-wide measured 1518px inside a
   1422px viewport — its two 48px paddings added to the 100% rather than
   fitting inside it — which pushed the footer content past the right edge.

   Scoped to .fm-page so it reaches these templates and the Elementor pages
   built with the FM widgets, and nothing else on the site. Harmless if some
   other stylesheet already provides a reset: it is the same declaration.
   ========================================================= */
.fm-page,
.fm-page *,
.fm-page *::before,
.fm-page *::after {
    box-sizing: border-box;
}

/* =========================================================
   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;
}

/* h3 in the Overview block == .service-group
   The practice area pages group their Services list under sub-headings —
   "Pre-Litigation & Strategy", "Litigation", and so on. index.html, which this
   file was first written against, has no h3 in its body copy at all, so these
   values were a guess. They are now the design's own .service-group rule, so a
   heading typed in the editor matches the HTML build exactly. */
.fm-page .body-copy h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--heading-color, #002369);
    margin: 22px 0 10px;
}

/* 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;
}

/* =========================================================
   Practice area pages — Latest Blog and Latest News
   ---------------------------------------------------------
   Added when the four practice area pages were built from the firm's Word
   documents. These are design rules rather than WordPress bridging, but they
   live here because assets/fm/css/style.css is the designer's file and is kept
   byte-for-byte as delivered.
   ========================================================= */

/* Latest Blog is three cards across, not two.
   .blog-card--a and --b are in style.css; this is the third. It is a crop of
   the boardroom banner with the blue band along its bottom edge removed, since
   the card tints the whole image 78% navy and that band read as a colour shift
   rather than texture. A post's own featured image overrides it inline. */
.blog-grid {
    grid-template-columns: repeat(3, 1fr);
}

.blog-card--c {
    background-image: url("../images/content/blog-c.png");
}

/* Latest News as a fixed three-up row rather than the edge-bleed scroller.

   The scroller keeps every card at 324px and lets the row run past the
   container, so the last card is always cut through the middle. That is
   deliberate where the row can be dragged. On these pages it sat half-clipped
   past the container edge while every other section lined up to it.

   .news-scroller and .bleed-right are left untouched, so anything still using
   them behaves exactly as before. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* .news-card carries a fixed flex basis for the scroller. Inside the grid the
   column decides the width, so that basis is overridden rather than leaving a
   324px card sitting in a wider column. */
.news-grid .news-card {
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    .blog-grid,
    .news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
    .blog-grid,
    .news-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Editor-only note shown where an unassigned FM menu location would have put
   its links. Never rendered for a visitor — see fm_footer_menu_hint(). */
.fm-menu-hint {
    font-size: 13px;
    opacity: .75;
}

.fm-menu-hint a {
    text-decoration: underline;
}

/* =========================================================
   Footer widget area on the FM templates
   ---------------------------------------------------------
   The FM pages dequeue the theme's Bootstrap entirely (see fm_enqueue_assets),
   so the design's stylesheet is the only thing styling them. footer-widget.php
   is shared with the rest of the site and carries Bootstrap grid classes, which
   therefore do nothing here — every widget column stacks full width.

   Rather than pull the whole framework back onto the page for one widget area,
   these are the few rules it needs, scoped to #colophon so they cannot reach
   the design. If Bootstrap is ever re-enabled here the scoping means these
   simply lose to it rather than fighting it.
   ========================================================= */

/* The same rhythm .footer-top uses in the design, so this widget area sits
   where the design own footer row would. */
#colophon #footer-widget {
    padding: 36px 0 34px;
}

#colophon #footer-widget .container-fluid {
    width: 100%;
    padding: 0;
}

#colophon #footer-widget .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin: 0;
}

#colophon #footer-widget .col-12 {
    flex: 1 1 100%;
    padding: 0;
}

@media (min-width: 768px) {
    #colophon #footer-widget .col-md-8 {
        flex: 1 1 0;
        min-width: 0;
    }

    #colophon #footer-widget .col-md-4 {
        flex: 0 0 auto;
    }
}

/* The widget area ends with its own <hr>. The design has .footer-divider for
   that rule, and two lines stacked reads as a mistake. */
#colophon #footer-widget hr {
    display: none;
}

/* A nav menu widget in the footer renders a plain <ul>. Give it the same row
   treatment the design's own footer links have, so the two are indistinguishable. */
#colophon #footer-widget ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 34px;
    row-gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#colophon #footer-widget ul ul {
    display: none;
}

#colophon #footer-widget a {
    color: var(--white, #fff);
    font-size: 13px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

#colophon #footer-widget a:hover {
    color: #9ecbf3;
}

#colophon #footer-widget .widget-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

/* On a phone the three-across bottom row has nowhere to go. */
@media (max-width: 767px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/* =========================
   SEO block — richer copy
   =========================
   The Category Content region is typed in the editor, so it can contain more
   than the heading and paragraphs the design anticipated. .section-seo in
   style.css styles only h2 and p; anything else falls back to browser defaults,
   which in a 13px muted block means 16px black text and bulky list spacing.

   None of the six practice area pages needs these today — every one of their
   SEO blocks is a heading plus paragraphs. They are here so that the first
   editor who adds a sub-heading or a list does not have to discover this.

   Added here rather than in style.css because that file is the designer’s,
   kept byte-for-byte as delivered. */
.fm-page .section-seo h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color, #656565);
    margin: 26px 0 12px;
}
.fm-page .section-seo ul,
.fm-page .section-seo ol {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.72;
    color: var(--text-faint, #a3a3a3);
}
.fm-page .section-seo li { margin: 0 0 8px; }
.fm-page .section-seo strong { color: var(--text-color, #656565); font-weight: 600; }
.fm-page .section-seo a { color: var(--blue, #0073d2); text-decoration: underline; }

.fm-page .section-seo table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.fm-page .section-seo th,
.fm-page .section-seo td {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #dcdcdc);
    text-align: left;
    vertical-align: top;
    color: var(--text-faint, #a3a3a3);
}
.fm-page .section-seo th {
    font-weight: 700;
    color: var(--text-color, #656565);
    background: #f6f6f6;
}

/* ==========================================================================
   Key Contacts — a scrolling row once there are more than three
   ==========================================================================

   The designer's .contact-grid is a centred 3 x 370px grid, which was right
   when contacts were hand-picked three at a time. Now that they come from the
   People library, a practice area has as many as it has — Corporate has ten —
   and a grid would stack them into four rows, pushing the rest of the page
   down by well over a thousand pixels.

   So past three the row becomes one horizontally scrollable line. The card
   itself is untouched; only the container changes, which is why nothing here
   restates .contact-card.

   scroll-snap keeps cards from coming to rest half cut off. The container is
   focusable (see the template) so the arrow keys scroll it, and the visible
   scrollbar is deliberate: a row with no affordance reads as a row that ends
   at the third card. */

.contact-grid--scroll {
    display: flex;
    grid-template-columns: none;   /* the grid track list would otherwise win */
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* Neither smooth nor snapping: the row drifts a fraction of a pixel per
       frame now. scroll-behavior:smooth would turn every one of those writes
       into an animation the next frame interrupts, and snap points would
       keep tugging it back to a card edge. Both belonged to the version that
       advanced one card at a time. */
    scroll-behavior: auto;

    /* No visible scrollbar. It was there to signal that the row continues past
       the third card; the row now advances on its own, which says the same
       thing without a bar sitting under the cards. Scrolling still works by
       wheel, swipe, drag and keyboard — only the bar is hidden. */
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* old Edge */
}

.contact-grid--scroll .contact-card {
    flex: 0 0 370px;
    max-width: 370px;
}

/* ---------------------------------------------------------
   The marquee

   Added by main.js once the track exists, so a row with JavaScript switched
   off stays the plain horizontal scroller it is without these rules.
   --------------------------------------------------------- */
.contact-grid--marquee {
    display: block;
    overflow: hidden;      /* the track is wider than the row, by design */
}

.contact-track {
    display: flex;
    width: max-content;
    animation-name: fm-contacts-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration is set by main.js from the measured width, so the
       speed is the same whatever a practice area's contact count. */
}

/* The one thing that stops it. No timer, no flag — the browser simply holds
   the animation where it is and resumes from the same place. */
.contact-grid--marquee:hover .contact-track {
    animation-play-state: paused;
}

/* Half the track is one full set of cards, so this lands on a picture
   identical to the one it started from. That is why the loop has no seam. */
@keyframes fm-contacts-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Motion nobody asked for is exactly what this setting is about. The row keeps
   its cards reachable by going back to an ordinary scroller. */
@media (prefers-reduced-motion: reduce) {
    .contact-grid--marquee { overflow-x: auto; }
    .contact-track { animation: none; }
}

/* Cancel the responsive rule that makes the last card span the full row and
   centre itself — in a flex row that produces one stretched card. */
.contact-grid--scroll .contact-card:last-child {
    grid-column: auto;
    max-width: 370px;
    margin: 0;
}

.contact-grid--scroll:focus-visible {
    outline: 2px solid var(--navy, #0b2a5b);
    outline-offset: 4px;
}

/* Chrome, Edge and Safari. display:none on this pseudo-element hides the bar
   without disabling the scrolling itself. */
.contact-grid--scroll::-webkit-scrollbar {
    display: none;
}

/* No prefers-reduced-motion block here any more: the drift itself is switched
   off in main.js for that setting, and the row no longer snaps or glides for
   anyone, so there is nothing left for this to turn off. */

@media (max-width: 767px) {
    /* The card is wider than a phone; let it shrink rather than force a
       370px-wide scroll on a 375px screen. */
    .contact-grid--scroll .contact-card {
        flex-basis: 78vw;
        max-width: 320px;
    }
}