/* tc-tool-nav.css — unified cross-tool navigation (Concept G)
   Loaded on /editor, /image-studio, /grab, /creator-tools.
   Sits immediately after the brand on the LEFT side of the header so it
   never competes with page-specific actions on the RIGHT side. */

.tc-tool-nav{
  display:flex;
  gap:4px;
  align-items:center;
  margin-left:20px;
  /* Consume remaining horizontal space so page-specific controls on the
     right side stay pinned to the right edge, regardless of whether the
     parent header uses justify-content: space-between or flex-start. */
  margin-right:auto;
  /* When the header gets tight (e.g. all tool tabs + a right-side button on a
     small laptop), let the nav SHRINK and scroll horizontally instead of pushing
     the brand/button off-screen. Only shrinks when needed; full width otherwise. */
  min-width:0;
  flex-shrink:1;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tc-tool-nav::-webkit-scrollbar{ display:none; }
/* Overflow cue: the scrollbar is hidden, so when tabs are scrolled out of the
   strip, fade the edge they sit behind (classes set by tc-tool-nav.js). */
.tc-tool-nav--more-r{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
}
.tc-tool-nav--more-l{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);
}
.tc-tool-nav--more-l.tc-tool-nav--more-r{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
}

/* Tool-nav tooltips — body-level (escapes the nav's overflow), arrow points at
   the hovered tab via the --tip-arrow custom property set in tc-tool-nav.js. */
.tc-nav-tip{
  position:fixed; z-index:9999;
  background:#0d1422; color:#dbe2ec; border:1px solid #2a3850;
  padding:6px 11px; border-radius:9px;
  font:600 11.5px/1.3 'DM Sans',-apple-system,system-ui,sans-serif;
  white-space:nowrap; letter-spacing:-0.005em;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease;
  pointer-events:none;
}
.tc-nav-tip.on{ opacity:1; transform:translateY(0); }
.tc-nav-tip::before{ content:""; position:absolute; bottom:100%; left:var(--tip-arrow,50%); transform:translateX(-50%); border:6px solid transparent; border-bottom-color:#2a3850; }
.tc-nav-tip::after{ content:""; position:absolute; bottom:100%; left:var(--tip-arrow,50%); transform:translateX(-50%) translateY(1px); border:5px solid transparent; border-bottom-color:#0d1422; }
@media (prefers-reduced-motion: reduce){ .tc-nav-tip{ transition:none; } }

.tc-tool-tab{
  padding:7px 13px 7px 11px;
  border-radius:999px;
  color:#7B8A9A;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:-0.005em;
  transition:color .15s,background .15s,box-shadow .25s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:inherit;
  white-space:nowrap;
  line-height:1;
}

.tc-tool-tab svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  opacity:0.75;
  transition:opacity .15s;
}

.tc-tool-tab:hover{
  color:#22d3ee;
  background:rgba(34,211,238,0.10);
  text-decoration:none;
}
.tc-tool-tab:hover svg{
  opacity:1;
}

/* Active = the tab whose URL matches the current page.
   Marked via aria-current="page" — semantic + styleable. */
.tc-tool-tab[aria-current="page"]{
  background:#22d3ee;
  color:#000;
  font-weight:700;
}
.tc-tool-tab[aria-current="page"] svg{
  opacity:1;
}
.tc-tool-tab[aria-current="page"]:hover{
  background:#22d3ee;
  color:#000;
}

/* Cross-tool active hint — when arriving from another tool the active pill
   briefly pulses to confirm "you are here". Triggered by adding the class
   .tc-tool-tab--just-arrived via JS based on document.referrer. */
.tc-tool-tab.tc-tool-tab--just-arrived{
  animation:tcTabPulse 1.4s ease-out 1;
}
@keyframes tcTabPulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,0.55)}
  60%{box-shadow:0 0 0 10px rgba(34,211,238,0)}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}
}

/* Phone menu button, added by tc-tool-nav.js on tool pages that have no burger
   of their own (.nav-toggle / #mMenuTrigger) and no site footer. Shown at
   <=740px only. */
