/* ==========================================================================
   AdnanThemes — header fit fixes
   Added:   2026-08-15
   Updated: 2026-08-15 (v2 — fluid scaling)

   Problem: the desktop header row (brand + 8 menu items + "Sign in" + CTA)
            was wider than the 1240px shell, so "AI & SaaS", "Sign in" and
            "Start a Project" broke onto two lines.

   Why v1 was not enough: the theme requests `Inter` but never loads a
            webfont, so every machine falls back to a different system font
            (SF Pro / Segoe UI / Roboto / Arial). Text width therefore varies
            per visitor and fixed pixel values could not be trusted.

   Approach: labels are locked to one line (`white-space:nowrap`) and the
            spacing/type scale fluidly with the viewport via clamp(), sized
            with headroom so wider fallback fonts still fit.

   Nothing is hidden or removed — brand tagline, all 8 menu items, "Sign in"
   and the CTA all stay visible at every desktop width.

   Scope:   desktop only (>=1041px). Mobile hamburger (<=1040px) untouched.
   Revert:  delete this file and remove its <link> from header.php.
   ========================================================================== */

@media (min-width: 1041px) {

  /* --- 1. Labels must never break mid-phrase --------------------------- */
  .ats-primary .menu > li > a,
  .ats-primary > ul > li > a,
  .ats-header-link,
  .ats-header-cta,
  .ats-nav .ats-brand,
  .ats-nav .ats-brand small {
    white-space: nowrap;
  }

  /* --- 2. Keep the row on one line and let the middle shrink ----------- */
  .ats-nav {
    flex-wrap: nowrap;
    gap: clamp(10px, 1.15vw, 28px);
  }

  .ats-nav .ats-brand { flex: 0 0 auto; }
  .ats-header-actions { flex: 0 0 auto; gap: clamp(4px, 0.55vw, 10px); }
  .ats-primary      { min-width: 0; }

  /* --- 3. Fluid type + spacing (compact at 1041px, full size at ~1440px) */
  .ats-primary > ul > li > a,
  .ats-primary > .menu > li > a {
    font-size: clamp(12.5px, 0.97vw, 14px);
    padding: 10px clamp(4px, 0.6vw, 12px);
  }

  .ats-primary ul,
  .ats-primary .menu {
    gap: clamp(0px, 0.18vw, 6px);
  }

  .ats-header-link {
    font-size: clamp(12.5px, 0.97vw, 14px);
    padding: 10px clamp(2px, 0.35vw, 10px);
  }

  .ats-header-cta {
    font-size: clamp(12.5px, 0.97vw, 14px);
    padding: 0 clamp(11px, 1.05vw, 17px);
  }

  .ats-nav .ats-brand {
    font-size: clamp(17px, 1.4vw, 21px);
  }

  .ats-nav .ats-brand small {
    font-size: clamp(8px, 0.68vw, 10px);
    letter-spacing: clamp(0.02em, 0.35vw, 0.13em);
  }

  /* Submenus keep their comfortable sizing — they are not part of the row. */
  .ats-primary .sub-menu a {
    font-size: 14px;
    padding: 10px 12px;
    white-space: normal;
  }
}

/* --- 4. Top announcement bar: keep its two links on one line too ----- */
@media (min-width: 1041px) {
  .ats-premium-bar-links a {
    white-space: nowrap;
  }
  .ats-premium-bar-links {
    flex-shrink: 0;
    gap: clamp(10px, 1vw, 22px);
  }
  .ats-premium-bar-inner {
    gap: clamp(12px, 1.2vw, 28px);
  }
}


/* ==========================================================================
   5. Dropdown menus (desktop, >=821px)

   Bug: `.ats-primary .sub-menu` sits at `top: calc(100% + 8px)`, leaving an
   8px dead zone between the menu item and its dropdown. Moving the pointer
   down crossed that gap, :hover was lost and the dropdown vanished before it
   could be reached.

   Fix: a transparent pseudo-element bridges the gap so the pointer never
   leaves the hovered element. The visual gap is preserved.

   Also: this menu is two levels deep (Portfolio > WordPress > Themes), but
   the theme had no desktop rule for nested submenus, so a third-level list
   dropped underneath and covered its own parent. It now flies out sideways.
   ========================================================================== */

