/*
 * Site refinements layered on top of the original stylesheet (loaded last).
 * Delete this file and its <link> in src/layouts/Base.astro to return to the original look.
 */

/* ---- "Our Brands" menu: three consistent, smaller cards ---------------------------------- */
/* The original Papacasso/Aryla Diary images had rounded corners and a tint baked into the PNGs,
   so any other image looked different. Corners and the gradient now come from CSS for all cards. */
.header-subnav__item{border-radius:18px;overflow:hidden;background:#1d1d1f}
.header-subnav__link{position:relative;display:block}
.header-subnav__link::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,10,24,.78) 0%,rgba(12,10,24,.34) 42%,rgba(12,10,24,0) 72%);
}
.header-subnav__content{z-index:1}
.header-subnav__item img{display:block;transition:transform .5s ease}
.header-subnav__link:hover img{transform:scale(1.04)}

@media (min-width:1201px){
  .header-subnav{padding-bottom:48px}
  .header-subnav__list{max-width:1040px;gap:24px}
  .header-subnav__item{aspect-ratio:4/3}
  .header-subnav__link{height:100%}
  .header-subnav__item img{width:100%;height:100%;object-fit:cover}
  .header-subnav__content{left:22px;right:22px;bottom:20px}
  .header-subnav__content h3{font-size:24px;margin-bottom:6px}
  .header-subnav__content p{font-size:14px;line-height:150%;font-weight:400;margin-bottom:12px;opacity:.92}
}

@media (prefers-reduced-motion: reduce){
  .header-subnav__item img{transition:none}
  .header-subnav__link:hover img{transform:none}
}

/* ---- Caspi Cuisine logo in the header ---------------------------------------------------- */
/* The logo image has white lettering, which vanishes when the header turns white (menu open).
   A dark-lettered copy is shown only in that state. */
.cuisine-logo--dark{display:none}
.header.js-opened .cuisine-logo--light{display:none}
.header.js-opened .cuisine-logo--dark{display:inline}

/* Images now carry width/height so the browser reserves space (no layout shift).
   Zero-specificity height:auto keeps the old sizing; any existing class rule still wins. */
:where(img[width][height]) { height: auto; }