/* Plum Catering, glass layer (Chadi 15 Oct 2026: "the full website to accommodate the glass effect").
   Loaded on every page after plum.css (and plum-h3.css on the Home v3 preview). Layout unchanged: only surfaces change.
   Three glasses from palette B: cream glass (header, menus, bars, tags), plum glass (title cards, drawer, menu panel), taupe glass (quote pill).
   Without backdrop-filter support nothing here applies and the solid colours of plum.css stay. */
:root{
  --gl-blur:blur(18px) saturate(160%);
  --gl-cream:color-mix(in srgb,var(--cream) 66%,transparent);
  --gl-plum:color-mix(in srgb,var(--dark) 52%,transparent);
  --gl-taupe:color-mix(in srgb,var(--band) 72%,transparent);
  --gl-edge-l:1px solid color-mix(in srgb,#fff 45%,transparent);
  --gl-edge-d:1px solid color-mix(in srgb,#fff 18%,transparent);
  --gl-hi:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent);
  --gl-hi-d:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent);
  --gl-drop:0 24px 60px -30px color-mix(in srgb,var(--shade) 45%,transparent);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

/* header: frosted cream, the page shows softly through it as you scroll */
.hdr{background:var(--gl-cream);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-block-end:var(--gl-edge-l)}
.hdr-nav{border-block-start-color:color-mix(in srgb,var(--ink) 10%,transparent)}
.dd-panel{background:color-mix(in srgb,var(--cream) 78%,transparent);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:var(--gl-edge-l);border-radius:18px;box-shadow:var(--gl-hi),var(--gl-drop)}
.mnav{background:color-mix(in srgb,var(--dark) 80%,transparent);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%)}

/* title cards over photos and films: plum glass */
.pcard{background:var(--gl-plum);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border:var(--gl-edge-d);box-shadow:var(--gl-hi-d),0 30px 80px -40px color-mix(in srgb,var(--shade) 60%,transparent)}
.pcard::before{opacity:.28}

/* buttons that sit on photos: a thin frosted fill */
.btn-line{background:color-mix(in srgb,var(--cream) 10%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-line:hover{background:var(--cream)}

/* floating quote pill and the phone action bar */
.qpill{background:var(--gl-taupe);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:var(--gl-edge-l);box-shadow:var(--gl-hi),0 14px 30px -12px color-mix(in srgb,var(--shade) 45%,transparent)}
.qpill:hover{background:color-mix(in srgb,var(--cream) 82%,transparent)}
.bar{background:color-mix(in srgb,var(--cream) 70%,transparent);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-block-start:var(--gl-edge-l)}

/* inquiry drawer and lightbox: the page blurs behind */
.qd-scrim{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qd-panel{background:color-mix(in srgb,var(--dark) 74%,transparent);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);border-inline-start:var(--gl-edge-d)}
.lb{background:color-mix(in srgb,var(--shade) 78%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}

/* fields on plum: frosted wells */
.on-plum .input,.enq-sec .input,.qd .input{background-color:color-mix(in srgb,var(--cream) 7%,transparent);border-radius:10px}
.on-plum .input:focus,.enq-sec .input:focus,.qd .input:focus{background-color:color-mix(in srgb,var(--cream) 13%,transparent)}

/* cards on cream: a light glass panel */
.optcard{background:color-mix(in srgb,#fff 34%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--gl-edge-l);border-radius:14px;box-shadow:var(--gl-hi)}
a.icol:hover{background:color-mix(in srgb,#fff 38%,transparent);box-shadow:var(--gl-hi),var(--gl-drop)}

/* menu cards: the name and line sit on a frosted plate that fits the words */
.mcard .mc-body{inset:auto 12px 12px;padding:20px 18px 22px;border-radius:16px;background:color-mix(in srgb,var(--dark) 34%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:var(--gl-edge-d);box-shadow:var(--gl-hi-d)}
.mcard::after{display:none} /* the old hover line sat on the plate's text */
.mcard .mc-d{margin-block-start:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mcard .mc-d .tbd{display:none} /* an unconfirmed fact stays out of the short card line, it shows on the Menus page */
/* small cards (two per row on a phone): name only, the photo stays visible */
@media (max-width:767px){.h3-mc .mcard .mc-body{inset:auto 6px 6px;padding:12px 10px 13px;border-radius:13px}.h3-mc .mcard .mc-t{font-size:19px;line-height:1.2}.h3-mc .mcard .mc-d{display:none}}

/* ---------- Home v3 preview */
.h3-tag{background:color-mix(in srgb,var(--cream) 62%,transparent);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border:var(--gl-edge-l);box-shadow:var(--gl-hi),0 14px 34px -18px color-mix(in srgb,var(--shade) 45%,transparent)}
.h3-facts li{padding:16px 18px;border:var(--gl-edge-d);border-radius:16px;background:color-mix(in srgb,var(--dark) 26%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--gl-hi-d)}
.h3-arr{background:color-mix(in srgb,#fff 30%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--gl-edge-l);box-shadow:var(--gl-hi)}
.h3-arr:hover{background:var(--dark)}
}