/* ====================================================
   21 Knots — UI kit shared styles
   ==================================================== */

/* Reserve the scrollbar gutter at all times. Short pages (the Integrations
   and Managed Support tracks, which carry no testimonial carousel) otherwise
   drop the scrollbar and the whole layout jumps right by its width. */
html { scrollbar-gutter: stable; }

/* tiny shared button press affordance */
.btn-press { transition: transform var(--duration-fast) var(--ease-standard),
                         opacity   var(--duration-fast) var(--ease-standard); }
.btn-press:active { transform: scale(0.95); }
.tk-link { cursor: pointer; }

/* ====================================================
   Hover + focus — design system rules, applied globally
   so every control gets them, not just the .btn classes.
   Hover: 0.05 opacity drop. Focus: 2 px teal ring, always visible.
   ==================================================== */
button:hover, a:hover, .tk-link:hover { opacity: 0.95; }
button:disabled:hover { opacity: 1; }

:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* Smooth image rendering for the partner badges */
img { -webkit-user-drag: none; }

/* ====================================================
   Nautical imagery treatment
   The brand photography in assets/photography/ is already
   black-and-white film, so no filter is applied. The
   grayscale fallback stays for any colour image dropped in.
   ==================================================== */
.kn-photo {
  filter: grayscale(1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kn-photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-tile-3);
}
/* Testimonial carousel fade */
@keyframes kn-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* On narrow screens the quote well no longer needs as much reserved height */
@media (max-width: 640px) {
  div[style*="min-height: 340"] { min-height: 220px !important; }
}

/* Placeholder for user-supplied imagery — dashed frame */
.kn-photo-slot {
  border: 2px dashed rgba(31, 179, 166, 0.5);
  background: repeating-linear-gradient(
    45deg,
    rgba(31,179,166,0.03),
    rgba(31,179,166,0.03) 10px,
    rgba(31,179,166,0.06) 10px,
    rgba(31,179,166,0.06) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-deep);
  font: 500 13px/1.4 var(--font-body);
  text-align: center;
  padding: 24px;
  border-radius: var(--radius-md);
  min-height: 200px;
}


/* ====================================================
   RESPONSIVE — Tablet (≤960 px) and Mobile (≤640 px)
   The marketing screens use inline grid styles for clarity;
   we override them here with attribute selectors + !important.
   ==================================================== */

/* ---------- Tablet : ≤ 960 px ---------- */
@media (max-width: 960px) {
  /* 3-column grids → 2 columns */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="gridTemplateColumns: 'repeat(3, 1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 5-column footer → 2 cols */
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Section vertical padding shrinks */
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- Mobile : ≤ 640 px ---------- */
@media (max-width: 640px) {
  /* Hamburger menu: hide desktop links + CTA, show hamburger */
  .kn-nav-links { display: none !important; }
  .kn-nav-cta   { display: none !important; }
  .kn-hamburger { display: flex !important; }

  /* All multi-column grids collapse to a single column.
     The weighted two-column heros (1.15fr 1fr and friends) need naming
     explicitly — they are not "1fr 1fr" and were being left side-by-side. */
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.35fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Tighter tile padding on phones */
  section {
    padding: 56px 18px !important;
  }

  /* --- Headlines scale down --- */
  /* h1 hero: 64 → 36 */
  h1[style*="font: 600 64px"] { font: 600 36px/1.10 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h1 page heads: 56 → 32 */
  h1[style*="font: 600 56px"] { font: 600 32px/1.10 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h1 page heads: 48 → 30 */
  h1[style*="font: 600 48px"] { font: 600 30px/1.12 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h2 inner heads: 40 → 26 */
  h2[style*="font: 600 40px"] { font: 600 26px/1.15 var(--font-display) !important; letter-spacing: -0.012em !important; }
  /* h3 card heads: 28 → 22 */
  h3[style*="font: 600 28px"] { font: 600 22px/1.18 var(--font-display) !important; letter-spacing: -0.011em !important; }
  /* h3 module heads: 21 → 19 */
  h3[style*="font: 600 21px"] { font: 600 19px/1.20 var(--font-display) !important; }
  /* Big stat numbers: 40 → 28 */
  [style*="font: 600 40px/1 var(--font-display)"] { font: 600 28px/1 var(--font-display) !important; }
  /* Lead paragraphs: 24 → 17 */
  p[style*="font: 400 24px"] { font: 400 17px/1.45 var(--font-body) !important; }
  /* Pull-quote: 32 → 22 */
  p[style*="font: 300 32px"] { font: 300 22px/1.30 var(--font-display) !important; }
  /* Large section paragraphs: 21 → 17 */
  p[style*="font: 400 21px"] { font: 400 17px/1.45 var(--font-body) !important; }

  /* Manual <br/> in heros stays on phones. Hiding it joined the words
     either side ("your agencyto wrestle") because there is no whitespace
     around the tag — the headline wraps fine on its own at 36 px. */

  /* Buttons stack on narrow screens */
  div[style*="display: flex"][style*="gap: 14"] { flex-wrap: wrap !important; }

  /* Tabs / chips: horizontal scroll instead of wrap */
  div[style*="display: flex"][style*="gap: 12"][style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  div[style*="display: flex"][style*="gap: 12"][style*="flex-wrap"]::-webkit-scrollbar { display: none; }

  /* Sub-nav frosted bar shrinks */
  div[style*="height: 64px"][style*="position: sticky"] {
    padding: 0 16px !important;
    overflow-x: auto;
  }

  /* Global nav: shrink gap, allow nav links to ellipsis-truncate */
  nav[style*="height: 56px"][style*="#2b3b3b"] {
    gap: 14px !important;
    padding: 0 14px !important;
  }
}


/* ---------- Mobile nav: hide secondary global-nav links on phones ---------- */
/* Handled by the kn-* classes inside GlobalNav.jsx — see the @media (max-width: 640px) block above. */