/* =========================================================
   BRIDGE — loaded LAST. Only what WordPress/Elementor changes about the
   page structure, never design decisions (those live in the prototype CSS).
========================================================= */

/* Theme Builder wraps the header in its own <header class="elementor-location-header">
   whose height is exactly the header's, so the prototype's `position:sticky`
   on .site-header has nothing to stick within. The wrapper sticks instead. */
.ms-site .elementor-location-header{position:sticky;top:0;z-index:100;}
.ms-site .elementor-location-header .site-header{position:relative;top:auto;}
.ms-site.admin-bar .elementor-location-header{top:32px;}
@media (max-width:782px){ .ms-site.admin-bar .elementor-location-header{top:46px;} }
@media (max-width:600px){ .ms-site.admin-bar .elementor-location-header{top:0;} }

/* In the editor, elements are re-rendered after script.js has run, so its
   scroll-reveal never marks them visible. Show everything while editing. */
.elementor-editor-active .reveal,
.elementor-editor-active .hero-in{opacity:1 !important;transform:none !important;animation:none !important;}

/* The mobile-menu button is display:none on desktop, but its widget wrapper
   would still take a flex slot (and a gap) in .header-actions. */
.ms-site .header-actions > .elementor-widget-html:has(> .nav-toggle){display:contents;}

/* Elementor's empty-container placeholder has a min-height of its own. */
.ms-site .ms-raw.e-con.e-empty{min-height:0;}

/* =========================================================
   FORMS — Elementor Pro Form widget inside the prototype's .glass-card.
   The prototype's inputs/select/textarea rules already match Elementor's
   fields (they are plain descendant selectors); what Elementor renders
   differently is the consent row and the submit button, so those two get
   the prototype's `.consent` / `.btn-submit` values here. Keep in sync with
   GLASS FORM CARD in prototype/style.css.
========================================================= */
.ms-site .glass-card .elementor-field-group{margin-bottom:0;}
.ms-site .glass-card .elementor-field-type-acceptance .elementor-field-option{
  display:flex;align-items:flex-start;gap:8px;font-size:.8rem;line-height:1.6;color:rgba(21,16,24,.7);margin-bottom:16px;
}
.ms-site .glass-card .elementor-field-type-acceptance label{cursor:pointer;color:inherit;font-size:inherit;}
.ms-site .glass-card .elementor-field-type-acceptance input{width:auto;flex:none;margin:2px 0 0;padding:0;accent-color:#000;}
.ms-site .glass-card .elementor-field-type-submit .elementor-button{
  width:100%;background:#000;color:var(--yellow);border-radius:12px;padding:1em;font-weight:700;border:0;cursor:pointer;
  font-size:.95rem;line-height:1.6;font-family:var(--font-body);
}
.ms-site .glass-card .elementor-field-type-submit .elementor-button:hover{color:var(--yellow);}
.ms-site .glass-card .elementor-select-wrapper .select-caret-down-wrapper{inset-inline-end:14px;top:calc(50% - 6px);transform:translateY(-50%);fill:rgba(21,16,24,.6);}
.ms-site .glass-card .elementor-message{font-size:.85rem;color:#151018;margin:8px 0 0;}
.ms-site .glass-card .elementor-message.elementor-message-danger{color:#b3261e;}

/* ===== LOGIN PAGE ===== */
/* login.css lifts every direct child of .login-stage (`> *{position:relative}`)
   above the aurora. In the prototype the canvas and HUD are direct children
   and escape that with their own position:absolute; here they sit inside an
   HTML widget wrapper, which would become their containing block (zero
   height), and a flex item that .login-stage's space-between would count.
   display:contents removes the wrapper's box, so .login-stage contains them. */
body.ms-site .login-stage > .elementor-widget.stage-layer{display:contents;}
/* The prototype's flex rows (.stage-top, .stage-foot, .login-topbar) hold bare
   <span>/<a> items, which flex blockifies. Here each sits in a widget wrapper,
   where it would be an inline box on a line of body line-height — a few px
   taller than the item. A flex wrapper blockifies it again. */
body.ms-site :is(.stage-top,.stage-foot,.login-topbar) > .elementor-widget{display:flex;}

/* ===== AM_LANDMARK PAGE ===== */
/* Install steps: the number badge is `.aml-step::before`, but .aml-step is an
   Elementor container, and Elementor uses every container's ::before as its
   background overlay (position:absolute, opacity/border vars). Put it back
   in the flow the prototype drew it in. */
.aml-page .aml-step::before{
  position:static;top:auto;inset-inline-start:auto;
  opacity:1;mix-blend-mode:normal;border:0;transition:none;
}
/* The prototype's `.aml-hero__cta .btn` / `.aml-docs-cta .btn` are flex items;
   here the flex items are the widget wrappers around them. */
.aml-page .aml-docs-cta > .elementor-widget{flex:none;}
/* The prototype's `img[src*="/shots/"]` filter keys off the file path; the
   hero screenshot is a media-library image here, so its URL has no /shots/. */
.aml-page .aml-hero__shot{filter:contrast(1.3) saturate(1.4) brightness(1.08);}
/* "One-time purchase" pill is a Heading widget (span); Elementor gives
   .elementor-heading-title line-height:1, the prototype's span inherits. */
.aml-page .elementor-heading-title.aml-download__free{line-height:inherit;}
@media (max-width:809px){
  .aml-page .aml-hero__cta > .elementor-widget{flex:1 1 auto;}
  .aml-page .aml-docs-cta > .elementor-widget{align-self:stretch;}
  .aml-page :is(.aml-hero__cta,.aml-docs-cta) > .elementor-widget .btn{display:flex;width:100%;justify-content:center;}
}

/* ===== AM_PICKER PAGE ===== */
/* Header brand: the divider, mark and name share one HTML widget; in the
   prototype they are flex items of .amp-brand, so let them be again. */
.amp-page .amp-brand > .elementor-widget-html{display:contents;}
/* The nav toggle is display:none on desktop, but its widget wrapper still
   takes a slot (and a 12px gap) in the .header-actions flex row, pushing the
   Download button 12px in from the container edge. */
.amp-page .header-actions > .elementor-widget-html:has(> .nav-toggle){display:contents;}
/* The prototype's `img[src*="/shots/"]` filter keys off the file path; the
   hero screenshot is a media-library image here, so its URL has no /shots/. */
.amp-page img.amp-hero__shot{filter:contrast(1.32) saturate(1.4) brightness(1.1);}
/* `.amp-hero__cta .btn` / `.amp-docs-cta .btn` were flex items in the
   prototype; here the flex items are the widget wrappers around them. */
.amp-page .amp-docs-cta > .elementor-widget{flex:none;}
/* Download card = [am_download] (AM Downloads plugin). Its fallback sheet
   sets `font:inherit` (so line-height 1.6) on the input and button and fades
   the note; the prototype's card uses the browser's line-height and no fade. */
.amp-page .am-downloads :is(input[type=email],.btn-submit){line-height:normal;}
.amp-page .am-downloads .amp-dlcard__why{opacity:1;}
@media (max-width:809px){
  .amp-page .amp-hero__cta > .elementor-widget{flex:1 1 auto;}
  .amp-page .amp-docs-cta > .elementor-widget{align-self:stretch;}
  .amp-page :is(.amp-hero__cta,.amp-docs-cta) > .elementor-widget .btn{display:flex;width:100%;justify-content:center;}
}