/* elementor-bridge.css — make the gnt-* classes reach Elementor's inner elements.
   Loaded LAST (see inc/enqueue.php), because it completes the component files and
   has to sit after Elementor's own stylesheets.

   ============================================================================
   THE SPECIFICITY FACT THIS FILE EXISTS FOR — read before adding anything
   ============================================================================

   Elementor's per-page stylesheet, uploads/elementor/css/post-<id>.css, is enqueued
   AFTER every stylesheet this theme registers. It contains rules built from the kit's
   globals, applied directly to the inner element:

       .elementor-widget-heading .elementor-heading-title { color: …; font-weight: … }
       .elementor-widget-text-editor                     { color: … }
       .elementor-widget-button .elementor-button        { background-color: … }
       .elementor-widget-accordion .elementor-active .elementor-accordion-title { color: … }

   `.elementor-widget-heading .elementor-heading-title` is TWO CLASSES — 0,2,0.

   The first version of this file used `[class*="gnt-"] .elementor-heading-title`,
   believing the Elementor rule to be 0,1,1. An attribute selector weighs the same as
   a class, so that selector is also 0,2,0 — an exact tie, decided by load order,
   which Elementor wins. The consequence shipped: the homepage h1 took
   `--e-global-color-primary` and rendered NAVY ON THE NAVY HERO. Invisible. Every
   HTML-level check passed, because the element and its class were both present.

   So: ANY rule here that must beat Elementor needs specificity STRICTLY GREATER than
   0,2,0. The reliable pattern is to compound a second class onto the ancestor —
   `.gnt-hero .elementor-widget .elementor-heading-title` is 0,3,0 — and every rule
   below is annotated with what it computes to.

   The other half of the fix is not here at all: bin/apply-content.php sets the kit
   globals, so the DEFAULT that Elementor applies is already correct. That is why this
   file only handles the exceptions — dark grounds, and weights the components set
   themselves — rather than trying to out-specify Elementor everywhere. Fighting the
   builder on every element is how stylesheets rot.
   ============================================================================ */

/* ------------------------------------------------- headings: unopposed properties */

/* The kit sets only colour, font-family and font-weight on a heading. Size, leading
   and tracking are untouched by it, so 0,2,0 is enough here and these inherit from
   whichever gnt-* wrapper encloses them — which is what lets the component files keep
   styling the wrapper and stay readable. */
[class*="gnt-"] .elementor-heading-title {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Weight IS opposed — the kit writes --e-global-typography-primary-font-weight onto
   the element. 0,3,0 so a component that asks for 700 display or 600 section headings
   actually gets it. */
.elementor-widget[class*="gnt-"] .elementor-heading-title {
	font-weight: inherit;
	color: inherit;
}

/* --------------------------------------------------------------- body copy */

/* The text widget renders its field directly inside the wrapper. A single paragraph
   typed in the editor comes back wrapped in <p>, whose default margins fight the
   spacing the wrapper class sets. Zeroing only first and last keeps multi-paragraph
   fields reading correctly. */
.elementor-widget-text-editor > p:first-child { margin-top: 0; }
.elementor-widget-text-editor > p:last-child  { margin-bottom: 0; }

/* The kit sets colour on .elementor-widget-text-editor itself at 0,1,0, and a
   component rule on the wrapper class is also 0,1,0 — a tie Elementor wins. 0,2,0
   here restores inheritance so the component (or the ground it sits on) decides. */
.elementor-element.elementor-widget-text-editor[class*="gnt-"] {
	color: inherit;
}

/* ------------------------------------------------------- dark grounds */

/* The exceptions the kit cannot express: white type on navy. Every selector here is
   0,3,0 or better, because the kit's element-level rules are 0,2,0 and load later.
   This is the rule that was missing when the hero headline disappeared. */

.gnt-hero .elementor-widget .elementor-heading-title,
.gnt-pagehero .elementor-widget .elementor-heading-title,
.gnt-cta .elementor-widget .elementor-heading-title,
.gnt-section--dark .elementor-widget .elementor-heading-title,
.gnt-footer .elementor-widget .elementor-heading-title {
	color: var(--color-text-inverse);
}

.gnt-hero .elementor-element.elementor-widget-text-editor,
.gnt-pagehero .elementor-element.elementor-widget-text-editor,
.gnt-cta .elementor-element.elementor-widget-text-editor,
.gnt-section--dark .elementor-element.elementor-widget-text-editor,
.gnt-footer .elementor-element.elementor-widget-text-editor {
	color: var(--color-text-inverse);
}

/* ------------------------------------------------------ photographs */

/* media.css styles .gnt-media__img, the prototype's own class on the <img>. Elementor's
   image widget emits a bare <img>, so the panel classes go on the widget and the image
   is reached from there.

   The radius reset undoes a value rather than setting one: the kit ships
   .elementor-kit-12 img{border-radius:20px} at 0,1,1, and every panel already clips its
   own corners with overflow:hidden, so an inner radius shows as a gap at each corner.
   0,2,1 here beats it on specificity rather than on load order. */
.elementor-element.gnt-media img {
	border-radius: 0;
}

/* ------------------------------------------------------- containers */

/* Elementor's containers carry the kit's padding and gap through custom properties.
   We use none of its spacing controls, so nothing is written inline for these and a
   stylesheet rule wins — but the properties have to be zeroed rather than the
   shorthand, because .e-con reads its padding through them.

   If a padding or gap control is ever set in the builder it goes to the element's
   style attribute, where no stylesheet can reach it. That is why those controls are
   left empty in inc/content/*.json. */
.e-con[class*="gnt-"] {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	--gap: 0;
	--row-gap: 0;
	--column-gap: 0;
}

/* Elementor's container defaults to a flex COLUMN. Any container of ours that wants a
   row has to say so through --flex-direction as well as flex-direction, because
   .e-con reads the custom property. Without this the two hero buttons stacked
   vertically instead of sitting side by side — visible on the shipped homepage, and
   invisible to any check that only looked at the markup. */
.e-con.gnt-hero__actions,
.e-con.gnt-pagehero__actions,
.e-con.gnt-cta__inner,
.e-con.gnt-header__bar,
.e-con.gnt-footer__grid {
	--flex-direction: row;
}

/* Deliberately no blanket display or width rule. Every container in inc/content/*.json
   is authored content_width:full, so Elementor never imposes a boxed max-width and
   .gnt-container supplies the real one. Display is left to the component files, which
   need grid in some places and flex in others. */