/** * The Bootstrap utilities published content still depends on. * * COMPANION TO bootstrap-bridge.css, and the same failure in a second place. * That file restored the three behaviours that need JavaScript; these are the * ones that were only ever CSS, and they fail the same way round - INVERTED. * `.d-none` stops hiding. `.sr-only` stops being screen-reader-only. * `.embed-responsive` stops holding a video's aspect ratio. `.table-responsive` * stops scrolling and starts pushing the page sideways instead. * * WHAT THAT LOOKS LIKE, measured in Chrome on staging 2026-09-05 at build * 5e7c3f5, on /cause-funds/health-fund/: two `

` elements * computing `display: block` at 76px each, reading "Breadcrumb Start - DO NOT * EDIT THIS SECTION" and "Breadcrumb End - DO NOT EDIT THIS SECTION". Editorial * scaffolding, written to be invisible, rendering as two headings on every one * of the fourteen published objects that carry it. * * The theme did define `.d-none`, which is why a search for "is this class * styled" answered yes and the defect survived: the rule is * `.b26-pledge-form .d-none`, scoped to one form. A class that is styled * SOMEWHERE is not a class that works. * * WHY `!important` IS CORRECT HERE and nowhere else in this theme. These are * utilities: the whole contract of `.d-none` is that it beats whatever the * component says, which is why Bootstrap ships them that way and why the * content was written expecting it. An un-important `.d-none` loses to * `.b26-prose h3 { display: block }` and hides nothing. * * SCOPE. Only the utilities published content actually uses, counted 2026-09-05 * over every published object (probes/orphan-classes.py): d-none 14, d-flex 17, * d-block 9, embed-responsive 10, table-responsive 11, the Bootstrap 3 * hidden and visible pairs 2 each, sr-only 2. * * SECOND SECTION, ADDED 2026-09-05. The grid, the spacing scale and the two * layout components are now here too, in "the layout vocabulary" below, and * the paragraph that used to say they were deliberately absent has been * removed rather than left standing - it was true when it was written and is * not true now. They arrive with their own frequency count and their own * reasons; read that section's header, not this one, for what it does and does * not cover. The Bootstrap COMPONENTS (carousel, card, nav, modal, button) are * still not here: the collapse and modal half lives in bootstrap-bridge.css and * the button half in the theme's own 65-legacy-content.css. * * Two spellings live side by side because the content does: `d-*` is * Bootstrap 4 and `hidden-*` / `visible-*-block` is Bootstrap 3. Their * breakpoints differ and both are reproduced as their own library defined them, * not harmonised - harmonising would move content that has sat still for years. */ /* ------------------------------------------------------- display, Bootstrap 4 * * Breakpoints are Bootstrap 4's own: sm 576, md 768, lg 992, xl 1200, and each * is min-width, so `d-md-none` hides from 768 up. */ .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } @media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-flex { display: flex !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-md-inline-block { display: inline-block !important; } .d-md-flex { display: flex !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-flex { display: flex !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-block { display: block !important; } .d-xl-flex { display: flex !important; } } /* ------------------------------------------- responsive display, Bootstrap 3 * * A different scheme, not a different spelling of the same one: Bootstrap 3's * `hidden-md` hides only BETWEEN 992 and 1199, where 4's `d-md-none` hides from * 768 upward. The two are reproduced separately for that reason. */ @media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } /* `visible-*-block` shows ONLY inside its own band, so the default is hidden and each query turns one band back on. Without the default the class does nothing at all, which is the state this file is fixing. */ .visible-sm-block, .visible-md-block, .visible-lg-block { display: none !important; } @media (min-width: 768px) and (max-width: 991.98px) { .visible-sm-block { display: block !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-md-block { display: block !important; } } @media (min-width: 1200px) { .visible-lg-block { display: block !important; } } /* ---------------------------------------------------------------- sr-only * * Clipped rather than `display: none`, which is the whole point: the text has * to stay in the accessibility tree. Without this rule it is neither hidden nor * announced differently - it is simply visible copy. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------- responsive embeds * * The ratio comes from the padding-top on the wrapper, so an embed with no * rule collapses to whatever intrinsic height the iframe declares - usually * 150px, sometimes zero. */ .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .embed-responsive::before { display: block; content: ""; } .embed-responsive-16by9::before { padding-top: 56.25%; } .embed-responsive-4by3::before { padding-top: 75%; } .embed-responsive-21by9::before { padding-top: 42.857143%; } .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------- responsive tables * * The wide-content rule the theme already applies to its own tables, given to * the class the content uses. Without it a wide table widens the document and * the page scrolls sideways - which the theme's own overflow guard is there to * prevent, and which content markup can defeat from the inside. */ .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================= * THE LAYOUT VOCABULARY published content writes by hand. * ========================================================================= * * A DIFFERENT FAILURE FROM THE ONE ABOVE. The display utilities fail INVERTED: * something written to be invisible becomes visible. These fail the ordinary * way round and are therefore easy to see and easy to under-diagnose - a * two-column form becomes one long column, and it still reads, so it looks * like a design choice rather than a missing stylesheet. * * MEASURED, not assumed. Every class token inside class= in published * post_content and in every meta row of every published object, counted by * distinct objects, on the local mirror on 2026-09-05. 215 published objects * carry grid or layout markup. The three reported pages are in that set and * each was read at source before anything here was written: * * /advisor/ 12919, 13715 form-row, col-md-4, col-md-6, form-check, * form-check-input, form-control, media * /au-eofy-receipt/ 17639 form-row, col-md-6, form-control * /app/ 7722 row, col-md-2, col-md-3, col-md-4, col-md-6 * * On /advisor/ the markup is a raw Salesforce web-to-lead form stored in an ACF * text field: four "form-row" wrappers each holding two "form-group col-md-4" * fields. With no rule behind either name the wrappers are plain blocks and the * eight fields stack. That is the whole defect. * * THE COUNTS, and every class below has one. The number is distinct PUBLISHED * OBJECTS using it, so a class here is never speculative: * * text-center 100 mb-5 86 row 53 form-control 48 form-row 47 mt-4 44 * col-md-6 43 mb-1 40 media 39 media-body 39 col-md-4 38 form-check 37 * form-check-input 35 col-md-12 34 mt-5 34 container 20 mb-2 16 * col-md-3 16 align-items-center 11 text-nowrap 10 p-5 9 py-md-4 9 * mb-3 8 col-md-2 8 pt-4 7 py-md-5 7 py-3 7 col-md-9 7 mt-2 7 * offset-md-1 6 pull-right 6 col-md-8 5 col-lg-4 4 col-md-7 4 mt-3 4 * w-100 4 center-block 4 col-12 3 text-left 3 h-100 3 col-xl-12 3 * col-sm-12 3 col-sm-7 3 float-left 3 offset-1 2 col-md-5 2 ml-4 2 * col-6 2 col-10 2 col-2 2 col-sm-5 2 float-sm-right 2 offset-6 2 * pl-2 2 and twelve more at 1 (mb-0, my-4, my-5, ml-2, ml-5, mr-2, mr-5, * mx-4, mx-auto, p-3, pl-1, py-5, w-50, w-75, col-4, col-lg-2, col-lg-3, * col-sm-6, offset-md-2, offset-md-3, col-xs-2, col-xs-10, justify-content-center) * * WHAT IS DELIBERATELY NOT RESTORED, because a restore that fights the 2026 * design is worse than the gap it closes: * * form-group 48 objects, and one declaration in Bootstrap: margin-bottom * 1rem. The theme already owns that rhythm where these forms * actually live - forms.css sets * ".tlycs-ajax-form-holder .form-group + .form-group" to * --b26-space-5 on the FOLLOWING sibling precisely because * there is no bottom margin. Adding one would double the gap * on every CF7 form on the site. On /advisor/ every * "form-group" also carries an mb-N class, which is restored, * so nothing is lost there either. * * input-group 37 objects, 36 of which are CF7 form bodies - and CF7 renders * inside one of the two scopes the theme deliberately * neutralises. pledge.css gives ".b26-pledge-form .input-group" * a margin and nothing else, i.e. it means them to stack; * Bootstrap's display:flex would put label and field side by * side and break that page. One object outside those scopes is * not worth it. * * form-control restored in its LAYOUT half only - width, nothing else. * 65-legacy-content.css already dresses ".b26-page * .form-control" in this theme's colours, border, radius and * padding, and deliberately does not set a width, which is why * an input carrying size="20" still renders 20 characters wide * inside a 50% column. Bootstrap's own rule also carries * #495057 text, a #ced4da border and a 1rem font - old-brand * values that must not come back. * * form-check-label 11 objects, and "margin-bottom: 0" is all it is. Label * rhythm belongs to the theme. * * everything with zero content usage - col-lg-6, col-lg-8, offset-lg-N, * order-N, flex-N, clearfix, text-right, text-uppercase, p-0, * px-4, container-fluid, no-gutters, row-cols-N, position-N, * align-self-N. They are all over the PREVIOUS theme's own * templates, which this theme does not ship, and nowhere in * what editors wrote. A rule for a class nobody uses is dead * weight that the next reader has to disprove. * * HOW THESE ARE KEPT FROM WINNING AGAINST DELIBERATE 2026 STYLING, which is the * part that would be easy to get wrong. Two scopes already flatten this grid on * purpose and both do it with a DESCENDANT selector, specificity (0,2,0): * * forms.css .tlycs-ajax-form-holder .row, .input-group, [class*="col-"] * pledge.css .b26-pledge-form .container, .row, [class^="col-"] * * Every rule below is a BARE single class, (0,1,0). It therefore loses to both * of those on specificity alone, in every source order, and no !important is * used anywhere in this section to change that. That is the entire mechanism: * the restore is deliberately the weakest thing in the cascade, so any 2026 * rule that has an opinion still wins. The one exception is the pair of rules * at the very end, which EXTEND that flattening rather than fight it. * * NO !important HERE, unlike the display utilities above and unlike Bootstrap * itself. Bootstrap ships every utility important because it must beat its own * components; there are no Bootstrap components on this site to beat. This file * is enqueued after the theme bundle, so a genuine (0,1,0) tie already resolves * in its favour, and anything the theme states more specifically should win. * * VALUES ARE THE REAL ONES, copied from the previous theme's own Bootstrap at * themes/tlycs/assets/vendor/bootstrap/dist/css/bootstrap.css - v4.6.1, * compiled with stock grid variables (app.scss imports bootstrap before the * theme's own variables, so no override reached it). Gutter 30px, hence the * 15px halves; form gutter 10px, hence the 5px halves; breakpoints 576 / 768 / * 992 / 1200; container 540 / 720 / 960 / 1140; spacer 1rem giving * 0, .25, .5, 1, 1.5, 3rem. Column widths are n/12 to six decimal places, which * is what Bootstrap emits and what the test re-derives arithmetically. * * LAYOUT ONLY. Not one declaration in this section names a colour, a font, a * radius or a shadow. The 2026 system owns all of those, including on this * markup. * * DELIVERY IS GATED, AND THE GATE WAS THE HALF THAT DID NOT WORK. These rules * reach a page only when inc/assets.php enqueues this file, and that entry * answers to a marker list which, when this section was first written, was * still the display-utility list - d-none, d-flex, sr-only, embed-responsive. * Measured then: of the objects carrying the markup below, it fired on 32. * /advisor/, /au-eofy-receipt/ and /app/ loaded nothing, so the stylesheet was * correct and absent, which looks exactly like a stylesheet that is wrong. * * The grid and form markers were added in the same batch. Re-measured against * published post_content afterwards: of 72 objects that need these rules, 32 * were served before and 70 are served now. That is a floor rather than the * figure - tlycs26_stored_markup_has() also scans every string meta value, and * this count read post_content alone. * * THE MARKERS ARE NOT SIMPLY THE CLASS NAMES, and the reason belongs here * because it looks like an inconsistency from the assets.php side. The matcher * is a plain strpos over stored content, so `row` matches arrow, grow and * browse, and `p-` and `w-` match almost anything; a marker that fires on every * page does not cost 2 KB, it retires the gate. So `row` is listed only in its * three quoted shapes and the spacing steps are listed with their digits. * `form-group` is deliberately NOT a marker and NOT a rule: forms.css already * sets that rhythm on the following sibling, and restoring Bootstrap's * margin-bottom would double the gap on every CF7 form. */ /* ------------------------------------------------------------ the container * * width, padding, auto margins, then one max-width per breakpoint. Inside a * measure narrower than 540px the max-widths never bite and this is simply a * block with 15px of side padding, which is what the markup expected. */ .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } /* ----------------------------------------------------------------- the rows * * The negative margin is the other half of the column padding: 15px in on each * column, 15px back out on the row, so the outer edges line up with the text * above. "form-row" is the same idea at the tighter 10px form gutter, and it is * the class the /advisor/ and /au-eofy-receipt/ forms are built from. */ .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } /* ------------------------------------------------------- the columns, shared * * Bootstrap gives this base to every column class it defines. The list here is * the RESTORED classes spelled out rather than an [class*="col-"] attribute * match, deliberately: the previous theme also shipped col-left, col-right and * col-separate, and an attribute match would hand 15px of padding to those too. */ .col-2, .col-4, .col-6, .col-10, .col-12, .col-xs-2, .col-xs-10, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-xl-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } /* The tighter gutter for a form row. This one IS the attribute match, because it is Bootstrap's own declaration and because it has to reach a column class this file did not restore if content ever grows one. */ .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; } /* ------------------------------------------------ the columns, at every width * * n/12 as a percentage, to six decimal places, exactly as Bootstrap emits it. * The unprefixed set applies from zero up; each prefixed set from its own * breakpoint up. col-xs-N is Bootstrap 3 spelling for the same zero-up tier - * two objects still use it, and it is given the Bootstrap 4 flex shape rather * than 3's float so that it composes with the col-md-N classes beside it in the * same row. */ .col-2, .col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-10, .col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; } .col-12 { flex: 0 0 100%; max-width: 100%; } @media (min-width: 576px) { .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; } .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 992px) { .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 1200px) { .col-xl-12 { flex: 0 0 100%; max-width: 100%; } } /* --------------------------------------------------------------- the offsets * * The same n/12 fraction, as a left margin. Unprefixed applies from zero up; * the md set from 768 up. */ .offset-1 { margin-left: 8.333333%; } .offset-6 { margin-left: 50%; } @media (min-width: 768px) { .offset-md-1 { margin-left: 8.333333%; } .offset-md-2 { margin-left: 16.666667%; } .offset-md-3 { margin-left: 25%; } } /* ------------------------------------------------------- flex alignment * * Only the two the content uses. They do nothing unless the element is already * a flex container, which on this site means a "row" or a "d-flex" above. */ .align-items-center { align-items: center; } .justify-content-center { justify-content: center; } /* -------------------------------------------------------- the media object * * Bootstrap 4's two-part figure-beside-text block, on 39 objects. Two * declarations in total, and both are layout. */ .media { display: flex; align-items: flex-start; } .media-body { flex: 1; } /* ------------------------------------------------------------- text and flow * * Alignment and wrapping only. No colour, no size, no weight - "text-" in * Bootstrap 4 is two unrelated families and only the alignment one is here. */ .text-center { text-align: center; } .text-left { text-align: left; } .text-nowrap { white-space: nowrap; } /* Floats. The Bootstrap 4 spelling and the Bootstrap 3 one both appear in content and both are reproduced; they are the same declaration under two names, which is why they share a rule rather than being harmonised. */ .float-left, .pull-left { float: left; } .pull-right { float: right; } @media (min-width: 576px) { .float-sm-right { float: right; } } /* Bootstrap 3's centred block, still on four objects. */ .center-block { display: block; margin-right: auto; margin-left: auto; } /* ---------------------------------------------------------------- sizing */ .w-50 { width: 50%; } .w-75 { width: 75%; } .w-100 { width: 100%; } .h-100 { height: 100%; } /* --------------------------------------------------------- the spacing scale * * WRITTEN IN BRAND STEPS, and the values did not change to get there. * * Bootstrap 4's scale is 0, .25, .5, 1, 1.5 and 3rem - 0, 4, 8, 16, 24 and 48px * at a 16px root. Every one of those lands EXACTLY on a step of --b26-space-N: * 4 is space-1, 8 is space-2, 16 is space-4, 24 is space-6, 48 is space-9. So * the tokens below are not a restyle; they say out loud what the numbers * already were, which is what makes a future drift a test failure instead of * something noticed by eye. * * WHAT THE PREVIOUS COMMENT HERE CLAIMED, and why it was wrong. It said the * previous theme never overrode this scale. It does. Measured in * themes/tlycs/assets/css/app.min.css: that bundle carries a SECOND spacing * scale concatenated after Bootstrap's own, and it wins with !important on a * 3px step - .mb-1 3px, .mb-2 6px, .mb-3 9px, .mb-4 12px, .mb-5 15px, * .mt-5 15px, and .p-5 15px overriding an earlier .p-5 of 3rem in the same * file. Production therefore renders .mb-5 at 15px where this renders 48px. * * THAT DIFFERENCE IS INTENDED (Sandro, 2026-09-06: spacing follows the new * brand's philosophy). None of 3, 6, 9 or 15 is a value on the brand scale - * only 12 coincides, at space-3 - so following the previous theme's numbers * would mean carrying a scale the brand does not have. It is a real change and * a large one: .mb-5 alone sits on 86 published objects, more than any grid * class on the site, and it triples there. * * WRITTEN AS PLAIN VALUES ON PURPOSE, not as --b26-space-N. This layer answers * to the previous theme's class names and restores LAYOUT ONLY - no colour, no * type, no token - so that the 2026 design system can move without changing * what legacy content renders as. Naming the tokens here was tried and * reverted: it changed nothing on screen, because the values already coincide, * and it bought that nothing at the price of the isolation. The coincidence is * asserted by test instead, which is where it belongs. * * Only the steps content actually writes are here. */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .my-5 { margin-top: 3rem; margin-bottom: 3rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1.5rem; } .ml-5 { margin-left: 3rem; } .mr-2 { margin-right: 0.5rem; } .mr-5 { margin-right: 3rem; } .mx-4 { margin-right: 1.5rem; margin-left: 1.5rem; } .mx-auto { margin-right: auto; margin-left: auto; } .p-3 { padding: 1rem; } .p-5 { padding: 3rem; } .pt-4 { padding-top: 1.5rem; } .pl-1 { padding-left: 0.25rem; } .pl-2 { padding-left: 0.5rem; } .py-3 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 3rem; padding-bottom: 3rem; } @media (min-width: 768px) { .py-md-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-md-5 { padding-top: 3rem; padding-bottom: 3rem; } } /* ----------------------------------------------------- the form field layout * * The WIDTH half of Bootstrap's form field and nothing else. Without it an * input carrying size="20" is twenty characters wide inside its column, which * is what makes a restored two-column form still look wrong. The colour, the * border, the radius and the font are already this theme's, set on * ".b26-page .form-control" at (0,2,0) in 65-legacy-content.css, and none of * them is repeated here. */ .form-control { width: 100%; max-width: 100%; } /* The checkbox hanging indent: the box sits in the 1.25rem gutter and the label text runs flush. Position, margin and padding only - the checkbox's own appearance is the theme's, and every scoped rule it has (".b26-check input", ".b26-form .wpcf7-acceptance input") is more specific than this and still wins. */ .form-check { position: relative; display: block; padding-left: 1.25rem; } .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } /* ------------------------------------ finishing the theme's own flattening * * THE ONLY TWO RULES HERE THAT ARE NOT BARE CLASSES, and they exist to protect * a 2026 decision rather than to override one. * * forms.css flattens the grid inside a CF7 form on purpose - ".row", * ".input-group" and "[class*=col-]" all become plain blocks with no margin and * no padding. It does not list "container" or "form-row", because until now * nothing styled those names either. Measured 2026-09-05 across the 36 CF7 form * bodies: three carry "container". Restoring the grid site-wide would hand * those three a max-width and 30px of side padding, and would hand any future * "form-row" a -10px bleed with no column padding to pay it back, which is a * horizontal overflow the theme has a guard against. * * So the two names are flattened here to the same values forms.css already * uses. Specificity is (0,2,0), the same as the rules being completed, and this * file loads after the bundle, so the tie resolves here - which is the correct * direction only because the values agree with the theme's stated intent. */ .tlycs-ajax-form-holder .container, .tlycs-ajax-form-holder .form-row { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; }