/* KomunikujiLépe.cz — minimal warm theme (Bootstrap 5 + custom)
   Accent: blue, warm background, lots of whitespace, simple shapes.
*/

:root{
  --kl-accent: #2f6bff;
  --kl-ink: #1f2937;
  --kl-muted: #667085;
  --kl-warm: #fbf7f2;
  --kl-card: #ffffff;
  --kl-line: rgba(31,41,55,.10);
  --kl-soft: rgba(47,107,255,.10);
  --kl-radius: 18px;
}



/* ============================================================================
   LARGE-SCREEN TYPOGRAPHY SCALING (HD / 2K / 4K)
   ----------------------------------------------------------------------------
   Goal:
     Make text, bars and controls comfortably larger on big monitors (1080p+),
     while keeping mobile sizing unchanged.

   Why `html { font-size }`:
     Bootstrap uses rem units extensively, so increasing the root font-size
     scales typography, spacing, buttons, navbars and form controls together.

   Container width:
     On 2K/4K screens, the default container can feel narrow. We gently raise
     max-width so the layout doesn't look tiny in the center.

   Safety:
     - Baseline stays 16px (Bootstrap default)
     - Scaling starts at 1200px, so small screens aren't touched
   ============================================================================ */

html { font-size: 16px; } /* explicit baseline */

@media (min-width: 1200px) { html { font-size: 17px; } }
@media (min-width: 1400px) { html { font-size: 18px; } }   /* big laptops / desktop */
@media (min-width: 1920px) { html { font-size: 19px; } }   /* Full HD */
@media (min-width: 2560px) { html { font-size: 21px; } }   /* 2K / QHD */
@media (min-width: 3840px) { html { font-size: 22px; } }   /* 4K */

/* Wider containers for big screens (still centered) */
@media (min-width: 1920px) { .container { max-width: 1380px; } }
@media (min-width: 2560px) { .container { max-width: 1560px; } }
@media (min-width: 3840px) { .container { max-width: 1720px; } }

html{ scroll-behavior: smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color: var(--kl-ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--kl-warm) 100%);
}

/* Navbar: clean, warm, with brand hidden at top (hero already carries brand) */
.navbar{
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kl-line);
}

.navbar .navbar-brand{
  /* NOTE: We intentionally do NOT set text size here.
     Reason: the brand/logo ("KomunikujiLépe.cz") must NOT be scaled via CSS sizing rules by the landing comfort tweaks.
     Only nav links/buttons and hero text/controls are scaled. */
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  transition: opacity .25s ease, transform .25s ease;
}

.navbar .navbar-brand small{
  display:block;
  font-weight: 700;
  color: var(--kl-muted);
  letter-spacing: 0;
  margin-top: .12rem;
}

.brand-accent{ color: var(--kl-accent); }

