/* =========================================================
   Saraj v39 — Schlemmer-inspired UX evolution
   Isolated public UI layer: compact rhythm, mobile quick
   actions, polished feedback and performance safeguards.
   ========================================================= */

.saraj-public{
  --v39-space-xs:.45rem;
  --v39-space-sm:.75rem;
  --v39-space-md:1.15rem;
  --v39-space-lg:clamp(1.55rem,3vw,2.4rem);
  --v39-space-xl:clamp(2.8rem,5vw,4.8rem);
  --v39-focus:rgba(184,117,64,.62);
  --v39-glass:rgba(255,253,248,.78);
  --v39-glass-border:rgba(255,255,255,.58);
  --v39-dock-h:72px;
}

/* A steadier, more economical page rhythm without crowding. */
.saraj-public .content-section{padding-block:clamp(2.9rem,5.6vw,5.2rem)}
.saraj-public .content-section + .content-section{padding-top:clamp(1rem,2vw,2rem)}
.saraj-public .page-intro{margin-bottom:clamp(1.35rem,2.6vw,2.25rem)}
.saraj-public .section-heading{margin-bottom:clamp(1.15rem,2.5vw,2rem)}
.saraj-public .home-service-grid{padding-top:clamp(1.5rem,3vw,2.8rem)}
.saraj-public .contact-cards,
.saraj-public .contact-layout,
.saraj-public .reservation-shell{padding-top:clamp(2rem,4vw,3.8rem)}
.saraj-public .menu-board{padding-top:clamp(2rem,4vw,3.7rem);padding-bottom:clamp(1.25rem,2.5vw,2.3rem)}
.saraj-public .menu-board + .menu-board{padding-top:clamp(1.4rem,2.8vw,2.5rem)}

/* Off-screen sections are skipped by supporting browsers. */
.saraj-public .menu-section,
.saraj-public .specialty-card,
.saraj-public .contact-card,
.saraj-public .legal-text,
.saraj-public .allergen-panel{
  content-visibility:auto;
  contain-intrinsic-size:1px 360px;
}

/* Header polish: clearer active state and slightly tighter scrolled mode. */
.saraj-public .main-nav a{position:relative}
.saraj-public .main-nav a::after{
  content:"";
  position:absolute;
  left:50%;right:50%;bottom:.36rem;height:1.5px;
  background:linear-gradient(90deg,var(--copper),var(--gold));
  border-radius:999px;
  transition:left .28s var(--ease),right .28s var(--ease),opacity .2s ease;
  opacity:0;
}
.saraj-public .main-nav a:is(:hover,:focus-visible,.active)::after{left:.8rem;right:.8rem;opacity:1}
.saraj-public .site-header.is-scrolled .brand-logo{transform:scale(.94)}
.saraj-public .brand-logo{transition:transform .3s var(--ease)}

/* Premium but restrained sheen. */
.saraj-public .btn,
.saraj-public .reserve-pill,
.saraj-public .menu-category-chip,
.saraj-public .slot-button{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.saraj-public .btn::before,
.saraj-public .reserve-pill::before,
.saraj-public .menu-category-chip::before,
.saraj-public .slot-button::before{
  content:"";
  position:absolute;
  inset:-45% auto -45% -62%;
  width:35%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);
  opacity:0;
  pointer-events:none;
  z-index:0;
}
@media(hover:hover) and (pointer:fine){
  .saraj-public .btn:hover::before,
  .saraj-public .reserve-pill:hover::before,
  .saraj-public .menu-category-chip:hover::before,
  .saraj-public .slot-button:hover::before{
    animation:v39-sheen .72s var(--ease);
  }
}
@keyframes v39-sheen{0%{left:-62%;opacity:0}20%{opacity:.9}100%{left:128%;opacity:0}}

/* A quiet border light follows premium surfaces on precise pointers. */
@media(hover:hover) and (pointer:fine){
  .saraj-public :is(.specialty-card,.story-showcase,.opening-card,.reservation-cta,.reservation-form,.reservation-info,.contact-card,.contact-form,.route-panel,.menu-section,.allergen-panel){
    transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s ease;
  }
  .saraj-public :is(.specialty-card,.contact-card,.menu-section):hover{
    transform:translateY(-3px);
    box-shadow:0 22px 56px rgba(35,22,15,.12);
    border-color:rgba(184,117,64,.25);
  }
}

/* Opening hours: the current day is immediately recognizable. */
.saraj-public .hours-list>div.is-today{
  margin-inline:-.55rem;
  padding-inline:.55rem;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(208,164,94,.16),rgba(184,117,64,.07));
  border-bottom-color:transparent;
}
.saraj-public .hours-list>div.is-today span::after{
  content:"heute";
  display:inline-flex;
  margin-left:.45rem;
  padding:.12rem .38rem;
  border-radius:999px;
  background:rgba(208,164,94,.18);
  color:#f1d7a7;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* Menu chips receive scroll affordance and a calmer selected state. */
.saraj-public .menu-tools{box-shadow:0 14px 36px rgba(35,22,15,.08)}
.saraj-public .menu-category-nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(184,117,64,.34) transparent;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  cursor:grab;
}
.saraj-public .menu-category-nav.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.saraj-public .menu-category-chip{scroll-snap-align:start;white-space:nowrap}
.saraj-public .menu-category-chip.active{
  box-shadow:0 8px 22px rgba(104,37,30,.17),inset 0 0 0 1px rgba(255,255,255,.18);
}
.saraj-public .menu-search:focus-within{
  box-shadow:0 0 0 4px rgba(184,117,64,.12),0 14px 32px rgba(35,22,15,.08);
}
.saraj-public .menu-line[hidden]{display:none!important}
.saraj-public .menu-section-empty{
  margin:.7rem 0 0;
  padding:.8rem 1rem;
  border-radius:12px;
  background:var(--paper-2);
  color:var(--ink-soft);
  font-size:.88rem;
}