@media (min-width: 821px) {

  /* --- Hover bridge for first-level dropdowns ------------------------- */
  .ats-primary .sub-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
  }

  /* --- Nested (second-level) submenus fly out to the right ------------- */
  .ats-primary .sub-menu .sub-menu {
    top: -9px;
    left: calc(100% + 6px);
  }

  /* Its bridge runs down the left edge instead of across the top. */
  .ats-primary .sub-menu .sub-menu::before {
    top: 0;
    bottom: 0;
    left: -10px;
    right: auto;
    width: 10px;
    height: auto;
  }

  /* Affordance: mark items that open a nested list. */
  .ats-primary .sub-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .ats-primary .sub-menu .menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
  }

  /* --- Subtle entrance --------------------------------------------------- */
  @keyframes atsSubIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }

  .ats-primary li:hover > .sub-menu,
  .ats-primary li:focus-within > .sub-menu {
    animation: atsSubIn .16s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ats-primary li:hover > .sub-menu,
  .ats-primary li:focus-within > .sub-menu {
    animation: none;
  }
}

/* ==========================================================================
   6. Hero slider typewriter headings

   Paired with ats-hero-type.js. The real heading text lives in
   `.ats-typed-sr` (visually hidden, still read by search engines and screen
   readers); `.ats-typed` is the animated copy with a blinking caret.

   `min-height` on the heading reserves the full three-line box up front so
   the hero does not jump as characters are typed and erased.
   ========================================================================== */

.ats-typed {
  display: inline;
}

/* Blinking caret in the brand cyan. */
.ats-typed::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .82em;
  margin-left: .07em;
  vertical-align: baseline;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, .55);
  animation: atsCaretBlink 1.05s steps(1) infinite;
}

@keyframes atsCaretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Visually hidden but available to assistive tech and crawlers. */
.ats-typed-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ats-typed::after { display: none; }
}

/* ==========================================================================
   7. Profile dock spacing (WordPress.org / ThemeForest cards)

   Below 1490px the dock stops being a fixed left rail and becomes an inline
   strip between the header and the hero. Its rule is
   `margin: 14px auto 0` — no bottom margin — so the cards sat flush against
   the top of the hero slider with no breathing room.

   Also: the dock was `min(1180px, 100% - 40px)` while the site shell is
   `min(1240px, 100% - 48px)`, so the cards were inset from the header and
   hero content instead of lining up with them.
   ========================================================================== */

@media (max-width: 1490px) {
  body.home .ats-left-profile-dock {
    width: min(1240px, calc(100% - 48px));
    margin: 18px auto 22px;
    gap: 14px;
  }
}

