/* Shared navigation, footer and hub-page additions for the PinLaunchr marketing
   site.

   Loaded by every marketing page ON TOP of that page's own styles. It only adds
   rules for markup that did not exist before (the nav dropdowns, the wider
   footer, breadcrumbs, hub cards); nothing here restyles an existing component,
   so a page picks up the new navigation without its layout shifting. */

/* ── Primary nav dropdowns ──────────────────────────────────────────────────
   The nav is a horizontal <ul>; a menu is a nested <ul> that opens on hover and
   on keyboard focus. Both the trigger and every item are real <a href> elements,
   so the whole architecture is crawlable with JavaScript off. */
.nav-links > li { position: relative; }
.nav-item-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-item-trigger svg { width: 11px; height: 11px; opacity: .6; transition: transform .2s; }
.nav-links > li:hover .nav-item-trigger svg,
.nav-links > li:focus-within .nav-item-trigger svg { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 262px; padding: 10px; margin: 0; list-style: none;
  background: rgba(12, 14, 20, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-dark); border-radius: 14px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 40;
}
/* A hover bridge, so the pointer can travel the gap without the menu closing. */
.nav-links > li::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.nav-links > li:hover .nav-drop,
.nav-links > li:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-drop a {
  display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; line-height: 1.35;
  color: var(--paper-on-dark); white-space: nowrap;
}
.nav-drop a span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mute-on-dark); white-space: normal; }
.nav-drop .nav-drop-all { color: var(--coral-bright); font-weight: 600; }
.nav-drop-sep { height: 1px; margin: 7px 6px; background: var(--line-dark-2); }

/* ── Mobile menu groups ──────────────────────────────────────────────────── */
#mobmenu .mob-group {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute-on-dark); margin: 18px 0 4px;
}
#mobmenu .mob-sub { font-size: 17px; font-weight: 500; color: var(--soft-on-dark); padding: 6px 10px; }
@media (max-width: 640px) { #mobmenu .mob-sub { font-size: 16px; padding: 5px 8px; } }

/* ── Six-column footer ───────────────────────────────────────────────────── */
.foot-top.foot-6 { grid-template-columns: 1.7fr repeat(5, 1fr); gap: 32px; }
@media (max-width: 1100px) { .foot-top.foot-6 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .foot-top.foot-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot-top.foot-6 { grid-template-columns: 1fr; gap: 30px; } }

/* The seven official profiles must read as one row. The brand column is ~260px
   on desktop, which cannot hold 7 x 36px tiles at a 9px gap (306px), so the
   tiles shrink to fit instead of wrapping: nowrap plus a shrinkable flex basis
   holds one line at every width, with a floor so they never get too small to
   hit. This lives here rather than with the other footer rules because those
   are inlined per page, and this file is the last stylesheet in every head. */
.foot-socials { flex-wrap: nowrap; gap: 8px; }
.foot-social { flex: 0 1 36px; width: auto; height: auto; aspect-ratio: 1 / 1; min-width: 28px; }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs { padding: 104px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 13px; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--mute-on-dark); }
.crumbs a { color: var(--soft-on-dark); }
.crumbs a:hover { color: var(--paper-on-dark); text-decoration: underline; }
.crumbs li + li::before { content: "/"; color: var(--line-dark); }
.crumbs [aria-current="page"] { color: var(--paper-on-dark); }
@media (max-width: 640px) { .crumbs { padding-top: 88px; } }

/* ── Hub link cards ──────────────────────────────────────────────────────── */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.hub-grid.hub-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .hub-grid, .hub-grid.hub-2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .hub-grid, .hub-grid.hub-2 { grid-template-columns: 1fr; } }

.hub-card {
  display: flex; flex-direction: column; gap: 9px; padding: 26px 24px;
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.hub-card:hover { border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); box-shadow: 0 26px 60px -38px rgba(0, 0, 0, 0.9); }
.hub-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
.hub-card h3 a { color: var(--paper-on-dark); }
.hub-card h3 a:hover { color: var(--coral-bright); }
.hub-card p { font-size: 14.5px; line-height: 1.6; color: var(--soft-on-dark); margin: 0; }
.hub-card .hub-meta { margin-top: auto; padding-top: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute-on-dark); }
.hub-card .hub-go { font-size: 14px; font-weight: 600; color: var(--coral-bright); }

.hub-sec { padding: 66px 0; }
.hub-sec + .hub-sec { padding-top: 0; }
/* Section heads and prose sit in centred blocks so they line up with the
   centred content they introduce -- .hub-grid.hub-2 (900px, auto margins),
   .cmp-wrap (920px, auto margins) and the full-width grids, matching the
   .sec-head.center pattern the feature pages already use. */
.hub-sec-head { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.hub-sec-head h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--paper-on-dark); margin: 0; }
.hub-sec-head p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--soft-on-dark); }

/* ── Prose blocks used by the hub and use-case pages ─────────────────────── */
.prose-block { max-width: 760px; margin-left: auto; margin-right: auto; }
.prose-block > .wf-title { text-align: center; }
.prose-block p { font-size: 17px; line-height: 1.75; color: var(--soft-on-dark); margin-top: 16px; }
.prose-block ul, .prose-block ol { margin: 18px 0 0 20px; display: flex; flex-direction: column; gap: 11px; }
.prose-block li { font-size: 16px; line-height: 1.65; color: var(--soft-on-dark); }
.prose-block li strong { color: var(--paper-on-dark); }
.prose-block a { color: var(--coral-bright); }
.prose-block a:hover { text-decoration: underline; }
.prose-block h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; color: var(--paper-on-dark); margin-top: 30px; }

/* ── Related-links strip ─────────────────────────────────────────────────── */
.rel-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; justify-content: center; }
.rel-links a {
  font-size: 14px; color: var(--soft-on-dark); padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line-dark); transition: color .2s, border-color .2s, background .2s;
}
.rel-links a:hover { color: var(--paper-on-dark); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); }

/* A page whose hero is preceded by breadcrumbs already clears the fixed nav
   (.crumbs carries the top padding), so the hero must not add it a second time. */
.crumbs + #feat-hero { padding-top: 34px; }
@media (max-width: 640px) { .crumbs + #feat-hero { padding-top: 22px; } }

/* ── Mobile menu: scrollable at every height ──────────────────────────────────
   The flat 7-link menu this replaced fit on a phone screen, so it was centred
   and only made scrollable on short landscape viewports (max-height: 520px).
   The grouped menu is roughly 1,150px tall — taller than a portrait phone — so
   centring it pushed the first group off the top of the screen with no way to
   reach it. It now starts at the top and scrolls at any height, and the close
   button is pinned so it stays reachable while scrolling. */
#mobmenu {
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 84px 24px 44px;
  gap: 2px;
}
#mobmenu a { font-size: 22px; padding: 7px 10px; }
#mobmenu .btn { margin-top: 22px; }
.mob-close { position: fixed; }
@media (max-width: 640px) {
  #mobmenu { padding: 76px 20px 40px; }
  #mobmenu a { font-size: 19px; padding: 6px 8px; }
}