/* ==========================================================================
   Chowanki — site footer (loaded on every page, not just the front page)
   ========================================================================== */

/* The actual flex item inside .wp-site-blocks isn't .chowanki-footer
   itself — WordPress wraps every template part (this one included) in its
   own element first, one level further out (confirmed the same way the
   double <header class="wp-block-template-part"><header class="chowanki-
   header">... nesting was confirmed for the header part: view-source on a
   page shows <footer class="wp-block-template-part"><footer class=
   "chowanki-footer">...). margin-top:auto on the INNER .chowanki-footer
   only pushes it down within that outer wrapper — which is exactly as
   tall as .chowanki-footer already is, so it has no free space to eat and
   the auto-margin trick does nothing. The auto margin needs to be on the
   OUTER wrapper, which is the thing actually sitting in .wp-site-blocks'
   flex column next to the content above it. `footer.wp-block-template-
   part` (rather than just `.wp-block-template-part`, which also matches
   the header's own outer wrapper) scopes this to the footer specifically
   — core only uses the <footer> tag for a "footer" area template part. */
footer.wp-block-template-part{
  margin-top:auto;
}

.chowanki-footer{
  font-family:'Manrope', sans-serif;
  background:url('/wp-content/uploads/2026/08/baner-menu.jpg') center/cover no-repeat;
}
/* Belt-and-braces: wpautop (see functions.php) can leave a stray empty <p>
   in the [chowanki_footer] shortcode's rendered output. An empty <p> still
   carries the browser's default paragraph margin, which shows up as an
   unwanted gap — killing it here guarantees no visible effect regardless
   of exactly where in WP's rendering pipeline it gets introduced. */
.chowanki-footer p:empty{
  display:none;
}
/* Separate layer (its own div in functions.php, wrapping .chowanki-footer__inner)
   just for the gradient behind the logo/social/links content — solid at the
   bottom fading to transparent at the top, boosting contrast against the
   busy photo background (chowanki-footer's own background, showing through
   wherever this gradient is transparent) without covering it entirely.
   Kept as its own div rather than a background on .chowanki-footer__inner
   so the gradient is a distinct layer, not mixed into that div's grid
   responsibilities.

   width:fit-content lives HERE now (moved off .chowanki-footer__inner
   below) so this div's own box — which is what the gradient paints — hugs
   just the actual content width instead of stretching edge-to-edge across
   the whole footer/banner. A max-width alone (1400px, tried previously)
   wasn't enough: a block-level div still fills its container's full width
   up to that cap, and most screens are already narrower than 1400px, so
   it never visibly shrank. fit-content instead sizes the box to whatever
   width the grid inside it actually needs. */
.chowanki-footer__gradient{
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  padding:clamp(26px,4vw,42px) clamp(90px,18vw,180px);
  background:hsl(174.41deg 89.94% 35.1%);
  /* Top fade removed per request — left/right only now, solid all the way
     from bottom to top. Single gradient, so plain mask-image is enough;
     no mask-composite needed now that there's only one layer to combine.
     Fade zone widened (was 15%/85%) so the transition is more gradual. */
  mask-image:linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.chowanki-footer__inner{
  padding-bottom:12px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  column-gap:60px;
  row-gap:12px;
}
.chowanki-footer__col--logo{
  grid-column:1;
  grid-row:1;
}
.chowanki-footer__col--logo img{
  height:34px;
  width:auto;
  display:block;
}
.chowanki-footer__col--social{
  grid-column:1;
  grid-row:2;
  display:flex;
  justify-content:center;
  gap:18px;
}
.chowanki-footer__col--social a{
  display:flex;
  transition:transform .2s ease;
}
.chowanki-footer__col--social a:hover{
  transform:scale(1.1);
}
.chowanki-footer__col--social svg{width:26px; height:26px; display:block;}

.chowanki-footer__col--links{
  grid-column:2;
  grid-row:1 / span 2;
  display:grid;
  grid-template-rows:repeat(2, auto);
  grid-auto-flow:column;
  align-items:center;
  column-gap:40px;
  row-gap:10px;
}
.chowanki-footer__col--links a{
  color:#fef2b8;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}
.chowanki-footer__col--links a:hover{
  color:rgb(244, 123, 52);
  text-decoration:underline;
}

/* Now nested inside .chowanki-footer__gradient, as a sibling of
   .chowanki-footer__inner — so it shares that div's gradient/fade
   background instead of sitting on the plain photo background below it.
   padding-top instead of padding-bottom, per request. */
.chowanki-footer__copy{
  border-top:1px solid #fef2b8;
  padding:12px clamp(24px,5vw,48px) 0;
  text-align:center;
  font-size:13px;
  color:#fef2b8;
}
.chowanki-footer__copy-dot{
  margin:0 8px;
  opacity:.8;
}
.chowanki-footer__copy-heart{
  color:#f06292;
}

@media (max-width:760px){
  .chowanki-footer__inner{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    justify-items:center;
    text-align:center;
    gap:20px;
  }
  .chowanki-footer__col--logo,
  .chowanki-footer__col--social,
  .chowanki-footer__col--links{
    grid-column:1;
    grid-row:auto;
  }
  .chowanki-footer__col--social{
    justify-content:center;
  }
  .chowanki-footer__col--links{
    justify-content:center;
  }
}