/*
Theme Name: Salient Child Theme
Description: fialab child theme — mobile fixes, palette refinements, side-dot nav.
Template: salient
Version: 1.1
*/

/* ================================================================
   fialab palette (source of truth is Salient → Theme Options →
   Accent Colors; these vars mirror it for use in this stylesheet):
     --fialab-deep    #2d1854
     --fialab-mid     #7e22ce  (was #6b3fa0 — cleaner purple, less indigo)
     --fialab-light   #a855f7  (was #b060a0 — less pink, more true violet)
   ================================================================ */
:root {
  --fialab-deep:  #2d1854;
  --fialab-mid:   #7e22ce;
  --fialab-light: #a855f7;
}

/* ----------------------------------------------------------------
   Anchor scroll offset
   The site uses a fixed header — jumping to #pristup / #reference /
   #sluzby would otherwise be partially covered. scroll-margin-top
   pushes the anchor target down by (roughly) the header height so
   the content is fully visible. Different value on mobile (smaller header).
   ---------------------------------------------------------------- */
#pristup,
#reference,
#sluzby {
  scroll-margin-top: 130px;
}
@media only screen and (max-width: 999px) {
  #pristup, #reference, #sluzby {
    scroll-margin-top: 95px;
  }
}

/* ----------------------------------------------------------------
   HERO — hexagon motif ON THE PURPLE CARD ONLY.
   The logo is made of hexagons; we echo that as a subtle pattern
   overlaid on the purple hero-image card. Keeping it scoped to the
   card (not the whole row) means the motif complements the card's
   purple gradient without competing with the logo in the header.
   ---------------------------------------------------------------- */

/* Attach the hexagon layer to the purple card's built-in overlay-wrap.
   Salient's markup for that column:
     .vc_col-sm-12.nectar-mask-reveal > .vc_column-inner
       > .column-bg-overlay-wrap > (.column-bg-overlay + .column-overlay-layer)
   The overlay-wrap is positioned:absolute inside the card, sized to fill it,
   so adding a background here paints the hex pattern across the card face
   BELOW the animated-shape and image (higher z-index in .wpb_wrapper). */
.wpb_row.vc_row-o-full-height.top-level
  .col-overflow-hidden.nectar-mask-reveal
  .column-bg-overlay-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='138' viewBox='0 0 120 138'><g fill='none' stroke='%23ffffff' stroke-opacity='0.13' stroke-width='1'><polygon points='60,4 116,34.5 116,103.5 60,134 4,103.5 4,34.5'/><polygon points='0,-65 56,-34.5 56,34.5 0,65 -56,34.5 -56,-34.5'/><polygon points='120,-65 176,-34.5 176,34.5 120,65 64,34.5 64,-34.5'/><polygon points='0,73 56,103.5 56,172.5 0,203 -56,172.5 -56,103.5'/><polygon points='120,73 176,103.5 176,172.5 120,203 64,172.5 64,103.5'/></g></svg>");
  background-size: 120px 138px;
  background-position: center;
  background-repeat: repeat;
  /* Fade the pattern out toward the bottom-right so the hero image doesn't fight it */
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0.6) 65%, transparent 100%);
          mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0.6) 65%, transparent 100%);
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Hero hexagon (replacement for the original circle) — slow rotation
   makes the hexagon shape read even when only a corner is visible.
   Transform-origin is the SVG viewbox center; Salient's grow-in
   animation on the parent still runs because it targets a different
   element (.nectar-animated-shape__inner_wrap).
   ---------------------------------------------------------------- */
.wpb_row.vc_row-o-full-height.top-level .nectar-animated-shape__inner svg {
  transform-origin: 50% 50%;
  animation: fialab-hex-rotate 60s linear infinite;
}
@keyframes fialab-hex-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wpb_row.vc_row-o-full-height.top-level .nectar-animated-shape__inner svg {
    animation: none;
  }
}

/* ----------------------------------------------------------------
   Footer alignment — after removing the Sociální sítě column, the
   surviving Kontakt column carries 3 nectar-cta items (tel, mail,
   address). Even them up so their spacing / underline effect looks
   consistent, and prevent the first one from being pushed down by
   Salient's inline `margin-top: 10px`.
   ---------------------------------------------------------------- */
