/* =====================================================
   THEME SYSTEM CSS
   Univerzální vizitkový design engine
===================================================== */

:root {

  /* ===== COLORS ===== */

  --bg: #ffffff;
  --surface: #f5f5f5;

  --on-surface: #111111;
  --on-surface-muted: #888888;

  --brand: #1658cd;

  --primary: var(--brand);
  --primary-hover: color-mix(in srgb, var(--brand) 85%, black);
  --primary-active: color-mix(in srgb, var(--brand) 70%, black);
  --on-primary: #ffffff;

  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --border: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.25);
  --border-soft: rgba(0,0,0,0.06); 

  --menu-bg:#111111;
  --menu-text:#ffffff;

  --menu-bg-hover:#ffffff;
  --menu-text-hover:#111111;

  --item-color: var(--on-surface);


  /* ===== LAYOUT ===== */

  --container: 1200px;

  --content-sm: 600px;
  --content-md: 900px;
  --content-lg: 1100px;

  /* ===== TYPO ===== */

    --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* scale */
  --h1: clamp(2.2rem, 5vw, 3.2rem);
  --h2: clamp(1.8rem, 3.2vw, 2.4rem);
  --h3: clamp(1.4rem, 2.2vw, 1.8rem);
  --h4: clamp(1.1rem, 1.6vw, 1.4rem);

  /* text */
  --text: 1rem;
  --text-sm: 0.9rem;

  /* line height */
  --line-tight: 1.2;
  --line: 1.5;
  --line-loose: 1.7;



  /* ===== SPACING ===== */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* ===== UI ===== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --radius: 10px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.15);

  /* ===== INTERACTION ===== */

  --hover-bg: color-mix(in srgb, var(--on-surface) 5%, transparent);
  --hover-bg-brand: color-mix(in srgb, var(--primary) 10%, transparent);

}


/* =====================================================
   THEME WRAPPERS
===================================================== */

.theme-light {
  --bg: #fff;
  --surface: #f5f5f5;

  --on-surface: #111;
  --on-surface-muted: #666;

  --border: rgba(0,0,0,0.12);
}

.theme-dark {
  --bg: #1a1a1a;         
  --surface: #363636; 

  --on-surface: #e5e5e5;
  --on-surface-muted: #a1a1a1;

  --border: rgba(255,255,255,0.10);

  --menu-line: rgba(255,255,255,0.08);
  --menu-dot: rgba(255,255,255,0.12);

  --primary: color-mix(in srgb, var(--brand) 85%, white);
  --on-primary: #000;
}

.theme-light,
.theme-dark {
  --item-color: var(--on-surface);
}

.theme-warm {
  --bg: #fff7ed;
  --surface: #ffffff;
  --on-surface: #2b1b0e;
  --primary: #d49a6a;
}

.theme-contrast {
  --bg: #111111;
  --surface: #000000;
  --on-surface: #ffffff;
  --primary: #ff0033;
}

