/* ==========================================================
   TK EKO – custom.css (Helix Ultimate + SP Page Builder)
   Palette: blue-grey
   Headings: #424B54
   Body text: #58626D
   ========================================================== */
/* ==================================================
   TYPOGRAFIE NADPISŮ – HIND
   ================================================== */

/* H1 – hero / page title */
h1{
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:clamp(40px, 4.2vw, 72px);
  line-height:clamp(48px, 4.8vw, 82px);
}

/* H2 – section title */
h2{
  font-weight:600;
  letter-spacing:-0.015em;
  font-size:clamp(30px, 3.0vw, 48px);
  line-height:clamp(38px, 3.6vw, 58px);
}

/* H3 – block title / cards */
h3{
  font-weight:600;
  letter-spacing:-0.01em;
  font-size:clamp(22px, 2.2vw, 32px);
  line-height:clamp(30px, 2.6vw, 40px);
}

/* H4 – smaller section heading */
h4{
  font-weight:500;
  letter-spacing:-0.005em;
  font-size:clamp(18px, 1.7vw, 24px);
  line-height:clamp(26px, 2.0vw, 32px);
}

/* H5 – label / small heading */
h5{
  font-weight:500;
  letter-spacing:0;
  font-size:clamp(16px, 1.25vw, 18px);
  line-height:clamp(22px, 1.6vw, 26px);
}


/* =========================
   1) GLOBAL PALETTE (CSS variables)
   ========================= */
:root{
  /* Brand – blue-grey */
  --brand-600:#58626D;   /* lighter (top gradient) */
  --brand-700:#424B54;   /* darker (bottom gradient) */

  /* Accents – blue-grey (no orange) */
  --accent-500:#6B86A1;
  --accent-600:#556F89;
  --accent-700:#3F566E;

  /* Backgrounds */
  --bg-0:#FFFFFF;
  --bg-50:#F4F6F8;
  --bg-100:#E9EDF1;

  /* Surfaces */
  --surface-0:#FFFFFF;
  --surface-50:#F7F9FB;
  --surface-100:#EFF3F6;

  /* Borders / dividers */
  --border-200:#D5DBE1;
  --border-300:#C7CED6;
  --divider-300:#AEB6BF;

  /* Text */
  --text-900:#58626D;    /* default body text per your request */
  --text-700:#4F5A66;    /* slightly darker muted alt (optional) */
  --text-500:#6D7A88;    /* muted */
  --text-inv:#FFFFFF;

  /* Headings */
  --heading-900:#424B54; /* per your request */
  --heading-700:#4B525B;

  /* Links */
  --link-500:var(--accent-500);
  --link-600:var(--accent-600);

  /* Icons */
  --icon-500:#8A94A0;
  --icon-inv:rgba(255,255,255,.92);

  /* Effects */
  --shadow-1:0 6px 16px rgba(0,0,0,.08);
  --shadow-2:0 12px 30px rgba(0,0,0,.12);
  --shadow-3:0 18px 46px rgba(0,0,0,.16);

  --radius-xs:8px;
  --radius-sm:12px;
  --radius:14px;
  --radius-lg:18px;
}


/* =========================
   2) BASE TYPOGRAPHY (defaults)
   - Keep low specificity so SPPB can override when needed
   ========================= */
body{
  color:var(--text-900);
  background:var(--bg-0);
  line-height:1.7;
}

/* Paragraphs / lists
p{
  color:var(--text-900);
  margin:0 0 1em 0;
}*/

li{
  color:var(--text-900);
  line-height:1.6;
}

/* Links */
a{
  color:var(--link-500);
  text-decoration:none;
}
a:hover{
  color:var(--link-600);
  text-decoration:underline;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color:var(--heading-900);
  line-height:1.25;
  margin:0 0 .6em 0;
}

/* Weight hierarchy */
h1{ font-weight:700; }
h2{ font-weight:600; }
h3{ font-weight:600; }
h4{ font-weight:500; }
h5{ font-weight:500; color:var(--text-900); line-height:1.3; }
h6{ font-weight:500; color:var(--text-900); line-height:1.3; }

/* Optional sizing (uncomment if you want global sizing control)
h1{ font-size:clamp(2.2rem, 3vw, 3rem); }
h2{ font-size:clamp(1.8rem, 2.4vw, 2.4rem); }
h3{ font-size:1.6rem; }
h4{ font-size:1.35rem; }
h5{ font-size:1.15rem; }
h6{ font-size:1rem; }
*/


/* =========================
   3) UTILITIES (SPPB-friendly)
   - Use in the "Class" field of sections/rows/addons
   ========================= */

/* Background utilities */
.bg-white{ background:var(--bg-0) !important; }
.bg-soft{ background:var(--bg-50) !important; }
.bg-soft-2{ background:var(--bg-100) !important; }
.bg-surface{ background:var(--surface-50) !important; }
.bg-surface-2{ background:var(--surface-100) !important; }

/* Text utilities */
.text-dark{ color:var(--heading-900) !important; }
.text-body{ color:var(--text-900) !important; }
.text-muted{ color:var(--text-500) !important; }
.text-inv{ color:var(--text-inv) !important; }

/* Border utilities */
.border-soft{ border:1px solid var(--border-200) !important; }
.border-soft-2{ border:1px solid var(--border-300) !important; }

