/* Theme Name: Notts Osteo Theme URI: https://www.nottsosteopathy.co.uk/ Description: Child theme of Hello Elementor for the Notts Osteopathy rebuild. Holds template overrides and menu registration only — all widget and component logic lives in the notts-osteo-elements plugin. Author: Sean Burn Template: hello-elementor Version: 1.0.0 Text Domain: notts-osteo */ /* Almost empty, on purpose. * * Styles belong to the plugin, next to the components they style, so a component and its * CSS move together. Putting them here instead would split every widget across two * codebases and make the plugin non-portable. * * What belongs here is page STRUCTURE — layout of the document itself, which no single * widget owns and none should be reaching out to change. */ /* Sticky footer. * * Elementor's header, content and footer are siblings directly under , and nothing * makes the content take up the slack. On a page whose content is shorter than the screen * the footer therefore stops wherever the content stopped, leaving the viewport blank * beneath it — which reads as "space after the footer". * * A column flex body with the footer pushed down by auto margin fixes it for every page at * once. The footer keeps its natural height; only the gap moves. */ body { display: flex; flex-direction: column; min-height: 100vh; } body > .elementor-location-footer { margin-top: auto; } /* WordPress already reserves the admin bar's height with an html margin, so a flat 100vh here would overshoot by exactly that much and add a phantom scrollbar on every page. */ body.admin-bar { min-height: calc(100vh - 32px); } @media screen and (max-width: 782px) { body.admin-bar { min-height: calc(100vh - 46px); } } /* Elementor container flex-wrap on mobile. * * Below 768px Elementor redefines `--flex-wrap: var(--flex-wrap-mobile)` on every flex * container, and `--flex-wrap-mobile` only exists on containers where "Wrap" has been ticked * individually. Everywhere else the variable is undefined, which leaves the flex-wrap * declaration referencing nothing and the container laying out with large unexplained gaps * between its children. Sean found it by unticking Wrap in the editor, which removes the * declaration rather than the value. * * Supplying the missing DEFAULT rather than overriding flex-wrap outright: a container that * genuinely wants to wrap gets `--flex-wrap-mobile: wrap` written at element-id specificity, * which still beats this. Forcing `flex-wrap: nowrap` here would have broken those. */ @media (max-width: 767px) { .e-con.e-flex { --flex-wrap-mobile: nowrap; } }