/* Header, footer, listings and locations: fixes from the Oct. 8, 2026 template design audit (OTX audit/02-design/2026-10-08-template-design-audit.md). Each rule names its finding ID. */ /* This file loads before Elementor's generated CSS (post-.css and the loop CSS printed in the body), so a rule with the same specificity loses. Rules below either add one class to Elementor's own selector or use !important where the audit calls for it. */ /* ========================================================================== Header (template 14) ========================================================================== */ /* GLB-01: B-2 added Physical Therapists, so six menu items (about 943 px) no longer fit the 918 px menu box at 1440 and Book Appointment wraps to a second row (header 80 -> 123 px). Between 1025 and 1600 px: 9 px title padding a side (was 16), 16 px titles (was 17: the mega menu sizes .e-n-menu-title-text from --n-menu-title-font-size; without this line the header still wraps up to 1286 px) and 5% side gutters on the header row (was 8%), 4% at 1280 px and below. Measured on Local: one row from 1215 px up; at 1214 px and below it still wraps, where the approved five-item header also wrapped (below about 1215). Above 1600 px the approved header is untouched. The top bar (6895c1e: phone, Patient Portal, Pay My Bill) gets the same gutter so it follows the header row, less 7 px on the right: Book Appointment's item padding dropped 7 px, and this keeps its right edge 4 px past Pay My Bill, as in the approved header. */ @media (min-width: 1025px) and (max-width: 1600px) { .elementor-14 .elementor-element.elementor-element-aac6f19.elementor-widget-n-menu { --n-menu-title-padding: 0.5rem 9px; --n-menu-title-font-size: 16px; } .elementor-14 .elementor-element.elementor-element-185d1cd3.e-con { --padding-left: 5%; --padding-right: 5%; } .elementor-14 .elementor-element.elementor-element-6895c1e.e-con { --padding-left: 5%; --padding-right: calc(5% - 7px); } } @media (min-width: 1025px) and (max-width: 1280px) { .elementor-14 .elementor-element.elementor-element-185d1cd3.e-con { --padding-left: 4%; --padding-right: 4%; } .elementor-14 .elementor-element.elementor-element-6895c1e.e-con { --padding-left: 4%; --padding-right: calc(4% - 7px); } } /* GLB-02: jump links (landing-page Find Your Doctor, the provider sub-nav, article guide boxes) scrolled their target under the sticky header. The sticky row 185d1cd3 is 80 px on one row, 118-123 px where it still wraps (1214 px and below, GLB-01; 140 px is kept to 1239 px for font rendering slack), and the mobile header 6c72ef1 is 71 px at 1024 px and below. Measured on Local: targets land 23, 22 and 14 px below the header bottom. */ html { scroll-padding-top: 100px; } @media (min-width: 1025px) and (max-width: 1239px) { html { scroll-padding-top: 140px; } } @media (max-width: 1024px) { html { scroll-padding-top: 85px; } } /* ========================================================================== Footer (template 97) ========================================================================== */ /* GLB-03: the social row 0e76a1c is a fixed four-column grid. Three icons do not render (no URL in Site Settings), so the lone Facebook icon sat in column one, about 105 px left of center on desktop and against the gutter on phones. A centered flex row with a 40 px gap centers one icon now and four later. */ .elementor-97 .elementor-element.elementor-element-0e76a1c.e-con { --display: flex; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 20px 40px; } /* GLB-09: legal links were the kit link blue #2D68C4 on navy (3.06:1) while the rest of the footer is white. #9DBCF0 (8.6:1 on the navy) keeps them reading as links, with an underline. */ .elementor-97 .elementor-element.elementor-element-281cf7b a { color: #9dbcf0; text-decoration: underline; text-underline-offset: 2px; } .elementor-97 .elementor-element.elementor-element-281cf7b a:hover, .elementor-97 .elementor-element.elementor-element-281cf7b a:focus { color: #fff; } /* GLB-14: on phones the footer lines broke inside names ("Resurgens / Orthopaedics", "Accessibility / Statement"). Keep each linked name on one line. The long one-line "A United Musculoskeletal Partners Practice" link may still wrap, so it can never push the page wider than a 320 px phone. The pipes are typed in Site Settings -> Footer, so a line can still end on one; that is a content edit. */ .elementor-97 .elementor-element.elementor-element-c6f449e p:not(:first-child) a, .elementor-97 .elementor-element.elementor-element-281cf7b a { white-space: nowrap; } /* ========================================================================== Loop grids: listings, locations, Home ========================================================================== */ /* LST-01 and LOC-02: "Equal height" on these loop grids sets grid-auto-rows:1fr, so every card is as tall as the tallest card in the whole grid, even one per row on phones (117 provider cards at 762 px, up to 229 px blank). auto rows keep cards in the same row even (they still stretch to the row) without copying the tallest card into every row. Elementor writes the 1fr with the same specificity plus a later file, hence !important (as the audit says). The audit counts 26 documents with Equal height on. Scoped here by loop-grid widget ID to the ones that render: 551 Find a Provider, 3529 Physical Therapists, 526 Resources, 7121 News and its topics, 303 Locations (also on Home), 1982 Locations Single (provider cards, additional centers), 22 Home news, 1458 Articles, 279 Events, and 348 Providers Single's care-team loop 1e35ded (card 2923, on 76 profiles: a real grid, so a one-column phone card copied the photo card's 462 px). Not here on purpose: the /specialties/ tiles (1094, loop 917: fixed height, no blank) and 348's other two loops (858fdc3 and the card-6959 loop), which pillar.css sets to display:contents, so grid rows do not apply. The other 15 are the service and treatment-area posts' own data, which never prints: template 7099 renders those pages. Descendant selectors, so the rule still holds if Elementor's optimized markup drops the widget-container wrapper. */ .elementor-element-fd1724a .elementor-loop-container.elementor-grid, .elementor-element-51d4eb4 .elementor-loop-container.elementor-grid, .elementor-element-0019896 .elementor-loop-container.elementor-grid, .elementor-element-67487e3f .elementor-loop-container.elementor-grid, .elementor-element-7708c2f .elementor-loop-container.elementor-grid, .elementor-element-519d9ed .elementor-loop-container.elementor-grid, .elementor-element-8fed3ee .elementor-loop-container.elementor-grid, .elementor-element-34cb82d .elementor-loop-container.elementor-grid, .elementor-element-6c19de5 .elementor-loop-container.elementor-grid, .elementor-element-6e05a0d .elementor-loop-container.elementor-grid, .elementor-element-1e35ded .elementor-loop-container.elementor-grid { grid-auto-rows: auto !important; } /* LST-05 (ships with LST-01): Learn More sat at different heights across a row (up to 81 px on Find a Provider, 84 px on Resources). Let the text column grow to the card bottom and push the button down, so every button in a row lines up. Provider card 556 (cef9712 text column, e00afd2 button); resource card 392 (11faf5f); news card 1506 (8528c5f). The cards' boxed inner containers already grow to the card height (Elementor's .e-con > .e-con-inner). */ .elementor-556 .elementor-element.elementor-element-cef9712.e-con { --flex-grow: 1; flex-grow: 1; } .elementor-556 .elementor-element.elementor-element-e00afd2.elementor-widget, .elementor-392 .elementor-element.elementor-element-11faf5f.elementor-widget, .elementor-1506 .elementor-element.elementor-element-8528c5f.elementor-widget { margin-top: auto; } /* LST-03: on phones the location pin on provider card 556 sat alone on its line with the location text below it, because container f00cf2a wraps on mobile. Keep the row on one line; the text still wraps beside the pin, and the pin (3ec5f74) keeps its 15 px instead of shrinking to 12 px beside two-line location lists. */ @media (max-width: 767px) { .elementor-556 .elementor-element.elementor-element-f00cf2a.e-con { --flex-wrap-mobile: nowrap; --flex-wrap: nowrap; } .elementor-556 .elementor-element.elementor-element-f00cf2a > .elementor-element.elementor-element-3ec5f74 { flex-shrink: 0; } } /* LOC-03: phone and fax rows on location cards (loop 292, widget 577ef8c) were 18 px, larger than the 15 px address and hours, because the repeater widget has no typography control and the saved 15 px was ignored. The approved card set them at 15 px. */ .elementor-292 .elementor-element.elementor-element-577ef8c p.phone-label { font-size: 15px; } /* ========================================================================== Location pages (template 1982) ========================================================================== */ /* LOC-01: two-part headings fell apart ("GRAPEVINE" floating beside a two-line type list on desktop, "OUR PROVIDERS IN" 52 px away from the city on phones). Each part is its own heading widget in a wrapping flex row (b84c3c1 above the office details, 89fa851 above the provider cards). Set the parts inline so they read and wrap as one heading. line-height:1 on the container keeps wrapped lines 22 px apart, as inside one heading before (the body's 27 px line box would otherwise set the spacing). No !important: these selectors already outrank Elementor's (tested on all 22 pages with and without it, identical). */ .elementor-1982 .elementor-element.elementor-element-b84c3c1.e-con, .elementor-1982 .elementor-element.elementor-element-89fa851.e-con { --display: block; display: block; line-height: 1; } .elementor-1982 .elementor-element.elementor-element-b84c3c1.e-con > .elementor-widget, .elementor-1982 .elementor-element.elementor-element-89fa851.e-con > .elementor-widget, .elementor-1982 .elementor-element.elementor-element-b84c3c1.e-con > .elementor-widget .elementor-heading-title, .elementor-1982 .elementor-element.elementor-element-89fa851.e-con > .elementor-widget .elementor-heading-title { display: inline; margin: 0; } .elementor-1982 .elementor-element.elementor-element-89fa851.e-con { text-align: center; margin-bottom: 20px; /* keeps the 50 px from heading to cards that 0b15ae8's 20 px bottom margin gave on desktop, now at every width */ } /* LOC-04: every location page had two Get Directions buttons: the approved outlined one under "Map & Directions" (4799690) and a navy "Get directions" under the map, printed by the map widget ffef49a. Hide the widget's own link (and its empty row). The approved button keeps its link through the location-buttons.php fallback. */ .elementor-1982 .elementor-element.elementor-element-ffef49a .otx-locmap__directions { display: none; } .elementor-1982 .elementor-element.elementor-element-ffef49a .otx-locmap__meta:not(:has(.otx-locmap__address)) { display: none; } /* ========================================================================== Batch 2 (chrome and locations builder, Oct. 8, 2026) Same audit, same rules: each rule names its finding ID; selectors add classes to Elementor's own so they win from this earlier-loading file without !important, except where noted. ========================================================================== */ /* GLB-04: the mobile menu toggle (header 14, mega menu d101c5e; shown at 1024 px and below) was a 20x20 tap target, and on tap or focus the kit's button:focus rule gave it a 2 px orange border. The border grew the toggle to 24 px after Elementor had measured where to place the panel, so the open panel sat 4 px off the left edge with a strip of page on the right. - 12 px padding makes a 44x44 target; the matching -12 px margin keeps its layout box at 20x20, so the icon stays exactly where the approved header has it. - No border in any state; a focus ring only for keyboard focus (:focus-visible). - The widget stretches to the header row's height and its nav fills it, so the panel's top:100% is the row's content bottom; 10 px more (6c72ef1's bottom padding) puts the panel at the header's bottom edge instead of over the logo tagline. Measured on Local: panel top = header bottom at 390, 768 and 1024 px, and when the toggle wraps under the logo at 320 px. */ .elementor-14 .elementor-element.elementor-element-d101c5e.elementor-element.elementor-widget { --align-self: stretch; align-self: stretch; --n-menu-toggle-icon-distance-from-dropdown: 10px; } .elementor-14 .elementor-element.elementor-element-d101c5e > .e-n-menu { height: 100%; justify-content: center; /* the nav is a column: keeps the toggle mid-row, as before */ } .elementor-14 .elementor-element.elementor-element-d101c5e .e-n-menu-toggle, .elementor-14 .elementor-element.elementor-element-d101c5e .e-n-menu-toggle:hover, .elementor-14 .elementor-element.elementor-element-d101c5e .e-n-menu-toggle:focus { padding: 12px; margin: -12px; border: 0; } /* The kit turns a focused button's text orange, so the ring takes the kit's text color (#222E3F, 14:1 on the white header) rather than currentColor. */ .elementor-14 .elementor-element.elementor-element-d101c5e .e-n-menu-toggle:focus-visible { outline: 2px solid var(--e-global-color-text, #222e3f); outline-offset: -4px; } /* GLB-05: the landing-page H1 (pages 7319 to 7322, one heading widget each) kept its 48 px custom size on tablets and phones: six lines and 288 px tall on North Texas Orthopedics at 390 px, so Find Your Doctor sat below the first screen. 36 px at 1024 px and below is the kit's own H1 size there. Desktop keeps 48 px. */ @media (max-width: 1024px) { .elementor-7319 .elementor-element.elementor-element-676517b.elementor-widget .elementor-heading-title, .elementor-7320 .elementor-element.elementor-element-8b888f0.elementor-widget .elementor-heading-title, .elementor-7321 .elementor-element.elementor-element-ae63232.elementor-widget .elementor-heading-title, .elementor-7322 .elementor-element.elementor-element-bd22d11.elementor-widget .elementor-heading-title { font-size: 36px; } } /* -------------------------------------------------------------------------- Locations archive (template 303, loop 292); also embedded on Home -------------------------------------------------------------------------- */ /* LOC-06: the tablet and phone gutters saved on the intro (505c737) and the filter, map and cards row (541a35a), 30 px and 20 px, were never written to the CSS (their top and bottom were left blank), so phones kept the desktop's 40 px. Write the saved left and right values; top and bottom keep the desktop values, as before. */ @media (max-width: 1024px) { .elementor-303 .elementor-element.elementor-element-505c737.e-con, .elementor-303 .elementor-element.elementor-element-541a35a.e-con { --padding-left: 30px; --padding-right: 30px; } } @media (max-width: 767px) { .elementor-303 .elementor-element.elementor-element-505c737.e-con, .elementor-303 .elementor-element.elementor-element-541a35a.e-con { --padding-left: 20px; --padding-right: 20px; } } /* LOC-06: the filter column (18c33fb) has a 10 px left padding that its own custom CSS meant to remove, but that rule's selector is misspelled (.element-18c33fb), so the filters sat 10 px further in than the map and cards at every width. This is the rule it meant. */ .elementor-303 .elementor-element.elementor-element-18c33fb.e-con { --padding-left: 0px; } /* LOC-06: on phones the six facility pills stacked one per row (334 px), pushing the first location to y 1,631. One row that scrolls sideways; a pill cut at the right edge shows there is more. The 2 px padding (4 px below), offset by the negative margin, keeps pill edges and keyboard focus rings from being clipped by the scroll box. On a ?facility= view a small footer script in includes/locations.php scrolls the selected pill into view. */ @media (max-width: 767px) { .elementor-303 .elementor-element-otxlf01 .otx-pillar .otx-locfilter__facets { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; margin: -2px -2px 0; scrollbar-width: thin; } .elementor-303 .elementor-element-otxlf01 .otx-pillar .otx-locfilter__facets > li { flex-shrink: 0; } .elementor-303 .elementor-element-otxlf01 .otx-pillar .otx-locfilter__facet { white-space: nowrap; } } /* LOC-07: from 768 to 1024 px the archive showed one card per row: loop 7708c2f's own custom CSS sets grid-template-columns:2fr !important there, which is a single track. Two equal columns, the loop's saved tablet setting. Its custom CSS uses !important, so this has to as well. */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-303 .elementor-element.elementor-element-7708c2f .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* LOC-08: on narrow cards phone numbers and times broke mid-value ("(817) 375-" then "5310", "5:00" then "pm"). includes/locations.php wraps each number and time on the location card's hours (2e708ff) and phone (577ef8c) rows in this span. */ .elementor-292 .otx-nowrap { white-space: nowrap; } /* Location phone links (Andrew Foreman, Oct. 14, 2026): includes/locations.php makes each phone number in a location_phone list a tel: link. The link keeps the number on one line, so a narrow contact column never splits it ("(972) 420-" then "1776"). */ a.otx-tel { white-space: nowrap; } /* The location page's phone list (1fe2974) prints each number in its own span after the label. Fax numbers are not links, so the same rule goes on that span: under Flower Mound's spelled-out labels ("Orthopedic Associates Fax:") a fax number broke across two lines on phones. */ .elementor-1982 .elementor-element-1fe2974 .otx-repeater-format__item > span:last-child { white-space: nowrap; } /* -------------------------------------------------------------------------- Location pages (template 1982) -------------------------------------------------------------------------- */ /* LOC-R2: the location H1 (193391d) kept its 48 px custom size on phones, so "City — Area" titles wrapped to three or four lines. 36 px on phones, the kit's mobile H1 size. */ @media (max-width: 767px) { .elementor-1982 .elementor-element.elementor-element-193391d.elementor-widget .elementor-heading-title { font-size: 36px; } } /* LOC-R3: the office details column (7aa007c) was vertically centered against the 500 px map (row bacb670), so the section heading started at a different height on each page (8 px below the map top on Grapevine, 73 px on Mansfield PT). Top-align the two columns where they sit side by side (768 px and up). On phones the row is a column and is unchanged. */ @media (min-width: 768px) { .elementor-1982 .elementor-element.elementor-element-bacb670.e-con { --align-items: flex-start; } } /* ========================================================================== Batch 3 (Oct. 9, 2026): Blake's rulings on the design decisions (OTX discovery/2026-10-09-design-decisions.md). Each rule names its decision ID and finding ID. ========================================================================== */ /* D4 (LST-R4): each listing archive gets one H2 right above its loop grid, so the outline goes H1 > H2 > H3 card titles. The H2 is for screen readers only: "Providers" (551, widget otxd4551), "Physical therapists" (3529, otxd43529), "Resources" (526, otxd4526) and "Articles" (7121, otxd47121), added by tools/staged/s-text-fixes.php with Elementor's elementor-screen-only class. That class alone leaves the widget in the flex flow (Elementor's widget rules keep it position:relative), which adds one 20 px gap above the grid; this takes it out of the flow so nothing on screen moves. Element-ID selectors outrank Elementor's widget and container rules, so no !important. The staged script refuses to add the headings unless this rule is live. top: auto undoes elementor-screen-only's top: -10000em, which parked the heading about 179,000 px above the page; a screen reader that scrolls to what it reads (iOS VoiceOver) would jump to the top. With auto offsets the clipped 1 px box stays where the grid starts. */ .elementor-551 .elementor-element.elementor-element-otxd4551.elementor-widget, .elementor-3529 .elementor-element.elementor-element-otxd43529.elementor-widget, .elementor-526 .elementor-element.elementor-element-otxd4526.elementor-widget, .elementor-7121 .elementor-element.elementor-element-otxd47121.elementor-widget { position: absolute; top: auto; left: auto; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }