/* ==========================================================
   WARM STONE — APPROVED HERO
   hashgachapratit.org · implemented 2026-08-20 to the owner's exact spec.

   ONLY this variant. No rotation. No other themes.
   Existing icon and existing Hebrew artwork are used untouched.
   ========================================================== */

.hashgachaHero.warmStoneHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  min-height: 100svh;

  margin: 0;
  padding: 0;

  background: #eee2c8;
  color: #201810;
}

/* The header on this site is sticky and occupies layout space above the hero.
   The spec's padding-top values are measured from the TOP OF THE VIEWPORT with
   the header overlaid, so the hero is pulled up underneath it. */
.hashgachaHero.warmStoneHero {
  margin-top: calc(-1 * var(--header-h, 96px));
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

.warmStoneBackdrop {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;

  background:
    radial-gradient(
      ellipse 72% 52% at 50% 26%,
      rgba(255, 255, 244, 0.95),
      rgba(248, 237, 207, 0.46) 46%,
      transparent 74%
    ),
    linear-gradient(
      180deg,
      #f6efdc 0%,
      #eee0c3 54%,
      #d3b68c 100%
    );
}

.warmStoneLandscape {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 100%;

  opacity: 0.93;
}

.warmStoneLight {
  position: absolute;

  left: 50%;
  top: -130px;

  width: min(1200px, 90vw);
  height: 750px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255, 255, 245, 0.93) 0%,
      rgba(255, 244, 210, 0.38) 40%,
      rgba(239, 205, 140, 0.10) 63%,
      transparent 75%
    );

  filter: blur(22px);
}

.warmStoneTexture {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0.24;
  mix-blend-mode: multiply;
}

.warmStoneVignette {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(143, 110, 64, 0.07),
      transparent 18%,
      transparent 82%,
      rgba(143, 110, 64, 0.07)
    ),
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(118, 82, 43, 0.10) 100%
    );

  pointer-events: none;
}


/* ==========================================================
   HERO COMPOSITION
   ========================================================== */

.hashgachaHeroInner {
  position: relative;
  z-index: 5;

  width: min(1100px, calc(100% - 40px));

  min-height: 100svh;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  /* THIS IS WHAT FIXES THE MASSIVE DEAD SPACE */
  padding-top: 158px;
  padding-bottom: 54px;
}


/* ==========================================================
   HEBREW ART
   ========================================================== */

.hashgachaHebrewArtWrap {
  position: relative;

  width: min(740px, 69vw);

  /* The supplied PNG carries its own transparent padding — measured from its
     alpha channel: 10.4% above the lettering and 9.3% below. Left as-is that
     padding pushed the headline to 635px, outside the approved 545-590 band,
     and dropped the visible letters below the 145-175 band.
     These negative margins absorb exactly that dead space. The asset itself is
     untouched; this only changes where its box sits. */
  margin: calc(-0.104 * min(740px, 69vw) / 1.5) auto calc(6px - (0.093 * min(740px, 69vw) / 1.5));

  isolation: isolate;
}


/*
  2026-08-20 — the hero artwork is now a TRANSPARENT PNG supplied by the owner.

  Everything that used to live here existed only to hide the old JPG's baked-in
  rectangular background: mask-image, -webkit-mask-image, sepia, brightness and
  contrast tricks, and artificial edge feathering. All of it has been removed.
  The asset needs none of it. Do not reintroduce any of it.
*/

.hashgachaHebrewArtWrap::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 7%;
  right: 7%;
  top: 4%;
  bottom: 2%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 246, 213, 0.52),
      rgba(224, 190, 121, 0.12) 48%,
      transparent 72%
    );

  filter: blur(28px);
}

.hashgachaHebrewArt {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  /* A restrained drop-shadow behind the transparent gold lettering. Nothing
     else — no sepia, no brightness or contrast correction. The old JPG needed
     those; this asset does not. */
  filter: drop-shadow(0 16px 28px rgba(97, 67, 30, 0.18));
}


/* ==========================================================
   HEADLINE
   ========================================================== */

.hashgachaHeroTitle {
  position: relative;
  z-index: 8;

  max-width: 920px;

  margin:
    -2px
    auto
    0;

  padding: 0;

  color: #201810;

  font-family:
    "Cormorant Garamond",
    "Iowan Old Style",
    Baskerville,
    Georgia,
    serif;

  font-size: clamp(57px, 4.15vw, 78px);

  line-height: 0.97;
  letter-spacing: -0.043em;
  font-weight: 500;

  text-wrap: balance;
}


/* ==========================================================
   SUBTITLE
   ========================================================== */

.hashgachaHeroSub {
  max-width: 720px;

  margin:
    24px
    auto
    0;

  color: rgba(46, 37, 27, 0.67);

  font-size: clamp(16px, 1.05vw, 19px);

  line-height: 1.72;
  font-weight: 400;

  text-wrap: balance;
}


/* ==========================================================
   DESKTOP — 1920 / 2048 WIDTH AT 100% ZOOM
   ========================================================== */

@media (min-width: 1600px) {

  .hashgachaHeroInner {
    /* 145 not 138: measured at 2048x1070 the artwork landed at 138px,
       just above the approved 145-175 band. */
    /* 161: with the PNG padding absorbed, this puts the VISIBLE letters at
       ~160px (band 145-175) and the headline at ~554px (band 545-590). */
    padding-top: 161px;
  }

  .hashgachaHebrewArtWrap {
    /* 760 box -> ~696px of VISIBLE lettering, inside the approved 680-760 band.
       At 730 the box was in band but the visible letters measured 669. */
    width: 760px;
  }

  .hashgachaHeroTitle {
    font-size: 74px;
  }
}


/* ==========================================================
   MEDIUM
   ========================================================== */

@media (max-width: 1100px) {

  .hashgachaHeroInner {
    padding-top: 130px;
  }

  .hashgachaHebrewArtWrap {
    width: min(700px, 82vw);
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

  .hashgachaHeroInner {
    width: calc(100% - 28px);

    padding-top: 110px;
    padding-bottom: 45px;
  }

  .hashgachaHebrewArtWrap {
    width: 100%;

    margin-bottom: 10px;
  }

  .hashgachaHeroTitle {
    font-size: clamp(43px, 12vw, 58px);

    line-height: 0.99;
  }

  .hashgachaHeroSub {
    margin-top: 20px;

    font-size: 15.5px;
    line-height: 1.62;
  }
}


/* ==========================================================
   HEADER OVER THE WARM STONE HERO
   The existing sticky header sits over a pale ground here, so it
   goes transparent with dark text. Nav functionality untouched.
   ========================================================== */

.site-header.over-hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.site-header.over-hero .brand-name { color: #231c14; }
.site-header.over-hero .nav a { color: rgba(45, 36, 26, .84); }
.site-header.over-hero .nav a:hover { color: #1a140e; background: rgba(120, 90, 40, .12); }
.site-header.over-hero .nav a.cta { background: #a67b25; color: #fff8ec; }
.site-header.over-hero .nav a.cta:hover { background: #8d6717; color: #fff8ec; }
.site-header.over-hero .menu-btn { color: #231c14; border-color: rgba(60, 45, 25, .35); }

@media (max-width: 900px) {
  .site-header.over-hero .nav { background: #f1e8d8; }
}

/* ==========================================================
   THE BACKGROUND ART PLATE
   Added 2026-08-20 by owner decision: the environmental scene is ARTWORK,
   not frontend code. Hand-drawn SVG trees were removed — they read as
   synthetic. A full-bleed, text-free painted plate goes here instead.

   Layer order, bottom to top:
       backdrop gradient  ->  ART PLATE  ->  centre glow + grain
       ->  transparent Hebrew  ->  headline + subtitle  ->  header

   The plate must contain NO Hebrew, NO English, NO logo, NO nav, NO buttons.
   Drop it in as assets/img/warm-stone-plate.webp and the build wires it
   automatically. Until then this section is inert.
   ========================================================== */

.warmStonePlate {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% center;   /* focal point held at centre */

  z-index: 0;

  /* the plate is scenery — it must never compete with the lettering */
  opacity: 0.97;
}

/* When a plate is present the hand-drawn mountains become redundant. The
   gradient sky stays (it carries the colour if the image is slow to arrive);
   the silhouettes are dropped so two landscapes never fight each other. */
.warmStoneBackdrop.hasPlate .warmStoneLandscape {
  display: none;
}

/* Keep the centre illumination and the restrained grain over the plate —
   they are what tie the artwork to the lettering. */
.warmStoneBackdrop.hasPlate .warmStoneLight { z-index: 1; opacity: 0.72; }
.warmStoneBackdrop.hasPlate .warmStoneTexture { z-index: 2; opacity: 0.14; }
.warmStoneBackdrop.hasPlate .warmStoneVignette { z-index: 2; }

/* A soft lift behind the lettering so the Hebrew always sits on a quiet
   field, whatever detail the artwork carries at that point. */
.warmStoneBackdrop.hasPlate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 54% 34% at 50% 30%,
    rgba(255, 252, 240, 0.42),
    rgba(255, 250, 232, 0.16) 45%,
    transparent 72%
  );
}