/* ==========================================================================
   WordPress + Elementor overrides. Loaded last, only on the landing page.
   Everything here exists because of the host page, not the design.
   ========================================================================== */

/* Elementor Canvas still emits section / container / column wrappers around
   the widget. They add a max-width and padding the page already does itself,
   so the hero would sit in a narrow column with a gutter down both sides.

   !important here is correct and not lazy. Elementor sets the width with
   .elementor-section.elementor-section-boxed > .elementor-container, which is
   specificity (0,3,0) and beats anything sensible we can write. Nothing of
   ours competes for these properties, because the page's own styles never
   target .elementor-* at all, so there is nothing for this to trample. */
.sk-landing-page .elementor-section-wrap,
.sk-landing-page .elementor-section,
.sk-landing-page .elementor-section.elementor-section-boxed > .elementor-container,
.sk-landing-page .elementor-container,
.sk-landing-page .elementor-column,
.sk-landing-page .elementor-column-wrap,
.sk-landing-page .elementor-widget-wrap,
.sk-landing-page .elementor-widget,
.sk-landing-page .elementor-widget-html,
.sk-landing-page .elementor-widget-shortcode,
.sk-landing-page .elementor-widget-container,
.sk-landing-page .e-con,
.sk-landing-page .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Elementor also drives widths from custom properties on newer containers. */
.sk-landing-page {
  --container-max-width: none;
  --content-width: none;
}

/* The site header is position:fixed at top:0. The WordPress admin bar sits
   in that exact space, so for logged-in admins the header hides underneath
   it. Visitors never see this; you will, every time you check the page. */
.admin-bar #siteHeader { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #siteHeader { top: 46px; }
}

/* Some themes set a background or min-height on .page / .site-main that
   shows through beneath the footer. */
.sk-landing-page,
.sk-landing-page .site-main {
  background: var(--bone);
}

/* ==========================================================================
   Undoing Elementor's Global Fonts and Global Colors, on this page only.

   Elementor writes its globals onto bare element selectors:

       .elementor-kit-9 h1,...,h6 { color:#01002B; font-family:Inter;
                                    font-size:43px; text-transform:capitalize }
       .elementor-kit-9 a         { color:#212224 }
       .elementor-kit-9 button    { background:#212224; color:#fff;
                                    padding:15px 35px; border-radius:30px }

   This page's headings and links carry no colour of their own: they inherit it
   from the dark section wrapped around them. An inherited value loses to any
   directly matching rule, so without this block every heading came out dark
   navy on black and every button grew a grey pill background.

   Putting them back to `inherit` is what Tailwind Preflight already does, and
   what the design was built against.

   NOTE: deliberately no !important anywhere below. These sit at (0,1,1), the
   same weight as Elementor's own rules, and win on load order. The page's real
   styles are scoped to (0,2,0) and win on specificity. Adding !important here
   would invert that and flatten the page's own padding and type.
   ========================================================================== */

.sk-landing-page h1,
.sk-landing-page h2,
.sk-landing-page h3,
.sk-landing-page h4,
.sk-landing-page h5,
.sk-landing-page h6 {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
}

.sk-landing-page a {
  color: inherit;
  text-decoration: inherit;
}

.sk-landing-page p,
.sk-landing-page li,
.sk-landing-page span,
.sk-landing-page small,
.sk-landing-page strong,
.sk-landing-page cite,
.sk-landing-page legend,
.sk-landing-page label {
  color: inherit;
  font-family: inherit;
  text-transform: none;
}

/* Elementor styles every button as its own component. The page has its own
   button system, so these go back to the neutral state Preflight leaves. */
.sk-landing-page button,
.sk-landing-page input[type="button"],
.sk-landing-page input[type="submit"],
.sk-landing-page input,
.sk-landing-page select,
.sk-landing-page textarea {
  background-color: transparent;
  background-image: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* The header lockup is a fixed-height image. Themes set img{height:auto}
   globally, and Elementor adds its own image rules. */
.sk-landing-page img,
.sk-landing-page svg,
.sk-landing-page video {
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}