@media (max-width: 600px) {
  body.home .ats-left-profile-dock {
    width: min(calc(100% - 28px), 1240px);
    margin: 14px auto 16px;
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   Static lead-in of the hero headline.
   Deliberately NOT called .ats-lead: the theme already uses that class in
   sales-redesign.css for 18px muted intro paragraphs, which shrank the
   headline lead-in to small grey text sitting behind the keyword.
   -------------------------------------------------------------------------- */
.adnh-slide h1 .ats-type-lead,
.adnh-slide h2 .ats-type-lead {
  display: inline;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  max-width: none;
  margin: 0;
}


/* --------------------------------------------------------------------------
   ROTATING KEYWORD COLOUR
   The static lead-in stays white; the keyword that types and erases picks
   up the brand accent so the eye lands on the word that is changing.
   Gradient runs violet -> purple -> cyan, ending on the same cyan as the
   caret and the section eyebrow, so it reads as one system.

   A solid cyan is set first as the fallback for engines without
   background-clip:text. box-decoration-break:clone makes each wrapped line
   carry the full gradient instead of one gradient stretched across the
   whole block, which renders unevenly on multi-line headings.
   -------------------------------------------------------------------------- */
.adnh-slide h1 .ats-typed,
.adnh-slide h2 .ats-typed {
  color: #22d3ee;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .adnh-slide h1 .ats-typed,
  .adnh-slide h2 .ats-typed {
    background-image: linear-gradient(96deg, #8b6bff 0%, #a855f7 42%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* The caret is a background on ::after — keep it out of the text clip. */
  .adnh-slide h1 .ats-typed::after,
  .adnh-slide h2 .ats-typed::after {
    -webkit-text-fill-color: initial;
    color: initial;
  }
}


/* ==========================================================================
   8. PRIMARY MENU + DROPDOWNS  (desktop, >=821px)

   The nav worked but looked default: flat grey links, a washed white hover
   pill that barely registers on a white header, and a plain 240px dropdown
   box. This section gives it the same visual language as the rest of the
   site — brand violet accents, a layered shadow, a pointer tying each panel
   to its parent, and two columns for the long menus.

   Scoped to >=821px so the mobile accordion is untouched.
   ========================================================================== */

@media (min-width: 821px) {

  /* --- Top-level items -------------------------------------------------- */

  .ats-primary > ul > li > a,
  .ats-primary > .menu > li > a {
    position: relative;
    color: #475467 !important;
    font-weight: 700;
    transition: color .16s ease, background-color .16s ease;
  }

  .ats-primary > ul > li > a:hover,
  .ats-primary > .menu > li > a:hover,
  .ats-primary > ul > li:focus-within > a {
    background: rgba(109, 74, 255, .07) !important;
    color: #5b3fd6 !important;
    box-shadow: none !important;
  }

  /* Current page: tinted pill plus a small brand underline. */
  .ats-primary .current-menu-item > a,
  .ats-primary .current-menu-ancestor > a {
    background: rgba(109, 74, 255, .09) !important;
    color: #4c34c4 !important;
    box-shadow: none !important;
  }

  .ats-primary > ul > .current-menu-item > a::before,
  .ats-primary > .menu > .current-menu-item > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 16px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg, #6d4aff, #22d3ee);
  }

  /* --- Dropdown panel ---------------------------------------------------- */

  .ats-primary .sub-menu {
    min-width: 264px;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(16, 24, 40, .07);
    background: #fff;
    box-shadow:
      0 24px 48px -14px rgba(16, 24, 40, .20),
      0 10px 20px -10px rgba(16, 24, 40, .10);
  }

  /* Small pointer connecting a panel to the item that opened it. */
  .ats-primary > ul > li > .sub-menu::after,
  .ats-primary > .menu > li > .sub-menu::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 26px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(16, 24, 40, .07);
    border-top: 1px solid rgba(16, 24, 40, .07);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
  }

  /* Nested panels fly out sideways, so no pointer on those. */
  .ats-primary .sub-menu .sub-menu::after { display: none; }

  /* --- Dropdown rows ------------------------------------------------------ */

  .ats-primary .sub-menu a {
    position: relative;
    padding: 10px 12px 10px 16px;
    border-radius: 10px;
    color: #475467 !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
  }

  /* Accent bar that grows in on hover. */
  .ats-primary .sub-menu a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 2px;
    height: 0;
    transform: translateY(-50%);
    border-radius: 2px;
    background: linear-gradient(180deg, #6d4aff, #22d3ee);
    transition: height .16s ease;
  }

  .ats-primary .sub-menu a:hover,
  .ats-primary .sub-menu a:focus-visible {
    background: rgba(109, 74, 255, .06) !important;
    color: #4c34c4 !important;
    transform: translateX(2px);
  }

  .ats-primary .sub-menu a:hover::before,
  .ats-primary .sub-menu a:focus-visible::before {
    height: 17px;
  }

  /* --- Panels near the right edge open right-aligned ---------------------- */
  /* Items 5+ (Services, Resources, Pricing, Support) sit far enough right
     that a left-anchored panel can run past the viewport. */

  .ats-primary > ul > li:nth-child(n+5) > .sub-menu,
  .ats-primary > .menu > li:nth-child(n+5) > .sub-menu {
    left: auto;
    right: 0;
  }

  .ats-primary > ul > li:nth-child(n+5) > .sub-menu::after,
  .ats-primary > .menu > li:nth-child(n+5) > .sub-menu::after {
    left: auto;
    right: 26px;
  }

  /* Nested panels must still fly out to the right of their own row. */
  .ats-primary .sub-menu .sub-menu {
    left: calc(100% + 6px);
    right: auto;
  }

  /* --- Long menus get two columns ----------------------------------------- */
  /* About (9 items) and Resources (8) were tall single columns. Guarded by
     @supports so browsers without :has() simply keep one column. */

  @supports selector(:has(*)) {

    .ats-primary > ul > li:hover > .sub-menu:has(> li:nth-child(7)),
    .ats-primary > ul > li:focus-within > .sub-menu:has(> li:nth-child(7)),
    .ats-primary > .menu > li:hover > .sub-menu:has(> li:nth-child(7)),
    .ats-primary > .menu > li:focus-within > .sub-menu:has(> li:nth-child(7)) {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 4px;
      min-width: 452px;
    }
  }

  /* --- Header call-to-action --------------------------------------------- */
  /* Was a navy-to-blue gradient while the hero buttons, footer brand mark and
     hero keyword all use the violet brand gradient. Aligned so the header
     stops being the odd one out. */

  .ats-header-cta {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow:
      0 12px 28px rgba(109, 74, 255, .26),
      inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    transition: filter .16s ease, transform .16s ease;
  }

  .ats-header-cta:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
  }

  .ats-header-link:hover {
    color: #5b3fd6 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ats-primary .sub-menu a:hover,
  .ats-header-cta:hover {
    transform: none;
  }
}