.tc-nav-menu-btn,.tc-nav-brand{ display:none; }
.tc-nav-menu-btn{
  align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; margin:-5px 0; padding:0;
  background:none; border:0; border-radius:10px; color:#E6EDF3;
  cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent;
}
.tc-nav-menu-btn svg{ width:22px; height:22px; }
.tc-nav-menu-btn:hover,.tc-nav-menu-btn[aria-expanded="true"]{ background:rgba(255,255,255,0.07); }
.tc-nav-menu-btn:focus-visible{ outline:2px solid #22d3ee; outline-offset:1px; }
.tc-nav-brand{
  margin-right:auto; min-height:54px; align-items:center;
  font-size:17px; font-weight:800; color:#E6EDF3; text-decoration:none; letter-spacing:-0.015em;
}
.tc-nav-brand span{ background:linear-gradient(135deg,#22d3ee,#a78bfa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Hidden on mobile; pages with a burger keep theirs. Where tc-tool-nav.js
   added .tc-nav-menu-btn, the tabs open as a vertical dropdown: under
   header.header, or, on pages where the nav is the only header element
   (body > .tc-tool-nav:first-child), inside a slim brand bar whose height
   is reserved here so the injected brand and button do not shift the page. */
@media (max-width:740px){
  .tc-tool-nav{
    display:none;
  }
  .tc-nav-menu-btn,.tc-nav-brand{ display:inline-flex; }
  header.header > .tc-nav-menu-btn{ margin-left:auto; margin-right:8px; }
  header.header > .tc-nav-menu-btn:last-child{ margin-right:-6px; }
  header.header.tc-tool-nav-open{ z-index:200; }
  header.header > .tc-tool-nav.tc-tool-nav--open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:calc(100% + 6px); right:8px; z-index:200;
    margin:0; padding:6px; min-width:220px; max-width:calc(100vw - 16px);
    max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px);
    overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    background:#141C2A; border:1px solid #1F2A3A; border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.5);
  }
  body > .tc-tool-nav:first-child{
    display:flex; flex-wrap:wrap; align-items:center; gap:2px;
    margin:0; padding:0 10px 0 16px; min-height:54px; box-sizing:border-box;
    overflow:visible; background:#141C2A; border-bottom:1px solid #1F2A3A;
  }
  body > .tc-tool-nav:first-child.tc-tool-nav--open{ padding-bottom:8px; }
  body > .tc-tool-nav:first-child > .tc-tool-tab{ display:none; }
  body > .tc-tool-nav:first-child.tc-tool-nav--open > .tc-tool-tab{ display:flex; flex:1 0 100%; }
  .tc-tool-nav.tc-tool-nav--open > .tc-tool-tab{
    min-height:44px; padding:0 14px; font-size:14px; border-radius:10px; box-sizing:border-box;
  }
}

@media (prefers-reduced-motion: reduce){
  .tc-tool-tab,.tc-tool-tab svg,.tc-tool-tab--just-arrived{
    animation:none !important;
    transition:none !important;
  }
}

/* ── Shared header fixes (pages' own header CSS is inline, so these live here) ── */

/* The right-side links keep their width and stay on one line; the tool strip
   (min-width:0, scrolls) is what gives way when the header gets tight.
   Without this, 'Try Free Editor' wrapped to 2-3 lines at 741-1270px. */
header.header .nav-links{ flex-shrink:0; }
header.header .nav-link{ white-space:nowrap; }

/* Desktop Tools dropdown: scroll inside itself on short (landscape) screens so
   its last links stay reachable. At <=768px every page turns it into a static
   list inside the burger panel, so this is scoped to the desktop layout. */
@media (min-width:769px){
  header .nav-dd-menu{
    max-height:calc(100vh - 80px);
    max-height:calc(100dvh - 80px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Anchor jumps ("Jump to" chips, in-page links, focus) land below the sticky
   header.header (guides, hubs, tool pages) instead of under it. Desktop only:
   at <=768px the guide/hub headers are position:relative, so a padding there
   would just leave a gap. Pages with other headers (/editor, homepage,
   /preview) are left as they were. The scroll-margin-top (64-80px) some pages
   set on their targets would ADD to this, so it is zeroed in the same range. */
@media (min-width:769px){
  html:has(header.header){ scroll-padding-top:72px; }
  html:has(header.header) .article h2,html:has(header.header) .guides-section,html:has(header.header) .results{ scroll-margin-top:0; }
}

/* Burger touch target: 44x44 (was 26x28). The negative margins keep the
   header the height it was. */
header .nav-toggle{
  min-width:44px;
  min-height:44px;
  margin-top:-8px;
  margin-bottom:-8px;
  margin-right:-8px;
}

/* 'Back to ... Tools' links (inline-styled on 70 pages, so matched by that
   style): ~38px tall on touch screens (was 12-14px). Vertical padding on an
   inline link grows the tap area without moving anything. On tool pages the
   link's wrapper is a body child, and the section after it (both z-index:1,
   see 'body > *' below) would take taps on the link's lower half, so the
   wrapper goes one above it (the header, z-index 50, stays on top). */
@media (max-width:880px){
  a[style="font-size:11px;color:var(--text-m);text-decoration:none;font-weight:600"],
  a[style="font-size:11px;color:var(--text-muted);text-decoration:none;font-weight:600"]{
    padding:12px 0;
  }
  body > div:has(> a[style="font-size:11px;color:var(--text-m);text-decoration:none;font-weight:600"]),
  body > div:has(> a[style="font-size:11px;color:var(--text-muted);text-decoration:none;font-weight:600"]){
    z-index:2;
  }
}


/* ── /grab-style page background + header (shared across all pages
   that load this stylesheet) ─────────────────────────────────────────
   Matches the exact tokens, gradients, and header tone used on /grab
   so guides, tools, and downloaders feel like one product family
   instead of a slightly-darker, slightly-flatter sibling. */

body{
  /* Same deep navy /grab uses (the existing dark page palettes were a
     touch too black). Important so it wins over the per-page
     :root{--bg:#0f1117} declarations baked into the legacy guides. */
  background:#0B1220 !important;
  color:#e8eaf0;
}

/* Ambient gradient backdrop — mirrors /grab's <div class="bg"> element
   exactly (three soft radial gradients at the same percentages and
   opacities), implemented as a body::before so we don't have to inject
   a new DOM element on every page. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(34,211,238,0.22), transparent 60%),
    radial-gradient(ellipse 50% 42% at 94% 8%, rgba(167,139,250,0.06), transparent 55%),
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(59,130,246,0.10), transparent 60%);
}
/* Keep page content above the backdrop. */
body > *{position:relative; z-index:1}

/* Header (.header) tone matches /grab's --surface (#141C2A) so the bar
   has a subtle lift off the body. Overrides legacy guide page rules
   that set background:var(--bg). */
header.header{
  background:#141C2A !important;
  border-bottom:1px solid #1F2A3A !important;
}

/* ── FAQ accordions (div.faq-item > .faq-q + .faq-a, opened by each page's
   inline onclick; tc-tool-nav.js gives the question role=button, tabindex
   and aria-expanded, which these rules key on) ─────────────────────────── */

/* A closed answer was only max-height:0, so Tab still landed on its links
   out of sight. Hide it once the close animation has run (visibility waits
   out its transition). The list repeats the pages' own .faq-a transition. */
.faq-item > .faq-q[aria-expanded] ~ .faq-a{ transition:max-height .3s,padding .3s,visibility .3s; }
.faq-item:not(.open) > .faq-q[aria-expanded] ~ .faq-a{ visibility:hidden; }

/* The card's overflow:hidden clips a focus ring drawn round the question,
   so ring the card instead. */
@supports selector(:has(a)){
  .faq-item > .faq-q[aria-expanded]:focus-visible{ outline:none; }
  .faq-item:has(> .faq-q[aria-expanded]:focus-visible){ outline:2px solid #22d3ee; outline-offset:2px; }
}