/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
html {
  margin: 0;

  padding: 0;
  /* NEchat výchozí overflow (visible / auto) */
}
html, body {
  min-height: 100%;
}

body {
  background: #fff;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;        /* místo height:100% na html+body */
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  overflow-x: hidden;       /* ⬅ tady schováš horizontální scroll */
}

main {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;


}




/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
:root {
  --stagger: 0ms;
  --parallaxY: 0px;
  --parallaxScale: 1;
}


textarea {
  resize: vertical;
}
/* HAMBURGER TLAČÍTKO */
.nav_toggle {
  display: none;               /* zobrazí se až v @media */
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.06);

  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease;
}
.toogle_flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  align-items: center;
}

.nav_toggle:hover {
  background: rgba(0,0,0,0.10);
}

.nav_toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  background: #000;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    width 0.25s ease;
}

/* ANIMACE NA KŘÍŽEK */
body.nav-open .nav_toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  width: 24px;
}

body.nav-open .nav_toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav_toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  width: 24px;
}

/* Zobrazení hamburgeru na mobilech */
@media (max-width: 900px) {
  .nav_toggle {
    display: flex;
  }
}



/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

.main_container {


  flex: 1; /* místo pevné výšky */
  display: flex;
  flex-direction: column;

}
body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;

}
p {
  font-weight: 300; /* jemnější, modernější */
}


h1, h2, h3 {
  font-family: 'Poppins', sans-serif;

}
.nav_list a,
button,
.main_button {
  font-family: 'Inter', sans-serif;
  font-weight: 500; /* trochu silnější, ale ne přehnané */
}



/* ===== MODERNÍ NAVIGACE ===== */

.main_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2em 5em;
  position: relative;
  z-index: 10;
  background: transparent;
}

.main_nav h1 {
  font-size: 22px;
  font-weight: 600;
  color: #0a0a0a;
}

.main_nav h1 span {
  display: block;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 2px;
}

/* NAV UL */
.nav_list {
  display: flex;

  align-items: center;
  gap: .5em;
}

/* ODKAZY */
.nav_list a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  opacity: 0.6;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  transition: all 240ms ease;
  font-size: 0.95rem;
}
.nav_list li {
  list-style: none;
}

/* HOVER EFEKT */
.nav_list a:hover {
  opacity: 1;
  background: rgba(0, 83, 177, 0.08);
  transform: translateY(-1px);
}