/* Forms: stronger input feedback without adding visual noise. */
.saraj-public :is(input,select,textarea){transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.saraj-public :is(input,select,textarea):focus{
  border-color:rgba(184,117,64,.7);
  box-shadow:0 0 0 4px rgba(184,117,64,.11);
  background:#fff;
}
.saraj-public :is(input,select,textarea)[aria-invalid="true"]{
  border-color:#aa4036;
  box-shadow:0 0 0 4px rgba(170,64,54,.1);
}
.saraj-public .form-message:not(:empty){
  border-radius:14px;
  padding:.78rem .9rem;
  animation:v39-message-in .28s var(--ease);
}
@keyframes v39-message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.saraj-public .slot-grid.is-loading{position:relative;min-height:88px;opacity:.68}
.saraj-public .slot-grid.is-loading::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.58) 46%,transparent 62%);
  background-size:220% 100%;animation:v39-loading 1.15s linear infinite;pointer-events:none;
}
@keyframes v39-loading{to{background-position:-220% 0}}

/* Images reveal only after decode, reducing visual jumps. */
.saraj-public img[data-v39-image]{opacity:0;filter:blur(5px);transition:opacity .55s ease,filter .7s var(--ease)}
.saraj-public img[data-v39-image].is-ready{opacity:1;filter:none}

/* Accessible toast feedback for successful actions. */
.saraj-toast{
  position:fixed;
  left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));
  z-index:120;
  width:max-content;max-width:min(90vw,520px);
  transform:translate(-50%,18px);
  padding:.78rem 1rem;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(25,18,14,.94);
  color:#fff7e9;
  box-shadow:0 18px 46px rgba(14,9,6,.3);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,transform .3s var(--ease),visibility .24s ease;
  font-size:.88rem;font-weight:600;text-align:center;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.saraj-toast.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.saraj-toast.is-error{background:rgba(104,37,30,.97)}

/* Mobile quick actions: the restaurant equivalents of a commerce action bar. */
.mobile-action-dock{display:none}

@media(max-width:760px){
  .saraj-public{padding-bottom:calc(var(--v39-dock-h) + env(safe-area-inset-bottom))}
  .saraj-public .site-footer{margin-bottom:0}
  .mobile-action-dock{
    position:fixed;
    z-index:95;
    left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:1fr 1fr 1.32fr;
    gap:5px;
    min-height:var(--v39-dock-h);
    padding:6px;
    border:1px solid rgba(255,255,255,.64);
    border-radius:22px;
    background:rgba(251,247,239,.9);
    box-shadow:0 18px 54px rgba(24,15,10,.23);
    -webkit-backdrop-filter:blur(20px) saturate(1.25);
    backdrop-filter:blur(20px) saturate(1.25);
  }
  .mobile-action-dock a{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.22rem;
    padding:.45rem .35rem;
    border-radius:16px;
    color:var(--ink-soft);
    text-decoration:none;
    font-size:.66rem;
    line-height:1;
    font-weight:700;
    letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-action-dock a:active{transform:scale(.97)}
  .mobile-action-dock svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-action-dock .dock-primary{
    background:linear-gradient(135deg,var(--clay),var(--clay-dark));
    color:#fff9ed;
    box-shadow:0 9px 22px rgba(104,37,30,.22);
  }
  .saraj-toast{bottom:calc(var(--v39-dock-h) + 1.1rem + env(safe-area-inset-bottom));border-radius:16px}
  .saraj-public .menu-tools{border-radius:18px}
  .saraj-public .menu-category-nav{padding-bottom:.28rem}
  .saraj-public .content-section{padding-block:2.75rem}
  .saraj-public .content-section + .content-section{padding-top:.8rem}
  .saraj-public .menu-board{padding-top:1.65rem}
  .saraj-public .contact-layout,.saraj-public .contact-cards,.saraj-public .reservation-shell{padding-top:2rem}
}

@media(max-width:390px){
  .mobile-action-dock{left:7px;right:7px;border-radius:20px}
  .mobile-action-dock a{font-size:.62rem}
  .mobile-action-dock svg{width:20px;height:20px}
}

@media(hover:none),(pointer:coarse){
  .saraj-public .menu-category-nav{cursor:auto}
  .saraj-public :is(.specialty-card,.contact-card,.menu-section):hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .saraj-public .btn::before,
  .saraj-public .reserve-pill::before,
  .saraj-public .menu-category-chip::before,
  .saraj-public .slot-button::before,
  .saraj-public .slot-grid.is-loading::after{animation:none!important}
  .saraj-public img[data-v39-image]{opacity:1!important;filter:none!important}
  .saraj-toast{transition:none}
}