.navbar.at-top .navbar-brand{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.nav-link{
  font-weight: 700;
  color: rgba(31,41,55,.85) !important;
}
.nav-link:hover{ color: var(--kl-accent) !important; }

/* Language buttons: subtle pills */
.lang-btn{
  border: 1px solid var(--kl-line);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .55rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  font-weight: 800;
  color: rgba(31,41,55,.9);
}
.lang-btn .flag{ font-size: 1rem; line-height:1; }
.lang-btn .code{ font-size: .86rem; letter-spacing: .02em; }
.lang-btn.active{
  border-color: rgba(47,107,255,.35);
  background: var(--kl-soft);
  color: var(--kl-accent);
}

/* Sections */
.section{
  padding: 4.5rem 0;
}
.anchor{ scroll-margin-top: 92px; }

.section-title{
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: .6rem;
}
.lead{
  color: var(--kl-muted);
  max-width: 68ch;
}

/* Hero: centered brand, calm, brief */
.hero{
  min-height: calc(100vh - 86px);
  display:flex;
  align-items:center;
  padding: 4.5rem 0 3.5rem 0;
}

.hero-brand{
  font-weight: 950;
  letter-spacing: -0.05em;
  line-height: 0.95;
}
.hero-role{
  font-weight: 800;
  color: var(--kl-muted);
  letter-spacing: .01em;
}
.hero-sub{
  color: var(--kl-muted);
  max-width: 64ch;
  margin: 1rem auto 0 auto;
}

/* ============================================================================
   SOCIAL BUTTONS (Kontakt / left card)
   ----------------------------------------------------------------------------
   Requirements from spec:
     - Buttons with icons + names (WhatsApp / Telegram / Facebook)
     - Style must align with the site's minimal warm theme (blue accent, pill shapes)
     - The 'nofollow' behavior is applied ONLY to the social links (handled in HTML)
   Notes:
     - We keep sizing modest so it doesn't overpower the contact methods.
     - Uses Bootstrap's .btn + .btn-outline-primary and just tweaks spacing/shape.
============================================================================ */
.kl-social-btn{
  border-radius: 999px; /* match the site's rounded CTA vibe */
  font-weight: 800;
  padding: .55rem .9rem;
  display: inline-flex;
  align-items: center;
}
.kl-social-btn i{
  /* Slightly bigger icon to keep it readable at large-monitor sizes */
  font-size: 1.05em;
  line-height: 1;
}
@media (min-width: 992px){
  .kl-social-btn{ padding: .6rem 1rem; }
}

.hero-actions .btn{
  border-radius: 999px;
  font-weight: 900;
  padding: .8rem 1.1rem;
}

.btn-kl{
  border-radius: 999px;
  font-weight: 900;
  padding: .75rem 1.05rem;
}
.btn-kl-primary{
  background: var(--kl-accent);
  border: 1px solid var(--kl-accent);
  color:#fff;
}
.btn-kl-primary:hover{ filter: brightness(.97); }
.btn-kl-outline{
  background: #fff;
  border: 1px solid rgba(47,107,255,.28);
  color: var(--kl-accent);
}
.btn-kl-outline:hover{ background: rgba(47,107,255,.07); }

.hr-soft{
  border: none;
  height: 1px;
  background: var(--kl-line);
  margin: 1.25rem 0;
}

/* Cards: minimal outlines */
.kl-card{
  background: var(--kl-card);
  border: 1px solid var(--kl-line);
  border-radius: var(--kl-radius);
  padding: 1.25rem;
}
.kl-card h5{ font-weight: 900; letter-spacing: -0.02em; }
.kl-card p{ color: var(--kl-muted); margin-bottom: 0; }

/* About photo: circular */
.avatar{
  width: 220px;
  height: 220px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--kl-line);
  background: #fff;
}
.avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.avatar-caption{
  color: var(--kl-muted);
  font-weight: 800;
  margin-top: .6rem;
}

/* FAQ */
.accordion-button{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.accordion-button:not(.collapsed){
  color: var(--kl-accent);
  background: rgba(47,107,255,.06);
}
.accordion-item{
  border: 1px solid var(--kl-line);
  border-radius: 14px;
  overflow:hidden;
  background: #fff;
}
.accordion-item + .accordion-item{ margin-top: .6rem; }

/* Contact */
.form-control, .form-select{
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.16);
  padding: .78rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(47,107,255,.45);
  box-shadow: 0 0 0 .25rem rgba(47,107,255,.12);
}
.contact-row{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
}
.icon-dot{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,107,255,.10);
  border: 1px solid rgba(47,107,255,.16);
  color: var(--kl-accent);
  flex: 0 0 auto;
}

.phone-prefix{
  font-size: .88em;
  color: rgba(102,112,133,.95);
  letter-spacing: .05em;
}
.phone-rest{ font-weight: 900; }

