/* JeffsFlix web: Apple's look and the shared header and footer, kit v1.4
   (theleeorg/jeffsflix-branding, ui/README.md section 6). Copy this file into a product unchanged,
   after tokens.css, which it reads for the violet and the touch size.

   Every JeffsFlix web page draws its header and footer from this file and from the markup in
   ui/site.html, so jeffsflix.com and my.jeffsflix.com never draw their own. The colour roles are
   Apple's grouped colours in light and dark, as the device is set, with JeffsFlix's Signal Violet as
   the one accent; the type is the system font, the same as the apps. Class names start `jf-` and
   role names `--jfs-`, so a product's own stylesheet can sit beside this one without a clash. */

:root {
  color-scheme: light dark;
  --jfs-bg: #f2f2f7;
  --jfs-card: #ffffff;
  --jfs-fill: rgba(118, 118, 128, 0.12);
  --jfs-line: rgba(60, 60, 67, 0.2);
  --jfs-line-strong: #8a8a8e;
  --jfs-label: #000000;
  --jfs-label-2: #6c6c70;
  --jfs-bar: rgba(249, 249, 249, 0.9);
  --jfs-accent: var(--jf-signal);
  --jfs-accent-text: var(--jf-deep);
  --jfs-button: var(--jf-deep);
  --jfs-button-pressed: var(--jf-button-hover);
  --jfs-on-button: #ffffff;
  --jfs-hit: var(--jf-hit);
  --jfs-radius: 12px;
  --jfs-gutter: 16px;
  --jfs-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jfs-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --jfs-bg: #000000;
    --jfs-card: #1c1c1e;
    --jfs-fill: rgba(118, 118, 128, 0.24);
    --jfs-line: rgba(84, 84, 88, 0.65);
    --jfs-line-strong: #8e8e93;
    --jfs-label: #ffffff;
    --jfs-label-2: #98989f;
    --jfs-bar: rgba(22, 22, 23, 0.9);
    --jfs-accent-text: var(--jf-violet-text);
  }
}

@media (min-width: 834px) {
  :root { --jfs-gutter: 24px; }
}

/* The header: the icon tile and the product's name on the left, one action on the right
   (Sign in on jeffsflix.com, Account on my.jeffsflix.com). */
.jf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) var(--jfs-gutter) 10px;
  font-family: var(--jfs-font);
}
.jf-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--jfs-hit);
  color: var(--jfs-label);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
}
.jf-brand img { width: 28px; height: 28px; border-radius: 7px; }
.jf-top-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--jfs-hit);
  padding: 0 4px;
  color: var(--jfs-accent-text);
  text-decoration: none;
  font-size: 17px;
}
.jf-top-action:hover { text-decoration: underline; }

/* The footer: Help · Privacy · Support, each on jeffsflix.com. */
.jf-footer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px var(--jfs-gutter) max(24px, env(safe-area-inset-bottom));
  font-family: var(--jfs-font);
  font-size: 15px;
}
.jf-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jf-footer li + li::before {
  content: "·";
  color: var(--jfs-label-2);
  padding: 0 4px;
}
.jf-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--jfs-hit);
  padding: 0 8px;
  color: var(--jfs-label-2);
  text-decoration: none;
}
.jf-footer a:hover { color: var(--jfs-accent-text); text-decoration: underline; }
.jf-footer a[aria-current="page"] { color: var(--jfs-label); }

/* Above a tab bar fixed at the foot of a phone's screen (my.jeffsflix.com), the footer leaves room
   for it; from 834 px the tabs sit in the header and the room is not needed. */
.jf-footer.jf-above-tabs { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 834px) {
  .jf-footer.jf-above-tabs { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

.jf-top a:focus-visible,
.jf-footer a:focus-visible {
  outline: 2px solid var(--jfs-accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}