/* ====== CDM Menu – fluid (clamp) + brand ====== */

/* Paleta & základ */
:root{
  --cdm-accent: #BBA46D;   /* zlatá (kategórie, zvýraznenia) */
  --cdm-price:  #931F1D;   /* vínová (ceny) */
  --cdm-ink:    #111827;   /* text */
  --cdm-muted:  #6b7280;   /* sekundárny text */
  --cdm-bg:     #ffffff;   /* karta */
  --cdm-brd:    #e5e7eb;   /* okraj */
  --cdm-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Hlavný wrapper – fluent premenné + typografia */
.cdm-menu{
  --font-category: 'Aremat', sans-serif;
  --font-title:    'Aremat', sans-serif;
  --font-text:     'Poppins', sans-serif;
  --font-price:    'Poppins', sans-serif;

  --fz-category: clamp(1.0rem, 0.84rem + 0.8vw, 1.25rem);
  --fz-title:    clamp(0.95rem, 0.86rem + 0.45vw, 1.10rem);
  --fz-desc:     clamp(0.90rem, 0.84rem + 0.30vw, 1.00rem);
  --fz-price:    clamp(0.98rem, 0.90rem + 0.45vw, 1.10rem);
  --fz-legend:   clamp(0.80rem, 0.74rem + 0.25vw, 0.90rem);

  --gap:      clamp(12px, 2.2vw, 20px);
  --radius:   clamp(12px, 1.6vw, 16px);
  --pad-card: clamp(14px, 2.6vw, 20px);
  --mb-card:  clamp(10px, 1.8vw, 14px);
  --icon:     clamp(18px, 2.4vw, 22px);

  --muted: var(--cdm-muted);
  --border: var(--cdm-brd);

  font-family: var(--font-text);
  color: var(--cdm-ink);
}

/* Sekcie */
.cdm-section{ margin: 0 0 calc(var(--gap) * 1.9) }
.cdm-section h3{
  margin: 0 0 calc(var(--gap) * 0.7);
  font-family: var(--font-category);
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: clamp(1.05, 1.0 + 0.2vw, 1.2);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: clamp(8px, 1.2vw, 12px);
  letter-spacing: clamp(.015em, .02em + .2vw, .05em);
  color: var(--cdm-accent);
}

/* Subcategory */
.cdm-subcat{
  font-family: 'Aremat', sans-serif;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: clamp(.01em, .015em + .15vw, .03em);
  line-height: clamp(1.1, 1.0 + 0.2vw, 1.3);
  margin: clamp(-2px, -0.3vw, -4px) 0 clamp(10px, 1.4vw, 14px);
  color: var(--cdm-muted);
}

/* Karta jedla */
.cdm-card{
  background: var(--cdm-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-card);
  margin-bottom: var(--mb-card);
  box-shadow: var(--cdm-shadow);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.cdm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
  border-color: color-mix(in srgb, var(--cdm-accent) 35%, transparent);
}

/* Layout riadku */
.cdm-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}

/* Názov jedla */
.cdm-title{
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--fz-title);
  line-height: clamp(1.05, 1.0 + 0.2vw, 1.2);
  text-transform: uppercase;
  letter-spacing: clamp(.01em, .015em + .2vw, .04em);
}

/* Popis */
.cdm-desc{
  margin-top: calc(var(--gap) * 0.35);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--fz-desc);
  line-height: clamp(1.4, 1.3 + 0.2vw, 1.6);
  letter-spacing: clamp(0em, .005em + .1vw, .015em);
}

/* Cena */
.cdm-price{
  white-space: nowrap;
  font-family: var(--font-price);
  font-weight: 700;
  font-size: var(--fz-price);
  color: var(--cdm-price);
  padding-left: clamp(6px, 1vw, 12px);
}

/* Ikony alergénov + tooltip */
.cdm-icons{
  margin-top: clamp(8px, 1.6vw, 12px);
  display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 12px);
}
.cdm-ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--icon) + 6px); height: calc(var(--icon) + 6px);
  position: relative; cursor: auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.05));
  transition: transform .12s ease;
}
.cdm-ico:hover{ transform: translateY(-1px) }
.cdm-ico svg{ width: var(--icon); height: var(--icon); display: block }

/* Tooltip */
.cdm-ico::after{
  content: attr(aria-label);
  position: absolute;
  bottom: 125%; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff;
  font-size: clamp(11px, 1.7vw, 12px);
  padding: 4px 8px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .08s ease-in-out; z-index: 9999;
}
.cdm-ico:hover::after{ opacity: 1; }

/* Legenda */
.cdm-legend{
  margin: clamp(10px, 1.8vw, 14px) 0 0;
  display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vw, 12px);
  font-size: var(--fz-legend); color: var(--cdm-ink);
}
.cdm-legend .cdm-legend-item{
  display: inline-flex; align-items: center; gap: clamp(6px, 1.2vw, 10px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: clamp(4px, 1vw, 6px) clamp(10px, 2vw, 14px);
  background: #f9fafb;
  transition: border-color .2s ease, background .2s ease;
}
.cdm-legend .cdm-legend-item:hover{
  border-color: color-mix(in srgb, var(--cdm-accent) 45%, transparent);
  background: #fff;
}

/* Jemné doladenie pre veľmi úzke obrazovky */
@media (max-width: 420px){
  .cdm-row{ gap: clamp(10px, 3vw, 14px); }
}
@media (prefers-reduced-motion: reduce){
  .cdm-card, .cdm-ico{ transition: none !important; }
  .cdm-card:hover{ transform: none !important; box-shadow: var(--cdm-shadow); }
}