.theme-aw {
  --bg: linear-gradient(90deg,
  rgba(50, 122, 216, 0.86) 0%,
  rgba(198, 216, 239, 0.86) 10%,
  transparent 50%,
  rgba(198, 216, 239, 0.86) 90%,
  rgba(50, 122, 216, 0.86) 100%);

  --surface: rgba(255, 255, 255, 0.92);

  --on-surface: #1a1a1a;
  --on-surface-muted: #6b7280;

  --primary: #1658cd;

  --border: rgba(0,0,0,0.1);

  --shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.theme-albert {
  --bg:linear-gradient(90deg,
  rgba(0,104,240,0.95) 0%,
  rgba(0,104,240,0.95) 10%,
  transparent 50%,
  rgba(0,104,240,0.95) 90%,
  rgba(0,104,240,0.95) 100%);
    
  --surface: rgba(255, 255, 255, 0.95);

  --on-surface: #1a1a1a;
  --on-surface-muted: #555;

  --primary: #1e40af; /* modrá Albert vibe */
  --border: rgba(0,0,0,0.1);

  --shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.theme-coca-cola {
  --bg: linear-gradient(90deg,
    rgba(var(--primary-rgb), 0.86) 0%,
    rgba(246, 240, 240, 0.86) 10%,
    transparent 50%,
    rgba(246, 240, 240, 0.86) 90%,
    rgba(var(--primary-rgb), 0.86) 100%
  );

  --surface: rgba(255, 255, 255, 0.92);

  --on-surface: #1a1a1a;
  --on-surface-muted: #6b7280;

  --border: rgba(0,0,0,0.1);

  --shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.theme-konrad-nature {
  --bg: linear-gradient(90deg,
    rgba(31, 143, 6, 0.793) 0%,
    rgba(244, 217, 66, 0.907) 10%,
    transparent 50%,
    rgba(244, 217, 66, 0.85) 90%,
    rgba(31, 143, 6, 0.793) 100%
  );

  --surface: rgba(255, 255, 255, 0.92);

  --on-surface: #1a1a1a;
  --on-surface-muted: #6b7280;

  --primary: #2a5a2a;

  --border: rgba(0,0,0,0.1);

  --shadow: 0 10px 30px rgba(0,0,0,0.15);
}


.theme-dark .tone-hlavni,
.theme-dark .tone-uspech,
.theme-dark .tone-upozorneni,
.theme-dark .tone-chyba {
  background: color-mix(in srgb, var(--tone) 18%, transparent);
}

.theme-dark .tone-svetle {
  background:
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)),
    var(--bg);
}

/* =====================================================
   SEASON - sezóna
===================================================== */

.season-jaro {
  background:
    radial-gradient(circle at 30% 40%, rgba(120,200,140,0.10), transparent 60%),
    linear-gradient(135deg, #f8fff5, #e6f7ec);
}

/*
.season-jaro::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(
    circle at 30% 40%,
    rgba(120, 200, 140, 0.12),
    transparent 60%
  );

  background-size: 200% 200%;
  animation: bg-move 20s ease-in-out infinite;

  filter: blur(60px);
}
*/ 

.season-leto {
  --bg: linear-gradient(135deg, #1a1a1a, #3b2f1f);
}

.season-leto::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
  radial-gradient(circle at 30% 40%, rgba(100,255,150,0.12), transparent 60%),
  radial-gradient(circle at 70% 60%, rgba(150,255,200,0.08), transparent 60%);
  background-size: 200% 200%;

  animation: bg-move 10s ease-in-out infinite;
}

.season-podzim {
  --bg: linear-gradient(135deg, #1a1a1a, #2b1f1a);
}

.season-podzim::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(circle at 40% 60%, rgba(255,140,0,0.12), transparent 60%);
  background-size: 200% 200%;

  animation: bg-move 16s ease-in-out infinite;
}

.season-zima {
  --bg: linear-gradient(135deg, #1a1a1a, #1a2230);
}

.season-zima::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background: radial-gradient(circle at 50% 50%, rgba(200,220,255,0.12), transparent 60%);
  background-size: 200% 200%;

  animation: bg-move 20s ease-in-out infinite;
}

@keyframes float-bg {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes bg-move {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@keyframes pulse {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}

/* =====================================================
   TONE
===================================================== */


.tone-svetle,
.tone-tmave,
.tone-barevne {
  position: relative;
  isolation: isolate; /* důležité pro vrstvy */
}

.tone-svetle::before,
.tone-tmave::before,
.tone-barevne::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}



.tone-vychozi {
  background: var(--surface);
  color: var(--on-surface);
}

.tone-tlumene {
  background: var(--surface);
  color: var(--on-surface-muted);
  --menu-text: var(--on-surface-muted);
  --menu-price: var(--on-surface);
  --menu-line: var(--border-soft);
  --menu-dot: var(--border-soft);
}

.tone-svetle {
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
    var(--bg);
}

.tone-tmave {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    var(--bg);
    --on-surface: #fff;
}

.tone-barevne {
  background:
    linear-gradient(
      color-mix(in srgb, var(--primary) 35%, transparent),
      color-mix(in srgb, var(--primary) 35%, transparent)
    ),
    var(--bg);
  --menu-price: var(--primary);
  --menu-dot: color-mix(in srgb, var(--primary) 30%, transparent);
}

.tone-barevne-soft {
  --overlay: color-mix(in srgb, var(--primary) 15%, transparent);
}

.tone-barevne-strong {
  --overlay: color-mix(in srgb, var(--primary) 55%, transparent);
}

.tone-hlavni {
  --tone: var(--primary);

  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border-left: 4px solid var(--tone);
}

.tone-uspech {
  --tone: var(--color-success);

  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border-left: 4px solid var(--tone);
}

.tone-upozorneni {
  --tone: var(--color-warning);

  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border-left: 4px solid var(--tone);
}

.tone-chyba {
  --tone: var(--color-danger);

  background: color-mix(in srgb, var(--tone) 12%, transparent);
  border-left: 4px solid var(--tone);
}

.tone-hlavni,
.tone-uspech,
.tone-upozorneni,
.tone-chyba {
  padding: var(--space-3);
}



/* =====================================================
   BRAND (jen akcent)
===================================================== */

.brand-coca-cola {
  --surface: #fff;
  --on-surface: #e60012;

  --primary: #e60012;
  --primary-rgb: 230, 0, 18;
  --on-primary: #fff;

  --item-color: #e60012;
}


.brand-neptun {
  --on-surface: #bea951e9;


  --primary: #bea951e9;
  --on-primary: #fff;

  --item-color: #000;
}

.brand-konrad {
  
  --on-surface: #fff;

  --primary: #bd0e0ee9;
  --on-primary: #000;

  --item-color: #000;
}

/* =====================================================
   BODY = PRÁZDNÝ FLEXIBILNÍ BOX
===================================================== */

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--on-surface);

  line-height: var(--line);

  /* PRÁZDNÝ CANVAS PRINCIP */
  min-height: 100vh; 
}



/* =====================================================
   VIZITKOVÝ KONTENER
===================================================== */
/*
.hlavni-tabulka-vizitka {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin: 0 auto;
  position: relative;
}
  

.hlavni-tabulka-vizitka {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
  margin: 0 auto;
}
*/


.hlavni-tabulka-maly-popis {
  padding: var(--space-3);
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--radius);
  line-height: var(--line);
  box-shadow: var(--shadow-sm);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(12px, 4vw, 32px);
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);

  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

 
