/*
 * Stop Elementor styling anything.
 *
 * grata.css is the design. Elementor's job here is to hold sections in order
 * and let you edit the markup inside them — not to decide widths, padding,
 * backgrounds or type. Left to itself it wraps every widget in a container
 * with default padding and a max-width from the Global Kit, which is why the
 * page kept picking up spacing and colours from somewhere nobody could find.
 *
 * !important is deliberate here. Elementor writes per-element rules into a
 * generated stylesheet with high specificity, and this file has to win against
 * whatever is in the database — including settings from a previous theme's kit
 * that we do not control.
 *
 * This is scoped to the containers and wrappers Elementor generates. It does
 * not touch anything inside the HTML widgets, so grata.css is unaffected.
 */

/* --- containers and section wrappers ---------------------------------- */
.elementor .e-con,
.elementor .e-con-inner,
.elementor .e-parent,
.elementor .e-child,
.elementor-section,
.elementor-section .elementor-container,
.elementor-column,
.elementor-widget-wrap {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	gap: 0 !important;
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--container-max-width: none;
}

/* --- the HTML widget itself ------------------------------------------- */
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container,
.elementor-widget,
.elementor-widget:not(:last-child) {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

/* --- the page wrapper Elementor puts around the content ---------------- */
.elementor-page .site-main,
.elementor-page .page-content,
.elementor-template-full-width .site-main,
.elementor > .elementor-element,
.elementor-location-single .page-content,
.elementor-location-header,
.elementor-location-footer {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/*
 * Hello Elementor's own container. The parent theme constrains content to a
 * fixed width; grata.css does its own wrapping with .wrap, so this would
 * double up and shrink every section.
 */
.site-header,
.site-footer,
.site-main > .container,
.page-content > .container {
	max-width: none !important;
	padding: 0 !important;
}

/*
 * Elementor's normalising reset sets things like `img { display: block }` and
 * a base line-height on the body. Those are fine. What is not fine is its
 * default typography landing on our headings — grata.css sets font, size,
 * weight and spacing on every element it cares about, so anything Elementor
 * adds is either redundant or wrong. Reassert inheritance inside our markup.
 */
.elementor-widget-html h1,
.elementor-widget-html h2,
.elementor-widget-html h3,
.elementor-widget-html h4,
.elementor-widget-html p,
.elementor-widget-html a,
.elementor-widget-html li,
.elementor-widget-html span {
	font-family: inherit;
	letter-spacing: inherit;
}

/* Elementor hides the theme page title with its own rule; ours has none. */
.elementor-page .entry-title,
.elementor-page .page-header {
	display: none !important;
}