/** * Section8Finder UI corrections — Phase 3A. * * Site-owned stylesheet. Loaded after every parent-theme stylesheet so these * rules win on cascade order without needing !important. * * DO NOT REMOVE without re-testing the header at 375/768/992/1024/1199/1200/ * 1366/1440/1920px. The header rules below correct a measured overlap, not a * cosmetic preference. */ /* --------------------------------------------------------------------------- * 1. Header: logo / tagline / navigation / telephone overlap * * Measured cause (Chrome 153, live page, getBoundingClientRect): * * The main menu's intrinsic width is 975px (7 items x 22px side padding). * The theme allots it .col-lg-9 = 876px at >=1200px. The parent theme's * rule * .header-variation-three .header-bottom { position:absolute; left:48px; right:0 } * resolves against div.row (1168px), NOT against the nav column, and * .zero-horizontal-padding is forced position:static so the column cannot * contain it. The 99px of surplus menu therefore rendered on top of the * logo and tagline instead of wrapping: 244px x 56px of overlap at 1440px, * and the same at 1200/1366/1920px. * * Between 992px and 1199px the layout stacks (col-lg-* is inactive) and the * menu is full width, but .contact-number still floats right on top of the * menu's first row: 135px x 27px of overlap. * * Correction: keep the telephone number on its own line, return .header-bottom * to normal flow so it is structurally confined to its own column, and tighten * the menu padding just enough for seven items to fit on one line. Nothing is * hidden; if the menu ever outgrows its column again it now wraps instead of * overlapping. * ------------------------------------------------------------------------ */ @media (min-width: 992px) { /* Telephone number takes its own right-aligned line, clear of the menu. Scoped to .header-bottom so #mobile-header .contact-number is untouched. */ .header-variation-three .header-bottom .contact-number { float: none; display: block; width: auto; text-align: right; } } @media (min-width: 992px) and (max-width: 1199px) { /* Stacked layout: full container width is available, so only a small reduction is needed to keep all seven items on one row at 992px. */ .site-header #site-main-nav > ul > li > a { padding-left: 16px; padding-right: 16px; } } @media (min-width: 1200px) { /* Return the menu block to normal flow inside .col-lg-9. This is the rule that makes the overlap structurally impossible: the menu can no longer be positioned relative to the row and so cannot reach the logo column. */ .header-variation-three .header-bottom { position: static; top: auto; right: auto; bottom: auto; left: auto; width: auto; } /* .header-top carries margin-bottom:64px from the parent theme. That margin was dead space while .header-bottom was absolutely positioned; now that the menu is back in normal flow it would push the header 64px taller for no reason. Reclaim it. */ .header-variation-three .header-top { margin-bottom: 0; } /* 7 items x (2 x 14px) + 667px of text = 863px, inside the 876px column. */ .site-header #site-main-nav > ul > li > a { padding-left: 14px; padding-right: 14px; } /* The nav column is now taller than the fixed-height logo block, so centre the two against each other instead of leaving the logo floating high. */ .header-variation-three .container > .row { display: flex; align-items: center; } .header-variation-three .container > .row > [class*="col-"] { float: none; } } /* --------------------------------------------------------------------------- * 2. Advertisement label (Phase 3A, item 6) * * The manual AdSense unit sits in an untitled widget directly above widgets * that do have headings, so it read as site furniture. This label is * deliberately quiet: smaller than body text, muted, letter-spaced, and * visually attached to the unit below it rather than styled as a heading. * ------------------------------------------------------------------------ */ /* If AdSense returns no creative the unit collapses to 0px high, which would * leave the label sitting above empty space and no longer describing anything. * Hide it in that case so the label only ever appears attached to a real ad. * :has() is supported by all current browsers; where it is not, the label * simply behaves as before. */ .s8f-ad-label:has( + ins.adsbygoogle[data-ad-status="unfilled"] ) { display: none; } .s8f-ad-label { display: block; margin: 0 0 6px; font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9099; font-weight: 400; } /* --------------------------------------------------------------------------- * 3. Calculator dropdowns — regression mitigation (Phase 3B) * * Repairing the localizeStrings failure let custom.js run past line 215, which * re-enabled the parent theme's blanket `$('select').select2(...)` call. That * converted the Nevada calculator's two dropdowns into select2 widgets sized * at `width: 'off'`, so both stretched to the full 712px form width -- the * household-size field went from 48px to 712px -- and rendered with the * theme's transparent select2 border, inconsistent with the plain bordered * text inputs beside them. * * The form always submitted correctly (select2 keeps the native