/* AKTIVNÍ POLOŽKA */
.nav_list li.active a {
  color: #fff;
  opacity: 1;
  background: linear-gradient(180deg, #4F9CF9 0%, #0053B1 100%);
  border-radius: 999px;
  font-weight: 600;
  padding: 0.45em 1.1em;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(0);
}

/* HOVER NA AKTIVNÍ */
.nav_list li.active a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* TLAČÍTKO KONTAKT */
.main_button {
  background: linear-gradient(180deg, #4F9CF9 0%, #0053B1 100%);
  padding: 0.8em 1.4em;
  border-radius: 999px;
  font-size: 0.95rem;
}

.main_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}


.content {
  display: grid;
  background: linear-gradient(180deg, #0053B1 0%, #00234B 100%);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 5em;

}
.content__contact{
  display: grid;
  background: linear-gradient(180deg, #0053B1 0%, #00234B 100%);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 5em 5em 13em 5em;

}
.content h1 {
  color: #fff;
  font-size: 50px;

}
.content p {
  color: #fff;
  margin-top: 1em;
}

.content img {
  width: 450px;
  height: auto;
  border-radius: 25px;
  rotate: 5deg;
}
.content_gridOne {

  align-items: center;
  margin-top: 3em;
}

.content_gridTwo {
  align-items: center;
  margin-top: 3em;
  display: flex;
  justify-content: right;


}

.main_button {
  background: linear-gradient(180deg, #4F9CF9 0%, #0053B1 100%);
  color: #fff;
  padding: 1.5em 1.5em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 1em;
}
.main_button a{
  text-decoration: none;
  color: white;
}
.aboutMe_grid {
  background-color: white;
  margin: 5em;
  display: grid;


  grid-template-columns: 1fr 1fr;
}
.iframe{
  margin-top: 2em;
}
.grid-item1.img{
  align-items: center;
  display: flex
}
.grid-item1 img{
  width: 500px;
  height: auto;
  border-radius: 25px;
}
.ordinace__p{
  margin-bottom: 2em;
}

.products{
  background: linear-gradient(180deg, #0053B1 0%, #00234B 100%);
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5em;
}
.products__gallery{
  display: grid;
  margin: 0 5em 5em 5em;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  justify-content: center;
  align-items: center;
}
.products h2{
  color: white;
  font-size: 35px;
}

.product__card{
  background-color: white;
  border-radius: 15px;
  height: 80px;
  align-items: center;
  justify-content: center;
  display: flex;
  text-align: center;
}
.product__card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .products {
    padding: 3em 1.5em 3.5em 1.5em;
  }

  .products h2 {
    font-size: 28px;
  }

  .products__gallery {
    gap: 1.1em;
  }

  .product__card {
    padding: 1.1em 1.2em;
  }

  .product__card h3 {
    font-size: 0.95rem;
  }
}
.address_name{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;

  align-items: flex-start;
  justify-content: flex-start;
}
.address_name h3{
  margin: 0;
  align-self: center;
}
.address_name img {
  width: 60px;
  height: auto;

}


.ordinace_about{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.site-footer {
  background: radial-gradient(circle at top left, #4F9CF9 0%, #00234B 40%, #00142A 100%);
  color: #ffffff;
  padding: 3em 5em 2em 5em;

  font-size: 0.95rem;
}

.footer_inner {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 2em;
}

.footer_brand h2 {
  font-size: 24px;
  margin: 0 0 0.5em 0;
}

.footer_brand p {
  margin: 0;
  max-width: 360px;
  line-height: 1.6;
}

.footer_nav h3,
.footer_contact h3 {
  font-size: 16px;
  margin: 0 0 0.75em 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  opacity: 0.9;
}

.footer_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer_nav li + li {
  margin-top: 0.35em;
}

.footer_nav a {
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  transition: opacity 160ms ease, transform 160ms ease;
}

.footer_nav a:hover {
  opacity: 1;
  transform: translateX(2px);
}

.footer_contact p {
  margin: 0 0 0.75em 0;
}

.footer_contact a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
}

.footer_contact a:hover {
  text-decoration: underline;
}

.footer_cta {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  background: linear-gradient(180deg, #4F9CF9 0%, #0053B1 100%);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.footer_cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.footer_bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.3em;
  font-size: 0.8rem;
  opacity: 0.8;
}
.footer_bottom a {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer_bottom a:hover {
  opacity: 1;
  text-decoration: underline;
}


/* Mobile / tablet úpravy footeru */
@media (max-width: 900px) {
  .site-footer {
    padding: 2.5em 2em 2em 2em;
  }

  .footer_inner {
    flex-direction: column;
    gap: 2em;
  }

  .footer_bottom {
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
  }
}


.grid-item1 h2{

  font-size: 50px;
  margin: 0;
}

.grid-item2 h2{
  margin: 0;
  font-size: 50px;
}

.element{
  margin-top: -2em;
}
.element2{
  margin-top: -2em;
}


/* ========= DOPLŇKY ANIMACÍ (vložit NA KONEC souboru) ========= */

/* Plynulé scrollování + bezpečný offset pro kotvy (ID sekcí) */
html { scroll-behavior: smooth; }
#moje-pomoc, #sluzby { scroll-margin-top: 96px; } /* uprav podle výšky menu */

/* Jemná změna nav po scrollu (JS přidá .scrolled – nezasahuje do layoutu) */
.main_nav {
  transition: background 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease;
}
.main_nav.scrolled {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Horní progress linka čtení (JS jen mění scaleX) */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9999; pointer-events: none;
}
.scroll-progress::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #6AA0FF, #7EE2C7, #B079FF);
}

/* Reveal animace prvků při vstupu do viewportu (IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms),
    transform 600ms cubic-bezier(.2,.7,.2,1) var(--stagger, 0ms);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Vylepšený parallax + plynulý fade-in */
.content_gridTwo img {
  transform: rotate(5deg)
  translateY(var(--parallaxY, 0))
  scale(var(--parallaxScale, 1));
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.4s ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.2));
}


/* Karty služeb – jemná elevace a příprava na 3D tilt z JS (nepřekresluje layout) */
.product__card {
  transition: box-shadow 240ms ease, transform 240ms ease;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}
.product__card:hover {
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
}

/* Ripple efekt pro .main_button (JS vkládá element .ripple) */
.main_button { position: relative; overflow: hidden; }
.main_button .ripple {
  position: absolute; border-radius: 50%;
  transform: scale(0); opacity: 0.35; background: currentColor;
  animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
  to { transform: scale(2.2); opacity: 0; }
}

/* Jemná „nádechová“ animace pro aktivní položku v menu (volitelné) */
.nav_list li.active a {
  transition: transform 180ms ease;
}
.nav_list li.active a:hover {
  transform: translateY(-1px);
}