/* ============================================================================
   storefront.css — SiteLab dark-luxe integration glue.
   Loaded AFTER theme.css. Holds the bits the static prototype didn't have but
   the real multi-page app needs:
     1. the Services nav dropdown (the prototype nav had no dropdown),
     2. the portal icon button,
     3. dark-theme overrides for the Bootstrap-based legal/portal/error pages
        that are reskinned (not rebuilt) into the dark palette.
   Tokens (--gold, --ink, --line, --paper, --radius, --ease) come from theme.css.
============================================================================ */

/* ---------- Nav: keep it sticky -------------------------------------------
   theme.css declares `.nav { position: sticky }` but a later blanket rule
   (`.utility-bar, .nav, header, section, footer { position: relative }`) clobbers
   it. Re-assert sticky here (loaded after theme.css) so the navbar stays pinned
   on scroll — the design's `.nav.scrolled` styles + scroll-progress bar intend it. */
.nav { position: sticky; top: 0; z-index: 1000; }
/* theme.css has a blanket `.utility-bar,.nav,header,section,footer{z-index:2}` that drops the
   nav to the same level as sections — later sections (and the mobile drawer's siblings) then
   paint over it. Re-assert a high z-index so the sticky bar + mobile drawer sit above content. */

/* ---------- Nav: Services dropdown ----------------------------------------
   The menu sits flush under the trigger (top:100%) with NO dead gap — the visual
   spacing is internal padding-top, which is part of the hoverable element, so moving
   the cursor from the link onto the items never crosses an un-hovered gap. */
.nav-links .has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 256px;
  list-style: none;
  margin: 0;
  padding: 18px 8px 8px;          /* top padding = visual gap + hover buffer (no dead zone) */
  background: rgba(14, 14, 14, 0.98);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  z-index: 1001;
}
.nav-links .has-dropdown:hover .nav-dropdown,
.nav-links .has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background 0.2s, color 0.2s;
}
.nav-dropdown a::after { display: none !important; } /* cancel the .nav-links underline pseudo */
.nav-dropdown a:hover { background: rgba(255, 255, 255, 0.05); color: var(--gold); }
.nav-dropdown a i { color: var(--gold); font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
.nav-dropdown .nav-dropdown-sep { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.nav-dropdown .nav-dropdown-sep a { color: var(--gold-2); font-weight: 600; }

/* ---------- Nav: language switcher — mark the current language ------------ */
.lang-menu a { position: relative; }
.lang-menu a.active {
  background: var(--gold-soft);
  color: var(--gold-2);
}
.lang-menu a.active .lang-code { color: var(--gold-2); }
.lang-menu a.active .lang-name { color: var(--gold); }
.lang-check { margin-left: auto; color: var(--gold); flex: 0 0 auto; }

/* ---------- Hero: top-align the headline with the contact card ------------
   The prototype bottom-aligns the two hero columns (`align-items:end`), which drops the
   "Mēs uzbūvēsim jūsu …" headline well below the contact card's top. Top-align them so the
   headline and the "Tiešs kontakts / Sazināties tagad" card start on the same row. */
.hero-top { align-items: start; }

/* ---------- Portfolio cards: real project screenshots fill the frame ------ */
.portfolio-card .portfolio-img.has-photo { padding: 0; }
.portfolio-card .portfolio-img.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s var(--ease);
}
.portfolio-card:hover .portfolio-img.has-photo img { transform: scale(1.05); }

/* ---------- Buttons: dark-luxe outline hover readability ------------------
   theme.css `.dark-luxe .btn-outline:hover` whitens the text (color:#fff) but
   inherits the base `.btn-outline:hover` light-gold `--gold-shine` background —
   white-on-light-gold reads as a blank, "empty" button. Restore the dark ink the
   base hover uses so every outline CTA inside a dark-luxe section (chatbot quote,
   pricing CTAs, …) stays legible on hover. */
.dark-luxe .btn-outline:hover { color: #050505; }

/* ---------- Nav: portal icon button -------------------------------------- */
.nav-portal {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 18px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav-portal:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Nav: mobile drawer (matches theme.css 1024px breakpoint) ------ */
@media (max-width: 1024px) {
  /* inside the vertical drawer the dropdown becomes a static, always-open sub-list */
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    margin-top: 10px;
    padding: 4px 0 4px 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links .has-dropdown { width: 100%; }
  .nav-portal { display: none; } /* Portāls reachable via the menu + footer on mobile */
  /* the open drawer must fully cover the page content behind it (theme.css's rgba bg + blur
     let content bleed through when backdrop-filter isn't honoured) */
  .nav-links.mobile-open { z-index: 1000; background: #0a0a0c; }
}

/* ---------- Chat widget: contained panel on phones ------------------------
   SL.Ui.Core's chat-widget.css forces the open panel full-screen (inset:0; 100%/100%)
   on ≤480px. Override it to a tidy bottom-right panel that doesn't cover the whole screen.
   chat-widget.css loads after storefront.css, so !important is needed. */
@media (max-width: 480px) {
  .chat-panel {
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: 84px !important;            /* sit above the 54px bubble */
    width: calc(100vw - 24px) !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 68vh !important;
    border-radius: 18px !important;
  }
  .chat-panel-header { padding-top: 1rem !important; }   /* drop the notch safe-area pad */
}

/* ---------- Responsive: prevent horizontal overflow on phones --------------
   The fixed lang menu and the consult CTA can push past a narrow viewport. */
html { overflow-x: clip; }
.lang-menu { max-width: calc(100vw - 16px); }
@media (max-width: 640px) {
  /* the "Bezmaksas konsultācija" button overflows a phone navbar; contact stays reachable
     via the hero CTA, every page's contact section, and the footer */
  .nav-consult { display: none; }
}

/* ============================================================================
   Bootstrap dark overrides — ONLY for the reskinned legal/portal/error pages
   (Privacy, Portal/*, Error/404, Error/500). These still use Bootstrap grid +
   utilities; recolour them into the dark palette so they match the redesign.
============================================================================ */
main .bg-light { background-color: transparent !important; }
main .text-muted { color: var(--ink-3) !important; }
main .text-dark { color: var(--ink) !important; }

main .card {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: var(--radius);
}

main .form-label { color: var(--ink-2); font-weight: 500; }
main .form-control,
main .form-select {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: 10px;
}
main .form-control::placeholder { color: var(--ink-4); }
main .form-control:focus,
main .form-select:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

main .dropdown-menu {
  background: rgba(14, 14, 14, 0.97);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
main .dropdown-item { color: var(--ink-2); }
main .dropdown-item:hover,
main .dropdown-item:focus { background: rgba(255, 255, 255, 0.05); color: var(--gold); }

/* Portal-specific bespoke classes (portal.css colours assume the old light theme) */
main .login-wrapper,
main .login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-2);
}
main .login-brand-name { color: var(--ink); }
main .sidebar-section { border-color: var(--line); }
main .sidebar-label { color: var(--ink-4); }
main .sidebar-value { color: var(--ink); }
main .project-card,
main .suggestion-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
}
main .project-card:hover,
main .suggestion-card:hover { border-color: var(--line-3); }
main .portal-back,
main .btn-subtle {
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  background: transparent;
  border-radius: 10px;
}
main .portal-back:hover,
main .btn-subtle:hover { color: var(--gold); border-color: var(--gold); }

/* Bootstrap link default underline inside reskinned pages -> design behaviour */
main a { text-decoration: none; }
main a:hover { color: var(--gold); }