/*
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;
}

/* 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;
  }
}