/* themes/luxury/theme.css — PRESENTATION LAYER (styling) for the "luxury" theme.
 *
 * Responsibility: all visual styling for this theme only — dark, cinematic,
 * editorial mood with large full-width dish images and generous spacing.
 *
 * Must NOT contain: logic, data fetching, or anything that belongs in
 * core/menu.js. Must NOT be shared across themes — each theme owns its own CSS.
 *
 * Color convention: all brand colors are defined ONCE as CSS custom
 * properties below, then referenced everywhere else in this file via
 * var(--color-...) — never a hardcoded hex value in a rule. This lets a
 * restaurant rebrand by overriding these variables inline in its own
 * index.html, with zero edits to this shared file.
 */

:root {
  --color-primary: #C9A84C;
  --color-primary-dark: #A8863A;
  --color-accent: #E8D5A3;
  --color-background: #0D0D0D;
  --color-surface: #1A1A1A;
  --color-text: #F5F0E8;
  --color-text-muted: #8A8075;
  --color-border: #2A2520;
}

.menu-page {
  background-color: var(--color-background);
  color: var(--color-text);
}

.hero-section {
  position: relative;
  min-height: 280px;
  background-color: var(--color-background);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-logo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.hero-fallback-title {
  position: relative;
  z-index: 1;
  color: var(--color-text);
}

.info-block {
  background-color: var(--color-background);
}

.info-name {
  color: var(--color-text);
}

.info-tagline {
  color: var(--color-primary);
}

.info-detail {
  color: var(--color-text-muted);
}

.social-links {
  margin-top: 1.5rem;
}

.social-icon {
  color: var(--color-primary);
}

.social-icon:hover {
  color: var(--color-accent);
}

.menu-categorynav {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.menu-categorynav__link {
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}

.menu-categorynav__link:hover,
.menu-categorynav__link:focus-visible {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.menu-category__title {
  color: var(--color-primary);
}

.menu-category__title-line {
  background-color: var(--color-primary);
}

.menu-category__empty,
.menu-page__empty {
  color: var(--color-text-muted);
}

.dish-feature--unavailable {
  opacity: 0.4;
}

.dish-feature__image {
  background-color: var(--color-surface);
}

.dish-feature__placeholder {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.dish-feature__unavailable-label {
  color: var(--color-text-muted);
  background-color: rgba(13, 13, 13, 0.55);
}

.dish-feature__name {
  color: var(--color-text);
}

.dish-feature__price {
  color: var(--color-primary);
}

.dish-feature__description {
  color: var(--color-text-muted);
}

.dish-feature__divider {
  background-color: var(--color-border);
}

.menu-error {
  background-color: var(--color-background);
  color: var(--color-text);
}

.menu-error__message {
  color: var(--color-primary);
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--color-primary);
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}