/* Sitekit V2 — glue only. Everything else is Elementor settings. */

/* Hello Elementor prints its own header/footer above canvas templates. */
body.page header.site-header,
body.page footer.site-footer { display: none !important; }

/* Sticky needs clip, never hidden (PROTOCOL §7). */
html, body { overflow-x: clip; }

/* The video poster is a stand-in for a real video embed; make it obvious it
   is clickable while it is still an image. */
.sk-video-placeholder { cursor: pointer; }

/* Hero collage fades out at the bottom (per the mockup). Done as a mask on the
   image rather than a white gradient overlay, so it still works if the section
   ever gets a background. Not an Elementor setting — its mask control takes
   shape images, not gradients — so this earns its place in the glue file. */
.sk-hero-art img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 99%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Quote glyph — an IMAGE exported from the frame, not a font character.
   (The previous rule here was written for a text glyph and forced a 58px box
   height, which squashed the artwork and spilled it over the paragraph.) */
.sk-quote-mark { margin-bottom: 19px !important; }
.sk-quote-mark img { width: 84px; height: auto; display: block; }
@media (max-width: 767px) { .sk-quote-mark img { width: 74px; } }

/* Partner logos: normalise wildly different source aspect ratios. */
.sk-partner-cell img { max-height: 78px; width: auto; object-fit: contain; }

/* ── System tiles ──────────────────────────────────────────────────────────
   Three independent layers (photo / colour wash / accent boxes) so the photo
   can be swapped on its own. Every colour and the photo are Elementor
   settings; only the stacking and the hover live here, because Elementor has
   no control for greyscaling an image on a parent's hover.
   Box geometry is taken from the frame: the top-right accent spans 63.5%→100%
   horizontally and 0→40% vertically of a 510×358 tile; the bottom-left one
   spans 0→29.6% and 72%→100%. */
/* Frame overhangs on the Justice tile: photo x113–623 y1915–2273 inside a
   union of x95–640 y1907–2297 → 18 left / 17 right / 8 top / 24 bottom.
   Scaled to our wider container: 20 / 19 / 9 / 27. */
.sk-tile { position: relative; overflow: visible;
  --sk-inset-t: 9px; --sk-inset-r: 19px; --sk-inset-b: 27px; --sk-inset-l: 20px; }
.sk-tile > .e-con-inner { position: static; }

/* The photo sits INSET; the accent boxes are flush to the tile edge, so they
   overhang the photo on the outer sides exactly as the frame draws them
   (measured overhang: 17–19px on a 510px-wide photo). */
.sk-tile__photo,
.sk-tile__tint {
  position: absolute !important;
  inset: var(--sk-inset-t) var(--sk-inset-r) var(--sk-inset-b) var(--sk-inset-l);
  width: auto; height: auto;
  margin: 0; padding: 0;
}
.sk-tile__photo { z-index: 1; }
.sk-tile__tint  { z-index: 2; opacity: .5; transition: opacity .45s ease; }

.sk-tile__photo .elementor-widget-image,
.sk-tile__photo .elementor-widget-container,
.sk-tile__photo figure { height: 100%; margin: 0; }
.sk-tile__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .45s ease;
}

.sk-tile__box {
  position: absolute !important;
  z-index: 3;
  border: 8px solid #fff;
  margin: 0; padding: 0;
}
.sk-tile__box--tr { top: 0; right: 0;   width: 38.5%; height: 40%; }
.sk-tile__box--bl { bottom: 0; left: 0; width: 32.5%; height: 34%; }
@media (max-width: 767px) {
  .sk-tile { --sk-inset-t: 7px; --sk-inset-r: 14px; --sk-inset-b: 20px; --sk-inset-l: 15px; }
}

.sk-tile__label {
  position: relative; z-index: 4;
  padding: 0 20px;
  text-shadow: 0 1px 10px rgba(0,0,0,.25);
}

/* Default = washed + greyscale. Hover = wash clears, photo goes full colour. */
.sk-tile:hover .sk-tile__tint { opacity: 0; }
.sk-tile:hover .sk-tile__photo img { filter: grayscale(0); }