footer{
  border-top: 1px solid var(--kl-line);
  padding: 2.25rem 0;
  color: var(--kl-muted);
  background: rgba(255,255,255,.65);
}
.smallprint{ font-size: .95rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* --- v4 tweaks: slightly bigger center title + more breathing room for the role line --- */
.hero-brand{
  /* Bigger than before but still responsive */
  font-size: clamp(3.4rem, 9vw, 6.2rem);
}
.hero-role{
  /* More vertical space around "Vztahový poradce" */
  padding: .65rem 0 .35rem 0;
  margin-bottom: .9rem;
}

/* v5 note: hero title size is controlled via clamp() in the v4 tweaks override block.
   This keeps the centered brand large without breaking small screens. */


/* ============================================================================
   LARGE-SCREEN NAV/CONTROLS TWEAKS
   ----------------------------------------------------------------------------
   Root font scaling already increases sizes. These tweaks add slightly larger
   hit areas and spacing on desktop.
   ============================================================================ */
@media (min-width: 1400px) {
  .navbar .nav-link { padding-top: .65rem; padding-bottom: .65rem; }
  .lang-btn { padding: .45rem .70rem; }
}
@media (min-width: 1920px) {
  .section { padding: 5.25rem 0; }
  .kl-card { padding: 1.45rem; }
}


/* ============================================================================
   BRAND LINK STYLING
   ----------------------------------------------------------------------------
   We wrap the large hero brand text in an <a> so it behaves like a "logo link".
   However, we do NOT want it to look like a typical underlined hyperlink.
   This keeps the design warm and minimal, while still making the brand clickable.
   ============================================================================ */
.brand-link {
  color: inherit;
  text-decoration: none;
}
.brand-link:hover {
  color: inherit;
  text-decoration: none;
}
.brand-link:focus {
  outline: 2px solid rgba(0,0,0,.15); /* subtle focus ring; Bootstrap handles focus too */
  outline-offset: 4px;
  border-radius: .5rem;
}

/* ============================================================================
   LANDING COMFORT SCALE (GLOBAL, EXCEPT LOGO)
   ----------------------------------------------------------------------------
   Requirement:
     "Make all landing page text and controls a little bigger for ALL screen
     sizes, except for the KomunikujiLépe.cz logo."

   Interpretation:
     - Landing page = top navbar + hero section (#top)
     - Controls = nav links, language buttons, hero CTA buttons
     - Exclusion = do NOT change .hero-brand / .navbar-brand font-size

   Implementation:
     - We add modest, targeted font-size and padding adjustments.
     - We DO NOT touch html{font-size} here (that would also affect the logo).
     - Large-screen root scaling (added earlier) still applies, but these are
       additional "comfort" tweaks that remain subtle.
   ============================================================================ */

/* Navbar links and language buttons: slightly larger, but keep brand/logo as-is */
.navbar .nav-link {
  font-size: 1.02rem;           /* +2%: visible but not loud */
  padding-top: .70rem;
  padding-bottom: .70rem;
}

.lang-btn {
  font-size: .98rem;            /* slightly bigger labels */
  padding: .56rem .86rem;       /* bigger click target */
}

/* Hero (landing) text + CTAs: increase readability without touching the logo */
#top .hero-role {
    padding-top: .90rem;
font-size: 1.55rem;           /* was Bootstrap h5; keep it "headline-ish" */
  margin-top: .25rem;
}

#top .hero-sub {
  font-size: 1.06rem;           /* main landing paragraph */
  line-height: 1.75;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;            /* calmer rhythm */
}

#top .hero-actions .btn {
  font-size: 1.02rem;
  padding: .82rem 1.28rem;
}

#top .smallprint {
  font-size: .96rem;
}


/* =========================================================================
   LANDING COMFORT SCALE v2 (GLOBAL, EXCEPT LOGO)
   -------------------------------------------------------------------------
   Goal:
     - Make landing text/controls slightly larger than v8 on ALL screen sizes,
       while keeping it tasteful (readable, not cartoonishly huge).
     - IMPORTANT: We intentionally DO NOT change the logo size. Therefore:
         * we do NOT style .hero-brand or .navbar-brand here
         * we only scale nav links, language buttons, and hero text/buttons
   ========================================================================= */

.navbar .nav-link{
  font-size: 1.10rem;
  padding-top: .70rem;
  padding-bottom: .70rem;
}

.lang-btn{
  /* Keep the pill feel, but make it easier to tap / read */
  font-size: 1.06rem;
  padding: .40rem .62rem;
}

/* HERO / LANDING TEXT */
#top .hero-role{
  /* "Vztahový poradce" -> a bit more breathing room + slightly bigger */
  font-size: 1.55rem;
  padding-top: .95rem; /* requested extra top padding */
  line-height: 1.25;
}

#top .hero-sub{
  font-size: 1.14rem;
  line-height: 1.85;      /* readability */
  max-width: 52rem;       /* avoid overly long line length */
  margin-left: auto;
  margin-right: auto;
}

#top .smallprint{
  font-size: 1.00rem;
  line-height: 1.65;
}

#top .hero-actions .btn{
  font-size: 1.06rem;
  padding: .82rem 1.28rem;
}

/* Optional: a tiny bump for FAQ accordion controls (small, but helps) */
.accordion-button{
  font-size: 1.02rem;
}