/* Straight2Work — tasteful depth system + sticky mobile call bar.
   Static CSS only: no JavaScript, no animation. Readability first.
   Linked after each page's own styles so these rules win ties. */

/* ---- D1: layered shadow stacks on cards ----
   A tight crisp layer plus a wider soft ambient layer. Shadows live
   outside the text box, so readability is untouched. */
.card {
  box-shadow:
    0 1px 2px rgba(7, 26, 43, .10),
    0 10px 28px rgba(7, 26, 43, .10),
    0 28px 56px -16px rgba(7, 26, 43, .14);
}

/* Subtle hover lift on devices that have a hover pointer.
   Gated behind reduced-motion so it never bothers anyone. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 2px 3px rgba(7, 26, 43, .10),
      0 14px 34px rgba(7, 26, 43, .13),
      0 34px 64px -16px rgba(7, 26, 43, .16);
  }
}

/* ---- D5: call buttons feel physically pressable ----
   Inset top highlight plus a bottom shadow; :active presses inward.
   Existing keyboard focus styles are untouched. */
a.call {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -3px 0 rgba(0, 0, 0, .16),
    0 12px 22px -10px rgba(7, 26, 43, .5);
}
a.call:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .28),
    0 5px 12px -8px rgba(7, 26, 43, .4);
}

/* ---- Inline alternate-name notes (e.g. "on Windows 10 it is just called Devices") ---- */
.alt-name {
  font-size: .95em;
}

/* ---- Sticky mobile call bar ----
   Phone-only. One job: the call button. Body gets bottom padding on
   mobile so the bar never covers content or the footer. */
.sticky-call { display: none; }

@media (max-width: 767px) {
  body { padding-bottom: 88px; }

  .sticky-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    min-height: 64px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(7, 26, 43, .97);
    border-top: 2px solid var(--teal, #0b968e);
    box-shadow: 0 -10px 28px rgba(7, 26, 43, .4);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .01em;
  }
  .sticky-call svg { flex: none; }
  .sticky-call strong {
    color: var(--amber, #f0b44d);
    font-weight: 800;
  }
  .sticky-call:active {
    background: rgba(10, 34, 56, .99);
  }
}

/* ---- Keyboard shortcuts section (Learn page) ---- */
kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: .28em .6em;
  margin: 0 .1em;
  border: 1px solid #b9c4cc;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #eef3f6);
  color: #10222e;
  font-family: inherit;
  font-size: .92em;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(7, 26, 43, .12);
}
.tip-keys { font-size: 1.12rem; margin: .7em 0 .3em; }
.key-or { color: #47616b; font-size: .85em; margin: 0 .35em; }
.no-keys { color: #47616b; font-style: italic; }

.tip-group { margin: 2.2em 0; }
.tip-group > h3 {
  font-size: 1.5rem;
  color: #0b2a3a;
  margin: 0 0 .3em;
  padding-bottom: .35em;
  border-bottom: 3px solid var(--teal, #0b968e);
}
.tip-group-intro { color: #33454f; font-size: 1.06rem; max-width: 62ch; }

.tip {
  background: #ffffff;
  border: 1px solid #dbe4e9;
  border-radius: 14px;
  padding: 1.1em 1.25em;
  margin: 1em 0;
  box-shadow:
    0 1px 2px rgba(7, 26, 43, .08),
    0 8px 22px rgba(7, 26, 43, .08);
}
.tip h4 { margin: 0 0 .35em; font-size: 1.18rem; color: #0b2a3a; }
.tip-what { margin: .4em 0; color: #1d323d; line-height: 1.55; }
.tip-gotcha {
  margin: .7em 0 0;
  padding: .7em .9em;
  background: #f2f8fa;
  border-left: 4px solid var(--amber, #f0b44d);
  border-radius: 0 8px 8px 0;
  color: #1d323d;
  line-height: 1.5;
}
.tip-steps { margin: .5em 0; padding-left: 1.4em; color: #1d323d; line-height: 1.6; }
.tip-steps li { margin: .35em 0; }
.tip-more { color: #1d323d; line-height: 1.6; max-width: 70ch; }

.key-legend {
  background: #0b2a3a;
  color: #eaf3f6;
  border-radius: 16px;
  padding: 1.3em 1.5em;
  margin: 1.5em 0 2em;
  box-shadow:
    0 1px 2px rgba(7, 26, 43, .2),
    0 14px 34px rgba(7, 26, 43, .25);
}
.key-legend h4 { margin: 0 0 .6em; color: #ffffff; font-size: 1.2rem; }
.key-legend ul { margin: 0; padding-left: 1.3em; line-height: 1.65; }
.key-legend li { margin: .3em 0; }
.key-legend b { color: #ffd98a; }
.key-legend p { margin: .9em 0 0; color: #cfe0e7; }

/* Illustrated key strips (copy / cut / paste / undo) */
.key-strip {
  margin: 1.5em 0;
  padding: 1.1em 1.25em;
  background: #f2f8fa;
  border: 1px solid #dbe4e9;
  border-radius: 14px;
}
.key-strip figcaption { font-size: 1.05rem; color: #1d323d; margin-bottom: .8em; }
.strip-row { display: flex; flex-wrap: wrap; gap: .9em; }
.strip-key {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cfdae1;
  border-radius: 10px;
  padding: .45em .6em;
  box-shadow: 0 2px 5px rgba(7, 26, 43, .1);
}
.strip-plus { margin: 0 .3em; font-weight: 800; color: #0b968e; }
.strip-action { margin-left: .55em; font-weight: 700; color: #0b2a3a; font-size: .95rem; }

.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1em;
}
.fn-grid .tip { margin: 0; }
.fn-note {
  margin-top: 1.2em;
  padding: 1em 1.2em;
  background: #fff8e8;
  border: 1px solid #f0d9a0;
  border-radius: 12px;
  color: #1d323d;
  line-height: 1.6;
}
.fn-note h4 { margin: 0 0 .4em; color: #0b2a3a; }

.keys-cta {
  margin-top: 2em;
  font-size: 1.1rem;
  color: #1d323d;
}
.keys-cta a { font-weight: 800; }

@media (max-width: 767px) {
  .strip-row { gap: .6em; }
  kbd { font-size: .85em; }
}