.card {
  width: 100%;

  background: var(--surface);
  color: var(--on-surface);

  border-radius: var(--radius);
  box-shadow: var(--shadow-md);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card--sm {
  padding: var(--space-3);
}

.card--lg {
  padding: var(--space-6);
}

.card--border {
  border: 1px solid var(--border);
}



.profile {
  max-width: var(--content);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.profile--narrow {
  max-width: 700px;
}

.profile--wide {
  max-width: var(--container);
}

.profile--compact {
  gap: var(--space-3);
}

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.section--spaced {
  padding: var(--space-5) 0;
}

.section--center {
  align-items: center;
  text-align: center;
}

.section--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.section--divider {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}
.section--narrow {
  max-width: var(--content-sm);
  margin-inline: auto;
}

.section--medium {
  max-width: var(--content-md);
  margin-inline: auto;
}

.section--wide {
  max-width: var(--content-lg);
  margin-inline: auto;
}

.section--image-sm img {
  max-width: 300px;
}

.section--image-md img {
  max-width: 500px;
}


.info-block {
  width: 100%;
  max-width: var(--info-width, 600px);
  margin-inline: auto;
}

.info-block--sm {
  --info-width: 450px;
    width: 100%;
    margin-inline: auto;

}

.info-block--md {
  --info-width: 600px;
    width: 100%;
    margin-inline: auto;
}

.info-block--lg {
  --info-width: 900px;
    width: 100%;
    margin-inline: auto;
}


.info-box {
  padding: var(--space-3);
  background: var(--surface);
  color: var(--on-surface-muted);
  border-radius: var(--radius);
  line-height: var(--line);
  box-shadow: var(--shadow-sm);
}

/* BOX DNES */
.today-box {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* tenký accent bar nahoře */
.today-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--on-primary);
  opacity: 0.4;
} 

.today-badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 999px;

  background: var(--on-primary);
  color: var(--primary);
}

.image-box img {
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.tip-box {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--on-primary) 10%, var(--surface));
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}



/* =====================================================
   TYPOGRAFIE (HLAVNÍ PRAVIDLA)
===================================================== */

h1 {
  font-size: var(--h1);
  color: var(--primary);
}

h1.brand {
  color: var(--primary);
}

h2 {
  font-size: var(--h2);
  color: var(--primary);
} 

h3 {
  font-size: var(--h3);
  color: var(--on-surface-muted);
}

h4 {
  font-size: var(--h4);
  color: var(--on-surface-muted);
}

.text {
  max-width: 60ch;
}

.text-accent {
  color: var(--primary);
}

.title-accent {
  color: var(--primary);
}

p + p {
  margin-top: var(--space-3);
}


/* =====================================================
   ODKAZY
===================================================== */

a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.2s;
}

a:hover {
  border-color: currentColor;
}


/* =========================
   BUTTON – COMPLETE SYSTEM
========================= */

.button-vizitka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  background: var(--primary);
  color: var(--on-primary);

  padding: var(--space-3) var(--space-4);

  border-radius: var(--radius);
  border: none;

  font: inherit;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.1s ease;
  
  text-decoration: none;
}
 

/* =========================
   HOVER
========================= */
.button-vizitka:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
}

/* =========================
   ACTIVE
========================= */
.button-vizitka:active {
  background: color-mix(in srgb, var(--primary) 70%, black);
  transform: translateY(1px);
}

/* =========================
   FOCUS (accessibility)
========================= */
.button-vizitka:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, white);
  outline-offset: 2px;
}

/* =========================
   DISABLED
========================= */
.button-vizitka:disabled,
.button-vizitka[aria-disabled="true"] {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
  pointer-events: none;
}



/* =========================
   VARIANTS
========================= */

/* Secondary (outline) */
.button-vizitka--secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}