/* Radius */
.round-xs{ border-radius:var(--radius-xs) !important; }
.round-sm{ border-radius:var(--radius-sm) !important; }
.round{ border-radius:var(--radius) !important; }
.round-lg{ border-radius:var(--radius-lg) !important; }

/* Shadows */
.shadow-1{ box-shadow:var(--shadow-1) !important; }
.shadow-2{ box-shadow:var(--shadow-2) !important; }
.shadow-3{ box-shadow:var(--shadow-3) !important; }

/* Spacing helpers */
.p-16{ padding:16px !important; }
.p-24{ padding:24px !important; }
.p-32{ padding:32px !important; }
.py-24{ padding-top:24px !important; padding-bottom:24px !important; }
.py-32{ padding-top:32px !important; padding-bottom:32px !important; }
.px-24{ padding-left:24px !important; padding-right:24px !important; }


/* =========================
   4) COMPONENTS
   ========================= */

/* 4.1 Brand box (dark gradient, white text) */
.box-brand{
  background:linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%) !important;
  color:var(--text-inv) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-2) !important;
  border:1px solid rgba(255,255,255,.08);
}

/* Ensure all common text elements inside are white */
.box-brand p,
.box-brand li,
.box-brand h1,
.box-brand h2,
.box-brand h3,
.box-brand h4,
.box-brand h5,
.box-brand h6{
  color:var(--text-inv) !important;
}

/* Muted text inside dark box */
.box-brand .muted{
  color:rgba(255,255,255,.78) !important;
}

/* Icons inside dark box */
.box-brand .sppb-icon,
.box-brand i,
.box-brand svg{
  color:var(--icon-inv) !important;
  fill:currentColor;
}

/* 4.2 Cards */
.card{
  background:var(--surface-0) !important;
  border:1px solid var(--border-200) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-1) !important;
}
.card-soft{
  background:var(--surface-50) !important;
  border:1px solid var(--border-200) !important;
  border-radius:var(--radius) !important;
}

/* 4.3 Buttons (works with .sppb-btn) */
.btn-accent,
.sppb-btn.btn-accent{
  background:var(--accent-500) !important;
  border-color:var(--accent-500) !important;
  color:#fff !important;
  border-radius:12px !important;
  box-shadow:var(--shadow-1) !important;
}
.btn-accent:hover,
.sppb-btn.btn-accent:hover{
  background:var(--accent-600) !important;
  border-color:var(--accent-600) !important;
  color:#fff !important;
}

.btn-outline,
.sppb-btn.btn-outline{
  background:transparent !important;
  border:1px solid var(--accent-500) !important;
  color:var(--accent-500) !important;
  border-radius:12px !important;
}
.btn-outline:hover,
.sppb-btn.btn-outline:hover{
  background:var(--accent-500) !important;
  color:#fff !important;
}

/* 4.4 Badges */
.badge{
  display:inline-block;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.85rem;
  border:1px solid var(--border-200);
  background:var(--surface-50);
  color:var(--text-900);
}
.badge-accent{
  border-color:rgba(107,134,161,.35);
  background:rgba(107,134,161,.12);
  color:var(--accent-700);
}

/* 4.5 Divider */
.hr{
  height:1px;
  background:var(--border-200);
  border:0;
}


/* =========================
   5) SAFETY: prevent unwanted inherited white text
   - If some SPPB sections set color:#fff on wrapper by mistake,
     add a class "text-reset" to the section to restore defaults.
   ========================= */
.text-reset{
  color:var(--text-900) !important;
}
.text-reset p,
.text-reset li,
.text-reset h1,
.text-reset h2,
.text-reset h3,
.text-reset h4,
.text-reset h5,
.text-reset h6{
  color:inherit !important; /* inherit from .text-reset */
}


/* =========================*/

#sp-page-builder .page-content .sppb-section:not(div.sppb-section):first-child {
    margin-top: -100px;
}

#sp-header {
    box-shadow: none !important
}

.btn-primary,.sppb-btn-primary {
    border-color: #ffffff;
    background-color: #434c55;
}

.btn-primary:hover,.sppb-btn-primary:hover {
    border-color: #57616c;
    background-color: #57616c;
}

/* Tablet landscape – obrázek na 50 % */
@media (min-width: 992px) and (max-width: 1199px)
{.img-half-tablet{
    width: 45%;
    max-width: 45%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    box-shadow: none !important;
    margin-top: -40px;
}

.burger-icon>span {
    background-color: #ffffff;
}

.offcanvas-active .burger-icon>span, #modal-menu-toggler.active .burger-icon>span {
    background-color: #ffffff;
}


/* =========================
   6) OPTIONAL: Header/Menu/Footer (leave to Helix Preset unless needed)
   - Uncomment only if you want to force these colors via CSS.
   ========================= */
/*
#sp-header{
  background:var(--brand-700) !important;
}
#sp-header .logo,
#sp-header .logo a{
  color:#fff !important;
}
#sp-header .sp-megamenu-parent > li > a{
  color:#fff !important;
}
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li.active > a{
  color:var(--accent-500) !important;
}
#sp-header .sp-dropdown{
  background:var(--brand-600) !important;
}
#sp-header .sp-dropdown li a{
  color:#fff !important;
}
#sp-header .sp-dropdown li a:hover{
  color:var(--accent-500) !important;
}

#sp-footer{
  background:#2F3338 !important;
  color:#C7CED6 !important;
}
#sp-footer a{
  color:#9FB4C8 !important;
}
#sp-footer a:hover{
  color:var(--accent-500) !important;
}
*/