/* Holcim brand tokens — Ambassador League
   Zdroj: www.holcim.cz (theme "corporate"), staženo 2026-08-24.
   Nahradit hodnotami z oficiálního brand manuálu, jakmile ho zadavatel dodá. */

@font-face {
  font-family: 'Holcim Type';
  src: url('fonts/Holcim-HeadlineLight.woff2') format('woff2'),
       url('fonts/Holcim-HeadlineLight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Holcim Type';
  src: url('fonts/Holcim-Regular.woff2') format('woff2'),
       url('fonts/Holcim-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Holcim Type';
  src: url('fonts/Holcim-Italic.woff2') format('woff2'),
       url('fonts/Holcim-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Holcim Type';
  src: url('fonts/Holcim-Bold.woff2') format('woff2'),
       url('fonts/Holcim-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Holcim Type';
  src: url('fonts/Holcim-HeadlineBlack.woff2') format('woff2'),
       url('fonts/Holcim-HeadlineBlack.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --holcim-font: 'Holcim Type', Helvetica, Arial, sans-serif;

  /* Základní paleta */
  --holcim-blue:   #0079C0;  /* primární */
  --holcim-orange: #FF4E2E;  /* sekundární, akcent */
  --holcim-navy:   #041739;  /* tmavé pozadí, bannery */
  --holcim-text:   #212529;
  --holcim-muted:  #6C757D;
  --holcim-line:   #DEE2E6;
  --holcim-bg:     #FFFFFF;

  /* Gradient ze značky (zelená → azurová → tmavě modrá) */
  --holcim-grad-green: #94C12E;
  --holcim-grad-cyan:  #04BBF1;
  --holcim-grad-blue:  #1D4370;
  --holcim-gradient: linear-gradient(100deg,
    #94C12E 15%, #7BC04F 25%, #36BDAE 41%, #04BBF1 50%,
    #08ABE0 67%, #117DAF 86%, #1D4370 100%);

  /* Stavové barvy (Bootstrap základ použitý na webu Holcim) */
  --holcim-success: #28A745;
  --holcim-danger:  #DC3545;
  --holcim-info:    #17A2B8;
}

body { font-family: var(--holcim-font); color: var(--holcim-text); background: var(--holcim-bg); }

/* ---------------------------------------------------------------------------
   Hlavička aplikace — mobile first, modrá a bílá.
   Základ = telefon. Desktop se dolaďuje až v @media (min-width: 768px).
   Tmavý pruh #041739 přebírá barvu headeru z webu holcim.cz.
   --------------------------------------------------------------------------- */

.app-header {
  background: var(--holcim-navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  /* bezpečná zóna pod výřezem na iPhonu při běhu jako PWA */
  padding-top: env(safe-area-inset-top);
  height: calc(56px + env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-header__logo { height: 22px; display: block; }
.app-header__divider { display: none; }
.app-header__title { display: none; }
.app-header__spacer { flex: 1; }
.app-header__points { font-weight: 700; font-size: 16px; white-space: nowrap; }
.app-header__user { display: none; }
.app-header__logout { font-size: 14px; color: rgba(255, 255, 255, .8); text-decoration: none; }
.app-header__logout:hover { color: #fff; text-decoration: underline; }

/* Navigace: na telefonu vodorovně rolovatelný pruh, prsty-friendly cíle */
.app-nav {
  display: flex;
  gap: 20px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid var(--holcim-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a {
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: var(--holcim-muted);
  white-space: nowrap;
  padding: 14px 0 11px;
  border-bottom: 3px solid transparent;
}
.app-nav a.is-active { color: var(--holcim-navy); border-bottom-color: var(--holcim-blue); }

@media (min-width: 768px) {
  .app-header { height: 60px; gap: 18px; padding: 0 24px; position: static; }
  .app-header__logo { height: 24px; }
  .app-header__divider {
    display: block; width: 1px; height: 24px; background: rgba(255, 255, 255, .3);
  }
  .app-header__title { display: block; font-size: 16px; letter-spacing: .02em; }
  .app-header__user { display: block; font-size: 14px; color: rgba(255, 255, 255, .8); }
  .app-nav { gap: 28px; padding: 0 24px; overflow-x: visible; }
  .app-nav a { font-size: 14px; padding: 13px 0 10px; }
}