/* ============================================================
   Elementor compatibility layer

   The design system in style.css / v3.css owns all layout and
   styling. This file only neutralises Elementor's own container
   and widget defaults so the original rules apply unchanged.

   Load order matters: this file comes after style.css and v3.css,
   so it must never set a property the design system also sets.
   It sets Elementor's custom properties instead.
   ============================================================ */

/* ---------- Containers ---------- */

/* Elementor drives layout through custom properties. Zero them so the
   design system's own rules decide display, spacing and width. */
.e-con,
.e-con-inner {
  /* Elementor writes a per-element `--display: flex` from its control
     default, in a <style> printed after this file. Forcing the variable
     is safe: rules in style.css/v3.css set `display` directly and still
     win, so .nav-row stays flex and .split stays grid. */
  --display: block !important;
  --gap: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
}

/* Containers rendered as <section> keep the design's section rhythm.
   Any element-specific padding in style.css/v3.css still wins, because
   those sheets are declared after Elementor's. */
section.e-con {
  --padding-block-start: var(--section-pad) !important;
  --padding-block-end: var(--section-pad) !important;
}

/* Elementor's boxed inner wrapper is unused (all containers are full
   width), so nothing here should touch max-width: the design system
   sets its own on .section-head, .max-prose and friends. */

/* ---------- Widgets ---------- */

/* Elementor's inter-widget spacing is removed, but the design's own
   paragraph and heading margins must survive: every <p> is the last
   child of its own widget container, so trimming last-child margins
   would strip the vertical rhythm from every section. */
.elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-element { --widgets-spacing: 0px 0px; }

/* ---------- Headings ---------- */

/* The transpiler moves a heading's class and inline style onto the
   Elementor wrapper, so colour must cascade inward. The heading title
   inherits rather than taking the design's `h1..h4 { color }` rule,
   which would otherwise force charcoal onto dark-background heroes. */

.elementor-heading-title { margin: 0 0 .6em; line-height: 1.12; }

/* No per-tag font-size here: the design's own `h1..h4` rules already
   apply to the heading, and restating them at (0,1,1) would tie with
   design rules like `.footer-grid h4` and win on source order. */

.cover-title .elementor-heading-title { font-size: var(--fs-feature); }
.cover-sub .elementor-heading-title { font-size: var(--fs-h3); }

/* ---------- Text editor ---------- */

.elementor-widget-text-editor { font-family: var(--f-body); line-height: 1.7; color: inherit; }

/* ---------- Buttons ---------- */

/* .btn styling belongs on the anchor, so the marker classes sit on the
   widget wrapper and are pushed down onto .elementor-button. */
.is-btn { display: inline-block; }
.is-btn .elementor-widget-container,
.is-btn .elementor-button-wrapper { display: inline; }

.is-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--f-body);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.05em 2.1em;
  border-radius: var(--radius);
  border: 1px solid var(--charcoal);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  line-height: 1.7;
  background: none;
  text-decoration: none;
  fill: currentColor;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.is-btn .elementor-button-content-wrapper { display: contents; }
.is-btn .elementor-button-text { flex-grow: 0; }

.is-btn-primary .elementor-button { background: var(--charcoal); color: var(--ivory); }
.is-btn-primary .elementor-button:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }

.is-btn-outline .elementor-button { background: transparent; color: var(--charcoal); }
.is-btn-outline .elementor-button:hover { background: var(--charcoal); color: var(--ivory); }

.is-btn-gold .elementor-button { background: transparent; border-color: var(--gold); color: var(--gold-deep); }
.is-btn-gold .elementor-button:hover { background: var(--gold); color: var(--white); border-color: var(--gold); }

.is-btn-block,
.is-btn-block .elementor-button { width: 100%; }

/* ---------- Images ---------- */

.elementor-widget-image { line-height: 0; }
.elementor-widget-image img { display: block; max-width: 100%; height: auto; }
.elementor-widget-image figure { margin: 0; }

