/*
 * Webflow Shortcuts cheat-sheet — page-scoped native styles.
 * Loaded only by WEBSITE/webflow-shortcuts/index.php.
 *
 * Replaces the Webflow IX2 / webflow.js layer for this route:
 *   - the page-specific shortcut-key icon @font-face (now served locally, not remote)
 *   - the native macOS <-> Windows toggle (driven by [data-os] on .webflow-shortcuts-page)
 *   - the section navbar mobile menu
 * Scoped under .webflow-shortcuts-page so nothing leaks to other routes.
 */

/* ============================================================
   1. Shortcut-key icon font (was loaded from a remote CDN;
      the .woff is now hosted locally under /fonts/).
   ============================================================ */
@font-face {
  font-family: "webflow-shortcuts-icons";
  src: url('/fonts/webflow-shortcuts-icons.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-display: swap;
}

.webflow-shortcuts-page .webflow-shortcuts-icon-font {
  font-family: "webflow-shortcuts-icons";
  font-style: normal;
  font-weight: normal;
}

.webflow-shortcuts-page .w-nav-overlay {
  overflow: visible !important;
}

/* ============================================================
   2. Header in normal flow (original page is not an absolute overlay).
   ============================================================ */
.webflow-shortcuts-page .header-position-absolute { position: static; }

/* ============================================================
   3. macOS <-> Windows toggle (native; replaces the IX2 scale animation).
      State lives in [data-os] on .webflow-shortcuts-page (default "macos").
      Per-key OS variants and the card title swap based on that state.
   ============================================================ */

/* Per-key OS-specific symbols flow normally; only the active OS shows. */
.webflow-shortcuts-page .webflow-shortcut-key .shortcuts-macos-content { position: static; }
.webflow-shortcuts-page .webflow-shortcut-key .shortcuts-windows-content { display: none; }
.webflow-shortcuts-page[data-os="windows"] .webflow-shortcut-key .shortcuts-macos-content { display: none; }
.webflow-shortcuts-page[data-os="windows"] .webflow-shortcut-key .shortcuts-windows-content { display: revert; }

/* Card title swap (the two <h2> overlap via absolute positioning in the export). */
.webflow-shortcuts-page .macos-title,
.webflow-shortcuts-page .windows-title { position: static; }
.webflow-shortcuts-page .windows-title { display: none; }
.webflow-shortcuts-page[data-os="windows"] .macos-title { display: none; }
.webflow-shortcuts-page[data-os="windows"] .windows-title { display: block; }

/* The gradient "active" pill on each tab button (opacity for a smooth swap). */
.webflow-shortcuts-page .webflow-shortcuts-tab-active-text { transition: opacity .25s ease; }
.webflow-shortcuts-page .webflow-shortcuts-tab-active-text.windows { opacity: 0; }
.webflow-shortcuts-page[data-os="windows"] .webflow-shortcuts-tab-active-text.macos { opacity: 0; }
.webflow-shortcuts-page[data-os="windows"] .webflow-shortcuts-tab-active-text.windows { opacity: 1; }

.webflow-shortcuts-page .webflow-shortcuts-tab-button { cursor: pointer; }

/* ============================================================
   4. Section navbar — mobile collapsed menu.
      (Desktop shows the sticky category list in the right card.)
   ============================================================ */
@media screen and (max-width: 991px) {
  .webflow-shortcuts-page .webflow-shortcuts-nav-menu { display: none; }
  .webflow-shortcuts-page .webflow-shortcuts-nav-menu.is-open { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .webflow-shortcuts-page .webflow-shortcuts-tab-active-text { transition: none; }
}

/* ============================================================
   5. MOBILE redesign — "dense aligned table" (chosen layout).
      Applies only <= 991px; desktop is untouched. Reuses the
      existing icons, key glyphs and category names verbatim.
   ============================================================ */
@media screen and (max-width: 991px) {
  /* Remove the broken floating hamburger menu; categories are reachable
     via the sticky section headers while scrolling. */
  .webflow-shortcuts-page .webflow-shortcuts-navbar { display: none !important; }

  /* Card top stacks: OS title above a full-width, sticky toggle bar. */
  .webflow-shortcuts-page .webflow-shortcuts-card---top {
    flex-direction: column;
    align-items: stretch;
    grid-column-gap: 0;
    gap: 12px;
    margin-bottom: 14px;
  }
  .webflow-shortcuts-page .webflow-shortcuts---toggle-and-nav {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--new--neutral--color-100, #fff);
    padding: 8px 0 10px;
  }
  .webflow-shortcuts-page .webflow-shortcuts-tabs-menu {
    width: 100%;
    padding: 5px;
    border-radius: 12px;
  }
  .webflow-shortcuts-page .webflow-shortcuts-tab-button {
    flex: 1;
    padding: 9px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Centre the inactive label (and its icon) inside each tab half. */
  .webflow-shortcuts-page .webflow-shortcuts-tab-button > div {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column-gap: 8px;
    gap: 8px;
    width: 100%;
  }

  /* Sticky category header row (keeps its existing icon + name). */
  .webflow-shortcuts-page .webflow-shortcuts-section-row.header {
    position: sticky;
    top: 66px;
    z-index: 5;
    margin: 0 0 4px;
    padding: 10px 12px;
  }

  /* Dense, perfectly aligned rows: action | keys (right-aligned, no wrap). */
  .webflow-shortcuts-page .webflow-shortcuts-section-row:not(.header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 11px 8px;
    border-bottom: 1px solid var(--new--neutral--color-300);
  }
  .webflow-shortcuts-page .webflow-shortcuts-section-row:not(.header) > .flex-horizontal {
    justify-content: flex-end;
    flex-wrap: nowrap;
    grid-column-gap: 6px;
    gap: 6px;
  }
  .webflow-shortcuts-page .webflow-shortcuts-section-row .text-100 { line-height: 1.25; }

  /* Compact keys for density (override the wide tablet padding). */
  .webflow-shortcuts-page .webflow-shortcut-key {
    min-width: 30px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .webflow-shortcuts-page .webflow-shortcut-key._38px-x-38px,
  .webflow-shortcuts-page .webflow-shortcut-key._36px-x-36px {
    width: 30px;
    height: 30px;
  }
}