/* ==========================================================================
   WORDPRESS + ELEMENTOR BRIDGE

   Nothing in this file changes the NIYO design. It only reconciles the
   design's own assumptions — body is a flex column, the header is fixed and
   its height is reserved as body padding — with the extra wrappers
   WordPress, Hello Elementor and Elementor Pro put on the page.

   If a rule here is doing visual work rather than reconciling, it belongs in
   one of the four design stylesheets instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ADMIN BAR
   The design reserves --h-header as body padding and pins .header to top: 0.
   The admin bar sits above both, so both offsets move by its height.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
  body.admin-bar { padding-top: calc(var(--h-header) + 46px); }
  body.admin-bar .header { top: 46px; }
  html { scroll-padding-top: calc(var(--h-header) + 46px + 8px); }
}
@media screen and (min-width: 783px) {
  body.admin-bar { padding-top: calc(var(--h-header) + 32px); }
  body.admin-bar .header { top: 32px; }
  html { scroll-padding-top: calc(var(--h-header) + 32px + 8px); }
}

/* --------------------------------------------------------------------------
   2. ELEMENTOR LOCATION WRAPPERS
   Elementor wraps every Theme Builder template in a div. Those divs would
   become the flex children of body instead of .header / .page / .footer, so
   the footer would stop sitting at the bottom of short pages. display:contents
   passes them through and leaves the design's own flex rules in charge.
   -------------------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer { display: contents; }

/* With the location wrappers passing through, Elementor's own container is
   what body sees as a flex item — not .header or .footer. The design gave both
   of those `flex: none`, and that rule now lands on an element that is no
   longer a flex item, so the intent is restored one level out. Without this the
   footer is allowed to shrink and its columns compress on short pages. */
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* The content locations are the flex-growing middle, matching .page */
.elementor-location-single,
.elementor-location-archive,
main.site-main { flex: 1 0 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   3. HELLO ELEMENTOR RESETS
   The parent theme ships a light layout of its own. The NIYO shell owns the
   measure and the rhythm, so the parent's container must not add a second
   max-width or a second gutter on top.
   -------------------------------------------------------------------------- */
.site-header,
.site-footer { display: none; }

.page-content > .entry-content,
.site-main > .page-content { max-width: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   4. ELEMENTOR CONTAINERS INSIDE THE NIYO SHELL
   Sections built in Elementor sit inside .band / .page__inner, which already
   carry the shell width and the gutter. A boxed Elementor container would
   apply both again and the columns would drift narrower than the design.
   -------------------------------------------------------------------------- */
.page__inner > .e-con,
.band__inner > .e-con,
.footer__inner > .e-con {
  --container-max-width: 100%;
  --container-default-padding-inline: 0px;
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

/* Elementor widgets inherit the design's type, not the kit's defaults */
.niyo-widget > .elementor-widget-container { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   5. WORDPRESS CORE CLASSES INSIDE ARTICLE BODIES
   -------------------------------------------------------------------------- */
.alignleft  { float: left;  margin: 0 var(--sp-6) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. FEATURED IMAGES INSIDE THE DESIGN'S PICTURE FRAMES
   .pic is a gradient placeholder in the standalone build. With a real
   featured image behind it the gradient becomes the loading state and the
   photograph covers it, so the framing and aspect ratios stay identical.
   -------------------------------------------------------------------------- */
.pic > img,
.pic__inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}