.button-vizitka--secondary:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.button-vizitka--secondary:active {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Ghost */
.button-vizitka--ghost {
  background: transparent;
  color: var(--primary);
}

.button-vizitka--ghost:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* =========================
   SIZES
========================= */

.button-vizitka--sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}

.button-vizitka--lg {
  padding: var(--space-4) var(--space-5);
  font-size: 1.05rem;
}

.button-vizitka--block {
  width: 100%;
}

/* =========================
   LAYOUT
========================= */

.menu {
  --menu-text: var(--on-surface);
}

.menu-wrapper {
  width: 100%;
  padding: var(--space-5);
  background: var(--bg);
}

/* volitelné varianty */
.menu-wrapper--surface {
  background: var(--surface);
}

.menu-wrapper--muted {
  width: 100%;
  max-width: var(--content, 1100px);
  margin-inline: auto;

  padding: var(--space-5);

  background: color-mix(in srgb, var(--surface) 85%, var(--bg));
  border-radius: var(--radius);

  /* volitelné – jemné oddělení */
  box-shadow: var(--shadow-sm);
}

.menu-wrapper--center {
  display: flex;
  justify-content: center;
}






/* ====================================================================================================
   GRID SYSTEM
==================================================================================================== */

/* BASE GRID */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-3));
}

/* ZABRÁNÍ ROZBITÍ LAYOUTU (dlouhý text, obrázky) */
.grid > * {
  min-width: 0;
}


/* =========================
   AUTO GRID (DOPORUČENÝ DEFAULT)
========================= */

.grid-auto {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-min, 260px), 1fr)
  );
}


/* =========================
   FIXED GRID (KDYŽ CHCEŠ KONTROLU)
========================= */

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }


/* =========================
   RESPONSIVE GRID (MOBILE → AUTO)
========================= */

@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(
      auto-fit,
      minmax(var(--grid-min, 260px), 1fr)
    );
  }
}


/* =========================
   GAP VARIANTY
========================= */

.grid--sm { --grid-gap: var(--space-2); }
.grid--md { --grid-gap: var(--space-3); }
.grid--lg { --grid-gap: var(--space-4); }


/* =========================
   MENU GRID
========================= */

.grid--menu {
  gap: var(--space-2);
}

/* ITEM */
.grid--menu .item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);

  padding-bottom: var(--space-1);

  color: var(--menu-text);
  border-bottom: 1px dashed var(--menu-line);
}

/* TEXT FLEX */
.grid--menu .item span:first-child {
  flex: 1;
}

/* DOT LINE */
.grid--menu .item::after {
  content: "";
  flex: 1;
  border-bottom: 1px dashed color-mix(in srgb, var(--menu-line) 70%, transparent);
  margin: 0 var(--space-2);
}

/* PRICE */
.grid--menu .price {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 500;
  color: var(--menu-price);
}

/* SKRYTÍ PRÁZDNÉ CENY */
.grid--menu .price:empty {
  display: none;
}

/* HOVER */
.grid--menu .item:hover {
  background: color-mix(in srgb, #fff 10%, #000);
}


/* =========================
   MENU – PUB STYLE
========================= */

.grid--menu-pub {
  gap: var(--space-2);
}

/* ITEM */
.grid--menu-pub .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);

  padding: var(--space-3);

  color: var(--item-color);
  background: var(--surface);

  border-radius: var(--radius-md);

  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

/* HOVER */
.grid--menu-pub .item:hover {
  background: var(--primary);
  color: var(--on-primary);
  transform: translateY(-1px);
}

/* PRICE */
.grid--menu-pub .price {
  color: inherit;
}

/* SKRYTÍ PRÁZDNÉ CENY */
.grid--menu-pub .price:empty {
  display: none;
}


/* =========================
   TODAY ITEMS (MENU)
========================= */

.today-item {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.15s ease;
}

.today-item.is-today {
  background: color-mix(in srgb, var(--primary) 15%, var(--surface));
  border-left: 3px solid var(--primary);
}

.today-item:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 20%, var(--surface));
}



 

/* =========================
   COMPONENT: LINKS
========================= */

/* BASE LINK */
.link {
  color: var(--link-color, var(--primary));
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

/* HOVER + FOCUS (důležité!) */
.link:hover,
.link:focus-visible {
  text-decoration: underline;
}


/* =========================
   VARIANTY
========================= */

/* výrazný link (např. telefon) */
.link-strong {
  font-weight: 700;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.link-strong:hover {
  background: var(--primary-soft);
}


/* invert (na tmavém / barevném pozadí) */
.link-invert {
  --link-color: var(--on-primary);
}

.link-invert:hover,
.link-invert:focus-visible {
  text-decoration: underline;
}


/* accent (brand barva) */
.link-accent {
  --link-color: var(--primary);
}


/* sekundární / menší */
.link-sub {
  font-size: 0.9em;
  color: var(--on-surface-muted);
}