.wpb_row.inner_row.vc_row-o-equal-height .nectar-cta {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.wpb_row.inner_row.vc_row-o-equal-height > .row_col_wrap_12_inner
  > .wpb_column .wpb_wrapper > .nectar-cta:first-of-type {
  margin-top: 0 !important;
}
.wpb_row.inner_row.vc_row-o-equal-height .nectar-cta h4 {
  margin: 0;
  line-height: 1.5;
}
.wpb_row.inner_row.vc_row-o-equal-height .nectar-cta .link_wrap {
  padding: 0 !important;
}

/* Address link — make it visually match the tel/mail lines even though
   the target is an external map URL (no underline flicker). */
.wpb_row.inner_row.vc_row-o-equal-height .nectar-cta a[href*="maps.google.com"] {
  overflow-wrap: anywhere;
}

/* Copyright now sits alone in its row (Kontaktujte-nás CTA removed);
   center the © line so it doesn't hug the left edge of the page. */
.wpb_row.inner_row.vc_row-o-equal-height .nectar-responsive-text.nectar-link-underline-effect p {
  text-align: center;
}

/* ----------------------------------------------------------------
   Footer — hexagon "molecular" pattern overlay on the black bg.
   Echoes the logo's hexagon motif. Translucent white stroke on top
   of Salient's inline `background-color: #000000` so the pattern
   layers naturally over the fill (background-image + -color coexist).
   The SVG uses one central hexagon plus 4 corner hexagons offset
   by half a cell so the pattern tiles seamlessly.
   Targeted by the specific footer row id so no other row picks it up.
   ---------------------------------------------------------------- */
#fws_6a70d5bccc62b > .row-bg-wrap > .inner-wrap > .row-bg,
#fws_6a70d5bccc62b > .row-bg-wrap > .inner-wrap > .row-bg.using-bg-color,
#fws_6a70d5bccc62b .row-bg {
  background-color: #000000 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 150' width='130' height='150'><g fill='none' stroke='%23ffffff' stroke-opacity='0.22' stroke-width='1.2'><polygon points='65,4 122.5,37.5 122.5,112.5 65,146 7.5,112.5 7.5,37.5'/><polygon points='0,-71 57.5,-37.5 57.5,37.5 0,71 -57.5,37.5 -57.5,-37.5'/><polygon points='130,-71 187.5,-37.5 187.5,37.5 130,71 72.5,37.5 72.5,-37.5'/><polygon points='0,79 57.5,112.5 57.5,187.5 0,221 -57.5,187.5 -57.5,112.5'/><polygon points='130,79 187.5,112.5 187.5,187.5 130,221 72.5,187.5 72.5,112.5'/></g></svg>") !important;
  background-repeat: repeat !important;
  background-size: 130px 150px !important;
  background-position: center !important;
}

/* Soften the purple card shadow so it lifts off the page background. */
.wpb_row.vc_row-o-full-height.top-level .col-overflow-hidden.nectar-mask-reveal {
  box-shadow: 0 30px 60px -20px rgba(45, 24, 84, 0.35),
              0 12px 24px -8px rgba(126, 34, 206, 0.20);
}

/* ----------------------------------------------------------------
   HERO — mobile spacing + vertical centering
   The hero row's LEFT column has no phone-specific horizontal padding
   in the WPBakery shortcode, and the INNER row has `top_padding_phone_16pct`
   which visually pushes the slogan below the vertical center. Cut that
   padding and let the row's `content_placement="middle"` do its job.
   ---------------------------------------------------------------- */
@media only screen and (max-width: 690px) {
  .wpb_row.vc_row-o-full-height.top-level > .row_col_wrap_12 > .vc_col-sm-6:first-child {
    padding-left: 7vw !important;
    padding-right: 7vw !important;
  }
  /* Kill the 16% top padding on phones so the slogan centers */
  .wpb_row.vc_row-o-full-height.top-level .top_padding_phone_16pct {
    padding-top: 0 !important;
  }
  .wpb_row.vc_row-o-full-height.top-level .bottom_padding_phone_16pct {
    padding-bottom: 8% !important;
  }
  /* Loosen slogan line-height so 2-line H1 doesn't crowd its scribble */
  .nectar-highlighted-text.font_line_height_1-1em h1 {
    line-height: 1.25em !important;
  }
}

/* ----------------------------------------------------------------
   Bigger logo on mobile
   Header uses data-logo-height="60"; the wide logo reads too small
   on phones. Bump the max-height on tablet+phone.
   ---------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
  #logo img.stnd,
  #logo img.starting-logo,
  #header-outer #logo img {
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ----------------------------------------------------------------
   MOBILE — hide Salient's hamburger and off-canvas menu.
   The site is a one-pager; on mobile the section-dot navigator
   (below) replaces the menu entirely.
   ---------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
  #header-outer .slide-out-widget-area-toggle,
  .off-canvas-menu-container.mobile-only,
  #slide-out-widget-area,
  #slide-out-widget-area-bg {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   SECTION DOT NAVIGATOR — mobile-only floating scroll indicator.
   Injected by translate-content.py post-hoc into every export.
   HTML shape:
     <nav class="fialab-dot-nav" aria-label="Sections">
       <a href="#pristup"   data-label="Přístup"></a>
       <a href="#reference" data-label="Reference"></a>
       <a href="#sluzby"    data-label="Služby"></a>
     </nav>
   Only shown at <= 999px so it doesn't clash with the desktop menu.
   ---------------------------------------------------------------- */
.fialab-dot-nav {
  display: none;  /* shown only on mobile below */
}

@media only screen and (max-width: 999px) {
  .fialab-dot-nav {
    display: flex;
    position: fixed;
    top: 50%;
    right: 14px;
    z-index: 999;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 14px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(45, 24, 84, 0.15);
  }
  .fialab-dot-nav a {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(45, 24, 84, 0.25);
    transition: background 0.25s ease, transform 0.25s ease;
    position: relative;
  }
  .fialab-dot-nav a:hover {
    background: var(--fialab-mid);
    transform: scale(1.25);
  }
  .fialab-dot-nav a.is-active {
    background: var(--fialab-mid);
    transform: scale(1.35);
    box-shadow: 0 0 0 3px rgba(126, 34, 206, 0.2);
  }
  /* Tooltip label on hover — anchored to the LEFT of the dot */
  .fialab-dot-nav a::after {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    background: var(--fialab-deep);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .fialab-dot-nav a:hover::after,
  .fialab-dot-nav a.is-active::after {
    opacity: 1;
  }
}