/** * The footer — one content edge, and the type the mockup asks for (D-096). * * WHAT WAS WRONG. Measured on the rendered clone on 2026-10-10, at a 1440px viewport: * * notice bar content began at x=73 (1280px container, 20px padding) * header content began at x=93 (1280px container, 20px padding) * hero content began at x=93 (1320px container, 40px padding) * sections content began at x=93 (1320px container, 40px padding) * FOOTER content began at x=153 (1140px container, 10px column padding) * * The header, the hero and the landing sections all land on x=93 for the same reason: * 1280 + 2x20 and 1320 + 2x40 both leave 1240px of content, which is the mockup's own * --maxw:1320px / --pad:clamp(16px,4.5vw,40px) arithmetic. The footer used Elementor's * Site Settings default of 1140px instead, so its text sat 60px further in than everything * above it — on both sides at once, which is what "the footer does not line up" looks like. * * THREE MORE THINGS WERE WRONG, and they are the same family as D-094 and D-095: * 1. the footer's headings render in "Commissioner" and its brand paragraph in "Open Sans", * while the mockup uses the system UI stack everywhere; * 2. the theme's `letter-spacing: 1px` is INHERITED by every heading and every link, so the * whole footer was spaced out (the mockup sets -.02em on headings, nothing on links); * 3. the link rows measured 24px, and 21px for the LAST link in each column — below the * 24px minimum WCAG 2.2 "Target Size (Minimum)" asks for. The mockup's rows are 33px. * * WHY THIS IS A STYLESHEET AND NOT AN ELEMENTOR EDIT: width, spacing and type are styling, and * the project's rule (D-074) is that only page structure and text move into Elementor. Nothing * in the footer template is touched by this file, so removing the `require_once` line for it in * `functions.php` restores the previous footer exactly. The footer's CONTENTS are untouched and * stay editable in Elementor exactly as before. * * Every rule is scoped to `.elementor-location-footer.elementor-334`, so it cannot repaint * anything else on the shop. * * @package irankynas-child */ /* --------------------------------------------------------------------------- 1. ONE CONTENT EDGE — the alignment fix --------------------------------------------------------------------------- */ .elementor-location-footer { /* The same value the hero and the landing sections use. Keep the three in step. */ --irkn-page-pad: clamp(16px, 4.5vw, 40px); } /* * The column gap is what makes the arithmetic in rule 3 non-obvious, so it is pinned first. * Elementor builds that gap from 10px of padding on each column's inner wrapper, and drops it * to 0 on phones. Pinning it to 10px means one formula then works at every width. */ .elementor-location-footer.elementor-334 .elementor-section .elementor-column > .elementor-widget-wrap { padding-left: 10px; padding-right: 10px; } /* * The sections carry 20px of their own side padding below 1024px, which would sit OUTSIDE the * calculation in rule 3 and push the columns back in. Zeroing it is safe: the padding is * symmetric, so centring is unaffected. * * Four classes, not two, and that is deliberate: Elementor's generated stylesheet sets this * padding from a three-class rule inside a media query, and a media query adds no specificity — * so an equal-specificity rule here would silently lose below 1024px. */ .elementor-location-footer.elementor-334 > .elementor-section.elementor-top-section { padding-left: 0; padding-right: 0; } /* * Now the content edge can be stated once. * * content edge = (viewport - container) / 2 + container padding + 10px column padding * * Setting the container to the mockup's 1320px and its padding to (page padding - 10px) makes * that equal to the header's and the hero's content edge at EVERY width: * * desktop : (W - 1320) / 2 + 30 + 10 = (W - 1320) / 2 + 40 <- the hero's own formula * phone : 0 + 6 + 10 = the page padding <- the container no longer binds * * The "- 10px" is the column gap pinned in rule 2. It is not a rounding error; do not round it off. */ .elementor-location-footer.elementor-334 .elementor-section-boxed > .elementor-container { max-width: 1320px; padding-left: calc(var(--irkn-page-pad) - 10px); padding-right: calc(var(--irkn-page-pad) - 10px); } /* --------------------------------------------------------------------------- 2. COLUMN PROPORTIONS --------------------------------------------------------------------------- */ /* * The four columns were 37% / 23% / 20% / 20%. At 1440px that gave the brand column 422px for * one sentence, and left the contact column 228px for seven rows — which is why the address * wrapped over four lines. The mockup's own proportions are 1.3fr / 1fr / 1fr / 1.2fr, which is * 28.9% / 22.2% / 22.2% / 26.7% of the available width, and that is what these are. * * The columns are addressed by position rather than by their Elementor element ids, so the * widths survive the owner dragging a column into a different order. The SECTION is addressed * by its id class; if he ever deletes and rebuilds that section these rules simply stop * applying, the footer keeps working, and only the proportions revert. */ @media (min-width: 1081px) { .elementor-location-footer.elementor-334 .elementor-element-34bc9e > .elementor-container > .elementor-column:nth-child(1) { width: 28.9%; } .elementor-location-footer.elementor-334 .elementor-element-34bc9e > .elementor-container > .elementor-column:nth-child(2) { width: 22.2%; } .elementor-location-footer.elementor-334 .elementor-element-34bc9e > .elementor-container > .elementor-column:nth-child(3) { width: 22.2%; } .elementor-location-footer.elementor-334 .elementor-element-34bc9e > .elementor-container > .elementor-column:nth-child(4) { width: 26.7%; } } /* --------------------------------------------------------------------------- 3. TWO COLUMNS ON A TABLET --------------------------------------------------------------------------- */ /* * The mockup goes 4 columns above 1080px, 2 between 681 and 1080, and 1 below 681. * The shop held 4 columns all the way down to 768px, which squeezed the contact column into * roughly 150px and wrapped the address over about eight lines. Elementor already stacks the * columns below 768px, so this only adds the 2-column middle step the mockup asks for. */ @media (min-width: 681px) and (max-width: 1080px) { .elementor-location-footer.elementor-334 .elementor-element-34bc9e > .elementor-container > .elementor-column { width: 50%; } } /* --------------------------------------------------------------------------- 4. TYPE --------------------------------------------------------------------------- */ /* * The mockup declares its font stack once, on ``. The theme declares "Commissioner" on * the footer's headings and "Open Sans" on its brand paragraph — and a rule set directly on an * element beats an inherited one, so declaring the right stack on the wrapper would leave two * fonts on the page (D-094). Hence the stack is declared on the elements that carry text. * * `letter-spacing` is reset for the same reason: the theme sets 1px and it INHERITS, so every * heading and every link in the footer was spaced out. On a 14px link that reads as a different * typeface and a different size, which is exactly the false alarm D-095 took a session to unpick. * * WHY `!important`, AND WHY ONLY HERE. Measured after the first attempt: letter-spacing took * effect but the fonts did not, because Elementor's generated stylesheet names the font on * specific widget ids — `.elementor-334 .elementor-element.elementor-element-b48800f * .elementor-heading-title` is four classes deep, deeper than any selector that can usefully * cover a whole footer subtree. `footer.css` loads AFTER that stylesheet, so the alternative * would be to name all seven of the footer's widget ids and keep them in step with the builder * by hand — which breaks silently the first time a widget is re-added. The three declarations * are the only `!important` that apply to the footer as it ships, and they cannot reach outside * `.elementor-location-footer`. **Section 6, the optional white treatment, adds more — but only inside * `.irkn-footer-light`, so with that switch off they do nothing at all.** * * The icon wrapper is deliberately NOT in this list: forcing a font-family on it would take the * glyph font away from any icon added later. The footer's lists are text-only today. */ .elementor-location-footer.elementor-334, .elementor-location-footer.elementor-334 .elementor-heading-title, .elementor-location-footer.elementor-334 .elementor-widget-text-editor, .elementor-location-footer.elementor-334 .elementor-icon-list-text, .elementor-location-footer.elementor-334 .elementor-icon-list-item a, .elementor-location-footer.elementor-334 p { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* --------------------------------------------------------------------------- 5. LINK ROWS --------------------------------------------------------------------------- */ /* * Measured before the fix: rows 24px tall, and 21px for the last link in each column. 24px is * exactly the floor WCAG 2.2 "Target Size (Minimum)" asks for and 21px is under it — Elementor * drops the row's bottom padding on `:last-child`, which is why only the last row was short. * * The mockup's rows are 33px (a 23.2px line plus 5px of padding each side). These are 33px too: * the shop's line-height here is 21px, so 6px of padding each side. * * 33px is deliberately not 44px. 44px is the touch-size recommendation and the mockup uses 33px, * which the owner approved; a seven-row contact list at 44px per row would be over 300px of links. */ .elementor-location-footer.elementor-334 .elementor-icon-list-item { padding-bottom: 0; } .elementor-location-footer.elementor-334 .elementor-icon-list-item > a, .elementor-location-footer.elementor-334 .elementor-icon-list-item > .elementor-icon-list-text { display: block; padding-top: 6px; padding-bottom: 6px; } /* * --------------------------------------------------------------------------- * --------------------------------------------------------------------------- * 6. THE 4B FOOTER TREATMENT — OPTIONAL, OFF BY DEFAULT * --------------------------------------------------------------------------- * * The mockup's footer is WHITE; the shop's is a navy block (`#001c38`). That is a restyle rather than * the alignment the owner asked for, and **design is his to approve**, so it is not applied by default. * It is supplied as a switch instead: **Appearance -> Customize -> Poraštė**, off until he chooses it. * The reasoning is the same as the header's own switch (D-080), and so is the arrangement: ticking it * changes the look, unticking it restores the navy footer, and no stored data is touched either way. * * WHY HERE AND NOT IN ELEMENTOR. The footer's colours already live in the Elementor template, so * changing them there is the "pure" route and it keeps them in the owner's own tool. This route was * chosen because it keeps a decision that has not been made yet out of stored data, and because the * whole thing can be withdrawn by deleting one `require_once` line. **Once he has chosen, the six values * listed at the bottom of this file can be moved into the template and this whole section retired** — * that is the intended end state, not a permanent override. * * NOTHING about the footer's words or its links changes here. Copy is the owner's, always. * * Every value is the mockup's own: white background, `--line` hairline, `--muted` labels, `--ink2` text. * * WHY `!important`: these have to beat Elementor's generated stylesheet *and* rule 4 above, which is * itself `!important`. Among `!important` declarations specificity decides, and `.irkn-footer-light` * adds a class to every selector here. Every rule is scoped to `.irkn-footer-light`, so **with the * switch off this entire section does nothing.** This is the only place in this file where more * `!important` was added, and the note in rule 4 is amended accordingly. */ .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-element.elementor-element-34bc9e, .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-element.elementor-element-36c11d4f { background-color: #ffffff !important; } .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-element.elementor-element-36c11d4f { border-top-color: #e4e8f2 !important; } /* * The four headings of the navy block, and only those four — the scoping to the FIRST section is * deliberate, because the bar below holds the copyright line, which the mockup leaves in sentence case * at 13.5px. Uppercasing that too would have produced `© 2026 MB “ĮRANKYNAS”`. * * SIZE changes here and nowhere else in the footer. The owner has asked before about sizes that did not * match the mockup (D-095), and this is the one place the two genuinely differ: the shop's brand heading * is 34px and its other three are 18px, where the mockup has four identical 13px labels. */ .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-element-34bc9e .elementor-heading-title { font-size: 13px !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: #7d8aa3 !important; } /* Body text and links — the mockup's `--ink2`. */ .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-widget-text-editor, .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-icon-list-text { color: #43506a !important; } /* * The hover colour has to be restated, and this is not decoration. Elementor paints a hovered link * brand blue from a rule WITHOUT `!important` — so the declaration above, which has it, would have kept * every link the same colour on hover and the footer would have lost its only hover feedback in this * mode. Caught by measuring the switch ON rather than by assuming a colour rule is harmless. * * The same variable Elementor uses is reused here, so the hover colour is whatever the kit's primary is * and cannot drift from the navy version. The mockup's own footer does the same thing (`a:hover` -> blue). */ .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-icon-list-item:hover .elementor-icon-list-text, .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-icon-list-item:hover a { color: var(--e-global-color-primary) !important; } /* The copyright line — the mockup's `--muted`. Size and case are left exactly as they are. */ .irkn-footer-light .elementor-location-footer.elementor-334 .elementor-element-df0fce6 .elementor-heading-title { color: #7d8aa3 !important; } /* * --------------------------------------------------------------------------- * STILL THE OWNER'S, AND WHY * --------------------------------------------------------------------------- * * THE WORDING IS HIS. The mockup heads its third column *Naudingos nuorodos* where the shop says *Apie * Mus*, and its second *Kategorijos* where the shop says *Prekių Katalogas*. Both are readable and * neither is a defect, so neither was changed. The switch above changes how the headings LOOK and never * what they say. * * THE MOCKUP'S QUOTE CHARACTERS ARE NOT ENFORCED. The footer's contact column and the copyright line use * `“ ”` (U+201C/U+201D); the mockup uses the Lithuanian pair `„ ”`. Unifying them is one edit in two * places, and it is a typography decision rather than a fault (O-45). */