/* Touch devices get no real hover — keep the designed default state. */
@media (hover: none) {
  .sk-tile:hover .sk-tile__tint { opacity: .5; }
  .sk-tile:hover .sk-tile__photo img { filter: grayscale(1); }
}

/* The framework heading is sized to fit one line at desktop; stop a stray
   breakpoint from wrapping it mid-phrase. */
@media (min-width: 1025px) {
  .sk-nowrap-desktop .elementor-heading-title { white-space: nowrap; }
}

/* ── Mobile navigation ─────────────────────────────────────────────────────
   The panel's CONTENT is all native widgets; this handles only the reveal.
   Elementor's nav-menu dropdown can hold menu items and nothing else, which is
   why the panel is ours: the frame puts a donate button, phone, address and
   social icons in there too.

   There is ONE button. The header sits above the panel in z-order and its
   background/logo drop away when open, so the toggle occupies exactly the same
   pixels whether the menu is open or closed — it just morphs into an X.
   (Show/hide of the nav, donate button, toggle and panel is done with
   Elementor's own hide_desktop/hide_tablet/hide_mobile controls, not classes;
   a bare class loses the specificity fight with Elementor's generated CSS.) */
.sk-mnav-toggle {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  width: 30px; height: 30px; justify-content: center;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
}
.sk-mnav-toggle:hover,
.sk-mnav-toggle:focus,
.sk-mnav-toggle:active { background: none; outline: none; }
.sk-mnav-toggle:focus-visible { outline: 2px solid #082B81; outline-offset: 4px; }
.sk-mnav-toggle span {
  display: block; height: 2px; background: #082B81;
  transition: transform .3s ease, opacity .2s ease, width .3s ease,
              margin .3s ease, background-color .3s ease;
}
.sk-mnav-toggle span:nth-child(1) { width: 15px; }
.sk-mnav-toggle span:nth-child(2) { width: 30px; }
.sk-mnav-toggle span:nth-child(3) { width: 15px; margin-right: 15px; }

@media (max-width: 1024px) {
  .sk-header { position: relative; z-index: 9995; }
  body.sk-mnav-open .sk-header { background-color: transparent !important; }
  body.sk-mnav-open .sk-header .sk-logo { opacity: 0; pointer-events: none; }
  .sk-header .sk-logo { transition: opacity .25s ease; }
  body.sk-mnav-open .sk-mnav-toggle span { background: #FFFFFF; }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(1) {
    width: 30px; transform: translateY(8px) rotate(45deg);
  }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(2) { opacity: 0; }
  body.sk-mnav-open .sk-mnav-toggle span:nth-child(3) {
    width: 30px; margin-right: 0; transform: translateY(-8px) rotate(-45deg);
  }
}

.sk-mnav {
  position: fixed !important; inset: 0; z-index: 9990;
  /* No `display:flex !important` here — it would beat Elementor's own
     .elementor-hidden-desktop rule and leave the panel in the DOM on desktop.
     Elementor containers are already flex. */
  flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .35s ease, visibility 0s linear .35s;
  visibility: hidden;
}
.sk-mnav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
body.sk-mnav-open { overflow: hidden; }

/* Rhythm is viewport-HEIGHT relative: on a short screen the menu tightens and
   the flexible gap disappears entirely, rather than forcing a scroll. */
.sk-mnav { gap: clamp(4px, 1vh, 14px); }
.sk-mnav__links .elementor-nav-menu a {
  padding-left: 0 !important;
  padding-top: clamp(3px, 1.4vh, 14px) !important;
  padding-bottom: clamp(3px, 1.4vh, 14px) !important;
}
/* Pushes the donate/phone/address/social group to the foot of the panel when
   there is room, and folds to nothing when there is not. Needs !important to
   beat Elementor's per-element margin rule. */
.sk-mnav__cta { margin-top: auto !important; }
/* Flex items shrink by default: on a short screen that squashed the lower
   widgets into each other instead of scrolling. Once the clamps have tightened
   as far as they go, the panel should scroll, not compress. */
.sk-mnav > * { flex-shrink: 0; }
.sk-mnav { flex-wrap: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sk-mnav, .sk-mnav-toggle span { transition: none; }
}