/* Image widgets standing in for the source's <figure> wrappers. */
.card-media .elementor-widget-image,
.card-media .elementor-widget-image img,
.gallery-item .elementor-widget-image,
.gallery-item .elementor-widget-image img { width: 100%; height: 100%; }
.gallery-item .elementor-widget-image img { object-fit: cover; }

/* ---------- HFE wrappers ---------- */

/* HFE prints its own <header>/<footer>; the design's own elements are
   inside, so the wrappers must not create boxes of their own. */
#masthead > .elementor,
#colophon > .elementor { display: contents; }
#masthead, #colophon { margin: 0; padding: 0; border: 0; }

/* ---------- Editor safety ---------- */

/* Scroll-reveal must never leave content hidden inside the editor. */
.elementor-editor-active .reveal,
.elementor-editor-preview .reveal { opacity: 1 !important; transform: none !important; }

/* Logo sizing belongs to .wordmark img in the design system. */
.wordmark .hfe-site-logo-img,
.wordmark img { height: 30px; width: auto; }
@media (min-width: 768px) { .wordmark img, .wordmark .hfe-site-logo-img { height: 34px; } }
.footer-wordmark img { height: 40px; }


/* ---------- Shortcode widgets that must not create a box ---------- */
/* These widgets stand in for repeated children of a grid or flex
   container. Without display:contents the widget wrapper becomes the
   single grid item and the cards stack instead of laying out. */
.anu-journal-feed,
.anu-journal-feed > .elementor-widget-container,
.anu-nav-holder,
.anu-nav-holder > .elementor-widget-container,
.anu-logo-holder,
.anu-logo-holder > .elementor-widget-container,
.anu-footer-menu,
.anu-footer-menu > .elementor-widget-container,
.anu-footer-logo,
.anu-footer-logo > .elementor-widget-container,
.anu-mobile-holder,
.anu-mobile-holder > .elementor-widget-container { display: contents; }

/* The Shortcode widget adds one more wrapper of its own. */
.anu-journal-feed .elementor-shortcode,
.anu-nav-holder .elementor-shortcode,
.anu-logo-holder .elementor-shortcode,
.anu-footer-menu .elementor-shortcode,
.anu-footer-logo .elementor-shortcode,
.anu-mobile-holder .elementor-shortcode { display: contents; }

/* ---------- .hero-headline: class-based heading rule ---------- */
/* The transpiler moves this class to the widget wrapper. Its font-size
   and `ch`-based max-width must resolve against the heading's own font,
   so they are re-applied to the title and neutralised on the wrapper. */
.elementor-widget-heading.hero-headline { max-width: none; font-size: inherit; }
.hero-headline .elementor-heading-title {
  font-size: var(--fs-hero);
  color: var(--white);
  max-width: 15ch;
}
.hero-v4-copy .hero-headline .elementor-heading-title,
.hero-v3 .hero-headline .elementor-heading-title { color: var(--white); }

/* Elementor container gap. layout-authority.css loads after this and
   restores every gap the design actually declares. */
.e-con.e-flex, .e-con.e-grid, .e-con-inner { gap: 0px; }

/* Elementor sets `.e-con.e-flex { width: 100% }`. Containers the design
   marks as non-flexing must size to their content instead. */
.e-con.nav-cta, .e-con.hero-actions, .e-con.wordmark { width: auto; }

/* ---------- Hello Elementor reset opt-outs ---------- */
/* The source build loads no CSS reset, so elements it never styles must
   inherit from the design system rather than take Hello's defaults. */
figcaption { line-height: 1.7; }

/* Hello's reset pins label line-height to 1 and form controls to 1.5.
   The source build has no reset, so both inherit the body's 1.7. */
label { line-height: 1.7; vertical-align: baseline; }
button, input, optgroup, select, textarea { line-height: normal; }