/*
 * ============================================
 * Winged Reverie — Mobile / responsive overrides
 * Loaded last, after style.css, fanatically.css, fanupdate.css
 * ============================================
 */

/* -----------------------------------------
   Tablets — the desktop layout uses fixed
   960px/913px widths that overflow below
   that, regardless of device type
----------------------------------------- */
@media (max-width: 1024px) {
  #wrapper {
    max-width: 100%;
    width: 100%;
  }

  #header,
  #title,
  #content {
    width: calc(100% - 32px);
  }
}

/* -----------------------------------------
   Phones
----------------------------------------- */
@media (max-width: 768px) {
  #wrapper {
    padding-bottom: 40px;
    padding-top: 0;
  }

  #header {
    border-radius: 20px;
    height: auto;
    aspect-ratio: 913 / 560;
    margin: 12px auto 8px;
  }

  #title {
    margin: 4px auto 8px;
  }

  #navigation {
    padding: 6px 8px;
  }

  #navigation a {
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin: 3px 4px;
    padding: 7px 12px;
  }

  #content {
    border-radius: 24px;
    margin: 12px auto 24px;
    padding: 24px 20px;
  }

  h1 {
    font-size: 1.9rem;
    margin: 28px 0 16px;
  }

  /* Generic section headings (not the fanatically page-card h2s, which
     have their own higher-specificity mobile sizing already) */
  h2 {
    font-size: 1.5rem;
  }

  blockquote {
    padding: 20px 22px;
  }

  blockquote::before,
  blockquote::after {
    font-size: 2rem;
  }

  #content input:not([type="submit"]):not([type="button"]),
  #content textarea,
  #content select,
  #fanupdate input:not([type="submit"]):not([type="button"]),
  #fanupdate textarea,
  #fanupdate select,
  #newComment input:not([type="submit"]):not([type="button"]),
  #newComment textarea,
  #newComment select {
    box-sizing: border-box;
    width: 100%;
  }

  /* Comment/search fields sit inside #content, so style.css's #content
     input rule (12px 18px padding) beats fanupdate.css's own smaller
     input rule regardless of load order — tighten explicitly here so
     they match FanUpdate's intended compact sizing on phones. */
  #fanupdate input,
  #fanupdate select,
  #newComment input,
  #newComment select {
    font-size: 0.8rem;
    padding: 8px 12px;
  }

  #fanupdate input[type="submit"],
  #fanupdate input[type="button"] {
    width: auto;
  }

  /* Collective stats widget */
  .collective-stats {
    padding: 1.1rem 1.2rem;
  }

  .collective-stats .stats-list {
    gap: 0.4rem 1rem;
  }

  .collective-stats .stats-extra {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  /* Kim (member-by-fanlisting) rows: fixed 180px offsets don't fit */
  .fan-kim-name {
    min-width: 0;
    width: 100%;
  }

  .fan-kim-notes {
    margin-left: 0;
  }

  /* FanUpdate comment form: floated fixed-width labels overlap on narrow
     screens — stack label above field instead */
  #fanupdate label,
  #newComment label {
    float: none;
    padding-top: 0;
    text-align: left;
    width: 100%;
  }

  #fanupdate label.checkbox {
    align-items: center;
    display: flex;
  }

  img.gravatar {
    float: none;
    margin: 0 0 0.8rem;
  }

  /* Lightbox images floated beside text get cramped on phones */
  a.fu-lightbox.fu-img-left,
  a.fu-lightbox.fu-img-right {
    float: none;
    display: block;
    margin: 0 0 0.9rem;
  }

  /* FanUpdate entries + comments: roomy desktop padding is too much on
     a narrow content box */
  #fanupdate .fu-entry {
    padding: 1.2rem 1.2rem;
  }

  #comments,
  #newComment {
    margin-top: 1.8rem;
    padding-top: 1.4rem;
  }

  #fanupdate .fu-comment {
    padding: 0.9rem 1rem;
  }

  /* Search/archive line: right-aligned mixed text+form wraps badly on
     narrow screens */
  div.archivelink {
    text-align: left;
  }

  div.archivelink form p {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
  }

  div.archivelink input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  div.credit {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
  }
}

/* -----------------------------------------
   Small phones
----------------------------------------- */
@media (max-width: 480px) {
  html, body {
    font-size: 16px;
  }

  #navigation {
    padding: 4px 6px;
  }

  #navigation a {
    font-size: 0.68rem;
    margin: 2px 3px;
    padding: 6px 10px;
  }

  h1 {
    font-size: 1.6rem;
  }

  h1::after {
    width: 44px;
  }

  #content {
    padding: 20px 16px;
  }
}