/* ============================================================
   SPARK JOBS - "Three doors" app access
   Shared styling for the App Store / Android / Open-in-browser
   block, the persistent header "Log in" link, and the small
   inline note used when the Android invite link is not set yet.

   Load AFTER css/styles.css (it uses those tokens) and, on the
   tactile pages, after css/deal.css:
     <link rel="stylesheet" href="css/app-doors.css" />

   Works on the plain pages (guide / privacy / terms /
   account-deletion) and on the .deal pages (index / students /
   employers / pricing) without any extra markup.

   NOTE: css/app-access.css covers the same ground for the pages
   that dress the existing .store-btn component instead of using
   .app-door (students / employers / pricing). Both define
   .app-doors and .app-note with different layouts, so link ONE of
   the two on a given page, never both.

   The header "Log in" (.nav__actions / .nav__login) is NOT here -
   it lives in css/styles.css, which every page links.
   ============================================================ */

/* ---------- The block ---------- */
.app-doors{
  margin:22px 0;
  max-width:760px;
}
.app-doors__label{
  display:flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--forest);
  margin-bottom:10px;
}
.app-doors__label::before{
  content:"";width:7px;height:7px;flex:none;
  background:var(--spark);border-radius:2px;transform:rotate(45deg);
}
.app-doors__row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.app-doors__hint{
  margin-top:12px;
  font-size:.88rem;line-height:1.55;color:#46515f;
}

/* Stacked variant: one full-width door per line at any size */
.app-doors--stack .app-doors__row{grid-template-columns:1fr}

@media (max-width:820px){
  .app-doors__row{grid-template-columns:1fr}
}

/* ---------- A single door ---------- */
.app-door{
  display:flex;align-items:center;gap:12px;
  width:100%;min-width:0;
  padding:13px 16px;
  text-align:left;
  background:#fff;color:var(--navy);
  border:2.5px solid var(--navy);
  border-radius:16px;
  box-shadow:var(--shadow-hard-sm);
  font-family:var(--font-body);
  transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring),background .2s,color .2s;
}
.app-door:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--navy)}
.app-door:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}
.app-door:focus-visible{outline:3px solid var(--spark);outline-offset:3px}

.app-door__icon{
  width:26px;height:26px;flex:none;
  display:block;
}
.app-door__text{display:block;min-width:0}
.app-door__k{
  display:block;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  opacity:.72;
  margin-bottom:1px;
}
.app-door__b{
  display:block;
  font-family:var(--font-display);font-weight:800;
  font-size:1rem;line-height:1.16;letter-spacing:-.01em;
  overflow-wrap:anywhere;
}

/* Colours carry a doubled class on purpose: several pages set their own
   `.guide a` / `.legal a` colour, which would otherwise out-specify these
   and leave a navy door with navy text on it. */

/* Default door (no modifier): white card, navy ink */
.app-doors .app-door{color:var(--navy)}

/* Store doors: solid navy, the familiar store-button look */
.app-door.app-door--apple,
.app-door.app-door--android{
  background:var(--navy);color:#fff;
}
.app-door.app-door--apple:hover,
.app-door.app-door--android:hover{background:#16202b}

/* Browser door: first-class, brand green, slight sticker tilt */
.app-door.app-door--web{
  background:var(--forest);color:#fff;
  transform:rotate(-.7deg);
  box-shadow:var(--shadow-hard);
}
.app-door--web:hover{transform:rotate(-.7deg) translate(-1px,-1px);box-shadow:8px 8px 0 var(--navy)}
.app-door--web:active{transform:rotate(-.7deg) translate(2px,2px);box-shadow:2px 2px 0 var(--navy)}
.app-door--web .app-door__k{opacity:.86}

/* A small sticker flag (e.g. "no install") a door can carry */
.app-door{position:relative}
.app-door__flag{
  position:absolute;top:-11px;right:10px;
  font-family:var(--font-mono);font-size:.56rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  background:var(--amber);color:#3a2400;
  border:2px solid var(--navy);border-radius:999px;
  padding:2px 8px;
  white-space:nowrap;
}

/* Waiting on the Android invite link: still focusable and readable,
   visibly not ready. js/app.js adds this when ANDROID_APP_URL is the
   placeholder, and the door reveals .app-note instead of navigating. */
.app-door.is-pending,
.app-door.app-door--android.is-pending{
  background:#fff;color:var(--navy);
  border-style:dashed;
  box-shadow:none;
  cursor:default;
}
.app-door.is-pending:hover,
.app-door.is-pending:active{transform:none;box-shadow:none;background:#fff}
.app-door.is-pending .app-door__k{opacity:.6}

/* On a dark band, flip the store doors so they stay visible */
.app-doors--on-dark .app-doors__label{color:var(--amber)}
.app-doors--on-dark .app-doors__hint{color:rgba(233,243,233,.8)}
.app-doors--on-dark .app-door--apple,
.app-doors--on-dark .app-door--android{background:#fff;color:var(--navy);border-color:#fff}
.app-doors--on-dark .app-door--apple:hover,
.app-doors--on-dark .app-door--android:hover{background:#fff}
.app-doors--on-dark .app-door{box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.app-doors--on-dark .app-door:hover{box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.app-doors--on-dark .app-door.is-pending{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.app-doors--on-dark .app-door.is-pending:hover{background:transparent}

/* ---------- Inline note (Android invite link not pasted yet) ---------- */
.app-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:10px;padding:9px 13px;
  background:#FFF7E6;color:var(--navy);
  border:2px solid var(--navy);border-left-width:6px;
  border-radius:10px;
  font-size:.87rem;line-height:1.5;font-weight:600;
  max-width:60ch;
}
.app-note[hidden]{display:none}
/* js/app.js reveals the note by clearing [hidden] and adding .is-in.
   It sets the note's text itself, so any markup inside is a no-JS fallback. */
.app-note.is-in{animation:app-note-in .28s var(--ease-spring) both}
@keyframes app-note-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.app-note__k{
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  flex:none;padding-top:.25em;
}
.app-note a{color:var(--navy);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* ---------- Header "Log in" ----------
   Deliberately NOT styled here. .nav__actions and .nav__login live in
   css/styles.css, the one stylesheet every page links, so the header is
   identical site-wide. This block used to be a third copy of those rules. */

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  .app-note.is-in{animation:none}
  .app-door,
  .nav__login{transition:none}
  .app-door:hover,
  .app-door:active{transform:none}
  .app-door--web:hover,
  .app-door--web:active{transform:rotate(-.7deg)}
}